@codecademy/brand 5.9.0-alpha.f5dd739f8.0 → 5.9.0

package/dist/AccordionButtonDeprecated/index.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { ButtonDeprecatedBaseProps } from './ButtonDeprecatedBase';
-export type AccordionButtonSize = 'normal' | 'large';
-export type AccordionButtonTheme = 'blue' | 'plain' | 'yellow';
-export type AccordionButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
-    /**
-     * Whether the button should display as open or closed.
-     */
-    expanded?: boolean;
-    /**
-     * Determines the size of the button.
-     */
-    size?: 'normal' | 'large';
-    /**
-     * Visual theme for the clickable header button.
-     */
-    theme?: 'blue' | 'plain' | 'yellow';
-};
-/**
- * @deprecated
- * This component is in the old visual identity and will be updated soon.
- *
- * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
- */
-export declare const AccordionButtonDeprecated: React.FC<AccordionButtonDeprecatedProps>;

package/dist/AccordionButtonDeprecated/index.js

@@ -1,65 +0,0 @@
-import { ArrowChevronDownIcon } from '@codecademy/gamut-icons';
-import cx from 'classnames';
-import * as React from 'react';
-import { ButtonDeprecated } from './ButtonDeprecated';
-import { ButtonDeprecatedBase } from './ButtonDeprecatedBase';
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles.module.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const buttonThemes = {
-  blue: {
-    component: ButtonDeprecated,
-    props: {
-      flat: true,
-      theme: 'white'
-    }
-  },
-  plain: {
-    component: ButtonDeprecated,
-    props: {
-      flat: true,
-      theme: 'brand-dark-blue'
-    }
-  },
-  yellow: {
-    component: ButtonDeprecatedBase,
-    props: {}
-  }
-};
-
-/**
- * @deprecated
- * This component is in the old visual identity and will be updated soon.
- *
- * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
- */
-
-export const AccordionButtonDeprecated = ({
-  children,
-  className,
-  expanded,
-  size = 'normal',
-  theme = 'plain',
-  ...baseProps
-}) => {
-  const {
-    component: ButtonComponent,
-    props
-  } = buttonThemes[theme];
-  const iconSize = size === 'large' ? 30 : undefined;
-  return /*#__PURE__*/_jsxs(ButtonComponent, {
-    "aria-expanded": expanded,
-    className: cx(styles.accordionButton, styles[theme], styles[size], className),
-    ...baseProps,
-    ...props,
-    children: [/*#__PURE__*/_jsx("span", {
-      className: styles.children,
-      children: children
-    }), /*#__PURE__*/_jsx(ArrowChevronDownIcon, {
-      "aria-hidden": true,
-      className: cx(styles.expansionIcon, expanded && styles.expansionIconExpanded),
-      height: iconSize,
-      width: iconSize
-    })]
-  });
-};

package/dist/AccordionButtonDeprecated/styles.module.scss

@@ -1,62 +0,0 @@
-// button + class beats ButtonDeprecated .btn / .basicBtn center alignment
-// when CSS module order varies across consuming apps.
-button.accordionButton {
-  align-items: center;
-  display: flex;
-  font-weight: bold;
-  justify-content: space-between;
-  padding: 0.375rem 1rem;
-  text-align: left;
-  width: 100%;
-
-  .children {
-    font-weight: bold;
-    text-align: left;
-  }
-
-  &.blue {
-    color: #a5befa;
-  }
-
-  &.yellow {
-    background-color: #fff2b3;
-    border: solid #ffe359;
-    border-width: 1px 0;
-    transition: background-color 0.15s ease-in-out;
-
-    &:focus-visible {
-      border-color: #b37620;
-    }
-
-    &:focus,
-    &:hover {
-      background-color: #ffec8c;
-    }
-  }
-
-  &.large {
-    border-radius: 2px;
-    font-size: 1.5rem;
-
-    .children {
-      padding-top: 0.2rem;
-    }
-
-    .expansionIcon {
-      margin-left: 1rem;
-    }
-
-    @media only screen and (min-width: 64rem) {
-      font-size: 1.75rem;
-    }
-  }
-}
-
-.expansionIcon {
-  margin-left: 0.75rem;
-  transition: transform 0.35s ease-out;
-}
-
-.expansionIconExpanded {
-  transform: rotate(-180deg);
-}

package/dist/AccordionDeprecated/index.d.ts

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { AccordionButtonSize, AccordionButtonTheme } from '../AccordionButtonDeprecated';
-export type ChildrenOrExpandedRender = React.ReactNode | ((expanded: boolean) => React.ReactNode);
-export type AccordionDeprecatedProps = {
-    children: ChildrenOrExpandedRender;
-    /**
-     * CSS class name added to the root area container.
-     */
-    className?: string;
-    /**
-     * Whether the accordion should start off with expanded state.
-     */
-    initiallyExpanded?: boolean;
-    /**
-     * Called when the top button is clicked.
-     *
-     * @param expanding - New expanded state the accordion will transition to.
-     */
-    onClick?: (expanding: boolean) => void;
-    /**
-     * Visual size of the top button.
-     */
-    size?: AccordionButtonSize;
-    /**
-     * Visual theme of the top button.
-     */
-    theme?: AccordionButtonTheme;
-    /**
-     * Contents to place within the top button.
-     */
-    top: ChildrenOrExpandedRender;
-};
-/**
- * @deprecated
- * This component is in the old visual identity and will be updated soon.
- *
- * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
- */
-export declare const AccordionDeprecated: React.FC<AccordionDeprecatedProps>;

package/dist/AccordionDeprecated/index.js

@@ -1,39 +0,0 @@
-import { useState } from 'react';
-import * as React from 'react';
-import { AccordionAreaDeprecated } from '../AccordionAreaDeprecated';
-import { AccordionButtonDeprecated } from '../AccordionButtonDeprecated';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @deprecated
- * This component is in the old visual identity and will be updated soon.
- *
- * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
- */
-
-export const AccordionDeprecated = ({
-  children,
-  className,
-  initiallyExpanded,
-  onClick,
-  size,
-  theme,
-  top
-}) => {
-  const [expanded, setExpanded] = useState(!!initiallyExpanded);
-  const expandRenderer = renderer => renderer instanceof Function ? renderer(expanded) : renderer;
-  return /*#__PURE__*/_jsx(AccordionAreaDeprecated, {
-    className: className,
-    expanded: expanded,
-    top: /*#__PURE__*/_jsx(AccordionButtonDeprecated, {
-      expanded: expanded,
-      size: size,
-      theme: theme,
-      onClick: () => {
-        setExpanded(!expanded);
-        onClick?.(!expanded);
-      },
-      children: expandRenderer(top)
-    }),
-    children: expandRenderer(children)
-  });
-};

package/dist/stories/Molecules/Accordion.stories.js

@@ -1,122 +0,0 @@
-import { Box, Text } from '@codecademy/gamut';
-import { useState } from 'react';
-import { Accordion, AccordionBody, AccordionTrigger } from '../../index';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const meta = {
-  component: Accordion,
-  title: 'Molecules/Accordion'
-};
-export default meta;
-export const Default = {
-  render: () => /*#__PURE__*/_jsxs(Accordion, {
-    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
-      children: "Click to expand"
-    }), /*#__PURE__*/_jsx(AccordionBody, {
-      children: /*#__PURE__*/_jsx(Box, {
-        children: /*#__PURE__*/_jsx(Text, {
-          children: "Accordion panel content."
-        })
-      })
-    })]
-  }),
-  name: 'Default (uncontrolled)'
-};
-export const InitiallyExpanded = {
-  render: () => /*#__PURE__*/_jsxs(Accordion, {
-    initiallyExpanded: true,
-    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
-      children: "Expanded by default"
-    }), /*#__PURE__*/_jsx(AccordionBody, {
-      children: /*#__PURE__*/_jsx(Box, {
-        children: /*#__PURE__*/_jsx(Text, {
-          children: "This panel starts open."
-        })
-      })
-    })]
-  }),
-  name: 'Initially expanded'
-};
-export const Controlled = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    return /*#__PURE__*/_jsxs(Box, {
-      children: [/*#__PURE__*/_jsxs(Text, {
-        mb: 8,
-        variant: "p-small",
-        children: ["Controlled externally \u2014 expanded: ", String(isOpen)]
-      }), /*#__PURE__*/_jsxs(Accordion, {
-        expanded: isOpen,
-        onClick: setIsOpen,
-        children: [/*#__PURE__*/_jsx(AccordionTrigger, {
-          children: "Controlled accordion"
-        }), /*#__PURE__*/_jsx(AccordionBody, {
-          children: /*#__PURE__*/_jsx(Box, {
-            children: /*#__PURE__*/_jsx(Text, {
-              children: "Caller manages expanded state via onToggle."
-            })
-          })
-        })]
-      })]
-    });
-  },
-  name: 'Controlled'
-};
-export const WithOnClickCallback = {
-  render: () => /*#__PURE__*/_jsxs(Accordion, {
-    onClick: next => {
-      // eslint-disable-next-line no-console
-      console.log('toggled:', next);
-    },
-    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
-      children: "Section with callbacks"
-    }), /*#__PURE__*/_jsx(AccordionBody, {
-      children: /*#__PURE__*/_jsx(Box, {
-        children: /*#__PURE__*/_jsx(Text, {
-          children: "Check the console \u2014 onToggle and onClick fire on each toggle."
-        })
-      })
-    })]
-  }),
-  name: 'With callbacks'
-};
-export const MultipleAccordions = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    display: "flex",
-    flexDirection: "column",
-    gap: 8,
-    children: ['Section A', 'Section B', 'Section C'].map(label => /*#__PURE__*/_jsxs(Accordion, {
-      children: [/*#__PURE__*/_jsx(AccordionTrigger, {
-        children: label
-      }), /*#__PURE__*/_jsx(AccordionBody, {
-        children: /*#__PURE__*/_jsx(Box, {
-          children: /*#__PURE__*/_jsxs(Text, {
-            children: ["Content for ", label, ". Each accordion is independent."]
-          })
-        })
-      })]
-    }, label))
-  }),
-  name: 'Multiple independent accordions'
-};
-export const RichContent = {
-  render: () => /*#__PURE__*/_jsxs(Accordion, {
-    initiallyExpanded: true,
-    children: [/*#__PURE__*/_jsx(AccordionTrigger, {
-      children: "Frequently asked question"
-    }), /*#__PURE__*/_jsx(AccordionBody, {
-      children: /*#__PURE__*/_jsxs(Box, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          variant: "title-xs",
-          children: "Answer heading"
-        }), /*#__PURE__*/_jsxs(Text, {
-          children: ["This body can hold any React content \u2014 text, links, forms, lists, or nested components. The height animates in and out using Gamut's", ' ', "ExpandInCollapseOut primitive."]
-        }), /*#__PURE__*/_jsx(Text, {
-          variant: "p-small",
-          color: "text-secondary",
-          children: "Supporting detail with secondary text color."
-        })]
-      })
-    })]
-  }),
-  name: 'Rich body content'
-};

package/dist/stories/Molecules/AccordionDeprecated.stories.js

@@ -1,19 +0,0 @@
-import { AccordionDeprecated } from '../../index';
-const meta = {
-  component: AccordionDeprecated
-};
-export default meta;
-export const Default = {
-  args: {
-    top: 'Click to expand',
-    children: 'Accordion panel content.'
-  },
-  name: 'AccordionDeprecated'
-};
-export const InitiallyExpanded = {
-  args: {
-    top: 'Expanded by default',
-    children: 'This panel starts open.',
-    initiallyExpanded: true
-  }
-};

package/dist/typings/react.d.ts

@@ -1,7 +0,0 @@
-import { Attributes, ReactHTML } from 'react';
-import * as React from 'react';
-
-/**
- * Simple tag string, component class, or functional component for a render prop.
- */
-export type ChildComponentDescriptor = string | React.ComponentClass | React.FC;

package/dist/utils/index.d.ts

@@ -1 +0,0 @@
-export * from './omitProps';

package/dist/utils/index.js

@@ -1 +0,0 @@
-export * from './omitProps';

package/dist/utils/omitProps.d.ts

@@ -1,10 +0,0 @@
-export type RemoveFrom<TContainer, TRemoved> = {
-    [P in keyof TContainer]: P extends keyof TRemoved ? never : TContainer[P];
-};
-/**
- * omitProps
- *
- * removes a provided array of props from a props object,
- * leaving necessary props like children intact
- */
-export declare function omitProps<TOmittedProps extends {}, TProps extends {}>(initialPropsToOmit: TOmittedProps | (keyof TOmittedProps)[], props: TProps): RemoveFrom<TOmittedProps, TProps>;

package/dist/utils/omitProps.js

@@ -1,18 +0,0 @@
-import invariant from 'invariant';
-import isPlainObject from 'lodash/isPlainObject';
-import omit from 'lodash/omit';
-import without from 'lodash/without';
-/**
- * omitProps
- *
- * removes a provided array of props from a props object,
- * leaving necessary props like children intact
- */
-export function omitProps(initialPropsToOmit, props) {
-  const propsToOmit = isPlainObject(initialPropsToOmit) ? Object.keys(initialPropsToOmit) : initialPropsToOmit;
-  invariant(Array.isArray(propsToOmit), 'omitProps first argument should be an Array');
-
-  // allow all data-* props, mainly used for testing libraries
-  const dataProps = propsToOmit.filter(p => /^data-.*/.exec(p));
-  return omit(props, without(propsToOmit, 'children', 'className', ...dataProps));
-}