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

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

@@ -0,0 +1,84 @@
+import { GearIcon, LayoutModuleIcon, PercipioIcon, PersonIcon, SupportIcon } from '@codecademy/gamut-icons';
+import { AppHeaderMobile, LogoLXStudio } from '../../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderMobile,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  args: {
+    action: () => {},
+    isEnterprise: true,
+    items: {
+      left: [{
+        id: 'render-element',
+        renderElement: () => /*#__PURE__*/_jsx(LogoLXStudio, {
+          maxWidth: "40vw",
+          width: "225px",
+          pb: 4
+        }),
+        type: 'render-element'
+      }],
+      right: [],
+      mainMenu: [{
+        id: 'menu',
+        text: 'Menu',
+        icon: LayoutModuleIcon,
+        isIconOnly: true,
+        popover: [{
+          id: 'sublink-1',
+          text: 'Percipio',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link',
+          icon: PercipioIcon
+        }],
+        trackingTarget: '',
+        type: 'dropdown'
+      }, {
+        id: 'profile-dropdown',
+        type: 'profile-dropdown',
+        avatar: 'https://pbs.twimg.com/media/F9QcGzgXEAAPqLo?format=jpg&name=small',
+        userDisplayName: 'cinnamoroll',
+        popover: [[{
+          id: 'sublink-1',
+          icon: PersonIcon,
+          text: 'My profile',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link'
+        }, {
+          id: 'sublink-2',
+          icon: GearIcon,
+          text: 'Settings',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link'
+        }, {
+          id: 'sublink-3',
+          icon: SupportIcon,
+          text: 'Help',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link'
+        }], [{
+          id: 'sublink-4',
+          icon: PersonIcon,
+          text: 'Log out',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link'
+        }]],
+        text: 'string;',
+        trackingTarget: 'string'
+      }]
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderMobile, {
+    ...args
+  }),
+  name: 'LXStudio AppHeaderMobile'
+};

package/dist/stories/Molecules/AppHeader/MockAppHeaderElements.d.ts

@@ -0,0 +1,5 @@
+import { AppHeaderLinkItem, AppHeaderProfileDropdownItem, AppHeaderSimpleDropdownItem } from '../../../index';
+export declare const MOCK_LINK: AppHeaderLinkItem;
+export declare const MOCK_DROPDOWN_1: AppHeaderSimpleDropdownItem;
+export declare const MOCK_DROPDOWN_2: AppHeaderSimpleDropdownItem;
+export declare const MOCK_PROFILE_DROPDOWN: AppHeaderProfileDropdownItem;

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

@@ -0,0 +1,90 @@
+import { CommunityIcon, GearIcon, HouseEntranceIcon, PersonIcon } from '@codecademy/gamut-icons';
+export const MOCK_LINK = {
+  id: 'home',
+  href: 'https://codecademy.com/',
+  icon: HouseEntranceIcon,
+  text: 'Home',
+  trackingTarget: 'nav-link',
+  type: 'link'
+};
+export const MOCK_DROPDOWN_1 = {
+  id: 'dropdown',
+  text: 'Dropdown Target',
+  icon: CommunityIcon,
+  popover: [{
+    id: 'sublink-1',
+    href: 'http://codecademy.com',
+    trackingTarget: 'tracking-target',
+    text: 'Link 1',
+    type: 'link'
+  }, {
+    id: 'sublink-2',
+    href: 'http://codecademy.com',
+    trackingTarget: 'tracking-target',
+    text: 'Link 2',
+    type: 'link'
+  }],
+  trackingTarget: 'tracking-target',
+  type: 'dropdown'
+};
+export const MOCK_DROPDOWN_2 = {
+  id: 'dropdown-target-2',
+  text: 'Resources Target',
+  icon: HouseEntranceIcon,
+  popover: [{
+    id: 'sublink-1',
+    text: 'Cheatsheets',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }, {
+    id: 'sublink-2',
+    text: 'Blog',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }],
+  trackingTarget: '',
+  type: 'dropdown'
+};
+export const MOCK_PROFILE_DROPDOWN = {
+  avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+  userDisplayName: 'Codey',
+  id: 'profile',
+  text: 'Profile',
+  popover: [[{
+    id: 'sublink-1',
+    icon: PersonIcon,
+    text: 'A Link With Icon',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }, {
+    id: 'sublink-2',
+    icon: GearIcon,
+    text: 'Another Link With Icon',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }], [{
+    id: 'sublink-3',
+    text: 'A Link In Another Section',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }, {
+    id: 'sublink-4',
+    text: 'Another Link',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }], [{
+    id: 'sublink-5',
+    text: 'One More Link',
+    href: 'http://codecademy.com',
+    trackingTarget: '',
+    type: 'link'
+  }]],
+  trackingTarget: 'profile',
+  type: 'profile-dropdown'
+};

package/dist/stories/Molecules/AvatarChooser.stories.js

@@ -0,0 +1,22 @@
+import { AvatarChooser } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AvatarChooser,
+  args: {
+    src: 'https://content.codecademy.com/courses/free/boba.svg'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AvatarChooser, {
+    ...args
+  }),
+  name: 'AvatarChooser'
+};
+export const AvatarChooserWithError = {
+  render: args => /*#__PURE__*/_jsx(AvatarChooser, {
+    ...args,
+    error: "Please upload a png or jpeg image"
+  }),
+  name: 'AvatarChooser with error'
+};

package/dist/stories/Molecules/BackToTopAnchor.stories.js

@@ -0,0 +1,51 @@
+import { BackToTopAnchor } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: BackToTopAnchor,
+  args: {
+    targetId: 'fakeTargetId',
+    onClick: () => {}
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(BackToTopAnchor, {
+    ...args
+  }),
+  name: 'BackToTopAnchor'
+};
+export const Inline = {
+  render: args => /*#__PURE__*/_jsx(BackToTopAnchor, {
+    ...args
+  }),
+  name: 'Standard Variant',
+  args: {
+    variant: 'inline'
+  }
+};
+export const Standard = {
+  render: args => /*#__PURE__*/_jsx(BackToTopAnchor, {
+    ...args
+  }),
+  name: 'Interface Variant',
+  args: {
+    variant: 'standard'
+  }
+};
+export const Small = {
+  render: args => /*#__PURE__*/_jsx(BackToTopAnchor, {
+    ...args
+  }),
+  name: 'Small Size',
+  args: {
+    showIcon: false,
+    size: 'small'
+  }
+};
+export const WithoutIcons = {
+  render: args => /*#__PURE__*/_jsx(BackToTopAnchor, {
+    showIcon: false,
+    ...args
+  }),
+  name: 'Without Arrow Icon'
+};

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

@@ -0,0 +1,112 @@
+import { Banner } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: Banner,
+  args: {
+    children: 'Happy Holidays! We have a Student discount for Codecademy **Pro**. [Learn More](https://gamut.codecademy.com)',
+    variant: 'navy'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  name: 'Banner'
+};
+export const Navy = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  args: {
+    children: 'Navy',
+    variant: 'navy'
+  }
+};
+export const Yellow = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  args: {
+    children: 'Yellow',
+    variant: 'yellow'
+  }
+};
+export const Subtle = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  args: {
+    children: 'Subtle',
+    variant: 'subtle'
+  }
+};
+export const NavyWithLink = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  name: 'Navy with link',
+  args: {
+    children: 'Navy but with a link! [Learn more](https://gamut.codecademy.com)',
+    variant: 'navy'
+  }
+};
+export const YellowWithLink = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  name: 'Yellow with link',
+  args: {
+    children: 'Yellow but with a link! [Learn more](https://gamut.codecademy.com)',
+    variant: 'yellow'
+  }
+};
+export const SubtleWithLink = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  name: 'Subtle with link',
+  args: {
+    children: 'Subtle but with a link! [Learn more](https://gamut.codecademy.com)',
+    variant: 'subtle'
+  }
+};
+export const NavyClose = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args,
+    onClose: () => {}
+  }),
+  name: 'Navy',
+  args: {
+    children: 'Navy but with a link and a close button! [Learn more](https://gamut.codecademy.com)',
+    variant: 'navy'
+  }
+};
+export const YellowClose = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args,
+    onClose: () => {}
+  }),
+  name: 'Yellow',
+  args: {
+    children: 'Yellow but with a link and a close button! [Learn more](https://gamut.codecademy.com)',
+    variant: 'yellow'
+  }
+};
+export const SubtleClose = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args,
+    onClose: () => {}
+  }),
+  name: 'Subtle',
+  args: {
+    children: 'Subtle but with a link and a close button! [Learn more](https://gamut.codecademy.com)',
+    variant: 'subtle'
+  }
+};
+export const CallToAction = {
+  render: args => /*#__PURE__*/_jsx(Banner, {
+    ...args
+  }),
+  name: 'Call to Action'
+};

package/dist/stories/Molecules/Carousel.stories.js

@@ -0,0 +1,47 @@
+import { Box, Text } from '@codecademy/gamut';
+import noop from 'lodash/fp/noop';
+import { Carousel } from '../../Carousel';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const items = [/*#__PURE__*/_jsx(Box, {
+  children: "Item 1"
+}), /*#__PURE__*/_jsx(Box, {
+  children: "Item 2"
+}), /*#__PURE__*/_jsx(Box, {
+  children: "Item 3"
+}), /*#__PURE__*/_jsx(Box, {
+  children: "Item 4"
+})];
+const title = /*#__PURE__*/_jsx(Text, {
+  variant: "title-sm",
+  children: "Example Carousel"
+});
+const meta = {
+  component: Carousel,
+  args: {
+    items: [],
+    onArrowClick: () => noop,
+    options: {},
+    title: /*#__PURE__*/_jsx(_Fragment, {}),
+    variant: 'catalog_home'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(Carousel, {
+    ...args,
+    items: items,
+    title: title
+  }),
+  name: 'Carousel'
+};
+export const PatternedBackground = {
+  render: args => /*#__PURE__*/_jsx(Carousel, {
+    ...args,
+    items: items,
+    title: title
+  }),
+  name: 'PatternedBackground',
+  args: {
+    patternedBackground: true
+  }
+};

package/dist/stories/Molecules/ContentGroupBaseCard.stories.js

@@ -0,0 +1,175 @@
+import { Column, FlexBox, LayoutGrid, Text } from '@codecademy/gamut';
+import { CheckFilledIcon } from '@codecademy/gamut-icons';
+import { ContentGroupBaseCard, ContentGroupBaseCardHeaderBackground, CourseDifficulty, EnrollmentStatus } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: ContentGroupBaseCard,
+  args: {
+    headerBackgroundColor: 'pink',
+    headerText: 'Course',
+    title: 'Python 101',
+    numLessons: 20,
+    href: '/learn/python-101',
+    onClick: () => {}
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+    ...args
+  }),
+  name: 'ContentGroupBaseCard'
+};
+export const ContentGroupBaseCardWithDifficulty = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 24,
+    pb: 8,
+    children: [/*#__PURE__*/_jsxs(Column, {
+      size: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        pb: 4,
+        children: "Beginner ('Friendly' is appended automatically)"
+      }), /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        difficulty: CourseDifficulty.Beginner
+      })]
+    }), /*#__PURE__*/_jsxs(Column, {
+      size: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        pb: 4,
+        children: "Intermediate"
+      }), /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        difficulty: CourseDifficulty.Intermediate
+      })]
+    }), /*#__PURE__*/_jsxs(Column, {
+      size: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        pb: 4,
+        children: "Advanced"
+      }), /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        difficulty: CourseDifficulty.Advanced
+      })]
+    })]
+  }),
+  name: 'ContentGroupBaseCard with Difficulty'
+};
+export const ContentGroupBaseCardWithDescription = {
+  render: args => /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+    ...args
+  }),
+  name: 'ContentGroupBaseCard with Description',
+  args: {
+    description: 'Filler text is text that shares some characteristics of a real written text, but is random or otherwise generated.'
+  }
+};
+export const ContentGroupBaseCardWithImage = {
+  render: args => /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+    ...args
+  }),
+  name: 'ContentGroupBaseCard with Image',
+  args: {
+    isFullSize: true,
+    imageSrc: 'https://static-assets.codecademy.com/components/curriculum/path/front-end-engineer-career-path/curriculum-card.svg'
+  }
+};
+export const ContentGroupBaseCardWithShadowVariants = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 24,
+    pb: 8,
+    children: [/*#__PURE__*/_jsxs(Column, {
+      size: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        pb: 4,
+        children: "Without an outline"
+      }), /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args
+      })]
+    }), /*#__PURE__*/_jsxs(Column, {
+      size: 4,
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "p-large",
+        pb: 4,
+        children: "Outline"
+      }), /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        shadow: "outline"
+      })]
+    })]
+  }),
+  name: 'ContentGroupBaseCard with Shadow Variants'
+};
+export const ContentGroupBaseCardWithEnrollmentStatus = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 24,
+    children: [/*#__PURE__*/_jsx(Column, {
+      size: 6,
+      children: /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        enrollmentStatus: EnrollmentStatus.InProgress
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      size: 6,
+      children: /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        enrollmentStatus: EnrollmentStatus.Completed
+      })
+    })]
+  }),
+  name: 'ContentGroupBaseCard with Enrollment Status'
+};
+export const ContentGroupBaseCardWithTimeToComplete = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 24,
+    children: [/*#__PURE__*/_jsxs(Column, {
+      size: 6,
+      children: ["Hours", /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        timeToComplete: 5
+      })]
+    }), /*#__PURE__*/_jsxs(Column, {
+      size: 6,
+      children: ["If the duration (hours) is less than 1", /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        timeToComplete: 0
+      })]
+    }), /*#__PURE__*/_jsxs(Column, {
+      size: 6,
+      children: ["If the duration is exactly 1", /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        timeToComplete: 1
+      })]
+    })]
+  }),
+  name: 'ContentGroupBaseCard with Time to Complete'
+};
+export const ContentGroupBaseCardWithCustomHeaderAndFooter = {
+  render: args => /*#__PURE__*/_jsx(LayoutGrid, {
+    gap: 24,
+    children: /*#__PURE__*/_jsx(Column, {
+      size: 6,
+      children: /*#__PURE__*/_jsx(ContentGroupBaseCard, {
+        ...args,
+        header: /*#__PURE__*/_jsx(ContentGroupBaseCardHeaderBackground, {
+          bg: "hyper",
+          children: /*#__PURE__*/_jsxs(FlexBox, {
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 4,
+            children: [/*#__PURE__*/_jsx(CheckFilledIcon, {}), " Custom Header"]
+          })
+        }),
+        footer: /*#__PURE__*/_jsx(Text, {
+          textColor: "navy-500",
+          children: "Custom Footer"
+        })
+      })
+    })
+  }),
+  name: 'ContentGroupBaseCard with custom header and footer'
+};