Merge pull request #337 from kiwicom/support-formlabel-in-prefix

UPDATE: ContactInput, NEW: Asterisk at label

src/FormLabel/__tests__/__snapshots__/index.test.js.snap

@@ -3,6 +3,7 @@
 exports[`FormLabel should match snapshot 1`] = `
 <Component
   className="FormLabel-kJFBRQ fuYBgg"
+  filled={false}
   theme={
     Object {
       "orbit": Object {

src/FormLabel/__tests__/index.test.js

@@ -5,7 +5,7 @@ import { shallow } from "enzyme";
 import FormLabel from "../index";
 
 describe("FormLabel", () => {
-  const component = shallow(<FormLabel>FormLabel</FormLabel>);
+  const component = shallow(<FormLabel filled={false}>FormLabel</FormLabel>);
 
   it("should match snapshot", () => {
     expect(component).toMatchSnapshot();

src/FormLabel/index.js

@@ -4,8 +4,23 @@ import styled from "styled-components";
 
 import defaultTokens from "../defaultTokens";
 
-const FormLabel = styled(({ className, children }) => (
-  <span className={className}>{children}</span>
+const StyledAsterisk = styled.span`
+  font-weight: ${({ theme }) => theme.orbit.fontWeightBold};
+  color: ${({ theme, filled }) =>
+    !filled ? theme.orbit.colorTextError : theme.orbit.colorFormLabelFilled};
+  font-size: ${({ theme }) => theme.orbit.fontSizeFormLabel}
+  vertical-align: top;
+`;
+
+StyledAsterisk.defaultProps = {
+  theme: defaultTokens,
+};
+
+const FormLabel = styled(({ className, children, required, filled }) => (
+  <span className={className}>
+    {required && <StyledAsterisk filled={filled}>* </StyledAsterisk>}
+    {children}
+  </span>
 ))`
   display: block;
   font-family: ${({ theme }) => theme.orbit.fontFamily};

src/FormLabel/index.js.flow

@@ -4,6 +4,7 @@ export type Props = {
   children: React$Node,
   filled?: boolean,
   disabled?: boolean,
+  required?: boolean,
 };
 
 declare export default React$ComponentType<Props>;

src/InputField/InputField.stories.js

@@ -11,6 +11,7 @@ import * as Icons from "../icons";
 import { SIZE_OPTIONS, TYPE_OPTIONS } from "./consts";
 import ButtonLink from "../ButtonLink";
 import TextLink from "../TextLink";
+import FormLabel from "../FormLabel";
 
 import InputField from "./index";
 
@@ -193,6 +194,66 @@ storiesOf("InputField", module)
       ],
     };
   })
+
+  .addWithChapters("Compact input", () => {
+    const value = text("Value", "");
+    const formLabelText = text("FormLabel", "FormLabel");
+    const placeholder = text("Placeholder", "Placeholder");
+    const required = boolean("required", false);
+    const error = text("Error", undefined);
+
+    return {
+      info: "Compact input with FormLabel as prefix",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <InputField
+                  prefix={filled => (
+                    <FormLabel filled={filled} required={required}>
+                      {formLabelText}
+                    </FormLabel>
+                  )}
+                  error={error}
+                  value={value}
+                  placeholder={placeholder}
+                  onChange={action("change")}
+                />
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
+  .addWithChapters("Required field", () => {
+    const label = text("Label", "Label");
+    const value = text("Value", "");
+    const required = boolean("required", true);
+    const placeholder = text("Placeholder", "Placeholder");
+
+    return {
+      info: "Some description about this type of InputField in general.",
+      chapters: [
+        {
+          sections: [
+            {
+              sectionFn: () => (
+                <InputField
+                  label={label}
+                  value={value}
+                  placeholder={placeholder}
+                  required={required}
+                  onChange={action("change")}
+                />
+              ),
+            },
+          ],
+        },
+      ],
+    };
+  })
   .addWithChapters("With Icon prefix", () => {
     const label = text("Label", "Label");
     const value = text("Value", "");
@@ -265,6 +326,7 @@ storiesOf("InputField", module)
     const disabled = boolean("Disabled", false);
     const maxValue = number("maxValue", undefined);
     const minValue = number("minValue", undefined);
+    const required = boolean("required", false);
     const maxLength = number("maxLength", undefined);
     const minLength = number("minLength", undefined);
 
@@ -282,6 +344,7 @@ storiesOf("InputField", module)
                   label={label}
                   value={value}
                   placeholder={placeholder}
+                  required={required}
                   prefix={Prefix && <Prefix />}
                   suffix={
                     Suffix && (

src/InputField/README.md

@@ -20,23 +20,24 @@ Table below contains all types of the props available in InputField component.
 | maxValue      | `number`          |              | Specifies the maximum value for the InputField.
 | minLength     | `number`          |              | Specifies the minimum number of characters allowed.
 | minValue      | `number`          |              | Specifies the minimum value for the InputField.
+| required      | `boolean`         |              | If true, the label is displayed as required.
 | name          | `string`          |              | The name for the InputField.
 | onChange      | `func`            |              | Function for handling onClick event.
 | onFocus       | `func`            |              | Function for handling onFocus event.
 | onBlur        | `func`            |              | Function for handling onBlur event.
 | placeholder   | `string`          |              | The placeholder of the InputField.
-| prefix        | `React.Node`      |              | The prefix component for the InputField. [See Functional specs](#functional-specs)
+| **prefix**    | [`enum`](#enum)   |              | The prefix component for the InputField. [See Functional specs](#functional-specs)
 | **size**      | [`enum`](#enum)   | `"normal"`   | The size of the InputField.
 | suffix        | `React.Node`      |              | The suffix component for the InputField.
 | **type**      | [`enum`](#enum)   | `"text"`     | The type of the InputField.
 | value         | `string`          |              | Specifies the value of the InputField.
 
 ### enum
 
-| type         | size        |
-| :----------- | :---------- |
-| `"text"`     | `"small"`   |
-| `"number"`   | `"normal"`  |
+| type         | size        | prefix       |
+| :----------- | :---------- | :----------  |
+| `"text"`     | `"small"`   | `React.Node` |
+| `"number"`   | `"normal"`  | `func`       |
 | `"email"`    |
 | `"password"` |
 
@@ -47,3 +48,12 @@ Table below contains all types of the props available in InputField component.
 * The color of the label will turn into cloud shade when the InputField has some filled value.
 
 * You can use `string` for currency InputField, or `React.Node` for InputField with icon.
+
+* if you want render label as prefix pass function with arg `filled` that returns `<FormLabel filled={filled} />` component, example:
+```
+prefix={filled => (
+  <FormLabel filled={filled} required>
+    Label
+  </FormLabel>
+)}
+```