@codecademy/brand 2.11.0 → 3.0.0-alpha.097ecb99a8.0

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

@@ -1,75 +1,189 @@
-import { Background } from '@codecademy/gamut-styles';
+import { FlexBox } from '@codecademy/gamut';
 import { LearningOutcomeCard } from '../../LearningOutcomeCard';
-import { jsx as _jsx } from "react/jsx-runtime";
+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,
-    outcome: 'Implement sorting algorithms in Java.',
+    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'
-    }]
-  }
-};
-export default meta;
-export const Default = {
-  render: args => /*#__PURE__*/_jsx(LearningOutcomeCard, {
-    ...args
+    }],
+    mode: "emphasized",
+    isInteractive: true
   }),
-  name: 'Learning Outcome Simple Card'
-};
-export const EmphasizedCard = {
-  render: args => /*#__PURE__*/_jsx(Background, {
-    bg: "navy",
-    p: 24,
-    children: /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      emphasized: true,
-      ...args
-    })
-  }),
-  name: 'Emphasized Card'
+  name: 'Emphasized card with topics'
 };
 export const EmphasizedCardWithProgress = {
-  render: args => /*#__PURE__*/_jsx(Background, {
-    bg: "navy",
-    p: 24,
-    children: /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      emphasized: true,
-      progress: 60,
-      ...args
-    })
+  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 displaying progress, for use in the Learning Environment'
+  name: 'Emphasized card with progress'
 };
 export const EmphasizedCardWithProgress100 = {
-  render: args => /*#__PURE__*/_jsx(Background, {
-    bg: "navy",
-    p: 24,
-    children: /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      emphasized: true,
-      progress: 100,
-      ...args
-    })
+  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 displaying 100% progress, for use in the Learning Environment'
+  name: 'Emphasized card with 100% progress'
 };
-export const EmphasizedCardWithAnimation = {
-  render: args => /*#__PURE__*/_jsx(Background, {
-    bg: "navy",
-    p: 24,
-    children: /*#__PURE__*/_jsx(LearningOutcomeCard, {
-      emphasized: true,
-      progress: 80,
-      progressUpdateData: {
-        previousProgress: 50,
-        progressDuration: 500
-      },
-      ...args
-    })
+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 first displays 50% progress then animates until showing 80%, for use in the Learning Environment'
+  name: 'Emphasized card with 100% progress with animation'
 };

package/dist/stories/Molecules/LearningOutcomeFlyout.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta } from '@storybook/react';
+import { LearningOutcomeFlyout } from '../../LearningOutcomeFlyout';
+declare const meta: Meta<typeof LearningOutcomeFlyout>;
+export default meta;
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "2.11.0",
+  "version": "3.0.0-alpha.097ecb99a8.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",