feat: Chip component redesign

refactor: added selected state refactor: added IconButton refactor: styles refactoring refactor: added tests refactor: added new SCSS variables
openedx · Oct 16, 2023 · 9fa3921 · 9fa3921
1 parent 98f7822
commit 9fa3921
Show file tree

Hide file tree

Showing 8 changed files with 396 additions and 132 deletions.
diff --git a/src/Chip/Chip.test.jsx b/src/Chip/Chip.test.jsx
@@ -77,5 +77,23 @@ describe('<Chip />', () => {
       await userEvent.type(iconAfter, '{enter}');
       expect(func).toHaveBeenCalled();
     });
+    it('onIconBeforeClick is triggered', async () => {
+      const func = jest.fn();
+      render(
+        <TestChip iconBefore={Close} onIconBeforeClick={func} />,
+      );
+      const iconBefore = screen.getByTestId('icon-before');
+      await userEvent.click(iconBefore);
+      expect(func).toHaveBeenCalled();
+    });
+    it('onIconBeforeKeyDown is triggered', async () => {
+      const func = jest.fn();
+      render(
+        <TestChip iconBefore={Close} onIconBeforeClick={func} />,
+      );
+      const iconBefore = screen.getByTestId('icon-before');
+      await userEvent.type(iconBefore, '{enter}');
+      expect(func).toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/Chip/README.md b/src/Chip/README.md
@@ -16,34 +16,99 @@ notes: |
 ## Basic Usage
 
 ```jsx live
-<div>
-  <Chip>New</Chip>
-  <Chip disabled>New</Chip>
-  <Chip variant="dark">New</Chip>
-</div>
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip>New</Chip>
+    <Chip disabled>New</Chip>
+</Stack>
 ```
 
 ## With Icon Before and After
+### Basic Usage
 
 ```jsx live
-<div>
-  <Chip iconBefore={Person}>New</Chip>
-  <Chip
-    variant="dark"
-    iconBefore={Person}
-    iconAfter={Close}
-    onIconAfterClick={() => console.log('Remove Chip')}
-  >
-    New
-  </Chip>
-  <Chip
-    variant="dark"
-    iconBefore={Person}
-    iconAfter={Close}
-    onIconAfterClick={() => console.log('Remove Chip')}
-    disabled
-  >
-    New
-  </Chip>
-</div>
+<Stack
+    gap={2}
+    direction="horizontal"
+>
+    <Chip iconBefore={Person}>New</Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New 1
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('Remove Chip')}
+    >
+        New
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('onIconBeforeClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New
+    </Chip>
+    <Chip
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+        disabled
+    >
+        New
+    </Chip>
+</Stack>
+```
+
+### Inverse Pallete
+
+```jsx live
+<Stack
+    className="bg-dark-700 p-4"
+    gap={2}
+    direction="horizontal"
+>
+    <Chip variant="dark" iconBefore={Person}>New</Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New 1
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('Remove Chip')}
+    >
+        New
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconBeforeClick={() => console.log('onIconBeforeClick')}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+    >
+        New
+    </Chip>
+    <Chip
+        variant="dark"
+        iconBefore={Person}
+        iconAfter={Close}
+        onIconAfterClick={() => console.log('onIconAfterClick')}
+        disabled
+    >
+        New
+    </Chip>
+</Stack>
 ```
diff --git a/src/Chip/__snapshots__/Chip.test.jsx.snap b/src/Chip/__snapshots__/Chip.test.jsx.snap
@@ -3,6 +3,10 @@
 exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__label p-after"
@@ -11,9 +15,6 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
   >
     <span
       className="pgn__icon"
@@ -41,6 +42,10 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__icon-before"
@@ -76,6 +81,10 @@ exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__icon-before"
@@ -107,9 +116,6 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
   >
     <span
       className="pgn__icon"
@@ -137,6 +143,10 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 exports[`<Chip /> snapshots renders without props 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__label"

diff --git a/src/Chip/_variables.scss b/src/Chip/_variables.scss
@@ -1,19 +1,29 @@
-$chip-padding-x:                    .5rem !default;
-$chip-padding-y:                    .125rem !default;
-$chip-padding-to-icon:              3px !default;
-$chip-icon-padding:                 .25rem !default;
-$chip-margin:                       .125rem !default;
-$chip-border-radius:                .25rem !default;
-$chip-disable-opacity:              .3 !default;
-$chip-icon-size:                    1.25rem !default;
-
-$chip-theme-variants: (
-  "light": (
-    "background": $light-500,
-    "color": $black,
-  ),
-  "dark": (
-    "background": $dark-200,
-    "color": $white,
-  )
-) !default;
+$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-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-hover-icon-color:                $chip-dark-hover-label-color !default;
+$chip-dark-focus-outline-distance:          .313rem !default;
+$chip-dark-icon-border-color:               transparent !default;