@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-tabs/stories/pds-tabs.stories.js

@@ -1,18 +1,12 @@
-import { html, render } from 'lit';
-import { withActions } from '@storybook/addon-actions/decorator';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { html } from 'lit';
+
 
 export default {
-  argTypes: extractArgTypes('pds-tabs'),
+
   component: 'pds-tabs',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['pdsTabClick', 'keydown']
-    },
-  },
+  parameters: {},
   title: 'components/Tabs',
-}
+};
 
 const BaseTemplate = (args) => html`
 <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
@@ -25,8 +19,30 @@ const BaseTemplate = (args) => html`
 </pds-tabs>
 `;
 
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  activeTabName: "Dollop",
+  componentId: "primary",
+  variant: "primary",
+  tablistLabel: "Foo",
+}
+
+export const Filter = BaseTemplate.bind({});
+Filter.args = {
+  activeTabName: "Sturdy",
+  componentId: "filter",
+  variant: 'filter',
+  tablistLabel: "Foo",
+}
+
+export const Pill = BaseTemplate.bind({});
+Pill.args = {
+  activeTabName: "Sturdy",
+  componentId: "pill",
+  variant: 'pill',
+}
 const AvailabilityTemplate = (args) => html`
-<div style="background-color: #ddd; padding: 20px;">
+<div style="background-color: var(--pine-color-background-inset-emphasized); padding: var(--pine-dimension-md);">
   <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
     <pds-tab name="monday">Monday</pds-tab>
     <pds-tab name="tuesday">Tuesday</pds-tab>
@@ -38,14 +54,6 @@ const AvailabilityTemplate = (args) => html`
 </div>
 `;
 
-export const Primary = BaseTemplate.bind({});
-Primary.args = {
-  activeTabName: "Dollop",
-  componentId: "primary",
-  variant: "primary",
-  tablistLabel: "Foo",
-}
-
 export const Availability = AvailabilityTemplate.bind({});
 Availability.args = {
   activeTabName: "tuesday",
@@ -54,10 +62,45 @@ Availability.args = {
   tablistLabel: "Foo",
 }
 
-export const Filter = BaseTemplate.bind({});
-Filter.args = {
-  activeTabName: "Sturdy",
-  componentId: "filter",
-  variant: 'filter',
-  tablistLabel: "Foo",
-}
+export const Divider = () => html`
+<pds-tabs active-tab-name="Dollop" component-id="divider" tablist-label="Foo" variant="primary" divider>
+  <pds-tab name="Sturdy">Sturdy</pds-tab>
+  <pds-tab name="Dollop">Dollop</pds-tab>
+  <pds-tab name="Waffle">Waffle</pds-tab>
+  <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
+  <pds-tabpanel name="Dollop">Content Dollop</pds-tabpanel>
+  <pds-tabpanel name="Waffle">Content Waffle</pds-tabpanel>
+</pds-tabs>
+`;
+
+export const Stretch = () => html`
+<div style="block-size: 240px; border: var(--pine-border-width-thin) solid var(--pine-color-border-subtle); display: flex;">
+  <pds-tabs active-tab-name="Dollop" component-id="stretch" tablist-label="Foo" variant="primary" divider stretch>
+    <pds-tab name="Sturdy">Sturdy</pds-tab>
+    <pds-tab name="Dollop">Dollop</pds-tab>
+    <pds-tab name="Waffle">Waffle</pds-tab>
+    <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
+    <pds-tabpanel name="Dollop">
+      <div style="align-items: end; background-color: var(--pine-color-background-muted); block-size: 100%; display: flex;">Composer pinned to the bottom</div>
+    </pds-tabpanel>
+    <pds-tabpanel name="Waffle">Content Waffle</pds-tabpanel>
+  </pds-tabs>
+</div>
+`;
+
+// Navigation mode: set `nav` on pds-tabs and give each pds-tab an `href` (plus
+// optional Turbo props). The strip renders as a <nav> of links with aria-current
+// on the active one — for per-URL tab strips (e.g. deep-linkable page tabs) rather
+// than in-page panels. No pds-tabpanels; the destination URL renders the content.
+//
+// This story exercises every nav-mode prop: the active tab drives a Turbo Frame
+// (turbo-frame/turbo-action), a disabled tab is dropped from tab order, and an
+// external tab opens in a new tab (target="_blank" → rel="noopener noreferrer").
+export const NavTabs = () => html`
+<pds-tabs component-id="nav" tablist-label="Club sections" variant="primary" divider nav>
+  <pds-tab name="chat" href="/clubs/1/chat" active turbo-frame="clubs-body" turbo-action="advance">Chat</pds-tab>
+  <pds-tab name="resources" href="/clubs/1/resources" turbo-frame="clubs-body" turbo-action="advance">Resources</pds-tab>
+  <pds-tab name="members" href="/clubs/1/members" disabled>Members</pds-tab>
+  <pds-tab name="help" href="https://help.example.com/clubs" target="_blank">Help</pds-tab>
+</pds-tabs>
+`;

package/dist/collection/components/pds-text/pds-text.css

@@ -0,0 +1,207 @@
+:host {
+  display: inline;
+}
+
+:host([decoration=underline-dotted]) > * {
+  text-decoration-color: var(--pine-color-text-tertiary);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-thickness: 12%;
+  text-underline-offset: 0.3rem;
+  text-underline-position: under;
+}
+
+:host([decoration=strikethrough]) > * {
+  text-decoration: line-through;
+}
+
+/* stylelint-disable */
+h1 {
+  font: var(--pine-typography-heading-1);
+  letter-spacing: var(--pine-letter-spacing-heading-1);
+}
+
+h2 {
+  font: var(--pine-typography-heading-2);
+  letter-spacing: var(--pine-letter-spacing-heading-2);
+}
+
+h3 {
+  font: var(--pine-typography-heading-3);
+  letter-spacing: var(--pine-letter-spacing-heading-3);
+}
+
+h4 {
+  font: var(--pine-typography-heading-4);
+  letter-spacing: var(--pine-letter-spacing-heading-4);
+}
+
+h5 {
+  font: var(--pine-typography-heading-5);
+  letter-spacing: var(--pine-letter-spacing-heading-5);
+}
+
+h6 {
+  font: var(--pine-typography-heading-6);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+code, em, p, pre, strong {
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
+}
+
+/* stylelint-enable */
+code, pre {
+  font-family: monospace;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+em {
+  font-style: normal;
+}
+
+strong {
+  font-weight: bolder;
+}
+
+:host([truncate]) {
+  display: block;
+  min-width: 0;
+}
+
+:host([truncate]) > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:host([italic]) > * {
+  font-style: italic;
+}
+
+.pds-text {
+  color: var(--color, var(--pine-color-text));
+  margin: var(--pine-dimension-none);
+}
+
+.pds-text--size-2xl {
+  font-size: var(--pine-font-size-body-2xl);
+}
+
+.pds-text--size-xl {
+  font-size: var(--pine-font-size-body-xl);
+}
+
+.pds-text--size-lg {
+  font-size: var(--pine-font-size-body-lg);
+}
+
+.pds-text--size-md {
+  font-size: var(--pine-font-size-body-md);
+}
+
+.pds-text--size-sm {
+  font-size: var(--pine-font-size-body-sm);
+}
+
+.pds-text--size-xs {
+  font-size: var(--pine-font-size-body-xs);
+}
+
+.pds-text--size-2xs {
+  font-size: var(--pine-font-size-body-2xs);
+}
+
+.pds-text--size-h1 {
+  font-size: var(--pine-font-size-heading-1);
+}
+
+.pds-text--size-h2 {
+  font-size: var(--pine-font-size-heading-2);
+}
+
+.pds-text--size-h3 {
+  font-size: var(--pine-font-size-heading-3);
+}
+
+.pds-text--size-h4 {
+  font-size: var(--pine-font-size-heading-4);
+}
+
+.pds-text--size-h5 {
+  font-size: var(--pine-font-size-heading-5);
+}
+
+.pds-text--size-h6 {
+  font-size: var(--pine-font-size-heading-6);
+}
+
+.pds-text--weight-extra-light {
+  font-weight: var(--pine-font-weight-extra-light);
+}
+
+.pds-text--weight-light {
+  font-weight: var(--pine-font-weight-light);
+}
+
+.pds-text--weight-regular {
+  font-weight: var(--pine-font-weight-regular);
+}
+
+.pds-text--weight-medium {
+  font-weight: var(--pine-font-weight-medium);
+}
+
+.pds-text--weight-semibold {
+  font-weight: var(--pine-font-weight-semi-bold);
+}
+
+.pds-text--weight-bold {
+  font-weight: var(--pine-font-weight-bold);
+}
+
+.pds-text--gutter-2xl {
+  margin-block-end: var(--pine-dimension-2xl);
+}
+
+.pds-text--gutter-xl {
+  margin-block-end: var(--pine-dimension-xl);
+}
+
+.pds-text--gutter-lg {
+  margin-block-end: var(--pine-dimension-lg);
+}
+
+.pds-text--gutter-md {
+  margin-block-end: var(--pine-dimension-md);
+}
+
+.pds-text--gutter-sm {
+  margin-block-end: var(--pine-dimension-sm);
+}
+
+.pds-text--gutter-xs {
+  margin-block-end: var(--pine-dimension-xs);
+}
+
+.pds-text--gutter-2xs {
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-text--align-start {
+  text-align: start;
+}
+
+.pds-text--align-center {
+  text-align: center;
+}
+
+.pds-text--align-end {
+  text-align: end;
+}
+
+.pds-text--align-justify {
+  text-align: justify;
+}

package/dist/collection/components/pds-text/pds-text.js

@@ -0,0 +1,328 @@
+import { h } from "@stencil/core";
+import { setColor } from "../../utils/utils";
+import { FOCUSABLE_WRAPPER, flattenedText, setupTruncationTooltip } from "../../utils/truncation-tooltip";
+import { TEXT_SIZES } from "../../utils/types";
+// Re-runs setup for each text bound to its wrapping control, keyed by host, so a truncated
+// text that joins the same control later can take that control's focus away from it.
+const textsUsingWrapper = new WeakMap();
+/**
+ * @part content - The text content container
+ */
+export class PdsText {
+    constructor() {
+        this.truncationCleanup = null;
+        /**
+         * Determines what semantic text tag to render.
+         */
+        this.tag = 'p';
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    validateSize(newValue) {
+        // Skip when the prop is omitted or explicitly cleared (an empty string is a
+        // common "unset" sentinel), or its attribute was removed (Stencil sets the
+        // prop to `null`). Any other unsupported value — including a
+        // whitespace-only string — is a developer mistake worth warning about.
+        if (newValue == null || newValue === '') {
+            return;
+        }
+        if (!TEXT_SIZES.includes(newValue)) {
+            const display = newValue.length > 80 ? `${newValue.slice(0, 80)}…` : newValue;
+            console.warn(`pds-text: invalid size "${display}". Valid values are: ${TEXT_SIZES.join(', ')}.`);
+        }
+    }
+    componentWillLoad() {
+        // Validate the initial value before the first render so the warning precedes
+        // any attempt to apply an unknown size class. @Watch covers later changes.
+        this.validateSize(this.size);
+    }
+    // componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
+    // down. Before the first render there's no contentEl yet, and componentDidLoad binds it.
+    connectedCallback() {
+        if (this.truncate && this.contentEl) {
+            this.initTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        var _a;
+        // Clean up any existing tooltip before setting up a new one
+        this.destroyTruncationTooltip();
+        if (this.contentEl) {
+            const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
+            // A pds-chip with a max width binds its tooltip to the wrapper too.
+            const others = wrapper === null ? [] : wrapper.querySelectorAll('pds-text, pds-chip');
+            // One focus on a shared wrapper would open every clipped text's tooltip at once, so texts sharing one each keep
+            // their own stop, and a text bound before this one joined lets go: this one's focus bubbles to the wrapper too.
+            let sharesWrapper = false;
+            for (let i = 0; i < others.length; i++) {
+                const other = others[i];
+                // The property counts too: setting `truncate` runs setup before the next render reflects the attribute.
+                if (other !== this.el && (other.truncate || other.maxWidth || other.hasAttribute('truncate') || other.hasAttribute('max-width'))) {
+                    sharesWrapper = true;
+                    (_a = textsUsingWrapper.get(other)) === null || _a === void 0 ? void 0 : _a();
+                }
+            }
+            const usesWrapper = wrapper !== null && !sharesWrapper;
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.contentEl,
+                // Not `textContent`: a consumer that wraps its own slot in this text, as `pds-alert` does, holds a
+                // `<slot>` here, which counts as empty and would leave the tooltip with nothing to show.
+                getTooltipText: () => flattenedText(this.el),
+                // A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
+                manageTabIndex: !usesWrapper,
+                focusEl: usesWrapper ? wrapper : this.el,
+            });
+            if (usesWrapper)
+                textsUsingWrapper.set(this.el, () => this.initTruncationTooltip());
+        }
+    }
+    destroyTruncationTooltip() {
+        textsUsingWrapper.delete(this.el);
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
+    }
+    render() {
+        const Tag = this.tag;
+        const typeClasses = `
+      pds-text
+      ${this.align != null && this.align.trim() !== ''
+            ? `pds-text--align-${this.align}`
+            : ''}
+      ${this.gutter != null && this.gutter.trim() !== ''
+            ? `pds-text--gutter-${this.gutter}`
+            : ''}
+      ${this.size != null && this.size.trim() !== ''
+            ? `pds-text--size-${this.size}`
+            : ''}
+      ${this.weight != null && this.weight.trim() !== ''
+            ? `pds-text--weight-${this.weight}`
+            : ''}
+      ${this.decoration != null && this.decoration.trim() !== ''
+            ? `pds-text--decoration-${this.decoration}`
+            : ''}
+    `;
+        return (h(Tag, { key: '3b9efbad7872410a7e07438801ec17382282ab16', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '0784e6aee6ce23f93f0e3c077da5fa3ca944aebb' })));
+    }
+    static get is() { return "pds-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-text.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'justify'",
+                    "resolved": "\"center\" | \"end\" | \"justify\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text alignment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "decoration": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'strikethrough' | 'underline-dotted'",
+                    "resolved": "\"strikethrough\" | \"underline-dotted\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text decoration."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "decoration"
+            },
+            "gutter": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs'",
+                    "resolved": "\"2xl\" | \"2xs\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the bottom margin for the text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gutter"
+            },
+            "italic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set or `true`, the text will be italic."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "italic"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextSizeType",
+                    "resolved": "\"2xl\" | \"2xs\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TextSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::TextSizeType",
+                            "referenceLocation": "TextSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the font size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'extra-light'\n    | 'light'\n    | 'regular'\n    | 'medium'\n    | 'semibold'\n    | 'bold'",
+                    "resolved": "\"bold\" | \"extra-light\" | \"light\" | \"medium\" | \"regular\" | \"semibold\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the font weight."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "weight"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'p'\n    | 'span'\n    | 'code'\n    | 'pre'\n    | 'strong'\n    | 'em'",
+                    "resolved": "\"code\" | \"em\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"pre\" | \"span\" | \"strong\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines what semantic text tag to render."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag",
+                "defaultValue": "'p'"
+            },
+            "truncate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order.\nInside a link or button (including `pds-button`, `pds-link`, `pds-tab`, and\n`pds-dropdown-menu-item`) that holds no other truncated text or `pds-chip` with a\n`max-width`, no tab stop is added; the tooltip appears when that control receives\nkeyboard focus."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "truncate"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "truncate",
+                "methodName": "handleTruncateChange"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }];
+    }
+}