FileMaster

Edit File: themes.stories.js

export default{title:"Components/Themes",argTypes:{theme:{control:{type:"select"},options:["dark","light"]}}};const Template=({theme:e})=>(localStorage.clear(),setTimeout((()=>{document.querySelector("sc-select").choices=[{label:"Test",value:"test",choices:[{label:"Test 2",value:"test1"},{label:"Test 1",value:"test2"}]}]})),`<div data-theme="${e}" class="surecart-theme-${e}" style="${"dark"===e&&"background: var(--sc-color-gray-950);"} height: 100%; padding: 40px;">\n  <sc-form>\n    <sc-input label="Test" help="Help text" placeholder="placeholder"><span slot="prefix">Prefix</span><span slot="suffix">Suffix</span></sc-input>\n    <sc-input label="Test" help="Help text" value="test" placeholder="placeholder" clearable name="name" type="text"><span slot="prefix">Prefix</span><span slot="suffix">Suffix</span></sc-input>\n    <sc-flex justify-content="flex-start">\n      <sc-button>Button</sc-button>\n      <sc-button type="primary">Button</sc-button>\n      <sc-button type="success">Button</sc-button>\n      <sc-button type="info">Button</sc-button>\n      <sc-button type="warning">Button</sc-button>\n      <sc-button type="danger">Button</sc-button>\n\n      <sc-button outline>Button</sc-button>\n      <sc-button type="primary" outline>Button</sc-button>\n      <sc-button type="success" outline>Button</sc-button>\n      <sc-button type="info" outline>Button</sc-button>\n      <sc-button type="warning" outline>Button</sc-button>\n      <sc-button type="danger" outline>Button</sc-button>\n\n      <sc-button type="text">Button</sc-button>\n      <sc-button type="link">Button</sc-button>\n    </sc-flex>\n\n    <sc-flex justify-content="flex-start">\n      <sc-tag>Tag</sc-tag>\n      <sc-tag type="primary">Tag</sc-tag>\n      <sc-tag type="success">Tag</sc-tag>\n      <sc-tag type="info">Tag</sc-tag>\n      <sc-tag type="warning">Tag</sc-tag>\n      <sc-tag type="danger">Tag</sc-tag>\n    </sc-flex>\n\n    <sc-alert type="primary" open><span slot="title">Something went wrong.</span>This is a message</sc-alert>\n    <sc-alert type="success" open><span slot="title">Something went wrong.</span>This is a message</sc-alert>\n    <sc-alert type="info" open><span slot="title">Something went wrong.</span>This is a message</sc-alert>\n    <sc-alert type="warning" open><span slot="title">Something went wrong.</span>This is a message</sc-alert>\n    <sc-alert type="danger" open><span slot="title">Something went wrong.</span>This is a message</sc-alert>\n\n    <sc-address label="Address"></sc-address>\n    <sc-badge-notice label="test">SC Badge Alert</sc-badge-notice>\n\n    <sc-card>Card</sc-card>\n\n    <sc-radio-group label="Radio Group">\n      <sc-radio>SC Radio1</sc-radio>\n      <sc-radio checked>SC Radio2</sc-radio>\n    </sc-radio-group>\n\n    <sc-checkbox>Checkbox</sc-checkbox>\n\n    <sc-switch>\n      Switch\n      <span slot="description">Description text</span>\n    </sc-switch>\n\n    <sc-choices label="SC Choices">\n      <sc-choice>Choice</sc-choice>\n      <sc-choice checked>Choice Checked</sc-choice>\n      <sc-choice type="checkbox">Choice Checkbox</sc-choice>\n      <sc-choice type="checkbox" checked>Choice Checked</sc-choice>\n    </sc-choices>\n\n    <sc-dashboard-module heading="Dashboard Module"></sc-dashboard-module>\n\n    <sc-divider>SC Divider</sc-divider>\n\n    <sc-menu style="max-width: 200px; border: solid 1px var(--sc-panel-border-color); border-radius: var(--sc-border-radius-medium);">\n      <sc-menu-item>Option 1</sc-menu-item>\n      <sc-menu-item>Option 2</sc-menu-item>\n      <sc-menu-item>Option 3</sc-menu-item>\n      <sc-menu-divider></sc-menu-divider>\n      <sc-menu-item checked>Checked</sc-menu-item>\n      <sc-menu-item disabled>Disabled</sc-menu-item>\n      <sc-menu-divider></sc-menu-divider>\n      <sc-menu-item>\n      <span slot="prefix">A</span>Prefix\n      </sc-menu-item>\n      <sc-menu-item>\n      Suffix <span slot="suffix">B</span>\n      </sc-menu-item>\n    </sc-menu>\n\n    <sc-product-line-item amount="1000" currency="usd" interval="per month">\n      <span slot="title">Product Title</span>\n    </sc-product-line-item>\n\n    <sc-textarea label="Text Area" placeholder="placeholder"></sc-textarea>\n    <sc-textarea label="Text Area" value="This is some text"></sc-textarea>\n\n    <sc-toggle summary="Toggle" open>Toggle content</sc-toggle>\n    <sc-toggle summary="Toggle" open shady>Toggle content</sc-toggle>\n\n    <sc-toggles theme="container">\n      <sc-toggle summary="Toggle" open show-control shady borderless>Toggle content</sc-toggle>\n      <sc-toggle summary="Toggle"show-control shady borderless>Toggle content</sc-toggle>\n    </sc-toggles>\n\n    <sc-secure-notice>SC secure-notice</sc-secure-notice>\n\n    <div style="margin-bottom: 200px">\n    <sc-select label="Select" search open>SC select</sc-select>\n    </div>\n\n    <div>\n      <header style="display: flex; align-items: center; margin-bottom: 1rem;">\n        <sc-skeleton style="width: 3rem; height: 3rem; margin-right: 1rem; vertical-align: middle;"></sc-skeleton>\n        <sc-skeleton style="width: 30%;"></sc-skeleton>\n      </header>\n      <sc-skeleton style="margin-bottom: 1rem;"></sc-skeleton>\n      <sc-skeleton style="margin-bottom: 1rem; width: 95%;"></sc-skeleton>\n      <sc-skeleton style="margin-bottom: 1rem; width: 80%;"></sc-skeleton>\n    </div>\n\n    <sc-spinner></sc-spinner>\n\n    <sc-stacked-list> <sc-stacked-list-row>SC stacked-list-row</sc-stacked-list-row>\n    <sc-stacked-list-row>SC stacked-list-row</sc-stacked-list-row>\n    <sc-stacked-list-row>SC stacked-list-row</sc-stacked-list-row></sc-stacked-list>\n\n    <sc-stripe-element label="Payment" publishable-key="pk_live_51KgGVf2E2Wr9trjmbUbolV7DGH5RkCjH08zkJbfPTyoE2EQfCj7WJGP5PgzJI3jH9eC15TgGa6URDwxK52Cp3tav00jQ4rwfyg" account-id="acct_1KgGVf2E2Wr9trjm"></sc-stripe-element>\n\n    <sc-tab-group>\n      <sc-tab slot="nav" panel="panel-1">SC tab1</sc-tab>\n      <sc-tab slot="nav" panel="panel-2">SC tab2</sc-tab>\n      <sc-tab slot="nav" panel="panel-3">SC tab3</sc-tab>\n      <sc-tab-panel name="panel-1">SC tab-panel 1</sc-tab-panel>\n      <sc-tab-panel name="panel-2">SC tab-panel 2</sc-tab-panel>\n      <sc-tab-panel name="panel-3">SC tab-panel 3</sc-tab-panel>\n    </sc-tab-group>\n\n    <sc-table>\n      <sc-table-cell slot="head">Number</sc-table-cell>\n      <sc-table-cell slot="head">Items</sc-table-cell>\n      <sc-table-cell slot="head">Total</sc-table-cell>\n      <sc-table-cell slot="head" style="width: '100px'">Status</sc-table-cell>\n      <sc-table-cell slot="head" style="width: '100px'"></sc-table-cell>\n      <sc-table-row>\n        <sc-table-cell>\n          <sc-text truncate>\n            15AG68LR\n          </sc-text>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-text\n            truncate\n          >\n          items\n          </sc-text>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-format-number\n            type="currency"\n            currency="USD"\n            value="2500"\n          ></sc-format-number>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-order-status-badge status="paid"></sc-order-status-badge>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-button size="small">View</sc-button>\n        </sc-table-cell>\n      </sc-table-row>\n      <sc-table-row>\n        <sc-table-cell>\n          <sc-text truncate>\n            15AG68LR\n          </sc-text>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-text\n            truncate\n          >\n          items\n          </sc-text>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-format-number\n            type="currency"\n            currency="USD"\n            value="2500"\n          ></sc-format-number>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-order-status-badge status="paid"></sc-order-status-badge>\n        </sc-table-cell>\n        <sc-table-cell>\n          <sc-button size="small">View</sc-button>\n        </sc-table-cell>\n      </sc-table-row>\n    </sc-table>\n\n    <sc-heading>SC Heading</sc-heading>\n    <sc-text>SC text</sc-text>\n    <sc-empty icon="shopping-bag">SC Empty</sc-empty>\n  </sc-form>\n</div>`);export const Dark=Template.bind({});Dark.args={theme:"dark"};

Back