@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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.js

@@ -5,22 +5,24 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import isRequiredIf from 'react-proptype-conditional-require';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
 export var HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
 export var HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
-var Hyperlink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    destination = _ref.destination,
-    children = _ref.children,
-    target = _ref.target,
-    onClick = _ref.onClick,
-    externalLinkAlternativeText = _ref.externalLinkAlternativeText,
-    externalLinkTitle = _ref.externalLinkTitle,
-    variant = _ref.variant,
-    isInline = _ref.isInline,
-    showLaunchIcon = _ref.showLaunchIcon,
-    attrs = _objectWithoutProperties(_ref, _excluded);
+var Hyperlink = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    destination = props.destination,
+    children = props.children,
+    target = props.target,
+    onClick = props.onClick,
+    externalLinkAlternativeText = props.externalLinkAlternativeText,
+    externalLinkTitle = props.externalLinkTitle,
+    variant = props.variant,
+    isInline = props.isInline,
+    showLaunchIcon = props.showLaunchIcon,
+    attrs = _objectWithoutProperties(props, _excluded);
   var externalLinkIcon;
   if (target === '_blank') {
     var generateRel = function generateRel() {
@@ -86,20 +88,30 @@ Hyperlink.propTypes = {
    * loaded into the same browsing context as the current one.
    * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
    * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
-   */
-  target: PropTypes.oneOf(['_blank', '_self']),
+  */
+  target: PropTypes.string,
   /** specifies the callback function when the link is clicked */
   onClick: PropTypes.func,
-  /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
-  externalLinkAlternativeText: PropTypes.string,
-  /** Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab"). */
-  externalLinkTitle: PropTypes.string,
+  /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
+  externalLinkAlternativeText: isRequiredIf(PropTypes.string, function (props) {
+    return props.target === '_blank';
+  }),
+  /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
+  externalLinkTitle: isRequiredIf(PropTypes.string, function (props) {
+    return props.target === '_blank';
+  }),
   /** type of hyperlink */
   variant: PropTypes.oneOf(['default', 'muted', 'brand']),
-  /** Display the link with an underline. By default, it is only underlined on hover. */
+  /** specify the link style. By default, it will be underlined. */
   isInline: PropTypes.bool,
   /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon: PropTypes.bool
 };
-export default Hyperlink;
+export default withDeprecatedProps(Hyperlink, 'Hyperlink', {
+  /** specifies the text or element that a URL should be associated with */
+  content: {
+    deprType: DeprTypes.MOVED,
+    newName: 'children'
+  }
+});
 //# sourceMappingURL=index.js.map

package/dist/Hyperlink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Launch","Icon","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","_ref","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","oneOf","func","bool"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n  /** specifies the URL */\n  destination: string;\n  /** Content of the hyperlink */\n  children: React.ReactNode;\n  /** Custom class names for the hyperlink */\n  className?: string;\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText?: string;\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle?: string;\n  /** type of hyperlink */\n  variant?: 'default' | 'muted' | 'brand';\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline?: boolean;\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon?: boolean;\n  target?: '_blank' | '_self';\n}\n\nconst Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({\n  className,\n  destination,\n  children,\n  target,\n  onClick,\n  externalLinkAlternativeText,\n  externalLinkTitle,\n  variant,\n  isInline,\n  showLaunchIcon,\n  ...attrs\n}, ref) => {\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target: PropTypes.oneOf(['_blank', '_self']),\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText: PropTypes.string,\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle: PropTypes.string,\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","isRequiredIf","Launch","Icon","withDeprecatedProps","DeprTypes","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","props","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","func","oneOf","bool","content","deprType","MOVED","newName"],"sources":["../../src/Hyperlink/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\nconst Hyperlink = React.forwardRef((props, ref) => {\n  const {\n    className,\n    destination,\n    children,\n    target,\n    onClick,\n    externalLinkAlternativeText,\n    externalLinkTitle,\n    variant,\n    isInline,\n    showLaunchIcon,\n    ...attrs\n  } = props;\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n  */\n  target: PropTypes.string,\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkAlternativeText: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkTitle: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** specify the link style. By default, it will be underlined. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default withDeprecatedProps(Hyperlink, 'Hyperlink', {\n  /** specifies the text or element that a URL should be associated with */\n  content: {\n    deprType: DeprTypes.MOVED,\n    newName: 'children',\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/Hyperlink/index.scss

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

package/dist/Icon/index.d.ts

@@ -1,15 +1,13 @@
 import React from 'react';
 
 export interface IconProps extends React.ComponentPropsWithoutRef<'span'> {
-  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like "div",
-  // but we only want to allow components like 'Add' (a specific icon component function/class)
-  src?: React.ComponentType;
+  src?: React.ReactElement | Function;
   svgAttrs?: {
     'aria-label'?: string;
     'aria-labelledby'?: string;
   };
   id?: string | null;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'inline';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   className?: string | string[];
   hidden?: boolean;
   screenReaderText?: React.ReactNode;

package/dist/Icon/index.js

@@ -61,7 +61,7 @@ Icon.propTypes = {
    * An icon component to render.
    * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
    */
-  src: PropTypes.elementType,
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */
   svgAttrs: PropTypes.shape({
     'aria-label': PropTypes.string,

package/dist/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","elementType","shape","string","oneOf","bool","oneOfType","element","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.elementType,\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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","ignoreList":[]}

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);
   }
 }