docs: place demos at the top of each docs page (#3957)

* docs: move to 11ty beta for ESM support * docs: place demos at the top of each docs page
adobe · Feb 6, 2024 · c78de32 · c78de32
1 parent a55342f
commit c78de32
Show file tree

Hide file tree

Showing 29 changed files with 1,046 additions and 428 deletions.
diff --git a/package.json b/package.json
@@ -201,7 +201,7 @@
         "tar-stream": "^3.0.0",
         "terser": "^4.8.1",
         "typescript": "^4.7.2",
-        "wireit": "^0.14.1",
+        "wireit": "^0.14.3",
         "yargs": "^17.2.1"
     },
     "wireit": {

diff --git a/packages/accordion/stories/accordion.stories.ts b/packages/accordion/stories/accordion.stories.ts
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 import { TemplateResult } from '@spectrum-web-components/base';
 import { AccordionMarkup } from './';
+import { argTypes } from './args.js';
 
 import '@spectrum-web-components/accordion/sp-accordion.js';
 import '@spectrum-web-components/accordion/sp-accordion-item.js';
@@ -25,44 +26,7 @@ export default {
         size: 'm',
         density: undefined,
     },
-    argTypes: {
-        open: {
-            name: 'open',
-            type: { name: 'boolean', required: false },
-            description: 'Whether the second accordion item is open.',
-            table: {
-                type: { summary: 'boolean' },
-                defaultValue: { summary: false },
-            },
-            control: {
-                type: 'boolean',
-            },
-        },
-        density: {
-            name: 'density',
-            type: { name: 'string', required: false },
-            description: 'The density at which to display accordion items.',
-            table: {
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                options: ['compact', 'spacious', undefined],
-                type: 'select',
-            },
-        },
-        size: {
-            name: 'size',
-            type: { name: 'string', required: false },
-            description: 'The size at which to display accordion items.',
-            table: {
-                defaultValue: { summary: 'm' },
-            },
-            control: {
-                options: ['s', 'm', 'l', 'xl'],
-                type: 'select',
-            },
-        },
-    },
+    argTypes,
 };
 
 type Properties = {

diff --git a/packages/accordion/stories/args.ts b/packages/accordion/stories/args.ts
@@ -0,0 +1,72 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export const argTypes = {
+    open: {
+        name: 'open',
+        type: { name: 'boolean', required: false },
+        description: 'Whether the second accordion item is open.',
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+    allowMultiple: {
+        name: 'allowMultiple',
+        type: { name: 'boolean', required: false },
+        description:
+            'Whether multipel Accordion Items can be open at the same time.',
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+    density: {
+        name: 'density',
+        type: { name: 'string', required: false },
+        description: 'The density at which to display accordion items.',
+        table: {
+            defaultValue: { summary: 'default' },
+        },
+        control: {
+            labels: {
+                compact: 'Compact',
+                spacious: 'Spacious',
+                default: 'Default',
+            },
+            type: 'select',
+        },
+    },
+    size: {
+        name: 'size',
+        type: { name: 'string', required: false },
+        description: 'The size at which to display accordion items.',
+        table: {
+            defaultValue: { summary: 'm' },
+        },
+        control: {
+            labels: {
+                s: 'Small',
+                m: 'Medium',
+                l: 'Large',
+                xl: 'Extra large',
+            },
+            type: 'select',
+        },
+    },
+};
diff --git a/packages/accordion/stories/template.ts b/packages/accordion/stories/template.ts
@@ -0,0 +1,15 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { AccordionMarkup } from './';
+
+export const Template = AccordionMarkup;
diff --git a/packages/action-bar/stories/action-bar.stories.ts b/packages/action-bar/stories/action-bar.stories.ts
@@ -19,24 +19,17 @@ import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
 
+import { Template } from './template.js';
+
 export default {
     title: 'Action Bar',
     component: 'sp-action-bar',
 };
 
-export const Default = (): TemplateResult => {
-    return html`
-        <sp-action-bar open>
-            2 selected
-            <sp-action-button slot="buttons" label="Edit">
-                <sp-icon-edit slot="icon"></sp-icon-edit>
-            </sp-action-button>
-            <sp-action-button slot="buttons" label="More">
-                <sp-icon-more slot="icon"></sp-icon-more>
-            </sp-action-button>
-        </sp-action-bar>
-    `;
-};
+export const Default = (): TemplateResult =>
+    Template({
+        open: true,
+    });
 
 export const emphasized = (): TemplateResult => {
     return html`

diff --git a/packages/action-bar/stories/args.ts b/packages/action-bar/stories/args.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export const argTypes = {
+    open: {
+        name: 'open',
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Action Bar is open and visible.',
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: true },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+    emphasized: {
+        name: 'emphasized',
+        type: { name: 'boolean', required: false },
+        description: 'Whether the Action Bar is emphasized for the viewer.',
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: false },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+    tools: {
+        name: 'tools',
+        type: { name: 'boolean', required: false },
+        description: 'Whether to display tools in the action bar.',
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: true },
+        },
+        control: {
+            type: 'boolean',
+        },
+    },
+};
diff --git a/packages/action-bar/stories/template.ts b/packages/action-bar/stories/template.ts
@@ -0,0 +1,46 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html, TemplateResult } from '@spectrum-web-components/base';
+
+import '@spectrum-web-components/action-bar/sp-action-bar.js';
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
+
+export interface Properties {
+    emphasized?: boolean;
+    open?: boolean;
+    tools?: boolean;
+}
+
+export const Template = ({
+    emphasized,
+    open,
+    tools = true,
+}: Properties): TemplateResult => {
+    return html`
+        <sp-action-bar ?open=${open} ?emphasized=${emphasized}>
+            2 selected
+            ${tools
+                ? html`
+                      <sp-action-button slot="buttons" label="Edit">
+                          <sp-icon-edit slot="icon"></sp-icon-edit>
+                      </sp-action-button>
+                      <sp-action-button slot="buttons" label="More">
+                          <sp-icon-more slot="icon"></sp-icon-more>
+                      </sp-action-button>
+                  `
+                : html``}
+        </sp-action-bar>
+    `;
+};
diff --git a/packages/button/stories/index.ts b/packages/button/stories/index.ts
@@ -20,6 +20,9 @@ import {
     ButtonVariants,
 } from '@spectrum-web-components/button/src/Button.js';
 
+import type { Properties } from './template.js';
+export type { Properties };
+
 export const args = {
     disabled: false,
     variant: 'cta',
@@ -89,20 +92,6 @@ export const argTypes = {
     },
 };
 
-export interface Properties {
-    variant?: ButtonVariants;
-    treatment?: ButtonTreatments;
-    quiet?: boolean;
-    pending?: boolean;
-    content?: TemplateResult;
-    disabled?: boolean;
-    size?: 's' | 'm' | 'l' | 'xl';
-    href?: string;
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    warning?: boolean;
-    iconOnly?: boolean;
-}
-
 export const makeOverBackground =
     (variant?: 'white' | 'black') =>
     (story: () => TemplateResult): TemplateResult => {

diff --git a/packages/button/stories/template.ts b/packages/button/stories/template.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html, TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import {
+    ButtonTreatments,
+    ButtonVariants,
+} from '@spectrum-web-components/button/src/Button.js';
+
+export interface Properties {
+    variant?: ButtonVariants;
+    treatment?: ButtonTreatments;
+    quiet?: boolean;
+    pending?: boolean;
+    content?: TemplateResult;
+    disabled?: boolean;
+    size?: 's' | 'm' | 'l' | 'xl';
+    href?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    warning?: boolean;
+    iconOnly?: boolean;
+}
+
+export const Template = ({
+    disabled,
+    pending,
+    size,
+    treatment,
+    variant,
+}: Properties): TemplateResult => html`
+    <sp-button
+        ?disabled=${disabled}
+        ?pending=${pending}
+        size=${ifDefined(size)}
+        treatment=${ifDefined(treatment)}
+        variant=${ifDefined(variant)}
+    >
+        Test Button
+    </sp-button>
+`;
diff --git a/packages/card/src/card.css b/packages/card/src/card.css
@@ -66,6 +66,10 @@ slot[name='description'] {
     width: auto;
 }
 
+:host([horizontal]) sp-asset {
+    height: inherit;
+}
+
 sp-quick-actions {
     z-index: 1;
 }

diff --git a/packages/iconset/package.json b/packages/iconset/package.json
@@ -18,6 +18,7 @@
     },
     "main": "./src/index.js",
     "module": "./src/index.js",
+    "type": "module",
     "exports": {
         ".": {
             "development": "./src/index.dev.js",