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

package/dist/stories/Organisms/GlobalHeader/Pro.stories.js

@@ -0,0 +1,197 @@
+import { Box } from '@codecademy/gamut';
+import { GlobalHeader } from '../../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: GlobalHeader,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [Story => {
+    return /*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      children: Story()
+    });
+  }]
+};
+export default meta;
+export const ProUserDefault = {
+  render: () => /*#__PURE__*/_jsx(GlobalHeader, {
+    action: () => {},
+    notifications: {
+      notifications: [{
+        campaign: 'existence_is_pain',
+        date: '5 hours',
+        id: '1',
+        link: 'https://codecademy.com',
+        text: "Look at me! I'm Mr. Notification!",
+        unread: true
+      }],
+      onEnable: () => {},
+      actions: {
+        clear: () => {},
+        click: () => {},
+        dismiss: () => {},
+        read: () => {},
+        track: () => {}
+      }
+    },
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    },
+    type: "pro",
+    user: {
+      avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+      displayName: 'Codey'
+    }
+  }),
+  name: 'Pro User - Default'
+};
+export const ProUserPaused = {
+  render: () => /*#__PURE__*/_jsx(GlobalHeader, {
+    action: () => {},
+    notifications: {
+      notifications: [{
+        campaign: 'existence_is_pain',
+        date: '5 hours',
+        id: '1',
+        link: 'https://codecademy.com',
+        text: "Look at me! I'm Mr. Notification!",
+        unread: true
+      }],
+      onEnable: () => {},
+      actions: {
+        clear: () => {},
+        click: () => {},
+        dismiss: () => {},
+        read: () => {},
+        track: () => {}
+      }
+    },
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    },
+    type: "pro",
+    user: {
+      avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+      displayName: 'Codey',
+      isPaused: true
+    }
+  }),
+  name: 'Pro User - Paused'
+};
+export const ProUserAdmin = {
+  render: () => /*#__PURE__*/_jsx(GlobalHeader, {
+    action: () => {},
+    notifications: {
+      notifications: [{
+        campaign: 'existence_is_pain',
+        date: '5 hours',
+        id: '1',
+        link: 'https://codecademy.com',
+        text: "Look at me! I'm Mr. Notification!",
+        unread: true
+      }],
+      onEnable: () => {},
+      actions: {
+        clear: () => {},
+        click: () => {},
+        dismiss: () => {},
+        read: () => {},
+        track: () => {}
+      }
+    },
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    },
+    type: "pro",
+    user: {
+      avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+      displayName: 'Codey',
+      isAdmin: true
+    }
+  }),
+  name: 'Pro User - Admin'
+};
+export const ProUserCustomerSupport = {
+  render: () => /*#__PURE__*/_jsx(GlobalHeader, {
+    action: () => {},
+    notifications: {
+      notifications: [{
+        campaign: 'existence_is_pain',
+        date: '5 hours',
+        id: '1',
+        link: 'https://codecademy.com',
+        text: "Look at me! I'm Mr. Notification!",
+        unread: true
+      }],
+      onEnable: () => {},
+      actions: {
+        clear: () => {},
+        click: () => {},
+        dismiss: () => {},
+        read: () => {},
+        track: () => {}
+      }
+    },
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    },
+    type: "pro",
+    user: {
+      avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+      displayName: 'Codey',
+      isAdmin: true,
+      isCustomerSupport: true
+    }
+  }),
+  name: 'Pro User - Customer Support'
+};
+export const ProUserProLiteSubscription = {
+  render: () => /*#__PURE__*/_jsx(GlobalHeader, {
+    action: () => {},
+    notifications: {
+      notifications: [{
+        campaign: 'existence_is_pain',
+        date: '5 hours',
+        id: '1',
+        link: 'https://codecademy.com',
+        text: "Look at me! I'm Mr. Notification!",
+        unread: true
+      }],
+      onEnable: () => {},
+      actions: {
+        clear: () => {},
+        click: () => {},
+        dismiss: () => {},
+        read: () => {},
+        track: () => {}
+      }
+    },
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    },
+    type: "pro",
+    user: {
+      avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+      displayName: 'Codey',
+      isAdmin: true,
+      isCustomerSupport: true
+    }
+  }),
+  name: 'Pro User - Pro Lite Subscription'
+};

package/dist/stories/Organisms/GlobalHeader/Simple.stories.js

@@ -0,0 +1,28 @@
+import { Box } from '@codecademy/gamut';
+import { GlobalHeader } from '../../../GlobalHeader';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: GlobalHeader,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [Story => {
+    return /*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      children: Story()
+    });
+  }]
+};
+export default meta;
+export const Simple = {
+  render: () => /*#__PURE__*/_jsx(GlobalHeader, {
+    action: () => {},
+    search: {
+      onEnable: () => {},
+      onSearch: () => {},
+      onTrackingClick: () => {},
+      onSearchAsYouType: () => {}
+    },
+    type: "simple"
+  })
+};

package/dist/stories/Organisms/GlobalPage.stories.js

@@ -0,0 +1,138 @@
+import { Box, ContentContainer, SkipToContentTarget, Text } from '@codecademy/gamut';
+import { GlobalPage } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const header = {
+  action: () => {},
+  search: {
+    onEnable: () => {},
+    onTrackingClick: () => {},
+    onSearch: () => {},
+    onSearchAsYouType: () => {}
+  },
+  notifications: {
+    actions: {
+      clear: () => null,
+      click: _notification => null,
+      dismiss: _notification => null,
+      read: _notifications => null,
+      track: _target => null
+    },
+    notifications: [],
+    onEnable: () => null
+  },
+  type: 'free',
+  user: {
+    avatar: 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro',
+    displayName: 'Codey'
+  }
+};
+const defaultArgs = {
+  footer: {
+    onClick: () => {}
+  },
+  header
+};
+const meta = {
+  component: GlobalPage,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  decorators: [Story => {
+    return /*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      children: Story()
+    });
+  }]
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    position: "relative",
+    zIndex: 0,
+    children: /*#__PURE__*/_jsx(GlobalPage, {
+      ...args,
+      children: /*#__PURE__*/_jsx(ContentContainer, {
+        children: /*#__PURE__*/_jsx(Text, {
+          as: "h1",
+          children: "Page content goes here!"
+        })
+      })
+    })
+  }),
+  name: 'GlobalPage',
+  args: defaultArgs
+};
+export const Banner = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    position: "relative",
+    zIndex: 0,
+    children: /*#__PURE__*/_jsx(GlobalPage, {
+      ...args,
+      children: /*#__PURE__*/_jsx(ContentContainer, {
+        children: /*#__PURE__*/_jsx(Text, {
+          as: "h1",
+          children: "Page content goes here!"
+        })
+      })
+    })
+  }),
+  args: {
+    ...defaultArgs,
+    banner: {
+      children: "I'm a banner!",
+      onClose: () => {}
+    }
+  }
+};
+export const Modal = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    position: "relative",
+    zIndex: 0,
+    children: /*#__PURE__*/_jsx(GlobalPage, {
+      ...args,
+      children: /*#__PURE__*/_jsxs(ContentContainer, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          as: "h1",
+          children: "Page content goes here!"
+        }), /*#__PURE__*/_jsx(Text, {
+          as: "h2",
+          children: "Toggle modal isOpen to view modal"
+        })]
+      })
+    })
+  }),
+  args: {
+    ...defaultArgs,
+    modal: {
+      isOpen: false,
+      title: "I'm a modal!",
+      onRequestClose: () => {}
+    }
+  }
+};
+export const SkipToContent = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    position: "relative",
+    zIndex: 0,
+    children: /*#__PURE__*/_jsx(GlobalPage, {
+      ...args,
+      children: /*#__PURE__*/_jsxs(ContentContainer, {
+        children: ["Todo: soon, we'll have a layout menu component as an example!", /*#__PURE__*/_jsxs(SkipToContentTarget, {
+          id: "custom-id",
+          children: [/*#__PURE__*/_jsx(Text, {
+            as: "h1",
+            children: "Page content goes here!"
+          }), /*#__PURE__*/_jsx(Text, {
+            as: "p",
+            children: "I am after the skip target."
+          })]
+        })]
+      })
+    })
+  }),
+  name: 'SkipToContent',
+  args: {
+    ...defaultArgs,
+    skipToContentId: 'custom-id'
+  }
+};

package/dist/stories/Organisms/LayoutMenu.stories.js

@@ -0,0 +1,239 @@
+import { Box } from '@codecademy/gamut';
+import { LayoutMenu, SectionItemLink, SelectedSectionItem } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaults = {
+  href: '',
+  onClick: () => {}
+};
+const meta = {
+  component: LayoutMenu,
+  args: {
+    sections: [{
+      title: 'Languages',
+      slug: 'language',
+      items: [{
+        title: 'HTML & CSS',
+        slug: 'html-css',
+        href: '/catalog/language/html-css',
+        onClick: () => null
+      }, {
+        title: 'Python',
+        slug: 'python',
+        href: '/catalog/language/python',
+        onClick: () => null
+      }]
+    }, {
+      title: 'Subjects',
+      slug: 'subject',
+      items: [{
+        title: 'Data Science',
+        slug: 'data-science',
+        href: '/catalog/subject/data-science',
+        onClick: () => null
+      }, {
+        title: 'Computer Science',
+        slug: 'computer-science',
+        href: '/catalog/subject/computer-science',
+        onClick: () => null
+      }]
+    }],
+    onSectionToggle: slug => {
+      // eslint-disable-next-line no-console
+      console.log(`You could add event tracking here. You have access to the slug: ${slug}`);
+    },
+    mobileButtonText: 'Click Me'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(LayoutMenu, {
+    ...args
+  }),
+  name: 'LayoutMenu'
+};
+export const WithSelectedItem = {
+  render: args => /*#__PURE__*/_jsx(LayoutMenu, {
+    ...args,
+    selectedItem: "python"
+  })
+};
+export const WithAdditionalLinks = {
+  render: args => /*#__PURE__*/_jsxs(LayoutMenu, {
+    ...args,
+    children: [/*#__PURE__*/_jsx(Box, {
+      pb: 32,
+      children: /*#__PURE__*/_jsx(SelectedSectionItem, {
+        children: "Full Catalog"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      pb: 32,
+      children: /*#__PURE__*/_jsx(SectionItemLink, {
+        href: defaults.href,
+        onClick: () => window.location.href = 'https://www.codecademy.com/explore/sorting-quiz',
+        children: "Where do I begin?"
+      })
+    })]
+  })
+};
+export const WithAdditionalLinksOnTopAndBottom = {
+  render: args => /*#__PURE__*/_jsx(LayoutMenu, {
+    ...args,
+    selectedItem: "top-link",
+    topLinkSections: [{
+      title: 'A top link!',
+      slug: 'top-link',
+      href: '/not-a-real-link',
+      onClick: () => null
+    }, {
+      title: 'Another link!',
+      slug: 'test-link-2',
+      href: '/do-not-press-me',
+      onClick: () => null
+    }],
+    children: /*#__PURE__*/_jsx(Box, {
+      pb: 32,
+      children: /*#__PURE__*/_jsx(SectionItemLink, {
+        href: defaults.href,
+        onClick: () => window.location.href = 'https://www.codecademy.com/explore/sorting-quiz',
+        children: "Where do I begin?"
+      })
+    })
+  }),
+  name: 'With Additional Links on Top and Bottom'
+};
+export const WithSetMenuHeight = {
+  render: args => /*#__PURE__*/_jsxs(LayoutMenu, {
+    ...args,
+    menuHeight: "sm",
+    sections: [{
+      title: 'Languages',
+      slug: 'language',
+      items: [{
+        title: 'Python',
+        slug: 'python',
+        ...defaults
+      }, {
+        title: 'HTML & CSS',
+        slug: 'html-css',
+        ...defaults
+      }, {
+        title: 'JavaScript',
+        slug: 'javascript',
+        ...defaults
+      }, {
+        title: 'SQL',
+        slug: 'sql',
+        ...defaults
+      }, {
+        title: 'C++',
+        slug: 'c-plus-plus',
+        ...defaults
+      }, {
+        title: 'Java',
+        slug: 'java',
+        ...defaults
+      }, {
+        title: 'R',
+        slug: 'r',
+        ...defaults
+      }, {
+        title: 'Go',
+        slug: 'go',
+        ...defaults
+      }, {
+        title: 'C#',
+        slug: 'c-sharp',
+        ...defaults
+      }, {
+        title: 'PHP',
+        slug: 'php',
+        ...defaults
+      }, {
+        title: 'Ruby',
+        slug: 'ruby',
+        ...defaults
+      }, {
+        title: 'Swift',
+        slug: 'swift',
+        ...defaults
+      }, {
+        title: 'Bash/Shell',
+        slug: 'bash',
+        ...defaults
+      }, {
+        title: 'Kotlin',
+        slug: 'kotlin',
+        ...defaults
+      }, {
+        title: 'C',
+        slug: 'c',
+        ...defaults
+      }]
+    }, {
+      title: 'Subjects',
+      slug: 'subject',
+      items: [{
+        title: 'Computer Science',
+        slug: 'computer-science',
+        ...defaults
+      }, {
+        title: 'Machine Learning',
+        slug: 'machine-learning',
+        ...defaults
+      }, {
+        title: 'Data Visualization',
+        slug: 'data-visualization',
+        ...defaults
+      }, {
+        title: 'Web Development',
+        slug: 'web-development',
+        ...defaults
+      }, {
+        title: 'Web Design',
+        slug: 'web-design',
+        ...defaults
+      }, {
+        title: 'Data Science',
+        slug: 'data-science',
+        ...defaults
+      }, {
+        title: 'Mobile Development',
+        slug: 'mobile-development',
+        ...defaults
+      }, {
+        title: 'Developer Tools',
+        slug: 'developer-tools',
+        ...defaults
+      }, {
+        title: 'Code Foundations',
+        slug: 'code-foundations',
+        ...defaults
+      }, {
+        title: 'Game Development',
+        slug: 'game-development',
+        ...defaults
+      }, {
+        title: 'Interview Prep',
+        slug: 'interview-prep',
+        ...defaults
+      }, {
+        title: 'Cybersecurity',
+        slug: 'cybersecurity',
+        ...defaults
+      }]
+    }],
+    children: [/*#__PURE__*/_jsx(Box, {
+      pb: 32,
+      children: /*#__PURE__*/_jsx(SelectedSectionItem, {
+        children: "Full Catalog"
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      pb: 32,
+      children: /*#__PURE__*/_jsx(SectionItemLink, {
+        href: defaults.href,
+        onClick: () => window.location.href = 'https://www.codecademy.com/explore/sorting-quiz',
+        children: "Where do I begin?"
+      })
+    })]
+  })
+};