@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/src/Component/SocialLinks/SocialLinks.stories.ts

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./social-links.twig"
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import "./social-links.css"
+import {
+  HeadingTypes,
+  IconSizeModifier,
+  SocialLinks as SocialLinksType,
+} from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+const meta: Meta<SocialLinksType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    title: Heading({
+      title: "Follow us",
+      as: HeadingTypes.TWO,
+      modifiers: [HeadingTypes.FOUR],
+    }),
+    items: [
+      Link({
+        title: "Facebook",
+        href: "#",
+        iconOnly: true,
+        iconStart: Icon({
+          icon: Icons.FACEBOOK,
+          size: IconSizeModifier.MEDIUM,
+        }),
+      }),
+      Link({
+        title: "Instagram",
+        href: "#",
+        iconOnly: true,
+        iconStart: Icon({
+          icon: Icons.INSTAGRAM,
+          size: IconSizeModifier.MEDIUM,
+        }),
+      }),
+      Link({
+        title: "LinkedIn",
+        href: "#",
+        iconOnly: true,
+        iconStart: Icon({
+          icon: Icons.LINKEDIN,
+          size: IconSizeModifier.MEDIUM,
+        }),
+      }),
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<SocialLinksType>
+
+export const SocialLinks: Story = {}

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/SocialLinks SocialLinks smoke-test 1`] = `
+<nav class="mx-social-links"
+     aria-label="Social media links"
+>
+  <h2 class=" mx-heading--m">
+    Follow us
+  </h2>
+  <a href="#">
+    <span class="mx-icon mx-icon--facebook  mx-icon--size-md">
+    </span>
+    <span class="sr-only">
+      Facebook
+    </span>
+  </a>
+  <a href="#">
+    <span class="mx-icon mx-icon--instagram  mx-icon--size-md">
+    </span>
+    <span class="sr-only">
+      Instagram
+    </span>
+  </a>
+  <a href="#">
+    <span class="mx-icon mx-icon--linkedin  mx-icon--size-md">
+    </span>
+    <span class="sr-only">
+      LinkedIn
+    </span>
+  </a>
+</nav>
+`;

package/src/Component/SocialLinks/social-links.css

@@ -0,0 +1,17 @@
+/**
+ * Social links
+ */
+
+@layer design-system.components {
+  .mx-social-links {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: var(--nav-gap, var(--spacing-s));
+    color: var(--foreground, inherit);
+
+    & a {
+      color: inherit;
+    }
+  }
+}

package/src/Component/SocialLinks/social-links.twig

@@ -0,0 +1,6 @@
+<nav class="mx-social-links" aria-label="Social media links">
+  {{ title }}
+  {% for item in items %}
+    {{ item }}
+  {% endfor %}
+</nav>

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

@@ -2,7 +2,7 @@
 
 exports[`Elements/Social Share Facebook smoke-test 1`] = `
 <a href="https://www.facebook.com/sharer/sharer.php?url=https://previousnext.com.au"
-   class="button button--dark button--icon-only icon icon--facebook"
+   class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--facebook"
 >
   Share on facebook
 </a>
@@ -10,7 +10,7 @@ exports[`Elements/Social Share Facebook smoke-test 1`] = `
 
 exports[`Elements/Social Share LinkedIn smoke-test 1`] = `
 <a href="https://www.linkedin.com/sharing/share-offsite//?url=https://previousnext.com.au"
-   class="button button--dark button--icon-only icon icon--linkedin"
+   class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--linkedin"
 >
   Share on linkedin
 </a>
@@ -18,7 +18,7 @@ exports[`Elements/Social Share LinkedIn smoke-test 1`] = `
 
 exports[`Elements/Social Share Twitter smoke-test 1`] = `
 <a href="https://twitter.com/intent/tweet/?url=https://previousnext.com.au&amp;text=Hello%20World!!"
-   class="button button--dark button--icon-only icon icon--twitter"
+   class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--twitter"
 >
   Share on twitter
 </a>

package/src/Component/Steps/Steps.stories.ts

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./steps.twig"
+import StepItem from "./step-item.twig"
+import "./steps.css"
+import { Steps as StepsType, StepsModifier } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<StepsType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  argTypes: {
+    modifiers: {
+      options: Object.values(StepsModifier),
+      control: "multi-select",
+    },
+    fill: { control: "boolean" },
+    counters: { control: "boolean" },
+  },
+  args: {
+    items: [
+      StepItem({
+        content:
+          "<h2>Funk</h2><p>Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>",
+      }),
+      StepItem({
+        content:
+          "<h3>Soul</h3><p>Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.</p>",
+      }),
+      StepItem({
+        content:
+          "<h4>Motown</h4><p>Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.</p>",
+      }),
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<StepsType>
+
+export const Steps: Story = {}
+
+export const Counters: Story = {
+  args: {
+    counters: true,
+  },
+}
+export const Progress: Story = {
+  args: {
+    modifiers: [StepsModifier.SUPPLEMENTARY],
+    items: [
+      StepItem({
+        status: true,
+        content:
+          "Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+      }),
+      StepItem({
+        content:
+          "Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.",
+      }),
+      StepItem({
+        content:
+          "Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+      }),
+    ],
+  },
+}
+
+export const ProgressCounters: Story = {
+  args: {
+    modifiers: [StepsModifier.DARK],
+    counters: true,
+    items: [
+      StepItem({
+        status: true,
+        content:
+          "Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+      }),
+      StepItem({
+        status: true,
+        content:
+          "Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.",
+      }),
+      StepItem({
+        content:
+          "Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.",
+      }),
+    ],
+  },
+}

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

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/Steps Counters smoke-test 1`] = `
+<div class="mx-steps  mx-steps--counters">
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <h2>
+        Funk
+      </h2>
+      <p>
+        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </p>
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <h3>
+        Soul
+      </h3>
+      <p>
+        Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+      </p>
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <h4>
+        Motown
+      </h4>
+      <p>
+        Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/Steps Progress smoke-test 1`] = `
+<div class="mx-steps mx-steps--supplementary ">
+  <div class="mx-steps__panel mx-steps--fill">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/Steps ProgressCounters smoke-test 1`] = `
+<div class="mx-steps mx-steps--dark mx-steps--counters ">
+  <div class="mx-steps__panel mx-steps--fill">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    </div>
+  </div>
+  <div class="mx-steps__panel mx-steps--fill">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/Steps Steps smoke-test 1`] = `
+<div class="mx-steps ">
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <h2>
+        Funk
+      </h2>
+      <p>
+        Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </p>
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <h3>
+        Soul
+      </h3>
+      <p>
+        Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+      </p>
+    </div>
+  </div>
+  <div class="mx-steps__panel ">
+    <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <h4>
+        Motown
+      </h4>
+      <p>
+        Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+      </p>
+    </div>
+  </div>
+</div>
+`;

package/src/Component/Steps/step-item.twig

@@ -0,0 +1,11 @@
+{% set baseClass = 'mx-steps__panel' %}
+{% set classes = [
+  baseClass,
+  status ? 'mx-steps--fill' : null
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<div{{ attributes }}>
+  <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+  {{ content }}
+  </div>
+</div>

package/src/Component/Steps/steps.css

@@ -0,0 +1,99 @@
+/**
+ * Steps
+ */
+
+@layer design-system.components {
+  .mx-steps {
+    counter-reset: step;
+  }
+
+  .mx-steps__panel {
+    position: relative;
+
+    &::before {
+      content: "";
+      border: var(--line-width, 2px) solid
+        var(--line-colour, var(--colour-border));
+      background-color: var(--background, var(--colour-background));
+      border-radius: 100%;
+      inline-size: var(--counter-size, var(--spacing-l));
+      block-size: var(--counter-size, var(--spacing-l));
+      inset-block-start: var(--counter-top, 0);
+      inset-inline-start: 0;
+      position: absolute;
+      z-index: 2;
+    }
+
+    &::after {
+      align-items: center;
+      color: var(--foreground, inherit);
+      counter-increment: step;
+      content: counter(step) "";
+      display: flex;
+      font-size: var(--font-size-s);
+      font-weight: var(--font-weight-bold);
+      line-height: var(--line-height-ui);
+      inline-size: calc(
+        var(--counter-size, var(--spacing-l)) + (var(--line-width, 2px) * 2)
+      );
+      block-size: calc(
+        var(--counter-size, var(--spacing-l)) + (var(--line-width, 2px) * 2)
+      );
+      justify-content: center;
+      inset-block-start: var(--counter-top, 0);
+      inset-inline-start: 0;
+      position: absolute;
+      z-index: 3;
+      visibility: var(--counter-visibility, hidden);
+    }
+
+    &:last-child {
+      --spacing: 0;
+    }
+
+    &:has(.mx-steps__panel-content h3:first-child) {
+      --counter-top: -2px;
+    }
+
+    &:has(.mx-steps__panel-content h4:first-child) {
+      --counter-top: -4px;
+    }
+  }
+
+  .mx-steps__panel-content {
+    padding-block: 0 var(--spacing, var(--spacing-l));
+    padding-inline-start: var(--indent, var(--spacing-xxl));
+    max-inline-size: var(--container-max-width);
+
+    &::before {
+      content: "";
+      inline-size: var(--line-width, 2px);
+      background-color: var(--line-colour, var(--colour-border));
+      inset-inline-start: calc(
+        (var(--counter-size, var(--spacing-l)) / 2) -
+          (var(--line-width, 2px) / 2)
+      );
+      inset-block: 0;
+      position: absolute;
+    }
+  }
+
+  .mx-steps--dark {
+    --line-colour: var(--colour-primary);
+    --counter-foreground: var(--colour-foreground-reverse);
+  }
+
+  .mx-steps--supplementary {
+    --line-colour: var(--colour-accent);
+    --counter-foreground: var(--colour-foreground-reverse);
+  }
+
+  .mx-steps--fill:where(:not(:has(.mx-steps--fill))) {
+    --background: var(--line-colour, var(--colour-border));
+    --foreground: var(--counter-foreground, inherit);
+  }
+
+  .mx-steps--counters {
+    --counter-visibility: visible;
+  }
+}

package/src/Component/Steps/steps.twig

@@ -0,0 +1,18 @@
+{% set baseClass = 'mx-steps' %}
+{% set modifierClass = "" %}
+{% for modifier in modifiers %}
+  {% set modifierClass = baseClass~"--"~modifier %}
+{% endfor %}
+{% set classes = [
+  baseClass,
+  modifierClass ? modifierClass : null,
+  counters ? baseClass~"--counters" : null,
+  progress ? baseClass~"--progress" : null,
+  fill ? baseClass~"--fill" : null,
+] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+<div{{ attributes }}>
+  {% for item in items %}
+    {{ item }}
+  {% endfor %}
+</div>

package/src/Component/Sticky/Sticky.stories.ts

@@ -6,6 +6,9 @@ import "./Elements/Sticky"
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  args: {
+    content: "I am sticky.",
+  },
 }
 
 export default meta

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

@@ -1,13 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Sticky Sticky smoke-test 1`] = `
-"<div class="sticky__trigger"></div><mx-sticky style="--sticky-offset: 0" offsetpropname="--sticky-offset" class="sticky section section--l background--alt">
-  <div class="section__content">Sticky header</div>
+<div class="sticky__trigger">
+</div>
+<mx-sticky style="--sticky-offset: 0"
+           offsetpropname="--sticky-offset"
+           class="mx-sticky"
+>
+  I am sticky.
 </mx-sticky>
-
-
-&lt; class="mx-section "&gt;
-          
-  
-"
 `;

package/src/Component/Sticky/sticky.twig

@@ -1,21 +1,3 @@
-<mx-sticky style="--sticky-offset: 0" offsetPropName="--sticky-offset" class="sticky section section--l background--alt">
-  <div class="section__content">Sticky header</div>
+<mx-sticky style="--sticky-offset: 0" offsetPropName="--sticky-offset" class="mx-sticky">
+  {{ content }}
 </mx-sticky>
-
-{% embed '@mixtape/Layout/Section/section.twig' with {
-  modifier_class: 'section--l'
-} %}
-  {% block content %}
-    {% embed '@mixtape/Layout/Sidebar/sidebar.twig' with {
-      content_class: 'rich-text vertical-flow',
-      reverse_markup: TRUE
-    }%}
-      {% block content %}
-        {% include '@mixtape/Component/InPageNavigation/twig/in-page-navigation-content-example.twig' %}
-      {% endblock %}
-      {% block sidebar %}
-        {% include '@mixtape/Component/Sticky/twig/sticky-example.twig' %}
-      {% endblock %}
-    {% endembed %}
-  {% endblock %}
-{% endembed %}

package/src/Component/Tabs/Components/Tab.tsx

@@ -1,5 +1,4 @@
 import { JSX, PropsWithChildren } from "react"
-import classNames from "classnames"
 import { useTabContext } from "../Tabs"
 
 type TabProps = PropsWithChildren & {
@@ -32,7 +31,7 @@ const Tab = ({ id, className, children }: TabProps): JSX.Element => {
       aria-controls={id}
       role="tab"
       onClick={handleClick}
-      className={classNames("button", className)}
+      className={className}
       aria-selected={isActive}
       tabIndex={isActive ? 0 : -1}
       type="button"

package/src/Component/Tabs/Components/TabDropMenu.tsx

@@ -5,7 +5,7 @@ import { useTabContext } from "../Tabs"
 const TabDropMenu = ({ children }: PropsWithChildren): JSX.Element => {
   const { activeTabLabel } = useTabContext()
   return (
-    <DropMenu label={activeTabLabel} className="mobile-only">
+    <DropMenu label={activeTabLabel} className="mobile-only" role="tablist">
       {children}
     </DropMenu>
   )

package/src/Component/Tabs/Components/TabList.tsx

@@ -1,7 +1,7 @@
 import { JSX, PropsWithChildren } from "react"
 
 const TabList = ({ children }: PropsWithChildren): JSX.Element => (
-  <div className={"tab__list desktop-only"} role="tablist">
+  <div className={"mx-tabs__list desktop-only"} role="tablist">
     {children}
   </div>
 )

package/src/Component/Tabs/Components/TabPanel.tsx

@@ -10,14 +10,14 @@ type TabPanelProps = PropsWithChildren & {
 const TabPanel = ({
   children,
   id,
-  className = "section--l",
+  className = "mx-section--l",
 }: TabPanelProps): JSX.Element => {
   const { activeTab } = useTabContext()
   const isActive: boolean = activeTab === id
   return (
     <div
       id={id}
-      className={classNames("tab__panel", "vertical-flow", className)}
+      className={classNames("mx-tabs__panel", "mx-vertical-flow", className)}
       // @ts-expect-error inert is allowed.
       inert={!isActive ? "" : null}
       aria-labelledby={`${id}-button`}