= () => (
-
- );
- const component = mount(
-
-
-
- );
- const container = component.at(0).getDOMNode();
- expect(container.getAttribute('data-propspread')).toBe('test');
- component.unmount();
+ describe('when rendered with no inputId', () => {
+ it('the input should have a unique id', () => {
+ const label = 'Label';
+ const {container} = render(
+
+
+
+ );
+ const uniqueId = container.querySelector('input').getAttribute('id');
+ expect(container.querySelector('input')).toHaveAttribute('id', uniqueId);
+ });
});
});
diff --git a/modules/form-field/react/stories/stories.tsx b/modules/form-field/react/stories/stories.tsx
index 1d5373d0dc..3cdb973513 100644
--- a/modules/form-field/react/stories/stories.tsx
+++ b/modules/form-field/react/stories/stories.tsx
@@ -2,30 +2,94 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import withReadme from 'storybook-readme/with-readme';
-
-import {Label, Hint} from '../index';
+import FormField from '../lib/FormField';
+import {ComponentStatesTable, permutateProps} from '../../../../utils/storybook';
+import {StaticStates} from '@workday/canvas-kit-labs-react-core';
+import {TextInput} from '../../../text-input/react';
import README from '../README.md';
+import {FormFieldLabelPosition} from '../lib/types';
+
+const FormFieldStates = () => (
+
+
+ {props => (
+
+
+
+ )}
+
+
+);
-storiesOf('Components|Inputs/Form Field/React/Label', module)
- .addParameters({component: Label})
+storiesOf('Components|Inputs/Form Field/React', module)
+ .addParameters({component: FormField})
.addDecorator(withReadme(README))
.add('Default', () => (
-
+
+
+
))
- .add('Required', () => (
+ .add('Hint', () => (
-
+
+
+
- ));
-storiesOf('Components|Inputs/Form Field/React', module)
- .addParameters({component: Hint})
- .addDecorator(withReadme(README))
- .add('Hint', () => (
+ ))
+ .add('Hint Alert', () => (
- Hint
- Hint
- Hint
+
+
+
+
+ ))
+ .add('Hint Error', () => (
+
+
+
+
+
+ ))
+ .add('Label Required', () => (
+
+
+
+
));
+
+storiesOf('Components|Inputs/Form Field/React/Visual Testing', module)
+ .addParameters({
+ component: FormField,
+ chromatic: {
+ disable: false,
+ },
+ })
+ .addDecorator(withReadme(README))
+ .add('States', () => );