fix(datepicker): pass error prop to Form.Field (#708)

* chore: revert eslint-plugin-prettier to v3

* chore: add error knob to Storybook

* fix(datepicker): pass error prop to Form.Field

Author: arthurdenner

package.json

@@ -56,7 +56,7 @@
     "babel-jest": "27.4.5",
     "babel-loader": "8.2.3",
     "cssnano": "4.1.11",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-prettier": "3.4.1",
     "husky": "7.0.4",
     "jest-transform-css": "3.0.0",
     "prettier": "2.5.1",

src/components/input.tsx

@@ -16,6 +16,7 @@ const inputData = {
 const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
   const {
     clearIcon,
+    error,
     icon,
     isClearIconVisible,
     label,
@@ -27,11 +28,12 @@ const CustomInput = React.forwardRef<Input, InputProps>((props, ref) => {
   } = props;
 
   return (
-    <Form.Field required={required}>
+    <Form.Field error={error} required={required}>
       {label && <label htmlFor={rest.id as string | undefined}>{label}</label>}
       <Input
         {...rest}
         ref={ref}
+        error={error}
         required={required}
         icon={
           <CustomIcon

stories/index.stories.tsx

@@ -109,25 +109,31 @@ export const withCustomIcons = () => {
   );
 };
 
-export const usageWithForm = () => (
-  <Content>
-    <Form>
-      <Form.Group width="equals">
-        <SemanticDatepicker
-          label="Initial date"
-          id="initialDate"
-          onChange={onChange}
-          required
-        />
-        <SemanticDatepicker
-          label="Final date"
-          id="finalDate"
-          onChange={onChange}
-        />
-      </Form.Group>
-    </Form>
-  </Content>
-);
+export const usageWithForm = () => {
+  const error = boolean('Error state', false);
+
+  return (
+    <Content>
+      <Form>
+        <Form.Group width="equals">
+          <SemanticDatepicker
+            error={error}
+            label="Initial date"
+            id="initialDate"
+            onChange={onChange}
+            required
+          />
+          <SemanticDatepicker
+            error={error}
+            label="Final date"
+            id="finalDate"
+            onChange={onChange}
+          />
+        </Form.Group>
+      </Form>
+    </Content>
+  );
+};
 
 export const inverted = () => {
   const type = select('Type', typeMap, typeMap.basic);

yarn.lock

@@ -5946,10 +5946,10 @@ eslint-plugin-jsx-a11y@^6.2.3:
     has "^1.0.3"
     jsx-ast-utils "^2.2.1"
 
-eslint-plugin-prettier@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
-  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+eslint-plugin-prettier@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz#e9ddb200efb6f3d05ffe83b1665a716af4a387e5"
+  integrity sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==
   dependencies:
     prettier-linter-helpers "^1.0.0"