-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: EVER-13451: Add
Select component (#325)
* feat: EVER-13451: Initial commit of Select and Select.Option components * WIP: Keyboard handler for moving selected option focus with up arrow. * feat: EVER-13451: Up and down arrow keys, validity with hidden native select, break some code into separate hooks * feat: EVER-13451: Add tests for , make a child, export from index and import into example app * feat: EVER-13451: Update jsdom env to sixteen * feat: EVER-13451: Restore non-clicky style to plain Dropdown.Menu.Item content, style stories a bit * feat: EVER-13451: Update Dropdown.Menu.Item README * chore: EVER-13451: Update more tests and snapshots
- Loading branch information
1 parent
b692909
commit 7bb39f4
Showing
39 changed files
with
4,923 additions
and
3,092 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,22 @@ | ||
| .Item { | ||
| background: transparent none; | ||
| padding: var(--rvr-space-sm) var(--rvr-space-lg); | ||
| -webkit-appearance: none; | ||
| border: 0 none transparent; | ||
| transition: 100ms var(--rvr-easeInOutQuad) background-color, 100ms var(--rvr-easeInOutQuad) color; | ||
| text-align: left; | ||
| display: block; | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| font-family: var(--rvr-base-font-family); | ||
| font-size: var(--rvr-font-size-md); | ||
| line-height: var(--rvr-line-height-sm); | ||
| color: var(--rvr-gray-90); | ||
| } | ||
|
|
||
| .button { | ||
| cursor: pointer; | ||
| color: var(--rvr-gray-90); | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| .button:hover, | ||
| .button:active { | ||
| .button:hover:not(.disabled), | ||
| .button:active:not(.disabled) { | ||
| background-color: var(--rvr-gray-10); | ||
| } | ||
|
|
||
| .link { | ||
| cursor: pointer; | ||
| .content { | ||
| cursor: default; | ||
| color: var(--rvr-gray-90); | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .link:hover, | ||
| .link:active { | ||
| background-color: var(--rvr-gray-10); | ||
| .content:hover, | ||
| .content:active { | ||
| background: none; | ||
| color: var(--rvr-gray-90); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,55 @@ | ||
| import React from 'react'; | ||
| import { shallow } from 'enzyme'; | ||
| import { render, screen } from '@testing-library/react'; | ||
|
|
||
| import Item from '.'; | ||
|
|
||
| describe('Item', () => { | ||
| it('renders', () => { | ||
| shallow(<Item>Boom</Item>); | ||
| const { baseElement } = render(<Item>Boom</Item>); | ||
| expect(baseElement).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders content', () => { | ||
| const wrapper = shallow(<Item>Boom</Item>); | ||
| expect(wrapper.text()).toEqual('Boom'); | ||
| render(<Item>Boom</Item>); | ||
| expect(screen.getByText('Boom')).toBeTruthy(); | ||
| }); | ||
|
|
||
| describe("when there's an href", () => { | ||
| it('renders a link', () => { | ||
| const wrapper = shallow(<Item href="foo">Hi</Item>); | ||
| expect(wrapper.find('a').length).toEqual(1); | ||
| render(<Item href="foo">Hi</Item>); | ||
| const menuItem = screen.getByRole('link', { | ||
| name: 'Hi', | ||
| }) as HTMLAnchorElement; | ||
| expect(menuItem.href).toEqual('http://localhost/foo'); | ||
| }); | ||
|
|
||
| describe('and an onClick', () => { | ||
| it('still renders a link', () => { | ||
| const wrapper = shallow( | ||
| render( | ||
| <Item href="foo" onClick={() => {}}> | ||
| Hi | ||
| </Item> | ||
| ); | ||
| expect(wrapper.find('a').length).toEqual(1); | ||
| expect(wrapper.find('button').length).toEqual(0); | ||
|
|
||
| expect(screen.getByRole('link', { name: 'Hi' })).toBeTruthy(); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe("when there's an onClick", () => { | ||
| const wrapper = shallow(<Item onClick={() => {}}>Hi</Item>); | ||
| expect(wrapper.find('button').length).toEqual(1); | ||
| render(<Item onClick={() => {}}>Hi</Item>); | ||
| expect(screen.getByRole('button', { name: 'Hi' })).toBeTruthy(); | ||
| }); | ||
|
|
||
| describe('when children is a React node', () => { | ||
| it('still renders', () => { | ||
| const wrapper = shallow( | ||
| const { baseElement } = render( | ||
| <Item> | ||
| <span>Span!</span> | ||
| </Item> | ||
| ); | ||
| expect(wrapper.find('span').length).toEqual(1); | ||
| expect(wrapper.text()).toEqual('Span!'); | ||
| expect(baseElement).toMatchSnapshot(); | ||
| expect(screen.getByText('Span!')).toBeTruthy(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
src/components/Dropdown/Menu/Item/__snapshots__/Item.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Item renders 1`] = ` | ||
| <body> | ||
| <div> | ||
| <button | ||
| class="Item button Button text md" | ||
| type="button" | ||
| > | ||
| <span> | ||
| Hi | ||
| </span> | ||
| </button> | ||
| </div> | ||
| <div> | ||
| <div | ||
| class="Item content Button text md" | ||
| > | ||
| <span> | ||
| Boom | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| `; | ||
|
|
||
| exports[`Item when children is a React node still renders 1`] = ` | ||
| <body> | ||
| <div> | ||
| <div | ||
| class="Item content Button text md" | ||
| > | ||
| <span> | ||
| Span! | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| `; |
Oops, something went wrong.