Skip to content

Commit

Permalink
feat #113 - Button theming (#117)
Browse files Browse the repository at this point in the history
* v0.4.0 -> v0.5.0 (#105)

* feat #99 - Avatar component (#103)
* feat #100 - Notification component should take in configuration options (#103)
* feat #101 - Icon component should render svgs (#103)
* feat #92 - Theming (#97)
* fix #104 - Fix exported types for table and form (#97)

* feat #113 - Revamp button styles

* feat #113 - Update button styles for primary

* feat #113 - Fix broken snapshots

* feat #113 - Fix bad rebase

* feat #113 - Update story snapshot

* feat #113 - Address PR comments

Co-authored-by: github-actions <[email protected]>
  • Loading branch information
nancy-dassana and github-actions authored Oct 17, 2020
1 parent 08c014d commit b142745
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 105 deletions.
105 changes: 34 additions & 71 deletions src/__snapshots__/storybook.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -77,44 +77,6 @@ exports[`Storyshots Button Disabled 1`] = `
</div>
`;

exports[`Storyshots Button Google 1`] = `
<div
className="storyWrapper-0-2-2"
>
<button
className="ant-btn ant-btn-default google-0-2-5"
data-test="button"
disabled={false}
onClick={[Function]}
type="button"
>
<span
aria-label="google"
className="anticon anticon-google"
role="img"
>
<svg
aria-hidden="true"
className=""
data-icon="google"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M881 442.4H519.7v148.5h206.4c-8.9 48-35.9 88.6-76.6 115.8-34.4 23-78.3 36.6-129.9 36.6-99.9 0-184.4-67.5-214.6-158.2-7.6-23-12-47.6-12-72.9s4.4-49.9 12-72.9c30.3-90.6 114.8-158.1 214.7-158.1 56.3 0 106.8 19.4 146.6 57.4l110-110.1c-66.5-62-153.2-100-256.6-100-149.9 0-279.6 86-342.7 211.4-26 51.8-40.8 110.4-40.8 172.4S151 632.8 177 684.6C240.1 810 369.8 896 519.7 896c103.6 0 190.4-34.4 253.8-93 72.5-66.8 114.4-165.2 114.4-282.1 0-27.2-2.4-53.3-6.9-78.5z"
/>
</svg>
</span>
<span>
Sign in with Google
</span>
</button>
</div>
`;

exports[`Storyshots Button Loading 1`] = `
<div
className="storyWrapper-0-2-2"
Expand Down Expand Up @@ -154,6 +116,7 @@ exports[`Storyshots Button Pending 1`] = `
role="img"
style={
Object {
"color": "#94959A",
"fontSize": 16,
}
}
Expand Down Expand Up @@ -249,7 +212,7 @@ exports[`Storyshots Input Default 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-6 container-d0-0-2-9"
className="container-0-2-5 container-d0-0-2-8"
>
<input
className="ant-input"
Expand All @@ -272,10 +235,10 @@ exports[`Storyshots Input Error 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-6 container-d5-0-2-15"
className="container-0-2-5 container-d5-0-2-14"
>
<input
className="ant-input error-0-2-7"
className="ant-input error-0-2-6"
data-test="input"
disabled={false}
onBlur={[Function]}
Expand All @@ -295,7 +258,7 @@ exports[`Storyshots Input Full Width 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-6 container-d4-0-2-14"
className="container-0-2-5 container-d4-0-2-13"
>
<input
className="ant-input"
Expand All @@ -318,13 +281,13 @@ exports[`Storyshots Input Loading 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-6 container-d3-0-2-12"
className="container-0-2-5 container-d3-0-2-11"
>
<div
className="inputSkeleton-0-2-8"
className="inputSkeleton-0-2-7"
>
<span
className="container-0-2-3 container-d1-0-2-13"
className="container-0-2-3 container-d1-0-2-12"
>
 
</span>
Expand All @@ -338,7 +301,7 @@ exports[`Storyshots Input Placeholder 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-6 container-d1-0-2-10"
className="container-0-2-5 container-d1-0-2-9"
>
<input
className="ant-input"
Expand Down Expand Up @@ -622,31 +585,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-16"
className="container-0-2-15"
>
<div
className="skeletonButton-0-2-18"
className="skeletonButton-0-2-17"
>
<span
className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
className="container-0-2-3 container-d2-0-2-18 skeleton-0-2-16"
>
 
</span>
</div>
<div
className="skeletonButton-0-2-18"
className="skeletonButton-0-2-17"
>
<span
className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
className="container-0-2-3 container-d3-0-2-19 skeleton-0-2-16"
>
 
</span>
</div>
<div
className="skeletonButton-0-2-18"
className="skeletonButton-0-2-17"
>
<span
className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
className="container-0-2-3 container-d4-0-2-20 skeleton-0-2-16"
>
 
</span>
Expand Down Expand Up @@ -749,10 +712,10 @@ exports[`Storyshots Select Default 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d0-0-2-27"
className="container-0-2-22 container-d0-0-2-26"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -845,10 +808,10 @@ exports[`Storyshots Select Full Width 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d2-0-2-29"
className="container-0-2-22 container-d2-0-2-28"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -895,7 +858,7 @@ exports[`Storyshots Select Full Width 1`] = `
className="ant-select-selection-item"
>
<div
className="option-0-2-26"
className="option-0-2-25"
>
<span>
Lorem
Expand Down Expand Up @@ -946,10 +909,10 @@ exports[`Storyshots Select Icon 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d1-0-2-28"
className="container-0-2-22 container-d1-0-2-27"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -996,10 +959,10 @@ exports[`Storyshots Select Icon 1`] = `
className="ant-select-selection-item"
>
<div
className="option-0-2-26"
className="option-0-2-25"
>
<span
className="icon-0-2-25"
className="icon-0-2-24"
>
<svg
fill="#7E8083"
Expand Down Expand Up @@ -1058,10 +1021,10 @@ exports[`Storyshots Select Search 1`] = `
className="storyWrapper-0-2-2"
>
<div
className="container-0-2-23 container-d3-0-2-30"
className="container-0-2-22 container-d3-0-2-29"
>
<div
className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow ant-select-show-search"
data-test="select"
onBlur={[Function]}
onFocus={[Function]}
Expand Down Expand Up @@ -1154,7 +1117,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
className="storyWrapper-0-2-2"
>
<span
className="container-0-2-3 container-d6-0-2-32"
className="container-0-2-3 container-d6-0-2-31"
>
 
</span>
Expand All @@ -1166,27 +1129,27 @@ exports[`Storyshots Skeleton Count 1`] = `
className="storyWrapper-0-2-2"
>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-32"
>
 
</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-32"
>
 
</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-32"
>
 
</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-32"
>
 
</span>
<span
className="container-0-2-3 container-d7-0-2-33"
className="container-0-2-3 container-d7-0-2-32"
>
 
</span>
Expand All @@ -1198,7 +1161,7 @@ exports[`Storyshots Skeleton Default 1`] = `
className="storyWrapper-0-2-2"
>
<span
className="container-0-2-3 container-d5-0-2-31"
className="container-0-2-3 container-d5-0-2-30"
>
 
</span>
Expand Down
32 changes: 0 additions & 32 deletions src/components/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { action } from '@storybook/addon-actions'
import { createUseStyles } from 'react-jss'
import GoogleOutlined from '@ant-design/icons/GoogleOutlined'
import React from 'react'
import { Button, ButtonProps } from '.'
import { Meta, Story } from '@storybook/react/types-6-0'
Expand Down Expand Up @@ -40,33 +38,3 @@ PrimaryDisabled.args = {
disabled: true,
primary: true
}

// Google Icon Button
const useStyles = createUseStyles({
google: {
'&:hover': {
backgroundColor: '#e36e60',
color: 'white'
},
backgroundColor: '#dd4b39',
border: 'none',
color: 'white'
}
})

const GoogleTemplate: Story<ButtonProps> = ({ ...args }: ButtonProps) => {
const classes = useStyles()
args.classes = [classes.google]
return (
<Button {...args}>
<GoogleOutlined />
{args.children}
</Button>
)
}

export const Google = GoogleTemplate.bind({})
Google.args = {
children: 'Sign in with Google',
classes: ['google']
}
26 changes: 25 additions & 1 deletion src/components/Button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,27 @@ import 'antd/lib/spin/style/index.css'
import { ButtonProps as AntDButtonProps } from 'antd/es/button'
import classnames from 'classnames'
import { CommonComponentProps } from '../types'
import { createUseStyles } from 'react-jss'
import { generateButtonStyles } from './utils'
import { getDataTestAttributeProp } from '../utils'
import { LoadingOutlined } from '@ant-design/icons'
import { Skeleton } from '../Skeleton'
import { Button as AntDButton, Spin } from 'antd'
import React, { FC, ReactNode } from 'react'
import { styleguide, ThemeType } from '../assets/styles'

const {
colors: { blacks }
} = styleguide

const { dark, light } = ThemeType

const useStyles = createUseStyles({
'@global': {
[`.${dark} button`]: generateButtonStyles(dark),
button: generateButtonStyles(light)
}
})

export interface ButtonProps extends CommonComponentProps {
/**
Expand Down Expand Up @@ -67,6 +83,8 @@ export const Button: FC<ButtonProps> = ({
type: primary ? 'primary' : 'default'
}

useStyles()

return loading ? (
<Skeleton height={skeletonHeight} width={skeletonWidth} />
) : (
Expand All @@ -78,7 +96,13 @@ export const Button: FC<ButtonProps> = ({
<span style={{ paddingRight: 8 }}>
<Spin
indicator={
<LoadingOutlined spin style={{ fontSize: 16 }} />
<LoadingOutlined
spin
style={{
color: blacks['lighten-50'],
fontSize: 16
}}
/>
}
/>
</span>
Expand Down
Loading

0 comments on commit b142745

Please sign in to comment.