@codecademy/brand 3.29.0-alpha.7e80c447ff.0 → 3.29.0-alpha.9e88d7b76a.0

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/index.js

@@ -1,36 +1,77 @@
 import { Box } from '@codecademy/gamut';
-import { useEffect, useState } from 'react';
-import * as React from 'react';
-import { useGlobalHeaderDynamicDataContext } from '../../../GlobalHeader/context';
+import { motion } from 'framer-motion';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { useGlobalHeaderDynamicDataContext, useGlobalHeaderItemClick } from '../../../GlobalHeader/context';
 import { AppHeaderSectionContext } from './AppHeaderSectionContext';
-import { StyledGridBox, StyledSection } from './elements';
+import { NavTabContainer, StyledSection } from './elements';
 import { MobileBackButton } from './MobileBackButton';
 import { MobileNavMenu } from './MobileNavMenu';
-import NavSection from './NavSection';
+import { NavTab, NavTabList, NavTabPanel } from './NavTabs';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
+export const AppHeaderSection = /*#__PURE__*/forwardRef(({
   isOpen = true,
-  keyDownEvents,
-  navSections,
   MarketingBanner,
   isMobile = false,
   handleClose,
-  type
+  type,
+  defaultSelectedKey,
+  navSections
 }, ref) => {
-  const [activeTab, setActiveTab] = useState(0);
+  const firstTabId = navSections?.[0]?.item?.id;
+  const [activeTab, setActiveTab] = useState(defaultSelectedKey || firstTabId);
   const [activePanel, setActivePanel] = useState(null);
+  const tabListRef = useRef(null);
   const {
     globalHeaderDynamicData
   } = useGlobalHeaderDynamicDataContext();
+  const {
+    globalHeaderItemClick
+  } = useGlobalHeaderItemClick();
   const banner = globalHeaderDynamicData?.catalogDropdown?.banner;
   const showMarketingBanner = banner?.text && banner?.href && MarketingBanner;
   const tabIndex = isOpen ? 0 : -1;
   const activePanelSelected = activePanel !== null;
+  const onSelect = useCallback((key, event, item) => {
+    setActiveTab(key);
+    if (item && event) {
+      globalHeaderItemClick(event, item);
+    }
+  }, [setActiveTab, globalHeaderItemClick]);
+  const onKeyDown = useCallback(event => {
+    if (!tabListRef.current) return;
+
+    // get list of tabs available
+    const tabs = Array.from(tabListRef.current?.querySelectorAll('button[role="tab"]') || []);
+    // get the index of the active tab
+    const activeElement = tabs.indexOf(document.activeElement);
+    if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {
+      // prevent scrollbar from moving when arrow keys are pressed on tabs
+      event.preventDefault();
+      const prevTab = tabs[activeElement - 1];
+      if (prevTab) {
+        prevTab.focus();
+      } else {
+        // focus the last tab
+        tabs[tabs.length - 1].focus();
+      }
+    }
+    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {
+      // prevent scrollbar from moving when arrow keys are pressed on tabs
+      event.preventDefault();
+      const nextTab = tabs[activeElement + 1];
+      if (nextTab) {
+        nextTab.focus();
+      } else {
+        // focus the first tab
+        tabs[0].focus();
+      }
+    }
+  }, []);
   useEffect(() => {
-    if (isOpen) {
-      setActiveTab(0);
+    if (!isOpen) {
+      setActiveTab(firstTabId);
     }
-  }, [isOpen]);
+  }, [isOpen, firstTabId]);
   return /*#__PURE__*/_jsx(AppHeaderSectionContext.Provider, {
     value: {
       activePanel,
@@ -38,6 +79,7 @@ export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
       tabIndex
     },
     children: /*#__PURE__*/_jsxs(StyledSection, {
+      ref: ref,
       activePanelSelected: activePanelSelected,
       children: [showMarketingBanner && /*#__PURE__*/_jsx(Box, {
         display: {
@@ -45,31 +87,50 @@ export const AppHeaderSection = /*#__PURE__*/React.forwardRef(({
           xs: 'block'
         },
         children: /*#__PURE__*/_jsx(MarketingBanner, {
-          tabIndex: tabIndex,
           text: banner?.text,
-          href: banner?.href
+          href: banner?.href,
+          tabIndex: tabIndex
         })
-      }), /*#__PURE__*/_jsxs(StyledGridBox, {
-        ref: ref,
-        onKeyDown: keyDownEvents,
+      }), /*#__PURE__*/_jsxs(NavTabContainer, {
+        p: 8,
+        rowGap: 8,
         children: [isMobile && /*#__PURE__*/_jsx(MobileBackButton, {
           handleClose: handleClose,
           type: type
+        }), /*#__PURE__*/_jsx(NavTabList, {
+          type: type,
+          ref: tabListRef,
+          children: navSections.map(({
+            item
+          }, index) => /*#__PURE__*/_jsx(NavTab, {
+            item: item,
+            onSelect: onSelect,
+            isActive: activeTab === item.id,
+            onKeyDown: onKeyDown,
+            index: index
+          }, item.id))
         }), navSections.map((section, index) => {
           const {
-            item,
+            item: {
+              id
+            },
             panel: Panel
           } = section;
-          return /*#__PURE__*/_jsx(NavSection, {
-            isActiveTab: activeTab === index,
-            setActiveTab: setActiveTab,
-            icon: item.icon,
-            text: item.text,
+          return /*#__PURE__*/_jsx(NavTabPanel, {
             index: index,
-            item: item,
-            tabIndex: tabIndex,
-            children: /*#__PURE__*/_jsx(Panel, {})
-          }, item.id);
+            isActiveTab: activeTab === id,
+            id: id,
+            children: /*#__PURE__*/_jsx(motion.div, {
+              animate: {
+                opacity: activeTab === id ? 1 : 0
+              },
+              transition: {
+                duration: 0.4,
+                ease: 'easeInOut'
+              },
+              children: /*#__PURE__*/_jsx(Panel, {})
+            })
+          }, id);
         })]
       }), /*#__PURE__*/_jsx(MobileNavMenu, {
         handleClose: handleClose,

package/dist/DropdownButton/index.d.ts

@@ -42,7 +42,9 @@ export declare const DropdownButton: React.ForwardRefExoticComponent<(Omit<{
     verticalOffset?: number;
 } & import("@codecademy/gamut/dist/Button/shared").ButtonBaseProps & Omit<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react" /**
+     * Sets the size of the down arrow icon in the buttons that have text or the kebab and horizontal kebab icons.
+     */).ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "content" | "translate" | "property" | "hidden" | "form" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "name" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof React.ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">, "ref"> & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement> & {

package/dist/stories/Atoms/BetaSticker.stories.js

@@ -15,6 +15,7 @@ export const Small = {
   render: args => /*#__PURE__*/_jsx(BetaSticker, {
     ...args
   }),
+  name: 'Small',
   args: {
     size: 'small'
   }

package/dist/stories/Molecules/AppBar.stories.d.ts

@@ -11,4 +11,5 @@ export declare const Default: {
 };
 export declare const Header: {
     render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/stories/Molecules/AppBar.stories.js

@@ -27,5 +27,6 @@ export const Header = {
       position: "right",
       children: "Sign In"
     })]
-  })
+  }),
+  name: 'Header'
 };

package/dist/stories/Molecules/AppHeader/AppHeaderLink.stories.js

@@ -23,6 +23,7 @@ export const CurrentTab = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
     ...args
   }),
+  name: 'Current Tab',
   args: {
     item: {
       id: 'link-current-tab',
@@ -37,6 +38,7 @@ export const NewTab = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
     ...args
   }),
+  name: 'New Tab',
   args: {
     item: {
       id: 'link-new-tab',

package/dist/stories/Molecules/AppHeader/AppHeaderLogo.stories.js

@@ -23,7 +23,8 @@ export const Default = {
 export const Pro = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {
     ...args
-  })
+  }),
+  name: 'Pro'
 };
 export const FreeAnon = {
   render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {

package/dist/stories/Molecules/Banner.stories.js

@@ -18,6 +18,7 @@ export const Navy = {
   render: args => /*#__PURE__*/_jsx(Banner, {
     ...args
   }),
+  name: 'Navy',
   args: {
     children: 'Navy',
     variant: 'navy'
@@ -27,6 +28,7 @@ export const Yellow = {
   render: args => /*#__PURE__*/_jsx(Banner, {
     ...args
   }),
+  name: 'Yellow',
   args: {
     children: 'Yellow',
     variant: 'yellow'
@@ -36,6 +38,7 @@ export const Subtle = {
   render: args => /*#__PURE__*/_jsx(Banner, {
     ...args
   }),
+  name: 'Subtle',
   args: {
     children: 'Subtle',
     variant: 'subtle'

package/dist/stories/Molecules/CurriculumCard.stories.js

@@ -43,6 +43,7 @@ export const CurriculumCardEnrolled = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
+  name: 'Curriculum Card Enrolled',
   args: {
     progressState: 'inProgress'
   }
@@ -51,6 +52,7 @@ export const CurriculumCardInProgress = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
+  name: 'Curriculum Card In Progress',
   args: {
     progressState: 'inProgress',
     footerTextVariant: 'inProgress'
@@ -60,6 +62,7 @@ export const CurriculumCardCompleted = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
+  name: 'Curriculum Card Completed',
   args: {
     progressState: 'completed'
   }
@@ -68,6 +71,7 @@ export const CurriculumCardBeta = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
+  name: 'Curriculum Card Beta',
   args: {
     beta: true
   }
@@ -76,6 +80,7 @@ export const CurriculumCardAlternativeSubtitle = {
   render: args => /*#__PURE__*/_jsx(CurriculumCard, {
     ...args
   }),
+  name: 'Curriculum Card Alternative Subtitle',
   args: {
     showAltSubtitle: true,
     scope: {
@@ -124,6 +129,7 @@ export const CareerPathVariant = {
       })
     })]
   }),
+  name: 'Career Path Variant',
   args: {
     text: 'Career Path',
     title: 'Front-End Engineer',
@@ -150,6 +156,7 @@ export const HorizontalCurriculumCard = {
       })
     })
   }),
+  name: 'Horizontal Curriculum Card',
   args: {
     text: 'Career Path',
     title: 'Front-End Engineer',

package/dist/stories/Molecules/EmptySection.stories.js

@@ -163,5 +163,6 @@ export const Playground = {
     children: /*#__PURE__*/_jsx(FillButton, {
       children: "Do Something"
     })
-  })
+  }),
+  name: 'Playground'
 };

package/dist/stories/Molecules/EnhancedBanner.stories.js

@@ -1,4 +1,4 @@
-import { action } from 'storybook/actions';
+import { action } from '@storybook/addon-actions';
 import { EnhancedBanner } from '../../Banner/EnhancedBanner';
 const meta = {
   title: 'Molecules/Enhanced Banner',

package/dist/stories/Molecules/HubCard.stories.js

@@ -20,6 +20,7 @@ export const BackgroundRight = {
   render: args => /*#__PURE__*/_jsx(HubCard, {
     ...args
   }),
+  name: 'Background Right',
   args: {
     backgroundImage: 'https://static-assets.codecademy.com/assets/components/cards/explore-category-card/subject/data-science.svg',
     backgroundPosition: 'right'

package/dist/stories/Molecules/NotificationList.stories.js

@@ -1,4 +1,4 @@
-import { action } from 'storybook/actions';
+import { action } from '@storybook/addon-actions';
 import { NotificationList } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 const notifications = [{
@@ -93,6 +93,7 @@ export const Empty = {
   render: args => /*#__PURE__*/_jsx(NotificationList, {
     ...args
   }),
+  name: 'Empty',
   args: {
     notifications: []
   }

package/dist/stories/Molecules/Testimonial.stories.js

@@ -28,7 +28,8 @@ export const Default = {
 export const LightMode = {
   render: args => /*#__PURE__*/_jsx(Testimonial, {
     ...args
-  })
+  }),
+  name: 'Light Mode'
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -42,18 +43,21 @@ export const DarkMode = {
         ...args
       })
     })
-  })
+  }),
+  name: 'Dark Mode'
 };
 export const SmallLight = {
   render: args => /*#__PURE__*/_jsx(Testimonial, {
     orientation: "vertical",
     ...args
-  })
+  }),
+  name: 'Small Light'
 };
 export const MediumDark = {
   render: args => /*#__PURE__*/_jsx(Testimonial, {
     ...args,
     orientation: "horizontal",
     hidePhoto: true
-  })
+  }),
+  name: 'Medium Dark'
 };

package/dist/stories/Organisms/GlobalFooter.stories.js

@@ -17,7 +17,8 @@ export const HidePricing = {
   render: args => /*#__PURE__*/_jsx(GlobalFooter, {
     hidePricing: true,
     ...args
-  })
+  }),
+  name: 'Hide Pricing'
 };
 export const ClickableMadeIn = {
   render: args => /*#__PURE__*/_jsx(GlobalFooter, {

package/dist/stories/Organisms/GlobalHeader/About.stories.js

@@ -131,5 +131,6 @@ export const Loading = {
       onSearchAsYouType: () => {}
     },
     type: "loading"
-  })
+  }),
+  name: 'Loading'
 };

package/dist/stories/Organisms/GlobalHeader/Bootcamp.stories.js

@@ -27,5 +27,6 @@ export const Bootcamp = {
     },
     type: "bootcamp",
     bootcampSlug: "bootcamp-slug"
-  })
+  }),
+  name: 'Bootcamp'
 };

package/dist/stories/Organisms/GlobalHeader/Enterprise.stories.js

@@ -31,7 +31,8 @@ export const Enterprise = {
       displayName: 'Kallie',
       isAccountManager: true
     }
-  })
+  }),
+  name: 'Enterprise'
 };
 export const BusinessAccountManagerPro = {
   render: () => /*#__PURE__*/_jsx(GlobalHeader, {

package/dist/stories/Organisms/GlobalHeader/Simple.stories.js

@@ -26,5 +26,6 @@ export const Simple = {
       onSearchAsYouType: () => {}
     },
     type: "simple"
-  })
+  }),
+  name: 'Simple'
 };

package/dist/stories/Organisms/GlobalPage.stories.js

@@ -78,6 +78,7 @@ export const Banner = {
       })
     })
   }),
+  name: 'Banner',
   args: {
     ...defaultArgs,
     banner: {
@@ -103,6 +104,7 @@ export const Modal = {
       })
     })
   }),
+  name: 'Modal',
   args: {
     ...defaultArgs,
     modal: {

package/dist/stories/Organisms/LayoutMenu.stories.js

@@ -55,7 +55,8 @@ export const WithSelectedItem = {
   render: args => /*#__PURE__*/_jsx(LayoutMenu, {
     ...args,
     selectedItem: "python"
-  })
+  }),
+  name: 'With Selected Item'
 };
 export const WithAdditionalLinks = {
   render: args => /*#__PURE__*/_jsxs(LayoutMenu, {
@@ -73,7 +74,8 @@ export const WithAdditionalLinks = {
         children: "Where do I begin?"
       })
     })]
-  })
+  }),
+  name: 'With Additional Links'
 };
 export const WithAdditionalLinksOnTopAndBottom = {
   render: args => /*#__PURE__*/_jsx(LayoutMenu, {
@@ -235,5 +237,6 @@ export const WithSetMenuHeight = {
         children: "Where do I begin?"
       })
     })]
-  })
+  }),
+  name: 'With Set Menu Height'
 };

package/dist/stories/Organisms/LayoutMenuVariant.stories.js

@@ -62,7 +62,8 @@ export const WithAdditionalLinks = {
         children: "Where do I begin?"
       })
     })
-  })
+  }),
+  name: 'With Additional Links'
 };
 export const WithAdditionalLinksOnTopAndBottom = {
   render: args => /*#__PURE__*/_jsx(LayoutMenuVariant.LayoutMenu, {
@@ -218,5 +219,6 @@ export const WithSetMenuHeight = {
         children: "Where do I begin?"
       })
     })
-  })
+  }),
+  name: 'With Set Menu Height'
 };

package/dist/stories/Organisms/PageFeatures.stories.js

@@ -48,12 +48,14 @@ export default meta;
 export const FeaturedInfo = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
-  })
+  }),
+  name: 'Featured Info'
 };
 export const FeaturedImages = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
+  name: 'Featured Images',
   args: {
     featuresMedia: 'image'
   }
@@ -62,6 +64,7 @@ export const FeaturedIcons = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
+  name: 'Featured Icons',
   args: {
     featuresMedia: 'icon'
   }
@@ -70,6 +73,7 @@ export const FeaturedStats = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
+  name: 'Featured Stats',
   args: {
     featuresMedia: 'stat',
     features: [{
@@ -91,6 +95,7 @@ export const FeaturesGrid = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
+  name: 'Features Grid',
   args: {
     maxCols: 3,
     featuresMedia: 'icon'
@@ -100,6 +105,7 @@ export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PageFeatures, {
     ...args
   }),
+  name: 'Without Description',
   args: {
     featuresMedia: 'icon',
     desc: undefined,
@@ -123,6 +129,7 @@ export const RegularButton = {
       buttonType: 'fill'
     }
   }),
+  name: 'Regular Button',
   args: {
     featuresMedia: 'image'
   }
@@ -135,6 +142,7 @@ export const DarkMode = {
       ...args
     })
   }),
+  name: 'Dark Mode',
   args: {
     featuresMedia: 'icon'
   }

package/dist/stories/Organisms/PageHero.stories.js

@@ -46,13 +46,15 @@ export const Video = {
       autoplay: true
     },
     title: "What's it like to be a Software Engineer"
-  })
+  }),
+  name: 'Video'
 };
 export const ShortText = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     textLength: "short"
-  })
+  }),
+  name: 'Short Text'
 };
 export const RegularButton = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
@@ -61,19 +63,22 @@ export const RegularButton = {
       ...ctaArgs,
       buttonType: 'fill'
     }
-  })
+  }),
+  name: 'Regular Button'
 };
 export const WithoutButton = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     cta: undefined
-  })
+  }),
+  name: 'Without Button'
 };
 export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     desc: undefined
-  })
+  }),
+  name: 'Without Description'
 };
 export const Eyebrow = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
@@ -82,7 +87,8 @@ export const Eyebrow = {
       text: 'Hello there'
     },
     textLength: "short"
-  })
+  }),
+  name: 'Eyebrow'
 };
 export const AccentEyebrow = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
@@ -92,20 +98,23 @@ export const AccentEyebrow = {
       accent: true
     },
     textLength: "short"
-  })
+  }),
+  name: 'Accent Eyebrow'
 };
 export const ShowImageOnMobile = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     showImageOnMobile: true,
     textLength: "short"
-  })
+  }),
+  name: 'Show Image On Mobile'
 };
 export const WithoutMedia = {
   render: args => /*#__PURE__*/_jsx(PageHero, {
     ...args,
     media: undefined
-  })
+  }),
+  name: 'Without Media'
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -117,7 +126,8 @@ export const DarkMode = {
         text: 'Hello there'
       }
     })
-  })
+  }),
+  name: 'Dark Mode'
 };
 export const PausableImage = {
   render: args => /*#__PURE__*/_jsx(PageHero, {