@codecademy/brand 5.8.1-alpha.eb4ad4236.0 → 5.9.0-alpha.53aee8497.0

package/dist/AccordionAreaDeprecated/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export type AccordionAreaDeprecatedProps = {
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Whether the accordion is visually expanded to show its contents.
+     */
+    expanded?: boolean;
+    /**
+     * Contents of the clickable header button.
+     */
+    top: React.ReactNode;
+};
+/**
+ * @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 AccordionAreaDeprecated: React.FC<AccordionAreaDeprecatedProps>;

package/dist/AccordionAreaDeprecated/index.js

@@ -0,0 +1,60 @@
+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 { useState } from 'react';
+import * as React 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'
+  }
+};
+
+/**
+ * @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 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
+    })]
+  });
+};
+const StyledAccordionBody = /*#__PURE__*/_styled(motion.div, {
+  target: "e1rvyab20",
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY2NvcmRpb25BcmVhRGVwcmVjYXRlZC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUU4QyIsImZpbGUiOiIuLi8uLi9zcmMvQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuXG4gIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgYWNjb3JkaW9uIGlzIHZpc3VhbGx5IGV4cGFuZGVkIHRvIHNob3cgaXRzIGNvbnRlbnRzLlxuICAgKi9cbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBDb250ZW50cyBvZiB0aGUgY2xpY2thYmxlIGhlYWRlciBidXR0b24uXG4gICAqL1xuICB0b3A6IFJlYWN0LlJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IHRyYW5zaXRpb25EdXJhdGlvbiA9IDAuMjtcblxuY29uc3QgdmFyaWFudHMgPSB7XG4gIGV4cGFuZGVkOiB7IGhlaWdodDogJ2F1dG8nIH0sXG4gIGZvbGRlZDogeyBoZWlnaHQ6ICcwJyB9LFxufTtcblxuLyoqXG4gKiBAZGVwcmVjYXRlZFxuICogVGhpcyBjb21wb25lbnQgaXMgaW4gdGhlIG9sZCB2aXN1YWwgaWRlbnRpdHkgYW5kIHdpbGwgYmUgdXBkYXRlZCBzb29uLlxuICpcbiAqIENoZWNrIHRoZSBbR2FtdXQgQm9hcmRdKGh0dHBzOi8vd3d3Lm5vdGlvbi5zby9jb2RlY2FkZW15L0dhbXV0LVN0YXR1cy1UaW1lbGluZS1kZDNjMTM1ZDM4NDg0NjRlYTZlYjFiNDhlNjhmYmIxZCkgZm9yIGNvbXBvbmVudCBzdGF0dXNcbiAqL1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQ6IFJlYWN0LkZDPFxuICBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzXG4+ID0gKHsgY2hpbGRyZW4sIGNsYXNzTmFtZSwgZXhwYW5kZWQsIHRvcCB9KSA9PiB7XG4gIGNvbnN0IFtkZWxheUV4cGFuZGVkLCBzZXREZWxheUV4cGFuZGVkXSA9IHVzZVN0YXRlKGV4cGFuZGVkKTtcblxuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBoYW5kbGUgPSBzZXRUaW1lb3V0KFxuICAgICAgKCkgPT4gc2V0RGVsYXlFeHBhbmRlZChleHBhbmRlZCksXG4gICAgICB0cmFuc2l0aW9uRHVyYXRpb24gKiAxMDAwXG4gICAgKTtcblxuICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQoaGFuZGxlKTtcbiAgfSwgW2V4cGFuZGVkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgIHt0b3B9XG4gICAgICA8U3R5bGVkQWNjb3JkaW9uQm9keVxuICAgICAgICBhbmltYXRlPXtleHBhbmRlZCA/ICdleHBhbmRlZCcgOiAnZm9sZGVkJ31cbiAgICAgICAgaW5pdGlhbD17ZXhwYW5kZWQgPyAnZXhwYW5kZWQnIDogJ2ZvbGRlZCd9XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMiwgZWFzZTogJ2Vhc2VJbk91dCcgfX1cbiAgICAgICAgdmFyaWFudHM9e3ZhcmlhbnRzfVxuICAgICAgPlxuICAgICAgICB7KGV4cGFuZGVkIHx8IGRlbGF5RXhwYW5kZWQpICYmIGNoaWxkcmVufVxuICAgICAgPC9TdHlsZWRBY2NvcmRpb25Cb2R5PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQm9keSA9IHN0eWxlZChtb3Rpb24uZGl2KWBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

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

@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import * as React from 'react';
+import { ButtonDeprecatedBaseProps } from '../ButtonDeprecatedBase';
+export declare const buttonPresetThemes: {
+    readonly secondary: "mint";
+    readonly platform: "greyblue";
+    readonly lantern: "darkmint";
+    readonly royalblue: "brand-purple";
+};
+declare const themes: readonly ["hyper", "navy", "red", "white", "brand-red", "brand-yellow", "brand-purple", "brand-dark-blue", "brand-blue", "mint", "darkmint", "grey", "greyblue"];
+export type ButtonDeprecatedThemes = keyof typeof buttonPresetThemes | (typeof themes)[number];
+export type ButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
+    /**
+     * Whether button should behave like a block element or inline.
+     */
+    block?: boolean;
+    /**
+     * Capitalize the text of the button.
+     */
+    caps?: boolean;
+    children: ReactNode;
+    /**
+     * Disables the button and adds visual indicators to show it is not interactive.
+     */
+    disabled?: boolean;
+    /**
+     * Variant that displays the button as flat.
+     */
+    flat?: boolean;
+    /**
+     * Adds a pulsing animation to the button
+     */
+    go?: boolean;
+    /**
+     * Changes the button to a link with no visual indication
+     */
+    href?: string;
+    /**
+     * Link relationship property to be used with `href`
+     */
+    rel?: string;
+    /**
+     * Link target property to be used with `href`
+     */
+    target?: string;
+    id?: string;
+    /**
+     * Variant that displays the button as an inline link element, but maintains its semantic meaning as a button.
+     */
+    link?: boolean;
+    /**
+     * Variant the displays the button as a button that is outlined instead of solid.
+     */
+    outline?: boolean;
+    /**
+     *  Variant that rounds the corners of the button
+     */
+    round?: boolean;
+    /**
+     * Variant that determines the size of the button
+     */
+    size?: 'small' | 'large';
+    /**
+     * Variant that displays the button as a square
+     */
+    square?: boolean;
+    /**
+     * Variant that controls the background and text color of the button
+     * */
+    theme?: ButtonDeprecatedThemes;
+    type?: string;
+    /**
+     * Variant that underlines the text of the button.
+     */
+    underline?: boolean;
+    /**
+     *  Determines whether button dimensions should be determined by the content
+     */
+    fitText?: boolean;
+};
+/**
+ * @deprecated
+ * This component is deprecated and is no longer supported.
+ *
+ * See [FillButon](https://gamut.codecademy.com/storybook/?path=/docs/atoms-button--fill-button#fill-button)
+ *
+ * @example
+ * import { FillButton } fom '@codecademy/gamut';
+ *
+ * <FillButton variant="primary" />
+ */
+export declare const ButtonDeprecated: React.FC<ButtonDeprecatedProps>;
+export {};

package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.js

@@ -0,0 +1,65 @@
+/* eslint-disable react/destructuring-assignment */
+import cx from 'classnames';
+import hasIn from 'lodash/hasIn';
+import * as React from 'react';
+import { omitProps } from '../../utils';
+import { ButtonDeprecatedBase } from '../ButtonDeprecatedBase';
+// eslint-disable-next-line gamut/no-css-standalone
+import styles from './styles/index.module.scss';
+
+// themes can be an alias to a color
+// or a unique button type
+import { jsx as _jsx } from "react/jsx-runtime";
+export const buttonPresetThemes = {
+  secondary: 'mint',
+  platform: 'greyblue',
+  lantern: 'darkmint',
+  royalblue: 'brand-purple'
+};
+const themes = ['hyper', 'navy', 'red', 'white', 'brand-red', 'brand-yellow', 'brand-purple', 'brand-dark-blue', 'brand-blue', 'mint', 'darkmint', 'grey', 'greyblue'];
+const propKeys = ['theme', 'size', 'outline', 'underline', 'link', 'caps', 'go', 'children', 'block', 'className', 'round', 'square', 'flat', 'fitText', 'onClick'];
+const isPreset = theme => {
+  return hasIn(buttonPresetThemes, theme);
+};
+
+/**
+ * @deprecated
+ * This component is deprecated and is no longer supported.
+ *
+ * See [FillButon](https://gamut.codecademy.com/storybook/?path=/docs/atoms-button--fill-button#fill-button)
+ *
+ * @example
+ * import { FillButton } fom '@codecademy/gamut';
+ *
+ * <FillButton variant="primary" />
+ */
+
+export const ButtonDeprecated = props => {
+  let {
+    theme = 'brand-red'
+  } = props;
+  if (isPreset(theme)) {
+    theme = buttonPresetThemes[theme];
+  }
+  const typeClassName = props.link ? styles.link : styles.btn;
+  const themeClassName = props.link ? styles[`link-${theme}`] : styles[`btn-${theme}`];
+  const classes = cx(typeClassName, themeClassName, styles[props.size], {
+    [styles.block]: props.block,
+    [styles.go]: props.go,
+    [styles.outline]: props.outline,
+    [styles.underline]: props.underline,
+    [styles.caps]: props.caps,
+    [styles.round]: props.round,
+    [styles.square]: props.square,
+    [styles.flat]: props.flat,
+    [styles['fit-text']]: props.fitText
+  }, props.className);
+  const propsToTransfer = omitProps(propKeys, props);
+  return /*#__PURE__*/_jsx(ButtonDeprecatedBase, {
+    ...propsToTransfer,
+    className: classes,
+    link: props.link,
+    onClick: props.onClick,
+    children: props.children
+  });
+};

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

@@ -0,0 +1,104 @@
+@use "sass:color";
+@use "variables";
+@use "mixins";
+//
+// Base styles
+//
+
+.btn {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  font-weight: variables.$btn-font-weight;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  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;
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset[disabled] a.btn {
+  pointer-events: none;
+}
+
+@each $name, $color in variables.$btn-swatches {
+  @if $name == "brand-yellow" {
+    @include mixins.button-variants($name, variables.$color-black, $color);
+  } @else if color.channel(color.to-space($color, hsl), "lightness") > 68 {
+    @include mixins.button-variants($name, variables.$color-black, $color);
+  } @else {
+    @include mixins.button-variants($name, variables.$color-white, $color);
+  }
+}
+
+.round {
+  border-radius: variables.$btn-round-border-radius;
+}
+
+.square {
+  border-radius: 0;
+}
+//
+// Button Sizes
+//
+
+.large {
+  // line-height: ensure even-numbered height of button next to large input
+  @include mixins.button-size(
+    variables.$btn-padding-y-lg,
+    variables.$btn-padding-x-lg,
+    variables.$btn-font-size-lg,
+    variables.$btn-line-height-lg,
+    variables.$btn-min-width-lg
+  );
+}
+
+.small {
+  // line-height: ensure proper height of button next to small input
+  @include mixins.button-size(
+    variables.$btn-padding-y-sm,
+    variables.$btn-padding-x-sm,
+    variables.$btn-font-size-sm,
+    variables.$btn-line-height-sm,
+    variables.$btn-min-width-sm
+  );
+}
+
+//
+// Block buttovariables.n
+//
+
+.block {
+  display: flex;
+  width: 100%;
+}
+
+.caps {
+  text-transform: uppercase;
+}
+
+.underline {
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.block {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,109 @@
+@use "sass:color";
+@use "variables";
+
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($color, $background, $border: transparent) {
+  $active-background: color.mix(variables.$color-black, $background);
+
+  @if $border == transparent {
+    $active-border: transparent;
+    $active-border-hover: transparent;
+  }
+
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  &:hover {
+    box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $background;
+  }
+
+  &:focus-visible,
+  &:hover {
+    text-decoration: none;
+    color: $color;
+
+    &:active {
+      box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
+    }
+  }
+
+  &:active {
+    background-color: $active-background;
+  }
+
+  &:disabled {
+    background-color: variables.$btn-disabled-color;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
+@mixin button-flat-variant($color) {
+  color: $color;
+  background-color: transparent;
+
+  &:hover,
+  &:active {
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $color;
+  }
+
+  &:disabled {
+    color: variables.$btn-disabled-color;
+    background-color: transparent;
+  }
+}
+
+// Button sizes
+@mixin button-size(
+  $padding-y,
+  $padding-x,
+  $font-size,
+  $line-height,
+  $min-width
+) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  min-width: $min-width;
+
+  &.fit-text {
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+@mixin button-variants($name, $color, $background, $border: transparent) {
+  .btn-#{$name} {
+    @include button-variant($color, $background, $border);
+    &.flat {
+      @include button-flat-variant($background);
+    }
+    @content;
+  }
+  .link-#{$name} {
+    font-weight: bold;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: $background;
+    text-decoration: underline;
+
+    &:disabled {
+      color: variables.$btn-disabled-color;
+    }
+  }
+}

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

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

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

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

@@ -0,0 +1,74 @@
+.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;
+    }
+  }
+}