v0.6.6 -> v0.7.0

jest.config.js

@@ -2,5 +2,6 @@ module.exports = {
 	collectCoverageFrom: ['lib/**/*.{ts,tsx,js,jsx}'],
 	coverageDirectory: 'coverage',
 	preset: 'ts-jest',
+	resetMocks: true,
 	testEnvironment: 'node'
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.6.6",
+	"version": "0.7.0",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
@@ -11,8 +11,8 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "^4.2.2",
-		"@dassana-io/web-utils": "^0.6.0",
-		"@storybook/addon-cssresources": "^6.0.27",
+		"@dassana-io/web-utils": "^0.7.2",
+		"@storybook/addon-cssresources": "^6.0.28",
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.5.0",
 		"@testing-library/react-hooks": "^3.4.2",
@@ -77,14 +77,14 @@
 		"@rollup/plugin-commonjs": "^15.1.0",
 		"@rollup/plugin-image": "^2.0.5",
 		"@rollup/plugin-node-resolve": "^9.0.0",
-		"@storybook/addon-actions": "^6.0.27",
-		"@storybook/addon-essentials": "^6.0.27",
-		"@storybook/addon-links": "^6.0.27",
-		"@storybook/addon-storyshots": "^6.0.27",
-		"@storybook/addons": "^6.0.27",
-		"@storybook/preset-create-react-app": "^3.1.4",
-		"@storybook/react": "^6.0.27",
-		"@storybook/theming": "^6.0.27",
+		"@storybook/addon-actions": "^6.0.28",
+		"@storybook/addon-essentials": "^6.0.28",
+		"@storybook/addon-links": "^6.0.28",
+		"@storybook/addon-storyshots": "^6.0.28",
+		"@storybook/addons": "^6.0.28",
+		"@storybook/preset-create-react-app": "^3.1.5",
+		"@storybook/react": "^6.0.28",
+		"@storybook/theming": "^6.0.28",
 		"@svgr/rollup": "^5.4.0",
 		"@types/bytes": "^3.1.0",
 		"@types/classnames": "^2.2.10",

src/__mocks__/table_mock_data.ts

@@ -8,16 +8,17 @@ import {
 const { component, number, string } = ColumnTypes
 const { none, byte, date, icon, link, toggle, tag } = ColumnFormats
 
-export interface DataType {
-	string: string
-	number: number
-	date: number
+export interface Data {
 	byte: number
-	tag: string
+	date: number
+	icon: string
+	icon_key: string
+	id: number
 	link: string
+	number: number
+	string: string
+	tag: string
 	toggle: boolean
-	icon_key: string
-	icon: string
 }
 
 export const dateFormat = 'MM/DD/YYYY'
@@ -94,12 +95,13 @@ const columns: ColumnType[] = [
 	}
 ]
 
-const data: DataType[] = [
+const data: Data[] = [
 	{
 		byte: 1024,
 		date: 1599193037581,
 		icon: 'test',
 		icon_key: 'dassana',
+		id: 0,
 		link: 'test',
 		number: 0,
 		string: 'Dassana',
@@ -108,6 +110,6 @@ const data: DataType[] = [
 	}
 ]
 
-const tableProps: TableProps<DataType> = { columns, data }
+const tableProps: TableProps<Data> = { columns, data }
 
 export default tableProps

src/components/Button/utils.ts

@@ -2,7 +2,7 @@ import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
 
 const {
 	borderRadius,
-	colors: { blacks }
+	colors: { blacks, grays }
 } = styleguide
 
 const { dark, light } = ThemeType
@@ -19,10 +19,10 @@ const buttonPalette = {
 	},
 	[light]: {
 		color: blacks['lighten-30'],
-		disabledBgColor: blacks['lighten-90'],
+		disabledBgColor: grays.base,
 		hoverColor: blacks['darken-20'],
 		primaryBackgroundColor: blacks.base,
-		primaryDisabledBgColor: blacks['lighten-90'],
+		primaryDisabledBgColor: grays.base,
 		primaryDisabledTextColor: blacks['lighten-80'],
 		primaryHoverBgColor: blacks['lighten-50']
 	}

src/components/Form/FieldLabel/index.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
 import { Skeleton } from 'components/Skeleton'
 import {
@@ -47,6 +48,7 @@ const useStyles = createUseStyles({
 })
 
 export interface FieldLabelProps {
+	classes?: string[]
 	fullWidth?: boolean
 	label: string
 	loading?: boolean
@@ -55,23 +57,26 @@ export interface FieldLabelProps {
 }
 
 const FieldLabel: FC<FieldLabelProps> = ({
+	classes = [],
 	fullWidth = false,
 	label,
 	loading = false,
 	required = false,
 	skeletonWidth = 100
 }: FieldLabelProps) => {
-	const classes = useStyles({ fullWidth })
+	const fieldLabelClasses = useStyles({ fullWidth })
 
 	return (
-		<div className={classes.container}>
+		<div className={cn({ [fieldLabelClasses.container]: true }, classes)}>
 			{loading ? (
 				<Skeleton width={skeletonWidth} />
 			) : (
 				<>
 					<span>{label}</span>
 					{!required && (
-						<span className={classes.optional}>Optional</span>
+						<span className={fieldLabelClasses.optional}>
+							Optional
+						</span>
 					)}
 				</>
 			)}

src/components/Form/Form.stories.tsx

@@ -45,6 +45,11 @@ const Template: Story<FormProps<UserModel>> = (args: FormProps<UserModel>) => (
 			name='severity'
 			options={basicOptions}
 		/>
+		<Form.Toggle
+			defaultChecked
+			label='Production Environment'
+			name='isProduction'
+		/>
 		<Form.Tree
 			label='Cloud Accounts'
 			name='defaultCheckedKeys'

src/components/Form/FormRadioGroup/FormRadioGroup.test.tsx

@@ -8,7 +8,7 @@ import FormRadioGroup, { FormRadioGroupProps } from './index'
 import { mount, ReactWrapper } from 'enzyme'
 
 jest.mock('react-hook-form', () => ({
-	...jest.requireActual('react-hook-form'),
+	...(jest.requireActual('react-hook-form') as {}),
 	Controller: () => <div />,
 	useFormContext: () => ({
 		control: jest.fn(),

src/components/Form/FormSelect/FormSelect.test.tsx

@@ -8,7 +8,7 @@ import FormSelect, { FormSelectProps } from './index'
 import { mount, ReactWrapper } from 'enzyme'
 
 jest.mock('react-hook-form', () => ({
-	...jest.requireActual('react-hook-form'),
+	...(jest.requireActual('react-hook-form') as {}),
 	Controller: () => <div />,
 	useFormContext: () => ({
 		control: jest.fn(),

src/components/Form/FormSubmitButton/FormSubmitButton.test.tsx

@@ -15,6 +15,7 @@ const getMockFormContext = (isDirty = true) =>
 		formState: {
 			isDirty
 		},
+		getValues: jest.fn() as any,
 		handleSubmit: (onSubmit: any) => onSubmit()
 	} as reactHookForm.UseFormMethods)
 

src/components/Form/FormSubmitButton/index.tsx

@@ -7,19 +7,22 @@ import React, { FC, useContext } from 'react'
 
 export interface FormButtonProps
 	extends Omit<ButtonProps, 'loading' | 'onClick'> {
-	isDisabled?: (formState: FormStateProxy) => boolean
+	isDisabled?: (
+		formState: FormStateProxy,
+		formValues: Record<string, any>
+	) => boolean
 }
 
 const FormSubmitButton: FC<FormButtonProps> = ({
 	isDisabled,
 	...rest
 }: FormButtonProps) => {
-	const { handleSubmit, formState } = useFormContext()
+	const { handleSubmit, formState, getValues } = useFormContext()
 	const { loading, onSubmit } = useContext(FieldContext)
 	const { isDirty } = formState
 
 	const isButtonDisabled = () =>
-		isDisabled ? isDisabled(formState) : !isDirty
+		isDisabled ? isDisabled(formState, getValues()) : !isDirty
 
 	useShortcut({
 		additionalConditionalFn: () => !isButtonDisabled(),

src/components/Form/FormToggle/FormToggle.test.tsx

@@ -0,0 +1,107 @@
+import { Controller } from 'react-hook-form'
+import FieldContext from '../FieldContext'
+import FieldLabel from '../FieldLabel'
+import React from 'react'
+import { Toggle } from 'components/Toggle'
+import FormToggle, { FormToggleProps } from './index'
+import { mount, ReactWrapper } from 'enzyme'
+
+jest.mock('react-hook-form', () => ({
+	...(jest.requireActual('react-hook-form') as {}),
+	Controller: () => <div />,
+	useFormContext: () => ({
+		control: jest.fn(),
+		errors: () => ({ foo: true })
+	})
+}))
+
+let wrapper: ReactWrapper<FormToggleProps>
+
+const mockOnSubmit = jest.fn()
+
+beforeEach(() => {
+	wrapper = mount(
+		<FieldContext.Provider
+			value={{
+				initialValues: { foo: true },
+				loading: true,
+				onSubmit: mockOnSubmit
+			}}
+		>
+			<FormToggle label='foo' name='foo' />
+		</FieldContext.Provider>
+	)
+})
+
+afterEach(() => {
+	jest.resetAllMocks()
+})
+
+describe('FormToggle', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('correctly passes a default value from initial values if it exists', () => {
+		expect(wrapper.find(Controller).props().defaultValue).toEqual(true)
+	})
+
+	it('correctly passes a default value from initial values if defaultChecked is true', () => {
+		wrapper = mount(
+			<FieldContext.Provider
+				value={{
+					initialValues: {},
+					loading: true,
+					onSubmit: mockOnSubmit
+				}}
+			>
+				<FormToggle defaultChecked label='foo' name='foo' />
+			</FieldContext.Provider>
+		)
+
+		expect(wrapper.find(Controller).props().defaultValue).toEqual(true)
+	})
+
+	it('should render a Toggle component', () => {
+		const mockOnChange = jest.fn()
+		const test = {
+			onChange: mockOnChange,
+			value: true
+		} as jest.Mocked<any>
+
+		const toggle = wrapper.find(Controller).invoke('render')!(test)
+
+		expect(toggle.type).toBe(Toggle)
+
+		toggle.props.onChange(true)
+
+		expect(mockOnChange).toHaveBeenCalled()
+	})
+
+	it('should not render the label with the default width if fullWidth is passed as true', () => {
+		const div = document.createElement('div')
+		div.setAttribute('id', 'container')
+		document.body.appendChild(div)
+
+		wrapper = mount(
+			<FieldContext.Provider
+				value={{
+					initialValues: {},
+					loading: true,
+					onSubmit: mockOnSubmit
+				}}
+			>
+				<FormToggle defaultChecked fullWidth label='foo' name='foo' />
+			</FieldContext.Provider>,
+			{
+				attachTo: document.getElementById('container')
+			}
+		)
+
+		const style = window.getComputedStyle(
+			wrapper.find(FieldLabel).getDOMNode()
+		)
+
+		expect(style.width).not.toEqual(255)
+	})
+})