fix: Add visual testing for inputs after form field promotion (#2963)

Add visual testing back in that were removed by accident during form field promotion [category:Components] Co-authored-by: manuel.carrera <[email protected]>
Workday · Oct 7, 2024 · 6e0e672 · 6e0e672
1 parent 56e4e94
commit 6e0e672
Show file tree

Hide file tree

Showing 7 changed files with 848 additions and 0 deletions.
diff --git a/modules/react/checkbox/stories/visualTesting.stories.tsx b/modules/react/checkbox/stories/visualTesting.stories.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react';
+
+import {
+  ComponentStatesTable,
+  permutateProps,
+  StaticStates,
+} from '@workday/canvas-kit-react/testing';
+import {customColorTheme} from '../../../../utils/storybook';
+
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+
+export default {
+  title: 'Testing/Inputs/Checkbox',
+  component: Checkbox,
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+  },
+};
+
+export const CheckboxStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={permutateProps(
+        {
+          checked: [
+            {value: true, label: 'Checked'},
+            {value: false, label: 'Unchecked'},
+          ],
+          indeterminate: [
+            {value: true, label: 'Indeterminate'},
+            {value: false, label: ''},
+          ],
+          error: [
+            {value: undefined, label: ''},
+            {value: Checkbox.ErrorType.Alert, label: 'Alert'},
+            {value: Checkbox.ErrorType.Error, label: 'Error'},
+          ],
+        },
+        props => {
+          if (props.indeterminate && !props.checked) {
+            return false;
+          }
+          return true;
+        }
+      )}
+      columnProps={permutateProps(
+        {
+          className: [
+            {label: 'Default', value: ''},
+            {label: 'Hover', value: 'hover'},
+            {label: 'Focus', value: 'focus'},
+            {label: 'Focus Hover', value: 'focus hover'},
+            {label: 'Active', value: 'active'},
+            {label: 'Active Hover', value: 'active hover'},
+          ],
+          disabled: [
+            {label: '', value: false},
+            {label: 'Disabled', value: true},
+          ],
+        },
+        props => {
+          if (props.disabled && !['', 'hover'].includes(props.className)) {
+            return false;
+          }
+          return true;
+        }
+      )}
+    >
+      {props => (
+        <Checkbox
+          {...props}
+          onChange={() => {}} // eslint-disable-line no-empty-function
+          label="Checkbox"
+        />
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const InverseCheckboxStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={permutateProps(
+        {
+          checked: [
+            {value: true, label: 'Checked'},
+            {value: false, label: 'Unchecked'},
+          ],
+          indeterminate: [
+            {value: true, label: 'Indeterminate'},
+            {value: false, label: ''},
+          ],
+          error: [
+            {value: undefined, label: ''},
+            {value: Checkbox.ErrorType.Alert, label: 'Alert'},
+            {value: Checkbox.ErrorType.Error, label: 'Error'},
+          ],
+        },
+        props => {
+          if (props.indeterminate && !props.checked) {
+            return false;
+          }
+          return true;
+        }
+      )}
+      columnProps={permutateProps(
+        {
+          className: [
+            {label: 'Default', value: ''},
+            {label: 'Hover', value: 'hover'},
+            {label: 'Focus', value: 'focus'},
+            {label: 'Focus Hover', value: 'focus hover'},
+            {label: 'Active', value: 'active'},
+            {label: 'Active Hover', value: 'active hover'},
+          ],
+          disabled: [
+            {label: '', value: false},
+            {label: 'Disabled', value: true},
+          ],
+        },
+        props => {
+          if (props.disabled && !['', 'hover'].includes(props.className)) {
+            return false;
+          }
+          return true;
+        }
+      )}
+    >
+      {props => (
+        <div style={{backgroundColor: '#0875e1', padding: '12px', borderRadius: '4px'}}>
+          <Checkbox
+            {...props}
+            onChange={() => {}} // eslint-disable-line no-empty-function
+            variant="inverse"
+            label="Checkbox"
+          />
+        </div>
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const CheckboxThemedStates = () => <CheckboxStates />;
+CheckboxThemedStates.parameters = {
+  canvasProviderDecorator: {
+    theme: customColorTheme,
+  },
+};
+
+export const InverseCheckboxThemedStates = () => <InverseCheckboxStates />;
+InverseCheckboxThemedStates.parameters = {
+  canvasProviderDecorator: {
+    theme: customColorTheme,
+  },
+};
diff --git a/modules/react/color-picker/stories/visualTesting.stories.tsx b/modules/react/color-picker/stories/visualTesting.stories.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+import {
+  ComponentStatesTable,
+  permutateProps,
+  StaticStates,
+} from '@workday/canvas-kit-react/testing';
+import {customColorTheme} from '../../../../utils/storybook';
+
+import {ColorInput} from '@workday/canvas-kit-react/color-picker';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default {
+  title: 'Testing/Inputs/Color Picker/Color Input',
+  component: ColorInput,
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+  },
+};
+
+export const ColorInputStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={permutateProps(
+        {
+          value: [
+            {value: '#005cb9', label: 'Hex Value'},
+            {value: '', label: 'No Value'},
+          ],
+          placeholder: [
+            {value: undefined, label: ''},
+            {value: '000', label: 'Placeholder'},
+          ],
+          showCheck: [
+            {value: undefined, label: ''},
+            {value: true, label: 'Checked'},
+          ],
+          error: [
+            {value: undefined, label: ''},
+            {value: 'alert', label: 'Alert'},
+            {value: 'error', label: 'Error'},
+          ],
+        },
+        props => {
+          if (props.value !== '' && props.placeholder) {
+            return false;
+          } else if (props.value === '' && props.showCheck) {
+            return false;
+          } else {
+            return true;
+          }
+        }
+      )}
+      columnProps={permutateProps(
+        {
+          className: [
+            {label: 'Default', value: ''},
+            {label: 'Hover', value: 'hover'},
+            {label: 'Focus', value: 'focus'},
+            {label: 'Focus Hover', value: 'focus hover'},
+            {label: 'Active', value: 'active'},
+            {label: 'Active Hover', value: 'active hover'},
+          ],
+          disabled: [
+            {label: '', value: false},
+            {label: 'Disabled', value: true},
+          ],
+        },
+        props => {
+          if (props.disabled && !['', 'hover'].includes(props.className)) {
+            return false;
+          }
+          return true;
+        }
+      )}
+    >
+      {props => (
+        <FormField error={props.error}>
+          <FormField.Input as={ColorInput} {...props} />
+        </FormField>
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const ColorInputThemedStates = () => <ColorInputStates />;
+ColorInputThemedStates.parameters = {
+  canvasProviderDecorator: {
+    theme: customColorTheme,
+  },
+};
diff --git a/modules/react/form-field/stories/visualTesting.stories.tsx b/modules/react/form-field/stories/visualTesting.stories.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  ComponentStatesTable,
+  permutateProps,
+  StaticStates,
+} from '@workday/canvas-kit-react/testing';
+import {customColorTheme} from '../../../../utils/storybook';
+
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+export default {
+  title: 'Testing/Inputs/Form Field',
+  component: FormField,
+  parameters: {
+    chromatic: {
+      disable: false,
+    },
+  },
+};
+
+export const FormFieldStates = () => (
+  <StaticStates>
+    <ComponentStatesTable
+      rowProps={[
+        {label: 'Required', props: {isRequired: true}},
+        {label: 'Horizontal Start', props: {orientation: 'horizontalStart'}},
+        {label: 'Grow', props: {grow: true}},
+        {label: 'Horizontal End', props: {orientation: 'horizontalEnd'}},
+      ]}
+      columnProps={permutateProps({
+        error: [
+          {value: undefined, label: 'Default'},
+          {value: 'alert', label: 'Alert'},
+          {value: 'error', label: 'Error'},
+        ],
+      })}
+    >
+      {props => (
+        <FormField {...props}>
+          <FormField.Label>Label</FormField.Label>
+          <FormField.Field>
+            <FormField.Input as={TextInput} />
+            <FormField.Hint>Helpful text goes here.</FormField.Hint>
+          </FormField.Field>
+        </FormField>
+      )}
+    </ComponentStatesTable>
+  </StaticStates>
+);
+
+export const FormFieldThemedStates = () => <FormFieldStates />;
+FormFieldThemedStates.parameters = {
+  canvasProviderDecorator: {
+    theme: customColorTheme,
+  },
+};