From 06135e686b51566d8a78b19fab02154ab753acdb Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 5 Dec 2023 13:55:31 -0500 Subject: [PATCH 01/10] fic code bg color --- src/themes/applied.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/themes/applied.css b/src/themes/applied.css index 81c54598c..41393d3cc 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -196,6 +196,10 @@ kbd { padding: 0.125em 0.4em; } +kbd wa-icon { + vertical-align: -2px; +} + /* Code and similar */ code, pre, @@ -204,7 +208,7 @@ samp, var { font-family: var(--wa-font-family-code); font-size: 0.975em; - background-color: var(--wa-color-neutral-fill-subtle); + background-color: color-mix(in oklab, var(--wa-color-neutral-spot), transparent 92%); border-radius: var(--wa-corners-s); padding-block: var(--wa-space-3xs); padding-inline: var(--wa-space-2xs); From 65cb3175afb560ab4c5874877449615f1f971b49 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 5 Dec 2023 17:37:06 -0500 Subject: [PATCH 02/10] update soooo many icons --- cspell.json | 3 +- docs/_includes/component.njk | 2 +- docs/_includes/default.njk | 6 +- docs/_utilities/code-previews.cjs | 2 +- docs/_utilities/markdown.cjs | 8 +- docs/assets/scripts/search.js | 12 +- docs/pages/components/alert.md | 56 ++-- docs/pages/components/avatar.md | 10 +- docs/pages/components/breadcrumb-item.md | 2 +- docs/pages/components/breadcrumb.md | 24 +- docs/pages/components/button-group.md | 32 +-- docs/pages/components/button.md | 48 ++-- docs/pages/components/card.md | 4 +- docs/pages/components/copy-button.md | 18 +- docs/pages/components/details.md | 14 +- docs/pages/components/dialog.md | 4 +- docs/pages/components/drawer.md | 4 +- docs/pages/components/dropdown.md | 4 +- docs/pages/components/icon-button.md | 36 +-- docs/pages/components/icon.md | 241 ++---------------- docs/pages/components/input.md | 24 +- docs/pages/components/menu-item.md | 20 +- docs/pages/components/option.md | 12 +- docs/pages/components/progress-bar.md | 8 +- docs/pages/components/progress-ring.md | 8 +- docs/pages/components/radio-button.md | 36 +-- docs/pages/components/rating.md | 8 +- docs/pages/components/select.md | 18 +- docs/pages/components/split-panel.md | 18 +- docs/pages/components/tree.md | 26 +- docs/pages/components/visually-hidden.md | 2 +- docs/pages/experimental/sandbox.md | 10 +- docs/pages/experimental/themer.md | 6 +- docs/pages/getting-started/installation.md | 6 +- docs/pages/getting-started/usage.md | 2 +- docs/pages/resources/changelog.md | 4 + docs/pages/resources/community.md | 6 +- docs/pages/resources/contributing.md | 2 +- scripts/build.js | 8 +- scripts/make-icons.js | 55 ---- src/components/alert/alert.component.ts | 5 +- .../animated-image.component.ts | 4 +- .../animated-image/animated-image.styles.ts | 4 +- src/components/avatar/avatar.component.ts | 2 +- .../breadcrumb/breadcrumb.component.ts | 6 +- src/components/button/button.component.ts | 14 +- src/components/button/button.styles.ts | 11 +- src/components/carousel/carousel.component.ts | 12 +- src/components/checkbox/checkbox.component.ts | 15 +- src/components/checkbox/checkbox.styles.ts | 1 + .../color-picker/color-picker.component.ts | 3 +- .../copy-button/copy-button.component.ts | 8 +- src/components/details/details.component.ts | 4 +- src/components/dialog/dialog.component.ts | 5 +- src/components/drawer/drawer.component.ts | 5 +- .../icon-button/icon-button.component.ts | 14 + src/components/icon/icon.component.ts | 14 +- src/components/icon/icon.styles.ts | 5 +- src/components/icon/library.default.ts | 43 +++- src/components/icon/library.system.ts | 225 ++++++++-------- src/components/icon/library.ts | 2 +- .../image-comparer.component.ts | 2 +- src/components/input/input.component.ts | 6 +- .../menu-item/menu-item.component.ts | 9 +- src/components/option/option.component.ts | 11 +- .../progress-bar/progress-bar.styles.ts | 2 +- src/components/radio/radio.component.ts | 10 +- src/components/radio/radio.styles.ts | 1 + src/components/rating/rating.component.ts | 3 +- src/components/select/select.component.ts | 4 +- .../tab-group/tab-group.component.ts | 2 + src/components/tab/tab.component.ts | 3 +- src/components/tag/tag.component.ts | 3 +- .../tree-item/tree-item.component.ts | 4 +- src/utilities/base-path.ts | 53 +++- 75 files changed, 610 insertions(+), 714 deletions(-) delete mode 100644 scripts/make-icons.js 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
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
- ↑ ↓ Navigate - ↲ Select + Navigate + Select Esc Close
@@ -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; +} From a67d1df89a81f8e5d1d153998eb4771094bc8c45 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 7 Dec 2023 14:57:53 -0500 Subject: [PATCH 03/10] fix error --- docs/eleventy.config.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/eleventy.config.cjs b/docs/eleventy.config.cjs index 8c671afb4..6f4172e93 100644 --- a/docs/eleventy.config.cjs +++ b/docs/eleventy.config.cjs @@ -99,7 +99,7 @@ module.exports = function (eleventyConfig) { // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited. // With Prettier 3, this means a leading pipe will exist if the line wraps. eleventyConfig.addFilter('trimPipes', content => { - return content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, ''); + return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content; }); eleventyConfig.addFilter('classNameToComponentName', className => { From 0fa8e6f5507795834cf824515a82d58b835843b3 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 7 Dec 2023 14:58:12 -0500 Subject: [PATCH 04/10] update build --- package-lock.json | 1 - package.json | 1 - scripts/build.js | 123 +++++++++++++--------------------- src/components/input/input.ts | 2 +- 4 files changed, 47 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f61a7426..41b00ad1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,7 +66,6 @@ "markdown-it-mark": "^3.0.1", "markdown-it-replace-it": "^1.0.0", "npm-check-updates": "^16.14.6", - "ora": "^7.0.1", "pascal-case": "^3.1.2", "plop": "^4.0.0", "prettier": "^3.0.3", diff --git a/package.json b/package.json index e5ac09756..db5fdd43d 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,6 @@ "markdown-it-mark": "^3.0.1", "markdown-it-replace-it": "^1.0.0", "npm-check-updates": "^16.14.6", - "ora": "^7.0.1", "pascal-case": "^3.1.2", "plop": "^4.0.0", "prettier": "^3.0.3", diff --git a/scripts/build.js b/scripts/build.js index 0675e787d..110694eab 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -8,7 +8,6 @@ import copy from 'recursive-copy'; import esbuild from 'esbuild'; import fs from 'fs/promises'; import getPort, { portNumbers } from 'get-port'; -import ora from 'ora'; import util from 'util'; import * as path from 'path'; import { readFileSync } from 'fs'; @@ -18,10 +17,8 @@ const { serve } = commandLineArgs([{ name: 'serve', type: Boolean }]); const outdir = 'dist'; const cdndir = 'cdn'; const sitedir = '_site'; -const spinner = ora({ hideCursor: false }).start(); const execPromise = util.promisify(exec); -let childProcess; -let buildResults; +let buildResults = []; const bundleDirectories = [cdndir, outdir]; let packageData = JSON.parse(readFileSync(path.join(process.cwd(), 'package.json'), 'utf-8')); @@ -34,11 +31,9 @@ const shoelaceVersion = JSON.stringify(packageData.version.toString()); async function buildTheDocs(watch = false) { return new Promise(async (resolve, reject) => { const afterSignal = '[eleventy.after]'; - - // Totally non-scientific way to handle errors. Perhaps its just better to resolve on stderr? :shrug: const errorSignal = 'Original error stack trace:'; const args = ['@11ty/eleventy', '--quiet']; - const output = []; + let isEleventyDevServerRunning = false; if (watch) { args.push('--watch'); @@ -51,35 +46,31 @@ async function buildTheDocs(watch = false) { shell: true // for Windows }); + child.stdout.setEncoding('utf8'); + child.stderr.setEncoding('utf8'); child.stdout.on('data', data => { - if (data.includes(afterSignal)) return; // don't log the signal - output.push(data.toString()); - }); + console.log(data); - child.stderr.on('data', data => { - output.push(data.toString()); - }); - - if (watch) { // The process doesn't terminate in watch mode so, before resolving, we listen for a known signal in stdout that - // tells us when the first build completes. - child.stdout.on('data', data => { - if (data.includes(afterSignal)) { - resolve({ child, output }); - } - }); + // tells us when the first build completes so we can start up Browser Sync. The 11ty dev server will keep running + // after this. + if (watch && data.includes(afterSignal)) { + isEleventyDevServerRunning = true; + resolve(); + return; + } + }); + child.stderr.on('data', data => { + console.log(data); - child.stderr.on('data', data => { - if (data.includes(errorSignal)) { - // Resolve to prevent the dev server from closing - resolve(output); - } - }); - } else { - child.on('close', () => { - resolve({ child, output }); - }); - } + // Look for a known error signal + if (data.includes(errorSignal)) { + reject({ stderr: data }); + return; + } + }); + child.on('error', error => reject(error)); + child.on('close', () => resolve()); }); } @@ -155,32 +146,33 @@ async function buildTheSource() { // // Called on SIGINT or SIGTERM to cleanup the build and child processes. // -function handleCleanup() { - buildResults.forEach(result => result.dispose()); - - if (childProcess) { - childProcess.kill('SIGINT'); - } +function exit() { + buildResults.forEach(result => { + if (result.dispose) { + result.dispose(); + } + }); process.exit(); } // -// Helper function to draw a spinner while tasks run. +// Helper function to cleanly log tasks // async function nextTask(label, action) { - spinner.text = label; - spinner.start(); - try { await action(); - spinner.stop(); - console.log(`${chalk.green('✔')} ${label}`); + process.stdout.write(`${chalk.yellow('•')} ${label}`); + process.stdout.clearLine(); + process.stdout.cursorTo(0); + process.stdout.write(`${chalk.green('✔')} ${label}\n`); } catch (err) { - spinner.stop(); - console.error(`${chalk.red('✘')} ${err}`); - if (err.stdout) console.error(chalk.red(err.stdout)); - if (err.stderr) console.error(chalk.red(err.stderr)); + process.stdout.clearLine(); + process.stdout.cursorTo(0); + process.stdout.write(`${chalk.red('✘')} ${label}\n\n`); + if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`); + if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`); + exit(); } } @@ -232,14 +224,10 @@ if (!serve) { // Launch the dev server if (serve) { - let result; - // Spin up Eleventy and Wait for the search index to appear before proceeding. The search index is generated during // eleventy.after, so it appears after the docs are fully published. This is kinda hacky, but here we are. // Kick off the Eleventy dev server with --watch and --incremental - await nextTask('Building docs', async () => { - result = await buildTheDocs(true); - }); + await nextTask('Building docs', async () => buildTheDocs()); const bs = browserSync.create(); const port = await getPort({ port: portNumbers(4000, 4999) }); @@ -263,17 +251,7 @@ if (serve) { // Launch browser sync bs.init(browserSyncConfig, () => { const url = `http://localhost:${port}`; - console.log(chalk.cyan(`\n🥾 The dev server is available at ${url}`)); - - // Log deferred output - if (result.output.length > 0) { - console.log('\n' + result.output.join('\n')); - } - - // Log output that comes later on - result.child.stdout.on('data', data => { - console.log(data.toString()); - }); + console.log(chalk.cyan(`\n🏀 The dev server is available at ${url}\n`)); }); // Rebuild and reload when source files change @@ -308,7 +286,7 @@ if (serve) { bs.reload(); } catch (err) { - console.error(chalk.red(err)); + console.error(chalk.red(err), '\n'); } }); @@ -320,18 +298,9 @@ if (serve) { // Build for production if (!serve) { - let result; - - await nextTask('Building the docs', async () => { - result = await buildTheDocs(); - }); - - // Log deferred output - if (result.output.length > 0) { - console.log('\n' + result.output.join('\n')); - } + await nextTask('Building the docs', async () => buildTheDocs()); } // Cleanup on exit -process.on('SIGINT', handleCleanup); -process.on('SIGTERM', handleCleanup); +process.on('SIGINT', exit); +process.on('SIGTERM', exit); diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 1a2ca96a7..c4dc665f0 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -3,7 +3,7 @@ import WaInput from './input.component.js'; export * from './input.component.js'; export default WaInput; -WaInput.define('wa-input'); +WaInput.define('wa-input'); //; {}}}); declare global { interface HTMLElementTagNameMap { From 81d3f22da68e6591d8873a3f8de32e7e979ee5c2 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Thu, 7 Dec 2023 15:18:56 -0500 Subject: [PATCH 05/10] fix dev server output for errors / logging --- scripts/build.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 110694eab..ef8c53c02 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -207,10 +207,6 @@ await nextTask(`Copying CDN files to "${cdndir}"`, async () => { await copy(outdir, cdndir); }); -await nextTask('Building source files', async () => { - buildResults = await buildTheSource(); -}); - // Copy the CDN build to the docs (prod only; we use a virtual directory in dev) if (!serve) { await nextTask(`Copying the build to "${sitedir}"`, async () => { @@ -227,7 +223,7 @@ if (serve) { // Spin up Eleventy and Wait for the search index to appear before proceeding. The search index is generated during // eleventy.after, so it appears after the docs are fully published. This is kinda hacky, but here we are. // Kick off the Eleventy dev server with --watch and --incremental - await nextTask('Building docs', async () => buildTheDocs()); + await nextTask('Building docs', async () => await buildTheDocs(true)); const bs = browserSync.create(); const port = await getPort({ port: portNumbers(4000, 4999) }); @@ -298,7 +294,7 @@ if (serve) { // Build for production if (!serve) { - await nextTask('Building the docs', async () => buildTheDocs()); + await nextTask('Building the docs', async () => await buildTheDocs()); } // Cleanup on exit From ffc0248e4c57a0cf3bcc751924d98c2b71e7d33a Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 7 Dec 2023 15:59:53 -0500 Subject: [PATCH 06/10] fix build --- scripts/build.js | 4 ++++ src/components/input/input.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/scripts/build.js b/scripts/build.js index ef8c53c02..8a326cf60 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -218,6 +218,10 @@ if (!serve) { }); } +await nextTask('Building source files', async () => { + buildResults = await buildTheSource(); +}); + // Launch the dev server if (serve) { // Spin up Eleventy and Wait for the search index to appear before proceeding. The search index is generated during diff --git a/src/components/input/input.ts b/src/components/input/input.ts index c4dc665f0..1a2ca96a7 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -3,7 +3,7 @@ import WaInput from './input.component.js'; export * from './input.component.js'; export default WaInput; -WaInput.define('wa-input'); //; {}}}); +WaInput.define('wa-input'); declare global { interface HTMLElementTagNameMap { From 8ae13031886382ba1b9ec8f15d6ba8cdcf56d2e7 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 7 Dec 2023 16:26:07 -0500 Subject: [PATCH 07/10] sigh --- scripts/build.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 8a326cf60..88575bbd9 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -33,7 +33,6 @@ async function buildTheDocs(watch = false) { const afterSignal = '[eleventy.after]'; const errorSignal = 'Original error stack trace:'; const args = ['@11ty/eleventy', '--quiet']; - let isEleventyDevServerRunning = false; if (watch) { args.push('--watch'); @@ -55,7 +54,6 @@ async function buildTheDocs(watch = false) { // tells us when the first build completes so we can start up Browser Sync. The 11ty dev server will keep running // after this. if (watch && data.includes(afterSignal)) { - isEleventyDevServerRunning = true; resolve(); return; } @@ -161,14 +159,14 @@ function exit() { // async function nextTask(label, action) { try { - await action(); process.stdout.write(`${chalk.yellow('•')} ${label}`); - process.stdout.clearLine(); - process.stdout.cursorTo(0); + await action(); + if (process.stdout.clearLine) process.stdout.clearLine(); + if (process.stdout.cursorTo) process.stdout.cursorTo(0); process.stdout.write(`${chalk.green('✔')} ${label}\n`); } catch (err) { - process.stdout.clearLine(); - process.stdout.cursorTo(0); + if (process.stdout.clearLine) process.stdout.clearLine(); + if (process.stdout.cursorTo) process.stdout.cursorTo(0); process.stdout.write(`${chalk.red('✘')} ${label}\n\n`); if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`); if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`); From a4f8bf94eec0169eea9378e7e848076b2e27a7a1 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 7 Dec 2023 16:26:44 -0500 Subject: [PATCH 08/10] fix --- scripts/build.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index 88575bbd9..a53279f13 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -161,12 +161,16 @@ async function nextTask(label, action) { try { process.stdout.write(`${chalk.yellow('•')} ${label}`); await action(); - if (process.stdout.clearLine) process.stdout.clearLine(); - if (process.stdout.cursorTo) process.stdout.cursorTo(0); + if (process.stdout.isTTY) { + process.stdout.clearLine(); + process.stdout.cursorTo(0); + } process.stdout.write(`${chalk.green('✔')} ${label}\n`); } catch (err) { - if (process.stdout.clearLine) process.stdout.clearLine(); - if (process.stdout.cursorTo) process.stdout.cursorTo(0); + if (process.stdout.isTTY) { + process.stdout.clearLine(); + process.stdout.cursorTo(0); + } process.stdout.write(`${chalk.red('✘')} ${label}\n\n`); if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`); if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`); From f00e8c3a652fff47cf2b4adb41b2906271cc2994 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 7 Dec 2023 16:30:37 -0500 Subject: [PATCH 09/10] prettier ci output --- scripts/build.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/scripts/build.js b/scripts/build.js index a53279f13..97d6a82b6 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -158,19 +158,22 @@ function exit() { // Helper function to cleanly log tasks // async function nextTask(label, action) { + function clearLine() { + if (process.stdout.isTTY) { + process.stdout.clearLine(); + process.stdout.cursorTo(0); + } else { + process.stdout.write('\n'); + } + } + try { process.stdout.write(`${chalk.yellow('•')} ${label}`); await action(); - if (process.stdout.isTTY) { - process.stdout.clearLine(); - process.stdout.cursorTo(0); - } + clearLine(); process.stdout.write(`${chalk.green('✔')} ${label}\n`); } catch (err) { - if (process.stdout.isTTY) { - process.stdout.clearLine(); - process.stdout.cursorTo(0); - } + clearLine(); process.stdout.write(`${chalk.red('✘')} ${label}\n\n`); if (err.stdout) process.stdout.write(`${chalk.red(err.stdout)}\n`); if (err.stderr) process.stdout.write(`${chalk.red(err.stderr)}\n`); From be1440aee0a1b8ef30ea099b4a3dbccb20c18fbb Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 11 Dec 2023 16:01:44 -0500 Subject: [PATCH 10/10] update settings --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 4165a4220..d5f76e88d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,7 +2,7 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "debug.enableStatusBarColor": false }