diff --git a/change/@microsoft-fast-foundation-12c0b3c8-515f-4b6f-a47b-0d6124919595.json b/change/@microsoft-fast-foundation-12c0b3c8-515f-4b6f-a47b-0d6124919595.json new file mode 100644 index 00000000000..9cbc2fac824 --- /dev/null +++ b/change/@microsoft-fast-foundation-12c0b3c8-515f-4b6f-a47b-0d6124919595.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Import icons for fast-foundation stories", + "packageName": "@microsoft/fast-foundation", + "email": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/web-components/fast-foundation/.storybook/main.cjs b/packages/web-components/fast-foundation/.storybook/main.cjs index c2c8d284d0a..12f45fe5863 100644 --- a/packages/web-components/fast-foundation/.storybook/main.cjs +++ b/packages/web-components/fast-foundation/.storybook/main.cjs @@ -24,6 +24,13 @@ module.exports = { hints: false, }; config.module.rules = [ + { + test: /\.svg$/, + loader: "svg-inline-loader", + options: { + removeSVGTagAttrs: false, + }, + }, { test: /\.ts$/, loader: "ts-loader", @@ -42,7 +49,6 @@ module.exports = { }, }, ]; - config.resolve.plugins = [ ...(config.resolve.plugins ?? []), new ResolveTypescriptPlugin({ diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json index 56eb31c4211..f248c7179f3 100644 --- a/packages/web-components/fast-foundation/package.json +++ b/packages/web-components/fast-foundation/package.json @@ -87,6 +87,7 @@ "rollup": "^2.71.1", "source-map-loader": "^0.2.4", "source-map": "^0.7.3", + "svg-inline-loader": "^0.8.2", "ts-loader": "^7.0.2", "ts-node": "^8.9.1", "tsconfig-paths": "^3.9.0", diff --git a/packages/web-components/fast-foundation/src/__test__/global.d.ts b/packages/web-components/fast-foundation/src/__test__/global.d.ts index fb40d449329..592f6bf2a6b 100644 --- a/packages/web-components/fast-foundation/src/__test__/global.d.ts +++ b/packages/web-components/fast-foundation/src/__test__/global.d.ts @@ -8,3 +8,8 @@ declare global { } export {}; + +declare module "*.svg" { + const content: any; + export default content; +} diff --git a/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts b/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts index 339ec753a10..d5912863b09 100644 --- a/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts +++ b/packages/web-components/fast-foundation/src/accordion-item/stories/accordion-item.register.ts @@ -1,4 +1,6 @@ import { css } from "@microsoft/fast-element"; +import chevronDownIcon from "../../../statics/svg/chevron_down_12_regular.svg"; +import chevronUpIcon from "../../../statics/svg/chevron_up_12_regular.svg"; import { FASTAccordionItem } from "../accordion-item.js"; import { accordionItemTemplate } from "../accordion-item.template.js"; @@ -128,6 +130,9 @@ const styles = css` FASTAccordionItem.define({ name: "fast-accordion-item", - template: accordionItemTemplate(), + template: accordionItemTemplate({ + collapsedIcon: chevronDownIcon, + expandedIcon: chevronUpIcon, + }), styles, }); diff --git a/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts b/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts index f9b96f4bb23..c303ab578e0 100644 --- a/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts +++ b/packages/web-components/fast-foundation/src/combobox/stories/combobox.register.ts @@ -1,5 +1,5 @@ -import { html } from "@microsoft/fast-element"; import { css } from "@microsoft/fast-element"; +import chevronIcon from "../../../statics/svg/chevron_down_12_regular.svg"; import { FASTCombobox } from "../combobox.js"; import { comboboxTemplate } from "../combobox.template.js"; @@ -202,20 +202,7 @@ const styles = css` FASTCombobox.define({ name: "fast-combobox", template: comboboxTemplate({ - indicator: /* html */ html` - - - - `, + indicator: chevronIcon, }), styles, shadowOptions: { diff --git a/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts b/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts index 43ac2bd86ad..a66789a40f8 100644 --- a/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts +++ b/packages/web-components/fast-foundation/src/flipper/stories/flipper.register.ts @@ -1,5 +1,6 @@ -import { html } from "@microsoft/fast-element"; import { css } from "@microsoft/fast-element"; +import chevronLeftIcon from "../../../statics/svg/chevron_left_16_regular.svg"; +import chevronRightIcon from "../../../statics/svg/chevron_right_16_regular.svg"; import { FASTFlipper } from "../flipper.js"; import { flipperTemplate } from "../flipper.template.js"; @@ -86,20 +87,8 @@ const styles = css` FASTFlipper.define({ name: "fast-flipper", template: flipperTemplate({ - next: /* html */ html` - - - - `, - previous: /* html */ html` - - - - `, + next: chevronRightIcon, + previous: chevronLeftIcon, }), styles, }); diff --git a/packages/web-components/fast-foundation/src/flipper/stories/flipper.stories.ts b/packages/web-components/fast-foundation/src/flipper/stories/flipper.stories.ts index a96a6657bc3..3846cd5bbe6 100644 --- a/packages/web-components/fast-foundation/src/flipper/stories/flipper.stories.ts +++ b/packages/web-components/fast-foundation/src/flipper/stories/flipper.stories.ts @@ -19,7 +19,7 @@ export default { hiddenFromAT: true, }, argTypes: { - direction: { control: "select", options: Object.values(FlipperDirection) }, + direction: { control: "radio", options: Object.values(FlipperDirection) }, disabled: { control: "boolean" }, hiddenFromAT: { control: "boolean" }, }, diff --git a/packages/web-components/fast-foundation/src/select/stories/select.register.ts b/packages/web-components/fast-foundation/src/select/stories/select.register.ts index d05be828f77..9056d41958e 100644 --- a/packages/web-components/fast-foundation/src/select/stories/select.register.ts +++ b/packages/web-components/fast-foundation/src/select/stories/select.register.ts @@ -1,4 +1,5 @@ -import { css, ElementStyles, html } from "@microsoft/fast-element"; +import { css, ElementStyles } from "@microsoft/fast-element"; +import chevronIcon from "../../../statics/svg/chevron_down_12_regular.svg"; import { FASTSelect } from "../select.js"; import { selectTemplate } from "../select.template.js"; @@ -205,20 +206,7 @@ export class Select extends FASTSelect { Select.define({ name: "fast-select", template: selectTemplate({ - indicator: /* html */ html` - - - - `, + indicator: chevronIcon, }), styles, }); diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_down_12_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_down_12_regular.svg new file mode 100644 index 00000000000..43343fce2de --- /dev/null +++ b/packages/web-components/fast-foundation/statics/svg/chevron_down_12_regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_left_16_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_left_16_regular.svg new file mode 100644 index 00000000000..77873878ce9 --- /dev/null +++ b/packages/web-components/fast-foundation/statics/svg/chevron_left_16_regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_right_16_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_right_16_regular.svg new file mode 100644 index 00000000000..78b12163a6e --- /dev/null +++ b/packages/web-components/fast-foundation/statics/svg/chevron_right_16_regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web-components/fast-foundation/statics/svg/chevron_up_12_regular.svg b/packages/web-components/fast-foundation/statics/svg/chevron_up_12_regular.svg new file mode 100644 index 00000000000..6bbb6149f18 --- /dev/null +++ b/packages/web-components/fast-foundation/statics/svg/chevron_up_12_regular.svg @@ -0,0 +1 @@ + \ No newline at end of file