@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/src/Component/Navigation/_navigation-dropdown.css

@@ -4,6 +4,7 @@
 
 @layer design-system.components {
   .mx-nav--dropdown {
+    --outline-offset: -1px;
     --nav-active-underline: none;
 
     margin-block: var(--spacing-m);
@@ -40,28 +41,21 @@
           }
         }
       }
-
-      &:focus-visible {
-        outline-offset: -2px;
-      }
     }
 
     & li > ul {
-      transition:
-        0.2s opacity var(--ease),
-        0.2s visibility var(--ease);
+      display: grid;
+      opacity: 1;
 
-      &[inert] {
-        block-size: 0;
+      @starting-style {
         opacity: 0;
-        visibility: hidden;
-        transition:
-          0.2s opacity var(--ease),
-          0.2s visibility var(--ease);
+        display: grid;
+      }
 
-        @media (--global-nav-up) {
-          block-size: auto;
-        }
+      &[inert] {
+        opacity: 0;
+        display: none;
+        transition-duration: 0.4s;
       }
     }
 
@@ -99,7 +93,7 @@
     }
 
     & .mx-nav__level-2 {
-      display: block;
+      display: grid;
       position: relative;
       inset-inline-start: 0;
       inline-size: 100%;

package/src/Component/Pagination/Components/PaginationContext.tsx

@@ -1,9 +1,9 @@
-/* eslint-disable consistent-return, no-unused-vars */
+/* eslint-disable consistent-return */
 import {
   JSX,
   PropsWithChildren,
   RefObject,
-  useContext,
+  use,
   createContext,
   useMemo,
   useRef,
@@ -27,7 +27,7 @@ type PaginationContextValues = {
 }
 
 const PaginationContext = createContext<PaginationContextValues>(null)
-export const usePagination = () => useContext(PaginationContext)
+export const usePagination = () => use(PaginationContext)
 
 type PaginationProviderProps = PropsWithChildren & {
   total: number
@@ -178,11 +178,7 @@ const PaginationProvider = ({
     ],
   )
 
-  return (
-    <PaginationContext.Provider value={values}>
-      {children}
-    </PaginationContext.Provider>
-  )
+  return <PaginationContext value={values}>{children}</PaginationContext>
 }
 
 export default PaginationProvider

package/src/Component/Pagination/Pagination.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./pagination.twig"
 import PaginationItem from "./pagination-item.twig"
 import Link from "../../Atom/Link/link.twig"

package/src/Component/Pagination/Pagination.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Components/PaginationContext"
 import PaginationComponent from "./Pagination"
 import "./pagination.css"

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

@@ -1,61 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Pagination Pagination smoke-test 1`] = `
-<nav class="mx-pagination"
-     aria-label="Pagination"
->
-  <ul class="mx-pagination__items">
-    <li class="mx-pagination__previous">
-      <a href="#">
-        <span class="mx-icon mx-icon--arrow-left ">
-        </span>
-        <span>
-          Previous
-        </span>
-      </a>
-    </li>
-    <li class="mx-pagination__item">
-      <a href="#"
-         aria-current="page"
-      >
-        <span>
-          1
-        </span>
-      </a>
-    </li>
-    <li class="mx-pagination__item">
-      <a href="#">
-        <span>
-          2
-        </span>
-      </a>
-    </li>
-    <li class="mx-pagination__item">
-      <a href="#">
-        <span>
-          3
-        </span>
-      </a>
-    </li>
-    <li class="mx-pagination__ellipsis">
-      …
-    </li>
-    <li class="mx-pagination__item">
-      <a href="#">
-        <span>
-          10
-        </span>
-      </a>
-    </li>
-    <li class="mx-pagination__next">
-      <a href="#">
-        <span>
-          Next
-        </span>
-        <span class="mx-icon mx-icon--arrow-right ">
-        </span>
-      </a>
-    </li>
-  </ul>
-</nav>
+<div class="mx-page default">
+  <nav class="mx-pagination"
+       aria-label="Pagination"
+  >
+    <ul class="mx-pagination__items">
+      <li class="mx-pagination__previous">
+        <a href="#">
+          <span class="mx-icon mx-icon--arrow-left ">
+          </span>
+          <span>
+            Previous
+          </span>
+        </a>
+      </li>
+      <li class="mx-pagination__item">
+        <a href="#"
+           aria-current="page"
+        >
+          <span>
+            1
+          </span>
+        </a>
+      </li>
+      <li class="mx-pagination__item">
+        <a href="#">
+          <span>
+            2
+          </span>
+        </a>
+      </li>
+      <li class="mx-pagination__item">
+        <a href="#">
+          <span>
+            3
+          </span>
+        </a>
+      </li>
+      <li class="mx-pagination__ellipsis">
+        …
+      </li>
+      <li class="mx-pagination__item">
+        <a href="#">
+          <span>
+            10
+          </span>
+        </a>
+      </li>
+      <li class="mx-pagination__next">
+        <a href="#">
+          <span>
+            Next
+          </span>
+          <span class="mx-icon mx-icon--arrow-right ">
+          </span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
 `;

package/src/Component/Pagination/pagination.css

@@ -8,15 +8,9 @@
     padding: 0;
 
     & button {
-      all: unset;
+      padding: unset;
+      background: transparent;
       cursor: pointer;
-      box-sizing: border-box;
-
-      &:focus {
-        outline: var(--outline-width, var(--outline-size))
-          var(--outline-style, solid) var(--outline-color, currentcolor);
-        outline-offset: var(--outline-offset, var(--outline-size));
-      }
     }
 
     & :is(a, button, [aria-current="page"], [aria-current="step"]) {

package/src/Component/ResultsBar/Components/ResultsBarInfo.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "react"
+
+type ResultsBarInfoProps = {
+  number: number
+  pageCount: number
+  total: number
+}
+
+const ResultsBarInfo = ({
+  number,
+  pageCount,
+  total,
+}: ResultsBarInfoProps): JSX.Element => (
+  <>
+    {total > 0 ? (
+      <span aria-live="polite">
+        Showing results {number} - {pageCount > total ? total : pageCount} of{" "}
+        {total} results
+      </span>
+    ) : (
+      <span aria-live="assertive" aria-atomic="true">
+        Sorry, no results were found for your search
+      </span>
+    )}
+  </>
+)
+
+export default ResultsBarInfo

package/src/Component/ResultsBar/Components/ResultsBarSort.tsx

@@ -0,0 +1,17 @@
+import { JSX } from "react"
+import FormSelect, { FormSelectProps } from "../../../Form/Select/FormSelect"
+import FormLabel from "../../../Form/Label/FormLabel"
+
+const ResultsBarSort = ({
+  id,
+  name,
+  options,
+  ...props
+}: FormSelectProps): JSX.Element => (
+  <div className="mx-results-bar__sort">
+    <FormLabel id={id} text="Sort by" />
+    <FormSelect name={name} options={options} id={id} {...props} />
+  </div>
+)
+
+export default ResultsBarSort

package/src/Component/ResultsBar/ResultsBar.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "./results-bar.twig"
+import "./results-bar.css"
+import { ResultsBar as ResultsBarType } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<ResultsBarType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    number: 1,
+    pageCount: 10,
+    total: 250,
+  },
+  argTypes: {
+    number: { control: "number" },
+    pageCount: { control: "number" },
+    total: { control: "number" },
+    empty: { control: "boolean" },
+  },
+}
+
+export default meta
+type Story = StoryObj<ResultsBarType>
+
+export const ResultsBar: Story = {}
+
+export const Empty: Story = {
+  args: {
+    empty: true,
+  },
+}
+
+export const Sort: Story = {
+  args: {
+    sort: ["Most recent", "A-Z", "Z-A"],
+  },
+}

package/src/Component/ResultsBar/ResultsBar.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import Component from "./ResultsBar"
+import "./results-bar.css"
+import ResultsBarInfo from "./Components/ResultsBarInfo"
+import ResultsBarSort from "./Components/ResultsBarSort"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: <ResultsBarInfo number={1} pageCount={10} total={250} />,
+  },
+}
+
+export default meta
+export const ResultsBar: StoryObj<typeof Component> = {}
+
+export const Empty: StoryObj<typeof Component> = {
+  args: {
+    children: <ResultsBarInfo number={1} pageCount={10} total={0} />,
+  },
+}
+
+export const Sort: StoryObj<typeof Component> = {
+  args: {
+    children: (
+      <>
+        <ResultsBarInfo number={1} pageCount={10} total={250} />
+        <ResultsBarSort
+          options={[
+            {
+              value: "1",
+              label: "Option 1",
+            },
+            {
+              value: "2",
+              label: "Option 2",
+            },
+            {
+              value: "3",
+              label: "Option 3",
+            },
+          ]}
+          id="results-sort"
+          name="results-sort"
+        />
+      </>
+    ),
+  },
+}

package/src/Component/ResultsBar/ResultsBar.tsx

@@ -0,0 +1,7 @@
+import { JSX, PropsWithChildren } from "react"
+
+const ResultsBar = ({ children }: PropsWithChildren): JSX.Element => (
+  <div className="mx-results-bar">{children}</div>
+)
+
+export default ResultsBar

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/ResultsBar Empty smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-results-bar mx-results-bar--empty">
+    <span aria-live="assertive"
+          aria-atomic="true"
+    >
+      Sorry, no results were found for your search
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Component/ResultsBar ResultsBar smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-results-bar ">
+    <span aria-live="polite">
+      Showing results 1 - 10 of 250 results
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Component/ResultsBar Sort smoke-test 1`] = `
+<div class="mx-page default">
+  <div class="mx-results-bar ">
+    <span aria-live="polite">
+      Showing results 1 - 10 of 250 results
+    </span>
+    <div class="mx-results-bar__sort">
+      <label class="mx-label"
+             for="results-sort"
+      >
+        Sort by
+      </label>
+      <select class="mx-input__select"
+              id="results-sort"
+              name="results-sort"
+      >
+        <option value="Most recent">
+          Most recent
+        </option>
+        <option value="A-Z">
+          A-Z
+        </option>
+        <option value="Z-A">
+          Z-A
+        </option>
+      </select>
+    </div>
+  </div>
+</div>
+`;

package/src/Component/ResultsBar/__snapshots__/ResultsBar.stories.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/ResultsBar Empty smoke-test 1`] = `
+<div class="mx-results-bar">
+  <span aria-live="assertive"
+        aria-atomic="true"
+  >
+    Sorry, no results were found for your search
+  </span>
+</div>
+`;
+
+exports[`Component/ResultsBar ResultsBar smoke-test 1`] = `
+<div class="mx-results-bar">
+  <span aria-live="polite">
+    Showing results 1 - 10 of 250 results
+  </span>
+</div>
+`;
+
+exports[`Component/ResultsBar Sort smoke-test 1`] = `
+<div class="mx-results-bar">
+  <span aria-live="polite">
+    Showing results 1 - 10 of 250 results
+  </span>
+  <div class="mx-results-bar__sort">
+    <label class="mx-label"
+           for="results-sort"
+    >
+      Sort by
+    </label>
+    <select id="results-sort"
+            class="mx-input__select"
+            aria-describedby="unique-0"
+            aria-invalid="false"
+            name="unique-0"
+    >
+      <option value>
+        Select one
+      </option>
+      <option value="1">
+        Option 1
+      </option>
+      <option value="2">
+        Option 2
+      </option>
+      <option value="3">
+        Option 3
+      </option>
+    </select>
+  </div>
+</div>
+`;

package/src/Component/ResultsBar/results-bar.css

@@ -0,0 +1,19 @@
+@layer design-system.components {
+  .mx-results-bar {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-s);
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .mx-results-bar__sort {
+    display: flex;
+    gap: var(--spacing-s);
+    align-items: center;
+
+    & label {
+      margin-block: 0;
+    }
+  }
+}

package/src/Component/ResultsBar/results-bar.twig

@@ -0,0 +1,24 @@
+{% set baseClass = 'mx-results-bar' %}
+{% set classes = [
+  baseClass,
+  empty ? baseClass~'--empty' : null,
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+
+<div{{ attributes }}>
+  {% if empty %}
+    <span aria-live="assertive" aria-atomic="true">Sorry, no results were found for your search</span>
+  {% else %}
+    <span aria-live="polite">Showing results {{ number}} - {{ pageCount > total ? total : pageCount }} of {{ total }} results</span>
+  {% endif %}
+  {% if sort is not empty %}
+    <div class="mx-results-bar__sort">
+      <label class="mx-label" for="results-sort">Sort by</label>
+      <select class="mx-input__select" id="results-sort" name="results-sort">
+        {% for option in sort %}
+          <option value="{{ option }}">{{ option }}</option>
+        {% endfor %}
+      </select>
+    </div>
+  {% endif %}
+</div>

package/src/Component/SideNavigation/SideNavigation.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./side-navigation.twig"
 import Link from "../../Atom/Link/link.twig"
 import "../Navigation/navigation.css"