@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/src/Chip/__snapshots__/Chip.test.jsx.snap

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Chip /> snapshots renders div with "button" role when onClick is provided 1`] = `
+<div
+  className="pgn__chip pgn__chip-light interactive"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
+>
+  <div
+    className="pgn__chip__label"
+  >
+    Test
+  </div>
+</div>
+`;
+
 exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
@@ -9,32 +25,25 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
   >
     Test
   </div>
-  <div
-    className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
+  <span
+    className="pgn__icon pgn__icon__sm pgn__chip__icon-after"
   >
-    <span
-      className="pgn__icon"
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden={true}
-        fill="none"
-        focusable={false}
-        height={24}
-        role="img"
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-          fill="currentColor"
-        />
-      </svg>
-    </span>
-  </div>
+      <path
+        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
 </div>
 `;
 
@@ -42,29 +51,25 @@ exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
 >
-  <div
-    className="pgn__chip__icon-before"
+  <span
+    className="pgn__icon pgn__icon__sm pgn__chip__icon-before"
   >
-    <span
-      className="pgn__icon"
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden={true}
-        fill="none"
-        focusable={false}
-        height={24}
-        role="img"
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-          fill="currentColor"
-        />
-      </svg>
-    </span>
-  </div>
+      <path
+        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
   <div
     className="pgn__chip__label p-before"
   >
@@ -77,60 +82,49 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
 >
-  <div
-    className="pgn__chip__icon-before"
+  <span
+    className="pgn__icon pgn__icon__sm pgn__chip__icon-before"
   >
-    <span
-      className="pgn__icon"
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden={true}
-        fill="none"
-        focusable={false}
-        height={24}
-        role="img"
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-          fill="currentColor"
-        />
-      </svg>
-    </span>
-  </div>
+      <path
+        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
   <div
     className="pgn__chip__label p-before p-after"
   >
     Test
   </div>
-  <div
-    className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
+  <span
+    className="pgn__icon pgn__icon__sm pgn__chip__icon-after"
   >
-    <span
-      className="pgn__icon"
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <svg
-        aria-hidden={true}
-        fill="none"
-        focusable={false}
-        height={24}
-        role="img"
-        viewBox="0 0 24 24"
-        width={24}
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-          fill="currentColor"
-        />
-      </svg>
-    </span>
-  </div>
+      <path
+        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
 </div>
 `;
 

package/src/Chip/_variables.scss

@@ -0,0 +1,28 @@
+$chip-padding-x:                            .5rem !default;
+$chip-padding-y:                            1px !default;
+$chip-icon-margin:                          .25rem !default;
+$chip-margin:                               .125rem !default;
+$chip-border-radius:                        .375rem !default;
+$chip-disable-opacity:                      .3 !default;
+$chip-icon-size:                            1.5rem !default;
+$chip-label-color:                          $primary-700 !default;
+$chip-border-color:                         $light-800 !default;
+$chip-outline-width:                        3px !default;
+$chip-light-bg-color:                       $white !default;
+$chip-light-outline-color:                  $chip-label-color !default;
+$chip-light-selected-outline-distance:      3px !default;
+$chip-light-selected-focus-border-color:    $dark-500 !default;
+$chip-light-hover-bg:                       $dark-500 !default;
+$chip-light-hover-border-color:             $chip-light-hover-bg !default;
+$chip-light-hover-label-color:              $chip-light-bg-color !default;
+$chip-light-hover-icon-color:               $chip-light-hover-label-color !default;
+$chip-light-focus-outline-distance:         .313rem !default;
+$chip-dark-bg:                              $primary-300 !default;
+$chip-dark-outline-color:                   $white !default;
+$chip-dark-selected-outline-distance:       3px !default;
+$chip-dark-selected-focus-border-color:     $chip-dark-outline-color !default;
+$chip-dark-label-color:                     $chip-dark-outline-color !default;
+$chip-dark-hover-bg:                        $white !default;
+$chip-dark-hover-border-color:              $chip-dark-hover-bg !default;
+$chip-dark-hover-label-color:               $primary-500 !default;
+$chip-dark-focus-outline-distance:          .313rem !default;

package/src/Chip/constants.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export const STYLE_VARIANTS = {
+  DARK: 'dark',
+  LIGHT: 'light',
+};

package/src/Chip/index.scss

@@ -1,103 +1,144 @@
+@import "variables";
+@import "mixins";
+
 .pgn__chip {
-  background: var(--pgn-chip-bg, var(--pgn-color-light-500));
-  border-radius: var(--pgn-size-chip-border-radius);
+  border-radius: $chip-border-radius;
   display: inline-flex;
-  margin: var(--pgn-spacing-chip-margin);
-  box-sizing: border-box;
+  justify-content: space-between;
+  align-items: center;
+  margin: $chip-margin;
+  border: 1px solid $chip-border-color;
+  padding: $chip-padding-y $chip-padding-x;
+  position: relative;
+  outline: none;
+  transition: all .3s;
 
   .pgn__chip__label {
-    font-size: var(--pgn-typography-font-size-sm);
-    padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x);
+    font-size: $font-size-xs;
+    line-height: 1.5rem;
+    font-weight: $font-weight-bold;
+    color: $chip-label-color;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    box-sizing: border-box;
-    cursor: default;
 
-    &.p-before {
-      padding-left: var(--pgn-spacing-chip-padding-to-icon);
+    [dir="rtl"] & {
+      margin-left: $chip-icon-margin;
+    }
+  }
 
-      [dir="rtl"] & {
-        padding-left: var(--pgn-spacing-chip-padding-x);
-        padding-right: var(--pgn-spacing-chip-padding-to-icon);
-      }
+  .pgn__chip__icon-before {
+    margin-right: $chip-icon-margin;
+
+    [dir="rtl"] & {
+      margin-right: 0;
+      margin-left: .25rem;
     }
+  }
 
-    &.p-after {
-      padding-right: var(--pgn-spacing-chip-padding-to-icon);
+  .pgn__chip__icon-after {
+    margin-left: $chip-icon-margin;
 
-      [dir="rtl"] & {
-        padding-right: var(--pgn-spacing-chip-padding-x);
-        padding-left: var(--pgn-spacing-chip-padding-to-icon);
-      }
+    [dir="rtl"] & {
+      margin-left: 0;
     }
   }
 
   .pgn__chip__icon-before,
   .pgn__chip__icon-after {
-    align-items: center;
-    display: flex;
-    padding-left: var(--pgn-spacing-chip-padding-icon);
-    padding-right: var(--pgn-spacing-chip-padding-icon);
-    box-sizing: border-box;
-    cursor: default;
-
-    .pgn__icon {
-      width: var(--pgn-size-chip-icon);
-      height: var(--pgn-size-chip-icon);
+    &.btn-icon {
+      width: $chip-icon-size;
+      height: $chip-icon-size;
+    }
+  }
+
+  &.pgn__chip-light {
+    background-color: $chip-light-bg-color;
+
+    &.selected {
+      @include chip-outline(
+        $chip-light-outline-color,
+        calc($chip-light-selected-outline-distance * -1),
+        calc($chip-border-radius + $chip-outline-width),
+        $chip-light-selected-outline-distance
+      );
+
+      &:focus {
+        border: 1px solid $chip-light-selected-focus-border-color;
+      }
+    }
+
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      &.pgn__icon {
+        color: $chip-label-color;
+      }
     }
 
-    &.active:hover,
-    &.active:focus {
+    &.interactive {
       cursor: pointer;
-      background: var(--pgn-color-black);
 
-      * {
-        color: var(--pgn-color-white);
-        fill: var(--pgn-color-white);
+      @include chip-hover($dark-500, $white);
+
+      &:focus {
+        @include chip-outline(
+          $chip-light-selected-focus-border-color,
+          calc($chip-light-focus-outline-distance * -1),
+          calc($chip-border-radius + $chip-outline-width)
+        );
       }
     }
   }
 
-  .pgn__chip__icon-before {
-    border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius);
+  &.pgn__chip-dark {
+    background-color: $chip-dark-bg;
 
-    [dir="rtl"] & {
-      border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0;
+    &.selected {
+      @include chip-outline($chip-dark-outline-color,
+      calc($chip-dark-selected-outline-distance * -1),
+      calc($chip-border-radius + $chip-outline-width),
+      $chip-dark-selected-outline-distance
+    );
+
+      &:focus {
+        border: 1px solid $chip-dark-selected-focus-border-color;
+      }
     }
-  }
 
-  .pgn__chip__icon-after {
-    border-radius: 0 var(--pgn-size-chip-border-radius) var(--pgn-size-chip-border-radius) 0;
+    .pgn__chip__label {
+      color: $chip-dark-label-color;
+    }
 
-    [dir="rtl"] & {
-      border-radius: var(--pgn-size-chip-border-radius) 0 0 var(--pgn-size-chip-border-radius);
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      &.pgn__icon {
+        color: $chip-dark-outline-color;
+      }
     }
-  }
 
-  * {
-    color: var(--pgn-chip-color, inherit);
-    fill: var(--pgn-chip-color, inherit);
+    &.interactive {
+      cursor: pointer;
+
+      @include chip-hover($white, $primary-500);
+
+      &:focus {
+        @include chip-outline(
+          $chip-dark-outline-color,
+          calc($chip-dark-focus-outline-distance * -1),
+          calc($chip-border-radius + $chip-outline-width)
+        );
+      }
+    }
   }
 
   &.disabled,
   &:disabled {
-    cursor: default;
-    opacity: var(--pgn-other-chip-opacity-disabled);
+    opacity: $chip-disable-opacity;
     pointer-events: none;
+    user-select: none;
 
     &::before {
       display: none;
     }
   }
 }
-
-.pgn__chip-light {
-  --pgn-chip-color: var(--pgn-color-chip-text-light);
-  --pgn-chip-bg: var(--pgn-color-chip-bg-light);
-}
-
-.pgn__chip-dark {
-  --pgn-chip-color: var(--pgn-color-chip-text-dark);
-  --pgn-chip-bg: var(--pgn-color-chip-bg-dark);
-}

package/src/Chip/index.tsx

@@ -2,76 +2,97 @@ import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 're
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
-import Icon from '../Icon';
+import { requiredWhen } from '../utils/propTypes';
+// @ts-ignore
+import { STYLE_VARIANTS } from './constants';
+// @ts-ignore
+import ChipIcon from './ChipIcon';
 
-const STYLE_VARIANTS = [
-  'light',
-  'dark',
-];
+export const CHIP_PGN_CLASS = 'pgn__chip';
 
 export interface IChip {
   children: React.ReactNode,
+  onClick?: KeyboardEventHandler & MouseEventHandler,
   className?: string,
   variant?: string,
   iconBefore?: React.ReactElement | Function,
+  iconBeforeAlt?: string,
   iconAfter?: React.ReactElement | Function,
+  iconAfterAlt?: string,
   onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,
   onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,
   disabled?: boolean,
+  isSelected?: boolean,
 }
 
-export const CHIP_PGN_CLASS = 'pgn__chip';
-
 const Chip = React.forwardRef(({
   children,
   className,
   variant,
   iconBefore,
+  iconBeforeAlt,
   iconAfter,
+  iconAfterAlt,
   onIconBeforeClick,
   onIconAfterClick,
   disabled,
+  isSelected,
+  onClick,
   ...props
-}: IChip, ref: ForwardedRef<HTMLDivElement>) => (
-  <div
-    className={classNames(
-      CHIP_PGN_CLASS,
-      `pgn__chip-${variant}`,
-      className,
-      { disabled },
-    )}
-    ref={ref}
-    {...props}
-  >
-    {iconBefore && (
-      <div
-        className={classNames('pgn__chip__icon-before')}
-      >
-        <Icon src={iconBefore} />
-      </div>
-    )}
+}: IChip, ref: ForwardedRef<HTMLDivElement>) => {
+  const hasInteractiveIcons = !!(onIconBeforeClick || onIconAfterClick);
+  const isChipInteractive = !hasInteractiveIcons && !!onClick;
+
+  const interactionProps = isChipInteractive ? {
+    onClick,
+    onKeyPress: onClick,
+    tabIndex: 0,
+    role: 'button',
+  } : {};
+
+  return (
     <div
-      className={classNames('pgn__chip__label', {
-        'p-before': iconBefore,
-        'p-after': iconAfter,
-      })}
+      className={classNames(
+        CHIP_PGN_CLASS,
+        `pgn__chip-${variant}`,
+        className,
+        { disabled, selected: isSelected, interactive: isChipInteractive },
+      )}
+      ref={ref}
+      {...interactionProps}
+      {...props}
     >
-      {children}
-    </div>
-    {iconAfter && (
+      {iconBefore && (
+        <ChipIcon
+          className={`${CHIP_PGN_CLASS}__icon-before`}
+          src={iconBefore}
+          onClick={onIconBeforeClick}
+          alt={iconBeforeAlt}
+          variant={variant}
+          disabled={disabled}
+        />
+      )}
       <div
-        className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}
-        role="button"
-        onClick={onIconAfterClick}
-        onKeyPress={onIconAfterClick}
-        tabIndex={disabled ? -1 : 0}
-        data-testid="icon-after"
+        className={classNames(`${CHIP_PGN_CLASS}__label`, {
+          'p-before': iconBefore,
+          'p-after': iconAfter,
+        })}
       >
-        <Icon src={iconAfter} />
+        {children}
       </div>
-    )}
-  </div>
-));
+      {iconAfter && (
+        <ChipIcon
+          className={`${CHIP_PGN_CLASS}__icon-after`}
+          src={iconAfter}
+          onClick={onIconAfterClick}
+          alt={iconAfterAlt}
+          variant={variant}
+          disabled={disabled}
+        />
+      )}
+    </div>
+  );
+});
 
 Chip.propTypes = {
   /** Specifies the content of the `Chip`. */
@@ -79,37 +100,49 @@ Chip.propTypes = {
   /** Specifies an additional `className` to add to the base element. */
   className: PropTypes.string,
   /** The `Chip` style variant to use. */
-  variant: PropTypes.oneOf(STYLE_VARIANTS),
+  variant: PropTypes.oneOf(['light', 'dark']),
   /** Disables the `Chip`. */
   disabled: PropTypes.bool,
+  /** Click handler for the whole Chip, has effect only when Chip does not have any interactive icons. */
+  onClick: PropTypes.func,
   /**
    * An icon component to render before the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /** Specifies icon alt text. */
+  iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
   /** A click handler for the `Chip` icon before. */
   onIconBeforeClick: PropTypes.func,
   /**
    * An icon component to render before after the content.
    * Example import of a Paragon icon component:
    *
-   * `import { Check } from '@edx/paragon/icons';`
+   * `import { Check } from '@openedx/paragon/icons';`
    */
   iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /** Specifies icon alt text. */
+  iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
   /** A click handler for the `Chip` icon after. */
   onIconAfterClick: PropTypes.func,
+  /** Indicates if `Chip` has been selected. */
+  isSelected: PropTypes.bool,
 };
 
 Chip.defaultProps = {
   className: undefined,
-  variant: 'light',
+  variant: STYLE_VARIANTS.LIGHT,
   disabled: false,
+  onClick: undefined,
   iconBefore: undefined,
   iconAfter: undefined,
   onIconBeforeClick: undefined,
   onIconAfterClick: undefined,
+  isSelected: false,
+  iconAfterAlt: undefined,
+  iconBeforeAlt: undefined,
 };
 
 export default Chip;

package/src/Chip/mixins.scss

@@ -0,0 +1,42 @@
+@mixin chip-outline($outline-color: $white, $distance-to-border: 0, $border-radius: 50%, $border-width: .125rem) {
+  &::before {
+    content: "";
+    position: absolute;
+    top: $distance-to-border;
+    right: $distance-to-border;
+    bottom: $distance-to-border;
+    left: $distance-to-border;
+    border: solid $border-width $outline-color;
+    border-radius: $border-radius;
+  }
+}
+
+@mixin chip-hover($base-color, $secondary-color) {
+  &:hover {
+    background-color: $base-color;
+    border-color: $base-color;
+
+    .pgn__chip__label {
+      color: $secondary-color;
+    }
+
+    .pgn__chip__icon-before,
+    .pgn__chip__icon-after {
+      &.pgn__icon,
+      &.btn-icon {
+        color: $secondary-color;
+      }
+
+      &.btn-icon:hover {
+        background-color: $secondary-color;
+        color: $base-color;
+      }
+
+      &.btn-icon:focus {
+        color: $secondary-color;
+        border: 2px solid $secondary-color;
+        background-color: $base-color;
+      }
+    }
+  }
+}