diff --git a/cspell.json b/cspell.json index 6332d3e86..8d1293a94 100644 --- a/cspell.json +++ b/cspell.json @@ -176,7 +176,8 @@ "WCAG", "webawesome", "WEBP", - "Webpacker" + "Webpacker", + "xmark" ], "ignorePaths": [ "package.json", diff --git a/docs/_includes/component.njk b/docs/_includes/component.njk index d2153d54a..3d2e5f2d8 100644 --- a/docs/_includes/component.njk +++ b/docs/_includes/component.njk @@ -155,7 +155,7 @@ {% if prop.reflects %} - + {% endif %} diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index a34f47bbb..ffd26d4c1 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -86,13 +86,13 @@
- Code + Code - Star + Star - Follow + Follow
diff --git a/docs/_utilities/code-previews.cjs b/docs/_utilities/code-previews.cjs index 9e9fbfb7c..59daefcce 100644 --- a/docs/_utilities/code-previews.cjs +++ b/docs/_utilities/code-previews.cjs @@ -68,7 +68,7 @@ module.exports = function (doc, options) {
${code.textContent}
- +
diff --git a/docs/_utilities/markdown.cjs b/docs/_utilities/markdown.cjs index 47b471e93..93d766d00 100644 --- a/docs/_utilities/markdown.cjs +++ b/docs/_utilities/markdown.cjs @@ -24,16 +24,16 @@ markdown.use(markdownItReplaceIt); // Callouts ['tip', 'warning', 'danger'].forEach(type => { const variant = type === 'tip' ? 'brand' : type; - let icon = 'info-circle'; - if (type === 'warning') icon = 'exclamation-circle'; - if (type === 'danger') icon = 'exclamation-triangle'; + let icon = 'circle-info'; + if (type === 'warning') icon = 'circle-exclamation'; + if (type === 'danger') icon = 'triangle-exclamation'; markdown.use(markdownItContainer, type, { render: function (tokens, idx) { if (tokens[idx].nesting === 1) { return ` - + `; } return '\n'; diff --git a/docs/assets/scripts/search.js b/docs/assets/scripts/search.js index 26bbed684..7241e0bc3 100644 --- a/docs/assets/scripts/search.js +++ b/docs/assets/scripts/search.js @@ -30,7 +30,7 @@ aria-activedescendant > @@ -44,8 +44,8 @@
No matching pages
@@ -297,16 +297,16 @@ icon = 'book'; } if (page.url.includes('components/')) { - icon = 'puzzle'; + icon = 'puzzle-piece'; } if (page.url.includes('tokens/')) { - icon = 'palette2'; + icon = 'swatchbook'; } if (page.url.includes('utilities/')) { icon = 'wrench'; } if (page.url.includes('tutorials/')) { - icon = 'joystick'; + icon = 'gamepad'; } li.classList.add('search__result'); diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md index 18f30d4c8..10eab0a52 100644 --- a/docs/pages/components/alert.md +++ b/docs/pages/components/alert.md @@ -7,7 +7,7 @@ layout: component ```html:preview - + This is a standard alert. You can customize its content and even the icon. ``` @@ -18,7 +18,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( - + This is a standard alert. You can customize its content and even the icon. ); @@ -36,7 +36,7 @@ Set the `variant` attribute to change the alert's variant. ```html:preview - + This is super informative
You can tell by how pretty the alert is. @@ -44,7 +44,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your changes have been saved
You can safely exit the app now. @@ -52,7 +52,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your settings have been updated
Settings will take effect on next login. @@ -60,7 +60,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your session has ended
Please login again to continue. @@ -68,7 +68,7 @@ Set the `variant` attribute to change the alert's variant.
- + Your account has been deleted
We're very sorry to see you go! @@ -81,7 +81,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> - + This is super informative
You can tell by how pretty the alert is. @@ -90,7 +90,7 @@ const App = () => (
- + Your changes have been saved
You can safely exit the app now. @@ -99,7 +99,7 @@ const App = () => (
- + Your settings have been updated
Settings will take effect on next login. @@ -108,7 +108,7 @@ const App = () => (
- + Your session has ended
Please login again to continue. @@ -117,7 +117,7 @@ const App = () => (
- + Your account has been deleted
We're very sorry to see you go! @@ -132,7 +132,7 @@ Add the `closable` attribute to show a close button that will hide the alert. ```html:preview - + You can close this alert any time! @@ -159,7 +159,7 @@ const App = () => { return ( - + You can close this alert any time! ); @@ -193,7 +193,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti Show Alert - + This alert will automatically hide itself after three seconds, unless you interact with it. @@ -236,7 +236,7 @@ const App = () => { setOpen(false)}> - + This alert will automatically hide itself after three seconds, unless you interact with it. @@ -262,31 +262,31 @@ You should always use the `closable` attribute so users can dismiss the notifica Danger - + This is super informative
You can tell by how pretty the alert is. - + Your changes have been saved
You can safely exit the app now. - + Your settings have been updated
Settings will take effect on next login. - + Your session has ended
Please login again to continue. - + Your account has been deleted
We're very sorry to see you go! @@ -344,35 +344,35 @@ const App = () => { - + This is super informative
You can tell by how pretty the alert is. - + Your changes have been saved
You can safely exit the app now. - + Your settings have been updated
Settings will take effect on next login. - + Your session has ended
Please login again to continue. - + Your account has been deleted
We're very sorry to see you go! @@ -404,13 +404,13 @@ For convenience, you can create a utility that emits toast notifications with a } // Custom function to emit toast notifications - function notify(message, variant = 'brand', icon = 'info-circle', duration = 3000) { + function notify(message, variant = 'brand', icon = 'circle-info', duration = 3000) { const alert = Object.assign(document.createElement('wa-alert'), { variant, closable: true, duration: duration, innerHTML: ` - + ${escapeHtml(message)} ` }); diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md index c1c2a7dc4..f02fefc7d 100644 --- a/docs/pages/components/avatar.md +++ b/docs/pages/components/avatar.md @@ -57,13 +57,13 @@ const App = () => ( When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon. ```html:preview - + ``` ```jsx:react import WaAvatar from '@shoelace-style/shoelace/dist/react/avatar'; -const App = () => ; +const App = () => ; ``` ### Custom Icons @@ -72,15 +72,15 @@ When no image or initials are set, an icon will be shown. The default avatar sho ```html:preview - + - + - + ``` diff --git a/docs/pages/components/breadcrumb-item.md b/docs/pages/components/breadcrumb-item.md index ea5addc6f..733d129ce 100644 --- a/docs/pages/components/breadcrumb-item.md +++ b/docs/pages/components/breadcrumb-item.md @@ -8,7 +8,7 @@ layout: component ```html:preview - + Home Clothing diff --git a/docs/pages/components/breadcrumb.md b/docs/pages/components/breadcrumb.md index 640a1164e..c897b5524 100644 --- a/docs/pages/components/breadcrumb.md +++ b/docs/pages/components/breadcrumb.md @@ -73,7 +73,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it ```html:preview - + First Second Third @@ -82,7 +82,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
- + First Second Third @@ -106,7 +106,7 @@ import WaBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-ite const App = () => ( <> - + First Second Third @@ -115,7 +115,7 @@ const App = () => (
- + First Second Third @@ -140,7 +140,7 @@ Use the `prefix` slot to add content before any breadcrumb item. ```html:preview - + Home Articles @@ -156,7 +156,7 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( - + Home Articles @@ -175,7 +175,7 @@ Use the `suffix` slot to add content after any breadcrumb item. Policies Security - + ``` @@ -191,7 +191,7 @@ const App = () => ( Policies Security - + ); @@ -209,8 +209,8 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op Web Design - - + + Web Design @@ -241,8 +241,8 @@ const App = () => ( Web Design - - + + diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md index de05300e4..15976ca1d 100644 --- a/docs/pages/components/button-group.md +++ b/docs/pages/components/button-group.md @@ -401,34 +401,34 @@ Create interactive toolbars with button groups.
- + - + - + - + - + - + - + - +
@@ -458,12 +458,12 @@ const App = () => ( - + - + @@ -471,17 +471,17 @@ const App = () => ( - + - + - + @@ -489,17 +489,17 @@ const App = () => ( - + - + - + diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md index 7ade3885e..f54fd5b83 100644 --- a/docs/pages/components/button.md +++ b/docs/pages/components/button.md @@ -229,54 +229,54 @@ Use the `prefix` and `suffix` slots to add icons. ```html:preview - + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open ``` @@ -288,18 +288,18 @@ import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> - + Settings - + Refresh - - + + Open @@ -307,18 +307,18 @@ const App = () => (
- + Settings - + Refresh - - + + Open @@ -326,18 +326,18 @@ const App = () => (
- + Settings - + Refresh - - + + Open diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md index 061de2fdc..56c67c1e8 100644 --- a/docs/pages/components/card.md +++ b/docs/pages/components/card.md @@ -133,7 +133,7 @@ Headers can be used to display titles and more.
Header Title - +
This card has a header. You can put all sorts of things in it! @@ -189,7 +189,7 @@ const App = () => (
Header Title - +
This card has a header. You can put all sorts of things in it! diff --git a/docs/pages/components/copy-button.md b/docs/pages/components/copy-button.md index 838929400..60f4c9e4f 100644 --- a/docs/pages/components/copy-button.md +++ b/docs/pages/components/copy-button.md @@ -51,9 +51,9 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico ```html:preview - - - + + + ``` @@ -64,9 +64,9 @@ import { WaIcon } from '@shoelace-style/shoelace/dist/react/icon'; const App = () => ( <> - - - + + + ); @@ -179,9 +179,9 @@ You can customize the button to your liking with CSS. ```html:preview - - - + + + @@ -108,13 +108,13 @@ const App = () => ( Use the `href` attribute to convert the button to a link. ```html:preview - + ``` ```jsx:react import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; -const App = () => ; +const App = () => ; ``` ### Icon Button with Tooltip @@ -123,7 +123,7 @@ Wrap a tooltip around an icon button to provide contextual information to the us ```html:preview - + ``` @@ -133,7 +133,7 @@ import WaTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; const App = () => ( - + ); ``` @@ -143,11 +143,11 @@ const App = () => ( Use the `disabled` attribute to disable the icon button. ```html:preview - + ``` ```jsx:react import WaIconButton from '@shoelace-style/shoelace/dist/react/icon-button'; -const App = () => ; +const App = () => ; ``` diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md index 054418a2f..5428e8c38 100644 --- a/docs/pages/components/icon.md +++ b/docs/pages/components/icon.md @@ -19,23 +19,11 @@ All available icons in the `default` icon library are shown below. Click or tap ``` -
-
- - - - - Outlined - Filled - All icons - -
-
- -
- ## Examples +TODO - show how to use `family` and `variant` attributes. +TODO - show how to use FA pro via `data-webawesome-kit="..."` + ### Colors Icons inherit their color from the current text color. Thus, you can set the `color` property on the `` element or an ancestor to change the color. @@ -44,23 +32,23 @@ Icons inherit their color from the current text color. Thus, you can set the `co
- +
- +
- +
- + @@ -77,23 +65,23 @@ const App = () => (
- +
- +
- +
- + @@ -112,17 +100,17 @@ Icons are sized relative to the current font size. To change their size, set the
- + - + - - + + @@ -138,17 +126,17 @@ const App = () => (
- + - + - - + + @@ -163,13 +151,13 @@ const App = () => ( For non-decorative icons, use the `label` attribute to announce it to assistive devices. ```html:preview - + ``` ```jsx:react import WaIcon from '@shoelace-style/shoelace/dist/react/icon'; -const App = () => ; +const App = () => ; ``` ### Custom Icons @@ -680,190 +668,3 @@ If you want to change the icons Web Awesome uses internally, you can register an }); ``` - - - - - diff --git a/docs/pages/components/input.md b/docs/pages/components/input.md index 529913edd..d9ca7afe2 100644 --- a/docs/pages/components/input.md +++ b/docs/pages/components/input.md @@ -205,18 +205,18 @@ Use the `prefix` and `suffix` slots to add icons. ```html:preview - - + +
- - + +
- - + + ``` @@ -227,18 +227,18 @@ import WaInput from '@shoelace-style/shoelace/dist/react/input'; const App = () => ( <> - - + +
- - + +
- - + + ); diff --git a/docs/pages/components/menu-item.md b/docs/pages/components/menu-item.md index 5bc1f23cf..6125d8ec7 100644 --- a/docs/pages/components/menu-item.md +++ b/docs/pages/components/menu-item.md @@ -16,11 +16,11 @@ layout: component Prefix Icon - + Suffix Icon - + ``` @@ -46,11 +46,11 @@ const App = () => ( Prefix Icon - + Suffix Icon - + ); @@ -96,12 +96,12 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s ```html:preview - + Home - + Messages 12 @@ -109,7 +109,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s - + Settings @@ -127,12 +127,12 @@ import WaMenuItem from '@shoelace-style/shoelace/dist/react/menu-item'; const App = () => ( - + Home - + Messages 12 @@ -142,7 +142,7 @@ const App = () => ( - + Settings diff --git a/docs/pages/components/option.md b/docs/pages/components/option.md index bdf900bc3..ebf5b510d 100644 --- a/docs/pages/components/option.md +++ b/docs/pages/components/option.md @@ -62,21 +62,21 @@ Add icons to the start and end of menu items using the `prefix` and `suffix` slo ```html:preview - + Email - + - + Phone - + - + Chat - + ``` diff --git a/docs/pages/components/progress-bar.md b/docs/pages/components/progress-bar.md index 1ffe63a60..3352e2386 100644 --- a/docs/pages/components/progress-bar.md +++ b/docs/pages/components/progress-bar.md @@ -58,8 +58,8 @@ Use the default slot to show a value.
- - + + ``` @@ -219,7 +219,7 @@ import WaRating from '@shoelace-style/shoelace/dist/react/rating'; const App = () => ( ''} + getSymbol={() => ''} style={{ '--symbol-color-active': '#ff4136' }} /> ); @@ -238,7 +238,7 @@ You can also use the `getSymbol` property to render different icons based on val const rating = document.querySelector('.rating-emojis'); rating.getSymbol = value => { - const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing']; + const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh']; return ``; }; @@ -248,7 +248,7 @@ You can also use the `getSymbol` property to render different icons based on val import WaRating from '@shoelace-style/shoelace/dist/react/rating'; function getSymbol(value) { - const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing']; + const icons = ['face-angry', 'face-frown', 'face-meh', 'face-smile', 'face-laugh']; return ``; } diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md index 9488fef2e..4f1f70bb9 100644 --- a/docs/pages/components/select.md +++ b/docs/pages/components/select.md @@ -401,21 +401,21 @@ Use the `prefix` slot to prepend an icon to the control. ```html:preview - + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3 @@ -430,21 +430,21 @@ import WaSelect from '@shoelace-style/shoelace/dist/react/select'; const App = () => ( <> - + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3
- + Option 1 Option 2 Option 3 @@ -468,15 +468,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can class="custom-tag" > - + Email - + Phone - + Chat diff --git a/docs/pages/components/split-panel.md b/docs/pages/components/split-panel.md index 5e421594e..cf3ff3862 100644 --- a/docs/pages/components/split-panel.md +++ b/docs/pages/components/split-panel.md @@ -638,7 +638,7 @@ You can target the `divider` part to apply CSS properties to the divider. To add ```html:preview - +
+
- +
- +
- - + + Deciduous @@ -349,8 +349,8 @@ import WaTreeItem from '@shoelace-style/shoelace/dist/react/tree-item'; const App = () => ( - - + + Deciduous @@ -388,39 +388,39 @@ Decorative icons can be used before labels to provide hints for each node. ```html:preview - + Documents - + Photos - + birds.jpg - + kitten.jpg - + puppy.jpg - + Writing - + draft.txt - + final.pdf - + sales.xls diff --git a/docs/pages/components/visually-hidden.md b/docs/pages/components/visually-hidden.md index 634788b07..ffea0e38b 100644 --- a/docs/pages/components/visually-hidden.md +++ b/docs/pages/components/visually-hidden.md @@ -26,7 +26,7 @@ In this example, the link will open a new window. Screen readers will announce " ```html:preview Visit External Page - + opens in a new window ``` diff --git a/docs/pages/experimental/sandbox.md b/docs/pages/experimental/sandbox.md index 4ecb918c0..4c93b2740 100644 --- a/docs/pages/experimental/sandbox.md +++ b/docs/pages/experimental/sandbox.md @@ -47,31 +47,31 @@ meta: ```html:preview - + This is super informative
You can tell by how pretty the alert is.
- + Your changes have been saved
You can safely exit the app now.
- + Your settings have been updated
Settings will take affect on next login.
- + Your session has ended
Please login again to continue.
- + Your account has been deleted
We're very sorry to see you go! diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md index 8af13ad08..7fbc18f64 100644 --- a/docs/pages/experimental/themer.md +++ b/docs/pages/experimental/themer.md @@ -154,7 +154,7 @@ toc: false
- + This is the way. @@ -167,7 +167,7 @@ toc: false
- + It's a trap! @@ -181,7 +181,7 @@ toc: false
- + That's no moon. diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index 02199b2d7..9d2aceb10 100644 --- a/docs/pages/getting-started/installation.md +++ b/docs/pages/getting-started/installation.md @@ -100,8 +100,8 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Web Awesome, you'll need to set the base path. You can do this one of two ways. ```html - - + + @@ -144,7 +144,7 @@ Here's an example that loads only the button component. Again, if you're not usi ```html - + * * * Alternatively, you can set the base path manually using the exported setBasePath() function. * @@ -22,15 +22,17 @@ export function setBasePath(path: string) { */ export function getBasePath(subpath = '') { if (!basePath) { - const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[]; - const configScript = scripts.find(script => script.hasAttribute('data-web-awesome')); + // If we haven't set the base path yet, let's set it now + const el = document.querySelector('[data-webawesome]'); - if (configScript) { - // Use the data-web-awesome attribute - setBasePath(configScript.getAttribute('data-web-awesome')!); + if (el) { + // Use the data-webawesome attribute + setBasePath(el.getAttribute('data-webawesome') || ''); } else { + // Look for webawesome.js or autoloader.js + const scripts = [...document.getElementsByTagName('script')] as HTMLScriptElement[]; const fallbackScript = scripts.find(s => { - return /webawesome(\.min)?\.js($|\?)/.test(s.src) || /autoloader(\.min)?\.js($|\?)/.test(s.src); + return /webawesome\.js($|\?)/.test(s.src) || /autoloader\.js($|\?)/.test(s.src); }); let path = ''; @@ -45,3 +47,32 @@ export function getBasePath(subpath = '') { // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash. return basePath.replace(/\/$/, '') + (subpath ? `/${subpath.replace(/^\//, '')}` : ``); } + +/** Sets the library's Web Awesome kit code. */ +export function setKitCode(code: string) { + kitCode = code; +} + +/** + * Gets the library's Web Awesome kit code. + * + * The kit code is used to fetch premium assets, so it needs to be set for certain components to work correctly. This + * isn't something we can infer, so the user will need to provide it using the `data-webawesome-kit` attribute. This can + * be on any element, but ideally it should exist on the script that imports Web Awesome. + * + * + * + * Alternatively, you can set the kit code manually using the exported `setKitCode()` function. + * + */ +export function getKitCode() { + if (!kitCode) { + const el = document.querySelector('[data-webawesome-kit]'); + + if (el) { + setKitCode(el.getAttribute('data-webawesome-kit') || ''); + } + } + + return kitCode; +}