@xplortech/apollo-core 2.5.0 → 2.7.0

package/dist/collection/components/xpl-list/list.stories.js

@@ -1,30 +1,167 @@
 import { v4 as uuid } from "uuid";
+const PLACEHOLDER_AVATAR_SRC = 'https://placebear.com/128/128';
+function slotBasedAvatarMarkup(slotAvatar, name) {
+    if (slotAvatar === 'image') {
+        return `<xpl-avatar name="${name}" src="${PLACEHOLDER_AVATAR_SRC}"></xpl-avatar>`;
+    }
+    if (slotAvatar === 'placeholder') {
+        return `<xpl-avatar name="${name}">ABC</xpl-avatar>`;
+    }
+    return `<xpl-avatar name="${name}"></xpl-avatar>`;
+}
 export default {
     title: 'Components/List',
+    parameters: {
+        controls: {
+            sort: 'none',
+        },
+    },
     argTypes: {
+        type: {
+            name: 'Type',
+            control: { type: 'select' },
+            options: ['Legacy', 'Slot based'],
+            table: { category: '00 — Mode' },
+        },
         avatar: {
             options: ['none', 'image', 'placeholder'],
-            control: {
-                type: 'select',
-            },
+            control: { type: 'select' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
         },
         avatars: {
-            type: { name: 'boolean' },
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
         },
         badges: {
-            type: { name: 'boolean' },
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
         },
         link: {
-            type: { name: 'boolean' },
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
         },
         metadata: {
-            type: { name: 'boolean' },
+            control: { type: 'boolean' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
         },
         title: {
-            type: { name: 'string' },
+            control: { type: 'text' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
         },
         subtext: {
-            type: { name: 'string' },
+            control: { type: 'text' },
+            if: { arg: 'type', eq: 'Legacy' },
+            table: { category: '01 — Legacy' },
+        },
+        listLabel: {
+            control: 'text',
+            if: { arg: 'type', eq: 'Slot based' },
+            description: 'Sets `aria-label` on `xpl-list` for screen readers.',
+            table: { category: '02 — Slot: List & row' },
+        },
+        listLabelledBy: {
+            name: 'listLabelledBy (aria-labelledby)',
+            control: 'text',
+            if: { arg: 'type', eq: 'Slot based' },
+            description: 'Space-separated element ids; sets `aria-labelledby` on `xpl-list`.',
+            table: { category: '02 — Slot: List & row' },
+        },
+        showSelectable: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '02 — Slot: List & row' },
+        },
+        showReorderable: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            description: 'Sets `reorderable` on `xpl-list` (drag handle + keyboard reorder on slot-based rows only).',
+            table: { category: '02 — Slot: List & row' },
+        },
+        showAsLink: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '02 — Slot: List & row' },
+        },
+        showTitle: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '03 — Slot: Title row' },
+        },
+        slotTitle: {
+            control: 'text',
+            if: { arg: 'showTitle', eq: true },
+            table: { category: '03 — Slot: Title row' },
+        },
+        showDivider: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            description: 'In-row divider below the title (`showDivider` on each row).',
+            table: { category: '03 — Slot: Title row' },
+        },
+        titleBadgeVariant: {
+            control: { type: 'select' },
+            options: ['none', 'purple', 'green', 'yellow', 'red', 'blue', 'gray', 'orange'],
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '03 — Slot: Title row' },
+        },
+        showMetadata: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '03 — Slot: Title row' },
+        },
+        showAvatar: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '04 — Slot: Avatar' },
+        },
+        slotAvatar: {
+            options: ['image', 'placeholder'],
+            control: { type: 'select' },
+            if: { arg: 'showAvatar', eq: true },
+            table: { category: '04 — Slot: Avatar' },
+        },
+        showDetails: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '05 — Slot: Details & right column' },
+        },
+        slotDetails: {
+            control: 'text',
+            if: { arg: 'showDetails', eq: true },
+            table: { category: '05 — Slot: Details & right column' },
+        },
+        showBadges: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '05 — Slot: Details & right column' },
+        },
+        showActions: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '05 — Slot: Details & right column' },
+        },
+        showExtras: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            table: { category: '06 — Slot: Stacked extras & error' },
+        },
+        showError: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            description: 'Adds `error-text` slot to every row.',
+            table: { category: '06 — Slot: Stacked extras & error' },
+        },
+        errorBorderOnly: {
+            control: 'boolean',
+            if: { arg: 'type', eq: 'Slot based' },
+            description: 'Second row (`item-2`): `error` without `error-text` (border only).',
+            table: { category: '06 — Slot: Stacked extras & error' },
         },
     },
 };
@@ -48,7 +185,7 @@ const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext })
         ? [
             'Badge',
             {
-                dot: 'true',
+                dot: true,
                 text: 'With Dot',
             },
             {
@@ -62,7 +199,7 @@ const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext })
         ? [
             'Metadata',
             {
-                icon: 'mail',
+                icon: 'envelope',
                 text: 'Metadata w/ Icon',
             },
         ]
@@ -75,10 +212,87 @@ const script = ({ id, avatar, avatars, badges, metadata, link, title, subtext })
 `;
 export const List = (props) => {
     const id = uuid();
+    if (props.type === 'Slot based') {
+        const listLabelAttr = props.listLabel
+            ? ` label="${String(props.listLabel).replace(/"/g, '&quot;')}"`
+            : '';
+        const listLabelledByAttr = props.listLabelledBy
+            ? ` labelled-by="${String(props.listLabelledBy).replace(/"/g, '&quot;')}"`
+            : '';
+        return `
+        <xpl-list id="${id}"${listLabelAttr}${listLabelledByAttr} ${props.showSelectable ? 'selectable' : ''} ${props.showReorderable ? 'reorderable' : ''}>
+            ${[1, 2, 3]
+            .map((i) => `
+                <xpl-list-item item-id="item-${i}"${props.showAsLink ? ` href="#slot-list-item-${i}"` : ''}${props.showDivider ? ' show-divider' : ''}${props.titleBadgeVariant && props.titleBadgeVariant !== 'none'
+            ? ` title-badge-variant="${props.titleBadgeVariant}"`
+            : ''}${props.errorBorderOnly && i === 2 ? ' error' : ''}>
+                    ${props.showAvatar
+            ? `
+                    <div slot="avatar">
+                        ${slotBasedAvatarMarkup(props.slotAvatar, `${props.slotTitle} ${i}`)}
+                    </div>`
+            : ''}
+
+                    ${props.showTitle
+            ? `
+                    <div slot="title">
+                        ${props.slotTitle} ${i}
+                    </div>`
+            : ''}
+
+                    ${props.showMetadata
+            ? `
+                    <div slot="metadata">
+                        <span>Meta ${i}</span>
+                        <xpl-icon icon="envelope"></xpl-icon>
+                    </div>`
+            : ''}
+
+                    ${props.showDetails
+            ? `
+                    <div slot="details">
+                        ${props.slotDetails} ${i}
+                    </div>`
+            : ''}
+
+                    ${props.showBadges
+            ? `
+                    <div slot="badges">
+                        <xpl-badge>Badge</xpl-badge>
+                        <xpl-badge variant="error">Error</xpl-badge>
+                    </div>`
+            : ''}
+
+                    ${props.showActions
+            ? `
+                    <div slot="actions">
+                        <xpl-button type="button" size="sm">Action</xpl-button>
+                    </div>`
+            : ''}
+
+                    ${props.showExtras
+            ? `
+                    <div slot="stacked-extra-1">Extra 1</div>
+                    <div slot="stacked-extra-2">Extra 2</div>
+                    <div slot="stacked-extra-3">Extra 3</div>`
+            : ''}
+
+                    ${props.showError
+            ? `
+                    <div slot="error-text">
+                        Error message
+                    </div>`
+            : ''}
+                </xpl-list-item>`)
+            .join('')}
+        </xpl-list>
+        `;
+    }
     return `<xpl-list id="${id}"></xpl-list>
     <script>${script(Object.assign({ id }, props))}</script>`;
 };
 List.args = {
+    type: 'Slot based',
     avatar: 'none',
     avatars: false,
     badges: false,
@@ -86,64 +300,87 @@ List.args = {
     metadata: false,
     title: 'List Item',
     subtext: '',
+    listLabel: '',
+    listLabelledBy: '',
+    showAvatar: false,
+    showTitle: true,
+    showDivider: false,
+    titleBadgeVariant: 'none',
+    showMetadata: true,
+    showDetails: false,
+    showBadges: false,
+    showActions: true,
+    showExtras: false,
+    showError: false,
+    errorBorderOnly: false,
+    showSelectable: false,
+    showReorderable: false,
+    showAsLink: false,
+    slotTitle: 'User',
+    slotDetails: 'Details',
 };
+const slotBasedExample = `<xpl-list>
+    <xpl-list-item item-id="item-1">
+        <div slot="avatar">
+            <xpl-avatar name="Jane Doe" src="https://example.jpg"></xpl-avatar>
+        </div>
+        <div slot="title">Jane Doe</div>
+        <div slot="metadata">
+            <span>Product Designer</span>
+            <xpl-icon icon="envelope"></xpl-icon>
+        </div>
+        <div slot="details">London</div>
+        <div slot="badges">
+            <xpl-badge variant="success">Active</xpl-badge>
+        </div>
+        <div slot="actions">
+            <xpl-button type="button" size="sm">Edit</xpl-button>
+        </div>
+    </xpl-list-item>
+
+    <xpl-list-item item-id="item-2">
+        <div slot="avatar">
+            <xpl-avatar name="Alex Kim" src="https://example.jpg"></xpl-avatar>
+        </div>
+        <div slot="title">Alex Kim</div>
+        <div slot="metadata">
+            <span>Engineering Lead</span>
+            <xpl-icon icon="envelope"></xpl-icon>
+        </div>
+        <div slot="details">New York</div>
+        <div slot="badges">
+            <xpl-badge variant="warning">Away</xpl-badge>
+        </div>
+        <div slot="actions">
+            <xpl-button type="button" size="sm">Edit</xpl-button>
+        </div>
+    </xpl-list-item>
+
+    <xpl-list-item item-id="item-3" error>
+        <div slot="avatar">
+            <xpl-avatar name="Sam Rivera"></xpl-avatar>
+        </div>
+        <div slot="title">Sam Rivera</div>
+        <div slot="metadata">
+            <span>Marketing</span>
+        </div>
+        <div slot="details">Remote</div>
+        <div slot="badges">
+            <xpl-badge variant="error">Inactive</xpl-badge>
+        </div>
+        <div slot="actions">
+            <xpl-button type="button" size="sm">Edit</xpl-button>
+        </div>
+        <div slot="error-text">Account requires attention</div>
+    </xpl-list-item>
+</xpl-list>`;
 List.parameters = {
     layout: 'centered',
     'web-component': {
-        render: (({ avatar, avatars, badges, metadata, link, title, subtext }) => [
-            `<xpl-list id="list-id"></xpl-list>`,
-            `<script>
-const item = {${avatar !== 'none'
-                ? `
-    avatar: ${avatar === 'placeholder' ? '"ABC"' : '"https://example.jpg"'},`
-                : ''}${avatars
-                ? `
-    avatars: [
-        "https://example.jpg",
-        "https://example.jpg",
-        "https://example.jpg",
-    ],`
-                : ''}${badges
-                ? `
-    badges: [
-        "Badge",
-        {
-            dot: true,
-            text: "With Dot",
-        },
-        {
-            variant: "error",
-            text: "Error",
-        },
-    ],`
-                : ''}${metadata
-                ? `
-    metadata: [
-        "Metadata",
-        {
-            icon: "mail",
-            text: "Metadata w/ Icon",
-        },
-    ],`
-                : ''}${link
-                ? `
-    link: "https://example.com",`
-                : ''},
-    title: ${title},${subtext
-                ? `
-    subtext: "${subtext}",`
-                : ''}
-};
-document.getElementById("list-id").items = [
-    item,
-    item,
-    item
-];`,
-        ])(List.args),
+        render: [slotBasedExample],
     },
     html: {
-        render: ((_) => {
-        })(List.args),
+        render: slotBasedExample,
     },
     design: {
         type: 'figma',