@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/Filters/FilterItem.stories.ts

@@ -0,0 +1,180 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./filter-item.twig"
+import "./Elements/Filters"
+import "./filters.css"
+import { FilterItem as FilterItemType, InputTypeTypes } from "@pnx-mixtape/ids-shape"
+
+// Deps.
+import Label from "../../Form/Label/label.twig"
+import TextInput from "../../Form/TextInput/input-text.twig"
+import InputCheckbox from "../../Form/Checkbox/input-checkbox.twig"
+import FormDescription from "../../Form/Description/form-description.twig"
+
+// css
+import "../../Form/form.css"
+import "../Accordion/accordion.css"
+
+/**
+ * Filter Items have some options that only work in the parent Filter context (requires their JS).
+ */
+const meta: Meta<FilterItemType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    id: "filter-keywords",
+    label: Label({
+      id: "filter-keywords",
+      title: "Keywords",
+    }),
+    fields: TextInput({
+      id: "filter-keywords",
+      type: InputTypeTypes.TEXT,
+      name: "example-keywords",
+      hasDescription: true,
+    }),
+    descriptionStart: FormDescription({
+      id: "filter-keywords",
+      description: "Search by keywords",
+    }),
+  },
+  argTypes: {
+    id: {
+      description: "The FilterItem id.",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    label: {
+      description:
+        "Optional [Label](/?path=/docs/form-label--docs) component., should be ommited if `collapsible` is set in favour of setting the input's `aria-label`.",
+      control: "text",
+      table: {
+        type: { summary: "Label" },
+        subcategory: "FilterItem content",
+      },
+    },
+    fields: {
+      description:
+        "List of FormInput (`FormText | FormTextArea | FormSelect | FormControl`) elements.",
+      control: "text",
+      table: {
+        type: { summary: "FormInput[]" },
+        subcategory: "FilterItem content",
+      },
+    },
+    descriptionStart: {
+      description: "Optional `FormDescription` object, displayed above the fields.",
+      control: "text",
+      table: {
+        type: { summary: "FormDescription" },
+        subcategory: "FilterItem content",
+      },
+    },
+    descriptionEnd: {
+      description: "Optional `FormDescription` object, displayed after the fields.",
+      control: "text",
+      table: {
+        type: { summary: "FormDescription" },
+        subcategory: "FilterItem content",
+      },
+    },
+    as: {
+      description: "Optionally create a fieldset wrapper, for checkboxes and radio fields.",
+      options: ["div, fieldset"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "div" },
+      },
+    },
+    shownItems: {
+      description:
+        "Collapse the list of fields into an initially visible list, and add a 'show all' toggle. Useful for large numbers of checkboxes/radios.",
+      type: "number",
+    },
+    // @ts-expect-error The controls follow the shape
+    "collapsible.title": {
+      description:
+        "When set the FilterItem becomes an accordion, this defines the Accordion title.",
+      type: "string",
+      table: {
+        subcategory: "Collapsible options",
+      },
+    },
+    "collapsible.counter": {
+      description: "Displays the counter in the Accordion title.",
+      type: "boolean",
+      table: {
+        subcategory: "Collapsible options",
+      },
+      if: { arg: "collapsible.title", truthy: true },
+    },
+    "collapsible.open": {
+      description: "Sets the Accordion to be open by default.",
+      type: "boolean",
+      table: {
+        subcategory: "Collapsible options",
+      },
+      if: { arg: "collapsible.title", truthy: true },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<FilterItemType>
+
+export const Filters: Story = {}
+
+/**
+ * Collapse into an Accordion. See [Filters example](/?path=/docs/component-filters--docs#collapsible-counter-18) for counter.
+ */
+export const Collapsible: Story = {
+  args: {
+    collapsible: {
+      title: "Categories",
+      counter: true,
+      open: true,
+    },
+    label: null,
+    descriptionStart: null,
+    id: "filter-categories",
+    as: "fieldset",
+    fields: [
+      InputCheckbox({
+        id: "category-news",
+        name: "categories",
+        label: "News",
+        value: "news",
+        checked: true,
+      }),
+      InputCheckbox({
+        id: "category-media",
+        name: "categories",
+        label: "Media Releases",
+        value: "media",
+        checked: true,
+      }),
+      InputCheckbox({
+        id: "category-publications",
+        name: "categories",
+        label: "Publications",
+        value: "publications",
+      }),
+    ],
+  },
+}
+
+/**
+ * Requires the parent Filter context to properly hide extra items. See [Filters example](/?path=/docs/component-filters--docs#collapsible-counter-18).
+ */
+export const ShownItems: Story = {
+  args: {
+    ...Collapsible.args,
+    collapsible: null,
+    label: Label({
+      id: "filter-categories",
+      title: "Categories",
+    }),
+    shownItems: 2,
+  },
+}

package/src/Component/Filters/Filters.stories.ts

@@ -3,11 +3,7 @@ import Component from "./filters.twig"
 import FilterItem from "./filter-item.twig"
 import "./Elements/Filters"
 import "./filters.css"
-import {
-  ButtonModifiers,
-  Filters as FiltersType,
-  InputTypeTypes,
-} from "@pnx-mixtape/ids-shape"
+import { ButtonModifiers, Filters as FiltersType, InputTypeTypes } from "@pnx-mixtape/ids-shape"
 
 // Deps.
 import Label from "../../Form/Label/label.twig"
@@ -20,12 +16,18 @@ import "../../Form/form.css"
 import "../Accordion/accordion.css"
 import "../Tag/tag.css"
 
+/**
+ * A Filters form.
+ * Requires the `Filters` element javascript for all features to work.
+ */
 const meta: Meta<FiltersType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
     title: "Filters",
     action: "#",
+    collapsible: false,
+    counter: false,
     direction: "down",
     items: [
       FilterItem({
@@ -79,17 +81,81 @@ const meta: Meta<FiltersType> = {
         as: "submit",
         title: "Apply filters",
         modifiers: [ButtonModifiers.DARK],
-        disabled: true,
       }),
       Button({
         as: "reset",
         title: "Clear all filters",
         modifiers: [ButtonModifiers.LIGHT],
-        disabled: true,
       }),
     ],
   },
-  argTypes: {},
+  argTypes: {
+    title: {
+      description: "The Filters title (used as the Accordion title when collapsed)",
+      table: {
+        defaultValue: { summary: "Filters" },
+        subcategory: "Filter content",
+      },
+    },
+    action: {
+      description: "The form action",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    collapsible: {
+      description: "Collapse Filters into an Accordion on mobile.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+        subcategory: "Collapsible options",
+      },
+    },
+    counter: {
+      description: "Display the counter on the collapsed Accordion.",
+      type: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+        subcategory: "Collapsible options",
+      },
+      if: { arg: "collapsible", truthy: true },
+    },
+    direction: {
+      description: "When collapsed, set the direction that the filter should open from.",
+      options: ["down", "right"],
+      control: "radio",
+      table: {
+        defaultValue: { summary: "down" },
+        subcategory: "Collapsible options",
+      },
+      if: { arg: "collapsible", truthy: true },
+    },
+    actions: {
+      description: "The submit/reset [Buttons](/?path=/docs/atom-button--docs).",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "Button[]" },
+        subcategory: "Filter content",
+      },
+    },
+    items: {
+      description: "The list of [FilterItems](/?path=/docs/component-filters-filteritem--docs).",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "FilterItem[]" },
+        subcategory: "Filter content",
+      },
+    },
+  },
 }
 
 export default meta
@@ -97,6 +163,9 @@ type Story = StoryObj<FiltersType>
 
 export const Filters: Story = {}
 
+/**
+ * Collapsed on mobile with a counter of selected items.
+ */
 export const CollapsibleCounter: Story = {
   args: {
     collapsible: true,
@@ -157,6 +226,9 @@ export const CollapsibleCounter: Story = {
   },
 }
 
+/**
+ * Collapsed on mobile opening from the right.
+ */
 export const CollapsibleRight: Story = {
   args: {
     collapsible: true,
@@ -212,6 +284,9 @@ export const CollapsibleRight: Story = {
   },
 }
 
+/**
+ * Instant is currently just an example without a submit button, where some custom javascript handles dynamically submitting (eg. ajax).
+ */
 export const Instant: Story = {
   args: {
     instant: true,

package/src/Component/Filters/__snapshots__/FilterItem.stories.ts.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Component/Filters/FilterItem Collapsible smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-accordion>
+    <details class="mx-accordion mx-filter-item"
+             id="filter-categories-container"
+             open
+    >
+      <summary class="mx-accordion__toggle">
+        Categories
+        <span class="mx-tag"
+              data-counter
+        >
+        </span>
+        <span class="mx-icon mx-icon--chevron-down"
+              aria-hidden="true"
+        >
+        </span>
+      </summary>
+      <fieldset class="mx-form-item mx-fieldset mx-accordion__content">
+        <div class="mx-checkbox">
+          <input id="category-news"
+                 type="checkbox"
+                 name="categories"
+                 value="news"
+                 checked="checked"
+          >
+          <label for="category-news">
+            News
+          </label>
+        </div>
+        <div class="mx-checkbox">
+          <input id="category-media"
+                 type="checkbox"
+                 name="categories"
+                 value="media"
+                 checked="checked"
+          >
+          <label for="category-media">
+            Media Releases
+          </label>
+        </div>
+        <div class="mx-checkbox">
+          <input id="category-publications"
+                 type="checkbox"
+                 name="categories"
+                 value="publications"
+          >
+          <label for="category-publications">
+            Publications
+          </label>
+        </div>
+      </fieldset>
+    </details>
+  </mx-accordion>
+</div>
+`;
+
+exports[`Component/Filters/FilterItem Filters smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-form-item mx-filter-item">
+    <label class="mx-label"
+           for="filter-keywords"
+    >
+      Keywords
+    </label>
+    <div class="mx-description"
+         id="unique-0"
+         role="tooltip"
+    >
+      Search by keywords
+    </div>
+    <input class="mx-input__text"
+           id="filter-keywords"
+           name="example-keywords"
+           type="text"
+           value
+           aria-describedby="unique-0"
+    >
+  </div>
+</div>
+`;
+
+exports[`Component/Filters/FilterItem ShownItems smoke-test 1`] = `
+<div class="mx-page default">
+  <fieldset class="mx-form-item mx-fieldset mx-filter-item">
+    <label class="mx-label"
+           for="filter-categories"
+    >
+      Categories
+    </label>
+    <div class="mx-checkbox">
+      <input id="category-news"
+             type="checkbox"
+             name="categories"
+             value="news"
+             checked="checked"
+      >
+      <label for="category-news">
+        News
+      </label>
+    </div>
+    <div class="mx-checkbox">
+      <input id="category-media"
+             type="checkbox"
+             name="categories"
+             value="media"
+             checked="checked"
+      >
+      <label for="category-media">
+        Media Releases
+      </label>
+    </div>
+    <div data-hide>
+      <div class="mx-checkbox">
+        <input id="category-publications"
+               type="checkbox"
+               name="categories"
+               value="publications"
+        >
+        <label for="category-publications">
+          Publications
+        </label>
+      </div>
+    </div>
+    <button data-show
+            class="mx-button mx-button--light"
+            type="button"
+    >
+      Show all (3)
+    </button>
+  </fieldset>
+</div>
+`;