wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/card/vds-card.js

@@ -0,0 +1,355 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsCard {
+    constructor() {
+        /** Padding of component based on volt-spacing tokens */
+        this.padding = 'spacing-05';
+        /** Selectable property allow the card to toggle between selected and unselected state.
+         * This property can't be used with the button property at the same time */
+        this.selectable = false;
+        /** Sets the selected state for the card (only works when selectable property is true).
+         * This property can't be used with the button property at the same time */
+        this.selected = false;
+        /** Button property allows the card to behave like a button.
+         * This property can't be used with the selectable property at the same time */
+        this.button = false;
+        /** Sets the card in disabled state */
+        this.disabled = false;
+        /** Allows changing the default card variant */
+        this.variant = 'default';
+        /** Sets the shadow for the card */
+        this.shadowBox = 'elevation-shadow-1';
+    }
+    emitSelected() {
+        if (this.selectable) {
+            this.select.emit(this.selected);
+        }
+    }
+    handleBehaviorValidation() {
+        if (this.button && this.selectable) {
+            this.selectable = false;
+            this.selected = false;
+        }
+        if (!this.selectable && this.selected) {
+            this.selected = false;
+        }
+    }
+    /**
+     * Sets card's custom border colors
+     *
+     * @returns { [key: string]: string }
+     */
+    setCustomBorderColors() {
+        const styles = {};
+        if (this.borderColor) {
+            styles['--vds-card-default-border-color'] = `var(--${this.borderColor})`;
+        }
+        if (this.borderHoverColor) {
+            styles['--vds-card-default-border-hover-color'] = `var(--${this.borderHoverColor})`;
+        }
+        return styles;
+    }
+    handleSelectable() {
+        this.selected = !this.selected;
+    }
+    handleClick(evt) {
+        if (this.button) {
+            this.click.emit(evt);
+        }
+        if (this.selectable) {
+            this.handleSelectable();
+        }
+    }
+    componentWillLoad() {
+        this.handleBehaviorValidation();
+    }
+    render() {
+        return (h(Host, { key: '19b2be994eeb38dffd4936514b7a208d03ac077d', class: combineClasses(this.disabled ? "vds-card--disabled" : "") }, h("div", { key: '00012b0e02eccb90492ac5711269b1124d091f2f', onClick: (evt) => {
+                this.handleClick(evt);
+            }, style: this.setCustomBorderColors(), class: `
+            vds__card 
+            vds__card--${this.variant}
+            padding__${this.padding}
+            shadow__${this.shadowBox}
+            ${this.selectable ? 'vds__card--selectable' : ''}
+            ${this.selectable && this.selected ? 'vds__card--selected' : ''}
+            ${this.button ? 'vds__card--button' : ''}
+            ${this.disabled ? 'vds__card--disabled' : ''}
+          ` }, h("slot", { key: 'c2e5236ebad840fca8114de9fd041f0fc98cbb14' }))));
+    }
+    static get is() { return "vds-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": true,
+                "complexType": {
+                    "original": "Spacing",
+                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\"",
+                    "references": {
+                        "Spacing": {
+                            "location": "import",
+                            "path": "../../definitions/spacing",
+                            "id": "src/definitions/spacing.ts::Spacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding of component based on volt-spacing tokens"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'spacing-05'"
+            },
+            "selectable": {
+                "type": "boolean",
+                "attribute": "selectable",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selectable property allow the card to toggle between selected and unselected state.\nThis property can't be used with the button property at the same time"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "attribute": "selected",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the selected state for the card (only works when selectable property is true).\nThis property can't be used with the button property at the same time"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "button": {
+                "type": "boolean",
+                "attribute": "button",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button property allows the card to behave like a button.\nThis property can't be used with the selectable property at the same time"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the card in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": true,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'danger' | 'default'",
+                    "resolved": "\"danger\" | \"default\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows changing the default card variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "shadowBox": {
+                "type": "string",
+                "attribute": "shadow-box",
+                "mutable": true,
+                "complexType": {
+                    "original": "ShadowBox",
+                    "resolved": "\"elevation-shadow-0\" | \"elevation-shadow-1\" | \"elevation-shadow-17\" | \"elevation-shadow-2\" | \"elevation-shadow-3\" | \"elevation-shadow-5\" | \"elevation-shadow-8\"",
+                    "references": {
+                        "ShadowBox": {
+                            "location": "import",
+                            "path": "../../definitions/shadows",
+                            "id": "src/definitions/shadows.ts::ShadowBox"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the shadow for the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'elevation-shadow-1'"
+            },
+            "borderColor": {
+                "type": "string",
+                "attribute": "border-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "Colors",
+                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This property is deprecated and will be removed from the code in the future."
+                        }],
+                    "text": "Allows changing the default border color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "borderHoverColor": {
+                "type": "string",
+                "attribute": "border-hover-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "Colors",
+                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This property is deprecated and will be removed from the code in the future."
+                        }],
+                    "text": "Allows changing the border color when hovering."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "select",
+                "name": "select",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when card have been selected (only works when selectable property is true)"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "click",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when card have been clicked on (only works when button property is true)"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "emitSelected"
+            }, {
+                "propName": "selectable",
+                "methodName": "handleBehaviorValidation"
+            }, {
+                "propName": "button",
+                "methodName": "handleBehaviorValidation"
+            }];
+    }
+}
+//# sourceMappingURL=vds-card.js.map

package/dist/collection/components/card/vds-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-card.js","sourceRoot":"","sources":["../../../src/components/card/vds-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Event, EventEmitter, Watch } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { Spacing } from '../../definitions/spacing';\nimport { ShadowBox } from '../../definitions/shadows';\nimport { combineClasses } from '../../utils/combine-classes';\n@Component({\n  tag: 'vds-card',\n  styleUrl: 'vds-card.scss',\n  shadow: true,\n})\nexport class VdsCard {\n  /** Padding of component based on volt-spacing tokens */\n  @Prop({ mutable: true }) padding: Spacing = 'spacing-05';\n  /** Selectable property allow the card to toggle between selected and unselected state.\n   * This property can't be used with the button property at the same time */\n  @Prop({ mutable: true }) selectable: boolean = false;\n  /** Sets the selected state for the card (only works when selectable property is true).\n   * This property can't be used with the button property at the same time */\n  @Prop({ mutable: true }) selected: boolean = false;\n  /** Button property allows the card to behave like a button.\n   * This property can't be used with the selectable property at the same time */\n  @Prop({ mutable: true }) button = false;\n  /** Sets the card in disabled state */\n  @Prop({ mutable: true }) disabled = false;\n  /** Allows changing the default card variant */\n  @Prop({ mutable: true }) variant: 'primary' | 'secondary' | 'danger' | 'default' = 'default';\n  /** Sets the shadow for the card */\n  @Prop({ mutable: true }) shadowBox: ShadowBox = 'elevation-shadow-1';\n\n  /**\n   * Allows changing the default border color.\n   * @deprecated This property is deprecated and will be removed from the code in the future.\n   */\n  @Prop() borderColor: Colors;\n  /**\n   * Allows changing the border color when hovering.\n   * @deprecated This property is deprecated and will be removed from the code in the future.\n   */\n  @Prop() borderHoverColor: Colors;\n\n  /** Emits event when card have been selected (only works when selectable property is true) */\n  @Event() select: EventEmitter<boolean>;\n  /** Emits event when card have been clicked on (only works when button property is true) */\n  @Event() click: EventEmitter<MouseEvent>;\n\n  @Watch('selected')\n  emitSelected(): void {\n    if (this.selectable) {\n      this.select.emit(this.selected);\n    }\n  }\n\n  @Watch('selectable')\n  @Watch('button')\n  handleBehaviorValidation(): void {\n    if (this.button && this.selectable) {\n      this.selectable = false;\n      this.selected = false;\n    }\n    if (!this.selectable && this.selected) {\n      this.selected = false;\n    }\n  }\n\n  /**\n   * Sets card's custom border colors\n   *\n   * @returns { [key: string]: string }\n   */\n  private setCustomBorderColors(): { [key: string]: string } {\n    const styles = {};\n\n    if (this.borderColor) {\n      styles['--vds-card-default-border-color'] = `var(--${this.borderColor})`;\n    }\n\n    if (this.borderHoverColor) {\n      styles['--vds-card-default-border-hover-color'] = `var(--${this.borderHoverColor})`;\n    }\n\n    return styles;\n  }\n\n  private handleSelectable(): void {\n    this.selected = !this.selected;\n  }\n\n  private handleClick(evt: MouseEvent): void {\n    if (this.button) {\n      this.click.emit(evt);\n    }\n\n    if (this.selectable) {\n      this.handleSelectable();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.handleBehaviorValidation();\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(this.disabled ? \"vds-card--disabled\" : \"\")}>\n        <div\n          onClick={(evt: MouseEvent) => {\n            this.handleClick(evt);\n          }}\n          style={this.setCustomBorderColors()}\n          class={`\n            vds__card \n            vds__card--${this.variant}\n            padding__${this.padding}\n            shadow__${this.shadowBox}\n            ${this.selectable ? 'vds__card--selectable' : ''}\n            ${this.selectable && this.selected ? 'vds__card--selected' : ''}\n            ${this.button ? 'vds__card--button' : ''}\n            ${this.disabled ? 'vds__card--disabled' : ''}\n          `}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/vds-card.stories.js

@@ -0,0 +1,178 @@
+import spacingVars from "../../constants/spacing-vars";
+import shadowVars from "../../constants/shadow-vars";
+const SPACING_VARS = Object.keys(spacingVars);
+const SHADOW_VARS = Object.keys(shadowVars);
+export default {
+    title: 'VDS/Components/Card',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28956-6874"
+        }
+    },
+    argTypes: {
+        padding: {
+            options: [...SPACING_VARS],
+            control: { type: "select" }
+        },
+        shadowBox: {
+            options: [...SHADOW_VARS],
+            control: { type: "select" }
+        },
+        variant: {
+            options: ["default", "primary", "secondary", "danger"],
+            control: { type: "select" }
+        }
+    },
+};
+const styles = `
+    vds-card {
+        padding: 10px;
+    }
+    .parent-container {
+        position: relative;
+        height: 20px;
+    }
+    .child-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    span {
+        font-size:  1.25rem;
+        line-height: 1.5rem;
+        font-weight: bold;
+        color: var(--color-text-high);
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-card 
+    selectable="${args.selectable || false}"
+    padding="${args.padding}"
+    variant="${args.variant}"
+    shadow-box="${args.shadowBox}"
+    selected="${args.selected || false}"
+    button="${args.button || false}" 
+    disabled="${args.disabled || false}"
+>
+    <div class="parent-container">
+        <div class="child-container">
+            <span>Content</span>
+        </div>
+    </div>
+</vds-card>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    selectable: false,
+    padding: "spacing-16",
+    variant: "default",
+    shadowBox: "elevation-shadow-1",
+    selected: false,
+    button: false,
+    disabled: false
+};
+export const Selectable = codeTemplate.bind({});
+Selectable.args = {
+    padding: "spacing-16",
+    variant: "default",
+    shadowBox: "elevation-shadow-1",
+    selectable: true,
+    selected: false,
+};
+export const Button = codeTemplate.bind({});
+Button.args = {
+    padding: "spacing-16",
+    variant: "default",
+    shadowBox: "elevation-shadow-1",
+    button: true,
+};
+const stylesCustom = `
+    vds-card {
+        padding: 10px;
+
+        --vds-card-default-border-color: var(--color-background-healthy-lowest-press);
+        --vds-card-default-border-hover-color: var(--color-border-healthy);
+        --vds-card-default-border-press-color: var(--color-border-healthy);
+        --vds-card-default-background-color: var(--color-background-healthy-lowest-default);
+        --vds-card-default-background-hover-color: var(--color-background-healthy-lowest-hover);
+        --vds-card-default-background-press-color: var(--color-background-healthy-lowest-press);
+        --vds-card-default-selected-border-color: var(--color-border-healthy);
+        --vds-card-default-selected-background-color: var(--color-background-healthy-lowest-hover);
+
+        --vds-card-primary-border-hover-color: var(--color-interaction-brand-low);
+        --vds-card-primary-background-color: var(--color-background-information-lowest-default);
+        --vds-card-primary-background-hover-color: var(--color-background-information-lowest-hover);
+        --vds-card-primary-background-press-color: var(--color-background-information-lowest-press);
+        --vds-card-primary-selected-border-color: var(--color-interaction-brand-lower);
+        --vds-card-primary-selected-background-color: var(--color-background-information-lowest-hover);
+    }
+    .parent-container {
+        position: relative;
+        height: 20px;
+    }
+    .child-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    span {
+        font-size:  1.25rem;
+        line-height: 1.5rem;
+        font-weight: bold;
+        color: var(--color-text-high);
+    }
+`;
+const codeTemplateCustom = (args) => {
+    return `
+<style>${stylesCustom}</style>
+<vds-card 
+    selectable="${args.selectable || false}"
+    padding="${args.padding}"
+    variant="default"
+    shadow-box="${args.shadowBox}"
+    selected="${args.selected || false}"
+    button="${args.button || false}" 
+    ${args.disabled ? `disabled="${args.disabled}"` : ""}
+>
+    <div class="parent-container">
+        <div class="child-container">
+            <span>Default Custom Variant</span>
+        </div>
+    </div>
+</vds-card>
+<vds-card 
+    selectable="${args.selectable || false}"
+    padding="${args.padding}"
+    variant="primary"
+    shadow-box="${args.shadowBox}"
+    selected="${args.selected || false}"
+    button="${args.button || false}" 
+    disabled="${args.disabled || false}"
+>
+    <div class="parent-container">
+        <div class="child-container">
+            <span>Primary Custom Variant</span>
+        </div>
+    </div>
+</vds-card>
+    `;
+};
+export const CustomColorsUsage = codeTemplateCustom.bind({});
+CustomColorsUsage.args = {
+    selectable: false,
+    padding: "spacing-16",
+    shadowBox: "elevation-shadow-1",
+    selected: false,
+    button: false,
+    disabled: false
+};
+//# sourceMappingURL=vds-card.stories.js.map

package/dist/collection/components/card/vds-card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-card.stories.js","sourceRoot":"","sources":["../../../src/components/card/vds-card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import spacingVars from \"../../constants/spacing-vars\";\nimport shadowVars from \"../../constants/shadow-vars\";\n\nconst SPACING_VARS = Object.keys(spacingVars)\nconst SHADOW_VARS = Object.keys(shadowVars);\n\nexport default {\n    title: 'VDS/Components/Card',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28956-6874\"\n        }\n      },\n    argTypes: {\n        padding: {\n            options: [...SPACING_VARS],\n            control: { type: \"select\" }\n        },\n        shadowBox: {\n            options: [...SHADOW_VARS],\n            control: { type: \"select\" }\n        },\n        variant: {\n            options: [\"default\", \"primary\", \"secondary\", \"danger\"],\n            control: { type: \"select\" }\n        }\n    },\n};\n\nconst styles = `\n    vds-card {\n        padding: 10px;\n    }\n    .parent-container {\n        position: relative;\n        height: 20px;\n    }\n    .child-container {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n    }\n    span {\n        font-size:  1.25rem;\n        line-height: 1.5rem;\n        font-weight: bold;\n        color: var(--color-text-high);\n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-card \n    selectable=\"${args.selectable || false}\"\n    padding=\"${args.padding}\"\n    variant=\"${args.variant}\"\n    shadow-box=\"${args.shadowBox}\"\n    selected=\"${args.selected || false}\"\n    button=\"${args.button || false}\" \n    disabled=\"${args.disabled || false}\"\n>\n    <div class=\"parent-container\">\n        <div class=\"child-container\">\n            <span>Content</span>\n        </div>\n    </div>\n</vds-card>\n    `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    selectable: false,\n    padding: \"spacing-16\",\n    variant: \"default\",\n    shadowBox: \"elevation-shadow-1\",\n    selected: false,\n    button: false,\n    disabled: false\n};\n\nexport const Selectable = codeTemplate.bind({});\n\nSelectable.args = {\n    padding: \"spacing-16\",\n    variant: \"default\",\n    shadowBox: \"elevation-shadow-1\",\n    selectable: true,\n    selected: false,\n};\n\nexport const Button = codeTemplate.bind({});\n\nButton.args = {\n    padding: \"spacing-16\",\n    variant: \"default\",\n    shadowBox: \"elevation-shadow-1\",\n    button: true,\n};\n\nconst stylesCustom = `\n    vds-card {\n        padding: 10px;\n\n        --vds-card-default-border-color: var(--color-background-healthy-lowest-press);\n        --vds-card-default-border-hover-color: var(--color-border-healthy);\n        --vds-card-default-border-press-color: var(--color-border-healthy);\n        --vds-card-default-background-color: var(--color-background-healthy-lowest-default);\n        --vds-card-default-background-hover-color: var(--color-background-healthy-lowest-hover);\n        --vds-card-default-background-press-color: var(--color-background-healthy-lowest-press);\n        --vds-card-default-selected-border-color: var(--color-border-healthy);\n        --vds-card-default-selected-background-color: var(--color-background-healthy-lowest-hover);\n\n        --vds-card-primary-border-hover-color: var(--color-interaction-brand-low);\n        --vds-card-primary-background-color: var(--color-background-information-lowest-default);\n        --vds-card-primary-background-hover-color: var(--color-background-information-lowest-hover);\n        --vds-card-primary-background-press-color: var(--color-background-information-lowest-press);\n        --vds-card-primary-selected-border-color: var(--color-interaction-brand-lower);\n        --vds-card-primary-selected-background-color: var(--color-background-information-lowest-hover);\n    }\n    .parent-container {\n        position: relative;\n        height: 20px;\n    }\n    .child-container {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n    }\n    span {\n        font-size:  1.25rem;\n        line-height: 1.5rem;\n        font-weight: bold;\n        color: var(--color-text-high);\n    }\n`;\n\nconst codeTemplateCustom = (args) => {\n    return `\n<style>${stylesCustom}</style>\n<vds-card \n    selectable=\"${args.selectable || false}\"\n    padding=\"${args.padding}\"\n    variant=\"default\"\n    shadow-box=\"${args.shadowBox}\"\n    selected=\"${args.selected || false}\"\n    button=\"${args.button || false}\" \n    ${args.disabled ? `disabled=\"${args.disabled}\"` : \"\"}\n>\n    <div class=\"parent-container\">\n        <div class=\"child-container\">\n            <span>Default Custom Variant</span>\n        </div>\n    </div>\n</vds-card>\n<vds-card \n    selectable=\"${args.selectable || false}\"\n    padding=\"${args.padding}\"\n    variant=\"primary\"\n    shadow-box=\"${args.shadowBox}\"\n    selected=\"${args.selected || false}\"\n    button=\"${args.button || false}\" \n    disabled=\"${args.disabled || false}\"\n>\n    <div class=\"parent-container\">\n        <div class=\"child-container\">\n            <span>Primary Custom Variant</span>\n        </div>\n    </div>\n</vds-card>\n    `;\n}\n\nexport const CustomColorsUsage = codeTemplateCustom.bind({});\n\nCustomColorsUsage.args = {\n    selectable: false,\n    padding: \"spacing-16\",\n    shadowBox: \"elevation-shadow-1\",\n    selected: false,\n    button: false,\n    disabled: false\n};"]}