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

package/dist/stories/Molecules/InstructorCard.stories.js

@@ -0,0 +1,125 @@
+import { Box, Column, LayoutGrid } from '@codecademy/gamut';
+import { InstructorCard } from '../../InstructorCard';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: InstructorCard,
+  args: {
+    title: 'Building Agentic AI Applications',
+    instructorName: 'Dr. Satyajit Pattnaik',
+    instructorTitle: 'Lead AI and Data Engineer @ PALO IT',
+    instructorImageUrl: 'https://static-assets.codecademy.com/assets/bootcamp-instructors/profile-pics/v1/satyajit_pattnaik.png',
+    nextCohortStartDate: 'Feb 10',
+    href: '/bootcamps/agentic-ai',
+    onClick: () => {}
+  }
+};
+export default meta;
+export const Default = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    pb: 8,
+    children: /*#__PURE__*/_jsx(InstructorCard, {
+      ...args
+    })
+  }),
+  name: 'InstructorCard'
+};
+export const InstructorCardWithLongTitle = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    pb: 8,
+    children: /*#__PURE__*/_jsx(InstructorCard, {
+      ...args,
+      title: "AI Maker: Learn to Build with AI Tools and Applications"
+    })
+  }),
+  name: 'InstructorCard with Long Title'
+};
+export const InstructorCardWithLongInstructorTitle = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    pb: 8,
+    children: /*#__PURE__*/_jsx(InstructorCard, {
+      ...args,
+      instructorTitle: "Software Engineering Manager and Full-Stack Instructor at Codecademy"
+    })
+  }),
+  name: 'InstructorCard with Long Instructor Title'
+};
+export const InstructorCardWithoutImage = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    pb: 8,
+    children: /*#__PURE__*/_jsx(InstructorCard, {
+      ...args,
+      instructorImageUrl: undefined
+    })
+  }),
+  name: 'InstructorCard without Image'
+};
+export const InstructorCardWithoutNextCohort = {
+  render: args => /*#__PURE__*/_jsx(Box, {
+    pb: 8,
+    children: /*#__PURE__*/_jsx(InstructorCard, {
+      ...args,
+      nextCohortStartDate: undefined
+    })
+  }),
+  name: 'InstructorCard without Next Cohort'
+};
+export const InstructorCardGrid = {
+  render: args => /*#__PURE__*/_jsxs(LayoutGrid, {
+    gap: 24,
+    pb: 8,
+    children: [/*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 6,
+        md: 4,
+        lg: 3
+      },
+      children: /*#__PURE__*/_jsx(InstructorCard, {
+        ...args
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 6,
+        md: 4,
+        lg: 3
+      },
+      children: /*#__PURE__*/_jsx(InstructorCard, {
+        ...args,
+        title: "Full-Stack Developer",
+        instructorName: "Tyler Lemke",
+        instructorTitle: "Software Engineering Manager and Full-Stack Instructor",
+        nextCohortStartDate: "Mar 17"
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 6,
+        md: 4,
+        lg: 3
+      },
+      children: /*#__PURE__*/_jsx(InstructorCard, {
+        ...args,
+        title: "Data Science with AI",
+        instructorName: "Jeff Herman",
+        instructorTitle: "Senior Data Scientist @ H&R Block",
+        nextCohortStartDate: "Mar 2"
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      size: {
+        _: 12,
+        sm: 6,
+        md: 4,
+        lg: 3
+      },
+      children: /*#__PURE__*/_jsx(InstructorCard, {
+        ...args,
+        title: "AI Maker: Learn to Build with AI Tools",
+        instructorName: "Yash Thakker",
+        instructorTitle: "Founder of AISOLO Technologies, AI Entrepreneur",
+        nextCohortStartDate: "Mar 28"
+      })
+    })]
+  }),
+  name: 'InstructorCard Grid'
+};

package/dist/stories/Molecules/LearningOutcomeAssessmentScores.stories.js

@@ -0,0 +1,23 @@
+import { LearningOutcomeAssessmentScores } from '../../LearningOutcomeAssessmentScores';
+import { jsx as _jsx } from "react/jsx-runtime";
+const meta = {
+  component: LearningOutcomeAssessmentScores,
+  args: {}
+};
+export default meta;
+export const Example = () => {
+  return /*#__PURE__*/_jsx(LearningOutcomeAssessmentScores, {
+    highestScore: 100,
+    highestScoreAchievedAt: "10/01",
+    latestScore: 50,
+    latestScoreAchievedAt: "10/23"
+  });
+};
+export const NoScores = () => {
+  return /*#__PURE__*/_jsx(LearningOutcomeAssessmentScores, {
+    highestScore: null,
+    highestScoreAchievedAt: null,
+    latestScore: null,
+    latestScoreAchievedAt: null
+  });
+};

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

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

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

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

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

@@ -0,0 +1,39 @@
+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
+      })
+    })]
+  });
+};