Skip to content

Commit

Permalink
feat: small button size and tag improvements
Browse files Browse the repository at this point in the history 
BREAKING CHANGE
  • Loading branch information
@brettdorrans
brettdorrans committed May 25, 2022
1 parent a876504 commit 7657411
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 77 deletions.
22 changes: 20 additions & 2 deletions src/components/button/Button.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,27 @@ test('it works', () => {
expect(container.firstChild).toMatchSnapshot();
});

test('it works with size', () => {
test('it works with size small', () => {
const { container } = setup(
<Button type="button" kind="secondary" small>
<Button type="button" kind="secondary" sizes="small">
Hello world
</Button>
);
expect(container.firstChild).toMatchSnapshot();
});

test('it works with size medium', () => {
const { container } = setup(
<Button type="button" kind="secondary" sizes="small">
Hello world
</Button>
);
expect(container.firstChild).toMatchSnapshot();
});

test('it works with size large', () => {
const { container } = setup(
<Button type="button" kind="secondary" sizes="small">
Hello world
</Button>
);
Expand Down
73 changes: 63 additions & 10 deletions src/components/button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,41 @@ Small buttons
import { ThemeProvider, Button } from '@lapidist/components';

<ThemeProvider>
<Button type="button" kind="primary" small>Primary</Button>
<Button type="button" kind="secondary" small>Secondary</Button>
<Button type="button" kind="tertiary" small>Tertiary</Button>
<Button type="button" kind="danger" small>Danger</Button>
<Button type="button" kind="grey" small>Grey</Button>
<Button type="button" kind="primary" variant="small">Primary</Button>
<Button type="button" kind="secondary" variant="small">Secondary</Button>
<Button type="button" kind="tertiary" variant="small">Tertiary</Button>
<Button type="button" kind="danger" variant="small">Danger</Button>
<Button type="button" kind="grey" variant="small">Grey</Button>
</ThemeProvider>
```

Medium buttons
```jsx harmony
import { ThemeProvider, Button } from '@lapidist/components';

<ThemeProvider>
<Button type="button" kind="primary" variant="medium">Primary</Button>
<Button type="button" kind="secondary" variant="medium">Secondary</Button>
<Button type="button" kind="tertiary" variant="medium">Tertiary</Button>
<Button type="button" kind="danger" variant="medium">Danger</Button>
<Button type="button" kind="grey" variant="medium">Grey</Button>
</ThemeProvider>
```

Large buttons
```jsx harmony
import { ThemeProvider, Button } from '@lapidist/components';

<ThemeProvider>
<Button type="button" kind="primary" variant="large">Primary</Button>
<Button type="button" kind="secondary" variant="large">Secondary</Button>
<Button type="button" kind="tertiary" variant="large">Tertiary</Button>
<Button type="button" kind="danger" variant="large">Danger</Button>
<Button type="button" kind="grey" variant="large">Grey</Button>
</ThemeProvider>
```


Ghost buttons
```jsx harmony
import { ThemeProvider, Button } from '@lapidist/components';
Expand Down Expand Up @@ -70,10 +97,36 @@ Small ghost buttons
import { ThemeProvider, Button } from '@lapidist/components';

<ThemeProvider>
<Button type="button" kind="primary" ghost small>Primary</Button>
<Button type="button" kind="secondary" ghost small>Secondary</Button>
<Button type="button" kind="tertiary" ghost small>Tertiary</Button>
<Button type="button" kind="danger" ghost small>Danger</Button>
<Button type="button" kind="grey" ghost small>Grey</Button>
<Button type="button" kind="primary" ghost variant="small">Primary</Button>
<Button type="button" kind="secondary" ghost variant="small">Secondary</Button>
<Button type="button" kind="tertiary" ghost variant="small">Tertiary</Button>
<Button type="button" kind="danger" ghost variant="small">Danger</Button>
<Button type="button" kind="grey" ghost variant="small">Grey</Button>
</ThemeProvider>
```

Medium ghost buttons
```jsx harmony
import { ThemeProvider, Button } from '@lapidist/components';

<ThemeProvider>
<Button type="button" kind="primary" ghost variant="medium">Primary</Button>
<Button type="button" kind="secondary" ghost variant="medium">Secondary</Button>
<Button type="button" kind="tertiary" ghost variant="medium">Tertiary</Button>
<Button type="button" kind="danger" ghost variant="medium">Danger</Button>
<Button type="button" kind="grey" ghost variant="medium">Grey</Button>
</ThemeProvider>
```

Large ghost buttons
```jsx harmony
import { ThemeProvider, Button } from '@lapidist/components';

<ThemeProvider>
<Button type="button" kind="primary" ghost variant="large">Primary</Button>
<Button type="button" kind="secondary" ghost variant="large">Secondary</Button>
<Button type="button" kind="tertiary" ghost variant="large">Tertiary</Button>
<Button type="button" kind="danger" ghost variant="large">Danger</Button>
<Button type="button" kind="grey" ghost variant="large">Grey</Button>
</ThemeProvider>
```
101 changes: 97 additions & 4 deletions src/components/button/__snapshots__/Button.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,11 +90,57 @@ exports[`it works with ghost 1`] = `
</button>
`;

exports[`it works with size 1`] = `
exports[`it works with size large 1`] = `
.c0 {
border-style: solid;
text-align: center;
font-size: 0.875rem;
font-size: 1rem;
font-weight: 400;
font-family: Montserrat,sans-serif;
line-height: 2;
border-radius: 0.3rem;
border-width: 1px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #ebc764;
color: white;
border-color: #937032;
}
.c0:hover {
cursor: pointer;
background-color: #937032;
color: white;
}
.c0:hover:disabled {
cursor: not-allowed;
background-color: #937032;
}
.c0:disabled {
opacity: 0.7;
background-color: #937032;
color: white;
}
<button
class="c0"
sizes="small"
type="button"
>
Hello world
</button>
`;

exports[`it works with size medium 1`] = `
.c0 {
border-style: solid;
text-align: center;
font-size: 1rem;
font-weight: 400;
font-family: Montserrat,sans-serif;
line-height: 2;
Expand All @@ -103,8 +149,54 @@ exports[`it works with size 1`] = `
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #ebc764;
color: white;
border-color: #937032;
}
.c0:hover {
cursor: pointer;
background-color: #937032;
color: white;
}
.c0:hover:disabled {
cursor: not-allowed;
background-color: #937032;
}
.c0:disabled {
opacity: 0.7;
background-color: #937032;
color: white;
}
<button
class="c0"
sizes="small"
type="button"
>
Hello world
</button>
`;

exports[`it works with size small 1`] = `
.c0 {
border-style: solid;
text-align: center;
font-size: 1rem;
font-weight: 400;
font-family: Montserrat,sans-serif;
line-height: 2;
border-radius: 0.3rem;
border-width: 1px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: #ebc764;
color: white;
border-color: #937032;
Expand All @@ -129,6 +221,7 @@ exports[`it works with size 1`] = `
<button
class="c0"
sizes="small"
type="button"
>
Hello world
Expand Down
8 changes: 5 additions & 3 deletions src/components/button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@ export type ButtonPropType = BoxProps &
React.ButtonHTMLAttributes<HTMLButtonElement> &
React.HTMLProps<HTMLButtonElement>;

export type ButtonSize = 'small' | 'medium' | 'large';

export interface ButtonProps {
readonly kind: string;
readonly theme: Theme;
readonly small?: boolean;
readonly variant?: ButtonSize;
readonly ghost?: boolean;
}

Expand All @@ -23,14 +25,14 @@ const BaseButton: React.FC<ButtonPropType & ButtonProps> = ({
styles,
kind,
theme,
small,
variant,
ghost,
...restProps
}) => (
<Text
as={as}
styles={mergeStyles(
buttonStyles({ kind, theme, small, ghost }),
buttonStyles({ kind, theme, variant, ghost }),
styles
)}
{...restProps}
Expand Down
22 changes: 17 additions & 5 deletions src/components/button/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,21 @@ interface ButtonVariantStyles {
disabledBackgroundColor: ColorGroup | string;
}

const buttonSizing = (small?: boolean) => ({
paddingY: small ? '1' : '2',
fontSize: small ? '2' : '3'
const scale = (variant: string, start: number): string => {
switch (variant) {
case 'small':
return (start - 1).toString(10);
case 'medium':
return start.toString(10);
case 'large':
default:
return (start + 1).toString(10);
}
};

const buttonSizing = (variant: string) => ({
paddingY: scale(variant, 1),
fontSize: scale(variant, 2)
});

const darkGrey: ColorGroup = { group: 'grey', shade: 'dark' };
Expand All @@ -39,15 +51,15 @@ const buttonColors = (dark: string, base: string, ghost?: boolean) => ({
const buttonVariants = ({
kind,
theme,
small,
variant,
ghost
}: ButtonProps): ButtonVariantStyles => {
const { dark, base } = getProperty<{
[K: string]: string;
}>(theme, 'colors', kind);

return {
...buttonSizing(small),
...buttonSizing(variant || 'large'),
...buttonColors(dark, base, ghost)
};
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/tag/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
The Tag component displays small, inline snippets of information.

```jsx harmony
import { ThemeProvider, Tag } from '@lapidist/components';
import { ThemeProvider, Tag, Button } from '@lapidist/components';

<ThemeProvider>
<Tag namespace="npm" kind="primary">v1.0.0</Tag>
<Tag href="https://github.com" namespace="GitHub" kind="secondary">v1.0.0</Tag>
<Tag namespace="GitHub" kind="secondary">v1.0.0</Tag>
<Tag kind="tertiary">v1.0.0</Tag>
<Tag kind="danger">v1.0.0</Tag>
<Tag kind="grey">v1.0.0</Tag>
Expand Down
Loading

0 comments on commit 7657411

Please sign in to comment.