@codecademy/brand 2.5.0-alpha.975930aaa2.0 → 3.0.0-alpha.2ba7921cce.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,44 @@
+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
+          }]
+        },
+        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.5.0-alpha.975930aaa2.0",
+  "version": "3.0.0-alpha.2ba7921cce.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",

package/dist/Recurly/context/NoProvider.d.ts

@@ -1,8 +0,0 @@
-/**
- * A symbol used as the default value for contexts that require a provider. When
- * calling useContext, we can throw an error if we find this symbol rather than
- * a provided value. This is useful in cases where we want to consider null or
- * undefined as valid provided values.
- */
-export declare const NO_PROVIDER: unique symbol;
-export type NoProvider = typeof NO_PROVIDER;

package/dist/Recurly/context/NoProvider.js

@@ -1,7 +0,0 @@
-/**
- * A symbol used as the default value for contexts that require a provider. When
- * calling useContext, we can throw an error if we find this symbol rather than
- * a provided value. This is useful in cases where we want to consider null or
- * undefined as valid provided values.
- */
-export const NO_PROVIDER = Symbol('no provider');

package/dist/Recurly/context/elements/index.d.ts

@@ -1,26 +0,0 @@
-import type { ElementsInstance } from '@recurly/recurly-js';
-import { PropsWithChildren } from 'react';
-/**
- * A provider that provides the Elements instance via context.
- *
- * If used outside of a RecurlyProvider, it will throw an error.
- */
-export declare function Elements({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-/**
- * A hook that returns the Elements instance from context.
- *
- * If used outside of an Elements provider, it will throw an error.
- *
- * Within an Elements provider:
- * - If used on the server, it will return undefined.
- * - If used on the client, it will initially return undefined and then return
- *   the provided Elements instance once the Recurly library is loaded.
- *
- * @param options - An object to provide an alternate contextual error message
- * to use if one tries to use this hook outside of an Elements provider.
- *
- * @returns The Elements instance.
- */
-export declare function useElements(options?: {
-    noProviderError?: string;
-}): ElementsInstance | undefined;

package/dist/Recurly/context/elements/index.js

@@ -1,46 +0,0 @@
-import { createContext, useContext, useMemo } from 'react';
-import { NO_PROVIDER } from '../NoProvider';
-import { useRecurly } from '../recurly';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ElementCtx = /*#__PURE__*/createContext(NO_PROVIDER);
-
-/**
- * A provider that provides the Elements instance via context.
- *
- * If used outside of a RecurlyProvider, it will throw an error.
- */
-export function Elements({
-  children
-}) {
-  const recurly = useRecurly({
-    noProviderError: 'Elements must be used within a RecurlyProvider.'
-  });
-  const elements = useMemo(() => recurly?.Elements(), [recurly]);
-  return /*#__PURE__*/_jsx(ElementCtx.Provider, {
-    value: elements,
-    children: children
-  });
-}
-
-/**
- * A hook that returns the Elements instance from context.
- *
- * If used outside of an Elements provider, it will throw an error.
- *
- * Within an Elements provider:
- * - If used on the server, it will return undefined.
- * - If used on the client, it will initially return undefined and then return
- *   the provided Elements instance once the Recurly library is loaded.
- *
- * @param options - An object to provide an alternate contextual error message
- * to use if one tries to use this hook outside of an Elements provider.
- *
- * @returns The Elements instance.
- */
-export function useElements(options) {
-  const elements = useContext(ElementCtx);
-  if (elements === NO_PROVIDER) {
-    throw new Error(options?.noProviderError ?? 'useElements must be used within a Elements provider.');
-  }
-  return elements;
-}

package/dist/Recurly/context/elements/index.test.js

@@ -1,88 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import { RecurlyProvider } from '../recurly';
-import { Elements, useElements } from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-let mockRecurlyPromise;
-jest.mock('../recurly/loadRecurly', () => ({
-  loadRecurly: () => mockRecurlyPromise
-}));
-const renderView = setupRtl(({
-  children
-}) => children);
-const jsEventLoop = () => new Promise(r => setTimeout(r, 0));
-describe('Elements', () => {
-  it('should show content before recurly loads', () => {
-    mockRecurlyPromise = new Promise(() => {
-      // never resolve
-    });
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Elements, {
-          children: "test-content"
-        })
-      })
-    });
-    expect(view.getByText('test-content')).toBeInTheDocument();
-  });
-  it('should call Elements on recurly', async () => {
-    const mockRecurly = {
-      Elements: jest.fn()
-    };
-    mockRecurlyPromise = Promise.resolve(mockRecurly);
-    renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Elements, {})
-      })
-    });
-    await jsEventLoop(); // one for the Provider's useEffect to run
-    await jsEventLoop(); // one for the subsequent re-render where useMemo runs
-    expect(mockRecurly.Elements).toHaveBeenCalled();
-  });
-});
-describe('useElements', () => {
-  const Consumer = () => {
-    try {
-      const elements = useElements();
-      return /*#__PURE__*/_jsx("div", {
-        children: typeof elements
-      });
-    } catch {
-      return /*#__PURE__*/_jsx("div", {
-        children: "error"
-      });
-    }
-  };
-  it('throws an error when used without a Elements provider', () => {
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(Consumer, {})
-    });
-    expect(view.getByText('error')).toBeInTheDocument();
-  });
-  it('returns null initially, then an Elements instance once Recurly loads', async () => {
-    const mockRecurly = {
-      Elements: () => ({})
-    };
-    mockRecurlyPromise = Promise.resolve(mockRecurly);
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Elements, {
-          children: /*#__PURE__*/_jsx(Consumer, {})
-        })
-      })
-    });
-    expect(view.getByText('undefined')).toBeInTheDocument();
-    expect(await view.findByText('object')).toBeInTheDocument();
-  });
-});

package/dist/Recurly/context/index.d.ts

@@ -1,2 +0,0 @@
-export * from './recurly';
-export * from './elements';

package/dist/Recurly/context/index.js

@@ -1,2 +0,0 @@
-export * from './recurly';
-export * from './elements';

package/dist/Recurly/context/recurly/index.d.ts

@@ -1,30 +0,0 @@
-import type { Recurly } from '@recurly/recurly-js';
-import { PropsWithChildren } from 'react';
-import { RecurlyConfig } from './loadRecurly';
-export type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
-/**
- * A provider that:
- * - loads the Recurly library
- * - ensures that only a single instance of the library is loaded
- * - configures the library with the provided public key
- * - provides the library instance via context
- */
-export declare function RecurlyProvider({ children, ...config }: RecurlyProviderProps): import("react/jsx-runtime").JSX.Element;
-/**
- * A hook that returns the Recurly instance from context.
- *
- * If used outside of a RecurlyProvider, it will throw an error.
- *
- * Within a RecurlyProvider:
- * - If used on the server, it will return undefined.
- * - If used on the client, it will initially return undefined and then return
- *   the provided Recurly instance once it is loaded.
- *
- * @param options - An object to provide an alternate contextual error message
- * to use if one tries to use this hook outside of a RecurlyProvider.
- *
- * @returns The Recurly instance.
- */
-export declare function useRecurly(options?: {
-    noProviderError?: string;
-}): Recurly | undefined;

package/dist/Recurly/context/recurly/index.js

@@ -1,50 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { NO_PROVIDER } from '../NoProvider';
-import { loadRecurly } from './loadRecurly';
-import { jsx as _jsx } from "react/jsx-runtime";
-const RecurlyCtx = /*#__PURE__*/createContext(NO_PROVIDER);
-/**
- * A provider that:
- * - loads the Recurly library
- * - ensures that only a single instance of the library is loaded
- * - configures the library with the provided public key
- * - provides the library instance via context
- */
-export function RecurlyProvider({
-  children,
-  ...config
-}) {
-  const [recurly, setRecurly] = useState(undefined);
-  useEffect(() => {
-    loadRecurly(config).then(setRecurly);
-    // Exclude `config` dependency as it should be treated as static.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/_jsx(RecurlyCtx.Provider, {
-    value: recurly,
-    children: children
-  });
-}
-
-/**
- * A hook that returns the Recurly instance from context.
- *
- * If used outside of a RecurlyProvider, it will throw an error.
- *
- * Within a RecurlyProvider:
- * - If used on the server, it will return undefined.
- * - If used on the client, it will initially return undefined and then return
- *   the provided Recurly instance once it is loaded.
- *
- * @param options - An object to provide an alternate contextual error message
- * to use if one tries to use this hook outside of a RecurlyProvider.
- *
- * @returns The Recurly instance.
- */
-export function useRecurly(options) {
-  const recurly = useContext(RecurlyCtx);
-  if (recurly === NO_PROVIDER) {
-    throw new Error(options?.noProviderError ?? 'useRecurly must be used within a RecurlyProvider');
-  }
-  return recurly;
-}

package/dist/Recurly/context/recurly/index.test.js

@@ -1,63 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import { RecurlyProvider, useRecurly } from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-let mockRecurlyPromise;
-jest.mock('./loadRecurly', () => ({
-  loadRecurly: () => mockRecurlyPromise
-}));
-describe('RecurlyProvider', () => {
-  const renderView = setupRtl(RecurlyProvider);
-  it('should show content before recurly loads', () => {
-    mockRecurlyPromise = new Promise(() => {
-      // never resolve
-    });
-    const {
-      view
-    } = renderView({
-      publicKey: 'testKey',
-      required: ['cvv', 'postal_code'],
-      children: 'test-content'
-    });
-    expect(view.getByText('test-content')).toBeInTheDocument();
-  });
-});
-describe('useRecurly', () => {
-  const renderView = setupRtl(({
-    children
-  }) => children);
-  const Consumer = () => {
-    try {
-      const recurly = useRecurly();
-      return /*#__PURE__*/_jsx("div", {
-        children: typeof recurly
-      });
-    } catch {
-      return /*#__PURE__*/_jsx("div", {
-        children: "error"
-      });
-    }
-  };
-  it('throws an error when used without a RecurlyProvider', () => {
-    mockRecurlyPromise = Promise.resolve({});
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(Consumer, {})
-    });
-    expect(view.getByText('error')).toBeInTheDocument();
-  });
-  it('returns undefined and then an instance when used inside a RecurlyProvider', async () => {
-    mockRecurlyPromise = Promise.resolve({});
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Consumer, {})
-      })
-    });
-    expect(view.getByText('undefined')).toBeInTheDocument();
-    expect(await view.findByText('object')).toBeInTheDocument();
-  });
-});

package/dist/Recurly/context/recurly/loadRecurly.d.ts

@@ -1,6 +0,0 @@
-import type { Recurly } from '@recurly/recurly-js';
-export type RecurlyConfig = {
-    publicKey: string;
-    required: string[];
-};
-export declare function loadRecurly(config: RecurlyConfig): Promise<Recurly>;

package/dist/Recurly/context/recurly/loadRecurly.js

@@ -1,22 +0,0 @@
-import { w } from './w';
-export function loadRecurly(config) {
-  if (!w._recurlyPromise) {
-    w._recurlyPromise = new Promise(resolve => {
-      const script = w.document.createElement('script');
-      script.src = 'https://js.recurly.com/v4/recurly.js';
-      script.async = true;
-      script.onload = () => {
-        const {
-          recurly
-        } = w;
-        if (!recurly) {
-          throw new Error('Recurly was not loaded by recurly.js');
-        }
-        recurly.configure(config);
-        resolve(recurly);
-      };
-      w.document.head.appendChild(script);
-    });
-  }
-  return w._recurlyPromise;
-}