@openedx/paragon 21.7.1 → 22.0.0-alpha.16

package/dist/Form/_input-group.scss

@@ -0,0 +1,188 @@
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+
+  > .form-control,
+  > .form-control-plaintext,
+  > .custom-select,
+  > .custom-file {
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    margin-bottom: 0;
+
+    + .form-control,
+    + .custom-select,
+    + .custom-file {
+      margin-left: calc(var(--pgn-size-form-input-width-border) * -1);
+    }
+  }
+
+  > .form-control:focus,
+  > .custom-select:focus,
+  > .custom-file .custom-file-input:focus ~ .custom-file-label {
+    z-index: 3;
+  }
+
+  > .custom-file .custom-file-input:focus {
+    z-index: 4;
+  }
+
+  > .form-control,
+  > .custom-select {
+    &:not(:first-child) {
+      @include border-left-radius(0);
+    }
+  }
+
+  > .custom-file {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) .custom-file-label,
+    &:not(:last-child) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+
+    &:not(:first-child) .custom-file-label {
+      @include border-left-radius(0);
+    }
+  }
+
+  &:not(.has-validation) {
+    > .form-control:not(:last-child),
+    > .custom-select:not(:last-child),
+    > .custom-file:not(:last-child) .custom-file-label,
+    > .custom-file:not(:last-child) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+
+  &.has-validation {
+    > .form-control:nth-last-child(n + 3),
+    > .custom-select:nth-last-child(n + 3),
+    > .custom-file:nth-last-child(n + 3) .custom-file-label,
+    > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+}
+
+.input-group-prepend,
+.input-group-append {
+  display: flex;
+
+  .btn {
+    position: relative;
+    z-index: 2;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+
+  .btn + .btn,
+  .btn + .input-group-text,
+  .input-group-text + .input-group-text,
+  .input-group-text + .btn {
+    margin-left: calc(var(--pgn-size-form-input-width-border) * -1);
+  }
+}
+
+.input-group-prepend {
+  margin-right: calc(var(--pgn-size-form-input-width-border) * -1);
+}
+
+.input-group-append {
+  margin-left: calc(var(--pgn-size-form-input-width-border) * -1);
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: var(--pgn-spacing-form-input-padding-y-base) var(--pgn-spacing-form-input-padding-x-base);
+  margin-bottom: 0;
+  font-weight: var(--pgn-typography-font-weight-normal);
+  line-height: var(--pgn-typography-form-input-line-height-base);
+  color: var(--pgn-color-form-input-group-addon-base);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--pgn-color-form-input-group-addon-bg);
+  border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-group-addon-border);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-base));
+  @include border-radius(var(--pgn-size-form-input-radius-border-base));
+
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+.input-group-lg > .form-control:not(textarea),
+.input-group-lg > .custom-select {
+  height: var(--pgn-size-form-input-height-lg);
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .custom-select,
+.input-group-lg > .input-group-prepend > .input-group-text,
+.input-group-lg > .input-group-append > .input-group-text,
+.input-group-lg > .input-group-prepend > .btn,
+.input-group-lg > .input-group-append > .btn {
+  padding: var(--pgn-spacing-form-input-padding-y-lg) var(--pgn-spacing-form-input-padding-x-lg);
+  line-height: var(--pgn-typography-form-input-line-height-lg);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-lg));
+  @include border-radius(var(--pgn-size-form-input-radius-border-lg));
+}
+
+.input-group-sm > .form-control:not(textarea),
+.input-group-sm > .custom-select {
+  height: var(--pgn-size-form-input-height-sm);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .custom-select,
+.input-group-sm > .input-group-prepend > .input-group-text,
+.input-group-sm > .input-group-append > .input-group-text,
+.input-group-sm > .input-group-prepend > .btn,
+.input-group-sm > .input-group-append > .btn {
+  padding: var(--pgn-spacing-form-input-padding-y-sm) var(--pgn-spacing-form-input-padding-x-sm);
+  line-height: var(--pgn-typography-form-input-line-height-sm);
+
+  @include font-size(var(--pgn-typography-form-input-font-size-sm));
+  @include border-radius(var(--pgn-size-form-input-radius-border-sm));
+}
+
+.input-group-lg > .custom-select,
+.input-group-sm > .custom-select {
+  padding-right:
+    calc(
+      var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)
+    );
+}
+
+.input-group > .input-group-prepend > .btn,
+.input-group > .input-group-prepend > .input-group-text,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
+  @include border-right-radius(0);
+}
+
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  @include border-left-radius(0);
+}

package/dist/Form/_mixins.scss

@@ -3,7 +3,7 @@
   $padding-y,
   $line-height,
   $font-size,
-  $border-width
+  $label-initial-border-width
 ) {
   padding: 0 $padding-x;
 
@@ -19,12 +19,225 @@
   $padding-y,
   $line-height,
   $font-size,
-  $border-width
+  $label-float-border-width
 ) {
   .pgn__form-control-floating-label-text {
     $half-leading: calc(($line-height - .8) / 2);
     $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%);
 
-    transform: translateY(-$padding-y) scale(.75)  translateY(-$percent-height-minus-no-bottom-leading);
+    transform:
+      translateY(calc($padding-y * -1)) scale(.75)
+      translateY(calc($percent-height-minus-no-bottom-leading * -1));
+  }
+}
+
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `var(--pgn-color-form-input-focus-border)` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($ignore-warning: false) {
+  &:focus {
+    color: var(--pgn-color-form-input-focus-base);
+    background-color: var(--pgn-color-form-input-focus-bg);
+    border-color: var(--pgn-color-form-input-focus-border);
+    outline: 0;
+    box-shadow: var(--pgn-elevation-form-input-focus);
+  }
+
+  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+@mixin form-validation-state-selector($state) {
+  @if ($state == "valid" or $state == "invalid") {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+
+  @else {
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+}
+
+@mixin form-validation-state(
+  $state, $color, $icon, $form-tooltip-color,
+  $form-tooltip-bg, $focus-box-shadow-color, $checked-border-color
+) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: var(--pgn-spacing-form-control-select-feedback-margin-top);
+
+    @include font-size(var(--pgn-typography-form-feedback-font-size));
+
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding:
+      var(--pgn-spacing-form-control-select-feedback-tooltip-padding-y)
+      var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x);
+    margin-top: .1rem;
+
+    @include font-size(var(--pgn-typography-form-feedback-tooltip-font-size));
+
+    line-height: var(--pgn-typography-form-feedback-tooltip-line-height);
+    color: $form-tooltip-color;
+    background-color: $form-tooltip-bg;
+
+    @include border-radius(var(--pgn-size-form-feedback-tooltip-border-radius));
+
+    // See https://github.com/twbs/bootstrap/pull/31557
+    // Align tooltip to form elements
+    .form-row > .col > &,
+    .form-row > [class*="col-"] > & {
+      left: calc(var(--pgn-size-form-grid-gutter-width) * .5);
+    }
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: var(--pgn-size-form-input-height-inner-base) !important;
+        background-image: $icon;
+        background-repeat: no-repeat;
+        background-position: right var(--pgn-size-form-input-height-inner-quarter) center;
+        background-size: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half);
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  select.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: calc(var(--pgn-spacing-form-input-padding-x-base) * 4) !important;
+        background-position: right calc(var(--pgn-spacing-form-input-padding-x-base) * 2) center;
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: var(--pgn-size-form-input-height-inner-base);
+        background-position:
+          top var(--pgn-size-form-input-height-inner-quarter)
+          right var(--pgn-size-form-input-height-inner-quarter);
+      }
+    }
+  }
+
+  .custom-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: var(--pgn-spacing-form-control-select-feedback-icon-padding-right) !important;
+        background:
+          var(--pgn-other-content-form-control-select-bg),
+          var(--pgn-color-form-control-select-bg-base) $icon
+          var(--pgn-spacing-form-control-select-feedback-icon-position) / var(--pgn-size-form-control-select-feedback-icon) no-repeat; // stylelint-disable-line max-line-length
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          border-color: $color;
+        }
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          border-color: $checked-border-color;
+
+          @include gradient-bg($checked-border-color);
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+        }
+
+        &:not(:checked) ~ .custom-control-label::before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-file-label {
+        border-color: $color;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          border-color: $color;
+          box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $focus-box-shadow-color;
+        }
+      }
+    }
   }
 }

package/dist/Hyperlink/index.scss

@@ -4,6 +4,6 @@
   &__external-icon {
     display: inline-block;
     vertical-align: middle;
-    margin-inline-start: map_get($spacers, 2);
+    margin-inline-start: var(--pgn-spacing-spacer-2);
   }
 }

package/dist/Icon/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__icon {
   display: block;
   height: 1.5rem; // 24px, Assumes base font size to be 16px
@@ -8,28 +6,28 @@
   flex-shrink: 0;
 
   &.pgn__icon__inline {
-    width: $icon-inline;
-    height: $icon-inline;
+    width: var(--pgn-size-icon-inline);
+    height: var(--pgn-size-icon-inline);
   }
 
   &.pgn__icon__xs {
-    width: $icon-xs;
-    height: $icon-xs;
+    width: var(--pgn-size-icon-xs);
+    height: var(--pgn-size-icon-xs);
   }
 
   &.pgn__icon__sm {
-    width: $icon-sm;
-    height: $icon-sm;
+    width: var(--pgn-size-icon-sm);
+    height: var(--pgn-size-icon-sm);
   }
 
   &.pgn__icon__md {
-    width: $icon-md;
-    height: $icon-md;
+    width: var(--pgn-size-icon-md);
+    height: var(--pgn-size-icon-md);
   }
 
   &.pgn__icon__lg {
-    width: $icon-lg;
-    height: $icon-lg;
+    width: var(--pgn-size-icon-lg);
+    height: var(--pgn-size-icon-lg);
   }
 }
 

package/dist/IconButton/_mixins.scss

@@ -0,0 +1,4 @@
+@mixin btn-icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+}

package/dist/IconButton/index.js

@@ -6,7 +6,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Icon from '../Icon';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -26,12 +26,7 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     attrs = _objectWithoutProperties(_ref, _excluded);
   const invert = invertColors ? 'inverse-' : '';
   const activeStyle = isActive ? `${variant}-` : '';
-  if (!iconAs && process.env.NODE_ENV === 'development' && console) {
-    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and ' + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon ' + 'as Paragon is moving away from FontAwesome, please use Paragon\'s icons instead.';
-    // eslint-disable-next-line no-console
-    console.warn(msg);
-  }
-  const IconComponent = iconAs || FontAwesomeIcon;
+  const IconComponent = iconAs;
   return /*#__PURE__*/React.createElement("button", _extends({
     "aria-label": alt,
     className: classNames('btn-icon', `btn-icon-${invert}${variant}`, `btn-icon-${size}`, {
@@ -49,7 +44,7 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   })));
 });
 IconButton.defaultProps = {
-  iconAs: undefined,
+  iconAs: Icon,
   src: null,
   icon: undefined,
   iconClassNames: undefined,
@@ -63,8 +58,7 @@ IconButton.defaultProps = {
 IconButton.propTypes = {
   /** A custom class name. */
   className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
-   *  but is going to be deprecated soon, please use Paragon's icons instead. */
+  /** Component that renders the icon, currently defaults to `Icon` */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
    * `import { Check } from '@edx/paragon/dist/icon';`
@@ -76,7 +70,7 @@ IconButton.propTypes = {
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react */
+  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","func","isRequired","bool","shape","prefix","iconName","array","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@edx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","IconComponent","createElement","_extends","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","func","isRequired","bool","shape","prefix","iconName","array","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport Icon from '../Icon';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: Icon,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@edx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}