feat #113 - Button theming (#117)

* 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 <github-actions@users.noreply.github.com>
dassana-io · Oct 17, 2020 · e19abfe · e19abfe
1 parent d7d934e
commit e19abfe
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 105 deletions.
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
@@ -77,44 +77,6 @@ exports[`Storyshots Button Disabled 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button Google 1`] = `
-<div
-  className="light 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="light storyWrapper-0-2-2"
@@ -154,6 +116,7 @@ exports[`Storyshots Button Pending 1`] = `
           role="img"
           style={
             Object {
+              "color": "#94959A",
               "fontSize": 16,
             }
           }
@@ -249,7 +212,7 @@ exports[`Storyshots Input Default 1`] = `
   className="light 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"
@@ -272,10 +235,10 @@ exports[`Storyshots Input Error 1`] = `
   className="light 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]}
@@ -295,7 +258,7 @@ exports[`Storyshots Input Full Width 1`] = `
   className="light 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"
@@ -318,13 +281,13 @@ exports[`Storyshots Input Loading 1`] = `
   className="light 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>
@@ -338,7 +301,7 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="light 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"
@@ -622,31 +585,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="light 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>
@@ -749,10 +712,10 @@ exports[`Storyshots Select Default 1`] = `
   className="light 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]}
@@ -845,10 +808,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="light 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]}
@@ -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
@@ -946,10 +909,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="light 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]}
@@ -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"
@@ -1058,10 +1021,10 @@ exports[`Storyshots Select Search 1`] = `
   className="light 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]}
@@ -1154,7 +1117,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="light 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>
@@ -1166,27 +1129,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="light 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>
@@ -1198,7 +1161,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="light 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>

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -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'
@@ -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']
-}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -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 {
 	/**
@@ -67,6 +83,8 @@ export const Button: FC<ButtonProps> = ({
 		type: primary ? 'primary' : 'default'
 	}
 
+	useStyles()
+
 	return loading ? (
 		<Skeleton height={skeletonHeight} width={skeletonWidth} />
 	) : (
@@ -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>