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

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

@@ -0,0 +1,176 @@
+import { Box, FlexBox, Text } from '@codecademy/gamut';
+import { ArrowDashRightIcon, CloudCheckIcon, CommentsIcon, ConversationChatIcon, EarthIcon, GearIcon, LayoutModuleIcon, MiniArrowLeftIcon, PercipioIcon, PersonIcon, SupportIcon, TrashIcon } from '@codecademy/gamut-icons';
+import { AppHeader, LogoLXStudio } from '../../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: AppHeader,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  args: {
+    action: () => {},
+    dropdownSpacing: 'condensed',
+    isStandalone: true,
+    hideRightButtonDefaults: true,
+    items: {
+      left: [{
+        id: 'render-element',
+        renderElement: () => /*#__PURE__*/_jsx(Box, {
+          children: /*#__PURE__*/_jsx(LogoLXStudio, {
+            height: 40,
+            width: 196.92
+          })
+        }),
+        type: 'render-element'
+      }],
+      right: [{
+        id: 'menu',
+        text: 'Menu',
+        icon: LayoutModuleIcon,
+        isIconOnly: true,
+        popover: [{
+          id: 'sublink-1',
+          text: 'Percipio',
+          href: 'http://codecademy.com',
+          type: 'link',
+          icon: PercipioIcon
+        }],
+        trackingTarget: '',
+        type: 'dropdown'
+      }, {
+        id: 'profile-dropdown',
+        type: 'profile-dropdown',
+        avatar: 'https://avatarfiles.alphacoders.com/367/367474.png',
+        userDisplayName: 'cinnamoroll',
+        popover: [[{
+          id: 'sublink-1',
+          icon: PersonIcon,
+          text: 'My profile',
+          href: 'http://codecademy.com',
+          type: 'link'
+        }, {
+          id: 'sublink-2',
+          icon: GearIcon,
+          text: 'Settings',
+          href: 'http://codecademy.com',
+          type: 'link'
+        }, {
+          id: 'sublink-3',
+          icon: SupportIcon,
+          text: 'Help',
+          href: 'http://codecademy.com',
+          type: 'link'
+        }, {
+          id: 'sublink-4',
+          icon: TrashIcon,
+          text: 'Deleted items',
+          href: 'http://codecademy.com',
+          type: 'link'
+        }, {
+          id: 'sublink-5',
+          icon: ArrowDashRightIcon,
+          text: 'Log out',
+          href: 'http://codecademy.com',
+          type: 'link'
+        }]],
+        text: 'string;',
+        trackingTarget: 'string'
+      }]
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeader, {
+    ...args
+  }),
+  name: 'LXStudio AppHeader'
+};
+export const ButtonsWithTitle = {
+  render: args => /*#__PURE__*/_jsx(AppHeader, {
+    ...args
+  }),
+  args: {
+    action: () => {},
+    dropdownSpacing: 'condensed',
+    isStandalone: true,
+    hideRightButtonDefaults: true,
+    items: {
+      left: [{
+        id: 'exit',
+        type: 'text-button',
+        text: 'Exit',
+        icon: MiniArrowLeftIcon,
+        href: ''
+      }, {
+        id: 'caisy-title',
+        renderElement: () => /*#__PURE__*/_jsxs(FlexBox, {
+          borderColor: "border-secondary",
+          borderLeft: 1,
+          center: true,
+          height: "100%",
+          width: "fit-content",
+          pl: 16,
+          children: [/*#__PURE__*/_jsx(ConversationChatIcon, {
+            size: 26,
+            ml: 4,
+            color: "primary"
+          }), /*#__PURE__*/_jsx(Text, {
+            as: "h1",
+            ml: 16,
+            variant: "title-xs",
+            children: "CAISY\u2122: Something else entirely"
+          })]
+        }),
+        type: 'render-element'
+      }],
+      right: [{
+        id: 'draft-zone',
+        renderElement: () => /*#__PURE__*/_jsxs(FlexBox, {
+          center: true,
+          color: "text-secondary",
+          height: "24px",
+          width: "fit-content",
+          children: [/*#__PURE__*/_jsx(CloudCheckIcon, {}), /*#__PURE__*/_jsx(Text, {
+            ml: 8,
+            children: "Draft auto-saved"
+          })]
+        }),
+        type: 'render-element'
+      }, {
+        id: 'globe-button',
+        text: 'Language',
+        icon: EarthIcon,
+        type: 'icon-button',
+        href: '',
+        variant: 'primary'
+      }, {
+        id: 'chat-button',
+        text: 'Comments',
+        icon: CommentsIcon,
+        type: 'icon-button',
+        href: '',
+        variant: 'primary'
+      }, {
+        id: 'preview-button',
+        text: 'Preview',
+        type: 'stroke-button',
+        href: '',
+        variant: 'primary'
+      }, {
+        id: 'share-button',
+        text: 'Share',
+        type: 'stroke-button',
+        href: '',
+        variant: 'primary'
+      }, {
+        id: 'publish-button',
+        text: 'Publish',
+        type: 'fill-button',
+        href: '',
+        variant: 'primary'
+      }]
+    }
+  },
+  name: 'LXStudio Buttons with Title'
+};

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
+  }
+};