@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/Button/README.md

@@ -8,8 +8,6 @@ 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>
@@ -231,85 +229,3 @@ 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/__snapshots__/{Button.test.tsx.snap → Button.test.jsx.snap}

@@ -55,13 +55,13 @@ exports[`<Button /> correct rendering renders with props iconAfter 1`] = `
 
 exports[`<Button /> correct rendering renders with props iconAfter and size 1`] = `
 <button
-  className="btn btn-primary btn-sm"
+  className="btn btn-primary btn-md"
   disabled={false}
   type="button"
 >
   Button
   <span
-    className="pgn__icon pgn__icon__sm btn-icon-after"
+    className="pgn__icon pgn__icon__md btn-icon-after"
   >
     <svg
       aria-hidden={true}
@@ -197,20 +197,3 @@ exports[`<Button /> correct rendering renders without props 1`] = `
   Button
 </button>
 `;
-
-exports[`<Button /> correct rendering with size="inline" 1`] = `
-<p>
-  <span
-    className="mr-1"
-  >
-    2 items selected.
-  </span>
-  <button
-    className="btn btn-link btn-inline"
-    disabled={false}
-    type="button"
-  >
-    Clear
-  </button>
-</p>
-`;

package/src/Button/_mixins.scss

@@ -0,0 +1,14 @@
+// OVERRIDE FROM BOOTSTRAP
+// No changes made. We do this to keep all button related mixins together,
+//
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
+  padding: $padding-y $padding-x;
+
+  @include font-size($font-size);
+
+  line-height: $line-height;
+
+  // Manually declare to provide an override to the browser default
+  @include border-radius($button-border-radius, 0);
+}

package/src/Button/button-group.scss

@@ -0,0 +1,126 @@
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+
+    &:hover {
+      z-index: 1;
+    }
+
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: calc(var(--pgn-size-btn-border-width) * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-sm > .btn { @extend .btn-sm; }
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+.dropdown-toggle-split {
+  padding-right: calc(var(--pgn-spacing-btn-padding-x-base) * .75);
+  padding-left: calc(var(--pgn-spacing-btn-padding-x-base) * .75);
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: calc(var(--pgn-spacing-btn-padding-x-sm) * .75);
+  padding-left: calc(var(--pgn-spacing-btn-padding-x-sm) * .75);
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: calc(var(--pgn-spacing-btn-padding-x-lg) * .75);
+  padding-left: calc(var(--pgn-spacing-btn-padding-x-lg) * .75);
+}
+
+.btn-group.show .dropdown-toggle {
+  box-shadow: var(--pgn-elevation-btn-box-shadow-active);
+
+  &.btn-link {
+    box-shadow: none;
+  }
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: calc(var(--pgn-size-btn-border-width) * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0;
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

package/src/Button/index.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import BaseButton from 'react-bootstrap/Button';
+import BaseButtonGroup from 'react-bootstrap/ButtonGroup';
+import BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';
+
+import Icon from '../Icon';
+
+const Button = React.forwardRef(({
+  children,
+  iconAfter,
+  iconBefore,
+  ...props
+}, ref) => (
+  <BaseButton
+    {...props}
+    className={classNames(props.className)}
+    ref={ref}
+  >
+    {iconBefore && <Icon className="btn-icon-before" size={props.size} src={iconBefore} />}
+    {children}
+    {iconAfter && <Icon className="btn-icon-after" size={props.size} src={iconAfter} />}
+  </BaseButton>
+));
+
+Button.propTypes = {
+  ...Button.propTypes,
+  /** Specifies class name to apply to the button */
+  className: PropTypes.string,
+  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
+  disabled: PropTypes.bool,
+  /** Specifies the text that is displayed within the button. */
+  children: PropTypes.node.isRequired,
+  /** 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,
+  /** 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.
+   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,
+   * `light`, `link`
+   *
+   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`
+   * or `inverse-outline-`)
+   * */
+  variant: PropTypes.string,
+  /** An icon component to render.
+  * 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 '@openedx/paragon/icons';` */
+  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
+};
+
+Button.defaultProps = {
+  ...Button.defaultProps,
+  children: undefined,
+  className: undefined,
+  iconBefore: undefined,
+  iconAfter: undefined,
+  disabled: false,
+};
+
+function ButtonGroup(props) {
+  return <BaseButtonGroup {...props} />;
+}
+function ButtonToolbar(props) {
+  return <BaseButtonToolbar {...props} />;
+}
+
+ButtonGroup.propTypes = {
+  /** Specifies element type for this component. */
+  as: PropTypes.elementType,
+  /** An ARIA role describing the button group. */
+  role: PropTypes.string,
+  /** Specifies the size for all Buttons in the group. */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /** Display as a button toggle group. */
+  toggle: PropTypes.bool,
+  /** Specifies if the set of Buttons should appear vertically stacked. */
+  vertical: PropTypes.bool,
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
+};
+
+ButtonGroup.defaultProps = {
+  as: 'div',
+  role: 'group',
+  toggle: false,
+  vertical: false,
+  bsPrefix: 'btn-group',
+  size: 'md',
+};
+
+ButtonToolbar.propTypes = {
+  /** An ARIA role describing the button group. */
+  role: PropTypes.string,
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
+};
+
+ButtonToolbar.defaultProps = {
+  role: 'toolbar',
+  bsPrefix: 'btn-toolbar',
+};
+
+export default Button;
+export { ButtonGroup, ButtonToolbar };