@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/UtilityList/UtilityList.stories.ts

@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./utility-list.twig"
+import { UtilityList as UtilityListType } from "@pnx-mixtape/ids-shape"
+
+import "./utility-list.css"
+import "./Elements/UtilityList"
+
+// Deps.
+import SocialShare from "../SocialShare/social-share.twig"
+import "../Popover/popover.css"
+import "../Popover/Elements/Popover"
+
+/**
+ * The Utility List is a collection of useful page tools.
+ * It requires the `UtilityList` custom element javascript.
+ */
+const meta: Meta<UtilityListType> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    copy: true,
+    print: true,
+    pdf: false,
+    share: SocialShare({
+      facebook: "https://www.facebook.com/sharer.php",
+      linkedin: "https://www.linkedin.com/shareArticle",
+      email: "mailto:",
+    }),
+    horizontal: false,
+  },
+  argTypes: {
+    share: {
+      description: "A [SocialShare](/?path=/docs/component-socialshare--docs) component",
+      table: { type: { summary: "SocialShare" } },
+    },
+    copy: {
+      description: "Adds a 'Copy link' button",
+      table: { defaultValue: { summary: "false" } },
+    },
+    print: {
+      description: "Adds a 'Print page' button",
+      table: { defaultValue: { summary: "false" } },
+    },
+    pdf: {
+      description: "Adds a 'Download PDF' button",
+      table: { defaultValue: { summary: "false" } },
+    },
+    horizontal: {
+      table: { defaultValue: { summary: "false" } },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<UtilityListType>
+
+export const UtilityList: Story = {}
+
+export const Horizontal: Story = {
+  args: {
+    horizontal: true,
+  },
+}
+
+/**
+ * PDF option currently only triggers the Print dialog. It is included so that it can be extended on a project level.
+ */
+export const PDF: Story = {
+  args: {
+    pdf: true,
+  },
+}

package/src/Component/UtilityList/__snapshots__/UtilityList.stories.ts.snap

@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/UtilityList Horizontal smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-utility-list>
+    <nav class="mx-utility-list mx-nav mx-nav--inline"
+         aria-label="Page tools"
+    >
+      <ul>
+        <li>
+          <button data-copy
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--link">
+            </span>
+            <span data-copy-label
+                  class="mx-utility-list__label"
+            >
+              Copy link
+            </span>
+          </button>
+        </li>
+        <li>
+          <button data-print
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--print">
+            </span>
+            <span class="mx-utility-list__label">
+              Print page
+            </span>
+          </button>
+        </li>
+        <li>
+          <mx-popover>
+            <button type="button"
+                    id="unique-0"
+                    class="mx-popover__trigger mx-button mx-button--small mx-button--light"
+                    popovertarget="utility-list-share"
+                    style="anchor-name: --utility-list-share"
+            >
+              <span class="mx-icon mx-icon--share">
+              </span>
+              <span class="mx-utility-list__label">
+                Share this page
+              </span>
+              <span class="mx-icon mx-icon--chevron-down">
+              </span>
+            </button>
+            <div class="mx-popover mx-utility-list__share"
+                 id="utility-list-share"
+                 aria-describedby="unique-0"
+                 style="position-anchor: --utility-list-share"
+                 data-placement="bottom"
+                 popover
+            >
+              <nav class="mx-social-share flex gap--s"
+                   aria-label="Social share buttons"
+              >
+                <a class="mx-link mx-icon mx-icon--only mx-icon--linkedin"
+                   href="https://www.linkedin.com/shareArticle"
+                   target="_blank"
+                >
+                  Share to LinkedIn
+                </a>
+                <a class="mx-link mx-icon mx-icon--only mx-icon--facebook"
+                   href="https://www.facebook.com/sharer.php"
+                   target="_blank"
+                >
+                  Share to Facebook
+                </a>
+                <a class="mx-link mx-icon mx-icon--only mx-icon--email"
+                   href="mailto:"
+                   target="_blank"
+                >
+                  Share via email
+                </a>
+              </nav>
+            </div>
+          </mx-popover>
+        </li>
+      </ul>
+    </nav>
+  </mx-utility-list>
+</div>
+`;
+
+exports[`Component/UtilityList PDF smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-utility-list>
+    <nav class="mx-utility-list mx-nav"
+         aria-label="Page tools"
+    >
+      <ul>
+        <li>
+          <button data-copy
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--link">
+            </span>
+            <span data-copy-label
+                  class="mx-utility-list__label"
+            >
+              Copy link
+            </span>
+          </button>
+        </li>
+        <li>
+          <button data-print
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--print">
+            </span>
+            <span class="mx-utility-list__label">
+              Print page
+            </span>
+          </button>
+        </li>
+        <li>
+          <button data-pdf
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--download">
+            </span>
+            <span class="mx-utility-list__label">
+              Download PDF
+            </span>
+          </button>
+        </li>
+        <li>
+          <mx-popover>
+            <button type="button"
+                    id="unique-0"
+                    class="mx-popover__trigger mx-button mx-button--small mx-button--light"
+                    popovertarget="utility-list-share"
+                    style="anchor-name: --utility-list-share"
+            >
+              <span class="mx-icon mx-icon--share">
+              </span>
+              <span class="mx-utility-list__label">
+                Share this page
+              </span>
+              <span class="mx-icon mx-icon--chevron-down">
+              </span>
+            </button>
+            <div class="mx-popover mx-utility-list__share"
+                 id="utility-list-share"
+                 aria-describedby="unique-0"
+                 style="position-anchor: --utility-list-share"
+                 data-placement="bottom"
+                 popover
+            >
+              <nav class="mx-social-share flex gap--s"
+                   aria-label="Social share buttons"
+              >
+                <a class="mx-link mx-icon mx-icon--only mx-icon--linkedin"
+                   href="https://www.linkedin.com/shareArticle"
+                   target="_blank"
+                >
+                  Share to LinkedIn
+                </a>
+                <a class="mx-link mx-icon mx-icon--only mx-icon--facebook"
+                   href="https://www.facebook.com/sharer.php"
+                   target="_blank"
+                >
+                  Share to Facebook
+                </a>
+                <a class="mx-link mx-icon mx-icon--only mx-icon--email"
+                   href="mailto:"
+                   target="_blank"
+                >
+                  Share via email
+                </a>
+              </nav>
+            </div>
+          </mx-popover>
+        </li>
+      </ul>
+    </nav>
+  </mx-utility-list>
+</div>
+`;
+
+exports[`Component/UtilityList UtilityList smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-utility-list>
+    <nav class="mx-utility-list mx-nav"
+         aria-label="Page tools"
+    >
+      <ul>
+        <li>
+          <button data-copy
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--link">
+            </span>
+            <span data-copy-label
+                  class="mx-utility-list__label"
+            >
+              Copy link
+            </span>
+          </button>
+        </li>
+        <li>
+          <button data-print
+                  type="button"
+                  class="mx-button mx-button--small mx-button--light"
+          >
+            <span class="mx-icon mx-icon--print">
+            </span>
+            <span class="mx-utility-list__label">
+              Print page
+            </span>
+          </button>
+        </li>
+        <li>
+          <mx-popover>
+            <button type="button"
+                    id="unique-0"
+                    class="mx-popover__trigger mx-button mx-button--small mx-button--light"
+                    popovertarget="utility-list-share"
+                    style="anchor-name: --utility-list-share"
+            >
+              <span class="mx-icon mx-icon--share">
+              </span>
+              <span class="mx-utility-list__label">
+                Share this page
+              </span>
+              <span class="mx-icon mx-icon--chevron-down">
+              </span>
+            </button>
+            <div class="mx-popover mx-utility-list__share"
+                 id="utility-list-share"
+                 aria-describedby="unique-0"
+                 style="position-anchor: --utility-list-share"
+                 data-placement="bottom"
+                 popover
+            >
+              <nav class="mx-social-share flex gap--s"
+                   aria-label="Social share buttons"
+              >
+                <a class="mx-link mx-icon mx-icon--only mx-icon--linkedin"
+                   href="https://www.linkedin.com/shareArticle"
+                   target="_blank"
+                >
+                  Share to LinkedIn
+                </a>
+                <a class="mx-link mx-icon mx-icon--only mx-icon--facebook"
+                   href="https://www.facebook.com/sharer.php"
+                   target="_blank"
+                >
+                  Share to Facebook
+                </a>
+                <a class="mx-link mx-icon mx-icon--only mx-icon--email"
+                   href="mailto:"
+                   target="_blank"
+                >
+                  Share via email
+                </a>
+              </nav>
+            </div>
+          </mx-popover>
+        </li>
+      </ul>
+    </nav>
+  </mx-utility-list>
+</div>
+`;

package/src/Component/UtilityList/utility-list.css

@@ -0,0 +1,40 @@
+/**
+ * Utility List
+ */
+
+@layer design-system.defaults {
+  mx-utility-list {
+    display: block;
+
+    &:not(:defined) button:not([popovertarget]) {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+  }
+}
+
+@layer design-system.components {
+  .mx-utility-list {
+    & ul {
+      gap: var(--nav-gap, var(--spacing-xs));
+    }
+
+    &:where(.mx-nav--inline) {
+      gap: var(--inline-nav-gap, 0);
+    }
+  }
+
+  .mx-utility-list__share {
+    --utility-link-color: var(--colour-link);
+
+    min-inline-size: fit-content;
+
+    & a[href] {
+      --link-colour: var(--utility-link-color);
+    }
+
+    & .mx-social-share {
+      justify-content: center;
+    }
+  }
+}

package/src/Component/UtilityList/utility-list.entry.js

@@ -0,0 +1 @@
+import "./Elements/UtilityList"

package/src/Component/UtilityList/utility-list.twig

@@ -0,0 +1,66 @@
+{% set classes = [
+  "mx-utility-list",
+  "mx-nav",
+  horizontal ? 'mx-nav--inline' : null
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set id = id|default('utility-list-share') %}
+{% set name = id ~ '-target' %}
+
+<mx-utility-list>
+  <nav{{ attributes }} aria-label="Page tools">
+    <ul>
+      {% if copy %}
+      <li>
+        <button data-copy type="button" class="mx-button mx-button--small mx-button--light">
+          <span class="mx-icon mx-icon--link"></span>
+          <span data-copy-label class="mx-utility-list__label">Copy link</span>
+        </button>
+      </li>
+      {% endif %}
+      {% if print %}
+        <li>
+          <button data-print type="button" class="mx-button mx-button--small mx-button--light">
+            <span class="mx-icon mx-icon--print"></span>
+            <span class="mx-utility-list__label">Print page</span>
+          </button>
+        </li>
+      {% endif %}
+      {% if pdf %}
+        <li>
+          <button data-pdf type="button" class="mx-button mx-button--small mx-button--light">
+            <span class="mx-icon mx-icon--download"></span>
+            <span class="mx-utility-list__label">Download PDF</span>
+          </button>
+        </li>
+      {% endif %}
+      {% if share is not empty %}
+        <li>
+          <mx-popover>
+            <button
+                type="button"
+                id="{{ name }}"
+                class="mx-popover__trigger mx-button mx-button--small mx-button--light"
+                popovertarget="{{ id }}"
+                style="anchor-name: --{{ id }}"
+            >
+              <span class="mx-icon mx-icon--share"></span>
+              <span class="mx-utility-list__label">Share this page</span>
+              <span class="mx-icon mx-icon--chevron-down"></span>
+            </button>
+            <div
+                class="mx-popover mx-utility-list__share"
+                id="{{ id }}"
+                aria-describedby="{{ name }}"
+                style="position-anchor: --{{ id }}"
+                data-placement="bottom"
+                popover
+            >
+              {{ share }}
+            </div>
+          </mx-popover>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
+</mx-utility-list>

package/src/Form/Checkbox/FormCheckbox.stories.tsx

@@ -16,9 +16,7 @@ export const Single: StoryObj<typeof SingleCheckbox> = {
 }
 
 export const CheckboxGroup: StoryObj<typeof FormCheckbox> = {
-  render: ({ children, ...args }) => (
-    <FormCheckbox {...args}>{children}</FormCheckbox>
-  ),
+  render: ({ children, ...args }) => <FormCheckbox {...args}>{children}</FormCheckbox>,
   args: {
     label: "Checkbox group",
     children: (

package/src/Form/Checkbox/FormCheckbox.tsx

@@ -1,11 +1,4 @@
-import {
-  createContext,
-  JSX,
-  PropsWithChildren,
-  use,
-  useId,
-  useRef,
-} from "react"
+import { createContext, JSX, PropsWithChildren, use, useId, useRef } from "react"
 import {
   AriaCheckboxGroupItemProps,
   AriaCheckboxProps,
@@ -30,11 +23,7 @@ type FormCheckboxProps = CheckboxGroupProps &
     label: string
   }
 
-const FormCheckbox = ({
-  label,
-  children,
-  ...props
-}: FormCheckboxProps): JSX.Element => {
+const FormCheckbox = ({ label, children, ...props }: FormCheckboxProps): JSX.Element => {
   const state = useCheckboxGroupState(props)
   const { groupProps, labelProps } = useCheckboxGroup(props, state)
 
@@ -71,12 +60,7 @@ const Checkbox = ({
 
   return (
     <div className={classes}>
-      <input
-        id={id}
-        ref={ref}
-        aria-invalid={status === FormStatus.INVALID}
-        {...inputProps}
-      />
+      <input id={id} ref={ref} aria-invalid={status === FormStatus.INVALID} {...inputProps} />
       <label htmlFor={id}>{children}</label>
     </div>
   )
@@ -107,12 +91,7 @@ const SingleCheckbox = ({
 
   return (
     <div className={classes}>
-      <input
-        id={id}
-        ref={ref}
-        aria-invalid={status === FormStatus.INVALID}
-        {...inputProps}
-      />
+      <input id={id} ref={ref} aria-invalid={status === FormStatus.INVALID} {...inputProps} />
       <label htmlFor={id}>{children}</label>
     </div>
   )

package/src/Form/Checkbox/__snapshots__/Checkbox.stories.ts.snap

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Checkbox Checkbox smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-checkbox ">
+  <div class="mx-checkbox">
     <input id="single-checkbox"
            type="checkbox"
            name="terms"
@@ -17,7 +17,7 @@ exports[`Form/Checkbox Checkbox smoke-test 1`] = `
 
 exports[`Form/Checkbox Checked smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-checkbox ">
+  <div class="mx-checkbox">
     <input id="single-checkbox"
            type="checkbox"
            name="terms"

package/src/Form/Description/Description.stories.ts

@@ -8,8 +8,7 @@ const meta: Meta<FormDescriptionType> = {
   component: Component,
   args: {
     id: "description",
-    description:
-      "Help text that provides additional information about the field.",
+    description: "Help text that provides additional information about the field.",
   },
 }
 

package/src/Form/Description/FormStatus.stories.ts

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./form-status.twig"
 import "../form.css"
-import {
-  FormStatus as FormStatusType,
-  FormStatusTypes,
-} from "@pnx-mixtape/ids-shape"
+import { FormStatus as FormStatusType, FormStatusTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<FormStatusType> = {
   tags: ["autodocs", "ids-mvp"],

package/src/Form/Description/__snapshots__/Description.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Description Description smoke-test 1`] = `
 <div class="mx-page default">

package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Description Description smoke-test 1`] = `
 <div id="mix-label-help"

package/src/Form/Description/__snapshots__/FormStatus.stories.ts.snap

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Description/FormStatus Message smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-error-message "
+  <div class="mx-error-message"
        id="status-message"
        role="tooltip"
   >
@@ -13,7 +13,7 @@ exports[`Form/Description/FormStatus Message smoke-test 1`] = `
 
 exports[`Form/Description/FormStatus Success smoke-test 1`] = `
 <div class="mx-page default">
-  <div class=" mx-success-message"
+  <div class="mx-success-message"
        id="status-message"
        role="tooltip"
   >

package/src/Form/Form/Form.tsx

@@ -2,8 +2,6 @@ import { JSX, ComponentPropsWithoutRef } from "react"
 
 type FormProps = ComponentPropsWithoutRef<"form">
 
-const Form = ({ children, ...props }: FormProps): JSX.Element => (
-  <form {...props}>{children}</form>
-)
+const Form = ({ children, ...props }: FormProps): JSX.Element => <form {...props}>{children}</form>
 
 export default Form

package/src/Form/Form/__snapshots__/Form.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form Form smoke-test 1`] = `
 <form>

package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/FormTitle FormTitle smoke-test 1`] = `
 <h2 class="mx-title"

package/src/Form/FormItem/FormItem.stories.ts

@@ -5,11 +5,7 @@ import FormStatus from "../Description/form-status.twig"
 import Label from "../Label/label.twig"
 import TextInput from "../TextInput/input-text.twig"
 import "../form.css"
-import {
-  FormItem as FormItemType,
-  FormStatusTypes,
-  InputTypeTypes,
-} from "@pnx-mixtape/ids-shape"
+import { FormItem as FormItemType, FormStatusTypes, InputTypeTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<FormItemType> = {
   tags: ["autodocs", "ids-mvp"],
@@ -22,8 +18,7 @@ const meta: Meta<FormItemType> = {
     }),
     descriptionEnd: FormDescription({
       id: "form-item",
-      description:
-        "Help text that provides additional information about the field.",
+      description: "Help text that provides additional information about the field.",
     }),
     fields: TextInput({
       id: "form-item",
@@ -109,8 +104,7 @@ export const DescriptionBefore: Story = {
     descriptionEnd: null,
     descriptionStart: FormDescription({
       id: "form-item",
-      description:
-        "Help text that provides additional information about the field.",
+      description: "Help text that provides additional information about the field.",
     }),
   },
 }