Skip to content

Commit

Permalink
Revert "feat!: release chip, searchfield, pagination, form.autosuggest (
Browse files Browse the repository at this point in the history 
#2964)" (#2994)

This reverts commit 0274f10.
  • Loading branch information
@adamstankiewicz
adamstankiewicz authored Jan 19, 2024
1 parent 0274f10 commit 4ba0b6d
Show file tree
Hide file tree
Showing 47 changed files with 1,476 additions and 2,488 deletions.
12 changes: 0 additions & 12 deletions src/Button/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,12 +358,6 @@ fieldset:disabled a.btn {
$btn-tertiary-color,
$btn-tertiary-color
);

&.disabled,
&:disabled {
color: $yiq-text-dark;
}

@include button-focus(theme-color("primary", "focus"));
}

Expand All @@ -386,12 +380,6 @@ fieldset:disabled a.btn {
$btn-inverse-tertiary-color,
$btn-inverse-tertiary-color
);

&.disabled,
&:disabled {
color: $yiq-text-light;
}

@include button-focus($white);
}

Expand Down
98 changes: 16 additions & 82 deletions src/Chip/Chip.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Close } from '../../icons';
import { STYLE_VARIANTS } from './constants';
import Chip from '.';

function TestChip(props) {
Expand All @@ -25,123 +24,58 @@ describe('<Chip />', () => {
});
it('renders with props iconBefore', () => {
const tree = renderer.create((
<TestChip iconBefore={Close} iconBeforeAlt="close icon" />
<TestChip iconBefore={Close} />
)).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders with props iconAfter', () => {
const tree = renderer.create((
<TestChip iconAfter={Close} iconAfterAlt="close icon" />
<TestChip iconAfter={Close} />
)).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders with props iconBefore and iconAfter', () => {
const tree = renderer.create((
<TestChip
iconBefore={Close}
iconBeforeAlt="close icon"
iconAfter={Close}
iconAfterAlt="close icon"
>
Chip
</TestChip>
)).toJSON();
expect(tree).toMatchSnapshot();
});
it('renders div with "button" role when onClick is provided', () => {
const tree = renderer.create((
<TestChip onClick={jest.fn}>Chip</TestChip>
<TestChip iconBefore={Close} iconAfter={Close}>Chip</TestChip>
)).toJSON();
expect(tree).toMatchSnapshot();
});
});

describe('correct rendering', () => {
it('render a non-interactive element if onClick handlers are not provided', () => {
render(<TestChip />);
expect(screen.queryByRole('button')).not.toBeInTheDocument();
});
it('render an interactive element if onClick handler is provided', () => {
render(<TestChip onClick={jest.fn} />);
expect(screen.queryByRole('button')).toBeInTheDocument();
});
it('renders with correct class when variant is added', () => {
render(<TestChip variant={STYLE_VARIANTS.DARK} onClick={jest.fn} />);
const chip = screen.getByRole('button');
render(<TestChip variant="dark" data-testid="chip" />);
const chip = screen.getByTestId('chip');
expect(chip).toHaveClass('pgn__chip pgn__chip-dark');
});
it('renders with active class when disabled prop is added', () => {
render(<TestChip disabled onClick={jest.fn} />);
const chip = screen.getByRole('button');
render(<TestChip disabled data-testid="chip" />);
const chip = screen.getByTestId('chip');
expect(chip).toHaveClass('disabled');
});
it('renders with the client\'s className', () => {
const className = 'testClassName';
render(<TestChip className={className} onClick={jest.fn} />);
const chip = screen.getByRole('button');
render(<TestChip className={className} data-testid="chip" />);
const chip = screen.getByTestId('chip');
expect(chip).toHaveClass(className);
});
it('onIconAfterClick is triggered', async () => {
const func = jest.fn();
render(
<TestChip
iconAfter={Close}
onIconAfterClick={func}
iconAfterAlt="icon-after"
/>,
<TestChip iconAfter={Close} onIconAfterClick={func} />,
);
const iconAfter = screen.getByLabelText('icon-after');
const iconAfter = screen.getByTestId('icon-after');
await userEvent.click(iconAfter);
expect(func).toHaveBeenCalledTimes(1);
expect(func).toHaveBeenCalled();
});
it('onIconAfterKeyDown is triggered', async () => {
const func = jest.fn();
render(
<TestChip
iconAfter={Close}
onIconAfterClick={func}
iconAfterAlt="icon-after"
/>,
);
const iconAfter = screen.getByLabelText('icon-after');
await userEvent.click(iconAfter, '{enter}', { skipClick: true });
expect(func).toHaveBeenCalledTimes(1);
});
it('onIconBeforeClick is triggered', async () => {
const func = jest.fn();
render(
<TestChip
iconBefore={Close}
onIconBeforeClick={func}
iconBeforeAlt="icon-before"
/>,
);
const iconBefore = screen.getByLabelText('icon-before');
await userEvent.click(iconBefore);
expect(func).toHaveBeenCalledTimes(1);
});
it('onIconBeforeKeyDown is triggered', async () => {
const func = jest.fn();
render(
<TestChip
iconBefore={Close}
onIconBeforeClick={func}
iconBeforeAlt="icon-before"
/>,
<TestChip iconAfter={Close} onIconAfterClick={func} />,
);
const iconBefore = screen.getByLabelText('icon-before');
await userEvent.click(iconBefore, '{enter}', { skipClick: true });
expect(func).toHaveBeenCalledTimes(1);
});
it('checks the absence of the `selected` class in the chip', async () => {
render(<TestChip onClick={jest.fn} />);
const chip = screen.getByRole('button');
expect(chip).not.toHaveClass('selected');
});
it('checks the presence of the `selected` class in the chip', async () => {
render(<TestChip isSelected onClick={jest.fn} />);
const chip = screen.getByRole('button');
expect(chip).toHaveClass('selected');
const iconAfter = screen.getByTestId('icon-after');
await userEvent.type(iconAfter, '{enter}');
expect(func).toHaveBeenCalled();
});
});
});
54 changes: 0 additions & 54 deletions src/Chip/ChipIcon.tsx
View file

This file was deleted.

127 changes: 11 additions & 116 deletions src/Chip/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,139 +16,34 @@ notes: |
## Basic Usage

```jsx live
<Stack
gap={2}
direction="horizontal"
>
<div>
<Chip>New</Chip>
<Chip disabled>New</Chip>
</Stack>
```

## Clickable Variant

Use `onClick` prop to make the whole `Chip` clickable, this will also add appropriate styles to make `Chip` interactive.

```jsx live
<Chip onClick={() => console.log('Click!')}>Click Me</Chip>
```

## With isSelected prop

```jsx live
<Chip isSelected>New</Chip>
<Chip variant="dark">New</Chip>
</div>
```

## With Icon Before and After
### Basic Usage

Use `iconBefore` and `iconAfter` props to provide icons for the `Chip`, note that you also can provide
accessible names for these icons for screen reader support via `iconBeforeAlt` and `iconAfterAlt` respectively.

```jsx live
<Stack
gap={2}
direction="horizontal"
>
<Chip iconBefore={Person} iconBeforeAlt="icon-before">Person</Chip>
<Chip iconAfter={Close} iconAfterAlt="icon-after">Close</Chip>
<Chip
iconBefore={Person}
iconAfter={Close}
iconAfterAlt="icon-after"
iconBeforeAlt="icon-before"
>
Both
</Chip>
</Stack>
```

### Clickable icon variant

Provide click handlers for icons via `onIconAfterClick` and `onIconBeforeClick` props.

```jsx live
<Stack
gap={2}
direction="horizontal"
>
<Chip
iconBefore={Person}
iconBeforeAlt="icon-before"
onIconBeforeClick={() => console.log('onIconBeforeClick')}
>
Person
</Chip>
<Chip
iconAfter={Close}
onIconAfterClick={() => console.log('onIconAfterClick')}
iconAfterAlt="icon-after"
>
Close
</Chip>
<Chip
iconBefore={Person}
iconAfter={Close}
onIconAfterClick={() => console.log('onIconAfterClick')}
onIconBeforeClick={() => console.log('onIconBeforeClick')}
iconAfterAlt="icon-after"
iconBeforeAlt="icon-before"
>
Both
</Chip>
<Chip
iconBefore={Person}
iconAfter={Close}
onIconAfterClick={() => console.log('onIconAfterClick')}
onIconBeforeClick={() => console.log('onIconBeforeClick')}
iconAfterAlt="icon-after"
iconBeforeAlt="icon-before"
disabled
>
Both
</Chip>
</Stack>
```

**Note**: both `Chip` and its icons cannot be made interactive at the same time, e.g. if you provide both `onClick` and `onIconAfterClick` props,
`onClick` will be ignored and only the icon will get interactive behaviour, see example below (this is done to avoid usability issues where users might click on the `Chip` itself by mistake when they meant to click the icon instead).

```jsx live
<Chip
iconBefore={Person}
iconBeforeAlt="icon-before"
onIconBeforeClick={() => console.log('onIconBeforeClick')}
onClick={() => console.log('onClick')}
>
Person
</Chip>
```

### Inverse Pallete

```jsx live
<Stack
className="bg-dark-700 p-4"
gap={2}
direction="horizontal"
>
<Chip variant="dark" iconBefore={Person} iconBeforeAlt="icon-before">New</Chip>
<div>
<Chip iconBefore={Person}>New</Chip>
<Chip
variant="dark"
iconBefore={Person}
iconAfter={Close}
onIconAfterClick={() => console.log('onIconAfterClick')}
iconAfterAlt="icon-after"
onIconAfterClick={() => console.log('Remove Chip')}
>
New 1
New
</Chip>
<Chip
variant="dark"
iconBefore={Person}
iconAfter={Close}
onIconAfterClick={() => console.log('onIconAfterClick')}
iconAfterAlt="icon-after"
onIconAfterClick={() => console.log('Remove Chip')}
disabled
>
New
</Chip>
</Stack>
</div>
```
Loading

0 comments on commit 4ba0b6d

Please sign in to comment.