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

package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/variables.scss

@@ -1,54 +0,0 @@
-$btn-padding-x: 1rem !default;
-$btn-padding-y: 0.375rem !default;
-$btn-font-weight: bold !default;
-
-$btn-line-height: 1.5 !default;
-$btn-line-height-lg: calc(4 / 3) !default;
-$btn-line-height-sm: 1.5 !default;
-
-$btn-font-size-base: 1rem !default;
-$btn-font-size-lg: 1.25rem !default;
-$btn-font-size-sm: 1rem !default;
-$btn-font-size-xs: 0.75rem !default;
-
-$btn-padding-x-sm: 0.75rem !default;
-$btn-padding-y-sm: 0.25rem !default;
-$btn-min-width-sm: 8rem !default;
-
-$btn-padding-x-lg: 1.25rem !default;
-$btn-padding-y-lg: 0.75rem !default;
-$btn-min-width-lg: 10rem !default;
-
-$btn-border-radius: 2px !default;
-$btn-round-border-radius: 50px !default;
-
-$btn-state-modifier: 20% !default;
-$btn-color-modifier: 10% !default;
-$btn-outline-hover-state-modifier: 0.9 !default;
-$btn-outline-active-state-modifier: 0.6 !default;
-$btn-box-shadow-focus-modifier: 0.5 !default;
-
-$btn-disabled-color: #646466;
-$btn-box-shadow-color: rgba(0, 0, 0, 0.3);
-
-$btn-swatches: (
-  // Gamut Next
-  "hyper": #3a10e5,
-  "red": #e91c11,
-  "navy": #10162f,
-  "white": #ffffff,
-  "grey": #c4c3c7,
-  // Gamut Classic
-  "brand-blue": #3069f0,
-  "brand-red": #fd4d3f,
-  "brand-yellow": #ffd500,
-  "brand-purple": #6400e4,
-  "brand-dark-blue": #141c3a,
-  // Editor
-  "mint": #34b3a0,
-  "darkmint": #1a7b72,
-  "greyblue": #354551
-);
-
-$color-black: #000000;
-$color-white: #ffffff;

package/dist/AccordionButtonDeprecated/ButtonDeprecatedBase/index.d.ts

@@ -1,43 +0,0 @@
-import { HTMLProps, ReactNode } from 'react';
-import * as React from 'react';
-import { ChildComponentDescriptor } from '../../typings/react';
-export type ButtonDeprecatedBaseProps = Omit<HTMLProps<HTMLAnchorElement> & HTMLProps<HTMLButtonElement>, 'as' | 'size'> & {
-    /**
-     * Component type to wrap children with.
-     */
-    as?: ChildComponentDescriptor;
-    /**
-     * @remarks We would love to properly type this with generics, but cannot yet.
-     * @see https://github.com/Codecademy/gamut/pull/270#discussion_r270917147
-     * @see https://github.com/Microsoft/TypeScript/issues/21048
-     */
-    asProps?: any;
-    children?: ReactNode;
-    className?: string;
-    href?: string;
-    target?: string;
-    rel?: string;
-    /**
-     * Variant that displays the button as an inline link element, but maintains its semantic meaning as a button.
-     */
-    link?: boolean;
-    /**
-     * @remarks
-     * Technically, this is only ever a button event *or* a link event.
-     * We '&' them together for ease of usage.
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement> & React.MouseEvent<HTMLButtonElement>) => void;
-};
-/**
- * @deprecated
- * This component is deprecated and is no longer supported.
- *
- * See [Anchor](https://gamut.codecademy.com/storybook/?path=/docs/typography-anchor--anchor) for similiar functionality
- *
- * @example
- * import { Anchor } from '@codecademy/gamut';
- *
- * <Anchor variant="interface">Button</Anchor>
- *
- */
-export declare const ButtonDeprecatedBase: React.FC<ButtonDeprecatedBaseProps>;

package/dist/AccordionButtonDeprecated/ButtonDeprecatedBase/index.js

@@ -1,71 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { omitProps } from '../../utils';
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles.module.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-const propKeys = ['children', 'className', 'href', 'link', 'onClick', 'target', 'rel'];
-/**
- * @deprecated
- * This component is deprecated and is no longer supported.
- *
- * See [Anchor](https://gamut.codecademy.com/storybook/?path=/docs/typography-anchor--anchor) for similiar functionality
- *
- * @example
- * import { Anchor } from '@codecademy/gamut';
- *
- * <Anchor variant="interface">Button</Anchor>
- *
- */
-
-export const ButtonDeprecatedBase = props => {
-  const {
-    href,
-    className,
-    link,
-    onClick,
-    target,
-    rel
-  } = props;
-  const {
-    as: As,
-    asProps = {},
-    ...restOfProps
-  } = props;
-  const propsToTransfer = omitProps(propKeys, restOfProps);
-  const classes = cx(styles.basicBtn, className, {
-    [styles.basicLink]: link
-  });
-  const defaultProps = {
-    ...propsToTransfer,
-    className: classes,
-    onClick,
-    'data-btn': true
-  };
-  if (As) {
-    return /*#__PURE__*/_jsx(As, {
-      ...defaultProps,
-      ...asProps
-    });
-  }
-  if (href) {
-    // Check if this is a popup and and appropriate rel props if they don't exist (see https://web.dev/external-anchors-use-rel-noopener/)
-    const anchorProps = {
-      target,
-      rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel
-    };
-
-    // Anchor tag receives children content from propsToTransfer
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
-    return /*#__PURE__*/_jsx("a", {
-      ...defaultProps,
-      ...anchorProps,
-      href: href
-    });
-  }
-
-  // eslint-disable-next-line react/button-has-type
-  return /*#__PURE__*/_jsx("button", {
-    ...defaultProps
-  });
-};

package/dist/AccordionButtonDeprecated/ButtonDeprecatedBase/styles.module.scss

@@ -1,74 +0,0 @@
-.basicBtn {
-  display: inline-block;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  font-family: inherit;
-  font: inherit;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: none;
-  color: inherit;
-  line-height: normal;
-
-  &,
-  &:active {
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &:hover:focus {
-    text-decoration: none;
-  }
-  &:focus {
-    text-decoration: none;
-  }
-
-  &:active {
-    background-image: none;
-    outline: 0;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-  }
-}
-
-.basicLink {
-  text-decoration: none;
-  vertical-align: baseline;
-  cursor: pointer;
-
-  &,
-  &:active,
-  &:disabled {
-    background-color: transparent;
-  }
-  &,
-  &:focus,
-  &:active {
-    border-color: transparent;
-  }
-  &:hover,
-  &:focus {
-    opacity: 0.7;
-    text-decoration: none;
-    border-color: transparent;
-    background-color: transparent;
-  }
-  &:hover:focus {
-    opacity: 0.7;
-    background-color: transparent;
-  }
-  &:disabled {
-    &:hover:focus {
-      opacity: 0.7;
-      text-decoration: none;
-    }
-  }
-}

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/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));
-}