@codecademy/brand 3.28.0-alpha.e4c902328e.0 → 3.29.0-alpha.034f48155f.0

package/dist/stories/Organisms/PagePrefooter.stories.js

@@ -33,22 +33,19 @@ export const RegularButton = {
       ...ctaArgs,
       buttonType: 'fill'
     }
-  }),
-  name: 'Regular Button'
+  })
 };
 export const WithoutButton = {
   render: args => /*#__PURE__*/_jsx(PagePrefooter, {
     ...args,
     cta: undefined
-  }),
-  name: 'Without Button'
+  })
 };
 export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PagePrefooter, {
     ...args,
     desc: undefined
-  }),
-  name: 'Without Description'
+  })
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -57,6 +54,5 @@ export const DarkMode = {
     children: /*#__PURE__*/_jsx(PagePrefooter, {
       ...args
     })
-  }),
-  name: 'Dark Mode'
+  })
 };

package/dist/stories/Organisms/PageSingleFeature.stories.js

@@ -28,8 +28,7 @@ export default meta;
 export const SingleFeature = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
     ...args
-  }),
-  name: 'Single Feature'
+  })
 };
 export const Video = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -42,8 +41,7 @@ export const Video = {
       autoplay: true
     },
     title: "What's it like to be a Software Engineer"
-  }),
-  name: 'Video'
+  })
 };
 export const AdjustTheMediaWidth = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -61,24 +59,21 @@ export const RegularButton = {
       buttonType: 'fill'
     },
     mediaWidth: 4
-  }),
-  name: 'Regular Button'
+  })
 };
 export const WithoutButton = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
     ...args,
     cta: undefined,
     mediaWidth: 3
-  }),
-  name: 'Without Button'
+  })
 };
 export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
     ...args,
     desc: undefined,
     mediaWidth: 4
-  }),
-  name: 'Without Description'
+  })
 };
 export const Eyebrow = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -86,8 +81,7 @@ export const Eyebrow = {
     eyebrow: {
       text: 'Codecademy'
     }
-  }),
-  name: 'Eyebrow'
+  })
 };
 export const AccentEyebrow = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -96,8 +90,7 @@ export const AccentEyebrow = {
       text: 'Codecademy',
       accent: true
     }
-  }),
-  name: 'Accent Eyebrow'
+  })
 };
 export const HideImageOnMobile = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -111,8 +104,7 @@ export const WithoutMedia = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
     ...args,
     media: undefined
-  }),
-  name: 'Without Media'
+  })
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -124,8 +116,7 @@ export const DarkMode = {
         text: 'Codecademy'
       }
     })
-  }),
-  name: 'Dark Mode'
+  })
 };
 export const PausableImage = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -153,6 +144,5 @@ export const LinkableImage = {
     eyebrow: {
       text: 'Codecademy'
     }
-  }),
-  name: 'Linkable Image'
+  })
 };

package/dist/stories/Organisms/PageVideoGallery.stories.js

@@ -32,8 +32,7 @@ export default meta;
 export const VideoGallery = {
   render: args => /*#__PURE__*/_jsx(PageVideoGallery, {
     ...args
-  }),
-  name: 'Video Gallery'
+  })
 };
 export const RegularButton = {
   render: args => /*#__PURE__*/_jsx(PageVideoGallery, {
@@ -42,21 +41,18 @@ export const RegularButton = {
       ...ctaArgs,
       buttonType: 'fill'
     }
-  }),
-  name: 'Regular Button'
+  })
 };
 export const WithoutDescription = {
   render: args => /*#__PURE__*/_jsx(PageVideoGallery, {
     ...args,
     desc: undefined
-  }),
-  name: 'Without Description'
+  })
 };
 export const GalleryOnly = {
   render: args => /*#__PURE__*/_jsx(PageVideoGallery, {
     videos: args.videos
-  }),
-  name: 'Gallery Only'
+  })
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -65,6 +61,5 @@ export const DarkMode = {
     children: /*#__PURE__*/_jsx(PageVideoGallery, {
       ...args
     })
-  }),
-  name: 'Dark Mode'
+  })
 };

package/dist/stories/Organisms/ScoreSummary.stories.js

@@ -79,8 +79,7 @@ export const RowLayout = {
       slug: 'becp-22-going-off-platform-with-html-and-css',
       title: 'Going off-platform with HTML and CSS'
     }]
-  }),
-  name: 'Row Layout'
+  })
 };
 export const ColumnLayout = {
   render: args => /*#__PURE__*/_jsx(ScoreSummary, {
@@ -126,8 +125,7 @@ export const ColumnLayout = {
       slug: 'wdcp-22-practice-javascript-syntax-arrays-loops-objects-iterators',
       title: 'Practice JavaScript Syntax: Arrays, Loops, Objects, Iterators'
     }]
-  }),
-  name: 'Column Layout'
+  })
 };
 export const RowLayoutNoMaxWidth = {
   render: args => /*#__PURE__*/_jsx(ScoreSummary, {
@@ -214,8 +212,7 @@ export const Description = {
       slug: 'wdcp-22-practice-javascript-syntax-arrays-loops-objects-iterators',
       title: 'Practice JavaScript Syntax: Arrays, Loops, Objects, Iterators'
     }]
-  }),
-  name: 'Description'
+  })
 };
 export const DescriptionInColumnLayout = {
   render: args => /*#__PURE__*/_jsx(ScoreSummary, {
@@ -294,6 +291,5 @@ export const ColorfulIcons = {
     },
     trackSlug: undefined,
     untestedSubContent: []
-  }),
-  name: 'Colorful Icons'
+  })
 };

package/dist/svg.d.ts

@@ -1,5 +1,4 @@
 declare module '*.svg' {
-  type AssetURL = string;
   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
   const content: string;
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.28.0-alpha.e4c902328e.0",
+  "version": "3.29.0-alpha.034f48155f.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@splidejs/splide": "4.1.3",
+    "@types/recurly__recurly-js": "4.22.0",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "emojisplosion": "^2.6.1",

package/dist/AppHeader/AppHeaderElements/AppHeaderSection/NavTabs.d.ts

@@ -1,20 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
-interface NavTabPanelProps extends PropsWithChildren {
-    isActiveTab: boolean;
-    index: number;
-    id: string;
-}
-declare const NavTabPanel: ({ children, isActiveTab, index, id, }: NavTabPanelProps) => import("react/jsx-runtime").JSX.Element;
-declare const NavTabList: React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-    type: string;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const NavTab: ({ item, onSelect, isActive, onKeyDown, index, }: {
-    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
-    onSelect: (id: string, event?: React.MouseEvent, item?: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem) => void;
-    isActive: boolean;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    index: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export { NavTabPanel, NavTabList, NavTab };

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

@@ -1,126 +0,0 @@
-import { Box, FlexBox } from '@codecademy/gamut';
-import { ArrowChevronRightIcon } from '@codecademy/gamut-icons';
-import React, { useContext, useEffect, useRef } from 'react';
-import { AppHeaderDropdownContext } from '../AppHeaderDropdownProvider';
-import { NavIconButton, NavIconButtonContainer, NavigationButton, OverflowText, StyledNavTabPanel } from './elements';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Tab content, only one should be visible at a time
-const NavTabPanel = ({
-  children,
-  isActiveTab,
-  index,
-  id
-}) => {
-  return /*#__PURE__*/_jsx(StyledNavTabPanel, {
-    isFirst: index === 0,
-    role: "tabpanel",
-    id: `${id}-panel`,
-    "aria-labelledby": `${id}-tab`,
-    display: isActiveTab ? 'block' : 'none',
-    gridColumn: "2 / span 12",
-    gridRow: "1 / span 8",
-    bg: "background",
-    px: 32,
-    pt: 16,
-    pb: 24,
-    children: children
-  });
-};
-
-// Holds all of the tab buttons
-const NavTabList = /*#__PURE__*/React.forwardRef(({
-  children,
-  type
-}, ref) => {
-  return /*#__PURE__*/_jsx(FlexBox, {
-    role: "tablist",
-    "aria-label": `${type.replace('-dropdown', '')} navigation`,
-    "aria-orientation": "vertical",
-    flexDirection: "column",
-    gap: 8,
-    ref: ref,
-    children: children
-  });
-});
-
-// Tab button, lets you switch between tabs
-// at larger breakpoints we use a normal button, at smaller
-// breakpoints we use an IconButton.
-const NavTab = ({
-  item,
-  onSelect,
-  isActive,
-  onKeyDown,
-  index
-}) => {
-  const sharedButtonProps = {
-    role: 'tab',
-    'aria-selected': isActive,
-    'aria-controls': `${item.id}-panel`,
-    onClick: event => onSelect(item.id, event, item),
-    onKeyDown,
-    tabIndex: isActive ? 0 : -1,
-    isActive,
-    id: `${item.id}-tab`
-  };
-  const buttonRef = useRef(null);
-  const {
-    setFirstItemRef
-  } = useContext(AppHeaderDropdownContext);
-  useEffect(() => {
-    if (index === 0 && buttonRef.current) {
-      setFirstItemRef?.(buttonRef.current);
-    }
-  }, [index, setFirstItemRef]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(NavigationButton, {
-      ref: buttonRef,
-      ...sharedButtonProps,
-      children: [/*#__PURE__*/_jsxs(FlexBox, {
-        gap: 8,
-        alignItems: "center",
-        children: [item.icon && /*#__PURE__*/_jsx(Box, {
-          height: 24,
-          width: 24,
-          children: /*#__PURE__*/_jsx(item.icon, {
-            size: 24
-          })
-        }), /*#__PURE__*/_jsx(OverflowText, {
-          variant: "p-large",
-          maxWidth: {
-            _: '110px',
-            md: 'none'
-          },
-          children: item.text
-        })]
-      }), isActive && /*#__PURE__*/_jsx(Box, {
-        display: {
-          _: 'none',
-          sm: 'block'
-        },
-        mt: 4,
-        children: /*#__PURE__*/_jsx(ArrowChevronRightIcon, {
-          "data-testid": "chevron-right-icon"
-        })
-      })]
-    }), item.icon && /*#__PURE__*/_jsx(NavIconButtonContainer, {
-      display: {
-        _: 'none',
-        xs: 'grid',
-        sm: 'none'
-      },
-      ...sharedButtonProps,
-      children: /*#__PURE__*/_jsx(NavIconButton, {
-        icon: item.icon,
-        tip: item.text,
-        tipProps: {
-          alignment: 'right-center',
-          narrow: false,
-          placement: 'floating'
-        },
-        "aria-label": item.text
-      })
-    })]
-  });
-};
-export { NavTabPanel, NavTabList, NavTab };