From 6648dfe492b4859518b2a6283354028b4cc20a29 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 13 Aug 2018 12:59:53 -0300 Subject: [PATCH] Adding InputDescription Component --- src/core/client/auth/components/SignUp.tsx | 15 +++---- .../stream/components/PostCommentForm.tsx | 8 ++-- .../client/stream/components/PoweredBy.css | 3 -- .../InputDescription/InputDescription.mdx | 26 ++---------- .../InputDescription/InputDescription.tsx | 41 +++++-------------- src/core/client/ui/components/index.ts | 1 + src/core/client/ui/shared/typography.css | 8 ++-- 7 files changed, 31 insertions(+), 71 deletions(-) delete mode 100644 src/core/client/stream/components/PoweredBy.css diff --git a/src/core/client/auth/components/SignUp.tsx b/src/core/client/auth/components/SignUp.tsx index d4c8a7d55..76f7d952a 100644 --- a/src/core/client/auth/components/SignUp.tsx +++ b/src/core/client/auth/components/SignUp.tsx @@ -16,6 +16,7 @@ import { Button, Flex, FormField, + InputDescription, InputLabel, TextField, Typography, @@ -36,7 +37,7 @@ export interface SignUpForm { const SignUp: StatelessComponent = props => { return (
- {({ handleSubmit, submitting }) => ( + {({ handleSubmit, submitting, invalid }) => ( @@ -74,10 +75,10 @@ const SignUp: StatelessComponent = props => { {({ input, meta }) => ( Username - + A unique identifier displayed on your comments. You may use “_” and “.” - + = props => { {({ input, meta }) => ( Password - + Must be at least 8 characters - + = props => { {({ input, meta }) => ( Confirm Password - + Must be at least 8 characters - + = props => ( fullWidth size="large" > - Sign In and join the conversation + Sign in and join the conversation )} diff --git a/src/core/client/stream/components/PoweredBy.css b/src/core/client/stream/components/PoweredBy.css deleted file mode 100644 index 25c884af5..000000000 --- a/src/core/client/stream/components/PoweredBy.css +++ /dev/null @@ -1,3 +0,0 @@ -.text { - font-size: calc(14rem / var(--rem-base)); -} diff --git a/src/core/client/ui/components/InputDescription/InputDescription.mdx b/src/core/client/ui/components/InputDescription/InputDescription.mdx index 3dc055085..c27a460be 100644 --- a/src/core/client/ui/components/InputDescription/InputDescription.mdx +++ b/src/core/client/ui/components/InputDescription/InputDescription.mdx @@ -1,36 +1,18 @@ --- -name: FormField +name: InputDescription menu: UI Kit --- import { Playground, PropsTable } from 'docz' -import FormField from './FormField' -import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components' +import { InputDescription } from '../core/client/ui/components' # Flex -`FormField` is to be used with Form Components `flexbox`. - -## Justify content - - - - +`InputDescription` is to be used with Form Components. ## Align items - - - - - - -## Direction - - - - - + This is a description diff --git a/src/core/client/ui/components/InputDescription/InputDescription.tsx b/src/core/client/ui/components/InputDescription/InputDescription.tsx index fe5b6dd7b..d36d5fe7a 100644 --- a/src/core/client/ui/components/InputDescription/InputDescription.tsx +++ b/src/core/client/ui/components/InputDescription/InputDescription.tsx @@ -1,43 +1,24 @@ -import cn from "classnames"; -import React, { ReactNode } from "react"; -import { StatelessComponent } from "react"; +import React, { ReactNode, StatelessComponent } from "react"; +import { Typography } from "talk-ui/components"; -import { withStyles } from "talk-ui/hocs"; - -import * as styles from "./FormField.css"; - -interface InnerProps { +interface InputDescriptionProps { children: ReactNode; - classes: typeof styles; id?: string; className?: string; - itemGutter?: boolean | "half"; } -const FormField: StatelessComponent = props => { - const { classes, className, children, itemGutter, ...rest } = props; - - // TODO (bc): Use flex component once the extra div issue is solved. +const InputDescription: StatelessComponent = props => { + const { className, children, ...rest } = props; return ( -
{children} -
+ ); }; -FormField.defaultProps = { - itemGutter: true, -}; - -const enhanced = withStyles(styles)(FormField); -export default enhanced; +export default InputDescription; diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index 6b8e15d7f..76efab87c 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -15,3 +15,4 @@ export { default as CallOut } from "./CallOut"; export { default as ClickOutside } from "./ClickOutside"; export { default as Popup } from "./Popup"; export { default as FormField } from "./FormField"; +export { default as InputDescription } from "./InputDescription"; diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css index 990004923..ba367cc44 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -137,9 +137,9 @@ color: var(--palette-common-black); font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: calc(16rem / var(--rem-base)); - line-height: calc(16em / 16); - letter-spacing: calc(-0.1em / 16); + font-size: calc(14rem / var(--rem-base)); + line-height: calc(20em / 16); + letter-spacing: calc(0.2em / 16); } .inputText { @@ -163,7 +163,7 @@ .inputDescription { font-size: calc(14rem / var(--rem-base)); font-weight: var(--font-weight-regular); - font-family: var(--font-family); + font-family: var(--font-family-sans-serif); line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); color: var(--palette-text-secondary);