diff --git a/index.html b/index.html
index b12888d..7f77768 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,26 @@ Welcome to THE FUTURE.
Components
+
+ Click it!
+
+ Here is some stuff.
+
+
+
+
+ Panel one
+ Panel one content
+
+
+ Panel two
+ Panel two content
+
+
+ Panel three
+ Panel three content
+
+
diff --git a/package.json b/package.json
index 7f5eef2..600f7be 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/app.ts b/src/app.ts
index d5fdb14..cb341eb 100644
--- a/src/app.ts
+++ b/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(),
],
});
diff --git a/src/components/accordion/index.ts b/src/components/accordion/index.ts
new file mode 100644
index 0000000..54bf443
--- /dev/null
+++ b/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
+});
diff --git a/src/components/accordion/styles.ts b/src/components/accordion/styles.ts
new file mode 100644
index 0000000..5230e9a
--- /dev/null
+++ b/src/components/accordion/styles.ts
@@ -0,0 +1,5 @@
+import { css } from "@microsoft/fast-element";
+
+export const styles = css`
+
+`;
diff --git a/src/components/buttons/cta.ts b/src/components/combobox/index.ts
similarity index 100%
rename from src/components/buttons/cta.ts
rename to src/components/combobox/index.ts
diff --git a/src/components/disclosure/index.ts b/src/components/disclosure/index.ts
new file mode 100644
index 0000000..e335087
--- /dev/null
+++ b/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
+});
diff --git a/src/components/disclosure/styles.ts b/src/components/disclosure/styles.ts
new file mode 100644
index 0000000..5230e9a
--- /dev/null
+++ b/src/components/disclosure/styles.ts
@@ -0,0 +1,5 @@
+import { css } from "@microsoft/fast-element";
+
+export const styles = css`
+
+`;
diff --git a/src/components/index.ts b/src/components/index.ts
index a12a522..9ca9e54 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1,3 @@
export { counter } from "./counter";
+export { disclosure } from "./disclosure";
+export { accordion, accordionItem } from "./accordion";
diff --git a/src/index.ts b/src/index.ts
index 6c6381f..44885d2 100644
--- a/src/index.ts
+++ b/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);
}
diff --git a/yarn.lock b/yarn.lock
index 7d5fd08..3ecdc05 100644
--- a/yarn.lock
+++ b/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"