Skip to content
This repository has been archived by the owner on Dec 3, 2024. It is now read-only.

Commit

Permalink
BREAKING CHANGE: refactor button size interface
Browse files Browse the repository at this point in the history
  • Loading branch information
lkappeler committed May 26, 2020
1 parent 4ccff85 commit 22b39ef
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 17 deletions.
8 changes: 4 additions & 4 deletions src/components/__tests__/button.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe("<Button>", () => {

describe("button variations", () => {
it("renders small button", () => {
const { container } = render(<Button small>Label</Button>)
const { container } = render(<Button size="small">Label</Button>)
expect(container).toMatchSnapshot()
})

Expand All @@ -43,7 +43,7 @@ describe("<Button>", () => {

it("renders small disabled button", () => {
const { container } = render(
<Button disabled small>
<Button disabled size="small">
Label
</Button>
)
Expand All @@ -52,7 +52,7 @@ describe("<Button>", () => {

it("renders small teal button", () => {
const { container } = render(
<Button small teal>
<Button size="small" teal>
Label
</Button>
)
Expand All @@ -66,7 +66,7 @@ describe("<Button>", () => {

it("renders white Teal small button", () => {
const { container } = render(
<Button tealBorder small>
<Button tealBorder size="small">
Label
</Button>
)
Expand Down
10 changes: 5 additions & 5 deletions src/components/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface Props {
dataTestid?: string
teal?: boolean
tealBorder?: boolean
small?: boolean | "auto"
size?: "large" | "small" | "auto"
disabled?: boolean
onClick?: (event: MouseEvent<HTMLButtonElement>) => void
submit?: boolean
Expand All @@ -21,16 +21,16 @@ export const Button: FC<Props> = ({
dataTestid,
teal,
tealBorder,
small = false,
size = "large",
disabled,
onClick,
submit,
icon,
}) => {
const padding = classnames("px-10", {
"min-h-36": small === true,
"min-h-52": small === false,
"min-h-36 lg:min-h-52": small === "auto",
"min-h-36": size === "large",
"min-h-52": size === "small",
"min-h-36 lg:min-h-52": size === "auto",
})
const classes = classnames("rounded border", {
"bg-teal hover:bg-teal-dark focus:bg-teal": teal,
Expand Down
21 changes: 18 additions & 3 deletions stories/button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ storiesOf("Button", module)
<div className="w-12/12 md:w-3/12">
<Button
teal={boolean("Teal", false)}
small={boolean("Small", false)}
disabled={boolean("Disabled", false)}
tealBorder={boolean("Teal Border", false)}
onClick={action("on Click")}
Expand All @@ -36,13 +35,29 @@ storiesOf("Button", module)
wInfo(`
Description
~~~
<Button small>CarForYou</Button>
<Button size="small">CarForYou</Button>
~~~
`)(() => (
<div className="mx-30 mb-40">
<div className="text-2xl mb-20">Small button</div>
<div className="w-12/12 md:w-3/12">
<Button small>Small button</Button>
<Button size="small">Small button</Button>
</div>
</div>
))
)
.add(
"Auto",
wInfo(`
Description
~~~
<Button size="auto">CarForYou</Button>
~~~
`)(() => (
<div className="mx-30 mb-40">
<div className="text-2xl mb-20">Auto size button</div>
<div className="w-12/12 md:w-3/12">
<Button size="auto">Auto size button</Button>
</div>
</div>
))
Expand Down
10 changes: 5 additions & 5 deletions stories/header/header.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ const links = [
]
const renderCTAButton = () => (
<div className="hidden md:block">
<Button small="auto" icon={() => <Plus color={white} />}>
<Button size="auto" icon={() => <Plus color={white} />}>
Kostenlos inserieren
</Button>
</div>
Expand Down Expand Up @@ -323,7 +323,7 @@ storiesOf("Header", module)
]
const renderCTAButton = () => (
<div className="hidden md:block">
<Button small="auto" icon={() => <Plus color={white} />}>Kostenlos inserieren</Button>
<Button size="auto" icon={() => <Plus color={white} />}>Kostenlos inserieren</Button>
</div>
)
const iconButtons = [() => <Heart />]
Expand Down Expand Up @@ -448,7 +448,7 @@ storiesOf("Header", module)
]
const renderCTAButton = () => (
<div className="hidden md:block">
<Button small="auto" icon={() => <Plus color={white} />}>Kostenlos inserieren</Button>
<Button size="auto" icon={() => <Plus color={white} />}>Kostenlos inserieren</Button>
</div>
)
const iconButtons = [() => <Heart />]
Expand Down Expand Up @@ -536,7 +536,7 @@ storiesOf("Header", module)
),
]
const renderCTAButton = () => (
<Button small="auto" icon={() => <Plus color={white} />}>
<Button size="auto" icon={() => <Plus color={white} />}>
<span className="hidden sm:inline-block">Inserat erstellen</span>
</Button>
)
Expand Down Expand Up @@ -584,7 +584,7 @@ storiesOf("Header", module)
),
]
const renderCTAButton = () => (
<Button small="auto" icon={() => <Plus color={white} />}>
<Button size="auto" icon={() => <Plus color={white} />}>
<span className="hidden sm:inline-block">Inserat erstellen</span>
</Button>
)
Expand Down

0 comments on commit 22b39ef

Please sign in to comment.