feat #113 - Address PR comments

dassana-io · Oct 17, 2020 · 10cf6be · 10cf6be
1 parent 2631468
commit 10cf6be
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 107 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="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"
@@ -250,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"
@@ -273,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]}
@@ -296,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"
@@ -319,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>
@@ -339,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"
@@ -623,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>
@@ -750,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]}
@@ -846,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]}
@@ -896,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
@@ -947,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]}
@@ -997,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"
@@ -1059,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]}
@@ -1155,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>
@@ -1167,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>
@@ -1199,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>

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/utils.ts b/src/components/Button/utils.ts
@@ -1,14 +1,15 @@
 import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
 
-const { blacks } = styleguide.colors
+const { borderRadius, colors } = styleguide
+const { blacks } = colors
 
 const { dark, light } = ThemeType
 
 const buttonPalette = {
 	[dark]: {
-		color: blacks['lighten-30'],
+		color: blacks['lighten-50'],
 		disabledBgColor: blacks.base,
-		hoverColor: blacks['lighten-50'],
+		hoverColor: blacks['lighten-80'],
 		primaryBackgroundColor: blacks['lighten-30'],
 		primaryDisabledBgColor: blacks['lighten-10'],
 		primaryDisabledTextColor: blacks['darken-20'],
@@ -40,7 +41,7 @@ export const generateButtonStyles = (themeType: ThemeType) => {
 
 	const baseButtonStyles = {
 		borderColor: base.borderColor,
-		borderRadius: 4,
+		borderRadius,
 		color
 	}