@codecademy/brand 5.9.0-alpha.c7d5bcc33.0 → 5.9.0-alpha.f072baf5b.0

package/dist/utils/index.js

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

package/dist/utils/omitProps.d.ts

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "5.9.0-alpha.c7d5bcc33.0",
+  "version": "5.9.0-alpha.f072baf5b.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",
@@ -21,6 +21,7 @@
     "framer-motion": "^11.18.0",
     "freezeframe": "^5.0.2",
     "intersection-observer": "^0.12.0",
+    "invariant": "^2.2.4",
     "ismobilejs": "^1.1.1",
     "lodash": "^4.18.1",
     "pluralize": "^8.0.0",
@@ -28,6 +29,9 @@
     "react-use": "15.3.8",
     "universal-cookie": "^8.0.1"
   },
+  "devDependencies": {
+    "@types/invariant": "^2.2.37"
+  },
   "peerDependencies": {
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",

package/dist/AccordionDeprecated/AccordionAreaDeprecated/index.d.ts

@@ -1,12 +0,0 @@
-import React, { ReactNode } from 'react';
-export type AccordionAreaDeprecatedProps = {
-    children: ReactNode;
-    className?: string;
-    expanded?: boolean;
-    top: ReactNode;
-};
-/**
- * @deprecated
- * Vendored from Gamut for consumers that still rely on the legacy accordion API.
- */
-export declare const AccordionAreaDeprecated: React.FC<AccordionAreaDeprecatedProps>;

package/dist/AccordionDeprecated/AccordionAreaDeprecated/index.js

@@ -1,55 +0,0 @@
-import _styled from "@emotion/styled/base";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-import { motion } from 'framer-motion';
-import React, { useState } from 'react';
-import { useIsomorphicLayoutEffect } from 'react-use';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const transitionDuration = 0.2;
-const variants = {
-  expanded: {
-    height: 'auto'
-  },
-  folded: {
-    height: '0'
-  }
-};
-const StyledAccordionBody = /*#__PURE__*/_styled(motion.div, {
-  target: "esa36tz0",
-  label: "StyledAccordionBody"
-})(process.env.NODE_ENV === "production" ? {
-  name: "d3v9zr",
-  styles: "overflow:hidden"
-} : {
-  name: "d3v9zr",
-  styles: "overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BY2NvcmRpb25EZXByZWNhdGVkL0FjY29yZGlvbkFyZWFEZXByZWNhdGVkL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZOEMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0FjY29yZGlvbkRlcHJlY2F0ZWQvQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgUmVhY3QsIHsgUmVhY3ROb2RlLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5jb25zdCB0cmFuc2l0aW9uRHVyYXRpb24gPSAwLjI7XG5cbmNvbnN0IHZhcmlhbnRzID0ge1xuICBleHBhbmRlZDogeyBoZWlnaHQ6ICdhdXRvJyB9LFxuICBmb2xkZWQ6IHsgaGVpZ2h0OiAnMCcgfSxcbn07XG5cbmNvbnN0IFN0eWxlZEFjY29yZGlvbkJvZHkgPSBzdHlsZWQobW90aW9uLmRpdilgXG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG4gIGV4cGFuZGVkPzogYm9vbGVhbjtcbiAgdG9wOiBSZWFjdE5vZGU7XG59O1xuXG4vKipcbiAqIEBkZXByZWNhdGVkXG4gKiBWZW5kb3JlZCBmcm9tIEdhbXV0IGZvciBjb25zdW1lcnMgdGhhdCBzdGlsbCByZWx5IG9uIHRoZSBsZWdhY3kgYWNjb3JkaW9uIEFQSS5cbiAqL1xuZXhwb3J0IGNvbnN0IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkOiBSZWFjdC5GQzxcbiAgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWRQcm9wc1xuPiA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGV4cGFuZGVkLCB0b3AgfSkgPT4ge1xuICBjb25zdCBbZGVsYXlFeHBhbmRlZCwgc2V0RGVsYXlFeHBhbmRlZF0gPSB1c2VTdGF0ZShleHBhbmRlZCk7XG5cbiAgdXNlSXNvbW9ycGhpY0xheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgaGFuZGxlID0gc2V0VGltZW91dChcbiAgICAgICgpID0+IHNldERlbGF5RXhwYW5kZWQoZXhwYW5kZWQpLFxuICAgICAgdHJhbnNpdGlvbkR1cmF0aW9uICogMTAwMFxuICAgICk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KGhhbmRsZSk7XG4gIH0sIFtleHBhbmRlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7dG9wfVxuICAgICAgPFN0eWxlZEFjY29yZGlvbkJvZHlcbiAgICAgICAgYW5pbWF0ZT17ZXhwYW5kZWQgPyAnZXhwYW5kZWQnIDogJ2ZvbGRlZCd9XG4gICAgICAgIGluaXRpYWw9e2V4cGFuZGVkID8gJ2V4cGFuZGVkJyA6ICdmb2xkZWQnfVxuICAgICAgICB0cmFuc2l0aW9uPXt7IGR1cmF0aW9uOiAwLjIsIGVhc2U6ICdlYXNlSW5PdXQnIH19XG4gICAgICAgIHZhcmlhbnRzPXt2YXJpYW50c31cbiAgICAgID5cbiAgICAgICAgeyhleHBhbmRlZCB8fCBkZWxheUV4cGFuZGVkKSAmJiBjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQWNjb3JkaW9uQm9keT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-/**
- * @deprecated
- * Vendored from Gamut for consumers that still rely on the legacy accordion API.
- */
-export const AccordionAreaDeprecated = ({
-  children,
-  className,
-  expanded,
-  top
-}) => {
-  const [delayExpanded, setDelayExpanded] = useState(expanded);
-  useIsomorphicLayoutEffect(() => {
-    const handle = setTimeout(() => setDelayExpanded(expanded), transitionDuration * 1000);
-    return () => clearTimeout(handle);
-  }, [expanded]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: className,
-    children: [top, /*#__PURE__*/_jsx(StyledAccordionBody, {
-      animate: expanded ? 'expanded' : 'folded',
-      initial: expanded ? 'expanded' : 'folded',
-      transition: {
-        duration: 0.2,
-        ease: 'easeInOut'
-      },
-      variants: variants,
-      children: (expanded || delayExpanded) && children
-    })]
-  });
-};

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/index.d.ts

@@ -1,9 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ButtonDeprecatedBaseProps } from '../ButtonDeprecatedBase';
-export type ButtonDeprecatedTheme = 'brand-dark-blue' | 'white';
-export type ButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
-    children: ReactNode;
-    flat?: boolean;
-    theme?: ButtonDeprecatedTheme;
-};
-export declare const ButtonDeprecated: React.FC<ButtonDeprecatedProps>;

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/index.js

@@ -1,24 +0,0 @@
-import cx from 'classnames';
-import React from 'react';
-import { ButtonDeprecatedBase } from '../ButtonDeprecatedBase';
-// eslint-disable-next-line gamut/no-css-standalone -- vendored Gamut legacy accordion
-import styles from './styles/index.module.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ButtonDeprecated = ({
-  theme = 'brand-dark-blue',
-  children,
-  className,
-  flat,
-  onClick,
-  ...propsToTransfer
-}) => {
-  const classes = cx(styles.btn, styles[`btn-${theme}`], {
-    [styles.flat]: flat
-  }, className);
-  return /*#__PURE__*/_jsx(ButtonDeprecatedBase, {
-    ...propsToTransfer,
-    className: classes,
-    onClick: onClick,
-    children: children
-  });
-};

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecated/styles/index.module.scss

@@ -1,30 +0,0 @@
-@use "variables";
-@use "mixins";
-@use "../../../../styles/gamut-styles-utils" as *;
-
-.btn {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  font-weight: variables.$btn-font-weight;
-  @include font-smoothing;
-  border: 1px solid transparent;
-  border-radius: variables.$btn-border-radius;
-  user-select: none;
-  @include mixins.button-size(
-    variables.$btn-padding-y,
-    variables.$btn-padding-x,
-    variables.$btn-font-size-base,
-    variables.$btn-line-height,
-    variables.$btn-min-width-sm
-  );
-  transition: all 0.1s ease-in-out;
-}
-
-@include mixins.button-variants(
-  "brand-dark-blue",
-  $color-white,
-  $brand-dark-blue
-);
-
-@include mixins.button-variants("white", $color-black, $color-white);

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

@@ -1,16 +0,0 @@
-@use "../../../../styles/gamut-styles-utils" as *;
-
-$btn-padding-x: px-rem(16) !default;
-$btn-padding-y: 0.375rem !default;
-$btn-font-weight: bold !default;
-
-$btn-line-height: 1.5 !default;
-
-$btn-font-size-base: px-rem(16) !default;
-
-$btn-min-width-sm: px-rem(128) !default;
-
-$btn-border-radius: 2px !default;
-
-$btn-disabled-color: $color-gray-600;
-$btn-box-shadow-color: rgba(0, 0, 0, 0.3);

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

@@ -1,5 +0,0 @@
-import React, { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonDeprecatedBaseProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: ReactNode;
-};
-export declare const ButtonDeprecatedBase: React.FC<ButtonDeprecatedBaseProps>;

package/dist/AccordionDeprecated/AccordionButtonDeprecated/ButtonDeprecatedBase/index.js

@@ -1,22 +0,0 @@
-import cx from 'classnames';
-import React from 'react';
-
-// eslint-disable-next-line gamut/no-css-standalone -- vendored Gamut legacy accordion
-import styles from './styles.module.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ButtonDeprecatedBase = ({
-  className,
-  onClick,
-  children,
-  ...propsToTransfer
-}) => {
-  const classes = cx(styles.basicBtn, className);
-  return /*#__PURE__*/_jsx("button", {
-    ...propsToTransfer,
-    className: classes,
-    onClick: onClick,
-    type: "button",
-    "data-btn": true,
-    children: children
-  });
-};

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

@@ -1,15 +0,0 @@
-import React, { ReactNode } from 'react';
-export type AccordionButtonTheme = 'blue' | 'plain';
-export type AccordionButtonDeprecatedProps = {
-    children: ReactNode;
-    className?: string;
-    disabled?: boolean;
-    expanded?: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    theme?: AccordionButtonTheme;
-};
-/**
- * @deprecated
- * Vendored from Gamut for consumers that still rely on the legacy accordion API.
- */
-export declare const AccordionButtonDeprecated: React.FC<AccordionButtonDeprecatedProps>;

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

@@ -1,22 +0,0 @@
-@use "../../styles/gamut-styles-utils" as *;
-
-.accordionButton {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.375rem 1rem;
-  width: 100%;
-
-  &.blue {
-    color: $color-blue-200;
-  }
-}
-
-.expansionIcon {
-  margin-left: 0.75rem;
-  transition: transform 0.35s ease-out;
-}
-
-.expansionIconExpanded {
-  transform: rotate(-180deg);
-}

package/dist/styles/gamut-styles-utils/index.scss

@@ -1,28 +0,0 @@
-// Vendored subset of @codecademy/gamut-styles/utils (v17.14.0).
-// Gamut-styles no longer publishes SCSS utils; accordion SCSS depends on these symbols.
-
-@use "sass:math";
-
-$color-white: #ffffff;
-$color-black: #000000;
-$color-blue-200: #a5befa;
-$color-gray-600: #646466;
-$brand-dark-blue: #141c3a;
-
-@function strip-units($number) {
-  @return math.div($number, ($number * 0 + 1));
-}
-
-@function px-rem($px, $base-px: 16) {
-  @return calc(strip-units($px) / strip-units($base-px)) * 1rem;
-}
-
-@mixin font-smoothing($value: on) {
-  @if $value == on {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  } @else {
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-  }
-}