chore: import icons for fast-foundation stories (#6607)

* Import icons for fast-foundation stories

* Change files

* Review comments

* Switched from Fluent package to local svg

* Fix yarn.lock

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": "[email protected]",
+  "dependentChangeType": "none"
+}

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({

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",

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;
+}

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,
 });

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`
-            <svg
-                class="select-indicator"
-                part="select-indicator"
-                viewBox="0 0 12 7"
-                width="12"
-                height="7"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
-                />
-            </svg>
-        `,
+        indicator: chevronIcon,
     }),
     styles,
     shadowOptions: {

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`
-            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z"
-                />
-            </svg>
-        `,
-        previous: /* html */ html`
-            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M11.273 15.977L3.29 8 11.273.023l.704.704L4.71 8l7.266 7.273-.704.704z"
-                />
-            </svg>
-        `,
+        next: chevronRightIcon,
+        previous: chevronLeftIcon,
     }),
     styles,
 });

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" },
     },

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`
-            <svg
-                class="select-indicator"
-                part="select-indicator"
-                viewBox="0 0 12 7"
-                width="12"
-                height="7"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
-                />
-            </svg>
-        `,
+        indicator: chevronIcon,
     }),
     styles,
 });