@xplortech/apollo-core 2.5.0 → 2.6.0

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

@@ -1,48 +1,123 @@
+const VARIANT_OPTIONS = [
+    'purple',
+    'green',
+    'yellow',
+    'orange',
+    'gray',
+    'red',
+    'blue',
+    'success',
+    'warning',
+    'inactive',
+    'error',
+];
+const commonParameters = {
+    layout: 'centered',
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1395&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
+};
 export default {
     title: 'Components/Badge',
     argTypes: {
         variant: {
-            options: ['default', 'success', 'warning', 'inactive', 'error'],
-            control: {
-                type: 'select',
-            },
+            options: [...VARIANT_OPTIONS],
+            control: { type: 'select' },
+        },
+        size: {
+            options: ['default', 'small'],
+            control: { type: 'select' },
+        },
+        shape: {
+            options: ['rounded', 'boxy'],
+            control: { type: 'select' },
         },
         dot: {
-            control: {
-                type: 'boolean',
-            },
+            control: { type: 'boolean' },
+        },
+        dotOnly: {
+            control: { type: 'boolean' },
         },
         text: {
-            type: { name: 'string', required: false },
+            control: { type: 'text' },
+        },
+        bordered: {
+            control: { type: 'boolean' },
         },
     },
 };
-export const Badge = ({ variant, dot, text }) => {
-    let attrs = '';
-    if (variant !== 'default')
-        attrs += ` variant="${variant}"`;
-    if (dot)
-        attrs += ' dot';
-    return `<xpl-badge${attrs}>${text}</xpl-badge>`;
+function badgeAttrs(args) {
+    const { variant, size, shape, dot, dotOnly, bordered } = args;
+    return [
+        variant !== 'purple' ? `variant="${variant}"` : '',
+        `size="${size}"`,
+        `shape="${shape}"`,
+        dot ? 'dot' : '',
+        dotOnly ? 'dot-only' : '',
+        bordered ? 'bordered' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
+export const Badge = (args) => {
+    var _a;
+    const attrs = badgeAttrs(args);
+    const text = (_a = args.text) !== null && _a !== void 0 ? _a : '';
+    return `
+        <div style="padding: 2rem;">
+            <xpl-badge ${attrs}>${text}</xpl-badge>
+        </div>
+    `;
 };
 Badge.args = {
-    variant: 'default',
-    dot: false,
+    variant: 'purple',
+    size: 'default',
+    shape: 'rounded',
     text: 'Badge',
+    dot: true,
+    dotOnly: false,
+    bordered: false,
 };
-Badge.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Badge(Badge.args),
-    },
-    html: {
-        render: (({ dot, variant, text }) => {
-            let className = 'xpl-badge';
-            if (dot)
-                className += ' xpl-badge--dot';
-            if (variant !== 'default')
-                className += ` xpl-badge--${variant}`;
-            return `<div class="${className}">${text}</div>`;
-        })(Badge.args),
-    },
-};
+Badge.parameters = Object.assign(Object.assign({}, commonParameters), { 'web-component': {
+        render: (() => {
+            var _a;
+            const args = Object.assign({}, Badge.args);
+            const attrs = badgeAttrs(args);
+            return `<xpl-badge ${attrs}>${(_a = args.text) !== null && _a !== void 0 ? _a : ''}</xpl-badge>`;
+        })(),
+    }, html: {
+        render: `<div class="xpl-badge xpl-badge--dot xpl-badge--purple xpl-badge--size-default xpl-badge--shape-rounded">Badge</div>`,
+    } });
+const PALETTE = ['purple', 'green', 'yellow', 'orange', 'gray', 'red', 'blue'];
+export const AllVariants = () => `
+<div style="padding: 2rem; max-width: 56rem;">
+  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">Palette (pill)</h3>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+    ${PALETTE.map((v) => `<xpl-badge variant="${v}">${v}</xpl-badge>`).join('')}
+  </div>
+  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">With dot</h3>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+    ${PALETTE.map((v) => `<xpl-badge variant="${v}" dot>Label</xpl-badge>`).join('')}
+  </div>
+  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">Dot-only</h3>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+    ${PALETTE.map((v) => `<xpl-badge variant="${v}" dot-only>3</xpl-badge>`).join('')}
+  </div>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+    ${PALETTE.map((v) => `<xpl-badge variant="${v}" dot-only></xpl-badge>`).join('')}
+  </div>
+  <h3 style="margin: 0 0 1rem; font: inherit; font-weight: 600; color: var(--xpl-text-default);">Legacy semantic → mapped</h3>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+    <xpl-badge variant="success" dot>success</xpl-badge>
+    <xpl-badge variant="warning" dot>warning</xpl-badge>
+    <xpl-badge variant="inactive" dot>inactive</xpl-badge>
+    <xpl-badge variant="error" dot>error</xpl-badge>
+  </div>
+</div>
+`;
+AllVariants.parameters = Object.assign(Object.assign({}, commonParameters), { controls: { disable: true }, 'web-component': {
+        render: '<!-- See canvas: AllVariants gallery -->',
+    }, html: {
+        render: '<!-- See canvas: AllVariants gallery -->',
+    } });

package/dist/collection/components/xpl-badge/xpl-badge.js

@@ -1,16 +1,57 @@
 import { Host, h } from "@stencil/core";
-export class XplBadge {
+const LEGACY_VARIANT_MAP = {
+    success: 'green',
+    warning: 'yellow',
+    inactive: 'gray',
+    error: 'red',
+};
+export class Badge {
+    constructor() {
+        this.bordered = false;
+        this.dotOnly = false;
+        this.shape = 'rounded';
+        this.size = 'default';
+        this.variant = 'purple';
+    }
+    get resolvedVariant() {
+        var _a;
+        return (_a = LEGACY_VARIANT_MAP[this.variant]) !== null && _a !== void 0 ? _a : this.variant;
+    }
     render() {
-        let className = 'xpl-badge';
-        if (this.dot)
-            className += ' xpl-badge--dot';
-        if (this.variant)
-            className += ` xpl-badge--${this.variant}`;
-        return (h(Host, { key: '7a4da384c01815ea2bd1fed3eeaa96da99758de4' }, h("div", { key: '6f955a5ddde98ff183409ffaf65edc946387a6c7', class: className }, h("slot", { key: 'a3cd6f85cf89c5a287eb464973c664d92fa03f40' }))));
+        const className = {
+            'xpl-badge--dot-only': this.dotOnly,
+            'xpl-badge--dot-only-bordered': this.dotOnly && this.bordered,
+            'xpl-badge': !this.dotOnly,
+            'xpl-badge--dot': !this.dotOnly && !!this.dot,
+            [`xpl-badge--${this.resolvedVariant}`]: true,
+            [`xpl-badge--size-${this.size}`]: !!this.size,
+            [`xpl-badge--shape-${this.shape}`]: !this.dotOnly && !!this.shape,
+        };
+        return (h(Host, { key: '9580be5811ecfd027b81edb1ca8f5f08c325d3b6' }, h("div", { key: '0223458a5e1210f28b8b77a2d5fbd16d0b302998', class: className }, h("slot", { key: 'ef0e6db8a9f33dfcea4739be2300b481e35c7f10' }))));
     }
     static get is() { return "xpl-badge"; }
     static get properties() {
         return {
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether badge shows a bordered ring"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
             "dot": {
                 "type": "boolean",
                 "mutable": false,
@@ -23,31 +64,98 @@ export class XplBadge {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether badge shows a dot icon before the text"
+                    "text": "Whether badge shows a dot icon before the text (inside the pill)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "dot"
             },
-            "variant": {
-                "type": "string",
+            "dotOnly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'success' | 'warning' | 'inactive' | 'error'",
-                    "resolved": "\"error\" | \"inactive\" | \"success\" | \"warning\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Color styles to indicate varied states"
+                    "text": "When true, render a compact badge built around the dot.\n- With no children: just a dot (status/dot badge)\n- With children: a small dot badge with the text/number inside"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dot-only",
+                "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'boxy'",
+                    "resolved": "\"boxy\" | \"rounded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge shape\nrounded (pill) boxy (rounded corners)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'small'",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge size\ndefault | small"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariantProp",
+                    "resolved": "\"blue\" | \"error\" | \"gray\" | \"green\" | \"inactive\" | \"orange\" | \"purple\" | \"red\" | \"success\" | \"warning\" | \"yellow\"",
+                    "references": {
+                        "BadgeVariantProp": {
+                            "location": "local",
+                            "path": "/home/runner/work/apollo/apollo/packages/apollo-core/src/components/components/xpl-badge/xpl-badge.tsx",
+                            "id": "src/components/components/xpl-badge/xpl-badge.tsx::BadgeVariantProp"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Badge variant (color).\n\nPreferred values: `purple`, `green`, `yellow`, `orange`, `gray`, `red`, `blue`.\n\nThe legacy semantic names `success`, `warning`, `inactive`, and `error` are still\naccepted and map to `green`, `yellow`, `gray`, and `red` respectively. Prefer the\ncolor names for new code."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant"
+                "attribute": "variant",
+                "defaultValue": "'purple'"
             }
         };
     }

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

@@ -0,0 +1,64 @@
+const escapeHtmlAttribute = (value) => value
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+export default {
+    title: 'Components/Banner',
+    component: 'xpl-banner',
+    argTypes: {
+        appearance: {
+            options: ['information', 'positive', 'warning', 'error'],
+            control: { type: 'select' },
+        },
+        heading: { control: 'text' },
+        description: { control: 'text' },
+        truncateDesc: { control: 'boolean' },
+        isDismissible: { control: 'boolean' },
+        isSection: { control: 'boolean' },
+        hasIcon: { control: 'boolean' },
+        actionText: { control: 'text' },
+        secondaryActionText: { control: 'text' },
+    },
+};
+const optionalAttr = (name, value) => (value === null || value === void 0 ? void 0 : value.trim()) ? ` ${name}="${escapeHtmlAttribute(value)}"` : '';
+export const Banner = ({ appearance, heading, description, truncateDesc, isDismissible, isSection, hasIcon, actionText, secondaryActionText, }) => `
+    <xpl-banner
+        appearance="${appearance}"
+        truncate-desc="${truncateDesc}"
+        ${optionalAttr('heading', heading)}
+        ${optionalAttr('description', description)}
+        is-dismissible="${isDismissible}"
+        is-section="${isSection}"
+        has-icon="${hasIcon}"
+        action-text="${actionText}"
+        secondary-action-text="${secondaryActionText}"
+    ></xpl-banner>
+`;
+Banner.args = {
+    appearance: 'information',
+    heading: "This is the banner's main message.",
+    description: 'This is an optional message supporting the main banner message.',
+    truncateDesc: false,
+    isDismissible: true,
+    isSection: false,
+    hasIcon: true,
+    actionText: 'Action',
+    secondaryActionText: '',
+};
+Banner.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: 'Use `section` to switch to section-banner layout and `hasIcon` to hide/show the leading icon in that layout. Actions render from `actionText` and `secondaryActionText` using `size="xs"`.',
+        },
+    },
+    'web-component': {
+        render: Banner(Banner.args),
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=19320-19572&p=f&t=bkbLW37fKIUtr4Q8-11',
+    },
+};