@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/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/src/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/src/Hyperlink/{Hyperlink.test.tsx → Hyperlink.test.jsx}

@@ -4,34 +4,30 @@ import userEvent from '@testing-library/user-event';
 
 import Hyperlink from '.';
 
-const destination = 'destination';
 const content = 'content';
+const destination = 'destination';
 const onClick = jest.fn();
 const props = {
+  content,
   destination,
   onClick,
 };
 const externalLinkAlternativeText = 'externalLinkAlternativeText';
 const externalLinkTitle = 'externalLinkTitle';
 const externalLinkProps = {
-  target: '_blank' as const,
+  target: '_blank',
   externalLinkAlternativeText,
   externalLinkTitle,
   ...props,
 };
 
 describe('correct rendering', () => {
-  beforeEach(() => {
-    onClick.mockClear();
-  });
-
   it('renders Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink {...props}>{content}</Hyperlink>);
+    const { getByRole } = render(<Hyperlink {...props} />);
     const wrapper = getByRole('link');
     expect(wrapper).toBeInTheDocument();
 
     expect(wrapper).toHaveClass('pgn__hyperlink');
-    expect(wrapper).toHaveClass('standalone-link');
     expect(wrapper).toHaveTextContent(content);
     expect(wrapper).toHaveAttribute('href', destination);
     expect(wrapper).toHaveAttribute('target', '_self');
@@ -40,17 +36,8 @@ describe('correct rendering', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
-  it('renders an underlined Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink isInline {...props}>{content}</Hyperlink>);
-    const wrapper = getByRole('link');
-    expect(wrapper).toBeInTheDocument();
-    expect(wrapper).toHaveClass('pgn__hyperlink');
-    expect(wrapper).not.toHaveClass('standalone-link');
-    expect(wrapper).toHaveClass('inline-link');
-  });
-
   it('renders external Hyperlink', () => {
-    const { getByRole, getByTestId } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
+    const { getByRole, getByTestId } = render(<Hyperlink {...externalLinkProps} />);
     const wrapper = getByRole('link');
     const icon = getByTestId('hyperlink-icon');
     const iconSvg = icon.querySelector('svg');
@@ -66,16 +53,18 @@ describe('correct rendering', () => {
 
 describe('security', () => {
   it('prevents reverse tabnabbing for links with target="_blank"', () => {
-    const { getByRole } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
+    const { getByRole } = render(<Hyperlink {...externalLinkProps} />);
     const wrapper = getByRole('link');
     expect(wrapper).toHaveAttribute('rel', 'noopener noreferrer');
   });
 });
 
 describe('event handlers are triggered correctly', () => {
+  let spy;
+  beforeEach(() => { spy = jest.fn(); });
+
   it('should fire onClick', async () => {
-    const spy = jest.fn();
-    const { getByRole } = render(<Hyperlink {...props} onClick={spy}>{content}</Hyperlink>);
+    const { getByRole } = render(<Hyperlink {...props} onClick={spy} />);
     const wrapper = getByRole('link');
     expect(spy).toHaveBeenCalledTimes(0);
     await userEvent.click(wrapper);

package/src/Hyperlink/{index.tsx → index.jsx}

@@ -1,45 +1,29 @@
 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 const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
 export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
 
-interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
-  /** specifies the URL */
-  destination: string;
-  /** Content of the hyperlink */
-  children: React.ReactNode;
-  /** Custom class names for the hyperlink */
-  className?: string;
-  /** Alt text for the icon indicating that this link opens in a new tab, if target="_blank". e.g. _("in a new tab") */
-  externalLinkAlternativeText?: string;
-  /** Tooltip text for the "opens in new tab" icon, if target="_blank". e.g. _("Opens in a new tab"). */
-  externalLinkTitle?: string;
-  /** type of hyperlink */
-  variant?: 'default' | 'muted' | 'brand';
-  /** Display the link with an underline. By default, it is only underlined on hover. */
-  isInline?: boolean;
-  /** specify if we need to show launch Icon. By default, it will be visible. */
-  showLaunchIcon?: boolean;
-  target?: '_blank' | '_self';
-}
-
-const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
-  className,
-  destination,
-  children,
-  target,
-  onClick,
-  externalLinkAlternativeText,
-  externalLinkTitle,
-  variant,
-  isInline,
-  showLaunchIcon,
-  ...attrs
-}, ref) => {
+const Hyperlink = React.forwardRef((props, ref) => {
+  const {
+    className,
+    destination,
+    children,
+    target,
+    onClick,
+    externalLinkAlternativeText,
+    externalLinkTitle,
+    variant,
+    isInline,
+    showLaunchIcon,
+    ...attrs
+  } = props;
   let externalLinkIcon;
 
   if (target === '_blank') {
@@ -121,20 +105,32 @@ 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,
+    props => 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,
+    props => 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',
+  },
+});

package/src/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/src/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/src/Icon/index.jsx

@@ -74,7 +74,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/src/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);
   }
 }