@genesislcap/documentation-components 14.127.0 → 14.127.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/dts/components/design-system-editor/design-system-editor.d.ts.map +1 -1
  2. package/dist/dts/components/preview-components/preview-components.d.ts +23 -4
  3. package/dist/dts/components/preview-components/preview-components.d.ts.map +1 -1
  4. package/dist/dts/components/preview-components/preview-components.styles.d.ts.map +1 -1
  5. package/dist/dts/components/preview-components/preview-components.template.d.ts.map +1 -1
  6. package/dist/dts/index.d.ts.map +1 -1
  7. package/dist/dts/types.d.ts +4 -0
  8. package/dist/dts/types.d.ts.map +1 -1
  9. package/dist/esm/components/design-system-editor/design-system-editor.js +39 -0
  10. package/dist/esm/components/preview-components/preview-components.js +140 -12
  11. package/dist/esm/components/preview-components/preview-components.styles.js +53 -0
  12. package/dist/esm/components/preview-components/preview-components.template.js +317 -106
  13. package/dist/esm/index.js +2 -0
  14. package/package.json +11 -10
package/dist/dts/components/design-system-editor/design-system-editor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"design-system-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system-editor/design-system-editor.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAwC,MAAM,yBAAyB,CAAC;AAE5F,OAAO,EAGL,sBAAsB,EACtB,YAAY,EAEb,MAAM,aAAa,CAAC;AAyDrB,qBAKa,kBAAmB,SAAQ,WAAW;IACW,gBAAgB,EAAE,OAAO,CAAS;IAC3E,aAAa,EAAE,YAAY,EAAE,CAAC;IAE3C,uBAAuB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO;IAe3D,cAAc,EAAE,GAAG,CAAM;IAGzB,EAAE,SAAU;IACnB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAgBrC,QAAQ,EAAE,OAAO,CAAyD;IAC1E,SAAS,EAAE,MAAM,CAA0B;IAG3C,YAAY,EAAE,MAAM,CAA6B;IAGjD,WAAW,EAAE,MAAM,CAA4B;IAG/C,QAAQ,EAAE,MAAM,CAAyB;IAGzC,OAAO,EAAE,MAAM,CAAwB;IAGvC,YAAY,EAAE,MAAM,CAA6B;IAGjD,WAAW,EAAE,MAAM,CAA4B;IAG/C,UAAU,EAAE,MAAM,CAA2B;IAG7C,YAAY,EAAE,MAAM,CAA6B;IAGjD,cAAc,EAAE,MAAM,CAA+B;IAEhD,eAAe,EAAE,OAAO,CAAQ;IAC5C,OAAO,CAAC,qBAAqB,CAAkB;IAE/C,aAAa,MAAO,WAAW,KAAG,IAAI,CAsBpC;IAEF,oBAAoB,kCAIlB;IAEF,iBAAiB,MAAO,WAAW,KAAG,IAAI,CAKxC;IAEF,WAAW;IAgBX,mBAAmB,mBAUjB;IAEF,eAAe,CAAC,EAAE,EAAE,sBAAsB;IAe1C,UAAU;IAWV,YAAY,sBAIV;IAEF,iBAAiB;CAWlB"}
1
+ {"version":3,"file":"design-system-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system-editor/design-system-editor.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAwC,MAAM,yBAAyB,CAAC;AAE5F,OAAO,EAGL,sBAAsB,EACtB,YAAY,EAEb,MAAM,aAAa,CAAC;AA+FrB,qBAKa,kBAAmB,SAAQ,WAAW;IACW,gBAAgB,EAAE,OAAO,CAAS;IAC3E,aAAa,EAAE,YAAY,EAAE,CAAC;IAE3C,uBAAuB,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO;IAgB3D,cAAc,EAAE,GAAG,CAAM;IAGzB,EAAE,SAAU;IACnB,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAoBrC,QAAQ,EAAE,OAAO,CAAyD;IAC1E,SAAS,EAAE,MAAM,CAA0B;IAG3C,YAAY,EAAE,MAAM,CAA6B;IAGjD,WAAW,EAAE,MAAM,CAA4B;IAG/C,QAAQ,EAAE,MAAM,CAAyB;IAGzC,OAAO,EAAE,MAAM,CAAwB;IAGvC,YAAY,EAAE,MAAM,CAA6B;IAGjD,WAAW,EAAE,MAAM,CAA4B;IAG/C,UAAU,EAAE,MAAM,CAA2B;IAG7C,YAAY,EAAE,MAAM,CAA6B;IAGjD,cAAc,EAAE,MAAM,CAA+B;IAEhD,eAAe,EAAE,OAAO,CAAQ;IAC5C,OAAO,CAAC,qBAAqB,CAAkB;IAE/C,aAAa,MAAO,WAAW,KAAG,IAAI,CAsBpC;IAEF,oBAAoB,kCAIlB;IAEF,iBAAiB,MAAO,WAAW,KAAG,IAAI,CAKxC;IAEF,WAAW;IAgBX,mBAAmB,mBAUjB;IAEF,eAAe,CAAC,EAAE,EAAE,sBAAsB;IAe1C,UAAU;IAWV,YAAY,sBAIV;IAEF,iBAAiB;CAWlB"}
package/dist/dts/components/preview-components/preview-components.d.ts CHANGED
@@ -1,17 +1,36 @@
1
- import { Modal } from '@genesislcap/alpha-design-system';
1
+ import { Modal, Dialog, Banner } from '@genesislcap/alpha-design-system';
2
+ import { ActionMenuItem, DropdownMenuItem } from '@genesislcap/foundation-ui';
2
3
  import { FASTElement } from '@microsoft/fast-element';
3
4
  export declare class PreviewComponents extends FASTElement {
4
5
  modal: Modal;
5
- showDialogTrigger: HTMLElement;
6
- closeDialogTrigger: HTMLElement;
6
+ dialog: Dialog;
7
+ banner: Banner;
8
+ errorDialogContainer: HTMLDivElement;
7
9
  prefix: string;
8
10
  buttonAppearanceAccent: string;
9
11
  buttonAppearanceNeutral: string;
10
12
  buttonAppearanceOutline: string;
13
+ buttonAppearanceText: string;
14
+ badgeAppearanceAccent: string;
15
+ badgeAppearanceNeutral: string;
16
+ badgeText: string;
17
+ cards: number[];
18
+ countries: string[];
19
+ menuActions: ActionMenuItem[];
20
+ menuDefinition: {
21
+ actions: ActionMenuItem[];
22
+ buttonAppearance: string;
23
+ data: {
24
+ name: string;
25
+ };
26
+ };
27
+ dropDownMenuItems: DropdownMenuItem[];
11
28
  provider: HTMLElement;
12
- setDialogEventListeners(): void;
13
29
  connectedCallback(): void;
14
30
  private handleStyleChanges;
15
31
  private handleDSChanges;
32
+ showDialog(param: any): void;
33
+ closeDialog(param: any): void;
34
+ dismissBanner(): void;
16
35
  }
17
36
  //# sourceMappingURL=preview-components.d.ts.map
package/dist/dts/components/preview-components/preview-components.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"preview-components.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-components/preview-components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAEzD,OAAO,EAA4B,WAAW,EAAc,MAAM,yBAAyB,CAAC;AAM5F,qBAKa,iBAAkB,SAAQ,WAAW;IAEzC,KAAK,EAAE,KAAK,CAAC;IACb,iBAAiB,EAAE,WAAW,CAAC;IAC/B,kBAAkB,EAAE,WAAW,CAAC;IAE1B,MAAM,SAAU;IACjB,sBAAsB,SAAkB;IACxC,uBAAuB,SAAkB;IACzC,uBAAuB,SAAsB;IAGlD,QAAQ,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IAS9B,iBAAiB;IAejB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,eAAe;CASxB"}
1
+ {"version":3,"file":"preview-components.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-components/preview-components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAA4B,WAAW,EAAc,MAAM,yBAAyB,CAAC;AAM5F,qBAKa,iBAAkB,SAAQ,WAAW;IAEzC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB,EAAE,cAAc,CAAC;IAE/B,MAAM,SAAU;IACjB,sBAAsB,SAAkB;IACxC,uBAAuB,SAAkB;IACzC,uBAAuB,SAAsB;IAC7C,oBAAoB,SAAiB;IACrC,qBAAqB,SAAa;IAClC,sBAAsB,SAAe;IACrC,SAAS,SAAW;IAEpB,KAAK,WAA8C;IACnD,SAAS,WA0BnB;IAEU,WAAW,EAAE,cAAc,EAAE,CAiBvC;IAEU,cAAc;;;;;;MAIxB;IACU,iBAAiB,EAAE,gBAAgB,EAAE,CA4C/C;IAEK,QAAQ,EAAE,WAAW,CAAC;IAE7B,iBAAiB;IAcjB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,eAAe;IAWvB,UAAU,CAAC,KAAK,KAAA;IAIhB,WAAW,CAAC,KAAK,KAAA;IAIjB,aAAa;CAGd"}
package/dist/dts/components/preview-components/preview-components.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"preview-components.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-components/preview-components.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,iDA2CnC,CAAC"}
1
+ {"version":3,"file":"preview-components.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-components/preview-components.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,iDAgGnC,CAAC"}
package/dist/dts/components/preview-components/preview-components.template.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"preview-components.template.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-components/preview-components.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAO,MAAM,iBAAiB,WAAY,MAAM,2EA4M/C,CAAC;AACF,eAAO,MAAM,yBAAyB,wEAErC,CAAC"}
1
+ {"version":3,"file":"preview-components.template.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-components/preview-components.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,eAAO,MAAM,iBAAiB,WAAY,MAAM,2EA4a/C,CAAC;AACF,eAAO,MAAM,yBAAyB,wEAErC,CAAC"}
package/dist/dts/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAwBA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AA4BA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
package/dist/dts/types.d.ts CHANGED
@@ -20,6 +20,10 @@ export interface DSUpdateEventDetail {
20
20
  buttonAppearanceAccent: string;
21
21
  buttonAppearanceNeutral: string;
22
22
  buttonAppearanceOutline: string;
23
+ buttonAppearanceText: string;
24
+ badgeAppearanceAccent: string;
25
+ badgeAppearanceNeutral: string;
26
+ badgeText: string;
23
27
  }
24
28
  export interface DesignSystem {
25
29
  name: string;
package/dist/dts/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACnB,cAAc,mBAAmB;IACjC,UAAU,0BAA0B;IACpC,mBAAmB,wBAAwB;CAC5C;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY;;;;;;;;;CAexB,CAAC;AAEF,eAAO,MAAM,eAAe,QAA2B,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAEA,oBAAY,SAAS;IACnB,cAAc,mBAAmB;IACjC,UAAU,0BAA0B;IACpC,mBAAmB,wBAAwB;CAC5C;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,EAAE,MAAM,CAAC;IAC/B,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY;;;;;;;;;CAexB,CAAC;AAEF,eAAO,MAAM,eAAe,QAA2B,CAAC"}
package/dist/esm/components/design-system-editor/design-system-editor.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { __awaiter, __decorate } from "tslib";
2
2
  import { designTokens as alphaDefaultDesignTokens } from '@genesislcap/alpha-design-system';
3
3
  import { loadRobotoFontFaces, designTokens as zeroDefaultDesignTokens, } from '@genesislcap/foundation-zero';
4
+ import { designTokens as rapidDefaultDesignTokens } from '@genesislcap/rapid-design-system';
4
5
  import { StandardLuminance, Combobox, Select } from '@microsoft/fast-components';
5
6
  import { FASTElement, attr, customElement, observable, DOM } from '@microsoft/fast-element';
6
7
  import { RadioGroup, Slider } from '@microsoft/fast-foundation';
@@ -26,28 +27,61 @@ const ZeroButtonApperance = {
26
27
  accent: 'primary-blue',
27
28
  neutral: 'neutral-grey',
28
29
  outline: 'primary-gradient',
30
+ text: 'lightweight',
31
+ };
32
+ const ZeroBadgeAppearance = {
33
+ accent: 'primary',
34
+ neutral: 'secondary',
35
+ font: 'white',
29
36
  };
30
37
  const AlphaDefaults = mapDesignToken(alphaDefaultDesignTokens);
31
38
  const AlphaButtonApperance = {
32
39
  accent: 'accent',
33
40
  neutral: 'neutral',
34
41
  outline: 'outline',
42
+ text: 'lightweight',
43
+ };
44
+ const AlphaBadgeAppearance = {
45
+ accent: 'primary',
46
+ neutral: 'neutral',
47
+ font: 'white',
48
+ };
49
+ const RapidDefaults = mapDesignToken(rapidDefaultDesignTokens);
50
+ const RapidButtonApperance = {
51
+ accent: 'primary',
52
+ neutral: 'neutral',
53
+ outline: 'primary-outline',
54
+ text: 'link',
55
+ };
56
+ const RapidBadgeApperance = {
57
+ accent: 'primary',
58
+ neutral: 'neutral',
59
+ font: 'text',
35
60
  };
36
61
  const DS = {
37
62
  zero: {
38
63
  prefix: 'zero',
39
64
  tokenDefaults: ZeroDefaults,
40
65
  buttons: ZeroButtonApperance,
66
+ badge: ZeroBadgeAppearance,
41
67
  },
42
68
  alpha: {
43
69
  prefix: 'alpha',
44
70
  tokenDefaults: AlphaDefaults,
45
71
  buttons: AlphaButtonApperance,
72
+ badge: AlphaBadgeAppearance,
73
+ },
74
+ rapid: {
75
+ prefix: 'rapid',
76
+ tokenDefaults: RapidDefaults,
77
+ buttons: RapidButtonApperance,
78
+ badge: RapidBadgeApperance,
46
79
  },
47
80
  custom: {
48
81
  prefix: 'zero',
49
82
  tokenDefaults: null,
50
83
  buttons: ZeroButtonApperance,
84
+ badge: ZeroBadgeAppearance,
51
85
  },
52
86
  };
53
87
  let DesignSystemEditor = class DesignSystemEditor extends FASTElement {
@@ -124,6 +158,7 @@ let DesignSystemEditor = class DesignSystemEditor extends FASTElement {
124
158
  const defaultDesignSystems = [
125
159
  { name: 'Zero', value: 'zero' },
126
160
  { name: 'Foundation UI', value: 'alpha' },
161
+ { name: 'Rapid', value: 'rapid' },
127
162
  ];
128
163
  if (this.customDesignMode) {
129
164
  const appName = (yield this.getAppName()) || 'Custom Design';
@@ -142,6 +177,10 @@ let DesignSystemEditor = class DesignSystemEditor extends FASTElement {
142
177
  buttonAppearanceAccent: DS[this.ds].buttons.accent,
143
178
  buttonAppearanceNeutral: DS[this.ds].buttons.neutral,
144
179
  buttonAppearanceOutline: DS[this.ds].buttons.outline,
180
+ buttonAppearanceText: DS[this.ds].buttons.text,
181
+ badgeAppearanceAccent: DS[this.ds].badge.accent,
182
+ badgeAppearanceNeutral: DS[this.ds].badge.neutral,
183
+ badgeText: DS[this.ds].badge.font,
145
184
  };
146
185
  this.$emit(EventName.DS_CHANGED, detail);
147
186
  if (!this.preserveOptions) {
package/dist/esm/components/preview-components/preview-components.js CHANGED
@@ -12,14 +12,106 @@ let PreviewComponents = class PreviewComponents extends FASTElement {
12
12
  this.buttonAppearanceAccent = 'primary-blue';
13
13
  this.buttonAppearanceNeutral = 'primary-grey';
14
14
  this.buttonAppearanceOutline = 'primary-gradient';
15
- }
16
- setDialogEventListeners() {
17
- this.showDialogTrigger.addEventListener('click', () => this.modal.show(), {
18
- passive: true,
19
- });
20
- this.closeDialogTrigger.addEventListener('click', () => this.modal.close(), {
21
- passive: true,
22
- });
15
+ this.buttonAppearanceText = 'lightweight';
16
+ this.badgeAppearanceAccent = 'primary';
17
+ this.badgeAppearanceNeutral = 'secondary';
18
+ this.badgeText = 'white';
19
+ this.cards = Array.from({ length: 8 }, (_, i) => i + 1);
20
+ this.countries = [
21
+ 'Afghanistan',
22
+ 'Aland Islands',
23
+ 'Albania',
24
+ 'Algeria',
25
+ 'American Samoa',
26
+ 'Andorra',
27
+ 'Angola',
28
+ 'Aruba',
29
+ 'Australia',
30
+ 'Austria',
31
+ 'Azerbaijan',
32
+ 'Bahamas',
33
+ 'Bahrain',
34
+ 'Bangladesh',
35
+ 'Barbados',
36
+ 'Belarus',
37
+ 'Belgium',
38
+ 'Belize',
39
+ 'Benin',
40
+ 'Bhutan',
41
+ 'Bolivia',
42
+ 'Bonaire, Sint Eustatius and Saba',
43
+ 'Cambodia',
44
+ 'Cameroon',
45
+ 'Canada',
46
+ ];
47
+ this.menuActions = [
48
+ {
49
+ name: 'View',
50
+ callback: (rowData) => console.debug('VIEWW!!!', rowData),
51
+ },
52
+ {
53
+ name: 'Delete',
54
+ callback: (rowData) => console.debug('DELETE!!!', rowData),
55
+ },
56
+ {
57
+ name: 'Edit',
58
+ callback: (rowData) => console.debug('EDIT!!!', rowData),
59
+ },
60
+ {
61
+ name: 'Wait',
62
+ callback: (rowData) => console.debug('WAIT???', rowData),
63
+ },
64
+ ];
65
+ this.menuDefinition = {
66
+ actions: this.menuActions,
67
+ buttonAppearance: 'stealth',
68
+ data: { name: 'test' },
69
+ };
70
+ this.dropDownMenuItems = [
71
+ {
72
+ name: 'Menu item 1',
73
+ callback: () => alert('Menu item 1 clicked'),
74
+ icon: {
75
+ name: 'glasses',
76
+ },
77
+ },
78
+ {
79
+ name: 'Menu item 2',
80
+ callback: () => alert('Menu item 2 clicked'),
81
+ },
82
+ {
83
+ name: 'Menu item 3',
84
+ callback: () => alert('Menu item 3 clicked'),
85
+ submenu: [
86
+ {
87
+ name: 'Menu item 5',
88
+ callback: () => alert('Menu item 5 clicked'),
89
+ icon: {
90
+ name: 'address-card',
91
+ },
92
+ },
93
+ {
94
+ name: 'Menu item 6',
95
+ callback: () => alert('Menu item 6 clicked'),
96
+ submenu: [
97
+ {
98
+ name: 'Menu item 7',
99
+ callback: () => alert('Menu item 7 clicked'),
100
+ color: 'red',
101
+ icon: {
102
+ name: 'address-card',
103
+ },
104
+ },
105
+ {
106
+ name: 'Menu item 8',
107
+ callback: () => alert('Menu item 8 clicked'),
108
+ isDisabled: () => true,
109
+ },
110
+ ],
111
+ },
112
+ ],
113
+ },
114
+ ];
23
115
  }
24
116
  connectedCallback() {
25
117
  super.connectedCallback();
@@ -30,7 +122,6 @@ let PreviewComponents = class PreviewComponents extends FASTElement {
30
122
  this.handleDSChanges(e);
31
123
  });
32
124
  DOM.queueUpdate(() => {
33
- this.setDialogEventListeners();
34
125
  bodyFont.withDefault(defaultBodyFont);
35
126
  });
36
127
  }
@@ -47,9 +138,19 @@ let PreviewComponents = class PreviewComponents extends FASTElement {
47
138
  this.buttonAppearanceAccent = event.detail.buttonAppearanceAccent;
48
139
  this.buttonAppearanceNeutral = event.detail.buttonAppearanceNeutral;
49
140
  this.buttonAppearanceOutline = event.detail.buttonAppearanceOutline;
50
- DOM.queueUpdate(() => {
51
- this.setDialogEventListeners();
52
- });
141
+ this.buttonAppearanceText = event.detail.buttonAppearanceText;
142
+ this.badgeAppearanceAccent = event.detail.badgeAppearanceAccent;
143
+ this.badgeAppearanceNeutral = event.detail.badgeAppearanceNeutral;
144
+ this.badgeText = event.detail.badgeText;
145
+ }
146
+ showDialog(param) {
147
+ this[param].show();
148
+ }
149
+ closeDialog(param) {
150
+ this[param].close();
151
+ }
152
+ dismissBanner() {
153
+ this.banner.dismiss();
53
154
  }
54
155
  };
55
156
  __decorate([
@@ -67,6 +168,33 @@ __decorate([
67
168
  __decorate([
68
169
  observable
69
170
  ], PreviewComponents.prototype, "buttonAppearanceOutline", void 0);
171
+ __decorate([
172
+ observable
173
+ ], PreviewComponents.prototype, "buttonAppearanceText", void 0);
174
+ __decorate([
175
+ observable
176
+ ], PreviewComponents.prototype, "badgeAppearanceAccent", void 0);
177
+ __decorate([
178
+ observable
179
+ ], PreviewComponents.prototype, "badgeAppearanceNeutral", void 0);
180
+ __decorate([
181
+ observable
182
+ ], PreviewComponents.prototype, "badgeText", void 0);
183
+ __decorate([
184
+ observable
185
+ ], PreviewComponents.prototype, "cards", void 0);
186
+ __decorate([
187
+ observable
188
+ ], PreviewComponents.prototype, "countries", void 0);
189
+ __decorate([
190
+ observable
191
+ ], PreviewComponents.prototype, "menuActions", void 0);
192
+ __decorate([
193
+ observable
194
+ ], PreviewComponents.prototype, "menuDefinition", void 0);
195
+ __decorate([
196
+ observable
197
+ ], PreviewComponents.prototype, "dropDownMenuItems", void 0);
70
198
  __decorate([
71
199
  observable
72
200
  ], PreviewComponents.prototype, "provider", void 0);
package/dist/esm/components/preview-components/preview-components.styles.js CHANGED
@@ -1,6 +1,9 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  export const PreviewComponentsStyles = css `
3
3
  :host {
4
+ --badge-fill-primary: var(--accent-fill-rest);
5
+ --badge-fill-neutral: var(--neutral-fill-rest);
6
+
4
7
  background: var(--fill-color);
5
8
  color: var(--neutral-foreground-rest);
6
9
  flex-direction: column;
@@ -25,6 +28,10 @@ export const PreviewComponentsStyles = css `
25
28
  padding: calc(var(--base-horizontal-spacing-multiplier) * 3px) 0;
26
29
  }
27
30
 
31
+ .row-padding {
32
+ padding: 0 8px;
33
+ }
34
+
28
35
  alpha-button,
29
36
  alpha-flipper {
30
37
  margin-right: calc(var(--base-horizontal-spacing-multiplier) * 2px);
@@ -42,4 +49,50 @@ export const PreviewComponentsStyles = css `
42
49
  zero-design-system-provider {
43
50
  display: inline;
44
51
  }
52
+
53
+ rapid-card > rapid-card > rapid-card {
54
+ background: var(--neutral-layer-1);
55
+ }
56
+
57
+ .horizontal-scroll {
58
+ width: 400px;
59
+ padding: calc(var(--base-horizontal-spacing-multiplier) * 3px);
60
+ }
61
+
62
+ .card-padding {
63
+ padding: calc(var(--base-horizontal-spacing-multiplier) * 3px);
64
+ }
65
+
66
+ .flex-row {
67
+ display: flex;
68
+ align-items: center;
69
+ gap: calc(var(--base-horizontal-spacing-multiplier) * 3px);
70
+ }
71
+
72
+ zero-dialog,
73
+ zero-error-dialog,
74
+ alpha-dialog,
75
+ alpha-error-dialog,
76
+ rapid-dialog {
77
+ position: relative;
78
+ z-index: 100;
79
+ }
80
+
81
+ .actions-menu-container {
82
+ display: flex;
83
+ flex: 1;
84
+ height: 400px;
85
+ justify-content: center;
86
+ }
87
+
88
+ .label {
89
+ color: var(--neutral-foreground-hint);
90
+ font-weight: 700;
91
+ margin: calc(var(--design-unit) * 2px) 0;
92
+ }
93
+
94
+ .flex-column {
95
+ display: flex;
96
+ flex-direction: column;
97
+ }
45
98
  `;
package/dist/esm/components/preview-components/preview-components.template.js CHANGED
@@ -1,4 +1,4 @@
1
- import { html, ref } from '@microsoft/fast-element';
1
+ import { html, ref, repeat } from '@microsoft/fast-element';
2
2
  export const previewComponents = (prefix) => html `
3
3
  <template>
4
4
  <${prefix}-design-system-provider ${ref('provider')}>
@@ -7,162 +7,243 @@ export const previewComponents = (prefix) => html `
7
7
  <div class="row">
8
8
  <div class="column">
9
9
  <${prefix}-breadcrumb role="navigation">
10
+ <${prefix}-breadcrumb-item href="#"><${prefix}-icon name="folder" size="md" variant="regular" slot="start"></${prefix}-icon></${prefix}-breadcrumb-item>
10
11
  <${prefix}-breadcrumb-item href="#">Item 1</${prefix}-breadcrumb-item>
11
12
  <${prefix}-breadcrumb-item href="#">Item 2</${prefix}-breadcrumb-item>
12
13
  <${prefix}-breadcrumb-item>Item 3</${prefix}-breadcrumb-item>
13
14
  </${prefix}-breadcrumb>
15
+ <${prefix}-badge :fill="${(x) => x.badgeAppearanceAccent}" color="${(x) => x.badgeText}" class="row-padding">Badge</${prefix}-badge>
16
+ <${prefix}-badge fill="${(x) => x.badgeAppearanceNeutral}" color="${(x) => x.badgeText}">Badge</${prefix}-badge>
14
17
  </div>
15
18
  <div class="column">
16
- <${prefix}-button href="#" :appearance="${(x) => x.buttonAppearanceAccent}">Button</${prefix}-button>
17
- <${prefix}-button href="#" :appearance="${(x) => x.buttonAppearanceNeutral}">Button</${prefix}-button>
18
- <${prefix}-button href="#" :appearance="${(x) => x.buttonAppearanceOutline}">Button</${prefix}-button>
19
+ <div class="flex-row">
20
+ <${prefix}-button href="#" :appearance="${(x) => x.buttonAppearanceAccent}">Button</${prefix}-button>
21
+ <${prefix}-button href="#" :appearance="${(x) => x.buttonAppearanceNeutral}">Button</${prefix}-button>
22
+ <${prefix}-button href="#" :appearance="${(x) => x.buttonAppearanceOutline}">Button</${prefix}-button>
23
+ <${prefix}-button :appearance="${(x) => x.buttonAppearanceAccent}">
24
+ Button
25
+ <${prefix}-icon name="edit" size="md" slot="start"></${prefix}-icon>
26
+ </${prefix}-button>
27
+ <${prefix}-flipper
28
+ role="button"
29
+ tabindex="-1"
30
+ class="previous"
31
+ aria-hidden="true"
32
+ direction="previous"
33
+ ></${prefix}-flipper>
34
+ <${prefix}-flipper
35
+ role="button"
36
+ tabindex="-1"
37
+ class="next"
38
+ aria-hidden="true"
39
+ direction="next"
40
+ ></${prefix}-flipper>
41
+ <${prefix}-switch
42
+ role="switch"
43
+ checked
44
+ aria-checked="true"
45
+ aria-disabled="false"
46
+ tabindex="0"
47
+ ></${prefix}-switch>
48
+ </div>
49
+
19
50
  </div>
20
51
  </div>
21
52
 
22
53
  <div class="row">
23
54
  <div class="column">
24
- <${prefix}-radio-group role="radiogroup" orientation="horizontal">
25
- <${prefix}-radio
55
+ <div class="flex-row">
56
+ <${prefix}-radio-group role="radiogroup" orientation="horizontal">
57
+ <${prefix}-radio
58
+ checked
59
+ role="radio"
60
+ aria-checked="true"
61
+ aria-required="false"
62
+ aria-disabled="false"
63
+ tabindex="0"
64
+ >
65
+ Radio 1
66
+ </${prefix}-radio>
67
+ <${prefix}-radio
68
+ role="radio"
69
+ aria-checked="false"
70
+ aria-required="false"
71
+ aria-disabled="false"
72
+ tabindex="-1"
73
+ >
74
+ Radio 2
75
+ </${prefix}-radio>
76
+ </${prefix}-radio-group>
77
+ <${prefix}-checkbox
78
+ role="checkbox"
26
79
  checked
27
- role="radio"
28
80
  aria-checked="true"
29
81
  aria-required="false"
30
82
  aria-disabled="false"
31
83
  tabindex="0"
32
84
  >
33
- Radio 1
34
- </${prefix}-radio>
35
- <${prefix}-radio
36
- role="radio"
85
+ Checkbox
86
+ </${prefix}-checkbox>
87
+ <${prefix}-checkbox
88
+ role="checkbox"
37
89
  aria-checked="false"
38
90
  aria-required="false"
39
91
  aria-disabled="false"
40
- tabindex="-1"
92
+ tabindex="0"
41
93
  >
42
- Radio 2
43
- </${prefix}-radio>
44
- </${prefix}-radio-group>
94
+ Checkbox
95
+ </${prefix}-checkbox>
96
+ </div>
45
97
  </div>
46
98
  <div class="column">
47
- <${prefix}-checkbox
48
- role="checkbox"
49
- checked
50
- aria-checked="true"
51
- aria-required="false"
52
- aria-disabled="false"
53
- tabindex="0"
54
- >
55
- Checkbox
56
- </${prefix}-checkbox>
57
- <${prefix}-checkbox
58
- role="checkbox"
59
- aria-checked="false"
60
- aria-required="false"
61
- aria-disabled="false"
62
- tabindex="0"
63
- >
64
- Checkbox
65
- </${prefix}-checkbox>
99
+ <${prefix}-disclosure appearance="accent" title="Open Disclosure">
100
+ <div>Created by writer Gardner Fox and artist Harry Lampert, the original Flashfirst appeared
101
+ in Flash Comics #1 (cover date January 1940/release monthNovember 1939). Nicknamed the
102
+ "Scarlet Speedster", all incarnations of theFlash possess "super speed", which includes
103
+ the ability to run, move, andthink extremely fast, use superhuman reflexes, and seemingly
104
+ violatecertain laws of physics.</div>
105
+ </${prefix}-disclosure>
66
106
  </div>
67
107
  </div>
68
108
 
69
109
  <div class="row">
70
110
  <div class="column">
71
- <${prefix}-text-field
72
- placeholder="Text field"
73
- aria-label="Example text field"
74
- type="text"
75
- ></${prefix}-text-field>
111
+ <div class="flex-row">
112
+ <div class="flex-column">
113
+ <div class="label"> ComboBox</div>
114
+ <${prefix}-combobox autocomplete="both">
115
+ <${prefix}-option>Christopher Eccleston</${prefix}-option>
116
+ <${prefix}-option>David Tenant</${prefix}-option>
117
+ <${prefix}-option>Matt Smith</${prefix}-option>
118
+ <${prefix}-option>Peter Capaldi</${prefix}-option>
119
+ <${prefix}-option>Jodie Whittaker</${prefix}-option>
120
+ </${prefix}-combobox>
121
+ </div>
122
+ <div class="flex-column">
123
+ <div class="label"> Select</div>
124
+ <${prefix}-select>
125
+ <${prefix}-option>Christopher Eccleston</${prefix}-option>
126
+ <${prefix}-option>David Tenant</${prefix}-option>
127
+ <${prefix}-option>Matt Smith</${prefix}-option>
128
+ <${prefix}-option>Peter Capaldi</${prefix}-option>
129
+ <${prefix}-option>Jodie Whittaker</${prefix}-option>
130
+ </${prefix}-select>
131
+ </div>
132
+ </div>
76
133
  </div>
77
134
  <div class="column">
78
- <${prefix}-button ${ref('showDialogTrigger')} appearance="${(x) => x.buttonAppearanceAccent}">Show Modal</${prefix}-button>
79
- <${prefix}-flipper
80
- role="button"
81
- tabindex="-1"
82
- class="previous"
83
- aria-hidden="true"
84
- direction="previous"
85
- ></${prefix}-flipper>
86
- <${prefix}-flipper
87
- role="button"
88
- tabindex="-1"
89
- class="next"
90
- aria-hidden="true"
91
- direction="next"
92
- ></${prefix}-flipper>
93
- <${prefix}-switch
94
- role="switch"
95
- checked
96
- aria-checked="true"
97
- aria-disabled="false"
98
- tabindex="0"
99
- ></${prefix}-switch>
135
+ <${prefix}-segmented-control appearance="primary">
136
+ <label slot="label">Primary Segment Control (label slot)</label>
137
+ <${prefix}-segmented-item>Segmented Item</${prefix}-segmented-item>
138
+ <${prefix}-segmented-item>Segmented Item</${prefix}-segmented-item>
139
+ <${prefix}-segmented-item>Segmented Item</${prefix}-segmented-item>
140
+ </${prefix}-segmented-control>
141
+ </div>
142
+ </div>
100
143
 
101
- <${prefix}-modal ${ref('modal')}>
102
- <h5 slot="top">Modal Title</h5>
103
- <p>
104
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
105
- voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam
106
- repudiandae at atque et quibusdam rerum, reprehenderit sed laborum officiis
107
- distinctio dolorum temporibus aperiam dolor consequatur perferendis aspernatur fugit
108
- repellendus asperiores, voluptas illo? Voluptatum, atque quidem?
109
- </p>
110
- <${prefix}-button ${ref('closeDialogTrigger')} appearance="${(x) => x.buttonAppearanceAccent}" slot="bottom">Close</${prefix}-button>
111
- </${prefix}-modal>
144
+
145
+ <div class="row">
146
+ <div class="column">
147
+ <div class="row">
148
+ <${prefix}-text-field
149
+ placeholder="Text field"
150
+ aria-label="Example text field"
151
+ type="text"
152
+ >
153
+ Label
154
+ </${prefix}-text-field>
155
+ <${prefix}-number-field class="row-padding" placeholder="number" withFormatting>Number Field</${prefix}-number-field>
156
+ <${prefix}-date-picker class="row-padding" label="Date Picker" value="01-01-2023"></${prefix}-date-picker>
157
+ </div>
158
+ </div>
159
+ <div class="column">
160
+ <div class="flex-row">
161
+ <${prefix}-button appearance="${(x) => x.buttonAppearanceAccent}" @click="${(x) => x.showDialog('modal')}">Show Modal</${prefix}-button>
162
+ <${prefix}-button appearance="${(x) => x.buttonAppearanceAccent}" @click="${(x) => x.showDialog('dialog')}">Show Dialog</${prefix}-button>
163
+ <${prefix}-multiselect class="row-padding" name="Countries" :options="${(x) => x.countries}" search=true>
164
+ </${prefix}-multiselect>
165
+ <${prefix}-modal ${ref('modal')} style="--dialog-max-width:557px;">
166
+ <h5 slot="top">Modal Title</h5>
167
+ <p>
168
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
169
+ voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam
170
+ repudiandae at atque et quibusdam rerum, reprehenderit sed laborum officiis
171
+ distinctio dolorum temporibus aperiam dolor consequatur perferendis aspernatur fugit
172
+ repellendus asperiores, voluptas illo? Voluptatum, atque quidem?
173
+ </p>
174
+ <${prefix}-button appearance="${(x) => x.buttonAppearanceAccent}" slot="bottom" @click="${(x) => x.closeDialog('modal')}">Close</${prefix}-button>
175
+ </${prefix}-modal>
176
+ <${prefix}-dialog ${ref('dialog')} style="--dialog-max-width:557px;">
177
+ <div slot="top">Dialog Title</div>
178
+ <p>Some Text in a Dialog</p>
179
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
180
+ voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae
181
+ at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum
182
+ temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
183
+ voluptas illo? Voluptatum, atque quidem?</p>
184
+ <${prefix}-button appearance="${(x) => x.buttonAppearanceAccent}" slot="bottom" @click="${(x) => x.closeDialog('dialog')}">
185
+ Close this dialog
186
+ </${prefix}-button>
187
+ </${prefix}-dialog>
188
+ <div ${ref('errorDialogContainer')}></div>
189
+ </div>
112
190
  </div>
113
191
  </div>
114
192
 
115
193
  <div class="row">
116
194
  <div class="column">
117
195
  <${prefix}-slider
196
+ style="margin-bottom: 20px;"
118
197
  role="slider"
119
198
  class="horizontal"
120
199
  tabindex="0"
121
- aria-valuenow="5"
200
+ aria-valuenow="10"
122
201
  aria-valuemin="0"
123
- aria-valuemax="10"
202
+ aria-valuemax="100"
124
203
  aria-orientation="horizontal"
125
204
  min="0"
126
- max="10"
127
- step="1"
205
+ max="100"
206
+ step="10"
207
+ value="70"
128
208
  orientation="horizontal"
129
209
  mode="single-value"
130
- ></${prefix}-slider>
210
+ >
211
+ <${prefix}-slider-label position="10">10%</${prefix}-slider-label>
212
+ <${prefix}-slider-label position="50">50%</${prefix}-slider-label>
213
+ <${prefix}-slider-label position="80">80%</${prefix}-slider-label>
214
+ <${prefix}-slider-label position="100">100%</${prefix}-slider-label>
215
+ </${prefix}-slider>
131
216
  </div>
132
217
  <div class="column">
133
- <${prefix}-combobox autocomplete="both">
134
- <${prefix}-option>Christopher Eccleston</${prefix}-option>
135
- <${prefix}-option>David Tenant</${prefix}-option>
136
- <${prefix}-option>Matt Smith</${prefix}-option>
137
- <${prefix}-option>Peter Capaldi</${prefix}-option>
138
- <${prefix}-option>Jodie Whittaker</${prefix}-option>
139
- </${prefix}-combobox>
218
+ <div class="flex-row">
219
+ <${prefix}-dropdown-menu name="Dropdown menu" :items="${(x) => x.dropDownMenuItems}"></${prefix}-dropdown-menu>
220
+
221
+ <${prefix}-connection-indicator show-label></${prefix}-connection-indicator>
222
+ </div>
140
223
  </div>
141
224
  </div>
142
225
 
143
226
  <div class="row">
144
- <div class="column">
145
- <${prefix}-accordion>
146
- <${prefix}-accordion-item slot="item" id="accordion-1" class="expanded">
147
- Accordion one content
148
- <div slot="heading">Accordion one</div>
149
- </${prefix}-accordion-item>
150
- <${prefix}-accordion-item slot="item" id="accordion-2">
151
- Accordion two content
152
- <div slot="heading">Accordion two</div>
153
- </${prefix}-accordion-item>
154
- <${prefix}-accordion-item slot="item" id="accordion-3">
155
- Accordion three content
156
- <div slot="heading">Accordion
157
- three</div>
158
- </${prefix}-accordion-item>
159
- <${prefix}-accordion-item slot="item" id="accordion-4">
160
- Accordion four
161
- content
162
- <div slot="heading">Accordion four</div>
163
- </${prefix}-accordion-item>
164
- </${prefix}-accordion>
165
- </div>
227
+ <div class="column">
228
+ <${prefix}-accordion>
229
+ <${prefix}-accordion-item slot="item" id="accordion-1" class="expanded">
230
+ Accordion one content
231
+ <div slot="heading">Accordion one</div>
232
+ </${prefix}-accordion-item>
233
+ <${prefix}-accordion-item slot="item" id="accordion-2">
234
+ Accordion two content
235
+ <div slot="heading">Accordion two</div>
236
+ </${prefix}-accordion-item>
237
+ <${prefix}-accordion-item slot="item" id="accordion-3">
238
+ Accordion three content
239
+ <div slot="heading">Accordion three</div>
240
+ </${prefix}-accordion-item>
241
+ <${prefix}-accordion-item slot="item" id="accordion-4">
242
+ Accordion four content
243
+ <div slot="heading">Accordion four</div>
244
+ </${prefix}-accordion-item>
245
+ </${prefix}-accordion>
246
+ </div>
166
247
 
167
248
  <div class="column">
168
249
  <${prefix}-tree-view role="tree">
@@ -194,6 +275,136 @@ export const previewComponents = (prefix) => html `
194
275
  <${prefix}-progress-ring role="progressbar"></${prefix}-progress-ring>
195
276
  </div>
196
277
  </div>
278
+ <div class="row">
279
+ <div class="column">
280
+ <${prefix}-menu>
281
+ <${prefix}-menu-item>Menu item 1
282
+ <${prefix}-menu slot="submenu">
283
+ <${prefix}-menu-item>Menu item 1</${prefix}-menu-item>
284
+ <${prefix}-menu-item>Menu item 2</${prefix}-menu-item>
285
+ <${prefix}-menu-item>Menu item 3</${prefix}-menu-item>
286
+ </${prefix}-menu>
287
+ </${prefix}-menu-item>
288
+ <${prefix}-menu-item>Menu item 2</${prefix}-menu-item>
289
+ <${prefix}-menu-item>Menu item 3</${prefix}-menu-item>
290
+ </${prefix}-menu>
291
+ </div>
292
+ <div class="column">
293
+ <${prefix}-card>
294
+ <${prefix}-tabs>
295
+ <span part="start" class="start" slot="start">Blotter</span>
296
+ <${prefix}-tab>Tab 1</${prefix}-tab>
297
+ <${prefix}-tab slot="tab">Tab 2</${prefix}-tab>
298
+ <${prefix}-tab slot="tab">Tab 3</${prefix}-tab>
299
+ <${prefix}-tab slot="tab">Tab 4</${prefix}-tab>
300
+ <${prefix}-tab-panel slot="tabpanel">
301
+ <${prefix}-tabs appearance="secondary">
302
+ <${prefix}-tab appearance="secondary" slot="tab">Nested Tab 1</${prefix}-tab>
303
+ <${prefix}-tab appearance="secondary" slot="tab">Nested Tab 2</${prefix}-tab>
304
+ <${prefix}-tab-panel slot="tabpanel">Nested Tab Panel 1</${prefix}-tab-panel>
305
+ <${prefix}-tab-panel slot="tabpanel">Nested Tab Panel 2</${prefix}-tab-panel>
306
+ </${prefix}-tabs>
307
+ </${prefix}-tab-panel>
308
+ <${prefix}-tab-panel slot="tabpanel">Tab Panel 2</${prefix}-tab-panel>
309
+ <${prefix}-tab-panel slot="tabpanel">Tab Panel 3</${prefix}-tab-panel>
310
+ <${prefix}-tab-panel slot="tabpanel">Tab Panel 4</${prefix}-tab-panel>
311
+ </${prefix}-tabs>
312
+ </${prefix}-card>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="row">
317
+ <div class="column">
318
+ <${prefix}-card style="padding:20px;">
319
+ <${prefix}-card style="padding:20px;">
320
+ <${prefix}-card>
321
+ <h3 style="padding-left: 8px;">Divider</h3>
322
+ <${prefix}-divider></${prefix}-divider>
323
+ </${prefix}-card>
324
+ </${prefix}-card>
325
+ </${prefix}-card>
326
+ </div>
327
+ <div class="column">
328
+ <${prefix}-card style="padding:20px;">
329
+ <h3>Skeleton</h3>
330
+ <${prefix}-skeleton style="width: 50px; height: 50px;" shape="circle"></${prefix}-skeleton>
331
+ <${prefix}-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect"></${prefix}-skeleton>
332
+ <${prefix}-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect"></${prefix}-skeleton>
333
+ <${prefix}-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px;" shape="rect"></${prefix}-skeleton>
334
+ <${prefix}-skeleton style="border-radius: 4px;width: 75px;height: 30px;margin-top: 20px;margin-bottom: 10px;"
335
+ shape="rect"></${prefix}-skeleton>
336
+ </${prefix}-card>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="row">
341
+ <div class="column">
342
+ <${prefix}-horizontal-scroll class="horizontal-scroll">
343
+ ${repeat((x) => x.cards, html `
344
+ <${prefix}-card class="card-padding">
345
+ Card number ${(x) => x}
346
+ <${prefix}-button>A button</${prefix}-button>
347
+ </${prefix}-card>
348
+ `)}
349
+ </${prefix}-horizontal-scroll>
350
+ </div>
351
+ <div class="column">
352
+ <${prefix}-listbox>
353
+ <${prefix}-option>Option 1</${prefix}-option>
354
+ <${prefix}-option>Option 2</${prefix}-option>
355
+ <${prefix}-option>Option 3</${prefix}-option>
356
+ </${prefix}-listbox>
357
+ </div>
358
+ </div>
359
+ <div class="row">
360
+ <div class="column">
361
+ <${prefix}-toolbar>
362
+ <span slot="label">Toolbar</span>
363
+ <${prefix}-checkbox>Checkbox</${prefix}-checkbox>
364
+ <${prefix}-checkbox>Checkbox</${prefix}-checkbox>
365
+ <${prefix}-button slot="end"><${prefix}-icon name="power-off" slot="start"></${prefix}-icon> Sign Out</${prefix}-button>
366
+ <${prefix}-select>
367
+ <${prefix}-option value="1">Option 1</${prefix}-option>
368
+ <${prefix}-option value="2">Option 2</${prefix}-option>
369
+ <${prefix}-option value="3">Option 3</${prefix}-option>
370
+ </${prefix}-select>
371
+ </${prefix}-toolbar>
372
+ </div>
373
+ <div class="column">
374
+ <${prefix}-banner ${ref('banner')}>
375
+ <div slot="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
376
+ Lorem, ipsum dolor.</div>
377
+ <${prefix}-button slot="action" @click="${(x) => x.dismissBanner()}" :appearance="${(x) => x.buttonAppearanceText}">
378
+ Ignore
379
+ </${prefix}-button>
380
+ <${prefix}-button slot="action" :appearance="${(x) => x.buttonAppearanceText}">
381
+ Diagnose
382
+ </${prefix}-button>
383
+ </${prefix}-banner>
384
+ </div>
385
+ </div>
386
+ <div class="row">
387
+ <div class="column">
388
+ <${prefix}-stepper>
389
+ <${prefix}-stepper-tab>stepper 1</${prefix}-stepper-tab>
390
+ <${prefix}-stepper-tab>stepper 2</${prefix}-stepper-tab>
391
+ <${prefix}-stepper-tab>stepper 3</${prefix}-stepper-tab>
392
+ <${prefix}-stepper-tab>stepper 4</${prefix}-stepper-tab>
393
+ <${prefix}-stepper-tab-panel>Stepper Panel 1</${prefix}-stepper-tab-panel>
394
+ <${prefix}-stepper-tab-panel>Stepper Panel 2</${prefix}-stepper-tab-panel>
395
+ <${prefix}-stepper-tab-panel>Stepper Panel 3</${prefix}-stepper-tab-panel>
396
+ <${prefix}-stepper-tab-panel>Stepper Panel 4</${prefix}-stepper-tab-panel>
397
+ </${prefix}-stepper>
398
+ </div>
399
+ <div class="column">
400
+ <${prefix}-toast notify="critical">
401
+ <h6 slot="top">Toast title</h6>
402
+ <span slot="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet. Lorem, ipsum dolor.</span>
403
+ <span slot="date">Today 14:28</span>
404
+ <${prefix}-button :appearance="${(x) => x.buttonAppearanceAccent}" slot="bottom">Close notification</${prefix}-button>
405
+ </${prefix}-toast>
406
+ </div>
407
+ </div>
197
408
  </div>
198
409
  </div>
199
410
  </${prefix}-design-system-provider>
package/dist/esm/index.js CHANGED
@@ -3,11 +3,13 @@ import { Form as FoundationForms } from '@genesislcap/foundation-forms';
3
3
  import { provideDesignSystem as provideZeroDesignSystem, baseComponents as zeroBaseComponents, } from '@genesislcap/foundation-zero';
4
4
  import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
5
5
  import { foundationGridComponents } from '@genesislcap/grid-pro';
6
+ import { provideDesignSystem as provideRapidDesignSystem, baseComponents as rapidBaseComponents, } from '@genesislcap/rapid-design-system';
6
7
  import { DesignSystemEditor, ColorPalette, PreviewComponents, ColorToken, ColorTokens, TypographyTokens, DesignSystemExport, DesignSystemPreview, PreviewForm, PreviewGrid, } from './components';
7
8
  export * from './components';
8
9
  export * from './types';
9
10
  provideZeroDesignSystem().register(zeroBaseComponents, zeroGridComponents);
10
11
  provideAlphaDesignSystem().register(alphaBaseComponents, foundationGridComponents);
12
+ provideRapidDesignSystem().register(rapidBaseComponents, foundationGridComponents);
11
13
  DesignSystemEditor;
12
14
  PreviewComponents;
13
15
  DesignSystemExport;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/documentation-components",
3
3
  "description": "Genesis Foundation Dcoumentation Components",
4
- "version": "14.127.0",
4
+ "version": "14.127.2",
5
5
  "sideEffects": [
6
6
  "*.css"
7
7
  ],
@@ -23,17 +23,18 @@
23
23
  "clean": "rimraf dist tsconfig.tsbuildinfo"
24
24
  },
25
25
  "devDependencies": {
26
- "@genesislcap/genx": "14.127.0",
26
+ "@genesislcap/genx": "14.127.2",
27
27
  "rimraf": "^3.0.2"
28
28
  },
29
29
  "dependencies": {
30
- "@genesislcap/alpha-design-system": "14.127.0",
31
- "@genesislcap/foundation-forms": "14.127.0",
32
- "@genesislcap/foundation-ui": "14.127.0",
33
- "@genesislcap/foundation-utils": "14.127.0",
34
- "@genesislcap/foundation-zero": "14.127.0",
35
- "@genesislcap/foundation-zero-grid-pro": "14.127.0",
36
- "@genesislcap/grid-pro": "14.127.0",
30
+ "@genesislcap/alpha-design-system": "14.127.2",
31
+ "@genesislcap/foundation-forms": "14.127.2",
32
+ "@genesislcap/foundation-ui": "14.127.2",
33
+ "@genesislcap/foundation-utils": "14.127.2",
34
+ "@genesislcap/foundation-zero": "14.127.2",
35
+ "@genesislcap/foundation-zero-grid-pro": "14.127.2",
36
+ "@genesislcap/grid-pro": "14.127.2",
37
+ "@genesislcap/rapid-design-system": "14.127.2",
37
38
  "@jsonforms/core": "^3.0.0",
38
39
  "@microsoft/fast-colors": "^5.3.1",
39
40
  "@microsoft/fast-components": "^2.30.6",
@@ -50,5 +51,5 @@
50
51
  "publishConfig": {
51
52
  "access": "public"
52
53
  },
53
- "gitHead": "9dab321ca616a32643b29abc699626e973a3ac8f"
54
+ "gitHead": "80ea1376a014bd79ecb63f650a1f2472d2fe1fd4"
54
55
  }