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

package/dist/stories/Atoms/Logos/LogoLXStudio.stories.js

@@ -0,0 +1,11 @@
+import { LogoLXStudio } from '../../../Logos';
+const meta = {
+  args: {
+    height: 40
+  },
+  component: LogoLXStudio
+};
+export default meta;
+export const Default = {
+  args: {}
+};

package/dist/stories/Atoms/Logos/ProLabel.stories.js

@@ -0,0 +1,29 @@
+import { Background } from '@codecademy/gamut-styles';
+import { ProLabel } from '../../../Logos/ProLabel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: ProLabel
+};
+export default meta;
+export const Default = {
+  args: {
+    variant: 'cutout'
+  }
+};
+export const Cutout = {
+  args: {
+    variant: 'cutout'
+  }
+};
+export const Transparent = {
+  args: {
+    variant: 'transparent'
+  },
+  render: args => /*#__PURE__*/_jsx(Background, {
+    bg: "navy",
+    p: 8,
+    children: /*#__PURE__*/_jsx(ProLabel, {
+      ...args
+    })
+  })
+};

package/dist/stories/Atoms/RatingsBar.stories.js

@@ -0,0 +1,16 @@
+import { RatingsBar } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: RatingsBar,
+  args: {
+    minimumPercent: 5,
+    percent: 75
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(RatingsBar, {
+    ...args
+  }),
+  name: 'RatingsBar'
+};

package/dist/stories/Atoms/Subgrid.stories.js

@@ -0,0 +1,87 @@
+import { Column, FlexBox, GridBox, LayoutGrid } from '@codecademy/gamut';
+import { Subgrid, subgridContext } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: Subgrid,
+  args: {}
+};
+export default meta;
+const Item = ({
+  children
+}) => /*#__PURE__*/_jsx(FlexBox, {
+  as: "li",
+  p: 8,
+  background: "#eee",
+  borderRadius: "md",
+  center: true,
+  children: children
+});
+export const Default = {
+  render: _args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    children: [/*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 2,
+        md: 3
+      },
+      pr: 8,
+      children: /*#__PURE__*/_jsx(Item, {
+        children: "Sidebar"
+      })
+    }), /*#__PURE__*/_jsx(subgridContext.Provider, {
+      value: {
+        _: 12,
+        sm: 10,
+        md: 9
+      },
+      children: /*#__PURE__*/_jsxs(Column, {
+        size: {
+          sm: 10,
+          md: 9
+        },
+        children: [/*#__PURE__*/_jsxs(GridBox, {
+          gridTemplateColumns: {
+            _: 'repeat(12, 1fr)',
+            sm: 'repeat(10, 1fr)',
+            md: 'repeat(9, 1fr)'
+          },
+          children: [/*#__PURE__*/_jsx(Column, {
+            size: 3,
+            children: /*#__PURE__*/_jsx(Item, {
+              children: "GridBox Column 1"
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            size: 3,
+            children: /*#__PURE__*/_jsx(Item, {
+              children: "GridBox Column 2"
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            size: 3,
+            children: /*#__PURE__*/_jsx(Item, {
+              children: "GridBox Column 3"
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(Subgrid, {
+          mt: 8,
+          children: [/*#__PURE__*/_jsx(Column, {
+            size: 3,
+            children: /*#__PURE__*/_jsx(Item, {
+              children: "Subgrid Column 1"
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            size: 3,
+            children: /*#__PURE__*/_jsx(Item, {
+              children: "Subgrid Column 2"
+            })
+          }), /*#__PURE__*/_jsx(Column, {
+            size: 3,
+            children: /*#__PURE__*/_jsx(Item, {
+              children: "Subgrid Column 3"
+            })
+          })]
+        })]
+      })
+    })]
+  }),
+  name: 'Subgrid'
+};

package/dist/stories/Molecules/AppBar.stories.js

@@ -0,0 +1,31 @@
+import { AppBar, AppBarSection, LogoCodecademy } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  component: AppBar,
+  subcomponents: {
+    AppBarSection
+  }
+};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(AppBar, {
+    children: /*#__PURE__*/_jsx(AppBarSection, {
+      position: "left",
+      children: "In Left Position"
+    })
+  }),
+  name: 'AppBar'
+};
+export const Header = {
+  render: () => /*#__PURE__*/_jsxs(AppBar, {
+    children: [/*#__PURE__*/_jsx(AppBarSection, {
+      position: "left",
+      children: /*#__PURE__*/_jsx(LogoCodecademy, {})
+    }), /*#__PURE__*/_jsx(AppBarSection, {
+      position: "center",
+      children: "Pricing"
+    }), /*#__PURE__*/_jsx(AppBarSection, {
+      position: "right",
+      children: "Sign In"
+    })]
+  })
+};

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

@@ -0,0 +1,84 @@
+import { IconButton } from '@codecademy/gamut';
+import { FaviconIcon, PersonIcon } from '@codecademy/gamut-icons';
+import { AppHeader } from '../../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeader,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  args: {
+    items: {
+      left: [{
+        id: 'logo-1',
+        href: 'http://codecademy.com',
+        pro: false,
+        trackingTarget: 'tracking-target',
+        type: 'logo',
+        enterprise: false
+      }, {
+        id: 'link',
+        href: 'http://codecademy.com',
+        trackingTarget: 'tracking-target',
+        text: 'AppHeaderLink',
+        type: 'link'
+      }],
+      right: [{
+        id: 'render-element',
+        renderElement: () => /*#__PURE__*/_jsx(IconButton, {
+          icon: FaviconIcon,
+          tip: "Link",
+          tipProps: {
+            alignment: 'bottom-center'
+          }
+        }),
+        type: 'render-element'
+      }, {
+        id: 'text-button',
+        text: 'TextButton',
+        href: 'http://codecademy.com',
+        trackingTarget: 'tracking-target',
+        type: 'text-button'
+      }, {
+        id: 'target',
+        text: 'Dropdown Target',
+        icon: PersonIcon,
+        popover: [{
+          id: 'sublink-1',
+          text: 'A Link',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link'
+        }, {
+          id: 'sublink-2',
+          text: 'Another Link',
+          href: 'http://codecademy.com',
+          trackingTarget: '',
+          type: 'link'
+        }],
+        trackingTarget: '',
+        type: 'dropdown'
+      }, {
+        id: 'fill-button',
+        text: 'FillButton',
+        href: 'http://codecademy.com',
+        trackingTarget: 'tracking-target',
+        type: 'fill-button'
+      }]
+    },
+    isStandalone: true,
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeader, {
+    ...args
+  }),
+  name: 'AppHeader'
+};

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

@@ -0,0 +1,67 @@
+import { Box } from '@codecademy/gamut';
+import { PersonIcon } from '@codecademy/gamut-icons';
+import { AppHeaderDropdown } from '../../../index';
+import { MOCK_PROFILE_DROPDOWN } from './MockAppHeaderElements';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderDropdown,
+  args: {
+    item: {
+      id: 'target',
+      text: 'Dropdown Target',
+      icon: PersonIcon,
+      popover: [{
+        id: 'sublink-1',
+        text: 'A Link',
+        href: 'http://codecademy.com',
+        trackingTarget: '',
+        type: 'link'
+      }, {
+        id: 'sublink-2',
+        text: 'Another Link',
+        href: 'http://codecademy.com',
+        trackingTarget: '',
+        type: 'link'
+      }],
+      trackingTarget: '',
+      type: 'dropdown'
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderDropdown, {
+    ...args
+  }),
+  name: 'AppHeaderDropdown'
+};
+export const AppHeaderSeparatedDropdown = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    height: "200",
+    children: /*#__PURE__*/_jsx(Box, {
+      position: "absolute",
+      left: "225",
+      children: /*#__PURE__*/_jsx(AppHeaderDropdown, {
+        ...args
+      })
+    })
+  }),
+  args: {
+    item: MOCK_PROFILE_DROPDOWN
+  },
+  name: 'AppHeaderSeparatedDropdown'
+};
+export const AppHeaderStandaloneDropdown = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    height: "200",
+    children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(AppHeaderDropdown, {
+        ...args
+      })
+    })
+  }),
+  args: {
+    standalone: true
+  },
+  name: 'AppHeaderStandaloneDropdown'
+};

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

@@ -0,0 +1,50 @@
+import { AppHeaderLink } from '../../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderLink,
+  args: {
+    item: {
+      id: 'link',
+      href: 'http://codecademy.com',
+      text: 'Nav Link',
+      trackingTarget: 'tracking-target',
+      type: 'link'
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
+    ...args
+  }),
+  name: 'AppHeaderLink'
+};
+export const CurrentTab = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
+    ...args
+  }),
+  args: {
+    item: {
+      id: 'link-current-tab',
+      href: 'http://codecademy.com',
+      text: 'Current Tab',
+      trackingTarget: 'tracking-target',
+      type: 'link'
+    }
+  }
+};
+export const NewTab = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderLink, {
+    ...args
+  }),
+  args: {
+    item: {
+      id: 'link-new-tab',
+      href: 'http://codecademy.com',
+      newTab: true,
+      text: 'New Tab',
+      trackingTarget: 'tracking-target',
+      type: 'link'
+    }
+  }
+};

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

@@ -0,0 +1,43 @@
+import { AppHeaderLogo } from '../../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderLogo,
+  args: {
+    item: {
+      enterprise: false,
+      href: 'http://codecademy.com',
+      id: 'pro-logo',
+      pro: true,
+      trackingTarget: 'test',
+      type: 'logo'
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {
+    ...args
+  }),
+  name: 'AppHeaderLogo'
+};
+export const Pro = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {
+    ...args
+  })
+};
+export const FreeAnon = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderLogo, {
+    ...args
+  }),
+  name: 'Free + Anon',
+  args: {
+    item: {
+      pro: false,
+      href: 'http://codecademy.com',
+      trackingTarget: 'test',
+      type: 'logo',
+      enterprise: false,
+      id: 'free-anon-logo'
+    }
+  }
+};

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

@@ -0,0 +1,34 @@
+import { BookFlipPageIcon, HouseEntranceIcon } from '@codecademy/gamut-icons';
+import { AppHeaderMainMenuMobile } from '../../../index';
+import { MOCK_DROPDOWN_1, MOCK_DROPDOWN_2, MOCK_PROFILE_DROPDOWN } from './MockAppHeaderElements';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderMainMenuMobile,
+  args: {
+    action: () => {},
+    items: [{
+      dataTestId: 'header-catalog',
+      icon: BookFlipPageIcon,
+      id: 'course-catalog',
+      text: 'Course Catalog',
+      href: '/catalog',
+      trackingTarget: 'topnav_catalog',
+      type: 'link'
+    }, {
+      dataTestId: 'header-home',
+      icon: HouseEntranceIcon,
+      id: 'my-home',
+      text: 'My Home',
+      href: '/learn',
+      trackingTarget: 'topnav_home',
+      type: 'link'
+    }, MOCK_DROPDOWN_1, MOCK_DROPDOWN_2, MOCK_PROFILE_DROPDOWN]
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderMainMenuMobile, {
+    ...args
+  }),
+  name: 'AppHeaderMainMenuMobile'
+};

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

@@ -0,0 +1,40 @@
+import { AppHeaderMobile } from '../../../index';
+import { MOCK_DROPDOWN_1, MOCK_DROPDOWN_2, MOCK_LINK, MOCK_PROFILE_DROPDOWN } from './MockAppHeaderElements';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderMobile,
+  args: {
+    action: () => {},
+    items: {
+      left: [{
+        id: 'logo-1',
+        href: 'http://codecademy.com',
+        pro: false,
+        trackingTarget: 'tracking-target',
+        type: 'logo',
+        enterprise: false
+      }],
+      right: [{
+        id: 'text-button',
+        text: 'Log in',
+        href: 'http://codecademy.com',
+        trackingTarget: 'tracking-target',
+        type: 'text-button'
+      }, {
+        id: 'fill-button',
+        text: 'Sign up',
+        href: 'http://codecademy.com',
+        trackingTarget: 'tracking-target',
+        type: 'fill-button'
+      }],
+      mainMenu: [MOCK_LINK, MOCK_DROPDOWN_1, MOCK_DROPDOWN_2, MOCK_PROFILE_DROPDOWN]
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderMobile, {
+    ...args
+  }),
+  name: 'AppHeaderMobile'
+};

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

@@ -0,0 +1,25 @@
+import { AppHeaderSubNavMobile } from '../../../index';
+import { MOCK_DROPDOWN_1, MOCK_PROFILE_DROPDOWN } from './MockAppHeaderElements';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: AppHeaderSubNavMobile,
+  args: {
+    item: MOCK_DROPDOWN_1
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderSubNavMobile, {
+    ...args
+  }),
+  name: 'AppHeaderSubMenuMobile'
+};
+export const AppHeaderSubMenuMobileProfile = {
+  render: args => /*#__PURE__*/_jsx(AppHeaderSubNavMobile, {
+    ...args
+  }),
+  args: {
+    item: MOCK_PROFILE_DROPDOWN
+  },
+  name: 'AppHeaderSubMenuMobile - Profile'
+};