@genesislcap/rapid-design-system 14.127.2

package/dist/esm/actions-menu/actions-menu.stories.js

@@ -0,0 +1,67 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Actions Menu',
+    component: 'rapid-actions-menu',
+};
+export default meta;
+const rapidActions = [
+    {
+        name: 'View',
+        callback: (rowData) => console.debug('VIEWW!!!', rowData),
+    },
+    {
+        name: 'Delete',
+        callback: (rowData) => console.debug('DELETE!!!', rowData),
+    },
+    {
+        name: 'Edit',
+        callback: (rowData) => console.debug('EDIT!!!', rowData),
+    },
+    {
+        name: 'Wait',
+        callback: (rowData) => console.debug('WAIT???', rowData),
+    },
+];
+const definition = {
+    actions: rapidActions,
+    buttonAppearance: 'stealth',
+    data: { name: 'test' },
+};
+const horizontalStyle = 'flex: 1; display: flex; justify-content: center;';
+export const Horizontal = {
+    args: {
+        actions: rapidActions,
+        actionsOpenerText: 'Horizontal Actions',
+        definition,
+        isVertical: false,
+    },
+    render: (args) => html `
+    <div style="${horizontalStyle}">
+      <rapid-actions-menu
+        .name=${args.actionsOpenerText}
+        .definition=${args.definition}
+        .actions=${args.actions}
+        is-vertical=${args.isVertical}
+      ></rapid-actions-menu>
+    </div>
+  `,
+};
+const verticalStyle = 'flex: 1; display: flex; height: 400px; justify-content: center;';
+export const Vertical = {
+    args: {
+        actions: rapidActions,
+        actionsOpenerText: 'Vertical Actions',
+        definition,
+        isVertical: true,
+    },
+    render: (args) => html `
+    <div style="${verticalStyle}">
+      <rapid-actions-menu
+        .name=${args.actionsOpenerText}
+        .definition=${args.definition}
+        .actions=${args.actions}
+        is-vertical=${args.isVertical}
+      ></rapid-actions-menu>
+    </div>
+  `,
+};

package/dist/esm/actions-menu/actions-menu.styles.js

@@ -0,0 +1,41 @@
+import { actionsMenuBaseStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidActionsMenuStyles = (context, definition) => css `
+  :host {
+    --actions-opener-height-multiplier: 0.6px;
+    --menu-item-height-multiplier: 0.5px;
+  }
+
+  ${actionsMenuBaseStyles(context, definition)}
+
+  rapid-menu-item {
+    display: flex;
+    user-select: none;
+  }
+
+  rapid-menu-item::part(content) {
+    margin-inline: calc(var(--design-unit) * 3px);
+  }
+
+  rapid-menu-item[disabled] {
+    pointer-events: none;
+  }
+
+  .actions-vertical .actions-menu {
+    padding: 0;
+  }
+
+  .actions-vertical .menu-item {
+    margin: 0;
+    padding: calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-stealth-hover);
+  }
+
+  .actions-vertical .menu-item:last-child {
+    border-bottom: none;
+  }
+
+  .actions-vertical .menu-item:focus {
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-foreground-focus);
+  }
+`;

package/dist/esm/actions-menu/index.js

@@ -0,0 +1,2 @@
+export * from './actions-menu';
+export * from './actions-menu.styles';

package/dist/esm/anchor/anchor.js

@@ -0,0 +1,10 @@
+import { Anchor as FoundationAnchor, defaultAnchorConfig, foundationAnchorShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidAnchorStyles as styles } from './anchor.styles';
+import { rapidAnchorTemplate as template } from './anchor.template';
+/**
+ * @tagname %%prefix%%-anchor
+ */
+export class Anchor extends FoundationAnchor {
+}
+export const rapidAnchor = Anchor.compose(Object.assign({ baseName: 'anchor', template,
+    styles, shadowOptions: foundationAnchorShadowOptions }, defaultAnchorConfig));

package/dist/esm/anchor/anchor.stories.js

@@ -0,0 +1,63 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Anchor',
+    component: 'rapid-anchor',
+};
+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, anchorText }) => 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-anchor appearance="${appearanceName}">
+              ${anchorText}
+            </rapid-anchor>
+          </div>
+        `)}
+    </div>
+  `,
+};
+const FastAppearanceValues = [
+    'accent',
+    'neutral',
+    'outline',
+    'stealth',
+    'lightweight',
+    'hypertext',
+];
+const RapidAppearanceValues = ['primary', 'primary-outline', 'neutral', 'neutral-outline', 'link'];
+export const Default = {
+    args: {
+        appearance: 'primary',
+        target: '_blank',
+        href: 'https://www.microsoft.com',
+    },
+    argTypes: {
+        appearance: {
+            control: 'select',
+            options: [...RapidAppearanceValues, ...FastAppearanceValues],
+        },
+    },
+    render: ({ appearance, target, href }) => html `
+    <div style="${wrapperStyle}">
+      <h3 style="${textStyle}">${appearance}</div>
+      <div style="display: flex; flex-direction: row; gap:16px;margin: 8px 0;">
+        <rapid-anchor appearance="${appearance}" target="${target}" href="${href}" >Anchor</rapid-anchor>
+        <rapid-anchor appearance="${appearance}">
+          Anchor
+          <rapid-icon name="check" size="md" slot="end"></rapid-icon>
+        </rapid-anchor>
+      </div>
+    </div>`,
+};
+export const RapidAnchorAppearances = Object.assign({ args: {
+        appearances: RapidAppearanceValues,
+        anchorText: 'Anchor',
+    } }, StylesMapperTemplate);
+export const FastAnchorAppearances = Object.assign({ args: {
+        appearances: FastAppearanceValues,
+        anchorText: 'Anchor',
+    } }, StylesMapperTemplate);

package/dist/esm/anchor/anchor.styles.js

@@ -0,0 +1,7 @@
+import { foundationAnchorStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+import { rapidButtonStyles } from '../button/button.styles';
+export const rapidAnchorStyles = (context, definition) => css `
+    ${foundationAnchorStyles(context, definition)}
+    ${rapidButtonStyles(context, definition)}
+  `.withBehaviors(...rapidButtonStyles(context, definition).behaviors);

package/dist/esm/anchor/anchor.template.js

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

package/dist/esm/anchor/index.js

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

package/dist/esm/anchored-region/anchored-region.js

@@ -0,0 +1,10 @@
+import { AnchoredRegion as FoundationAnchoredRegion, defaultAnchoredRegionConfig, foundationAnchoredRegionShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidAnchoredRegionStyles as styles } from './anchored-region.styles';
+import { rapidAnchoredRegionTemplate as template } from './anchored-region.template';
+/**
+ * @tagname %%prefix%%-anchored-region
+ */
+export class AnchoredRegion extends FoundationAnchoredRegion {
+}
+export const rapidAnchoredRegion = AnchoredRegion.compose(Object.assign({ baseName: 'anchored-region', template,
+    styles, shadowOptions: foundationAnchoredRegionShadowOptions }, defaultAnchoredRegionConfig));

package/dist/esm/anchored-region/anchored-region.stories.js

@@ -0,0 +1,58 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Anchored Region',
+    component: 'rapid-anchored-region',
+};
+export default meta;
+const wrapperStyle = 'display: flex; flex-direction: column;';
+const viewportStyle = 'margin-top: 20px; display: flex; justify-content: center; align-items: center; color: var(--neutral-foreground-rest)';
+const anchorRegionTopTemplate = {
+    render: ({ anchorText, verticalDefaultPosition }) => html `
+    <div style=${wrapperStyle}>
+      <div id="viewport" style=${viewportStyle}>
+        <rapid-button id="anchor-b1">Button is an anchor</rapid-button>
+        <rapid-anchored-region
+          anchor="anchor-b1"
+          vertical-positioning-mode="locktodefault"
+          vertical-default-position=${verticalDefaultPosition}
+        >
+          <h6>${anchorText}</h6>
+        </rapid-anchored-region>
+      </div>
+    </div>
+  `,
+};
+const anchorRegionBottomTemplate = {
+    render: ({ anchorText, verticalDefaultPosition }) => html `
+    <div style=${wrapperStyle}>
+      <div id="viewport" style=${viewportStyle}>
+        <rapid-button id="anchor-b2">Button is an anchor</rapid-button>
+        <rapid-anchored-region
+          anchor="anchor-b2"
+          vertical-positioning-mode="locktodefault"
+          vertical-default-position=${verticalDefaultPosition}
+        >
+          <h6>${anchorText}</h6>
+        </rapid-anchored-region>
+      </div>
+    </div>
+  `,
+};
+export const Default = Object.assign({ args: {
+        anchorText: 'This will show above button',
+        verticalDefaultPosition: 'top',
+    }, argTypes: {
+        verticalDefaultPosition: {
+            control: 'select',
+            options: ['top', 'bottom'],
+        },
+    } }, anchorRegionTopTemplate);
+export const Bottom = Object.assign({ args: {
+        anchorText: 'This will show below button',
+        verticalDefaultPosition: 'bottom',
+    }, argTypes: {
+        verticalDefaultPosition: {
+            control: 'select',
+            options: ['top', 'bottom'],
+        },
+    } }, anchorRegionBottomTemplate);

package/dist/esm/anchored-region/anchored-region.styles.js

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

package/dist/esm/anchored-region/anchored-region.template.js

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

package/dist/esm/anchored-region/index.js

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

package/dist/esm/avatar/avatar.js

@@ -0,0 +1,10 @@
+import { Avatar as FoundationAvatar, defaultAvatarConfig, foundationAvatarShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidAvatarStyles as styles } from './avatar.styles';
+import { rapidAvatarTemplate as template } from './avatar.template';
+/**
+ * @tagname %%prefix%%-avatar
+ */
+export class Avatar extends FoundationAvatar {
+}
+export const rapidAvatar = Avatar.compose(Object.assign({ baseName: 'avatar', template,
+    styles, shadowOptions: foundationAvatarShadowOptions }, defaultAvatarConfig));

package/dist/esm/avatar/avatar.stories.js

@@ -0,0 +1,67 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Avatar',
+    component: 'rapid-avatar',
+};
+export default meta;
+const wrapperStyle = 'display: flex; padding: 10px; gap: 1em; height: 500px;';
+export const Default = {
+    args: {
+        src: 'https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light',
+        link: '#',
+        alt: "Annie's profile image",
+        shape: 'circle',
+        initials: 'AJ',
+        name: 'Annie James',
+        fill: 'accent-primary',
+        fillColor: '#196fe6',
+    },
+    argTypes: {
+        shape: {
+            control: 'select',
+            options: ['circle', 'square'],
+        },
+        fillColor: {
+            control: 'color',
+        },
+    },
+    render: ({ initials, link, alt, shape, fill, name, fillColor }) => html `
+    <div style="${wrapperStyle}  --avatar-fill-${fill}: ${fillColor}">
+      <rapid-avatar alt="${alt}" link="${link}" shape="${shape}" fill="${fill}" name="${name}">
+        ${initials}
+      </rapid-avatar>
+    </div>
+  `,
+};
+export const WithImage = {
+    args: {
+        avatarSource: 'https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light',
+        link: '#',
+        alt: "Annie's profile image",
+        shape: 'circle',
+        initials: 'AJ',
+        name: 'Annie James',
+        fill: 'accent-primary',
+        fillColor: '#196fe6',
+    },
+    argTypes: {
+        shape: {
+            control: 'select',
+            options: ['circle', 'square'],
+        },
+        fillColor: {
+            control: 'color',
+        },
+    },
+    render: ({ avatarSource, link, alt, shape, fill, fillColor }) => html `
+    <div style="${wrapperStyle}   --avatar-fill-${fill}: ${fillColor}">
+      <rapid-avatar
+        src="${avatarSource}"
+        alt="${alt}"
+        link="${link}"
+        shape="${shape}"
+        fill="${fill}"
+      ></rapid-avatar>
+    </div>
+  `,
+};

package/dist/esm/avatar/avatar.styles.js

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

package/dist/esm/avatar/avatar.template.js

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

package/dist/esm/avatar/index.js

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

package/dist/esm/badge/badge.js

@@ -0,0 +1,10 @@
+import { Badge as FoundationBadge, defaultBadgeConfig, foundationBadgeShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidBadgeStyles as styles } from './badge.styles';
+import { rapidBadgeTemplate as template } from './badge.template';
+/**
+ * @tagname %%prefix%%-badge
+ */
+export class Badge extends FoundationBadge {
+}
+export const rapidBadge = Badge.compose(Object.assign({ baseName: 'badge', template,
+    styles, shadowOptions: foundationBadgeShadowOptions }, defaultBadgeConfig));

package/dist/esm/badge/badge.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Badge',
+    component: 'rapid-badge',
+};
+export default meta;
+const wrapperStyle = 'display: flex; justify-content: center; gap: 16px;';
+export const Primary = {
+    args: {
+        fill: 'primary',
+        badgeText: 'Rapid Badge',
+        badgeText2: '12',
+    },
+    argTypes: {
+        fill: {
+            control: 'select',
+            options: ['primary', 'neutral'],
+        },
+    },
+    render: ({ fill, badgeText, badgeText2 }) => html `
+    <div style="${wrapperStyle}">
+      <rapid-badge fill="${fill}" color="text">${badgeText}</rapid-badge>
+      <rapid-badge fill="${fill}" color="text">${badgeText2}</rapid-badge>
+    </div>
+  `,
+};
+export const Neutral = {
+    args: {
+        fill: 'neutral',
+        badgeText: 'Rapid Badge',
+        badgeText2: '12',
+    },
+    argTypes: {
+        fill: {
+            control: 'select',
+            options: ['primary', 'neutral'],
+        },
+    },
+    render: ({ fill, badgeText, badgeText2 }) => html `
+    <div style="${wrapperStyle}">
+      <rapid-badge fill="${fill}" color="text">${badgeText}</rapid-badge>
+      <rapid-badge fill="${fill}" color="text">${badgeText2}</rapid-badge>
+    </div>
+  `,
+};

package/dist/esm/badge/badge.styles.js

@@ -0,0 +1,18 @@
+import { foundationBadgeStyles } from '@genesislcap/foundation-ui';
+import { designUnit } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+export const rapidBadgeStyles = (context, definition) => css `
+  ${foundationBadgeStyles(context, definition)}
+  :host {
+    --badge-fill-primary: var(--accent-fill-rest);
+    --badge-fill-neutral: var(--neutral-fill-rest);
+    --badge-color-text: var(--neutral-foreground-rest);
+
+    font-size: var(--type-ramp-minus-2-font-size);
+  }
+
+  :host .control {
+    padding: calc(${designUnit} * 1px) calc(${designUnit} * 2px);
+    border: none;
+  }
+`;

package/dist/esm/badge/badge.template.js

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

package/dist/esm/badge/index.js

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

package/dist/esm/banner/banner.js

@@ -0,0 +1,21 @@
+import { foundationBannerTemplate as rapidBannerTemplate, foundationBannerShadowOptions, Banner as FoundationBanner, } from '@genesislcap/foundation-ui';
+import { rapidBannerStyles } from './banner.styles';
+export const rapidBannerShadowOptions = foundationBannerShadowOptions;
+/**
+ * @tagname %%prefix%%-banner
+ */
+export class Banner extends FoundationBanner {
+}
+/**
+ * The Rapid Banner
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-banner\>
+ */
+export const rapidBanner = Banner.compose({
+    baseName: 'banner',
+    shadowOptions: rapidBannerShadowOptions,
+    styles: rapidBannerStyles,
+    template: rapidBannerTemplate,
+});

package/dist/esm/banner/banner.stories.js

@@ -0,0 +1,72 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Banner',
+    component: 'rapid-banner',
+};
+export default meta;
+const showNotify = (notifyText) => {
+    var _a;
+    let errorBanner = document.querySelector('#js-banner');
+    if (!errorBanner) {
+        errorBanner = document.createElement('rapid-banner');
+        errorBanner.id = 'js-banner';
+        (_a = document.querySelector('#rapid-banner')) === null || _a === void 0 ? void 0 : _a.appendChild(errorBanner);
+    }
+    errorBanner.notification = {
+        title: 'Notify Title',
+        body: `${notifyText} ID - notify - ${Math.random()}`,
+        config: {
+            banner: {
+                confirmingActions: [
+                    {
+                        label: 'Action',
+                        action: () => {
+                            alert('Action in progress');
+                        },
+                    },
+                ],
+            },
+        },
+    };
+};
+const ignoreClick = (e) => {
+    const banner = document.querySelector('#banner');
+    banner.dismiss();
+};
+export const Primary = {
+    args: {
+        notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+        bannerText: ` Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet.
+      Lorem, ipsum dolor.`,
+        actionIgnoreActionText: 'Ignore',
+        actionDemoText: 'Diagnose',
+        actionButtonAppearance: 'link',
+    },
+    argTypes: {
+        actionButtonAppearance: {
+            control: 'select',
+            options: ['primary', 'primary-outline', 'neutral', 'neutral-outline', 'link'],
+        },
+    },
+    render: ({ bannerText, notifyText, actionButtonAppearance, actionIgnoreActionText, actionDemoText, }) => html `
+    <div style="display: flex; flex-direction: column; color: var(--neutral-foreground-rest)">
+      <h5>Banner with slots</h5>
+      <rapid-banner id="banner">
+        <div slot="content">${bannerText}</div>
+        <rapid-button slot="action" @click="${ignoreClick}" appearance="${actionButtonAppearance}">
+          ${actionIgnoreActionText}
+        </rapid-button>
+        <rapid-button slot="action" appearance="${actionButtonAppearance}">
+          ${actionDemoText}
+        </rapid-button>
+      </rapid-banner>
+      <h5>Empty Banner</h5>
+      <rapid-banner></rapid-banner>
+      <div id="rapid-banner" style="width: 100%;">
+        <rapid-button style="margin-bottom: 12px;" @click="${() => showNotify(notifyText)}">
+          Show Rapid Banner - Notification Structure
+        </rapid-button>
+      </div>
+    </div>
+  `,
+};

package/dist/esm/banner/banner.styles.js

@@ -0,0 +1,23 @@
+import { foundationBannerStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidBannerStyles = css `
+  ${foundationBannerStyles}
+  :host {
+    --banner-height: calc(
+      ((var(--design-unit) + 2) * var(--base-height-multiplier)) +
+        (var(--design-unit) * var(--design-unit)) * 1px
+    );
+  }
+
+  .banner {
+    background-color: var(--neutral-layer-1);
+    color: var(--neutral-foreground-rest);
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .content {
+    font-size: var(--type-ramp-base-font-size);
+    font-family: var(--body-font);
+    line-height: var(--type-ramp-base-line-height);
+  }
+`;

package/dist/esm/banner/index.js

@@ -0,0 +1,3 @@
+export { foundationBannerTemplate as rapidBannerTemplate } from '@genesislcap/foundation-ui';
+export * from './banner';
+export * from './banner.styles';