@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Badge/index.scss

@@ -1,112 +1,2 @@
-.badge {
-  display: inline-block;
-  padding: var(--pgn-spacing-badge-padding-y) var(--pgn-spacing-badge-padding-x-base);
-  color: var(--pgn-badge-color, inherit);
-  background-color: var(--pgn-badge-bg, transparent);
-
-  @include font-size(var(--pgn-typography-badge-font-size));
-
-  font-weight: var(--pgn-typography-badge-font-weight);
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  transition: var(--pgn-transition-badge);
-
-  @include border-radius(var(--pgn-size-badge-border-radius-base));
-
-  @at-root a#{&} {
-    &:hover,
-    &:focus {
-      text-decoration: none;
-      color: var(--pgn-badge-focus-color, inherit);
-      background-color: var(--pgn-badge-focus-bg, transparent);
-    }
-
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: 0 0 0 var(--pgn-size-badge-focus-width) var(--pgn-badge-focus-box-shadow, rgba(0, 0, 0, .15));
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-.badge-pill {
-  padding-right: var(--pgn-spacing-badge-padding-x-pill);
-  padding-left: var(--pgn-spacing-badge-padding-x-pill);
-
-  @include border-radius(var(--pgn-size-badge-border-radius-pill));
-}
-
-.badge-primary {
-  --pgn-badge-color: var(--pgn-color-badge-text-primary);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-primary);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-primary);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-primary);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-primary);
-}
-
-.badge-secondary {
-  --pgn-badge-color: var(--pgn-color-badge-text-secondary);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-secondary);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-secondary);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-secondary);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-secondary);
-}
-
-.badge-success {
-  --pgn-badge-color: var(--pgn-color-badge-text-success);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-success);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-success);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-success);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-success);
-}
-
-.badge-danger {
-  --pgn-badge-color: var(--pgn-color-badge-text-danger);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-danger);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-danger);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-danger);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-danger);
-}
-
-.badge-warning {
-  --pgn-badge-color: var(--pgn-color-badge-text-warning);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-warning);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-warning);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-warning);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-warning);
-}
-
-.badge-info {
-  --pgn-badge-color: var(--pgn-color-badge-text-info);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-info);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-info);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-info);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-info);
-}
-
-.badge-light {
-  --pgn-badge-color: var(--pgn-color-badge-text-light);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-light);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-light);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-light);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-light);
-}
-
-.badge-dark {
-  --pgn-badge-color: var(--pgn-color-badge-text-dark);
-  --pgn-badge-bg: var(--pgn-color-badge-bg-dark);
-  --pgn-badge-focus-color: var(--pgn-color-badge-focus-dark);
-  --pgn-badge-focus-bg: var(--pgn-color-badge-focus-bg-dark);
-  --pgn-badge-focus-box-shadow: var(--pgn-color-badge-focus-box-shadow-dark);
-}
+@import "variables";
+@import "~bootstrap/scss/badge";

package/src/Breadcrumb/_variables.scss

@@ -0,0 +1,27 @@
+// Breadcrumbs
+
+$breadcrumb-font-size:              null !default;
+
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-padding-x:              1rem !default;
+$breadcrumb-item-padding:           .5rem !default;
+
+$breadcrumb-margin-bottom:          1rem !default;
+$breadcrumb-margin-left:           .5rem !default;
+
+$breadcrumb-border-focus-axis-x:    .25rem !default;
+$breadcrumb-border-focus-axis-y:    .5rem !default;
+
+$breadcrumb-border-focus-width:     .0625rem !default;
+
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-500 !default;
+$breadcrumb-inverse-active:         $light-500 !default;
+$breadcrumb-inverse-spacer:         $light-700 !default;
+$breadcrumb-color:                  $primary-500 !default;
+$breadcrumb-inverse-color:          $white !default;
+$breadcrumb-divider:                "/" !default;
+
+$breadcrumb-border-radius:          $border-radius !default;
+$breadcrumb-focus-border-radius:          .125rem !default;

package/src/Breadcrumb/index.scss

@@ -1,11 +1,13 @@
+@import "variables";
+
 .pgn__breadcrumb {
   .list-inline-item {
     &.active {
-      color: var(--pgn-color-breadcrumb-active);
+      color: $breadcrumb-active-color;
     }
 
     a.link-muted {
-      color: var(--pgn-color-breadcrumb-base);
+      color: $breadcrumb-color;
 
       &:focus {
         position: relative;
@@ -17,18 +19,18 @@
       &:focus::before {
         content: "";
         position: absolute;
-        top: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
-        right: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
-        bottom: calc(var(--pgn-size-breadcrumb-border-axis-y-focus) * -1);
-        left: calc(var(--pgn-size-breadcrumb-border-axis-x-focus) * -1);
-        border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-base);
-        border-radius: var(--pgn-size-breadcrumb-border-radius-focus);
+        top: -$breadcrumb-border-focus-axis-y;
+        right: -$breadcrumb-border-focus-axis-x;
+        bottom: -$breadcrumb-border-focus-axis-y;
+        left: -$breadcrumb-border-focus-axis-x;
+        border: $breadcrumb-border-focus-width solid $breadcrumb-color;
+        border-radius: $breadcrumb-focus-border-radius;
       }
     }
 
     [dir="rtl"] & {
       margin-right: 0;
-      margin-left: var(--pgn-spacing-breadcrumb-margin-left);
+      margin-left: $breadcrumb-margin-left;
     }
 
     .pgn__icon {
@@ -41,21 +43,21 @@
   &-dark {
     .list-inline-item {
       &.active {
-        color: var(--pgn-color-breadcrumb-inverse-active);
+        color: $breadcrumb-inverse-active;
       }
 
       a.link-muted {
-        color: var(--pgn-color-breadcrumb-inverse-base);
+        color: $breadcrumb-inverse-color;
 
         &:focus::before {
-          border: var(--pgn-size-breadcrumb-border-width-focus) solid var(--pgn-color-breadcrumb-inverse-base);
+          border: $breadcrumb-border-focus-width solid $breadcrumb-inverse-color;
         }
       }
     }
 
     .pgn__icon,
     .custom-spacer {
-      color: var(--pgn-color-breadcrumb-inverse-spacer);
+      color: $breadcrumb-inverse-spacer;
     }
   }
 
@@ -69,7 +71,7 @@
 
       .list-inline-item:not(:last-child) {
         margin-right: 0;
-        margin-left: var(--pgn-spacing-breadcrumb-margin-left);
+        margin-left: $breadcrumb-margin-left;
       }
 
       .pgn__icon {

package/src/Bubble/_variables.scss

@@ -0,0 +1,8 @@
+$bubble-variants: (
+  "success":    ( "background-color": $success, "color": $white ),
+  "warning":    ( "background-color": $warning, "color": $white ),
+  "error":      ( "background-color": $danger, "color": $white ),
+  "primary":    ( "background-color": $primary, "color": $white ),
+) !default;
+$bubble-expandable-padding-x:              .25rem !default;
+$bubble-expandable-padding-y:              0 !default;

package/src/Bubble/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__bubble {
   line-height: normal;
   min-height: 1.5rem;
@@ -6,36 +8,21 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--pgn-typography-font-size-xs);
-  color: var(--pgn-bubble-color, inherit);
-  background-color: var(--pgn-bubble-bg, transparent);
+  font-size: $font-size-xs;
+
+  @each $name, $colors in $bubble-variants {
+    &.pgn__bubble-#{$name} {
+      background-color: map-get($colors, "background-color");
+      color: map-get($colors, "color");
+    }
+  }
 
   &:disabled,
   &.disabled {
-    background: var(--pgn-color-gray-500);
+    background: $gray-500;
   }
 
   &.expandable {
-    padding: var(--pgn-spacing-bubble-expandable-padding-y) var(--pgn-spacing-bubble-expandable-padding-x);
+    padding: $bubble-expandable-padding-y $bubble-expandable-padding-x;
   }
 }
-
-.pgn__bubble-primary {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-primary);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-primary);
-}
-
-.pgn__bubble-success {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-success);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-success);
-}
-
-.pgn__bubble-warning {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-warning);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-warning);
-}
-
-.pgn__bubble-error {
-  --pgn-bubble-color: var(--pgn-color-bubble-text-error);
-  --pgn-bubble-bg: var(--pgn-color-bubble-bg-error);
-}

package/src/Button/README.md

@@ -8,6 +8,8 @@ categories:
 status: 'Stable'
 designStatus: 'Done'
 devStatus: 'Done'
+notes: |
+  TODO: Remove subcomponent of deprecated implementation soon
 ---
 
 This component utilizes `Button` from React-Bootstrap and extends it with an ability to add icons before and after button label, see [below](#with-icons-before-or-after) for usage example.<br/> <a href="https://react-bootstrap-v4.netlify.app/components/buttons/" target="_blank" rel="noopener noreferrer"> See React-Bootstrap for additional documentation. </a>
@@ -229,3 +231,85 @@ To implement loading state using a `Button` component, the [StatefulButton](http
 is available for use. <br/>
 This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and 
 user-friendly experience.
+
+***
+
+## Button.Deprecated
+
+### (Deprecated) basic usage
+
+```jsx live
+<Button.Deprecated className="btn-primary">Hello World!</Button.Deprecated>
+```
+
+### (Deprecated) color variants
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-danger">Danger</Button.Deprecated>
+      <Button.Deprecated className="btn-light">Light</Button.Deprecated>
+      <Button.Deprecated className="btn-dark">Dark</Button.Deprecated>
+    </Stack>
+  )
+}
+```
+
+### (Deprecated) outline variants
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-outline-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-outline-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
+```
+
+### (Deprecated) inverse variants
+
+```jsx live
+() => {
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <Stack
+      className="mb-2 p-3 bg-gray-700"
+      gap={2}
+      direction={ isExtraSmall ? "vertical" : "horizontal" }
+    >
+      <Button.Deprecated className="btn-inverse-primary">Primary</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-success">Success</Button.Deprecated>
+      <Button.Deprecated className="btn-inverse-danger">Danger</Button.Deprecated>
+    </Stack>
+  )
+}
+```
+
+### (Deprecated) link variant
+
+```jsx live
+<div className="bg-gray-200 p-3">
+  <Button.Deprecated className="btn-link">Link with button container</Button.Deprecated>
+  <br />
+  <Button.Deprecated className="btn-link px-0">Button with no horizontal padding</Button.Deprecated>
+</div>
+```

package/src/Button/_variables.scss

@@ -0,0 +1,52 @@
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-font-family:             $input-btn-font-family !default;
+$btn-font-size:               $input-btn-font-size !default;
+$btn-line-height:             $input-btn-line-height !default;
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-weight:             $font-weight-normal !default;
+$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width:             2px !default;
+$btn-focus-gap:               $btn-focus-width !default;
+$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       none;
+
+$btn-tertiary-color:          $gray-700 !default;
+$btn-tertiary-bg:             transparent !default;
+$btn-tertiary-hover-bg:       $light-500 !default;
+$btn-tertiary-active-bg:      $light-500 !default;
+$btn-inverse-tertiary-color:          $white !default;
+$btn-inverse-tertiary-bg:             transparent !default;
+$btn-inverse-tertiary-hover-bg:       rgba(255, 255, 255, .1) !default;
+$btn-inverse-tertiary-active-bg:      rgba(255, 255, 255, .1) !default;
+
+$btn-link-disabled-color:     theme-color("gray", "light-text") !default;
+
+$btn-block-spacing-y:         .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+$btn-transition: null;
+
+$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
+$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
+
+$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
+$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
+$btn-focus-border-radius-sm: $btn-border-radius !default;

package/src/Button/deprecated/Button.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Button from '.';
+
+const defaultProps = {
+  label: 'Click me!',
+};
+
+describe('<Button />', () => {
+  it('renders', () => {
+    const { getByText } = render(<Button {...defaultProps} />);
+    const button = getByText(defaultProps.label);
+    expect(button).toBeInTheDocument();
+  });
+
+  it('puts focus on button on click', () => {
+    const { getByText } = render(<Button {...defaultProps} />);
+    const button = getByText(defaultProps.label);
+
+    expect(button).not.toHaveFocus();
+    userEvent.click(button);
+    expect(button).toHaveFocus();
+  });
+
+  it('calls onClick prop on click', () => {
+    const onClickSpy = jest.fn();
+    const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
+    const button = getByText(defaultProps.label);
+
+    userEvent.click(button);
+    expect(onClickSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Button/deprecated/index.jsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import withDeprecatedProps, { DeprTypes } from '../../withDeprecatedProps';
+
+class DeprecatedButton extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const {
+      onBlur,
+      onKeyDown,
+    } = props;
+
+    this.onBlur = onBlur.bind(this);
+    this.onKeyDown = onKeyDown.bind(this);
+    this.onClick = this.onClick.bind(this);
+    this.setRefs = this.setRefs.bind(this);
+  }
+
+  /*
+    The button component is given focus explicitly in its onClick to account
+    for the fact that an HTML <button> element in Firefox and Safari does not get
+    focus on onClick.
+
+    See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button.
+  */
+  onClick(e) {
+    this.buttonRef.focus();
+    this.props.onClick(e);
+  }
+
+  /*
+    The button component needs a ref to itself to be able to force
+    focus in its onClick function (buttonRef). It also needs to accept
+    a callback function from parent components to give those parents
+    a reference to their child button (e.g. for the modal component).
+    Therefore, both have been wrapped in a function bound on the class,
+    since one cannot set two ref attributes on a component.
+  */
+  setRefs(input) {
+    this.buttonRef = input;
+    this.props.inputRef(input);
+  }
+
+  render() {
+    const {
+      buttonType,
+      className,
+      children,
+      isClose,
+      type,
+      /* inputRef is not used directly in the render, but it needs to be assigned
+        here to prevent it from being passed to the HTML button component as part
+        of other.
+      */
+      inputRef,
+      ...other
+    } = this.props;
+
+    return (
+      <button
+        {...other}
+        className={classNames([
+          'btn',
+          className,
+        ], {
+          [`btn-${buttonType}`]: buttonType !== undefined,
+        }, {
+          close: isClose,
+        })}
+        onBlur={this.onBlur}
+        onClick={this.onClick}
+        onKeyDown={this.onKeyDown}
+        // eslint-disable-next-line react/button-has-type
+        type={type}
+        ref={this.setRefs}
+
+      >
+        {children}
+      </button>
+    );
+  }
+}
+
+export const buttonPropTypes = {
+  /** Used to determine the type of button to be rendered.  See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable button types. For example, `buttonType="light"`. The default is `undefined`. */
+  buttonType: PropTypes.string,
+  /** Specifies Bootstrap class names to apply to the button. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable class names. The default is an empty array. */
+  className: PropTypes.string,
+  /** Specifies the text that is displayed within the button. */
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line max-len
+  /** A function that defines a reference for the button. An example `inputRef` from the calling component could look something like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function. */
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
+  ]),
+  /** Used to determine if the button is a "Close" style button to leverage bootstrap styling. Example use case is with the Status Alert [dismiss button](https://getbootstrap.com/docs/4.0/components/alerts/#dismissing). The default is false. */
+  isClose: PropTypes.bool,
+  // eslint-disable-next-line max-len
+  /** A function that would specify what the button should do when the `onBlur` event is triggered. For example, the button could change in color or `buttonType` when focus is changed. The default is an empty function. */
+  onBlur: PropTypes.func,
+  // eslint-disable-next-line max-len
+  /** A function that would specify what the button should do when the `onClick` event is triggered. For example, the button could launch a `Modal`. The default is an empty function. */
+  onClick: PropTypes.func,
+  // eslint-disable-next-line max-len
+  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.  For example, this could handle using the `Escape` key to trigger the button's action. The default is an empty function. */
+  onKeyDown: PropTypes.func,
+  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
+  type: PropTypes.string,
+  /** Specifies variant to use. */
+  variant: PropTypes.oneOf([
+    'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link', 'outline-primary',
+    'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light',
+  ]),
+};
+
+DeprecatedButton.propTypes = buttonPropTypes;
+
+DeprecatedButton.defaultProps = {
+  buttonType: undefined,
+  className: undefined,
+  inputRef: () => {},
+  isClose: false,
+  onBlur: () => {},
+  onKeyDown: () => {},
+  onClick: () => {},
+  type: 'button',
+  variant: 'outline-primary',
+};
+
+export default withDeprecatedProps(DeprecatedButton, 'Button', {
+  label: {
+    deprType: DeprTypes.MOVED,
+    newName: 'children',
+  },
+  className: {
+    deprType: DeprTypes.FORMAT,
+    expect: value => typeof value === 'string',
+    transform: value => (Array.isArray(value) ? value.join(' ') : value),
+    message: 'It should be a string.',
+  },
+});

package/src/Button/index.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import BaseButton from 'react-bootstrap/Button';
 import BaseButtonGroup from 'react-bootstrap/ButtonGroup';
 import BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';
+import ButtonDeprecated from './deprecated';
 
 import Icon from '../Icon';
 
@@ -50,10 +51,10 @@ Button.propTypes = {
    * */
   variant: PropTypes.string,
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
-  * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
+  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
   iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 
@@ -66,6 +67,8 @@ Button.defaultProps = {
   disabled: false,
 };
 
+Button.Deprecated = ButtonDeprecated;
+
 function ButtonGroup(props) {
   return <BaseButtonGroup {...props} />;
 }