@pnx-mixtape/mxds 0.0.1

package/src/Component/Tabs/Tabs.tsx

@@ -0,0 +1,100 @@
+import React, {
+  JSX,
+  PropsWithChildren,
+  Context,
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  useId,
+  MouseEvent,
+  KeyboardEvent,
+} from "react"
+import classNames from "classnames"
+import DropMenuProvider from "../DropMenu/Components/DropMenuContext"
+import { TabStyles } from "../../enums"
+
+type TabContextValues = {
+  activeTab: string
+  setActiveTab: Dispatch<SetStateAction<string>>
+  activeTabLabel: string
+  tabsId: string
+}
+
+const TabContext: Context<TabContextValues> =
+  createContext<TabContextValues>(null)
+export const useTabContext = () => useContext(TabContext)
+
+type TabsProps = PropsWithChildren & {
+  id: string
+  active?: string
+  modifier?: TabStyles
+}
+
+const Tabs = ({ children, active, modifier, id }: TabsProps): JSX.Element => {
+  const [activeTab, setActiveTab] = useState<string>(active)
+  const [activeTabLabel, setActiveTabLabel] = useState<string>("Tabs")
+  const tabsId: string = id || useId()
+
+  const handleClick = (
+    event: MouseEvent | KeyboardEvent,
+    key: string,
+  ): void => {
+    setActiveTab(key)
+    const target = event.target as HTMLButtonElement
+    setActiveTabLabel(target.textContent)
+    if (typeof window === "undefined") return
+    const urlParams: URLSearchParams = new URLSearchParams(
+      window.location.search,
+    )
+    if (urlParams.get("tab") === key) return
+    urlParams.set("tab", key)
+    window.history.replaceState(
+      {},
+      "",
+      `${window.location.pathname}?${urlParams.toString()}`,
+    )
+  }
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    const tabParam = new URLSearchParams(window.location.search).get("tab")
+    if (tabParam && tabParam !== activeTab) {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+      setActiveTab(tabParam)
+    }
+    const label: string = document.querySelector(
+      `[aria-controls="${activeTab}"]`,
+    )?.textContent
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    if (label) setActiveTabLabel(label)
+  }, [activeTab])
+
+  const values = useMemo<TabContextValues>(
+    () => ({ activeTab, setActiveTab, activeTabLabel, tabsId }),
+    [activeTab, activeTabLabel, tabsId],
+  )
+
+  return (
+    <TabContext.Provider value={values}>
+      <DropMenuProvider
+        id={tabsId}
+        onClick={handleClick}
+        selectedItem={[activeTab]}
+      >
+        <div
+          className={classNames("tabs", {
+            [`tabs--${modifier}`]: modifier,
+          })}
+        >
+          {children}
+        </div>
+      </DropMenuProvider>
+    </TabContext.Provider>
+  )
+}
+
+export default Tabs

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

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Tabs Tabs smoke-test 1`] = `
+<mx-tabs class="tabs tabs--">
+  <mx-dropmenu closeonclick
+               class="mobile-only"
+  >
+    <button id="unique-0"
+            class="drop-menu__trigger button icon icon--chevron-down icon--end"
+            popovertarget="tab-menu"
+    >
+      Lorem ipsum
+    </button>
+    <div class="drop-menu"
+         id="tab-menu"
+         aria-labelledby="unique-0"
+         anchor="tab-menu-target"
+         popover
+         role="menu"
+    >
+      <button type="button"
+              aria-controls="unique-1"
+              class
+              role="menuitemradio"
+              aria-checked="false"
+      >
+        Lorem ipsum
+      </button>
+      <button type="button"
+              aria-controls="unique-2"
+              class
+              role="menuitemradio"
+              aria-checked="false"
+      >
+        Ut enim
+      </button>
+      <button type="button"
+              aria-controls="unique-3"
+              class
+              role="menuitemradio"
+              aria-checked="false"
+      >
+        Excepteur sint
+      </button>
+    </div>
+  </mx-dropmenu>
+  <div class="tab__list desktop-only"
+       role="tablist"
+  >
+    <button class="button"
+            type="button"
+            aria-controls="unique-4"
+            id="unique-1"
+            role="tab"
+            aria-selected="true"
+            tab-index="0"
+    >
+      Lorem ipsum
+    </button>
+    <button class="button"
+            type="button"
+            aria-controls="unique-5"
+            id="unique-2"
+            role="tab"
+            aria-selected="false"
+            tab-index="-1"
+    >
+      Ut enim
+    </button>
+    <button class="button"
+            type="button"
+            aria-controls="unique-6"
+            id="unique-3"
+            role="tab"
+            aria-selected="false"
+            tab-index="-1"
+    >
+      Excepteur sint
+    </button>
+  </div>
+  <div id="unique-4"
+       class="tab__panel vertical-flow container section--l"
+       aria-labelledby="unique-7"
+       role="tabpanel"
+       tab-index="0"
+  >
+    <div class="container">
+      <article class="card ">
+        <figure class="card__media">
+          https://picsum.photos/id/56/558/418?grayscale
+        </figure>
+        <div class="card__content vertical-flow-flex">
+          Lorem ipsum
+          <div class="text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div id="unique-5"
+       class="tab__panel vertical-flow container section--l"
+       inert
+       aria-labelledby="unique-8"
+       role="tabpanel"
+       tab-index="0"
+  >
+    <div class="container">
+      <article class="card ">
+        <figure class="card__media">
+          https://picsum.photos/id/56/558/418?grayscale
+        </figure>
+        <div class="card__content vertical-flow-flex">
+          Ut enim
+          <div class="text--lede">
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div id="unique-6"
+       class="tab__panel vertical-flow container section--l"
+       inert
+       aria-labelledby="unique-9"
+       role="tabpanel"
+       tab-index="0"
+  >
+    <div class="container">
+      <article class="card ">
+        <figure class="card__media">
+          https://picsum.photos/id/56/558/418?grayscale
+        </figure>
+        <div class="card__content vertical-flow-flex">
+          Excepteur sint
+          <div class="text--lede">
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</mx-tabs>
+`;

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

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Tabs Default smoke-test 1`] = `
+<div class="tabs">
+  <div class="mobile-only">
+    <button id="unique-0"
+            type="button"
+            class="button icon icon--chevron-down icon--end drop-menu__trigger"
+            popovertarget="tabs-storybook"
+            style="anchor-name: --drop-menu-tabs-storybook;"
+    >
+      Tab 1
+    </button>
+    <div id="tabs-storybook"
+         class="drop-menu"
+         popover
+         aria-labelledby="unique-0"
+         aria-describedby="unique-0"
+         role="menu"
+         style="position-anchor: --drop-menu-tabs-storybook;"
+    >
+      <div id="tabs-storybook-description"
+           class="sr-only"
+      >
+        Results will update when you make a selection. Press escape to close.
+      </div>
+      <button type="button"
+              data-id="tab-1"
+              aria-checked="true"
+              role="menuitemradio"
+              aria-controls="unique-1"
+      >
+        Tab 1
+      </button>
+      <button type="button"
+              data-id="tab-2"
+              aria-checked="false"
+              role="menuitemradio"
+              aria-controls="unique-2"
+      >
+        Tab 2
+      </button>
+      <button type="button"
+              data-id="tab-3"
+              aria-checked="false"
+              role="menuitemradio"
+              aria-controls="unique-3"
+      >
+        Tab 3
+      </button>
+    </div>
+  </div>
+  <div class="tab__list desktop-only"
+       role="tablist"
+  >
+    <button id="unique-1"
+            aria-controls="unique-4"
+            role="tab"
+            class="button"
+            aria-selected="true"
+            tabindex="0"
+            type="button"
+    >
+      Tab 1
+    </button>
+    <button id="unique-2"
+            aria-controls="unique-5"
+            role="tab"
+            class="button"
+            aria-selected="false"
+            tabindex="-1"
+            type="button"
+    >
+      Tab 2
+    </button>
+    <button id="unique-3"
+            aria-controls="unique-6"
+            role="tab"
+            class="button"
+            aria-selected="false"
+            tabindex="-1"
+            type="button"
+    >
+      Tab 3
+    </button>
+  </div>
+  <div id="unique-4"
+       class="tab__panel vertical-flow section--l"
+       aria-labelledby="unique-7"
+       role="tabpanel"
+       tabindex="0"
+  >
+    <p>
+      This is tab 1
+    </p>
+  </div>
+  <div id="unique-5"
+       class="tab__panel vertical-flow section--l"
+       inert
+       aria-labelledby="unique-8"
+       role="tabpanel"
+       tabindex="0"
+  >
+    <p>
+      This is tab 2
+    </p>
+  </div>
+  <div id="unique-6"
+       class="tab__panel vertical-flow section--l"
+       inert
+       aria-labelledby="unique-9"
+       role="tabpanel"
+       tabindex="0"
+  >
+    <p>
+      This is tab 3
+    </p>
+  </div>
+</div>
+`;

package/src/Component/Tabs/tabs.css

@@ -0,0 +1,103 @@
+/**
+ * Tabs
+ */
+
+@layer defaults {
+  :is(mx-tabs, mx-tabs mx-dropmenu) {
+    display: block;
+  }
+}
+
+@layer components {
+  .tabs {
+    position: relative;
+
+    & .tab__list {
+      @media (--medium-up) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-xxs);
+      }
+
+      & .tab__item {
+        padding: 0;
+        margin: 0;
+      }
+
+      & .button {
+        display: block;
+        outline-offset: var(--outline-offset);
+        min-inline-size: var(--tab-min-width, 0);
+        background-color: var(
+          --tab-background,
+          var(--background, var(--colour-background))
+        );
+        color: var(
+          --tab-foreground,
+          var(--foreground, var(--colour-foreground))
+        );
+
+        &[aria-selected="true"] {
+          background-color: var(
+            --tab-active-background,
+            var(--colour-background-alt)
+          );
+          color: var(--tab-active-foreground, var(--colour-foreground));
+        }
+      }
+    }
+
+    & .tab__panel {
+      inline-size: 100%;
+
+      &:is(:focus-visible, :focus) {
+        outline-offset: var(--outline-offset);
+      }
+
+      &[inert] {
+        display: none;
+      }
+    }
+
+    &.tabs--lined {
+      @media (--medium-up) {
+        & .tab__list {
+          border-block-end: var(--line-width, 1px) solid
+            var(--line-colour, var(--colour-border));
+
+          & .button {
+            border-radius: var(--border-radius) var(--border-radius) 0 0;
+            border: var(--line-width, 1px) solid
+              var(--line-colour, var(--colour-border));
+            border-block-end: 0;
+          }
+        }
+      }
+    }
+
+    &.tabs--centered {
+      @media (--medium-up) {
+        & .tab__list {
+          place-content: center;
+        }
+      }
+    }
+
+    &.tabs--same-height {
+      display: grid;
+
+      & .tab__panel {
+        grid-column-start: 1;
+        grid-row-start: 2;
+        z-index: 2;
+        transition: opacity 0.2s ease-in-out;
+
+        &[hidden] {
+          display: block;
+          opacity: 0;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}

package/src/Component/Tabs/tabs.twig

@@ -0,0 +1,49 @@
+{% set rand = random() %}
+{% set tabs = tabs|default([
+  {
+    id: 'tab-1-' ~ rand,
+    title: 'Lorem ipsum',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    image: 'https://picsum.photos/id/56/558/418?grayscale',
+    active: true,
+  },
+  {
+    id: 'tab-2-' ~ rand,
+    title: 'Ut enim',
+    content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+    image: 'https://picsum.photos/id/56/558/418?grayscale',
+  },
+  {
+    id: 'tab-3-' ~ rand,
+    title: 'Excepteur sint',
+    content: 'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    image: 'https://picsum.photos/id/56/558/418?grayscale',
+  }
+]) %}
+
+<mx-tabs class="tabs tabs--{{ modifier }}">
+  {% include '@mixtape/Component/Tabs/twig/tab-list.twig' with {
+    tabs: tabs,
+  } %}
+  {% for tab in tabs %}
+    {% embed '@mixtape/Component/Tabs/twig/panel.twig' with { tab: tab } %}
+      {% block content %}
+        {% if (loop.index is even) %}
+          {% include '@mixtape/Component/Card/card.twig' with {
+            modifier_class: 'card--landscape',
+            title: tab.title,
+            content: tab.content,
+            image: tab.image,
+          } %}
+        {% else %}
+          {% include '@mixtape/Component/Card/card.twig' with {
+            modifier_class: 'card--landscape card--right',
+            title: tab.title,
+            content: tab.content,
+            image: tab.image,
+          } %}
+        {% endif %}
+      {% endblock %}
+    {% endembed %}
+  {% endfor %}
+</mx-tabs>

package/src/Component/Tabs/twig/panel.twig

@@ -0,0 +1,5 @@
+<div id="{{ tab.id }}" class="tab__panel vertical-flow container {{ section_class|default('section--l') }}" inert>
+  {% block content %}
+    {{ tab.content }}
+  {% endblock %}
+</div>

package/src/Component/Tabs/twig/tab-list.twig

@@ -0,0 +1,26 @@
+<mx-dropmenu closeonclick class="mobile-only">
+  {% set id = id|default('tab-menu') %}
+  {% set name = id ~ '-target' %}
+  <button
+      id="{{ name }}"
+      class="drop-menu__trigger button icon icon--chevron-down icon--end"
+      popovertarget="{{ id }}"
+  ></button>
+  <div
+      class="drop-menu"
+      id="{{ id }}"
+      aria-labelledby="{{ name }}"
+      anchor="{{ name }}"
+      popover
+      role="menu"
+  >
+    {% for tab in tabs %}
+      <button type="button" aria-controls="{{ tab.id }}" class="{{ modifier_class }}" role="menuitemradio" aria-checked="false">{{ tab.title }}</button>
+    {% endfor %}
+  </div>
+</mx-dropmenu>
+<div class="tab__list desktop-only" role="tablist">
+  {% for tab in tabs %}
+    <button class="button" type="button" aria-controls="{{ tab.id }}" class="{{ modifier_class }}">{{ tab.title }}</button>
+  {% endfor %}
+</div>

package/src/Component/Tag/README.md

@@ -0,0 +1,19 @@
+# Tag
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/ta.cssg';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/Tab/tag.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+- JSX import: `import { Tag } from '@pnx-mixtape/mxds/react';`

package/src/Component/Tag/Tag.stories.ts

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./tags.twig"
+import "./tag.css"
+import { Tags as TagType, TagTypes } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<TagType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    items: ["Music", "News"],
+    type: TagTypes.TEXT,
+  },
+}
+
+export default meta
+type Story = StoryObj<TagType>
+
+export const Tag: Story = {}
+
+export const Link: Story = {
+  args: {
+    type: TagTypes.LINK,
+    items: [
+      {
+        title: "Music",
+        href: "#0",
+      },
+      {
+        title: "News",
+        href: "#0",
+      },
+    ],
+  },
+}
+
+export const Checkbox: Story = {
+  args: {
+    type: TagTypes.CHECKBOX,
+    items: [
+      {
+        label: "Music",
+        id: "music",
+        name: "tag",
+        value: "music",
+      },
+      {
+        label: "News",
+        id: "news",
+        name: "tag",
+        value: "news",
+      },
+    ],
+  },
+}

package/src/Component/Tag/Tag.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Tag"
+import "./tag.css"
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    children: "Tag name",
+  },
+}
+
+export default meta
+export const Tag: StoryObj<typeof meta> = {}

package/src/Component/Tag/Tag.tsx

@@ -0,0 +1,19 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { AsTags } from "../../enums"
+
+type TagProps = PropsWithChildren & {
+  className?: string
+  as?: AsTags
+}
+
+const Tag = ({
+  children,
+  className,
+  as = AsTags.DIV,
+}: TagProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
+  return <Tag className={classNames("tag", className)}>{children}</Tag>
+}
+
+export default Tag