@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/stories/Molecules/LearningOutcomeCard.stories.js

@@ -1,189 +0,0 @@
-import { FlexBox } from '@codecademy/gamut';
-import { LearningOutcomeCard } from '../../LearningOutcomeCard';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const meta = {
-  component: LearningOutcomeCard,
-  args: {
-    outcome: 'Implement sorting algorithms in Java.'
-  }
-};
-export default meta;
-export const Base = {
-  render: args => /*#__PURE__*/_jsxs(FlexBox, {
-    gap: 16,
-    children: [/*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 1
-    }), /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 2
-    }), /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 3
-    })]
-  }),
-  name: 'Base card'
-};
-export const BaseCardWithHover = {
-  render: args => /*#__PURE__*/_jsxs(FlexBox, {
-    gap: 16,
-    children: [/*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 1,
-      isInteractive: true
-    }), /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 2,
-      isInteractive: true
-    }), /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 3,
-      isInteractive: true
-    })]
-  }),
-  name: 'Base card with hover'
-};
-export const BaseCardWithTopics = {
-  render: args => /*#__PURE__*/_jsxs(FlexBox, {
-    gap: 16,
-    children: [/*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 1,
-      skills: [{
-        title: 'java'
-      }, {
-        title: 'skill'
-      }, {
-        title: 'computer science'
-      }]
-    }), /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 2,
-      skills: [{
-        title: 'java'
-      }, {
-        title: 'skill'
-      }, {
-        title: 'computer science'
-      }]
-    }), /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      ...args,
-      level: 3,
-      skills: [{
-        title: 'java'
-      }, {
-        title: 'skill'
-      }, {
-        title: 'computer science'
-      }]
-    })]
-  }),
-  name: 'Base card with topics'
-};
-export const EmphasizedCard = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 1,
-    mode: "emphasized"
-  }),
-  name: 'Emphasized card'
-};
-export const EmphasizedCardWithHover = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 2,
-    mode: "emphasized",
-    isInteractive: true
-  }),
-  name: 'Emphasized card with hover'
-};
-export const EmphasizedCardWithTopics = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 3,
-    skills: [{
-      title: 'java'
-    }, {
-      title: 'skill'
-    }, {
-      title: 'computer science'
-    }],
-    mode: "emphasized",
-    isInteractive: true
-  }),
-  name: 'Emphasized card with topics'
-};
-export const EmphasizedCardWithProgress = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 2,
-    progress: 60,
-    skills: [{
-      title: 'java'
-    }, {
-      title: 'skill'
-    }, {
-      title: 'computer science'
-    }],
-    mode: "emphasized",
-    isInteractive: true
-  }),
-  name: 'Emphasized card with progress'
-};
-export const EmphasizedCardWithProgress100 = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 3,
-    progress: 100,
-    skills: [{
-      title: 'java'
-    }, {
-      title: 'skill'
-    }, {
-      title: 'computer science'
-    }],
-    mode: "emphasized",
-    isInteractive: true
-  }),
-  name: 'Emphasized card with 100% progress'
-};
-export const EmphasizedCardWithProgressAnimation = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 2,
-    progress: 80,
-    progressUpdateData: {
-      previousProgress: 50,
-      progressDuration: 500
-    },
-    skills: [{
-      title: 'java'
-    }, {
-      title: 'skill'
-    }, {
-      title: 'computer science'
-    }],
-    mode: "emphasized"
-  }),
-  name: 'Emphasized card with progress with animation'
-};
-export const EmphasizedCardWithProgress100Animation = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args,
-    level: 2,
-    progress: 100,
-    progressUpdateData: {
-      previousProgress: 50,
-      completionDelay: 500
-    },
-    skills: [{
-      title: 'java'
-    }, {
-      title: 'skill'
-    }, {
-      title: 'computer science'
-    }],
-    mode: "emphasized"
-  }),
-  name: 'Emphasized card with 100% progress with animation'
-};

package/dist/stories/Molecules/LearningOutcomeFlyout.stories.js

@@ -1,62 +0,0 @@
-import { FillButton, FlexBox } from '@codecademy/gamut';
-import { useState } from 'react';
-import { LearningOutcomeFlyout } from '../../LearningOutcomeFlyout';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const meta = {
-  component: LearningOutcomeFlyout,
-  args: {}
-};
-export default meta;
-export const Example = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const toggleOpen = () => setIsExpanded(!isExpanded);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(FillButton, {
-      onClick: toggleOpen,
-      children: "Open Flyout"
-    }), /*#__PURE__*/_jsx(FlexBox, {
-      width: "100%",
-      children: /*#__PURE__*/_jsx(LearningOutcomeFlyout, {
-        expanded: isExpanded,
-        learningOutcome: {
-          highestScore: 100,
-          highestScoreAchievedAt: '10/01',
-          latestScore: 68,
-          latestScoreAchievedAt: '10/01',
-          level: 2,
-          outcome: 'Understand the basics of React',
-          percentComplete: 75,
-          parentLOs: [{
-            id: '1',
-            outcome: 'Build a React component',
-            level: 3
-          }, {
-            id: '2',
-            outcome: 'Manage state in React',
-            level: 3
-          }],
-          childLearningOutcomes: [{
-            id: '3',
-            outcome: 'Understand JSX components',
-            percentComplete: 100
-          }, {
-            id: '4',
-            outcome: 'Create a React form',
-            percentComplete: 50
-          }, {
-            id: '5',
-            outcome: 'Pass through props to a component',
-            percentComplete: 0
-          }]
-        },
-        learningOutcomeHref: "/learning-outcomes/123",
-        onClose: () => setIsExpanded(false),
-        bestMatchResponse: {
-          data: null,
-          loading: false,
-          error: false
-        }
-      })
-    })]
-  });
-};

package/dist/stories/Molecules/LearningOutcomeLevelBadge.stories.js

@@ -1,20 +0,0 @@
-import { FlexBox } from '@codecademy/gamut';
-import { LearningOutcomeLevelBadge } from '../../LearningOutcomeBadges';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const meta = {
-  component: LearningOutcomeLevelBadge
-};
-export default meta;
-export const AllLevels = {
-  render: () => /*#__PURE__*/_jsxs(FlexBox, {
-    gap: 16,
-    children: [/*#__PURE__*/_jsx(LearningOutcomeLevelBadge, {
-      level: 1
-    }), /*#__PURE__*/_jsx(LearningOutcomeLevelBadge, {
-      level: 2
-    }), /*#__PURE__*/_jsx(LearningOutcomeLevelBadge, {
-      level: 3
-    })]
-  }),
-  name: 'Learning Outcome Level Badge - All Levels'
-};

package/dist/stories/Molecules/LearningOutcomeLowAssessmentBadge.stories.js

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

package/dist/stories/Molecules/LearningOutcomePopover.stories.js

@@ -1,39 +0,0 @@
-import { Box, FillButton, FlexBox } from '@codecademy/gamut';
-import { useRef, useState } from 'react';
-import { LearningOutcomePopover } from '../../LearningOutcomePopover';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const meta = {
-  component: LearningOutcomePopover,
-  args: {}
-};
-export default meta;
-export const Example = () => {
-  const [open, setOpen] = useState(false);
-  const activeElRef = useRef(null);
-  const toggleOpen = () => setOpen(!open);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      ref: activeElRef,
-      children: /*#__PURE__*/_jsx(FillButton, {
-        onClick: toggleOpen,
-        children: "Open Popover"
-      })
-    }), /*#__PURE__*/_jsx(FlexBox, {
-      width: "100%",
-      children: /*#__PURE__*/_jsx(LearningOutcomePopover, {
-        id: "learning-outcome-popover",
-        activeElRef: activeElRef,
-        isOpen: open,
-        learningOutcomeDetails: {
-          id: '1',
-          level: 2,
-          outcome: 'Understand the basics of React',
-          latestScore: 68,
-          highestScore: 100,
-          percentComplete: 75
-        },
-        horizontalOffset: 90
-      })
-    })]
-  });
-};

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

@@ -1,276 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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'
-};