diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index c84382b4..0ac61868 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,9 +1,17 @@ - + + + + + + + + +

Interactive Playground Example for SGDS Button

+ + + + + + + + + + + + + + + diff --git a/index.html b/index.html index bb98b522..7d33fefa 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,9 @@ padding: 1rem; grid-area: main; } + sgds-button { + --btn-border-radius: 0; + } + + ${generateEventScript(component) + ? `` + : '' + } + + + ${generateDocsSection(component)} + \`, + name: "Playground", + args: {}, + parameters: {} + }; + `; +} + +// Helper function to generate custom CSS based on cssParts +function generateCssParts(cssParts, componentTagName) { + return cssParts + ?.map( + (part) => ` + ${componentTagName}::part(${part.name}) { + /* Your CSS here */ + } + ` + ) + .join('\n'); +} + +function generateCssProperties(cssProperties) { + return cssProperties?.map((prop) => `${prop.name}`).join('\n'); +} + +// Helper function to generate event handling script +function generateEventScript(component) { + const eventMethods = component.events; + if (eventMethods && eventMethods.length > 0) { + return ` + componentElement.addEventListener('${eventMethods[0].name}', () => { + console.log('${eventMethods[0].name} event triggered'); + }); + `; + } + return ''; +} + +// Helper function to generate documentation section +function generateDocsSection(component) { + const cssProperties = component.cssProperties?.length > 0 + ? component.cssProperties[0].name + : 'custom-css-property'; + return ` +
+

1. Edit the Custom CSS

+

You can edit the ${component.name}'s styles by modifying its custom CSS properties. For example:

+ 

+        ${component.tagName} {
+          --${cssProperties}: value;
+        }
+
+

2. Modify Event Handling

+

If there are events declared, you can customize how the ${component.name} responds to events. For example:

+ 

+        componentElement.addEventListener('insert component event'}', () => {
+          console.log( event triggered');
+        });
+
+

3. Change ${component.name} Attributes

+

You can modify the ${component.name}'s attributes directly within the HTML. For example:

+ 

+        ${component.tagName} some-attribute="value"
+
+
+ `; +} + +// Helper function to inject generated playground into the target file +function injectPlaygroundIntoFile(filePath, content, componentName) { + const fileContent = fs.readFileSync(filePath, 'utf8'); + + // Inject the generated content into the appropriate place in the file + const injectionMarker = `// Playground Injection Point`; + const newContent = fileContent.replace(injectionMarker, content); + + fs.writeFileSync(filePath, newContent, 'utf8'); +} + + diff --git a/stories/README.md b/stories/README.md index 3a4850ac..18282e31 100644 --- a/stories/README.md +++ b/stories/README.md @@ -43,4 +43,12 @@ Write your text description in `additional.mdx` and the respective CSF story in ## Table of Contents in Docs mode -- TOC is enabled, so be mindful of the h1, h2, h3 used as those will go into the TOC \ No newline at end of file +- TOC is enabled, so be mindful of the h1, h2, h3 used as those will go into the TOC + +## Setting up Google Playground Elements IDE for a component + +- Create the following file if not present : `stories/templates/ComponentName/additional.stories.js` + +- If `import { html } from "lit-html";` and `export const SgdsComponentPlayground` are present in the file, remove them + +- Add `// Playground Injection Point` to the top of the file \ No newline at end of file diff --git a/stories/templates/Accordion/additional.stories.js b/stories/templates/Accordion/additional.stories.js new file mode 100644 index 00000000..f290476f --- /dev/null +++ b/stories/templates/Accordion/additional.stories.js @@ -0,0 +1,88 @@ +import { html } from "lit-html"; + +export const SgdsAccordionPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsAccordion's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-accordion {
+          --accordion-active-color: value;
+        }
+
+

2. Change SgdsAccordion Attributes

+

You can modify the SgdsAccordion's attributes directly within the HTML. For example:

+ 

+        sgds-accordion some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/ActionCard/additional.stories.js b/stories/templates/ActionCard/additional.stories.js index 25b07bc3..ccb81fd6 100644 --- a/stories/templates/ActionCard/additional.stories.js +++ b/stories/templates/ActionCard/additional.stories.js @@ -46,3 +46,100 @@ export const ActionCardAsRadio = { // parameters: {}, // tags: ["dev"] // }; + +export const ActionCardPlayground = { + render: () => html` + + + + + +
+

1. Edit the Custom CSS

+

+ You can edit the action card's shadow parts css by modifying its custom CSS properties. These can be seen in the + documentation below. For example, you can change the background colour by editing the following code inside + index.html: +

+ 

+          sgds-action-card::part(body) {
+            color: darkred;
+          }
+
+ +

2. Modify Event Handling

+

+ You can customize how the action card responds to events by editing events.js. For instance, + you can change the action triggered by the sgds-change event: +

+ 

+        action.addEventListener('sgds-change', () => {
+          console.log('custom message');
+        });
+
+

In this example, the message will in broswer console when checked status changes.

+ +

3. Change Action Card Attributes

+

+ You can modify the action card's attributes directly within the HTML to change its appearance or behavior. Refer + to the documentation below. For instance, try disabling the action card inside index.html: +

+ 

+         disabled = "true"
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Alert/additional.stories.js b/stories/templates/Alert/additional.stories.js new file mode 100644 index 00000000..0d665648 --- /dev/null +++ b/stories/templates/Alert/additional.stories.js @@ -0,0 +1,99 @@ +import { html } from "lit-html"; + +export const SgdsAlertPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsAlert's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-alert {
+          --alert-bg: value;
+          --alert-border-color: value;
+          --alert-icon-margin-right: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsAlert responds to events. For example:

+ 

+        componentElement.addEventListener("sgds-show", () => {
+          console.log("sgds-show event triggered");
+        });
+
+

3. Change SgdsAlert Attributes

+

You can modify the SgdsAlert's attributes directly within the HTML. For example:

+ 

+        sgds-alert some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Badge/additional.stories.js b/stories/templates/Badge/additional.stories.js new file mode 100644 index 00000000..6497d52c --- /dev/null +++ b/stories/templates/Badge/additional.stories.js @@ -0,0 +1,39 @@ +import { html } from "lit-html"; + +export const BadgePlayground = { + render: () => html` + + + +
+

Change Badge Attributes

+

+ You can modify the badge's attributes directly within the HTML to change its appearance or behavior. Refer to + the documentation below. For instance, try changing the badge variant inside index.html: +

+ 

+           variant="success"
+
+

Changing the variant attribute to success will apply a new style to the badge.

+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Breadcrumb/additional.stories.js b/stories/templates/Breadcrumb/additional.stories.js new file mode 100644 index 00000000..c9101dd4 --- /dev/null +++ b/stories/templates/Breadcrumb/additional.stories.js @@ -0,0 +1,56 @@ +import { html } from "lit-html"; + +export const BreadcrumbPlayground = { + render: () => html` + + + +
+

1. Edit the Custom CSS

+

+ You can edit the breadcrumbs's custom css shadow parts styles by modifying its custom CSS properties. These can + be seen in the documentation below. For example, you can change the margin by editing the following code inside + index.html: +

+ 

+          sgds-breadcrumb::part(base) {
+            margin: 20px; 
+          }
+
+

This will apply a margin.

+ +

2. Change Breadcrumb Attributes

+

+ You can modify the breadcrumb's attributes directly within the HTML to change its appearance or behavior. Refer + to the documentation below. For instance, try changing the aria label inside index.html: +

+ 

+           aria-label="custom"
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Button/additional.mdx b/stories/templates/Button/additional.mdx index ccc77840..78150c6d 100644 --- a/stories/templates/Button/additional.mdx +++ b/stories/templates/Button/additional.mdx @@ -37,4 +37,5 @@ Use SVG element to add icon to the slot. - \ No newline at end of file + + diff --git a/stories/templates/Button/additional.stories.js b/stories/templates/Button/additional.stories.js index 3da910f6..c1894c41 100644 --- a/stories/templates/Button/additional.stories.js +++ b/stories/templates/Button/additional.stories.js @@ -73,3 +73,68 @@ export const ButtonWithIcon = { parameters: {}, tags: ["!dev"] }; + +export const SgdsButtonPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsButton's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-button {
+          ----btn-border-radius: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsButton responds to events. For example:

+ 

+        componentElement.addEventListener('insert component event'}', () => {
+          console.log( event triggered');
+        });
+
+

3. Change SgdsButton Attributes

+

You can modify the SgdsButton's attributes directly within the HTML. For example:

+ 

+        sgds-button some-attribute="value" 
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Card/additional.stories.js b/stories/templates/Card/additional.stories.js new file mode 100644 index 00000000..8fb12959 --- /dev/null +++ b/stories/templates/Card/additional.stories.js @@ -0,0 +1,67 @@ +import { html } from "lit-html"; + +export const SgdsCardPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsCard's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-card {
+          --custom-css-property: value;
+        }
+
+

2. Change SgdsCard Attributes

+

You can modify the SgdsCard's attributes directly within the HTML. For example:

+ 

+        sgds-card some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Checkbox/additional.stories.js b/stories/templates/Checkbox/additional.stories.js index 700765a8..c59fec94 100644 --- a/stories/templates/Checkbox/additional.stories.js +++ b/stories/templates/Checkbox/additional.stories.js @@ -1,5 +1,61 @@ import { html } from "lit-html"; +export const SgdsCheckboxPlayground = { + render: () => html` + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsCheckbox's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-checkbox {
+          --custom-css-property: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsCheckbox responds to events. For example:

+ 

+        componentElement.addEventListener('insert component event'}', () => {
+          console.log( event triggered');
+        });
+
+

3. Change SgdsCheckbox Attributes

+

You can modify the SgdsCheckbox's attributes directly within the HTML. For example:

+ 

+        sgds-checkbox some-attribute="value" 
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; + const ValidationTemplate = () => html`
diff --git a/stories/templates/ComboBox/additional.stories.js b/stories/templates/ComboBox/additional.stories.js index eea53d39..1f57a9cc 100644 --- a/stories/templates/ComboBox/additional.stories.js +++ b/stories/templates/ComboBox/additional.stories.js @@ -476,3 +476,69 @@ export const ComboBoxCustomFilter = { parameters: {}, tags: ["!dev"] }; + +export const ComboBoxPlayground = { + render: () => html` + + + + + +
+

1. Modify Event Handling

+

+ You can customize how the ComboBox responds to events by editing events.js. For instance, you + can change the action triggered by the sgds-input event: +

+ 

+          combo.addEventListener('sgds-input', () => {
+            console.log('custom message');
+          });
+
+

In this example, the message will appear in browser console when the user input value changes.

+ +

2. Change ComboBox Attributes

+

+ You can modify the ComboBox's attributes directly within the HTML to change its appearance or behavior. Refer to + the documentation below. For instance, try changing the placeholder inside index.html: +

+ 

+           placeholder="custom"
+
+

+ Changing the placeholder attribute to "custom" will change the placeholder + accordingly. +

+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Datepicker/additional.stories.js b/stories/templates/Datepicker/additional.stories.js index 7fb675be..1f27513b 100644 --- a/stories/templates/Datepicker/additional.stories.js +++ b/stories/templates/Datepicker/additional.stories.js @@ -1,5 +1,86 @@ import { html } from "lit-html"; +export const SgdsDatepickerPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsDatepicker's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-datepicker {
+          --datepicker-theme-color: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsDatepicker responds to events. For example:

+ 

+        componentElement.addEventListener('sgds-change-date', () => {
+          console.log('event triggered');
+        });
+
+

3. Change SgdsDatepicker Attributes

+

You can modify the SgdsDatepicker's attributes directly within the HTML. For example:

+ 

+        sgds-datepicker some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; + export const RangeTemplate = () => html` `; export const RangeSelection = { diff --git a/stories/templates/Drawer/additional.stories.js b/stories/templates/Drawer/additional.stories.js new file mode 100644 index 00000000..19186b2e --- /dev/null +++ b/stories/templates/Drawer/additional.stories.js @@ -0,0 +1,135 @@ +import { html } from "lit-html"; + +export const SgdsDrawerPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsDrawer's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-drawer {
+          --drawer-size: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsDrawer responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsDrawer Attributes

+

You can modify the SgdsDrawer's attributes directly within the HTML. For example:

+ 

+        sgds-drawer some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Dropdown/additional.stories.js b/stories/templates/Dropdown/additional.stories.js new file mode 100644 index 00000000..70a1ab22 --- /dev/null +++ b/stories/templates/Dropdown/additional.stories.js @@ -0,0 +1,70 @@ +import { html } from "lit-html"; + +export const SgdsDropdownPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsDropdown's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-dropdown {
+          --custom-css-property: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsDropdown responds to events. For example:

+ 

+        componentElement.addEventListener('insert component event', () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsDropdown Attributes

+

You can modify the SgdsDropdown's attributes directly within the HTML. For example:

+ 

+        sgds-dropdown some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/FileUpload/additional.stories.js b/stories/templates/FileUpload/additional.stories.js new file mode 100644 index 00000000..43cb7748 --- /dev/null +++ b/stories/templates/FileUpload/additional.stories.js @@ -0,0 +1,87 @@ +import { html } from "lit-html"; + +export const SgdsFileUploadPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsFileUpload's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-file-upload {
+          --file-upload-file-icon-color: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsFileUpload responds to events. For example:

+ 

+        componentElement.addEventListener('insert component event', () => {
+          console.log('event triggered');
+        });
+
+

3. Change SgdsFileUpload Attributes

+

You can modify the SgdsFileUpload's attributes directly within the HTML. For example:

+ 

+        sgds-file-upload some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Footer/additional.stories.js b/stories/templates/Footer/additional.stories.js new file mode 100644 index 00000000..f07b509b --- /dev/null +++ b/stories/templates/Footer/additional.stories.js @@ -0,0 +1,63 @@ +import { html } from "lit-html"; + +export const SgdsFooterPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsFooter's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-footer {
+          --footer-top: value;
+        }
+
+

2. Change SgdsFooter Attributes

+

You can modify the SgdsFooter's attributes directly within the HTML. For example:

+ 

+        sgds-footer some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Input/additional.stories.js b/stories/templates/Input/additional.stories.js index e1061934..c20adcfa 100644 --- a/stories/templates/Input/additional.stories.js +++ b/stories/templates/Input/additional.stories.js @@ -1,5 +1,69 @@ import { html } from "lit-html"; +export const SgdsInputPlayground = { + render: () => html` + + + + + + +
+

1. Modify Event Handling

+

You can customize how the SgdsInput responds to events. For example:

+ 

+        componentElement.addEventListener('insert component event', () => {
+          console.log('event triggered');
+        });
+
+

3. Change SgdsInput Attributes

+

You can modify the SgdsInput's attributes directly within the HTML. For example:

+ 

+        sgds-input some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; + export const ValidationTemplate = () => html` html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsMainnav's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-mainnav {
+          --mainnav-bg: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsMainnav responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsMainnav Attributes

+

You can modify the SgdsMainnav's attributes directly within the HTML. For example:

+ 

+        sgds-mainnav some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Masthead/additional.stories.js b/stories/templates/Masthead/additional.stories.js new file mode 100644 index 00000000..267e6398 --- /dev/null +++ b/stories/templates/Masthead/additional.stories.js @@ -0,0 +1,49 @@ +import { html } from "lit-html"; + +export const SgdsMastheadPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsMasthead's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-masthead {
+          --masthead-mobile-font-size: value;
+        }
+
+

2. Change SgdsMasthead Attributes

+

You can modify the SgdsMasthead's attributes directly within the HTML. For example:

+ 

+        sgds-masthead some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Modal/additional.stories.js b/stories/templates/Modal/additional.stories.js new file mode 100644 index 00000000..f79fb954 --- /dev/null +++ b/stories/templates/Modal/additional.stories.js @@ -0,0 +1,140 @@ +import { html } from "lit-html"; + +export const SgdsModalPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsModal's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-modal {
+          --modal-panel-padding: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsModal responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsModal Attributes

+

You can modify the SgdsModal's attributes directly within the HTML. For example:

+ 

+        sgds-modal some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Pagination/additional.stories.js b/stories/templates/Pagination/additional.stories.js index b484c365..0f105e2b 100644 --- a/stories/templates/Pagination/additional.stories.js +++ b/stories/templates/Pagination/additional.stories.js @@ -79,3 +79,75 @@ export const ShowFirstPage = { parameters: {}, tags: ["!dev"] }; + +export const SgdsPaginationPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsPagination's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-pagination {
+          --pagination-color: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsPagination responds to events. For example:

+ 

+        componentElement.addEventListener("sgds-page-change", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsPagination Attributes

+

You can modify the SgdsPagination's attributes directly within the HTML. For example:

+ 

+        sgds-pagination some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Progress/additional.stories.js b/stories/templates/Progress/additional.stories.js new file mode 100644 index 00000000..2ba982ce --- /dev/null +++ b/stories/templates/Progress/additional.stories.js @@ -0,0 +1,59 @@ +import { html } from "lit-html"; + +export const SgdsProgressPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsProgress's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-progress {
+          --progress-height: value;
+        }
+
+

2. Change SgdsProgress Attributes

+

You can modify the SgdsProgress's attributes directly within the HTML. For example:

+ 

+        sgds-progress some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/QuantityToggle/additional.stories.js b/stories/templates/QuantityToggle/additional.stories.js new file mode 100644 index 00000000..bc7977c7 --- /dev/null +++ b/stories/templates/QuantityToggle/additional.stories.js @@ -0,0 +1,70 @@ +import { html } from "lit-html"; + +export const SgdsQuantityTogglePlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsQuantityToggle's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-quantity-toggle {
+          --custom-css-property: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsQuantityToggle responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsQuantityToggle Attributes

+

You can modify the SgdsQuantityToggle's attributes directly within the HTML. For example:

+ 

+        sgds-quantity-toggle some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Radio/additional.stories.js b/stories/templates/Radio/additional.stories.js index 3e9e5c17..cf361536 100644 --- a/stories/templates/Radio/additional.stories.js +++ b/stories/templates/Radio/additional.stories.js @@ -1,5 +1,63 @@ import { html } from "lit-html"; +export const SgdsRadioPlayground = { + render: () => html` + + + + + + +
+

1. Modify Event Handling

+

You can customize how the SgdsRadio responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsRadio Attributes

+

You can modify the SgdsRadio's attributes directly within the HTML. For example:

+ 

+        sgds-radio some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; + const ValidationTemplate = () => html` diff --git a/stories/templates/Sidenav/additional.stories.js b/stories/templates/Sidenav/additional.stories.js new file mode 100644 index 00000000..a18b233d --- /dev/null +++ b/stories/templates/Sidenav/additional.stories.js @@ -0,0 +1,98 @@ +import { html } from "lit-html"; + +export const SgdsSidenavPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsSidenav's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-sidenav {
+          --sidenav-theme-color: value;
+        }
+
+

2. Change SgdsSidenav Attributes

+

You can modify the SgdsSidenav's attributes directly within the HTML. For example:

+ 

+        sgds-sidenav some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Spinner/additional.stories.js b/stories/templates/Spinner/additional.stories.js new file mode 100644 index 00000000..fa5f7d87 --- /dev/null +++ b/stories/templates/Spinner/additional.stories.js @@ -0,0 +1,41 @@ +import { html } from "lit-html"; + +export const SgdsSpinnerPlayground = { + render: () => html` + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsSpinner's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-spinner {
+          --custom-css-property: value;
+        }
+
+

2. Change SgdsSpinner Attributes

+

You can modify the SgdsSpinner's attributes directly within the HTML. For example:

+ 

+        sgds-spinner some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Stepper/additional.stories.js b/stories/templates/Stepper/additional.stories.js index 501e5fc5..5ce6dad8 100644 --- a/stories/templates/Stepper/additional.stories.js +++ b/stories/templates/Stepper/additional.stories.js @@ -1,4 +1,100 @@ import { MockStepper } from "../../mocks/stepper.ts"; +import { html } from "lit-html"; + +export const SgdsStepperPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsStepper's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-stepper {
+          --stepper-default-color: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsStepper responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsStepper Attributes

+

You can modify the SgdsStepper's attributes directly within the HTML. For example:

+ 

+        sgds-stepper some-attribute="value";
+
+
+ `, + name: "Playground", + args: { + steps: [ + { + stepHeader: "Personal Details", + component: "1 test" + }, + { + stepHeader: "Address and Contact Information", + component: "2 test" + }, + { + stepHeader: "Review", + component: "3 test" + } + ] + }, + parameters: {} +}; const MockStepperTemplate = () => Object.assign(new MockStepper()); diff --git a/stories/templates/Tab/additional.stories.js b/stories/templates/Tab/additional.stories.js new file mode 100644 index 00000000..7500ac84 --- /dev/null +++ b/stories/templates/Tab/additional.stories.js @@ -0,0 +1,143 @@ +import { html } from "lit-html"; + +export const SgdsTabPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsTab's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-tab {
+          --custom-css-property: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsTab responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsTab Attributes

+

You can modify the SgdsTab's attributes directly within the HTML. For example:

+ 

+        sgds-tab some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Table/additional.stories.js b/stories/templates/Table/additional.stories.js index a9c6338e..81f702c7 100644 --- a/stories/templates/Table/additional.stories.js +++ b/stories/templates/Table/additional.stories.js @@ -1,3 +1,65 @@ +import { html } from "lit-html"; + +export const SgdsTablePlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsTable's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-table {
+          --table-bg: value;
+        }
+
+

2. Change SgdsTable Attributes

+

You can modify the SgdsTable's attributes directly within the HTML. For example:

+ 

+        sgds-table some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; + export const SortingTable = { render: Template.bind({}), name: "Sorting", diff --git a/stories/templates/Textarea/additional.stories.js b/stories/templates/Textarea/additional.stories.js index 444a5c78..fea4ce7b 100644 --- a/stories/templates/Textarea/additional.stories.js +++ b/stories/templates/Textarea/additional.stories.js @@ -1,5 +1,64 @@ import { html } from "lit-html"; +export const SgdsTextareaPlayground = { + render: () => html` + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsTextarea's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-textarea {
+          --custom-css-property: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsTextarea responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsTextarea Attributes

+

You can modify the SgdsTextarea's attributes directly within the HTML. For example:

+ 

+        sgds-textarea some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; + const ValidationTemplate = () => html` `; diff --git a/stories/templates/Toast/additional.stories.js b/stories/templates/Toast/additional.stories.js new file mode 100644 index 00000000..26c8de19 --- /dev/null +++ b/stories/templates/Toast/additional.stories.js @@ -0,0 +1,87 @@ +import { html } from "lit-html"; + +export const SgdsToastPlayground = { + render: () => html` + + + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsToast's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-toast {
+          --toast-icon-margin-right: value;
+        }
+
+

2. Modify Event Handling

+

You can customize how the SgdsToast responds to events. For example:

+ 

+        componentElement.addEventListener("insert component event", () => {
+          console.log("event triggered");
+        });
+
+

3. Change SgdsToast Attributes

+

You can modify the SgdsToast's attributes directly within the HTML. For example:

+ 

+        sgds-toast some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +}; diff --git a/stories/templates/Tooltip/additional.stories.js b/stories/templates/Tooltip/additional.stories.js new file mode 100644 index 00000000..7fc2f306 --- /dev/null +++ b/stories/templates/Tooltip/additional.stories.js @@ -0,0 +1,70 @@ +import { html } from "lit-html"; + +export const SgdsTooltipPlayground = { + render: () => html` + + + + +
+

1. Edit the Custom CSS

+

You can edit the SgdsTooltip's styles by modifying its custom CSS properties. For example:

+ 

+        sgds-tooltip {
+          --tooltip-max-width: value;
+        }
+
+

2. Change SgdsTooltip Attributes

+

You can modify the SgdsTooltip's attributes directly within the HTML. For example:

+ 

+        sgds-tooltip some-attribute="value";
+
+
+ `, + name: "Playground", + args: {}, + parameters: {} +};