update docs and add test ids to buttons

hey-car · May 30, 2023 · ae47e77 · ae47e77
1 parent 5b46f66
commit ae47e77
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 9 deletions.
diff --git a/packages/segmented-buttons/README.md b/packages/segmented-buttons/README.md
@@ -5,7 +5,7 @@
 [![Demo build](https://github.com/hey-car/heycar-uikit/actions/workflows/main.yml/badge.svg)](https://github.com/hey-car/heycar-uikit/actions/workflows/main.yml)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-Review ratings are a 0 to 10 rating with a dial, used in connection with reviews.
+Segmented buttons help people select options, switch views, or sort elements
 
 ## Installation
 
@@ -18,11 +18,13 @@ npm install @heycar-uikit/segmented-buttons
 ## Usage
 
 ```tsx
-import SegmentedButtons from '@heycar-uikit/segmented-buttons';
+// TSX/JSX file
+import SegmentedButtons from '@heycar-uikit/core/segmented-buttons';
+```
 
-function App() {
-  return <SegmentedButtons />;
-}
+```css
+// CSS file
+@import '@heycar-uikit/core/segmented-buttons/esm/SegmentedButtons.css';
 ```
 
 ## Documentation and sandbox

diff --git a/packages/segmented-buttons/src/SegmentedButtons.tsx b/packages/segmented-buttons/src/SegmentedButtons.tsx
@@ -38,6 +38,7 @@ const SegmentedButtons = React.forwardRef<
             <button
               aria-checked={isActive}
               aria-label={btn.label}
+              data-test-id={btn.dataTestId}
               disabled={btn.isDisabled}
               key={btn.label}
               onClick={() => {

diff --git a/packages/segmented-buttons/src/__tests__/SegmentedButtons.mocks.ts b/packages/segmented-buttons/src/__tests__/SegmentedButtons.mocks.ts
@@ -27,12 +27,14 @@ const TWO_BTNS: Buttons = [
     value: 'lft',
     isDisabled: false,
     icon: undefined,
+    dataTestId: 'btn-1',
   },
   {
     label: 'Right',
     value: 'rht',
     isDisabled: false,
     icon: undefined,
+    dataTestId: 'btn-2',
   },
 ];
 

diff --git a/packages/segmented-buttons/src/__tests__/SegmentedButtons.test.tsx b/packages/segmented-buttons/src/__tests__/SegmentedButtons.test.tsx
@@ -7,7 +7,7 @@ import { Gallery } from '@heycar-uikit/icons';
 
 import SegmentedButtons from '../SegmentedButtons';
 
-import { BTN_DATA, modifyBtns } from './SegmentedButtons.mocks';
+import { BTN_DATA, modifyBtns, TWO_BTNS } from './SegmentedButtons.mocks';
 
 const dataTestId = 'test-id';
 
@@ -30,6 +30,19 @@ describe('SegmentedButtons', () => {
       expect(getByTestId(dataTestId).tagName).toBe('DIV');
     });
 
+    it('should set `data-test-id` attribute on buttons', () => {
+      const { getByTestId } = render(
+        <SegmentedButtons
+          buttons={TWO_BTNS}
+          dataTestId={dataTestId}
+          onChange={onChange}
+        />,
+      );
+
+      expect(getByTestId('btn-1').tagName).toBe('BUTTON');
+      expect(getByTestId('btn-2').tagName).toBe('BUTTON');
+    });
+
     it('should set className', () => {
       const className = 'test-class';
       const { container } = render(

diff --git a/...ges/segmented-buttons/src/__tests__/__snapshots__/SegmentedButtons.snapshot.test.tsx.snap b/...ges/segmented-buttons/src/__tests__/__snapshots__/SegmentedButtons.snapshot.test.tsx.snap
@@ -13,13 +13,15 @@ Object {
         <button
           aria-checked="false"
           aria-label="Left"
+          data-test-id="btn-1"
           role="radio"
         >
           Left
         </button>
         <button
           aria-checked="false"
           aria-label="Right"
+          data-test-id="btn-2"
           role="radio"
         >
           Right
@@ -36,13 +38,15 @@ Object {
       <button
         aria-checked="false"
         aria-label="Left"
+        data-test-id="btn-1"
         role="radio"
       >
         Left
       </button>
       <button
         aria-checked="false"
         aria-label="Right"
+        data-test-id="btn-2"
         role="radio"
       >
         Right

diff --git a/packages/segmented-buttons/src/docs/Component.stories.mdx b/packages/segmented-buttons/src/docs/Component.stories.mdx
@@ -86,13 +86,19 @@ export const SegmentedButtonsTemplate = ({ ...props }) => {
   name="SegmentedButtons"
   version={version}
   stage={1}
-  design="https://www.figma.com/file/rrvkvQEoVTOHa7MzyKSaoz/Design-system?node-id=11667-213068&t=cdniDk8YJcZcnIwr-0"
+  design="https://www.figma.com/file/rrvkvQEoVTOHa7MzyKSaoz/Design-system?type=design&node-id=2073-48212&t=5DXQ5Fj9xmmbEVBw-0"
 />
 
-Review ratings are a 0 to 10 rating with a dial, used in connection with reviews.
+Segmented buttons help people select options, switch views, or sort elements
 
 ```tsx
-import SegmentedButtons from '@heycar-uikit/segmented-buttons';
+// TSX/JSX file
+import SegmentedButtons from '@heycar-uikit/core/segmented-buttons';
+```
+
+```css
+// CSS file
+@import '@heycar-uikit/core/segmented-buttons/esm/SegmentedButtons.css';
 ```
 
 <!-- Description -->
@@ -104,3 +110,4 @@ import SegmentedButtons from '@heycar-uikit/segmented-buttons';
     { label: 'Changelog', component: <Changelog /> },
   ]}
 />
+```