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

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

@@ -33,19 +33,22 @@ 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, {
@@ -54,5 +57,6 @@ export const DarkMode = {
     children: /*#__PURE__*/_jsx(PagePrefooter, {
       ...args
     })
-  })
+  }),
+  name: 'Dark Mode'
 };

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

@@ -28,7 +28,8 @@ export default meta;
 export const SingleFeature = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
     ...args
-  })
+  }),
+  name: 'Single Feature'
 };
 export const Video = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -41,7 +42,8 @@ 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, {
@@ -59,21 +61,24 @@ 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, {
@@ -81,7 +86,8 @@ export const Eyebrow = {
     eyebrow: {
       text: 'Codecademy'
     }
-  })
+  }),
+  name: 'Eyebrow'
 };
 export const AccentEyebrow = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -90,7 +96,8 @@ export const AccentEyebrow = {
       text: 'Codecademy',
       accent: true
     }
-  })
+  }),
+  name: 'Accent Eyebrow'
 };
 export const HideImageOnMobile = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -104,7 +111,8 @@ export const WithoutMedia = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
     ...args,
     media: undefined
-  })
+  }),
+  name: 'Without Media'
 };
 export const DarkMode = {
   render: args => /*#__PURE__*/_jsx(Background, {
@@ -116,7 +124,8 @@ export const DarkMode = {
         text: 'Codecademy'
       }
     })
-  })
+  }),
+  name: 'Dark Mode'
 };
 export const PausableImage = {
   render: args => /*#__PURE__*/_jsx(PageSingleFeature, {
@@ -144,5 +153,6 @@ export const LinkableImage = {
     eyebrow: {
       text: 'Codecademy'
     }
-  })
+  }),
+  name: 'Linkable Image'
 };

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

@@ -32,7 +32,8 @@ export default meta;
 export const VideoGallery = {
   render: args => /*#__PURE__*/_jsx(PageVideoGallery, {
     ...args
-  })
+  }),
+  name: 'Video Gallery'
 };
 export const RegularButton = {
   render: args => /*#__PURE__*/_jsx(PageVideoGallery, {
@@ -41,18 +42,21 @@ 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, {
@@ -61,5 +65,6 @@ export const DarkMode = {
     children: /*#__PURE__*/_jsx(PageVideoGallery, {
       ...args
     })
-  })
+  }),
+  name: 'Dark Mode'
 };

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

@@ -79,7 +79,8 @@ 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, {
@@ -125,7 +126,8 @@ 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, {
@@ -212,7 +214,8 @@ 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, {
@@ -291,5 +294,6 @@ export const ColorfulIcons = {
     },
     trackSlug: undefined,
     untestedSubContent: []
-  })
+  }),
+  name: 'Colorful Icons'
 };

package/dist/svg.d.ts

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

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.29.0-alpha.7e80c447ff.0",
+  "version": "3.29.0-alpha.9e88d7b76a.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/AppHeaderSection.test.js

@@ -1,193 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { GlobalHeaderDynamicDataContext, GlobalHeaderItemClickContext } from '../../../GlobalHeader/context';
-import { CATALOG_NAV_SECTIONS } from '../AppHeaderCatalogDropdown/consts';
-import { MarketingBanner } from '../AppHeaderCatalogDropdown/MarketingBanner';
-import { AppHeaderSection } from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-const mockOnClick = jest.fn();
-const mockKeyDownEvents = jest.fn();
-const mockItem = {
-  text: 'catalog',
-  id: 'the-catalog',
-  type: 'catalog-dropdown',
-  trackingTarget: 'catalog-dropdown'
-};
-const defaultProps = {
-  item: mockItem,
-  isOpen: true,
-  keyDownEvents: mockKeyDownEvents
-};
-const mockContextValue = {
-  globalHeaderItemClick: mockOnClick
-};
-const mockDataContextValue = {
-  globalHeaderDynamicData: {
-    catalogDropdown: {
-      banner: {
-        href: 'https://example.com',
-        text: 'Test banner text'
-      },
-      skillPaths: {
-        totalSkillPathCount: 0,
-        promotedSkillPaths: []
-      },
-      careerPaths: {
-        totalCareerPathCount: 0,
-        promotedCareerPaths: []
-      },
-      certificationPaths: {
-        totalCertificationPathCount: 0
-      }
-    }
-  }
-};
-describe('AppHeaderSection', () => {
-  const createWrapper = (dataContextValue = mockDataContextValue) => ({
-    children
-  }) => /*#__PURE__*/_jsx(GlobalHeaderDynamicDataContext.Provider, {
-    value: dataContextValue,
-    children: /*#__PURE__*/_jsx(GlobalHeaderItemClickContext.Provider, {
-      value: mockContextValue,
-      children: children
-    })
-  });
-  const renderView = setupRtl(AppHeaderSection, defaultProps).options({
-    wrapper: createWrapper()
-  });
-  it('renders the component ', () => {
-    const {
-      view
-    } = renderView({
-      navSections: CATALOG_NAV_SECTIONS,
-      handleClose: jest.fn(),
-      type: 'catalog-dropdown'
-    });
-    expect(view.getByRole('heading', {
-      name: 'Course topics'
-    })).toBeInTheDocument();
-  });
-  describe('marketing banner', () => {
-    const createRenderView = bannerData => setupRtl(AppHeaderSection, defaultProps).options({
-      wrapper: createWrapper({
-        globalHeaderDynamicData: {
-          catalogDropdown: {
-            banner: bannerData,
-            skillPaths: {
-              totalSkillPathCount: 0,
-              promotedSkillPaths: []
-            },
-            careerPaths: {
-              totalCareerPathCount: 0,
-              promotedCareerPaths: []
-            },
-            certificationPaths: {
-              totalCertificationPathCount: 0
-            }
-          }
-        }
-      })
-    });
-    it('renders the marketing banner when the banner text and href are present', () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.getByText('Test banner text')).toBeInTheDocument();
-    });
-    it('does not render the marketing banner when the banner href is empty', () => {
-      const {
-        view
-      } = createRenderView({
-        href: '',
-        text: 'Test banner text'
-      })({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.queryByText('Test banner text')).not.toBeInTheDocument();
-      expect(view.queryByTestId('marketing-banner')).not.toBeInTheDocument();
-    });
-    it('does not render the marketing banner when the banner text is empty', () => {
-      const {
-        view
-      } = createRenderView({
-        href: 'https://example.com',
-        text: ''
-      })({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.queryByTestId('marketing-banner')).not.toBeInTheDocument();
-    });
-    it('does not render the marketing banner when the banner text is empty', () => {
-      const {
-        view
-      } = createRenderView({
-        href: 'https://example.com',
-        text: ''
-      })({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown',
-        MarketingBanner
-      });
-      expect(view.queryByText('Test banner text')).not.toBeInTheDocument();
-    });
-  });
-  describe('tab navigation', () => {
-    it('starts with the first tab active by default', () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
-      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'true');
-    });
-    it('switches active tab when clicking on different sections', async () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const careerPathsButton = view.getByTestId('nav-section-career-paths');
-      await userEvent.click(careerPathsButton);
-      expect(careerPathsButton).toHaveAttribute('aria-expanded', 'true');
-      const courseTopicsButton = view.getByTestId('nav-section-course-topics');
-      expect(courseTopicsButton).toHaveAttribute('aria-expanded', 'false');
-    });
-    it('calls tracking with correct parameters when clicking nav section', async () => {
-      const {
-        view
-      } = renderView({
-        navSections: CATALOG_NAV_SECTIONS,
-        handleClose: jest.fn(),
-        type: 'catalog-dropdown'
-      });
-      const careerPathsButton = view.getByTestId('nav-section-career-paths');
-      await userEvent.click(careerPathsButton);
-      expect(mockOnClick).toHaveBeenCalledTimes(1);
-      expect(mockOnClick).toHaveBeenCalledWith(expect.anything(),
-      // event object
-      expect.objectContaining({
-        id: 'career-paths',
-        type: 'catalog-dropdown'
-      }) // tracking parameters
-      );
-    });
-  });
-});

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

@@ -1,21 +0,0 @@
-import { GamutIconProps } from '@codecademy/gamut-icons';
-import React, { PropsWithChildren } from 'react';
-import { AppHeaderCatalogDropdownItem, AppHeaderResourcesDropdownItem } from '../../shared';
-type NavSectionProps = PropsWithChildren & {
-    item: AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
-    isActiveTab: boolean;
-    setActiveTab: (tab: number) => void;
-    icon?: React.ComponentType<GamutIconProps>;
-    text: string;
-    index: number;
-    tabIndex?: number;
-};
-export declare const NavigationButton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    isActive: boolean;
-    index: number;
-}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-declare const NavSection: ({ isActiveTab, setActiveTab, icon: Icon, text, index, children, item, tabIndex, }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;
-export default NavSection;