-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
extract button bar styles into presentational-only component
- Loading branch information
Showing
8 changed files
with
264 additions
and
92 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { render } from "@testing-library/react"; | ||
| import { ButtonBar } from "./ButtonBar"; | ||
|
|
||
| describe("ButtonBar", () => { | ||
| it("renders", () => { | ||
| const { asFragment } = render( | ||
| <ButtonBar> | ||
| <a>One</a> | ||
| <a>Two</a> | ||
| </ButtonBar>, | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("renders small size", () => { | ||
| const { asFragment } = render( | ||
| <ButtonBar size="small"> | ||
| <button>One</button> | ||
| <button>Two</button> | ||
| </ButtonBar>, | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("renders large size", () => { | ||
| const { asFragment } = render( | ||
| <ButtonBar size="large"> | ||
| <button>One</button> | ||
| <button data-selected>Two</button> | ||
| </ButtonBar>, | ||
| ); | ||
| expect(asFragment()).toMatchSnapshot(); | ||
| }); | ||
| }); |
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,43 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { ButtonBar } from "./ButtonBar"; | ||
|
|
||
| type ButtonBarProps = React.ComponentProps<typeof ButtonBar>; | ||
|
|
||
| const Wrapper = styled.div` | ||
| padding: 2.4rem; | ||
| `; | ||
|
|
||
| export const Examples = () => { | ||
| const [size, setSize] = | ||
| React.useState<ButtonBarProps["size"]>("medium"); | ||
|
|
||
| const handleSetSize = (e: any) => setSize(e.currentTarget.value as ButtonBarProps['size']); | ||
|
|
||
| return <Wrapper> | ||
| <label> | ||
| <b>Size</b><br/> | ||
| <select onChange={handleSetSize} defaultValue={size}> | ||
| {['large', 'medium', 'small'].map((v) => | ||
| <option key={v}>{v}</option>)} | ||
| </select> | ||
| </label> | ||
| <br/><br/> | ||
| <ButtonBar size={size}> | ||
| <a>First Item</a> | ||
| <a data-selected>Second Item</a> | ||
| </ButtonBar> | ||
| <br/><br/> | ||
| <ButtonBar size={size}> | ||
| <button>First Item</button> | ||
| <button data-selected>Second Item</button> | ||
| <button>Third Item</button> | ||
| </ButtonBar> | ||
| <br/><br/> | ||
| <ButtonBar size={size}> | ||
| <button>First Item with a really long title</button> | ||
| <button>Second Item</button> | ||
| <button>Third Item</button> | ||
| </ButtonBar> | ||
| </Wrapper> | ||
| }; |
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,36 @@ | ||
| import React from "react"; | ||
| import styled from "styled-components"; | ||
| import { | ||
| buttonBarItemCss, | ||
| buttonBarWrapperCss, | ||
| tabBaseCss, | ||
| tabListBaseCss, | ||
| TabsProps, | ||
| } from "./Tabs"; | ||
|
|
||
| type ButtonBarProps = Pick<TabsProps, "size"> & { | ||
| children?: React.ReactNode; | ||
| }; | ||
|
|
||
| const Wrapper = styled.div` | ||
| ${tabListBaseCss} | ||
| ${buttonBarWrapperCss} | ||
| > * { | ||
| all: unset; | ||
| ${tabBaseCss} | ||
| ${buttonBarItemCss} | ||
| } | ||
| `; | ||
|
|
||
| export const ButtonBar = ({ | ||
| size = "medium", | ||
| children, | ||
| ...restProps | ||
| }: ButtonBarProps) => { | ||
| return ( | ||
| <Wrapper size={size} {...restProps}> | ||
| {children} | ||
| </Wrapper> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`ButtonBar renders 1`] = ` | ||
| <DocumentFragment> | ||
| <div | ||
| class="sc-gsnTZi dIbpvz" | ||
| > | ||
| <a> | ||
| One | ||
| </a> | ||
| <a> | ||
| Two | ||
| </a> | ||
| </div> | ||
| </DocumentFragment> | ||
| `; | ||
|
|
||
| exports[`ButtonBar renders large size 1`] = ` | ||
| <DocumentFragment> | ||
| <div | ||
| class="sc-gsnTZi eAVYPw" | ||
| > | ||
| <button> | ||
| One | ||
| </button> | ||
| <button | ||
| data-selected="true" | ||
| > | ||
| Two | ||
| </button> | ||
| </div> | ||
| </DocumentFragment> | ||
| `; | ||
|
|
||
| exports[`ButtonBar renders small size 1`] = ` | ||
| <DocumentFragment> | ||
| <div | ||
| class="sc-gsnTZi gXyDdH" | ||
| > | ||
| <button> | ||
| One | ||
| </button> | ||
| <button> | ||
| Two | ||
| </button> | ||
| </div> | ||
| </DocumentFragment> | ||
| `; |
Oops, something went wrong.