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

package/dist/stories/Molecules/LearningOutcomeTile.stories.js

@@ -0,0 +1,276 @@
+import { FlexBox } from '@codecademy/gamut';
+import { Background } from '@codecademy/gamut-styles';
+import { LearningOutcomeTile } from '../../LearningOutcomeTile';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: LearningOutcomeTile,
+  args: {
+    learningOutcomeDetails: {
+      id: '1',
+      percentComplete: 0,
+      level: 2,
+      outcome: 'Apply programming fundamentals'
+    },
+    size: 'normal'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '2',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 50
+      },
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '3',
+        level: 3,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 100
+      },
+      popover: false,
+      hover: true
+    })]
+  }),
+  name: 'Learning Outcome Tile - Default'
+};
+export const WithLowAssessments = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '1',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 0,
+        latestScore: 50
+      },
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '2',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 50,
+        latestScore: 50
+      },
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '3',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 100,
+        latestScore: 50
+      },
+      popover: false,
+      hover: true
+    })]
+  }),
+  name: 'Learning Outcome Tile - with Low Assessment Indicator'
+};
+export const WithPopover = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '1',
+        level: 1,
+        outcome: 'Understand the basics of programming',
+        percentComplete: 0
+      },
+      hover: true,
+      popover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '2',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 50,
+        highestScore: 65,
+        latestScore: 50
+      },
+      hover: true,
+      popover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      learningOutcomeDetails: {
+        id: '3',
+        level: 3,
+        outcome: 'Master advanced programming concepts',
+        percentComplete: 100,
+        highestScore: 70,
+        latestScore: 70
+      },
+      hover: true,
+      popover: true
+    })]
+  }),
+  name: 'Learning Outcome Tile - with Popover'
+};
+export const Small = {
+  render: args => /*#__PURE__*/_jsxs(FlexBox, {
+    gap: 16,
+    children: [/*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      size: "small",
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      size: "small",
+      learningOutcomeDetails: {
+        id: '2',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 50
+      },
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      size: "small",
+      learningOutcomeDetails: {
+        id: '3',
+        level: 2,
+        outcome: 'Apply programming fundamentals',
+        percentComplete: 100
+      },
+      popover: false,
+      hover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      size: "small",
+      learningOutcomeDetails: {
+        id: '2',
+        percentComplete: 0,
+        outcome: 'Apply programming fundamentals',
+        level: 2
+      },
+      hover: true,
+      popover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      size: "small",
+      learningOutcomeDetails: {
+        id: '2',
+        percentComplete: 50,
+        outcome: 'Apply programming fundamentals',
+        level: 2
+      },
+      hover: true,
+      popover: true
+    }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+      ...args,
+      size: "small",
+      learningOutcomeDetails: {
+        id: '3',
+        percentComplete: 100,
+        outcome: 'Apply programming fundamentals',
+        level: 2
+      },
+      hover: true,
+      popover: true
+    })]
+  }),
+  name: 'Learning Outcome Tile - Small'
+};
+export const DarkMode = {
+  render: args => /*#__PURE__*/_jsx(Background, {
+    bg: "navy",
+    p: 24,
+    children: /*#__PURE__*/_jsxs(FlexBox, {
+      gap: 16,
+      children: [/*#__PURE__*/_jsx(LearningOutcomeTile, {
+        ...args,
+        learningOutcomeDetails: {
+          id: '1',
+          level: 2,
+          outcome: 'Apply programming fundamentals',
+          percentComplete: 0,
+          latestScore: 50
+        },
+        popover: false,
+        hover: true
+      }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+        ...args,
+        learningOutcomeDetails: {
+          id: '2',
+          level: 2,
+          outcome: 'Apply programming fundamentals',
+          percentComplete: 50,
+          latestScore: 50
+        },
+        popover: false,
+        hover: true
+      }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+        ...args,
+        learningOutcomeDetails: {
+          id: '3',
+          level: 2,
+          outcome: 'Apply programming fundamentals',
+          percentComplete: 100,
+          latestScore: 50
+        },
+        popover: false,
+        hover: true
+      }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+        ...args,
+        learningOutcomeDetails: {
+          id: '4',
+          level: 2,
+          outcome: 'Apply programming fundamentals',
+          percentComplete: 0,
+          latestScore: 50
+        },
+        size: "small",
+        popover: false,
+        hover: true
+      }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+        ...args,
+        learningOutcomeDetails: {
+          id: '5',
+          level: 2,
+          outcome: 'Apply programming fundamentals',
+          percentComplete: 50,
+          latestScore: 50
+        },
+        size: "small",
+        popover: false,
+        hover: true
+      }), /*#__PURE__*/_jsx(LearningOutcomeTile, {
+        ...args,
+        learningOutcomeDetails: {
+          id: '6',
+          level: 2,
+          outcome: 'Apply programming fundamentals',
+          percentComplete: 100,
+          latestScore: 50
+        },
+        size: "small",
+        popover: false,
+        hover: true
+      })]
+    })
+  }),
+  name: 'Learning Outcome Tile - Dark Mode'
+};

package/dist/stories/Molecules/ListSection.stories.js

@@ -0,0 +1,97 @@
+import { Card, FillButton, IconButton, Text } from '@codecademy/gamut';
+import { SearchIcon } from '@codecademy/gamut-icons';
+import { ListSection } from '../../index';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const listItems = [{
+  title: '1'
+}, {
+  title: '2'
+}, {
+  title: '3'
+}, {
+  title: '4'
+}];
+const meta = {
+  component: ListSection,
+  args: {
+    title: 'List Section Title'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ListSection, {
+      ...args,
+      title: "List Section 1",
+      children: listItems.map(item => /*#__PURE__*/_jsxs(Card, {
+        children: ["List Item", item.title]
+      }))
+    }), /*#__PURE__*/_jsx(ListSection, {
+      ...args,
+      title: "List Section 2",
+      initialDisplayAmount: 2,
+      children: listItems.map(item => /*#__PURE__*/_jsxs(Card, {
+        children: ["List Item", item.title]
+      }))
+    }), /*#__PURE__*/_jsxs(ListSection, {
+      ...args,
+      title: "List Section 3",
+      initialDisplayAmount: 2,
+      children: [/*#__PURE__*/_jsx(Card, {
+        children: "List Item 1"
+      }), /*#__PURE__*/_jsx(Card, {
+        children: "List Item 2"
+      })]
+    })]
+  }),
+  name: 'ListSection'
+};
+export const ListSectionWithEmptyState = {
+  render: args => /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(ListSection, {
+      ...args,
+      title: "List Section 1",
+      children: /*#__PURE__*/_jsx(Text, {
+        children: "I am an Empty State."
+      })
+    })
+  }),
+  name: 'ListSection with Empty State'
+};
+export const ListSectionWithHeaderAndSecondaryHeaderButtons = {
+  render: args => /*#__PURE__*/_jsx(ListSection, {
+    ...args,
+    title: "List Section 1",
+    headerButton: {
+      text: 'Edit',
+      href: '',
+      onClick: () => {}
+    },
+    headerSecondaryButton: {
+      text: 'Share',
+      href: '',
+      onClick: () => {}
+    },
+    children: listItems.map(item => /*#__PURE__*/_jsxs(Card, {
+      children: ["List Item", item.title]
+    }))
+  }),
+  name: 'ListSection with Header and SecondaryHeader Buttons'
+};
+export const ListSectionWithCustomHeaderAndSecondaryHeaderButtons = {
+  render: args => /*#__PURE__*/_jsx(ListSection, {
+    ...args,
+    title: "List Section 1",
+    headerButton: /*#__PURE__*/_jsx(IconButton, {
+      icon: SearchIcon,
+      tip: "Search"
+    }),
+    headerSecondaryButton: /*#__PURE__*/_jsx(FillButton, {
+      children: "Share"
+    }),
+    children: listItems.map(item => /*#__PURE__*/_jsxs(Card, {
+      children: ["List Item", item.title]
+    }))
+  }),
+  name: 'ListSection with custom Header and SecondaryHeader Buttons'
+};

package/dist/stories/Molecules/Loading.stories.js

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

package/dist/stories/Molecules/NotificationList.stories.js

@@ -0,0 +1,99 @@
+import { action } from 'storybook/actions';
+import { NotificationList } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const notifications = [{
+  campaign: 'python-livestream',
+  date: '5 minutes',
+  type: 'curriculum_blast',
+  id: 'abc',
+  link: 'https://www.codecademy.com/courses/livestreams/projects/livestream-intro-to-statistics-in-python',
+  text: 'Check out our Python livestream!'
+}, {
+  campaign: 'pro-trial',
+  type: 'marketing_blast',
+  date: '3 hours',
+  id: '1237',
+  text: 'Meet your fellow learners and stay motivated. Join the conversation in your cohort!'
+}, {
+  campaign: 'cohort v0.2',
+  date: '1 hour',
+  id: '333',
+  text: 'Welcome to you Front-End Cohort!',
+  type: 'cohort_blast'
+}, {
+  campaign: 'other-notification',
+  date: '2 days',
+  id: '1234',
+  link: 'http://google.com',
+  imageUrl: 'https://bit.ly/2Ckp4eW',
+  text: 'notiifcation with img url provided'
+}, {
+  campaign: 'discourse-comment',
+  date: '1 hour',
+  id: '333',
+  link: 'https://discuss.codecademy.com',
+  text: 'discourse comment notification',
+  type: 'forum_comment'
+}, {
+  campaign: 'discourse-message',
+  date: '1 minute',
+  id: '444',
+  link: 'https://discuss.codecademy.com',
+  text: 'discourse message notification',
+  type: 'forum_message'
+}, {
+  campaign: 'discourse-mention',
+  date: '10 minutes',
+  id: '444',
+  link: 'https://discuss.codecademy.com',
+  text: 'discourse mention notification',
+  type: 'forum_mention'
+}, {
+  campaign: 'discourse-like',
+  date: '3 minutes',
+  id: '555',
+  link: 'https://discuss.codecademy.com',
+  text: 'discourse like notification',
+  type: 'forum_like'
+}, {
+  campaign: 'pro-trial',
+  date: '3 hours',
+  id: '123',
+  text: 'Notification with no image or type provided; default Bell icon!'
+}, {
+  campaign: 'same-tab',
+  date: '5 hours',
+  id: '1',
+  link: window.location.origin,
+  text: 'Notification with an internal link (opens in the same tab)'
+}, {
+  campaign: 'new-tab',
+  date: '5 hours',
+  id: '2',
+  link: 'https://help.codecademy.com',
+  text: 'Notification with an external link (opens in a new tab)'
+}];
+const meta = {
+  component: NotificationList,
+  args: {
+    notifications,
+    onDismiss: () => {
+      action('notification dismissed');
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(NotificationList, {
+    ...args
+  }),
+  name: 'NotificationList'
+};
+export const Empty = {
+  render: args => /*#__PURE__*/_jsx(NotificationList, {
+    ...args
+  }),
+  args: {
+    notifications: []
+  }
+};

package/dist/stories/Molecules/PageSection.stories.js

@@ -0,0 +1,67 @@
+import { FillButton, IconButton, StrokeButton } from '@codecademy/gamut';
+import { SearchIcon } from '@codecademy/gamut-icons';
+import { PageSection } from '../../index';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: PageSection,
+  args: {
+    title: 'Page Section Title Text'
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PageSection, {
+      ...args,
+      title: "Section 1 Title",
+      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar urna at orci bibendum pharetra. Sed nec nibh id nulla molestie vestibulum. Proin efficitur venenatis vulputate. Morbi dolor odio, efficitur in volutpat nec, pharetra at dolor. Maecenas imperdiet, augue eget congue feugiat, diam sapien consequat tellus, id rutrum odio velit eu libero. Suspendisse auctor mauris metus, sed convallis ipsum facilisis id."
+    }), /*#__PURE__*/_jsx(PageSection, {
+      ...args,
+      title: "Section 2 Title",
+      children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar urna at orci bibendum pharetra. Sed nec nibh id nulla molestie vestibulum. Proin efficitur venenatis vulputate. Morbi dolor odio, efficitur in volutpat nec, pharetra at dolor. Maecenas imperdiet, augue eget congue feugiat, diam sapien consequat tellus, id rutrum odio velit eu libero. Suspendisse auctor mauris metus, sed convallis ipsum facilisis id."
+    })]
+  }),
+  name: 'PageSection'
+};
+export const PageSectionWithHeaderAndFooterButtons = {
+  render: args => /*#__PURE__*/_jsx(PageSection, {
+    ...args,
+    headerButton: {
+      text: 'Edit',
+      href: '',
+      onClick: () => {}
+    },
+    headerSecondaryButton: {
+      text: 'Share',
+      href: '',
+      onClick: () => {}
+    },
+    footerButton: {
+      text: 'Show more',
+      href: '',
+      onClick: () => {}
+    },
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar urna at orci bibendum pharetra. Sed nec nibh id nulla molestie vestibulum. Proin efficitur venenatis vulputate. Morbi dolor odio, efficitur in volutpat nec, pharetra at dolor. Maecenas imperdiet, augue eget congue feugiat, diam sapien consequat tellus, id rutrum odio velit eu libero. Suspendisse auctor mauris metus, sed convallis ipsum facilisis id..."
+  }),
+  name: 'PageSection with Header and Footer Buttons'
+};
+export const PageSectionWithCustomHeaderAndFooterButtons = {
+  render: args => /*#__PURE__*/_jsx(PageSection, {
+    ...args,
+    headerButton: /*#__PURE__*/_jsx(IconButton, {
+      icon: SearchIcon,
+      tip: "Search Codecademy content",
+      tipProps: {
+        alignment: 'bottom-center'
+      }
+    }),
+    headerSecondaryButton: /*#__PURE__*/_jsx(FillButton, {
+      children: "Share"
+    }),
+    footerButton: /*#__PURE__*/_jsx(StrokeButton, {
+      children: "NEXT"
+    }),
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar urna at orci bibendum pharetra. Sed nec nibh id nulla molestie vestibulum. Proin efficitur venenatis vulputate. Morbi dolor odio, efficitur in volutpat nec, pharetra at dolor. Maecenas imperdiet, augue eget congue feugiat, diam sapien consequat tellus, id rutrum odio velit eu libero. Suspendisse auctor mauris metus, sed convallis ipsum facilisis id..."
+  }),
+  name: 'PageSection with custom Header and Footer Buttons'
+};

package/dist/stories/Molecules/PastDueModalContents.stories.js

@@ -0,0 +1,62 @@
+import { Alert, FillButton, TextButton } from '@codecademy/gamut';
+import { pastDueErrorMessages, PastDueModalContents } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: PastDueModalContents,
+  argTypes: {
+    pastDueErrorCode: {
+      options: ['default', 'declined', 'insufficient_funds', 'temporary_hold', 'invalid_transaction', 'invalid_account_number', 'expired_card'],
+      control: {
+        type: 'select'
+      }
+    },
+    closeButton: {
+      control: {
+        type: 'boolean'
+      },
+      mapping: {
+        false: '',
+        true: /*#__PURE__*/_jsx(TextButton, {
+          mr: 16,
+          children: "Close"
+        })
+      }
+    },
+    updatePaymentButton: {
+      control: {
+        type: 'boolean'
+      },
+      mapping: {
+        false: '',
+        true: /*#__PURE__*/_jsx(FillButton, {
+          variant: "primary",
+          children: "Update payment"
+        })
+      }
+    },
+    isSilverPlan: {
+      control: 'boolean'
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(PastDueModalContents, {
+    ...args
+  }),
+  name: 'PastDueModalContents'
+};
+export const ErrorAlert = {
+  render: () => {
+    const {
+      text1,
+      text2
+    } = pastDueErrorMessages(true, true).default;
+    return /*#__PURE__*/_jsxs(Alert, {
+      type: "error",
+      placement: "inline",
+      children: [text1, text2]
+    });
+  },
+  name: 'Error message in alert'
+};

package/dist/stories/Molecules/PausableImage.stories.js

@@ -0,0 +1,16 @@
+import { PausableImage } from '../../index';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: PausableImage
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(PausableImage, {
+    ...args
+  }),
+  name: 'PausableImage',
+  args: {
+    src: '//images.ctfassets.net/go6kr6r0ykrq/2vjTCK9DmJ6BOd5NtFxNIG/e5ced4209aef5241cd581841fa6e2511/learn-css_box-model_06.16.gif',
+    alt: 'demonstration of learning environment'
+  }
+};

package/dist/stories/Molecules/Recurly.stories.js

@@ -0,0 +1,56 @@
+import { GridBox, Text } from '@codecademy/gamut';
+import { CardNumber, CVV, Elements, ExpMonth, ExpYear, RecurlyField, RecurlyProvider } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(RecurlyProvider, {
+    publicKey: "test-key",
+    required: [],
+    children: /*#__PURE__*/_jsx(Elements, {
+      children: /*#__PURE__*/_jsxs(GridBox, {
+        gridTemplateColumns: "2fr 1fr 1fr",
+        gap: 16,
+        children: [/*#__PURE__*/_jsx(RecurlyField, {
+          label: "Card number*",
+          children: /*#__PURE__*/_jsx(CardNumber, {})
+        }), /*#__PURE__*/_jsxs(RecurlyField, {
+          label: "Expiration date*",
+          children: [/*#__PURE__*/_jsx(ExpMonth, {}), /*#__PURE__*/_jsx(ExpYear, {})]
+        }), /*#__PURE__*/_jsx(RecurlyField, {
+          label: "CVV*",
+          children: /*#__PURE__*/_jsx(CVV, {})
+        })]
+      })
+    })
+  })
+};
+export const RecurlyFieldStory = {
+  render: () => /*#__PURE__*/_jsx(RecurlyProvider, {
+    publicKey: "test-key",
+    required: [],
+    children: /*#__PURE__*/_jsx(Elements, {
+      children: /*#__PURE__*/_jsxs(GridBox, {
+        gridTemplateColumns: "4rem 1fr",
+        gap: 16,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title-xs",
+          alignSelf: "center",
+          children: "Error"
+        }), /*#__PURE__*/_jsx(RecurlyField, {
+          label: "Card number*",
+          error: true,
+          children: /*#__PURE__*/_jsx(CardNumber, {})
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "title-xs",
+          alignSelf: "center",
+          children: "Valid"
+        }), /*#__PURE__*/_jsx(RecurlyField, {
+          label: "Card number*",
+          valid: true,
+          children: /*#__PURE__*/_jsx(CardNumber, {})
+        })]
+      })
+    })
+  }),
+  name: 'Validation'
+};