refactor: refactoring after review

openedx · Oct 18, 2023 · 68e4598 · 68e4598
1 parent 2142773
commit 68e4598
Show file tree

Hide file tree

Showing 23 changed files with 111 additions and 135 deletions.
diff --git a/src/Chip/README.md b/src/Chip/README.md
@@ -25,6 +25,24 @@ notes: |
 </Stack>
 ```
 
+## With isSelected state
+
+```jsx live
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip isSelected>New</Chip>
+    <Chip
+        isSelected
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New
+    </Chip>
+</Stack>
+```
+
 ## With Icon Before and After
 ### Basic Usage
 

diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
@@ -1,105 +1,105 @@
 import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
-import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
 import Icon from '../Icon';
 // @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
-import messages from './messages';
 
-const STYLE_VARIANTS = [
+export const ICON_AFTER_ALT_TEXT = 'Chip icon after';
+export const ICON_BEFORE_ALT_TEXT = 'Chip icon before';
+
+export const STYLE_VARIANTS = [
   'light',
   'dark',
 ];
 
+export const CHIP_PGN_CLASS = 'pgn__chip';
+
 export interface IChip {
   children: React.ReactNode,
   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,
   ...props
-}: IChip, ref: ForwardedRef<HTMLDivElement>) => {
-  const intl = useIntl();
-
-  return (
+}: IChip, ref: ForwardedRef<HTMLDivElement>) => (
+  <div
+    tabIndex={0}
+    role="button"
+    className={classNames(
+      CHIP_PGN_CLASS,
+      `pgn__chip-${variant}`,
+      className,
+      { disabled, selected: isSelected },
+    )}
+    ref={ref}
+    {...props}
+  >
+    {iconBefore && (
+      <div className={classNames('pgn__chip__icon-before', { active: onIconBeforeClick })}>
+        {onIconBeforeClick ? (
+          <IconButton
+            src={iconBefore}
+            onClick={onIconBeforeClick}
+            onKeyPress={onIconBeforeClick}
+            iconAs={Icon}
+            alt={iconBeforeAlt}
+            invertColors
+            data-testid="icon-before"
+          />
+        ) : (
+          <Icon src={iconBefore} />
+        )}
+      </div>
+    )}
     <div
-      tabIndex={0}
-      role="button"
-      className={classNames(
-        CHIP_PGN_CLASS,
-        `pgn__chip-${variant}`,
-        className,
-        { disabled, selected: isSelected },
-      )}
-      ref={ref}
-      {...props}
+      className={classNames('pgn__chip__label', {
+        'p-before': iconBefore,
+        'p-after': iconAfter,
+      })}
     >
-      {iconBefore && (
-        <div className={classNames('pgn__chip__icon-before', { active: onIconBeforeClick })}>
-          {onIconBeforeClick ? (
-            <IconButton
-              src={iconBefore}
-              onClick={onIconBeforeClick}
-              onKeyPress={onIconBeforeClick}
-              iconAs={Icon}
-              alt={intl.formatMessage(messages.iconBeforeAltText)}
-              invertColors
-              data-testid="icon-before"
-            />
-          ) : (
-            <Icon src={iconBefore} />
-          )}
-        </div>
-      )}
-      <div
-        className={classNames('pgn__chip__label', {
-          'p-before': iconBefore,
-          'p-after': iconAfter,
-        })}
-      >
-        {children}
-      </div>
-      {iconAfter && (
-        <div className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}>
-          {onIconAfterClick ? (
-            <IconButton
-              onClick={onIconAfterClick}
-              onKeyPress={onIconAfterClick}
-              src={iconAfter}
-              iconAs={Icon}
-              alt={intl.formatMessage(messages.iconAfterAltText)}
-              invertColors
-              data-testid="icon-after"
-            />
-          ) : (
-            <Icon src={iconAfter} />
-          )}
-        </div>
-      )}
+      {children}
     </div>
-  );
-});
+    {iconAfter && (
+      <div className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}>
+        {onIconAfterClick ? (
+          <IconButton
+            onClick={onIconAfterClick}
+            onKeyPress={onIconAfterClick}
+            src={iconAfter}
+            iconAs={Icon}
+            alt={iconAfterAlt}
+            invertColors
+            data-testid="icon-after"
+          />
+        ) : (
+          <Icon src={iconAfter} />
+        )}
+      </div>
+    )}
+  </div>
+));
 
 Chip.propTypes = {
   /** Specifies the content of the `Chip`. */
@@ -117,6 +117,8 @@ Chip.propTypes = {
    * `import { Check } from '@edx/paragon/icons';`
    */
   iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /** Specifies icon alt text. */
+  iconBeforeAlt: PropTypes.string,
   /** A click handler for the `Chip` icon before. */
   onIconBeforeClick: PropTypes.func,
   /**
@@ -126,8 +128,11 @@ Chip.propTypes = {
    * `import { Check } from '@edx/paragon/icons';`
    */
   iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /** Specifies icon alt text. */
+  iconAfterAlt: PropTypes.string,
   /** A click handler for the `Chip` icon after. */
   onIconAfterClick: PropTypes.func,
+  /** Indicates if `Chip` has been selected. */
   isSelected: PropTypes.bool,
 };
 
@@ -140,6 +145,8 @@ Chip.defaultProps = {
   onIconBeforeClick: undefined,
   onIconAfterClick: undefined,
   isSelected: false,
+  iconAfterAlt: ICON_AFTER_ALT_TEXT,
+  iconBeforeAlt: ICON_BEFORE_ALT_TEXT,
 };
 
 export default Chip;
diff --git a/src/Chip/messages.js b/src/Chip/messages.js
diff --git a/src/ChipCarousel/_variables.scss b/src/ChipCarousel/_variables.scss
@@ -1 +1,3 @@
-$chip-carousel-controls-top-offset:   -3px !default;
+$chip-carousel-controls-top-offset:    .375rem !default;
+$chip-carousel-container-padding-x:    .625rem !default;
+$chip-carousel-container-padding-y:    .313rem !default;
diff --git a/src/ChipCarousel/index.scss b/src/ChipCarousel/index.scss
@@ -11,6 +11,7 @@
     &.pgn__chip-carousel-gap__#{$level} {
       .pgn__overflow-scroll-overflow-container {
         column-gap: $space;
+        padding: $chip-carousel-container-padding-x $chip-carousel-container-padding-y;
       }
     }
   }

diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "رفع {filename} جارٍ.",
   "pgn.FormAutosuggest.iconButtonClosed": "إغلاق قائمة الخيارات",
   "pgn.FormAutosuggest.iconButtonOpened": "فتح قائمة الخيارات",
-  "pgn.Toast.closeLabel": "إغلاق ",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "إغلاق "
 }
diff --git a/src/i18n/messages/ca.json b/src/i18n/messages/ca.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Cerrar"
 }
diff --git a/src/i18n/messages/es_AR.json b/src/i18n/messages/es_AR.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Cerrar"
 }
diff --git a/src/i18n/messages/es_ES.json b/src/i18n/messages/es_ES.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Subiendo {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Cerrar el menú de opciones",
   "pgn.FormAutosuggest.iconButtonOpened": "Abre el menú de opciones",
-  "pgn.Toast.closeLabel": "Cerrar",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Cerrar"
 }
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/he.json b/src/i18n/messages/he.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/id.json b/src/i18n/messages/id.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/it_IT.json b/src/i18n/messages/it_IT.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Caricamento {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Chiudi",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Chiudi"
 }
diff --git a/src/i18n/messages/ko_KR.json b/src/i18n/messages/ko_KR.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/pl.json b/src/i18n/messages/pl.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Zamknij",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Zamknij"
 }
diff --git a/src/i18n/messages/pt_BR.json b/src/i18n/messages/pt_BR.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/pt_PT.json b/src/i18n/messages/pt_PT.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Carregando {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Fechar o menu de opções",
   "pgn.FormAutosuggest.iconButtonOpened": "Abrir o menu de opções",
-  "pgn.Toast.closeLabel": "Fechar",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Fechar"
 }
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/th.json b/src/i18n/messages/th.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "Uploading {filename}.",
   "pgn.FormAutosuggest.iconButtonClosed": "Close the options menu",
   "pgn.FormAutosuggest.iconButtonOpened": "Open the options menu",
-  "pgn.Toast.closeLabel": "Close",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Close"
 }
diff --git a/src/i18n/messages/tr_TR.json b/src/i18n/messages/tr_TR.json
@@ -27,7 +27,5 @@
   "pgn.Dropzone.UploadProgress.uploadLabel": "{filename} yükleniyor.",
   "pgn.FormAutosuggest.iconButtonClosed": "Seçenekler menüsünü kapat",
   "pgn.FormAutosuggest.iconButtonOpened": "Seçenekler menüsünü aç",
-  "pgn.Toast.closeLabel": "Kapat",
-  "pgn.Chip.iconBeforeAltText": "Chip icon before",
-  "pgn.Chip.iconAfterAltText": "Chip icon after"
+  "pgn.Toast.closeLabel": "Kapat"
 }