@popsure/dirty-swan 0.27.21 → 0.27.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -158,9 +158,7 @@
158
158
  &--bordered {
159
159
  align-items: center;
160
160
 
161
- padding-top: 8px;
162
- padding-bottom: 8px;
163
- padding-left: 16px;
161
+ padding: 8px 16px;
164
162
 
165
163
  border-radius: 8px;
166
164
  border: 1px solid $ds-grey-400;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@popsure/dirty-swan",
3
- "version": "0.27.21",
3
+ "version": "0.27.23",
4
4
  "author": "Vincent Audoire <vincent@getpopsure.com>",
5
5
  "license": "MIT",
6
6
  "private": false,
@@ -0,0 +1,51 @@
1
+ import { fireEvent, render } from '@testing-library/react';
2
+
3
+ import SegmentedControl from '.';
4
+
5
+ const setup = (onChange: (selectedIndex: number) => void = () => {}) => {
6
+ return render(
7
+ <SegmentedControl
8
+ values={['kg', 'lbs']}
9
+ onChange={onChange}
10
+ selectedIndex={0}
11
+ />
12
+ );
13
+ };
14
+
15
+ describe('SegmentedControl component', () => {
16
+ it('Should provide the index of the clicked button', async () => {
17
+ const callback = jest.fn();
18
+ const screen = setup(callback);
19
+ const buttons = screen.getAllByRole('button');
20
+
21
+ // click first button
22
+ fireEvent.click(buttons[0]);
23
+
24
+ // click second button
25
+ fireEvent.click(buttons[1]);
26
+
27
+ expect(callback.mock.calls).toEqual([[0], [1]]);
28
+ });
29
+
30
+ it('Should provide the index of the selected button on key down', async () => {
31
+ const callback = jest.fn();
32
+ const screen = setup(callback);
33
+ const buttons = screen.getAllByRole('button');
34
+
35
+ // select first button on key down
36
+ fireEvent.keyDown(buttons[0], {
37
+ key: 'Enter',
38
+ code: 'Enter',
39
+ charCode: 13,
40
+ });
41
+
42
+ // select second button on key down
43
+ fireEvent.keyDown(buttons[1], {
44
+ key: 'Enter',
45
+ code: 'Enter',
46
+ charCode: 13,
47
+ });
48
+
49
+ expect(callback.mock.calls).toEqual([[0], [1]]);
50
+ });
51
+ });
@@ -56,6 +56,7 @@ const SegmentedControl = ({
56
56
  onChange(index);
57
57
  }}
58
58
  className={styles.chip}
59
+ key={typeof value === 'string' ? value : value.title}
59
60
  >
60
61
  {typeof value === 'string' ? (
61
62
  <div
@@ -158,9 +158,7 @@
158
158
  &--bordered {
159
159
  align-items: center;
160
160
 
161
- padding-top: 8px;
162
- padding-bottom: 8px;
163
- padding-left: 16px;
161
+ padding: 8px 16px;
164
162
 
165
163
  border-radius: 8px;
166
164
  border: 1px solid $ds-grey-400;