@genesislcap/rapid-design-system 14.127.2

package/dist/esm/snackbar/snackbar.stories.js

@@ -0,0 +1,95 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Snackbar',
+    component: 'rapid-snackbar',
+};
+export default meta;
+const showError = (errorText) => {
+    var _a, _b;
+    let snackbar = document.querySelector('#js-snackbar');
+    let snackbarNotify = document.querySelector('#js-snackbar-notify');
+    if (!snackbar) {
+        snackbar = document.createElement('rapid-snackbar');
+        snackbar.id = 'js-snackbar';
+        (_a = document.querySelector('#rapid-snackbar')) === null || _a === void 0 ? void 0 : _a.appendChild(snackbar);
+    }
+    if (!snackbarNotify) {
+        snackbarNotify = document.createElement('rapid-snackbar');
+        snackbarNotify.id = 'js-snackbar-notify';
+        (_b = document.querySelector('#rapid-snackbar')) === null || _b === void 0 ? void 0 : _b.appendChild(snackbar);
+    }
+    snackbar.error = {
+        title: 'Error Title',
+        errorDetails: `${errorText} ID - ${Math.random()}`,
+        config: {
+            snackbar: {
+                type: 'error',
+                confirmingActions: [
+                    {
+                        label: 'Action',
+                        action: () => {
+                            alert('Action in progress');
+                        },
+                    },
+                ],
+            },
+        },
+    };
+    snackbar.notification = {
+        title: 'Notification Title',
+        body: `${errorText} ID - ${Math.random()}`,
+        config: {
+            snackbar: {
+                type: 'error',
+                confirmingActions: [
+                    {
+                        label: 'Action',
+                        action: () => {
+                            alert('Action in progress');
+                        },
+                    },
+                ],
+            },
+        },
+    };
+};
+const showNotification = (notoficationText) => {
+    var _a;
+    let snackbarNotify = document.querySelector('#js-snackbar-notify');
+    if (!snackbarNotify) {
+        snackbarNotify = document.createElement('rapid-snackbar');
+        snackbarNotify.id = 'js-snackbar-notify';
+        (_a = document.querySelector('#rapid-snackbar')) === null || _a === void 0 ? void 0 : _a.appendChild(snackbarNotify);
+    }
+    snackbarNotify.notification = {
+        title: 'Notification Title',
+        body: `${notoficationText} ID - Notify - ${Math.random()}`,
+        config: {
+            snackbar: {
+                type: 'error',
+                confirmingActions: [
+                    {
+                        label: 'Action',
+                        action: () => {
+                            alert('Action in progress');
+                        },
+                    },
+                ],
+            },
+        },
+    };
+};
+export const Primary = {
+    args: {
+        errorText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+        notificationText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+    },
+    render: ({ errorText, notificationText }) => html `
+    <div id="rapid-snackbar" style="width: 100%;">
+      <rapid-button @click="${() => showError(errorText)}">Show Rapid Snackbar</rapid-button>
+      <rapid-button @click="${() => showNotification(notificationText)}">
+        Show Rapid Snackbar - Notification
+      </rapid-button>
+    </div>
+  `,
+};

package/dist/esm/snackbar/snackbar.styles.js

@@ -0,0 +1,24 @@
+import { foundationSnackbarStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidSnackbarStyles = css `
+  ${foundationSnackbarStyles}
+  .snackbar {
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-2);
+    background-color: var(--neutral-layer-1);
+    padding: calc((var(--design-unit) - 2) * 1px) calc(var(--design-unit) * 4px);
+  }
+
+  :host([type='error']) .snackbar::after {
+    background-color: var(--error-color);
+  }
+
+  .content {
+    font: var(--body-font);
+    font-size: var(--type-ramp-minus-2-font-size);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .action {
+    gap: calc(var(--design-unit) * 2px);
+  }
+`;

package/dist/esm/snackbar/snackbar.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedSnackbar } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidSnackbarTemplate = html `
+  ${getPrefixedSnackbar('rapid')}
+`;

package/dist/esm/stepper/index.js

@@ -0,0 +1,3 @@
+export * from './stepper';
+export * from './stepper.styles';
+export * from './stepper.template';

package/dist/esm/stepper/stepper.js

@@ -0,0 +1,10 @@
+import { defaultStepperConfig, foundationStepperShadowOptions, Stepper as FoundationStepper, } from '@genesislcap/foundation-ui';
+import { rapidStepperStyles as styles } from './stepper.styles';
+import { rapidStepperTemplate as template } from './stepper.template';
+/**
+ * @tagname %%prefix%%-stepper
+ */
+export class Stepper extends FoundationStepper {
+}
+export const rapidStepper = Stepper.compose(Object.assign({ baseName: 'stepper', template,
+    styles, shadowOptions: foundationStepperShadowOptions }, defaultStepperConfig));

package/dist/esm/stepper/stepper.stories.js

@@ -0,0 +1,54 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Stepper',
+    component: 'rapid-stepper',
+};
+export default meta;
+export const Vertical = {
+    args: {
+        orientation: 'vertical',
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['vertical', 'horizontal'],
+        },
+    },
+    render: ({ orientation }) => html `
+    <div style="display:flex; min-height: 400px">
+      <rapid-stepper orientation="${orientation}">
+        <rapid-stepper-tab>Rapid stepper 1</rapid-stepper-tab>
+        <rapid-stepper-tab>Rapid stepper 2</rapid-stepper-tab>
+        <rapid-stepper-tab>Rapid stepper 3</rapid-stepper-tab>
+        <rapid-stepper-tab>Rapid stepper 4</rapid-stepper-tab>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 1</rapid-stepper-tab-panel>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 2</rapid-stepper-tab-panel>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 3</rapid-stepper-tab-panel>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 4</rapid-stepper-tab-panel>
+      </rapid-stepper>
+    </div>
+  `,
+};
+export const Horizontal = {
+    args: {
+        orientation: 'horizontal',
+    },
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['vertical', 'horizontal'],
+        },
+    },
+    render: ({ orientation }) => html `
+    <div style="display:flex; min-height: 400px">
+      <rapid-stepper orientation="${orientation}">
+        <rapid-stepper-tab>Rapid stepper 1</rapid-stepper-tab>
+        <rapid-stepper-tab>Rapid stepper 2</rapid-stepper-tab>
+        <rapid-stepper-tab>Rapid stepper 3</rapid-stepper-tab>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 1</rapid-stepper-tab-panel>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 2</rapid-stepper-tab-panel>
+        <rapid-stepper-tab-panel>Rapid Stepper Panel 3</rapid-stepper-tab-panel>
+      </rapid-stepper>
+    </div>
+  `,
+};

package/dist/esm/stepper/stepper.styles.js

@@ -0,0 +1,50 @@
+import { foundationStepperStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidStepperStyles = css `
+  ${foundationStepperStyles}
+
+  :host {
+    font-family: var(--body-font);
+  }
+
+  :host([orientation='horizontal']) {
+    height: auto;
+  }
+
+  .stepper-tab-panel {
+    border: none;
+    height: auto;
+  }
+
+  :host([orientation='horizontal']) .stepper-tab-panel {
+    height: 100%;
+  }
+
+  .stepper-tab {
+    background-color: var(--neutral-layer-3);
+    border: none;
+  }
+
+  .stepper-panel-container {
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .action-buttons-container {
+    padding: calc(var(--design-unit) * 2px);
+    width: auto;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .stepper-tab-menu {
+    margin-bottom: calc(var(--design-unit) * 4px);
+  }
+
+  .stepper-tab-progress {
+    padding: calc(var(--design-unit) * 4px) 0;
+  }
+
+  label {
+    padding: 0 calc(var(--design-unit) * 2px);
+    color: var(--neutral-foreground-hint);
+  }
+`;

package/dist/esm/stepper/stepper.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedStepper } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidStepperTemplate = html `
+  ${getPrefixedStepper('rapid')}
+`;

package/dist/esm/stepper-tab/index.js

@@ -0,0 +1,3 @@
+export * from './stepper-tab';
+export * from './stepper-tab.styles';
+export * from './stepper-tab.template';

package/dist/esm/stepper-tab/stepper-tab.js

@@ -0,0 +1,10 @@
+import { defaultStepperTabConfig, foundationStepperTabShadowOptions, StepperTab as FoundationStepperTab, } from '@genesislcap/foundation-ui';
+import { rapidStepperTabStyles as styles } from './stepper-tab.styles';
+import { rapidStepperTabTemplate as template } from './stepper-tab.template';
+/**
+ * @tagname %%prefix%%-stepper-tab
+ */
+export class StepperTab extends FoundationStepperTab {
+}
+export const rapidStepperTab = StepperTab.compose(Object.assign({ baseName: 'stepper-tab', template,
+    styles, shadowOptions: foundationStepperTabShadowOptions }, defaultStepperTabConfig));

package/dist/esm/stepper-tab/stepper-tab.styles.js

@@ -0,0 +1,63 @@
+import { foundationStepperTabStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidStepperTabStyles = (context, definition) => css `
+  ${foundationStepperTabStyles(context, definition)}
+
+  rapid-tree-item {
+    --design-unit: 2.5;
+    --neutral-fill-stealth-rest: var(--neutral-layer-3);
+    --neutral-fill-stealth-hover: var(--fill-color);
+    --neutral-fill-rest: var(--fill-color);
+    --base-height-multiplier: 14.5;
+
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--fill-color);
+  }
+
+  .completed-icon {
+    color: var(--success-color);
+  }
+
+  .tree-item::part(positioning-region)::before {
+    width: var(--tree-item-nested-width);
+  }
+
+  .stepper-icon {
+    margin-right: calc(var(--design-unit) * 2px);
+  }
+
+  .error-icon {
+    color: var(--error-color);
+  }
+
+  .step-number {
+    font-size: var(--type-ramp-minus-1-font-size);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-input-rest);
+  }
+
+  .step-title {
+    font-size: var(--type-ramp-base-font-size);
+  }
+
+  .angle-icon {
+    margin: 0 calc(var(--design-unit) * 4px);
+  }
+
+  :host([completed]) .step-number {
+    border-color: var(--success-color);
+    color: var(--success-color);
+  }
+
+  :host([completed]) .step-title,
+  :host([completed]) .angle-icon {
+    color: var(--success-color);
+  }
+
+  :host([error]) .step-number {
+    border-color: var(--error-color);
+    color: var(--error-color);
+  }
+
+  :host([error]) .step-title {
+    color: var(--error-color);
+  }
+`;

package/dist/esm/stepper-tab/stepper-tab.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedStepperTab } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidStepperTabTemplate = html `
+  ${getPrefixedStepperTab('rapid')}
+`;

package/dist/esm/stepper-tab-panel/index.js

@@ -0,0 +1,2 @@
+export * from './stepper-tab-panel';
+export * from './stepper-tab-panel.template';

package/dist/esm/stepper-tab-panel/stepper-tab-panel.js

@@ -0,0 +1,8 @@
+import { defaultStepperTabPanelConfig, foundationStepperTabPanelShadowOptions, StepperTabPanel as FoundationStepperTabPanel, } from '@genesislcap/foundation-ui';
+import { rapidStepperTabPanelTemplate as template } from './stepper-tab-panel.template';
+/**
+ * @tagname %%prefix%%-stepper-tab-panel
+ */
+export class StepperTabPanel extends FoundationStepperTabPanel {
+}
+export const rapidStepperTabPanel = StepperTabPanel.compose(Object.assign({ baseName: 'stepper-tab-panel', template, shadowOptions: foundationStepperTabPanelShadowOptions }, defaultStepperTabPanelConfig));

package/dist/esm/stepper-tab-panel/stepper-tab-panel.template.js

@@ -0,0 +1,2 @@
+import { foundationStepperTabPanelTemplate } from '@genesislcap/foundation-ui';
+export const rapidStepperTabPanelTemplate = (context, definition) => foundationStepperTabPanelTemplate(context, definition);

package/dist/esm/switch/index.js

@@ -0,0 +1,3 @@
+export * from './switch';
+export * from './switch.styles';
+export * from './switch.template';

package/dist/esm/switch/switch.js

@@ -0,0 +1,13 @@
+import { foundationSwitchShadowOptions, Switch as FoundationSwitch, } from '@genesislcap/foundation-ui';
+import { rapidSwitchStyles as styles } from './switch.styles';
+import { rapidSwitchTemplate as template } from './switch.template';
+export const defaultSwitchConfig = {
+    switch: `<div class="checked-indicator" part="checked-indicator"></div>`,
+};
+/**
+ * @tagname %%prefix%%-switch
+ */
+export class Switch extends FoundationSwitch {
+}
+export const rapidSwitch = Switch.compose(Object.assign({ baseName: 'switch', template,
+    styles, shadowOptions: foundationSwitchShadowOptions }, defaultSwitchConfig));

package/dist/esm/switch/switch.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Switch',
+    component: 'rapid-switch',
+};
+export default meta;
+export const Primary = {
+    args: {
+        checked: false,
+    },
+    render: ({ checked }) => html `
+    <rapid-switch checked="${checked}"></rapid-switch>
+  `,
+};

package/dist/esm/switch/switch.styles.js

@@ -0,0 +1,40 @@
+import { foundationSwitchStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidSwitchStyles = (context, definition) => css `
+  ${foundationSwitchStyles(context, definition)}
+  :host {
+    --primary-gradient-angle: -113.5deg;
+  }
+
+  .switch {
+    background: none;
+    border-color: var(--neutral-stroke-rest);
+  }
+
+  .checked-indicator {
+    background-color: var(--neutral-stroke-rest);
+  }
+
+  .switch:hover {
+    border-color: var(--neutral-stroke-rest);
+    background: none;
+  }
+
+  :host([aria-checked='true']) .switch {
+    background: none;
+  }
+
+  :host([aria-checked='true']) .checked-indicator {
+    background: var(--accent-fill-rest);
+  }
+
+  :host([aria-checked='true']:not([disabled])) .switch:hover,
+  :host([aria-checked='true']:not([disabled])) .switch:active {
+    background: none;
+  }
+
+  :host([aria-checked='true']:not([disabled])) .switch:hover .checked-indicator,
+  :host([aria-checked='true']:not([disabled])) .switch:active .checked-indicator {
+    background: var(--accent-fill-rest);
+  }
+`;

package/dist/esm/switch/switch.template.js

@@ -0,0 +1,2 @@
+import { foundationSwitchTemplate } from '@genesislcap/foundation-ui';
+export const rapidSwitchTemplate = (context, definition) => foundationSwitchTemplate(context, definition);

package/dist/esm/tab/index.js

@@ -0,0 +1,3 @@
+export * from './tab';
+export * from './tab.styles';
+export * from './tab.template';

package/dist/esm/tab/tab.js

@@ -0,0 +1,10 @@
+import { defaultTabConfig, foundationTabShadowOptions, Tab as FoundationTab, } from '@genesislcap/foundation-ui';
+import { rapidTabStyles as styles } from './tab.styles';
+import { rapidTabTemplate as template } from './tab.template';
+/**
+ * @tagname %%prefix%%-tab
+ */
+export class Tab extends FoundationTab {
+}
+export const rapidTab = Tab.compose(Object.assign({ baseName: 'tab', template,
+    styles, shadowOptions: foundationTabShadowOptions }, defaultTabConfig));

package/dist/esm/tab/tab.styles.js

@@ -0,0 +1,17 @@
+import { foundationTabStyles } from '@genesislcap/foundation-ui';
+import { neutralLayer2, neutralLayer4 } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidTabStyles = (context, definition) => css `
+  ${foundationTabStyles(context, definition)}
+  :host {
+    background-color: ${neutralLayer2};
+    border-radius: calc(var(--control-corner-radius) * 2px) calc(var(--control-corner-radius) * 2px);
+    box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);
+    margin-right: calc(var(--design-unit) * 5px);
+  }
+
+  :host([aria-selected='true']),
+  :host([aria-selected='true']:hover) {
+    background-color: ${neutralLayer4};
+  }
+`;

package/dist/esm/tab/tab.template.js

@@ -0,0 +1,2 @@
+import { foundationTabTemplate } from '@genesislcap/foundation-ui';
+export const rapidTabTemplate = (context, definition) => foundationTabTemplate(context, definition);

package/dist/esm/tab-panel/index.js

@@ -0,0 +1,3 @@
+export * from './tab-panel';
+export * from './tab-panel.styles';
+export * from './tab-panel.template';

package/dist/esm/tab-panel/tab-panel.js

@@ -0,0 +1,10 @@
+import { defaultTabPanelConfig, foundationTabPanelShadowOptions, TabPanel as FoundationTabPanel, } from '@genesislcap/foundation-ui';
+import { rapidTabPanelStyles as styles } from './tab-panel.styles';
+import { rapidTabPanelTemplate as template } from './tab-panel.template';
+/**
+ * @tagname %%prefix%%-tab-panel
+ */
+export class TabPanel extends FoundationTabPanel {
+}
+export const rapidTabPanel = TabPanel.compose(Object.assign({ baseName: 'tab-panel', template,
+    styles, shadowOptions: foundationTabPanelShadowOptions }, defaultTabPanelConfig));

package/dist/esm/tab-panel/tab-panel.styles.js

@@ -0,0 +1,8 @@
+import { foundationTabPanelStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidTabPanelStyles = (context, definition) => css `
+  ${foundationTabPanelStyles(context, definition)}
+  :host {
+    padding: 0;
+  }
+`;

package/dist/esm/tab-panel/tab-panel.template.js

@@ -0,0 +1,2 @@
+import { foundationTabPanelTemplate } from '@genesislcap/foundation-ui';
+export const rapidTabPanelTemplate = (context, definition) => foundationTabPanelTemplate(context, definition);

package/dist/esm/tabs/index.js

@@ -0,0 +1,3 @@
+export * from './tabs';
+export * from './tabs.styles';
+export * from './tabs.template';

package/dist/esm/tabs/tabs.js

@@ -0,0 +1,17 @@
+import { Tabs as FoundationTabs, defaultTabsConfig, foundationTabsShadowOptions, } from '@genesislcap/foundation-ui';
+import { parseColorHexRGB } from '@microsoft/fast-colors';
+import { SwatchRGB } from '@microsoft/fast-components';
+import { rapidTabsStyles as styles } from './tabs.styles';
+import { rapidTabsTemplate as template } from './tabs.template';
+export const swatchFromColor = (hexColor) => {
+    const color = parseColorHexRGB(hexColor);
+    if (color) {
+        return SwatchRGB.from(color);
+    }
+    return null;
+};
+// neutralFillRest.withDefault(swatchFromColor('#1f282d'));
+export class Tabs extends FoundationTabs {
+}
+export const rapidTabs = Tabs.compose(Object.assign({ baseName: 'tabs', template,
+    styles, shadowOptions: foundationTabsShadowOptions }, defaultTabsConfig));

package/dist/esm/tabs/tabs.stories.js

@@ -0,0 +1,57 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Tabs',
+    component: 'rapid-tabs',
+};
+export default meta;
+const cardStyle = 'height: 50%; width: 70%; padding: 16px;';
+export const Default = {
+    args: {
+        appearance: 'primary',
+    },
+    argTypes: {
+        appearance: {
+            control: 'select',
+            options: ['primary', 'secondary'],
+        },
+    },
+    render: ({ appearance }) => html `
+    <rapid-card style="${cardStyle}">
+      <rapid-tabs appearance="${appearance}">
+        <span part="start" class="start" slot="start">Blotter</span>
+        <rapid-tab appearance="${appearance}">Rapid Tab 1</rapid-tab>
+        <rapid-tab appearance="${appearance}" slot="tab">Rapid Tab 2</rapid-tab>
+        <rapid-tab appearance="${appearance}" slot="tab">Rapid Tab 3</rapid-tab>
+        <rapid-tab appearance="${appearance}" slot="tab">Rapid Tab 4</rapid-tab>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 1</rapid-tab-panel>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 2</rapid-tab-panel>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 3</rapid-tab-panel>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 4</rapid-tab-panel>
+      </rapid-tabs>
+    </rapid-card>
+  `,
+};
+export const Nested = {
+    render: () => html `
+    <rapid-card style="${cardStyle}">
+      <rapid-tabs>
+        <span part="start" class="start" slot="start">Blotter</span>
+        <rapid-tab>Rapid Tab 1</rapid-tab>
+        <rapid-tab slot="tab">Rapid Tab 2</rapid-tab>
+        <rapid-tab slot="tab">Rapid Tab 3</rapid-tab>
+        <rapid-tab slot="tab">Rapid Tab 4</rapid-tab>
+        <rapid-tab-panel slot="tabpanel">
+          <rapid-tabs appearance="secondary">
+            <rapid-tab appearance="secondary" slot="tab">Rapid Nested Tab 1</rapid-tab>
+            <rapid-tab appearance="secondary" slot="tab">Rapid Nested Tab 2</rapid-tab>
+            <rapid-tab-panel slot="tabpanel">Rapid Nested Tab Panel 1</rapid-tab-panel>
+            <rapid-tab-panel slot="tabpanel">Rapid Nested Tab Panel 2</rapid-tab-panel>
+          </rapid-tabs>
+        </rapid-tab-panel>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 2</rapid-tab-panel>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 3</rapid-tab-panel>
+        <rapid-tab-panel slot="tabpanel">Rapid Tab Panel 4</rapid-tab-panel>
+      </rapid-tabs>
+    </rapid-card>
+  `,
+};