FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
surecart
/
dist
/
components
/
collection
/
components
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"};
Save
Back