Skip to content
This repository has been archived by the owner on Jan 20, 2022. It is now read-only.

Commit

Permalink
accept helperIcon and error boolean instead of exported message compo…
Browse files Browse the repository at this point in the history 
…nents
  • Loading branch information
@mayakoneval
mayakoneval committed Aug 9, 2019
1 parent 53d57e3 commit abe46a5
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 163 deletions.
185 changes: 101 additions & 84 deletions src/Input/Input.story.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
/** @jsx jsx */
import { jsx } from "@emotion/core";
import { storiesOf } from "@storybook/react";
import { Input, InfoMessage, ErrorMessage } from "./Input";
import { Input } from "./Input";
import { action } from "@storybook/addon-actions";
import { DemoSection } from "../shared/DemoSection";
import React, { ComponentProps, cloneElement } from "react";
import * as typography from "../typography";
import { colors } from "../colors";
import { Stepper } from "./Stepper";
import { IconSearch } from "../icons/IconSearch";
import { IconInfoSolid } from "../icons/IconInfoSolid";
import { IconAlertSolid } from "../icons/IconAlertSolid";

const VerticalInputGroup: React.FC<{
inputProps?: Partial<Omit<ComponentProps<typeof Input>, "children">>;
Expand Down Expand Up @@ -74,38 +76,41 @@ storiesOf("Input", module).add("Catalog", () => (
description="Small input is small in terms of height and type size. Padding is less both top and bottom as well."
>
<Input
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Placeholder Text",
}}
size="small"
label="Small input"
placeholder="Placeholder Text"
/>
</VerticalInputGroup>
<VerticalInputGroup
title="Standard Input"
description="Most common input. Start here when trying to create a form."
>
<Input
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Placeholder Text",
}}
size="standard"
label="Standard input"
placeholder="Placeholder Text"
/>
</VerticalInputGroup>
<VerticalInputGroup
title="Large Input"
description="This will likely be used in situations where there is a lot of whitespace or in a special workflow."
>
<Input
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Placeholder Text",
}}
size="large"
label="Large input"
placeholder="Placeholder Text"
/>
</VerticalInputGroup>
</DemoSection>
Expand All @@ -115,45 +120,50 @@ storiesOf("Input", module).add("Catalog", () => (
description="Standard input states."
>
<Input
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Resting",
}}
label="Standard input"
size="standard"
placeholder="Resting"
/>
<Input
data-force-hover-state={true}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Hover",
}}
size="standard"
placeholder="Hover"
/>
<Input
data-force-focus-state={true}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Focused",
}}
size="standard"
placeholder="Focused"
/>
<Input
data-force-focus-state={true}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Placeholder Text",
value: "Focused and typing",
}}
size="standard"
placeholder="Placeholder Text"
initialValue="Focused and typing"
/>
<Input
disabled={true}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Disabled",
}}
size="standard"
placeholder="Disabled"
/>
</VerticalInputGroup>
<VerticalInputGroup
Expand All @@ -163,16 +173,17 @@ storiesOf("Input", module).add("Catalog", () => (
>
<div css={{ width: "66%" }}>
<Input
placeholder="Ex. stark-industries or wayne-enterprises"
size="large"
helperText={
<InfoMessage>
Your organization ID can’t contain any special characters or
spaces.
</InfoMessage>
}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Ex. stark-industries or wayne-enterprises",
}}
helperText="Your organization ID can’t contain any special characters or spaces."
helperIcon={
<IconInfoSolid
css={{ color: colors.blue.base, width: 16, height: 16 }}
/>
}
label="Text Input Label"
description="Keep it simple, your organization ID is a unique identifier. Don’t worry, you can always change it later."
Expand All @@ -186,31 +197,29 @@ storiesOf("Input", module).add("Catalog", () => (
description="Errors are a variant of helper text with a specific type of information to communicate, for example, errors."
>
<Input
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
value: "Apollo*",
}}
label="Your ID"
size="standard"
initialValue="Apollo*"
error={true}
helperText={
<ErrorMessage>
Your ID can’t contain special characters.
</ErrorMessage>
}
helperText="Your ID can’t contain special characters."
/>
<Input
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
value: "Apollo",
}}
label="Your ID"
size="standard"
initialValue="Apollo"
helperText={
<InfoMessage>
Your organization ID can’t contain any special characters or
spaces.
</InfoMessage>
helperText="Your organization ID can’t contain any special characters or spaces."
helperIcon={
<IconInfoSolid
css={{ color: colors.blue.base, width: 16, height: 16 }}
/>
}
/>
</VerticalInputGroup>
Expand Down Expand Up @@ -283,8 +292,11 @@ storiesOf("Input", module).add("Catalog", () => (
<Stepper
initialValue={10}
max={20}
helperText={
<ErrorMessage>All your seats are filled</ErrorMessage>
helperText="All your seats are filled"
helperIcon={
<IconAlertSolid
css={{ width: 16, height: 16, color: colors.blue.base }}
/>
}
error={true}
onChange={number =>
Expand All @@ -309,10 +321,11 @@ storiesOf("Input", module).add("Catalog", () => (
}}
/>
}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
placeholder="Resting"
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Resting",
}}
/>
<Input
data-force-hover-state={true}
Expand All @@ -326,10 +339,11 @@ storiesOf("Input", module).add("Catalog", () => (
}}
/>
}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
placeholder="Hover"
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Hover",
}}
/>
<Input
data-force-focus-state={true}
Expand All @@ -343,14 +357,14 @@ storiesOf("Input", module).add("Catalog", () => (
}}
/>
}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
placeholder="Focused"
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Focused",
}}
/>
<Input
data-force-focus-state={true}
initialValue="Focused and typing"
icon={
<IconSearch
css={{
Expand All @@ -361,10 +375,12 @@ storiesOf("Input", module).add("Catalog", () => (
}}
/>
}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
placeholder="Focused and typing"
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Focused and typing",
value: "Focused and typing",
}}
/>
<Input
disabled={true}
Expand All @@ -378,10 +394,11 @@ storiesOf("Input", module).add("Catalog", () => (
}}
/>
}
onChange={e =>
action(`the text in this input is now ${e.target.value}`)
}
placeholder="Disabled"
inputProps={{
onChange: (e: Input) =>
action(`the text in this input is now ${e.target.value}`),
placeholder: "Disabled",
}}
/>
</VerticalInputGroup>
</DemoSection>
Expand Down
Loading

0 comments on commit abe46a5

Please sign in to comment.