@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/stories/Molecules/DropdownButton.stories.js

@@ -0,0 +1,207 @@
+import { Box, FlexBox } from '@codecademy/gamut';
+import { SparkleIcon } from '@codecademy/gamut-icons';
+import { DropdownButton } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const items = [{
+  id: 'one',
+  text: 'I have an href',
+  href: '#'
+}, {
+  id: 'two',
+  text: 'I have an onClick',
+  // eslint-disable-next-line no-console
+  clickHandler: () => console.log('hi')
+}];
+const extraItems = [{
+  id: 'three',
+  text: 'I have an href & onClick',
+  href: '#',
+  // eslint-disable-next-line no-console
+  clickHandler: () => console.log('hi')
+}, 'separator', {
+  id: 'four',
+  text: 'I have an href & onClick & icon',
+  href: '#',
+  // eslint-disable-next-line no-console
+  clickHandler: () => console.log('hi'),
+  icon: SparkleIcon
+}];
+const meta = {
+  component: DropdownButton,
+  args: {
+    buttonType: 'fill',
+    dropdownItems: items,
+    variant: 'primary'
+  },
+  parameters: {
+    controls: {
+      include: ['align', 'buttonType', 'children', 'dropDownItems', 'horizontalOffset', 'iconSize', 'isMenu', 'onClick', 'size', 'tipProps', 'variant', 'verticalOffset']
+    }
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    dropdownItems: [...items, ...extraItems],
+    isMenu: false
+  },
+  render: args => /*#__PURE__*/_jsx(DropdownButton, {
+    ...args,
+    children: "click me"
+  }),
+  name: 'DropdownButton'
+};
+export const DropdownButtonTypes = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    justifyContent: "space-between",
+    p: 40,
+    children: [/*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "fill",
+        children: "Fill"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "stroke",
+        children: "Stroke"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "text",
+        children: "Text"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "kebab"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "horizontalKebab"
+      })
+    })]
+  })
+};
+export const DropdownButtonVariants = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    justifyContent: "space-around",
+    children: [/*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "stroke",
+        children: "Stroke primary"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "stroke",
+        variant: "secondary",
+        children: "Stroke secondary"
+      })
+    })]
+  })
+};
+export const DropdownTextButtonSizes = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    justifyContent: "space-around",
+    children: [/*#__PURE__*/_jsx(Box, {
+      alignSelf: "center",
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "fill",
+        size: "small",
+        children: "Fill small"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      alignSelf: "center",
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "fill",
+        size: "normal",
+        children: "Fill normal"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      alignSelf: "center",
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "fill",
+        size: "large",
+        children: "Fill large"
+      })
+    })]
+  })
+};
+export const DropdownIconButtonSizes = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    row: true,
+    justifyContent: "space-around",
+    mt: 16,
+    children: [/*#__PURE__*/_jsx(Box, {
+      alignSelf: "center",
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "kebab",
+        size: "small",
+        iconSize: 12
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      alignSelf: "center",
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "kebab",
+        size: "normal"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      alignSelf: "center",
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "kebab",
+        size: "large",
+        iconSize: 20
+      })
+    })]
+  })
+};
+export const DropdownPopoverAlignment = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    row: true,
+    justifyContent: "space-around",
+    mt: 16,
+    children: [/*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "text",
+        size: "small",
+        align: "left",
+        children: "Align left"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      width: "fit-content",
+      children: /*#__PURE__*/_jsx(DropdownButton, {
+        ...args,
+        buttonType: "text",
+        size: "small",
+        align: "right",
+        children: "Align right"
+      })
+    })]
+  })
+};

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

@@ -0,0 +1,167 @@
+import { Column, FillButton, LayoutGrid, Text } from '@codecademy/gamut';
+import { NumberBlocks } from '@codecademy/gamut-illustrations';
+import { DropdownButton, EmptySection } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: EmptySection,
+  args: {
+    bodyText: 'Body text',
+    headingText: 'Heading text',
+    illustration: NumberBlocks
+  }
+};
+export default meta;
+export const IllustrationOnTheRight = {
+  render: args => /*#__PURE__*/_jsx(EmptySection, {
+    ...args,
+    children: /*#__PURE__*/_jsx(FillButton, {
+      children: "Do Something"
+    })
+  }),
+  name: 'Illustration on the right'
+};
+export const IllustrationOnTheLeft = {
+  render: args => /*#__PURE__*/_jsx(EmptySection, {
+    ...args,
+    children: /*#__PURE__*/_jsx(FillButton, {
+      children: "Do Something"
+    })
+  }),
+  name: 'Illustration on the left',
+  args: {
+    illustrationPosition: 'left'
+  }
+};
+export const DotsStretchToTheLeft = {
+  render: args => /*#__PURE__*/_jsx(EmptySection, {
+    ...args,
+    children: /*#__PURE__*/_jsx(FillButton, {
+      children: "Do Something"
+    })
+  }),
+  name: 'Dots stretch to the left'
+};
+export const DotsStretchToTheRight = {
+  render: args => /*#__PURE__*/_jsx(EmptySection, {
+    ...args,
+    children: /*#__PURE__*/_jsx(FillButton, {
+      children: "Do Something"
+    })
+  }),
+  name: 'Dots stretch to the right',
+  args: {
+    stretchDirection: 'right'
+  }
+};
+export const UsingADropdownButton = {
+  render: args => /*#__PURE__*/_jsx(EmptySection, {
+    ...args,
+    children: /*#__PURE__*/_jsx(DropdownButton, {
+      dropdownItems: [{
+        id: '1',
+        text: 'Option 1'
+      }, {
+        id: '2',
+        text: 'Option 2'
+      }, {
+        id: '3',
+        text: 'Option 3'
+      }],
+      children: "Click me!"
+    })
+  }),
+  name: 'Using a dropdown button',
+  args: {
+    stretchDirection: 'left'
+  }
+};
+export const AnotherSectionOnTheLeft = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 4,
+        md: 3
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        children: `<other section>`
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 8,
+        md: 9
+      },
+      children: /*#__PURE__*/_jsx(EmptySection, {
+        ...args,
+        children: /*#__PURE__*/_jsx(DropdownButton, {
+          dropdownItems: [{
+            id: '1',
+            text: 'Option 1'
+          }, {
+            id: '2',
+            text: 'Option 2'
+          }, {
+            id: '3',
+            text: 'Option 3'
+          }],
+          children: "Click me!"
+        })
+      })
+    })]
+  }),
+  name: 'Another section on the left',
+  args: {
+    stretchDirection: 'right'
+  }
+};
+export const AnotherSectionOnTheRight = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsxs(Column, {
+      size: {
+        _: 12,
+        sm: 8,
+        md: 9
+      },
+      children: [/*#__PURE__*/_jsx(EmptySection, {
+        ...args,
+        children: /*#__PURE__*/_jsx(DropdownButton, {
+          dropdownItems: [{
+            id: '1',
+            text: 'Option 1'
+          }, {
+            id: '2',
+            text: 'Option 2'
+          }, {
+            id: '3',
+            text: 'Option 3'
+          }],
+          children: "Click me!"
+        })
+      }), ' ']
+    }), /*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 4,
+        md: 3
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        children: `<other section>`
+      })
+    })]
+  }),
+  name: 'Another section on the right',
+  args: {
+    stretchDirection: 'left'
+  }
+};
+export const Playground = {
+  render: args => /*#__PURE__*/_jsx(EmptySection, {
+    ...args,
+    children: /*#__PURE__*/_jsx(FillButton, {
+      children: "Do Something"
+    })
+  })
+};

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

@@ -0,0 +1,104 @@
+import { action } from 'storybook/actions';
+import { EnhancedBanner } from '../../Banner/EnhancedBanner';
+const meta = {
+  title: 'Molecules/Enhanced Banner',
+  component: EnhancedBanner,
+  argTypes: {
+    header: {
+      control: 'text',
+      description: 'Main heading text for the enhanced banner'
+    },
+    subheader: {
+      control: 'text',
+      description: 'Secondary descriptive text'
+    },
+    variant: {
+      control: 'select',
+      options: ['navy', 'yellow', 'subtle'],
+      description: 'Visual style variant'
+    },
+    cta: {
+      control: 'object',
+      description: 'Call-to-action object: { title, href }'
+    },
+    countdownTo: {
+      control: 'text',
+      description: 'ISO date string for countdown timer (e.g., "2024-12-31T23:59:59Z")'
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Callback when banner is closed'
+    },
+    onCtaClick: {
+      action: 'cta-clicked',
+      description: 'Callback when CTA button is clicked'
+    },
+    onCountdownExpire: {
+      action: 'countdown-expired',
+      description: 'Callback when countdown timer expires'
+    }
+  },
+  args: {
+    variant: 'navy',
+    onClose: action('banner-closed'),
+    onCtaClick: action('cta-clicked'),
+    onCountdownExpire: action('countdown-expired')
+  }
+};
+export default meta;
+export const WithCountdownTimer = {
+  args: {
+    header: '🔥 Limited Time Offer',
+    subheader: 'Save 50% on annual Pro subscription',
+    cta: {
+      title: 'Claim Offer',
+      href: '/limited-offer'
+    },
+    countdownTo: (() => {
+      const futureDate = new Date();
+      futureDate.setHours(futureDate.getHours() + 24);
+      return futureDate.toISOString();
+    })()
+  }
+};
+export const WithoutCountdownTimer = {
+  args: {
+    header: '⭐ Upgrade to Pro',
+    subheader: 'Unlock unlimited access to all courses and projects',
+    cta: {
+      title: 'Start Free Trial',
+      href: '/pro/trial'
+    }
+  }
+};
+export const YellowVariant = {
+  args: {
+    variant: 'yellow',
+    header: '⭐ System Maintenance Scheduled',
+    subheader: 'Platform will be offline for updates',
+    cta: {
+      title: 'Learn More',
+      href: '/maintenance'
+    }
+  }
+};
+export const SubtleVariant = {
+  args: {
+    variant: 'subtle',
+    header: '💡 Pro Tip',
+    subheader: 'Make the most of your learning experience',
+    cta: {
+      title: 'Practice Mode',
+      href: '/practice-mode'
+    }
+  }
+};
+export const WithoutSubheader = {
+  args: {
+    header: '🎉 Welcome to the Platform',
+    cta: {
+      title: 'Get Started',
+      href: '/get-started'
+    }
+  }
+};

package/dist/stories/Molecules/ErrorContents.stories.js

@@ -0,0 +1,19 @@
+import { ErrorContents } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: ErrorContents
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(ErrorContents, {
+    ...args
+  }),
+  name: 'ErrorContents'
+};
+export const SupportInformation = {
+  render: args => /*#__PURE__*/_jsx(ErrorContents, {
+    ...args,
+    supportInformation: [['User ID', 'abc123'], ['Timestamp', '123456789']]
+  }),
+  name: 'SupportInformation'
+};

package/dist/stories/Molecules/GridCollapse.stories.js

@@ -0,0 +1,42 @@
+import { FlexBox } from '@codecademy/gamut';
+import { GridCollapse } from '../../index';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: GridCollapse,
+  args: {
+    as: 'ol',
+    columnCount: {
+      _: 3
+    },
+    initialMaxShown: {
+      _: 6
+    },
+    pageSize: {
+      _: 6
+    },
+    onExpandClick: () => {},
+    expandLabel: 'Show more',
+    collapseLabel: 'Show fewer',
+    gap: 8
+  }
+};
+export default meta;
+const Item = ({
+  number
+}) => /*#__PURE__*/_jsxs(FlexBox, {
+  as: "li",
+  p: 8,
+  background: "#eee",
+  borderRadius: "md",
+  center: true,
+  children: ["Item ", number + 1]
+});
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(GridCollapse, {
+    ...args,
+    children: [...Array(20)].map((_, i) => /*#__PURE__*/_jsx(Item, {
+      number: i
+    }))
+  }),
+  name: 'GridCollapse'
+};

package/dist/stories/Molecules/HorizontalScrollMenu.examples.d.ts

@@ -0,0 +1 @@
+export declare const HorizontalScrollMenuExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Molecules/HorizontalScrollMenu.examples.js

@@ -0,0 +1,67 @@
+import { Box, ContentContainer } from '@codecademy/gamut';
+import { ContainerDifficulty, CurriculumCard, HorizontalScrollMenu } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const courseData = [{
+  id: 'a',
+  title: 'JavaScript',
+  difficulty: ContainerDifficulty.Beginner,
+  scope: {
+    Lesson: 24
+  },
+  text: 'course'
+}, {
+  id: 'b',
+  title: 'Python',
+  difficulty: ContainerDifficulty.Beginner,
+  scope: {
+    Lesson: 32
+  },
+  text: 'course'
+}, {
+  id: 'c',
+  title: 'Go',
+  difficulty: ContainerDifficulty.Beginner,
+  scope: {
+    Lesson: 5
+  },
+  text: 'course'
+}, {
+  id: 'd',
+  title: 'React',
+  difficulty: ContainerDifficulty.Beginner,
+  scope: {
+    Lesson: 18
+  },
+  text: 'course'
+}, {
+  id: 'e',
+  title: 'Intro to Django',
+  difficulty: ContainerDifficulty.Beginner,
+  scope: {
+    Lesson: 29
+  },
+  text: 'course'
+}, {
+  id: 'f',
+  title: 'PHP',
+  difficulty: ContainerDifficulty.Beginner,
+  scope: {
+    Lesson: 52
+  },
+  text: 'course'
+}];
+export const HorizontalScrollMenuExample = () => {
+  return /*#__PURE__*/_jsx(ContentContainer, {
+    my: 32,
+    children: /*#__PURE__*/_jsx(HorizontalScrollMenu, {
+      children: courseData.map(props => /*#__PURE__*/_jsx(Box, {
+        minWidth: 400,
+        maxWidth: 400,
+        mx: 16,
+        children: /*#__PURE__*/_jsx(CurriculumCard, {
+          ...props
+        })
+      }, props.id))
+    })
+  });
+};

package/dist/stories/Molecules/HorizontalScrollMenu.stories.js

@@ -0,0 +1,11 @@
+import { HorizontalScrollMenu } from '../../index';
+import { HorizontalScrollMenuExample } from './HorizontalScrollMenu.examples';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: HorizontalScrollMenu
+};
+export default meta;
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(HorizontalScrollMenuExample, {}),
+  name: 'Horizontal Scroll Menu'
+};

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

@@ -0,0 +1,27 @@
+import { HubCard } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: HubCard,
+  args: {
+    title: 'Subject Title',
+    eyebrowTitle: 'Card Eyebrow',
+    backgroundPosition: 'left',
+    backgroundImage: 'https://static-assets.codecademy.com/assets/components/cards/explore-category-card/language/javascript.svg'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(HubCard, {
+    ...args
+  }),
+  name: 'HubCard'
+};
+export const BackgroundRight = {
+  render: args => /*#__PURE__*/_jsx(HubCard, {
+    ...args
+  }),
+  args: {
+    backgroundImage: 'https://static-assets.codecademy.com/assets/components/cards/explore-category-card/subject/data-science.svg',
+    backgroundPosition: 'right'
+  }
+};

package/dist/stories/Molecules/InfoCard.stories.js

@@ -0,0 +1,30 @@
+import { InfoCard } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: InfoCard,
+  args: {
+    topText: 'Portfolio Project ',
+    title: 'Portfolio Website',
+    subtitle: 'This is a portfolio project.',
+    body: "In this project, you'll use knowledge of Express.js to build a small JSON API to serve up famous and interesting quotes about computers, technology, and programming.",
+    href: 'https://www.codecademy.com/learn'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(InfoCard, {
+    ...args
+  }),
+  name: 'Info Card'
+};
+export const InfoCardWithBottomTags = {
+  render: args => /*#__PURE__*/_jsx(InfoCard, {
+    ...args
+  }),
+  name: 'Info Card with bottom tags',
+  args: {
+    bottomLeftText: 'Independent, 5hrs',
+    bottomRightTagText: 'Portfolio Ready',
+    bottomRightTagColor: 'pink'
+  }
+};