@genesislcap/rapid-design-system 14.127.2

package/dist/esm/base-components.js

@@ -0,0 +1,154 @@
+// eslint-disable-next-line import/order
+import { designSystemProvider } from './design-system-provider';
+import { rapidAccordion } from './accordion';
+import { rapidAccordionItem } from './accordion-item';
+import { rapidActionsMenu } from './actions-menu';
+import { rapidAnchor } from './anchor';
+import { rapidAnchoredRegion } from './anchored-region';
+import { rapidAvatar } from './avatar';
+import { rapidBadge } from './badge';
+import { rapidBanner } from './banner';
+import { rapidBreadcrumb } from './breadcrumb';
+import { rapidBreadcrumbItem } from './breadcrumb-item';
+import { rapidButton } from './button';
+import { rapidCalendar } from './calendar';
+import { rapidCard } from './card';
+import { rapidCheckbox } from './checkbox';
+import { rapidCombobox } from './combobox';
+import { rapidConnectionIndicator } from './connection-indicator';
+import { rapidDataGrid } from './data-grid';
+import { rapidDataGridCell } from './data-grid-cell';
+import { rapidDataGridRow } from './data-grid-row';
+import { rapidDatePicker } from './date-picker';
+import { rapidDialog } from './dialog';
+import { rapidDisclosure } from './disclosure';
+import { rapidDivider } from './divider';
+import { rapidDropdownMenu } from './dropdown-menu';
+import { rapidErrorBoundary } from './error-boundary';
+import { rapidFileUpload } from './file-upload';
+import { rapidFilter } from './filter';
+import { rapidFilterBar } from './filter-bar';
+import { rapidFlexLayout } from './flex-layout';
+import { rapidFlipper } from './flipper';
+import { rapidFlyout } from './flyout';
+import { rapidGridLayout } from './grid-layout';
+import { rapidGridLayoutItem } from './grid-layout-item';
+import { rapidHorizontalScroll } from './horizontal-scroll';
+import { rapidIcon } from './icon';
+import { rapidListbox } from './listbox';
+import { rapidListboxOption } from './listbox-option';
+import { rapidMenu } from './menu';
+import { rapidMenuItem } from './menu-item';
+import { rapidModal } from './modal';
+import { rapidMultiselect } from './multiselect';
+import { rapidNumberField } from './number-field';
+import { rapidProgress } from './progress';
+import { rapidProgressRing } from './progress-ring';
+import { rapidRadio } from './radio';
+import { rapidRadioGroup } from './radio-group';
+import { rapidSegmentedControl } from './segmented-control';
+import { rapidSegmentedItem } from './segmented-item';
+import { rapidSelect } from './select';
+import { rapidSkeleton } from './skeleton';
+import { rapidSlider } from './slider';
+import { rapidSliderLabel } from './slider-label';
+import { rapidSnackbar } from './snackbar';
+import { rapidStepper } from './stepper';
+import { rapidStepperTab } from './stepper-tab';
+import { rapidStepperTabPanel } from './stepper-tab-panel';
+import { rapidSwitch } from './switch';
+import { rapidTab } from './tab';
+import { rapidTabPanel } from './tab-panel';
+import { rapidTabs } from './tabs';
+import { rapidTextArea } from './text-area';
+import { rapidTextField } from './text-field';
+import { rapidToast } from './toast';
+import { rapidToolbar } from './toolbar';
+import { rapidTooltip } from './tooltip';
+import { rapidTreeItem } from './tree-item';
+import { rapidTreeView } from './tree-view';
+import { rapidUrlInput } from './url-input';
+export const baseComponents = {
+    designSystemProvider,
+    rapidAccordion,
+    rapidAccordionItem,
+    rapidActionsMenu,
+    rapidAnchor,
+    rapidAnchoredRegion,
+    rapidAvatar,
+    rapidBadge,
+    rapidBanner,
+    rapidBreadcrumb,
+    rapidBreadcrumbItem,
+    rapidButton,
+    rapidCalendar,
+    rapidCard,
+    rapidCheckbox,
+    rapidCombobox,
+    rapidConnectionIndicator,
+    rapidDataGrid,
+    rapidDataGridCell,
+    rapidDataGridRow,
+    rapidDatePicker,
+    rapidDialog,
+    rapidDisclosure,
+    rapidDivider,
+    rapidDropdownMenu,
+    rapidErrorBoundary,
+    rapidFileUpload,
+    rapidFilter,
+    rapidFilterBar,
+    rapidFlexLayout,
+    rapidFlipper,
+    rapidFlyout,
+    rapidGridLayout,
+    rapidGridLayoutItem,
+    rapidHorizontalScroll,
+    rapidIcon,
+    rapidListbox,
+    rapidListboxOption,
+    rapidMenu,
+    rapidMenuItem,
+    rapidModal,
+    rapidMultiselect,
+    rapidNumberField,
+    rapidProgress,
+    rapidProgressRing,
+    rapidRadio,
+    rapidRadioGroup,
+    rapidSegmentedControl,
+    rapidSegmentedItem,
+    rapidSelect,
+    rapidSkeleton,
+    rapidSlider,
+    rapidSliderLabel,
+    rapidSnackbar,
+    rapidStepper,
+    rapidStepperTab,
+    rapidStepperTabPanel,
+    rapidSwitch,
+    rapidTab,
+    rapidTabPanel,
+    rapidTabs,
+    rapidTextArea,
+    rapidTextField,
+    rapidToast,
+    rapidToolbar,
+    rapidTooltip,
+    rapidTreeItem,
+    rapidTreeView,
+    rapidUrlInput,
+    register(container, ...rest) {
+        if (!container) {
+            // preserve backward compatibility with code that loops through
+            // the values of this object and calls them as funcs with no args
+            return;
+        }
+        for (const key in this) {
+            if (key === 'register') {
+                continue;
+            }
+            this[key]().register(container, ...rest);
+        }
+    },
+};

package/dist/esm/breadcrumb/breadcrumb.js

@@ -0,0 +1,20 @@
+import { Breadcrumb as FoundationBreadcrumb } from '@genesislcap/foundation-ui';
+import { rapidBreadcrumbStyles as styles } from './breadcrumb.styles';
+import { rapidBreadcrumbTemplate as template } from './breadcrumb.template';
+/**
+ * @tagname %%prefix%%-breadcrumb
+ */
+export class Breadcrumb extends FoundationBreadcrumb {
+}
+// explicitly declaring for extensibility
+export const rapidBreadcrumbShadowOptions = undefined;
+export const defaultBreadcrumbConfig = {};
+/**
+ * The rapid Breadcrumb
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-breadcrumb\>
+ */
+export const rapidBreadcrumb = Breadcrumb.compose(Object.assign({ baseName: 'breadcrumb', template,
+    styles, shadowOptions: rapidBreadcrumbShadowOptions }, defaultBreadcrumbConfig));

package/dist/esm/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,35 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Breadcrumb',
+    component: 'rapid-breadcrumb',
+};
+export default meta;
+export const Default = {
+    args: {
+        breadcrumbItemsText: 'Breadcrumb Item',
+        breadcrumbCurrentItemText: 'Current Page',
+    },
+    render: ({ breadcrumbItemsText, breadcrumbCurrentItemText }) => html `
+    <rapid-breadcrumb>
+      <rapid-breadcrumb-item href="#">${breadcrumbItemsText} 1</rapid-breadcrumb-item>
+      <rapid-breadcrumb-item href="#">${breadcrumbItemsText} 2</rapid-breadcrumb-item>
+      <rapid-breadcrumb-item>${breadcrumbCurrentItemText}</rapid-breadcrumb-item>
+    </rapid-breadcrumb>
+  `,
+};
+export const WithIcon = {
+    args: {
+        breadcrumbItemsText: 'Breadcrumb Item',
+        breadcrumbCurrentItemText: 'Current Page',
+    },
+    render: ({ breadcrumbItemsText, breadcrumbCurrentItemText }) => html `
+    <rapid-breadcrumb>
+      <rapid-breadcrumb-item href="#">
+        <rapid-icon name="folder" size="md" variant="regular" slot="start"></rapid-icon>
+      </rapid-breadcrumb-item>
+      <rapid-breadcrumb-item href="#">${breadcrumbItemsText} 1</rapid-breadcrumb-item>
+      <rapid-breadcrumb-item href="#">${breadcrumbItemsText} 2</rapid-breadcrumb-item>
+      <rapid-breadcrumb-item>${breadcrumbCurrentItemText}</rapid-breadcrumb-item>
+    </rapid-breadcrumb>
+  `,
+};

package/dist/esm/breadcrumb/breadcrumb.styles.js

@@ -0,0 +1,5 @@
+import { foundationBreadcrumbStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidBreadcrumbStyles = (context, definition) => css `
+  ${foundationBreadcrumbStyles(context, definition)}
+`;

package/dist/esm/breadcrumb/breadcrumb.template.js

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

package/dist/esm/breadcrumb/index.js

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

package/dist/esm/breadcrumb-item/breadcrumb-item.js

@@ -0,0 +1,14 @@
+import { BreadcrumbItem as FoundationBreadcrumbItem, defaultBreadcrumbItemConfig, foundationBreadcrumbItemShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidBreadcrumbItemStyles as styles } from './breadcrumb-item.styles';
+import { rapidBreadcrumbItemTemplate as template } from './breadcrumb-item.template';
+export class BreadcrumbItem extends FoundationBreadcrumbItem {
+}
+/**
+ * The rapid Breadcrumb Item
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-breadcrumb-item\>
+ */
+export const rapidBreadcrumbItem = BreadcrumbItem.compose(Object.assign({ baseName: 'breadcrumb-item', template,
+    styles, shadowOptions: foundationBreadcrumbItemShadowOptions }, defaultBreadcrumbItemConfig));

package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js

@@ -0,0 +1,39 @@
+import { foundationBreadcrumbItemStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidBreadcrumbItemStyles = (context, definition) => css `
+  ${foundationBreadcrumbItemStyles(context, definition)}
+  .listitem {
+    color: var(--accent-foreground-rest);
+  }
+
+  .control {
+    color: var(--neutral-foreground-rest);
+  }
+
+  .control:hover {
+    color: var(--neutral-foreground-rest);
+  }
+
+  .separator {
+    color: var(--neutral-stroke-rest);
+    margin: 0 12px;
+  }
+
+  .control:hover .content::before {
+    background: var(--neutral-foreground-rest);
+  }
+
+  .control .start {
+    width: calc(var(--base-height-multiplier) * 3px);
+    height: calc(var(--base-height-multiplier) * 3px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    margin: 0 -4px 0 0;
+  }
+
+  .control:hover .start {
+    background: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
+  }
+`;

package/dist/esm/breadcrumb-item/breadcrumb-item.template.js

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

package/dist/esm/breadcrumb-item/index.js

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

package/dist/esm/button/button.js

@@ -0,0 +1,10 @@
+import { Button as FoundationButton, defaultButtonConfig, foundationButtonShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidButtonStyles as styles } from './button.styles';
+import { rapidButtonTemplate as template } from './button.template';
+/**
+ * @tagname %%prefix%%-button
+ */
+export class Button extends FoundationButton {
+}
+export const rapidButton = Button.compose(Object.assign({ baseName: 'button', template,
+    styles, shadowOptions: foundationButtonShadowOptions }, defaultButtonConfig));

package/dist/esm/button/button.stories.js

@@ -0,0 +1,60 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Button',
+    component: 'rapid-button',
+};
+export default meta;
+const wrapperStyle = 'display: flex; flex-direction: column;';
+const textStyle = 'font-size:13px;font-weight:600;color:white; padding: 8px 0px;';
+const StylesMapperTemplate = {
+    render: ({ appearances }) => html `
+    <div style="${wrapperStyle}">
+      ${appearances.map((appearanceName) => html `
+          <h3 style="${textStyle}">${appearanceName}</div>
+          <div style="display: flex; flex-direction: row; gap:16px;margin: 8px 0;">
+              <rapid-button appearance="${appearanceName}">Button</rapid-button>
+              <rapid-button appearance="${appearanceName}" disabled>Button</rapid-button>
+              <rapid-button appearance="${appearanceName}">
+                Button
+                <rapid-icon name="check" size="md" slot="end"></rapid-icon>
+              </rapid-button>
+              <rapid-button appearance="${appearanceName}">
+                Button
+                <rapid-icon name="edit" size="md" slot="start"></rapid-icon>
+              </rapid-button>
+          </div>
+          `)}
+    </div>
+  `,
+};
+const FastAppearanceValues = ['accent', 'neutral', 'outline', 'stealth', 'lightweight'];
+const RapidAppearanceValues = ['primary', 'primary-outline', 'neutral', 'neutral-outline', 'link'];
+export const Default = {
+    args: {
+        appearance: 'primary',
+        disabled: false,
+    },
+    argTypes: {
+        appearance: {
+            control: 'select',
+            options: [...RapidAppearanceValues, ...FastAppearanceValues],
+        },
+    },
+    render: ({ appearance, disabled }) => html `
+    <div style="${wrapperStyle}">
+      <h3 style="${textStyle}">${appearance}</div>
+      <div style="display: flex; flex-direction: row; gap:16px;margin: 8px 0;">
+        <rapid-button appearance="${appearance}" ?disabled="${disabled}">Button</rapid-button>
+        <rapid-button appearance="${appearance}" ?disabled="${disabled}">
+          Button
+          <rapid-icon name="check" size="md" slot="end"></rapid-icon>
+        </rapid-button>
+      </div>
+    </div>`,
+};
+export const RapidButtonAppearances = Object.assign({ args: {
+        appearances: RapidAppearanceValues,
+    } }, StylesMapperTemplate);
+export const FastButtonAppearances = Object.assign({ args: {
+        appearances: FastAppearanceValues,
+    } }, StylesMapperTemplate);

package/dist/esm/button/button.styles.js

@@ -0,0 +1,145 @@
+import { foundationButtonStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+import { appearanceBehavior } from '../utils';
+const rapidPrimaryStyles = css `
+  :host([appearance='primary']) {
+    background: color-mix(in srgb, var(--accent-fill-rest), transparent 50%);
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+  }
+
+  :host([appearance='primary']:hover) {
+    background: var(--accent-fill-rest);
+  }
+
+  :host([appearance='primary'][disabled]),
+  :host([appearance='primary'][disabled]):hover,
+  :host([appearance='primary'][disabled]):active {
+    background: color-mix(in srgb, var(--accent-fill-rest), transparent 70%);
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
+    opacity: 100%;
+  }
+
+  :host([appearance='primary']:active) {
+    background: color-mix(in srgb, var(--accent-fill-rest), transparent 70%);
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+  }
+`;
+const rapidPrimaryOutlineStyles = css `
+  :host([appearance='primary-outline']) {
+    background: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+  }
+
+  :host([appearance='primary-outline']:hover) {
+    background: color-mix(in srgb, var(--accent-fill-rest), transparent 50%);
+  }
+
+  :host([appearance='primary-outline'][disabled]),
+  :host([appearance='primary-outline'][disabled]):hover,
+  :host([appearance='primary-outline'][disabled]):active {
+    background: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
+    opacity: 100%;
+  }
+`;
+const rapidNeutralOutlineStyles = css `
+  :host([appearance='neutral-outline']) {
+    background: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+  }
+
+  :host([appearance='neutral-outline']:hover) {
+    background: color-mix(in srgb, var(--neutral-fill-rest), transparent 50%);
+  }
+
+  :host([appearance='neutral-outline'][disabled]),
+  :host([appearance='neutral-outline'][disabled]):hover,
+  :host([appearance='neutral-outline'][disabled]):active {
+    background: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
+    opacity: 100%;
+  }
+`;
+const rapidLinkStyles = css `
+  :host([appearance='link']) {
+    background: none;
+    border: none;
+    color: color-mix(in srgb, var(--accent-fill-rest), transparent 35%);
+  }
+
+  :host([appearance='link']) .control {
+    padding: 0;
+  }
+
+  :host([appearance='link']:hover) {
+    color: var(--accent-fill-rest);
+    background: none;
+  }
+
+  :host([appearance='link'][disabled]),
+  :host([appearance='link'][disabled]):hover,
+  :host([appearance='link'][disabled]):active {
+    background: none;
+    color: color-mix(in srgb, var(--accent-fill-rest), transparent 35%);
+    opacity: 100%;
+  }
+`;
+const baseStyles = (context, definition) => css `
+  :host {
+    font-weight: 500;
+    color: var(--neutral-foreground-rest);
+    box-sizing: border-box;
+    font-size: var(--type-ramp-minus-1-font-size);
+    height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) - 4) * 1px);
+  }
+
+  .control {
+    padding: 0 calc((16 + var(--design-unit) * 2 * var(--density)) * 1px);
+  }
+
+  .start {
+    margin-inline-end: calc(var(--design-unit) * 2px);
+  }
+
+  .end {
+    margin-inline-start: calc(var(--design-unit) * 2px);
+  }
+
+  .control:has(.start) {
+    padding-left: calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);
+  }
+
+  .control:has(.end) {
+    padding-right: calc((12 + var(--design-unit) * 2 * var(--density)) * 1px);
+  }
+
+  :host([appearance='neutral']) {
+    background: color-mix(in srgb, var(--neutral-fill-rest), transparent 50%);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+  }
+
+  :host([appearance='neutral']:hover) {
+    background: var(--neutral-fill-rest);
+  }
+
+  :host([appearance='neutral']:active) {
+    background: color-mix(in srgb, var(--neutral-fill-rest), transparent 70%));
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+  }
+
+  :host([appearance='neutral'][disabled]),
+  :host([appearance='neutral'][disabled]):hover,
+  :host([appearance='neutral'][disabled]):active {
+    background: color-mix(in srgb, var(--neutral-fill-rest), transparent 70%);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
+    opacity: 100%;
+  }
+`;
+export const rapidButtonStyles = (context, definition) => css `
+    ${foundationButtonStyles(context, definition)}
+    ${baseStyles(context, definition)}
+  `.withBehaviors(appearanceBehavior('primary', rapidPrimaryStyles), appearanceBehavior('primary-outline', rapidPrimaryOutlineStyles), appearanceBehavior('neutral-outline', rapidNeutralOutlineStyles), appearanceBehavior('link', rapidLinkStyles));

package/dist/esm/button/button.template.js

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

package/dist/esm/button/index.js

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

package/dist/esm/calendar/calendar.js

@@ -0,0 +1,10 @@
+import { Calendar as FoundationCalendar, defaultCalendarConfig, foundationCalendarShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidCalendarStyles as styles } from './calendar.styles';
+import { rapidCalendarTemplate as template } from './calendar.template';
+/**
+ * @tagname %%prefix%%-calendar
+ */
+export class Calendar extends FoundationCalendar {
+}
+export const rapidCalendar = Calendar.compose(Object.assign({ baseName: 'calendar', template,
+    styles, shadowOptions: foundationCalendarShadowOptions }, defaultCalendarConfig));

package/dist/esm/calendar/calendar.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Calendar',
+    component: 'rapid-calendar',
+};
+export default meta;
+const wrapperStyle = 'height: 400px; width: 100%;';
+export const Primary = {
+    args: {},
+    render: () => html `
+    <div style="${wrapperStyle}">
+      <rapid-calendar
+        id="zCalendar"
+        month="${new Date().getMonth() + 1}"
+        year="${new Date().getFullYear()}"
+        month-format="short"
+        weekday-format="narrow"
+        disabled-dates="${new Date().getMonth() + 1}-${new Date().getDate() > 1
+        ? new Date().getDate() - 1
+        : new Date().getDate() + 2}-${new Date().getFullYear()}"
+        selected-dates="${new Date().getMonth() +
+        1}-${new Date().getDate()}-${new Date().getFullYear()}"
+      >
+        <div
+          slot="${new Date().getMonth() + 1}-${new Date().getDate()}-${new Date().getFullYear()}"
+        >
+          Test slot
+        </div>
+      </rapid-calendar>
+    </div>
+  `,
+};

package/dist/esm/calendar/calendar.styles.js

@@ -0,0 +1,5 @@
+import { foundationCalendarStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidCalendarStyles = () => css `
+  ${foundationCalendarStyles()}
+`;

package/dist/esm/calendar/calendar.template.js

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

package/dist/esm/calendar/index.js

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

package/dist/esm/card/card.js

@@ -0,0 +1,10 @@
+import { Card as FoundationCard, defaultCardConfig, foundationCardShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidCardStyles as styles } from './card.styles';
+import { rapidCardTemplate as template } from './card.template';
+/**
+ * @tagname %%prefix%%-card
+ */
+export class Card extends FoundationCard {
+}
+export const rapidCard = Card.compose(Object.assign({ baseName: 'card', template,
+    styles, shadowOptions: foundationCardShadowOptions }, defaultCardConfig));

package/dist/esm/card/card.stories.js

@@ -0,0 +1,40 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Card',
+    component: 'rapid-card',
+};
+export default meta;
+const wrapperStyle = 'display: flex; height: 400px; width: 100%; justify-content: center;';
+const cardStyle = 'height: 50%; width: 50%; padding: 16px;';
+const args = {
+    cardLevel1Color: '#2d353a',
+    cardLevel2Color: '#262d31',
+    cardHeading: 'Card 1',
+    cardText: 'This is a Rapid Card (and the only one with without extra fui elements!)',
+};
+export const Default = {
+    args,
+    render: ({ cardLevel1Color, cardHeading, cardText }) => html `
+    <div style="${wrapperStyle} --neutral-layer-card-container:${cardLevel1Color}">
+      <rapid-card style="${cardStyle}">
+        <h6>${cardHeading}</h6>
+        <span>${cardText}</span>
+      </rapid-card>
+    </div>
+  `,
+};
+export const NestedCards = {
+    args,
+    render: ({ cardLevel1Color, cardLevel2Color, cardHeading, cardText }) => html `
+    <div
+      style="${wrapperStyle} height: 600px;  --neutral-layer-card-container:${cardLevel1Color}; --neutral-layer-3:${cardLevel2Color}"
+    >
+      <rapid-card style="${cardStyle}">
+        <rapid-card style="${cardStyle}">
+          <h6>${cardHeading}</h6>
+          <span>${cardText}</span>
+        </rapid-card>
+      </rapid-card>
+    </div>
+  `,
+};

package/dist/esm/card/card.styles.js

@@ -0,0 +1,18 @@
+import { foundationCardStyles } from '@genesislcap/foundation-ui';
+import { neutralForegroundRest } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidCardStyles = (context, definition) => css `
+  ${foundationCardStyles(context, definition)}
+  :host {
+    background: var(--neutral-layer-card-container);
+    color: ${neutralForegroundRest};
+    border: 1px solid var(--neutral-stroke-rest); /** uses a token instead of #2E3339 value available in ux docs */
+
+    /* box-shadow and border-radius are being calculated at host
+      level by using design-tokens */
+  }
+
+  ::slotted(rapid-card) {
+    background: var(--neutral-layer-3);
+  }
+`;

package/dist/esm/card/card.template.js

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

package/dist/esm/card/index.js

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