chore: revise Storybook category names and order

ably · Nov 21, 2024 · 7dee178 · 7dee178
1 parent d35c15a
commit 7dee178
Show file tree

Hide file tree

Showing 49 changed files with 470 additions and 219 deletions.
diff --git a/.storybook/application.css b/.storybook/application.css
@@ -46,13 +46,14 @@
 .ui-theme-dark .sbdocs-content > *,
 .ui-theme-dark .sb-anchor > h3,
 .ui-theme-dark .sb-anchor > p,
+.ui-theme-dark .sb-anchor > div > p,
 .ui-theme-dark .sb-anchor > p > code {
   @apply text-neutral-000;
 }
 
 .ui-theme-dark .sbdocs td,
 .ui-theme-dark .sbdocs th {
-  @apply text-neutral-200;
+  @apply !text-neutral-200;
 }
 
 .ui-theme-dark .sbdocs td {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -37,7 +37,7 @@ const preview = {
     options: {
       storySort: {
         method: "alphabetical",
-        order: ["CSS", "Features", "JS Components", "Brand"],
+        order: ["Features", "Components", "Styles"],
       },
     },
     darkMode: {
@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["ui-theme-dark"],
-      lightClass: ["ui-theme-light"],
+      darkClass: "ui-theme-dark",
+      lightClass: "ui-theme-light",
     },
   },
   loaders: [mswLoader],

diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
@@ -74,7 +74,7 @@ const AccordionPresentation = ({ data, options }: AccordionProps) => (
 );
 
 export default {
-  title: "JS Components/Accordion",
+  title: "Components/Accordion",
   component: Accordion,
 };
 

diff --git a/src/core/Code/Code.stories.tsx b/src/core/Code/Code.stories.tsx
@@ -1,7 +1,7 @@
 import Code from "../Code";
 
 export default {
-  title: "JS Components/Code",
+  title: "Components/Code",
   component: Code,
   tags: ["autodocs"],
 };

diff --git a/src/core/Code/__snapshots__/Code.stories.tsx.snap b/src/core/Code/__snapshots__/Code.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
+exports[`Components/Code CodeWithLines smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -98,7 +98,7 @@ exports[`JS Components/Code CodeWithLines smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Code Java smoke-test 1`] = `
+exports[`Components/Code Java smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -179,7 +179,7 @@ channel.subscribe(
 </div>
 `;
 
-exports[`JS Components/Code Javascript smoke-test 1`] = `
+exports[`Components/Code Javascript smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -254,7 +254,7 @@ exports[`JS Components/Code Javascript smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Code Kotlin smoke-test 1`] = `
+exports[`Components/Code Kotlin smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >
@@ -309,7 +309,7 @@ exports[`JS Components/Code Kotlin smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Code Swift smoke-test 1`] = `
+exports[`Components/Code Swift smoke-test 1`] = `
 <div class="hljs overflow-auto flex p-32 "
      data-id="code"
 >

diff --git a/src/core/ContactFooter/ContactFooter.stories.tsx b/src/core/ContactFooter/ContactFooter.stories.tsx
@@ -1,7 +1,7 @@
 import ContactFooter from "../ContactFooter";
 
 export default {
-  title: "JS Components/Contact Footer",
+  title: "Components/Contact Footer",
   component: ContactFooter,
   parameters: {
     layout: "fullscreen",

diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Contact Footer Default smoke-test 1`] = `
+exports[`Components/Contact Footer Default smoke-test 1`] = `
 <div class="ui-contact-footer font-sans antialiased"
      data-id="contact-footer"
 >

diff --git a/src/core/CookieMessage/CookieMessage.stories.tsx b/src/core/CookieMessage/CookieMessage.stories.tsx
@@ -1,7 +1,7 @@
 import CookieMessage from "../CookieMessage";
 
 export default {
-  title: "JS Components/Cookie Message",
+  title: "Components/Cookie Message",
   component: CookieMessage,
   args: {
     cookieId: "cookie-namespace",

diff --git a/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap b/src/core/CookieMessage/__snapshots__/CookieMessage.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Cookie Message Default smoke-test 1`] = `
+exports[`Components/Cookie Message Default smoke-test 1`] = `
 <div class="ui-cookie-message">
   <p class="ui-text-p2 pr-32">
     <a href="/privacy"

diff --git a/src/core/CustomerLogos/CustomerLogos.stories.tsx b/src/core/CustomerLogos/CustomerLogos.stories.tsx
@@ -8,7 +8,7 @@ import split from "../images/cust-logo-split-mono-pos.svg";
 import australian from "../images/cust-logo-ausopen-mono-pos.svg";
 
 export default {
-  title: "JS Components/Customer Logos",
+  title: "Components/Customer Logos",
   component: CustomerLogos,
   args: {
     companies: [

diff --git a/src/core/CustomerLogos/__snapshots__/CustomerLogos.stories.tsx.snap b/src/core/CustomerLogos/__snapshots__/CustomerLogos.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Customer Logos Default smoke-test 1`] = `
+exports[`Components/Customer Logos Default smoke-test 1`] = `
 <section class="w-full bg-white">
   <ul class="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ">
     <li class="flex-auto text-center sm:w-1/3 w-1/2">

diff --git a/src/core/DropdownMenu/DropdownMenu.stories.tsx b/src/core/DropdownMenu/DropdownMenu.stories.tsx
@@ -3,7 +3,7 @@ import Icon from "../Icon";
 import DropdownMenu from "../DropdownMenu";
 
 export default {
-  title: "JS Components/Dropdown Menu",
+  title: "Components/Dropdown Menu",
   component: DropdownMenu,
 };
 

diff --git a/src/core/DropdownMenu/__snapshots__/DropdownMenu.stories.tsx.snap b/src/core/DropdownMenu/__snapshots__/DropdownMenu.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Dropdown Menu Default smoke-test 1`] = `
+exports[`Components/Dropdown Menu Default smoke-test 1`] = `
 <div id="dropdown-menu"
      class="relative"
 >

diff --git a/src/core/Expander/Expander.stories.tsx b/src/core/Expander/Expander.stories.tsx
@@ -4,7 +4,7 @@ import Expander from "../Expander";
 import Icon from "../Icon";
 
 export default {
-  title: "JS Components/Expander",
+  title: "Components/Expander",
   component: Expander,
   tags: ["autodocs"],
   args: {

diff --git a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Expander LongContent smoke-test 1`] = `
+exports[`Components/Expander LongContent smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: 200px;"
@@ -105,7 +105,7 @@ exports[`JS Components/Expander LongContent smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander OverriddenContentStyles smoke-test 1`] = `
+exports[`Components/Expander OverriddenContentStyles smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative bg-neutral-400 p-16 rounded-lg"
      style="height: 200px;"
@@ -210,7 +210,7 @@ exports[`JS Components/Expander OverriddenContentStyles smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander OverriddenControls play-test 1`] = `
+exports[`Components/Expander OverriddenControls play-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: 664px;"
@@ -321,7 +321,7 @@ exports[`JS Components/Expander OverriddenControls play-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander ShortContent smoke-test 1`] = `
+exports[`Components/Expander ShortContent smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: auto;"
@@ -356,7 +356,7 @@ exports[`JS Components/Expander ShortContent smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Expander ZeroHeightContent smoke-test 1`] = `
+exports[`Components/Expander ZeroHeightContent smoke-test 1`] = `
 <div data-testid="expander-container"
      class="overflow-hidden transition-all relative "
      style="height: 0px;"

diff --git a/src/core/FeaturedLink/FeaturedLink.stories.tsx b/src/core/FeaturedLink/FeaturedLink.stories.tsx
@@ -1,7 +1,7 @@
 import FeaturedLink from "../FeaturedLink";
 
 export default {
-  title: "JS Components/Featured Link",
+  title: "Components/Featured Link",
   component: FeaturedLink,
   parameters: {
     layout: "centered",

diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Featured Link Default smoke-test 1`] = `
+exports[`Components/Featured Link Default smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -15,7 +15,7 @@ exports[`JS Components/Featured Link Default smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Disabled smoke-test 1`] = `
+exports[`Components/Featured Link Disabled smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-unavailable pointer-events-none group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -30,7 +30,7 @@ exports[`JS Components/Featured Link Disabled smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Large smoke-test 1`] = `
+exports[`Components/Featured Link Large smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p1 py-8 "
    style="--featured-link-icon-size: var(--fs-p1);"
@@ -45,7 +45,7 @@ exports[`JS Components/Featured Link Large smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Pink smoke-test 1`] = `
+exports[`Components/Featured Link Pink smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 text-pink-800"
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -60,7 +60,7 @@ exports[`JS Components/Featured Link Pink smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Reverse smoke-test 1`] = `
+exports[`Components/Featured Link Reverse smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
@@ -75,7 +75,7 @@ exports[`JS Components/Featured Link Reverse smoke-test 1`] = `
 </a>
 `;
 
-exports[`JS Components/Featured Link Small smoke-test 1`] = `
+exports[`Components/Featured Link Small smoke-test 1`] = `
 <a href="#"
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p3 py-8 "
    style="--featured-link-icon-size: var(--fs-p3);"

diff --git a/src/core/Flash/Flash.stories.tsx b/src/core/Flash/Flash.stories.tsx
@@ -9,7 +9,7 @@ import { reducerBlogPosts } from "../remote-blogs-posts.js";
 import { reducerSessionData } from "../remote-session-data.js";
 
 export default {
-  title: "JS Components/Flash",
+  title: "Components/Flash",
   component: Flash,
   args: {
     flashes: [

diff --git a/src/core/Flash/__snapshots__/Flash.stories.tsx.snap b/src/core/Flash/__snapshots__/Flash.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Flash Default smoke-test 1`] = `
+exports[`Components/Flash Default smoke-test 1`] = `
 <div class="ui-flash"
      data-id="ui-flashes"
 >

diff --git a/src/core/Footer/Footer.stories.tsx b/src/core/Footer/Footer.stories.tsx
@@ -11,7 +11,7 @@ import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
 const statusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 
 export default {
-  title: "JS Components/Footer",
+  title: "Components/Footer",
   component: Footer,
   parameters: {
     layout: "fullscreen",

diff --git a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Footer Default smoke-test 1`] = `
+exports[`Components/Footer Default smoke-test 1`] = `
 <footer class="bg-light-grey font-sans antialiased leading-normal"
         data-id="footer"
 >

diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
@@ -5,7 +5,7 @@ import loadIcons from "../icons";
 import { IconName, iconNames } from "./types";
 
 export default {
-  title: "JS Components/Icon",
+  title: "Components/Icon",
   component: Icon,
   parameters: {
     layout: "fullscreen",

diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
+exports[`Components/Icon DisplayIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -1340,7 +1340,7 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon EncapsulatedIcons smoke-test 1`] = `
+exports[`Components/Icon EncapsulatedIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -1621,7 +1621,7 @@ exports[`JS Components/Icon EncapsulatedIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
+exports[`Components/Icon GUIIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2271,7 +2271,7 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
+exports[`Components/Icon IconWithSecondaryColor smoke-test 1`] = `
 <div class="flex items-center justify-center p-16 gap-24">
   <div class="flex gap-24">
     <h4 class="ui-text-h4 text-neutral-1300 dark:text-neutral-000">
@@ -2316,7 +2316,7 @@ exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
+exports[`Components/Icon OtherIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2336,7 +2336,7 @@ exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
+exports[`Components/Icon ProductIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2521,7 +2521,7 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
+exports[`Components/Icon SocialIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
@@ -2676,7 +2676,7 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon TechIcons smoke-test 1`] = `
+exports[`Components/Icon TechIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">