From 1cb81e8b82a7bc6f9deab44c807dc4cfd8bda2a2 Mon Sep 17 00:00:00 2001 From: Philipp Sonntag Date: Wed, 14 Sep 2022 10:02:49 +0200 Subject: [PATCH 1/2] sb-button web component: Added prefix slot in example * Changed extraction order of attributes from manifest. --- .../custom-elements.json | 6 +++++ .../src/components/sb-button.stories.ts | 25 ++++++++++++------- .../src/components/sb-button.ts | 2 +- .../src/docs/custom-elements.ts | 17 ++++++++++--- 4 files changed, 37 insertions(+), 13 deletions(-) diff --git a/code/examples/web-components-kitchen-sink/custom-elements.json b/code/examples/web-components-kitchen-sink/custom-elements.json index f776c812fe36..ca582f2942f3 100644 --- a/code/examples/web-components-kitchen-sink/custom-elements.json +++ b/code/examples/web-components-kitchen-sink/custom-elements.json @@ -38,6 +38,12 @@ "default": "#1ea7fd" } ], + "slots": [ + { + "name": "prefix", + "description": "Label prefix" + } + ], "members": [ { "kind": "field", diff --git a/code/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts b/code/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts index 8022ff06f6a8..f5aa26ddc618 100644 --- a/code/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts +++ b/code/examples/web-components-kitchen-sink/src/components/sb-button.stories.ts @@ -5,45 +5,52 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import './sb-button'; import type { SbButton } from './sb-button'; +/** + * Slots aren't defined as JS properties or within the class implementation of the component. + * To allow the user to fill in values and test them anyway, we extended the interface + * of the button to prevent type issues within the stories. + */ +interface SbButtonSlots extends SbButton { + prefix: string; +} + export default { title: 'Example/Button', // Need to set the tag to make addon-docs works properly with CustomElementsManifest component: 'sb-button', - argTypes: { - onClick: { action: 'onClick' }, - }, parameters: { actions: { handles: ['click', 'sb-button:click'], }, }, } as Meta; -const Template: Story = ({ primary, backgroundColor, size, label }) => +const Template: Story = ({ primary, backgroundColor, size, label, prefix }) => html``; + >${prefix}`; -export const Primary: Story = Template.bind({}); +export const Primary: Story = Template.bind({}); Primary.args = { primary: true, label: 'Button', }; -export const Secondary: Story = Template.bind({}); +export const Secondary: Story = Template.bind({}); Secondary.args = { label: 'Button', }; -export const Large: Story = Template.bind({}); +export const Large: Story = Template.bind({}); Large.args = { size: 'large', label: 'Button', }; -export const Small: Story = Template.bind({}); +export const Small: Story = Template.bind({}); Small.args = { size: 'small', label: 'Button', diff --git a/code/examples/web-components-kitchen-sink/src/components/sb-button.ts b/code/examples/web-components-kitchen-sink/src/components/sb-button.ts index 0c4dd313d22e..6f012bdda060 100644 --- a/code/examples/web-components-kitchen-sink/src/components/sb-button.ts +++ b/code/examples/web-components-kitchen-sink/src/components/sb-button.ts @@ -94,7 +94,7 @@ export class SbButton extends LitElement { style=${style} @click="${this.onClick}" > - ${this.label} + ${this.label} `; } diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/code/renderers/web-components/src/docs/custom-elements.ts index f81f19665006..dcfe033a3540 100644 --- a/code/renderers/web-components/src/docs/custom-elements.ts +++ b/code/renderers/web-components/src/docs/custom-elements.ts @@ -47,8 +47,19 @@ interface Sections { } function mapItem(item: TagItem, category: string): ArgType { - const type = - category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' }; + let type; + switch (category) { + case 'attributes': + case 'properties': + type = { name: item.type?.text || item.type }; + break; + case 'slots': + type = { name: 'string' }; + break; + default: + type = { name: 'void' }; + break; + } return { name: item.name, @@ -145,9 +156,9 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus const metaData = getMetaData(tagName, customElements); return ( metaData && { - ...mapData(metaData.attributes, 'attributes'), ...mapData(metaData.members, 'properties'), ...mapData(metaData.properties, 'properties'), + ...mapData(metaData.attributes, 'attributes'), ...mapData(metaData.events, 'events'), ...mapData(metaData.slots, 'slots'), ...mapData(metaData.cssProperties, 'css custom properties'), From 12b80b2ca81c9985786bb0860d2923ed6c7219d2 Mon Sep 17 00:00:00 2001 From: Philipp Sonntag Date: Wed, 14 Sep 2022 18:36:23 +0200 Subject: [PATCH 2/2] Updated tests for web components. --- .../lit-element-demo-card/properties.snapshot | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot index 127bc8704a4a..7f1b194d16b6 100644 --- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot +++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/properties.snapshot @@ -84,7 +84,7 @@ Object { }, }, "type": Object { - "name": "void", + "name": "boolean", }, }, "backSide": Object { @@ -126,7 +126,7 @@ Object { "name": "header", "required": false, "table": Object { - "category": "properties", + "category": "attributes", "defaultValue": Object { "summary": "\\"Your Message\\"", }, @@ -152,7 +152,7 @@ Object { "name": "rows", "required": false, "table": Object { - "category": "properties", + "category": "attributes", "defaultValue": Object { "summary": "[]", },