feat - Input toggle link theming: Revamp input, toggle, link styles (#…

…115) * feat #114 - Update input global error class to scoped * feat #114 - Update input border radius, refac * feat #114 - Revamp toggle styles * feat #114 - Revamp link styles * feat #114 - Refac, address comments * feat #114 - Remove border from styleguide * feat #114 - Update toggle styles * feat #114 - Update colors, primary, sec colors in themes * feat #114 - Update link styles * feat #114 - Update FieldLabel styles
dassana-io · Oct 16, 2020 · 08c014d · 08c014d
1 parent ea8b7a1
commit 08c014d
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 122 deletions.
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
@@ -249,7 +249,7 @@ exports[`Storyshots Input Default 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d0-0-2-8"
+    className="container-0-2-6 container-d0-0-2-9"
   >
     <input
       className="ant-input"
@@ -272,10 +272,10 @@ exports[`Storyshots Input Error 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d5-0-2-14"
+    className="container-0-2-6 container-d5-0-2-15"
   >
     <input
-      className="ant-input error"
+      className="ant-input error-0-2-7"
       data-test="input"
       disabled={false}
       onBlur={[Function]}
@@ -295,7 +295,7 @@ exports[`Storyshots Input Full Width 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d4-0-2-13"
+    className="container-0-2-6 container-d4-0-2-14"
   >
     <input
       className="ant-input"
@@ -318,13 +318,13 @@ exports[`Storyshots Input Loading 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d3-0-2-11"
+    className="container-0-2-6 container-d3-0-2-12"
   >
     <div
-      className="inputSkeleton-0-2-7"
+      className="inputSkeleton-0-2-8"
     >
       <span
-        className="container-0-2-3 container-d1-0-2-12"
+        className="container-0-2-3 container-d1-0-2-13"
       >
          
       </span>
@@ -338,7 +338,7 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-6 container-d1-0-2-9"
+    className="container-0-2-6 container-d1-0-2-10"
   >
     <input
       className="ant-input"
@@ -622,31 +622,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-15"
+    className="container-0-2-16"
   >
     <div
-      className="skeletonButton-0-2-17"
+      className="skeletonButton-0-2-18"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-18 skeleton-0-2-16"
+        className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-17"
+      className="skeletonButton-0-2-18"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-19 skeleton-0-2-16"
+        className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-17"
+      className="skeletonButton-0-2-18"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-20 skeleton-0-2-16"
+        className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
       >
          
       </span>
@@ -749,10 +749,10 @@ exports[`Storyshots Select Default 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d0-0-2-26"
+    className="container-0-2-23 container-d0-0-2-27"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -845,10 +845,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d2-0-2-28"
+    className="container-0-2-23 container-d2-0-2-29"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -895,7 +895,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-25"
+            className="option-0-2-26"
           >
             <span>
               Lorem
@@ -946,10 +946,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d1-0-2-27"
+    className="container-0-2-23 container-d1-0-2-28"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -996,10 +996,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-25"
+            className="option-0-2-26"
           >
             <span
-              className="icon-0-2-24"
+              className="icon-0-2-25"
             >
               <svg
                 fill="#7E8083"
@@ -1058,10 +1058,10 @@ exports[`Storyshots Select Search 1`] = `
   className="storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-22 container-d3-0-2-29"
+    className="container-0-2-23 container-d3-0-2-30"
   >
     <div
-      className="ant-select dropdown-0-2-23 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1154,7 +1154,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-31"
+    className="container-0-2-3 container-d6-0-2-32"
   >
      
   </span>
@@ -1166,27 +1166,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-32"
+    className="container-0-2-3 container-d7-0-2-33"
   >
      
   </span>
@@ -1198,7 +1198,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-30"
+    className="container-0-2-3 container-d5-0-2-31"
   >
      
   </span>
@@ -1256,30 +1256,6 @@ exports[`Storyshots Tag Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Toggle Checked Disabled 1`] = `
-<div
-  className="storyWrapper-0-2-2"
->
-  <button
-    aria-checked={false}
-    className="ant-switch ant-switch-disabled"
-    data-test="toggle"
-    disabled={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    role="switch"
-    type="button"
-  >
-    <div
-      className="ant-switch-handle"
-    />
-    <span
-      className="ant-switch-inner"
-    />
-  </button>
-</div>
-`;
-
 exports[`Storyshots Toggle Default 1`] = `
 <div
   className="storyWrapper-0-2-2"

diff --git a/src/components/Form/FieldLabel/index.tsx b/src/components/Form/FieldLabel/index.tsx
@@ -1,13 +1,30 @@
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
-import { fontSizeRegular } from 'components/assets/styles/styleguide'
 import { Skeleton } from 'components/Skeleton'
+import { styleguide } from 'components/assets/styles/styleguide'
 import React, { FC } from 'react'
+import { themedStyles, ThemeType } from 'components/assets/styles/themes'
 
-const useStyles = createUseStyles({
-	container: {
-		fontSize: fontSizeRegular,
+const { dark, light } = ThemeType
+
+const { font } = styleguide
+
+export const generateFieldLabelStyles = (themeType: ThemeType) => {
+	const { base } = themedStyles[themeType]
+
+	return {
+		...font.body,
+		color: base.color,
 		paddingBottom: 5
+	}
+}
+
+const useStyles = createUseStyles({
+	'@global': {
+		[`.${dark}`]: {
+			'& $div': generateFieldLabelStyles(dark)
+		},
+		div: generateFieldLabelStyles(light)
 	},
 	required: {
 		'&::after': {
@@ -37,7 +54,6 @@ const FieldLabel: FC<FieldLabelProps> = ({
 	return (
 		<div
 			className={cn({
-				[classes.container]: true,
 				[classes.required]: required && !loading
 			})}
 		>

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -19,6 +19,7 @@ const useStyles = createUseStyles({
 	container: {
 		width: props => (props.fullWidth ? '100%' : defaultFieldWidth)
 	},
+	error: { ...fieldErrorStyles.error },
 	inputSkeleton: generateInputSkeletonStyles(light),
 	// eslint-disable-next-line sort-keys
 	'@global': {
@@ -68,7 +69,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 
 	const inputClasses: string = cn(
 		{
-			error
+			[componentClasses.error]: error
 		},
 		classes
 	)

diff --git a/src/components/Input/utils.ts b/src/components/Input/utils.ts
@@ -1,16 +1,22 @@
 import {
-	borderRadius,
-	fieldErrorStyles
+	fieldErrorStyles,
+	styleguide
 } from 'components/assets/styles/styleguide'
 import { themedStyles, ThemeType } from 'components/assets/styles/themes'
 
+const { borderRadius } = styleguide
+
 export const generateInputStyles = (themeType: ThemeType) => {
 	const { base, disabled, error, focus, hover, placeholder } = themedStyles[
 		themeType
 	]
 
 	return {
 		'&.ant-input': {
+			'&$error': {
+				...fieldErrorStyles.error,
+				borderColor: error.borderColor
+			},
 			'&::placeholder': {
 				color: placeholder.color
 			},
@@ -19,6 +25,7 @@ export const generateInputStyles = (themeType: ThemeType) => {
 			},
 			backgroundColor: base.backgroundColor,
 			borderColor: base.borderColor,
+			borderRadius,
 			color: base.color
 		},
 		'&.ant-input-disabled, &.ant-input[disabled]': {
@@ -30,17 +37,16 @@ export const generateInputStyles = (themeType: ThemeType) => {
 		'&.ant-input-focused, &.ant-input:focus': {
 			borderColor: focus.borderColor,
 			boxShadow: focus.boxShadow
-		},
-		'&.ant-input.error': { ...fieldErrorStyles.error, border: error.border }
+		}
 	}
 }
 
 export const generateInputSkeletonStyles = (themeType: ThemeType) => {
 	const { loading } = themedStyles[themeType]
 
 	return {
-		border: loading.border,
-		borderRadius: borderRadius,
+		border: `1px solid ${loading.borderColor}`,
+		borderRadius,
 		padding: '6px 14px'
 	}
 }
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -5,7 +5,8 @@ import { Meta, Story } from '@storybook/react/types-6-0'
 
 export default {
 	argTypes: {
-		children: { control: 'text' }
+		children: { control: 'text' },
+		classes: { control: 'array' }
 	},
 	component: Link,
 	title: 'Link'