Add disclosure, accordion components

index.html

@@ -17,6 +17,26 @@ <h2>Welcome to THE FUTURE.</h2>
             </p>
             <h3>Components</h3>
             <pulumi-counter></pulumi-counter>
+            <pulumi-disclosure appearance="lightweight">
+                <strong slot="title">Click it!</strong>
+                <p>
+                    Here is some stuff.
+                </p>
+            </pulumi-disclosure>
+            <pulumi-accordion>
+                <pulumi-accordion-item expanded>
+                    <span slot="heading">Panel one</span>
+                    Panel one content
+                </pulumi-accordion-item>
+                <pulumi-accordion-item>
+                    <span slot="heading">Panel two</span>
+                    Panel two content
+                </pulumi-accordion-item>
+                <pulumi-accordion-item expanded>
+                    <span slot="heading">Panel three</span>
+                    Panel three content
+                </pulumi-accordion-item>
+            </pulumi-accordion>
         </main>
         <script src="./dist/app.js"></script>
     </body>

package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/pulumi/facet.git"
     },
     "dependencies": {
-        "@microsoft/fast-components": "^2.5.8",
+        "@microsoft/fast-components": "^2.6.2",
         "@microsoft/fast-element": "^1.4.1",
         "lodash-es": "^4.17.21"
     },
@@ -21,9 +21,5 @@
         "webpack": "^5.50.0",
         "webpack-cli": "^4.7.2",
         "webpack-dev-server": "^3.11.2"
-    },
-    "peerDependencies": {
-        "@microsoft/fast-components": "^2.5.8",
-        "@microsoft/fast-element": "^1.4.1"
     }
 }

src/app.ts

@@ -1,8 +1,11 @@
-import { initDesignSystem, counter } from "./";
+import { initDesignSystem, counter, disclosure, accordion, accordionItem } from "./";
 
 initDesignSystem({
     prefix: "pulumi",
     components: [
         counter(),
+        disclosure(),
+        accordion(),
+        accordionItem(),
     ],
 });

src/components/accordion/index.ts

@@ -0,0 +1,14 @@
+import { Accordion, AccordionItem, accordionTemplate, accordionItemTemplate } from "@microsoft/fast-foundation";
+import { styles } from "./styles";
+
+export const accordion = Accordion.compose({
+    baseName: "accordion",
+    template: accordionTemplate as any,
+    styles
+});
+
+export const accordionItem = AccordionItem.compose({
+    baseName: "accordion-item",
+    template: accordionItemTemplate as any,
+    styles
+});

src/components/accordion/styles.ts

@@ -0,0 +1,5 @@
+import { css } from "@microsoft/fast-element";
+
+export const styles = css`
+
+`;

src/components/disclosure/index.ts

@@ -0,0 +1,8 @@
+import { Disclosure, disclosureTemplate } from "@microsoft/fast-foundation";
+// import { styles } from "./styles";
+
+export const disclosure = Disclosure.compose({
+    baseName: "disclosure",
+    template: disclosureTemplate as any,
+    // styles
+});

src/components/disclosure/styles.ts

@@ -0,0 +1,5 @@
+import { css } from "@microsoft/fast-element";
+
+export const styles = css`
+
+`;

src/components/index.ts

@@ -1 +1,3 @@
 export { counter } from "./counter";
+export { disclosure } from "./disclosure";
+export { accordion, accordionItem } from "./accordion";

src/index.ts

@@ -1,8 +1,7 @@
 import { DesignSystem, DesignToken } from "@microsoft/fast-foundation";
-import { accentPalette, neutralPalette, PaletteRGB, provideFASTDesignSystem, SwatchRGB, fastButton, bodyFont, typeRampBaseFontSize, controlCornerRadius, typeRampBaseLineHeight, baseLayerLuminance, fillColor, neutralLayer1, neutralLayerCardContainer, StandardLuminance, neutralForegroundRest } from "@microsoft/fast-components";
+import { accentPalette, neutralPalette, PaletteRGB, provideFASTDesignSystem, SwatchRGB, bodyFont, typeRampBaseFontSize, controlCornerRadius, typeRampBaseLineHeight, baseLayerLuminance, fillColor, neutralLayer1, neutralLayerCardContainer, StandardLuminance, neutralForegroundRest, fastAccordionItem, fastButton, fastAccordion, fastDisclosure } from "@microsoft/fast-components";
 import { parseColorHexRGB } from "@microsoft/fast-colors";
-import { color, type, screen, border, padding } from "./design";
-import { counter } from "./components";
+import { color, type, border, padding } from "./design";
 
 function genPalette(baseColorInHexRGB: string) {
     return PaletteRGB.create(SwatchRGB.from(parseColorHexRGB(baseColorInHexRGB)!))
@@ -21,12 +20,10 @@ const grayPalette = genPalette(color.gray[500]);
 const orangePalette = genPalette(color.orange[500]);
 const greenPalette = genPalette(color.green[500]);
 
-function providePulumiDesignSystem(element?: HTMLElement): DesignSystem {
-    return DesignSystem.getOrCreate(element);
-}
-
-export { counter } from "./components/counter";
 export { color, type, screen } from "./design";
+export { counter } from "./components/counter";
+export { disclosure } from "./components/disclosure";
+export { accordion, accordionItem } from "./components/accordion";
 
 interface DesignSystemOptions {
     element?: HTMLElement;
@@ -61,9 +58,12 @@ export function initDesignSystem(options: DesignSystemOptions) {
         .withPrefix(options.prefix || "pulumi")
         .register(
             fastButton(),
+            fastAccordion(),
+            fastAccordionItem(),
+            fastDisclosure(),
         );
 
-    providePulumiDesignSystem(options.element)
+    DesignSystem.getOrCreate(options.element)
         .withPrefix(prefix)
         .register(...options.components);
 }

yarn.lock

@@ -12,14 +12,14 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.3.tgz#5c46147401a823835a3833e3e18dae7f06016966"
   integrity sha512-XDEnRYxPO5P3Jsizm4TCxLu1osS/uV3Lym6SfRhq2PxfXPTgEcdvOYDUXyV2drqebs3U5VQnOcYcJiSp73xhng==
 
-"@microsoft/fast-components@^2.5.8":
-  version "2.5.8"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-components/-/fast-components-2.5.8.tgz#1c36c2bb42c6695ad26821f5d18e7fb3c4eba3b6"
-  integrity sha512-E8y36XQvEw0VFdJQEyQ67QzWzyEHrDZri8kdZsIbPoYGiigNhrUDtFv1mSSAO0tAKw56PXKoJznmUk7rbnSFcw==
+"@microsoft/fast-components@^2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-components/-/fast-components-2.6.2.tgz#9b4791311efcc7704d03ac700d9d857ea0a915ff"
+  integrity sha512-O+qUmYxcTOd2G2QOgvaI016cj0mzga9aIopXvl9Lq5SmdUiStz51yCW+LDexE3ux4j/g22vMKeso2Soeg2YE0Q==
   dependencies:
     "@microsoft/fast-colors" "^5.1.3"
     "@microsoft/fast-element" "^1.4.1"
-    "@microsoft/fast-foundation" "^2.6.4"
+    "@microsoft/fast-foundation" "^2.6.5"
     "@microsoft/fast-web-utilities" "^4.8.0"
     tslib "^1.13.0"
     vscode-html-languageservice "^4.0.3"
@@ -29,10 +29,10 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.4.1.tgz#e0b3c91d53b3cb111265d3b4ddbb9ecb236b8527"
   integrity sha512-VFBgACcZRWv0vp5dRA/40+jJqEkqobCfZKNeJ5Y3i3hjX95aD59x9K1i0NN6+bhK20WjNcmMXWjb6U2+EjKGaA==
 
-"@microsoft/fast-foundation@^2.6.4":
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.6.4.tgz#0a81ab507e9c96d96400ba3332297dfc339bf898"
-  integrity sha512-OfmB0vVkfna6OvgH4mKE8ze0diGsW/3KqSeJ/Pygje44SENS/hcKmsyaC/sMDF7pxRzjC8geP4HpuLHMjqT0Vw==
+"@microsoft/fast-foundation@^2.6.5":
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.6.5.tgz#4fe54b3a0e3e89df5ce7e240ef3032c52e749382"
+  integrity sha512-7Nsl0VrT7bpc8G0OSZETdmNkBRm7w+v01+93jkfMweJ8BGgT8cECQRtl6y9OlgdDArtaJ/SzbmQD9+iXFJKyaQ==
   dependencies:
     "@microsoft/fast-element" "^1.4.1"
     "@microsoft/fast-web-utilities" "^4.8.0"