@xplortech/apollo-core 2.5.0 → 2.7.0

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

@@ -0,0 +1,385 @@
+const escapeHtmlAttribute = (value) => value
+    .replace(/&/g, '&')
+    .replace(/"/g, '"')
+    .replace(/'/g, ''')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+const optionalAttr = (name, value) => (value === null || value === void 0 ? void 0 : value.trim()) ? ` ${name}="${escapeHtmlAttribute(value)}"` : '';
+const renderWebComponent = (args) => {
+    var _a, _b, _c;
+    const attrs = [
+        args.actionLayout ? `action-layout="${args.actionLayout}"` : '',
+        args.anchorPosition ? `anchor-position="${args.anchorPosition}"` : '',
+        args.currentStep != null ? `current-step="${args.currentStep}"` : '',
+        args.isDismissible != null ? `is-dismissible="${args.isDismissible}"` : '',
+        args.isOpen != null ? `is-open="${args.isOpen}"` : '',
+        args.primaryActionLabel
+            ? `primary-action-label="${escapeHtmlAttribute(args.primaryActionLabel)}"`
+            : '',
+        args.secondaryActionLabel
+            ? `secondary-action-label="${escapeHtmlAttribute(args.secondaryActionLabel)}"`
+            : '',
+        args.showActions != null ? `show-actions="${args.showActions}"` : '',
+        args.showImage != null ? `show-image="${args.showImage}"` : '',
+        args.showSteps != null ? `show-steps="${args.showSteps}"` : '',
+        args.totalSteps != null ? `total-steps="${args.totalSteps}"` : '',
+        ((_a = args.heading) === null || _a === void 0 ? void 0 : _a.trim()) ? `heading="${escapeHtmlAttribute(args.heading)}"` : '',
+        ((_b = args.body) === null || _b === void 0 ? void 0 : _b.trim()) ? `body="${escapeHtmlAttribute(args.body)}"` : '',
+        ((_c = args.target) === null || _c === void 0 ? void 0 : _c.trim()) ? `target="${escapeHtmlAttribute(args.target)}"` : '',
+    ]
+        .filter(Boolean)
+        .join('\n    ');
+    return `<xpl-spotlight
+    ${attrs}
+></xpl-spotlight>`;
+};
+const renderHtml = (args) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const anchorPos = (_a = args.anchorPosition) !== null && _a !== void 0 ? _a : 'top-left';
+    const actionLayout = (_b = args.actionLayout) !== null && _b !== void 0 ? _b : 'default';
+    const showImage = args.showImage !== false;
+    const showActions = args.showActions !== false;
+    const showSteps = args.showSteps !== false;
+    const isDismissible = args.isDismissible !== false;
+    const isSingle = actionLayout === 'single';
+    const currentStep = (_c = args.currentStep) !== null && _c !== void 0 ? _c : 1;
+    const totalSteps = (_d = args.totalSteps) !== null && _d !== void 0 ? _d : 1;
+    const dismissHtml = isDismissible
+        ? `
+  <div class="xpl-spotlight__dismiss">
+    <button type="button" class="xpl-button xpl-button--secondary xpl-button--sm xpl-button--icon-only" aria-label="Dismiss tour step">
+      <xpl-icon icon="xmark" size="16"></xpl-icon>
+    </button>
+  </div>`
+        : '';
+    const imageHtml = showImage
+        ? `
+    <div class="xpl-spotlight__image-container xpl-spotlight__image-container--empty">
+      <div class="xpl-spotlight__image-placeholder" aria-hidden="true">
+        <xpl-icon icon="photo" size="24"></xpl-icon>
+        <xpl-icon icon="video" size="24"></xpl-icon>
+      </div>
+    </div>`
+        : '';
+    const headingHtml = ((_e = args.heading) === null || _e === void 0 ? void 0 : _e.trim())
+        ? `
+        <span class="xpl-spotlight__title">${escapeHtmlAttribute(args.heading)}</span>`
+        : '';
+    const bodyHtml = ((_f = args.body) === null || _f === void 0 ? void 0 : _f.trim())
+        ? `
+        <p class="xpl-spotlight__body">${escapeHtmlAttribute(args.body)}</p>`
+        : '';
+    const secondaryBtn = !isSingle
+        ? `
+          <button type="button" class="xpl-button xpl-button--secondary xpl-button--default">
+            ${escapeHtmlAttribute((_g = args.secondaryActionLabel) !== null && _g !== void 0 ? _g : 'Back')}
+          </button>`
+        : '';
+    const stepLabel = showSteps && !isSingle
+        ? `
+        <span class="xpl-spotlight__step-text">${currentStep} of ${totalSteps}</span>`
+        : '';
+    const primaryBtn = `
+          <button type="button" class="xpl-button xpl-button--primary xpl-button--default">
+            ${escapeHtmlAttribute((_h = args.primaryActionLabel) !== null && _h !== void 0 ? _h : 'Next')}
+          </button>`;
+    const actionsHtml = showActions
+        ? `
+      <div class="xpl-spotlight__actions xpl-spotlight__actions--${isSingle ? 'single' : 'dual'}${showSteps ? ' xpl-spotlight__actions--with-steps' : ''}">
+        <div class="xpl-spotlight__action-slot xpl-spotlight__action-slot--secondary">${secondaryBtn}
+        </div>${stepLabel}
+        <div class="xpl-spotlight__action-slot xpl-spotlight__action-slot--primary">${primaryBtn}
+        </div>
+      </div>`
+        : '';
+    const ariaLabel = ((_j = args.heading) === null || _j === void 0 ? void 0 : _j.trim()) ? '' : ' aria-label="Tour step"';
+    return `<div class="xpl-spotlight xpl-spotlight--${anchorPos}${showActions ? ` xpl-spotlight--action-layout-${actionLayout}` : ''}${!showImage ? ' xpl-spotlight--no-image' : ''} xpl-spotlight--visible"
+     role="dialog" aria-modal="false"${ariaLabel} tabindex="-1">${dismissHtml}
+  <button type="button" class="xpl-spotlight__target" aria-label="Spotlight indicator">
+    <div class="xpl-spotlight__target-outer"></div>
+    <div class="xpl-spotlight__target-inner"></div>
+  </button>
+  <div class="xpl-spotlight__frame">${imageHtml}
+    <div class="xpl-spotlight__content">
+      <div class="xpl-spotlight__header">${headingHtml}${bodyHtml}
+      </div>${actionsHtml}
+    </div>
+  </div>
+</div>`;
+};
+export default {
+    title: 'Components/Spotlight',
+    component: 'xpl-spotlight',
+    argTypes: {
+        showActions: {
+            control: 'boolean',
+            description: 'Whether to show the actions row (primary / secondary and optional step counter).',
+        },
+        actionLayout: {
+            options: ['default', 'dual', 'single'],
+            control: { type: 'select' },
+            description: 'Footer action layout. `default` and `dual` render Back/Next; `single` renders one primary CTA.',
+            if: { arg: 'showActions' },
+        },
+        anchorPosition: {
+            options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+            control: { type: 'select' },
+            description: 'Which corner of the card the anchor dot appears on.',
+        },
+        body: {
+            control: 'text',
+            description: 'Body copy when the `body` slot has no slotted content. Whitespace-only values are treated as empty.',
+        },
+        currentStep: {
+            control: { type: 'number', min: 1 },
+            description: 'Current step index (1-based). Used with `totalSteps` for the step label.',
+        },
+        heading: {
+            control: 'text',
+            description: 'Heading when the `title` slot has no slotted content. Whitespace-only values are treated as empty.',
+        },
+        isDismissible: {
+            control: 'boolean',
+            description: 'Whether to show the dismiss (close) control.',
+        },
+        isOpen: {
+            control: 'boolean',
+            description: 'Controls whether the spotlight is rendered. When false the host stays in the DOM but the UI is hidden.',
+        },
+        primaryActionLabel: {
+            control: 'text',
+            description: 'Label for the default primary action button.',
+        },
+        secondaryActionLabel: {
+            control: 'text',
+            description: 'Label for the default secondary action button.',
+        },
+        showImage: {
+            control: 'boolean',
+            description: 'When true the media region is shown (slotted content or built-in placeholder). When false the entire media block is hidden.',
+        },
+        showSteps: {
+            control: 'boolean',
+            description: 'Whether to show the step counter and apply step-based disabled state to Back/Next.',
+        },
+        target: {
+            control: 'text',
+            description: 'CSS selector for the element this spotlight anchors to via Floating UI. Invalid selectors fall back to `anchorPosition`.',
+        },
+        totalSteps: {
+            control: { type: 'number', min: 1 },
+            description: 'Total number of steps (1-based upper bound). Used with `currentStep` for the step label.',
+        },
+    },
+};
+export const Spotlight = ({ actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showActions, showImage, showSteps, target, totalSteps, }) => `
+    <div class="p-16">
+        <xpl-spotlight
+            action-layout="${actionLayout}"
+            anchor-position="${anchorPosition}"
+            current-step="${currentStep}"
+            is-dismissible="${isDismissible}"
+            is-open="${isOpen}"
+            primary-action-label="${escapeHtmlAttribute(primaryActionLabel)}"
+            secondary-action-label="${escapeHtmlAttribute(secondaryActionLabel)}"
+            show-actions="${showActions}"
+            show-image="${showImage}"
+            show-steps="${showSteps}"
+            total-steps="${totalSteps}"
+            ${optionalAttr('heading', heading)}
+            ${optionalAttr('body', body)}
+            ${optionalAttr('target', target)}
+        ></xpl-spotlight>
+    </div>
+`;
+Spotlight.args = {
+    showActions: true,
+    actionLayout: 'default',
+    anchorPosition: 'top-left',
+    body: 'Copy about the feature and/or functionality the dot is pointing to.',
+    currentStep: 2,
+    heading: 'Tour Title',
+    isDismissible: true,
+    isOpen: true,
+    primaryActionLabel: 'Next',
+    secondaryActionLabel: 'Back',
+    showImage: true,
+    showSteps: true,
+    target: '',
+    totalSteps: 5,
+};
+Spotlight.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: 'Default spotlight with all controls. Adjust `actionLayout`, `anchorPosition`, step navigation, and visibility props to explore all variants.',
+        },
+    },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=12173-9359&p=f&m=dev',
+    },
+    'web-component': {
+        render: renderWebComponent(Spotlight.args),
+    },
+    html: {
+        render: renderHtml(Spotlight.args),
+    },
+};
+const MEDIA_SLOT_HTML = `<div slot="image" class="w-full h-full">
+                <video
+                    class="w-full h-full object-cover block"
+                    autoplay
+                    loop
+                    muted
+                    playsinline
+                    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+                ></video>
+            </div>`;
+export const WithMediaSlot = ({ showActions, actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showImage, showSteps, target, totalSteps, }) => `
+    <div class="p-16">
+        <xpl-spotlight
+            action-layout="${actionLayout}"
+            anchor-position="${anchorPosition}"
+            current-step="${currentStep}"
+            is-dismissible="${isDismissible}"
+            is-open="${isOpen}"
+            primary-action-label="${escapeHtmlAttribute(primaryActionLabel)}"
+            secondary-action-label="${escapeHtmlAttribute(secondaryActionLabel)}"
+            show-actions="${showActions}"
+            show-image="${showImage}"
+            show-steps="${showSteps}"
+            total-steps="${totalSteps}"
+            ${optionalAttr('heading', heading)}
+            ${optionalAttr('body', body)}
+            ${optionalAttr('target', target)}
+        >
+            ${MEDIA_SLOT_HTML}
+        </xpl-spotlight>
+    </div>
+`;
+WithMediaSlot.args = {
+    showActions: true,
+    actionLayout: 'default',
+    anchorPosition: 'top-left',
+    body: 'Drag and drop or click to browse — we support images, videos, and PDFs.',
+    currentStep: 1,
+    heading: 'Upload your first file',
+    isDismissible: true,
+    isOpen: true,
+    primaryActionLabel: 'Next',
+    secondaryActionLabel: 'Back',
+    showImage: true,
+    showSteps: true,
+    target: '',
+    totalSteps: 3,
+};
+WithMediaSlot.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: 'Spotlight with custom media content via the `image` slot. Any HTML can be slotted — images, videos, illustrations, or animated previews. When the slot is populated the built-in placeholder is automatically replaced.',
+        },
+    },
+    'web-component': {
+        render: `<xpl-spotlight
+    heading="${escapeHtmlAttribute(WithMediaSlot.args.heading)}"
+    body="${escapeHtmlAttribute(WithMediaSlot.args.body)}"
+    current-step="${WithMediaSlot.args.currentStep}"
+    total-steps="${WithMediaSlot.args.totalSteps}"
+>
+    ${MEDIA_SLOT_HTML}
+</xpl-spotlight>`,
+    },
+    html: {
+        render: renderHtml({
+            heading: WithMediaSlot.args.heading,
+            body: WithMediaSlot.args.body,
+            currentStep: WithMediaSlot.args.currentStep,
+            totalSteps: WithMediaSlot.args.totalSteps,
+        }),
+    },
+};
+const TARGET_TOGGLE_ID = 'spotlight-target-toggle-btn';
+const TARGET_TOGGLE_SPOTLIGHT_ID = 'spotlight-target-toggle';
+export const TargetClickToggle = ({ actionLayout, anchorPosition, body, currentStep, heading, isDismissible, isOpen, primaryActionLabel, secondaryActionLabel, showActions, showImage, showSteps, totalSteps, }) => `
+    <div style="position: relative; padding: 80px 340px; min-height: 420px;">
+        <xpl-button id="${TARGET_TOGGLE_ID}">Feature settings</xpl-button>
+
+        <xpl-spotlight
+            id="${TARGET_TOGGLE_SPOTLIGHT_ID}"
+            target="#${TARGET_TOGGLE_ID}"
+            action-layout="${actionLayout}"
+            anchor-position="${anchorPosition}"
+            current-step="${currentStep}"
+            is-dismissible="${isDismissible}"
+            is-open="${isOpen}"
+            primary-action-label="${escapeHtmlAttribute(primaryActionLabel)}"
+            secondary-action-label="${escapeHtmlAttribute(secondaryActionLabel)}"
+            show-actions="${showActions}"
+            show-image="${showImage}"
+            show-steps="${showSteps}"
+            total-steps="${totalSteps}"
+            ${optionalAttr('heading', heading)}
+            ${optionalAttr('body', body)}
+        ></xpl-spotlight>
+
+        <script>
+            (function () {
+                var spotlight = document.getElementById('${TARGET_TOGGLE_SPOTLIGHT_ID}');
+                if (!spotlight || spotlight.__targetToggleBound) return;
+                spotlight.__targetToggleBound = true;
+
+                spotlight.addEventListener('targetClick', function () {
+                    var open = spotlight.getAttribute('is-open');
+                    spotlight.setAttribute('is-open', open === 'true' ? 'false' : 'true');
+                });
+
+                spotlight.addEventListener('dismiss', function () {
+                    spotlight.setAttribute('is-open', 'false');
+                });
+
+                spotlight.addEventListener('primaryAction', function () {
+                    spotlight.setAttribute('is-open', 'false');
+                });
+            })();
+        </script>
+    </div>
+`;
+TargetClickToggle.args = {
+    showActions: true,
+    actionLayout: 'single',
+    anchorPosition: 'bottom-right',
+    body: 'Click this button to open feature settings. We just shipped inline editing — try it out!',
+    currentStep: 1,
+    heading: 'New: Quick Settings',
+    isDismissible: true,
+    isOpen: false,
+    primaryActionLabel: 'Got it',
+    secondaryActionLabel: 'Back',
+    showImage: false,
+    showSteps: false,
+    target: `#${TARGET_TOGGLE_ID}`,
+    totalSteps: 1,
+};
+TargetClickToggle.parameters = {
+    layout: 'padded',
+    docs: {
+        description: {
+            story: [
+                'Demonstrates the **target-only** mode and `targetClick` event.',
+                '',
+                'The spotlight starts with `is-open="false"` and `target` pointing to the button.',
+                'Only the pulsing dot indicator is rendered, anchored to the button via Floating UI.',
+                'Clicking the dot emits `targetClick` — the handler toggles `is-open`.',
+                'Dismissing or completing the action closes the card back to dot-only mode.',
+            ].join('\n'),
+        },
+    },
+    'web-component': {
+        render: renderWebComponent(TargetClickToggle.args),
+    },
+    html: {
+        render: renderHtml(TargetClickToggle.args),
+    },
+};