From ba0126373172c4d2c4afa0f0a935f4e184767365 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Thu, 2 Aug 2018 19:46:05 -0300 Subject: [PATCH] Adding TextField --- .../ui/components/TextField/TextField.css | 27 +++++++++ .../ui/components/TextField/TextField.mdx | 19 +++++++ .../components/TextField/TextField.spec.tsx | 15 +++++ .../ui/components/TextField/TextField.tsx | 56 +++++++++++++++++++ .../__snapshots__/TextField.spec.tsx.snap | 8 +++ .../client/ui/components/TextField/index.ts | 1 + src/core/client/ui/shared/typography.css | 11 +++- 7 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 src/core/client/ui/components/TextField/TextField.css create mode 100644 src/core/client/ui/components/TextField/TextField.mdx create mode 100644 src/core/client/ui/components/TextField/TextField.spec.tsx create mode 100644 src/core/client/ui/components/TextField/TextField.tsx create mode 100644 src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap create mode 100644 src/core/client/ui/components/TextField/index.ts diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css new file mode 100644 index 000000000..1dfd12305 --- /dev/null +++ b/src/core/client/ui/components/TextField/TextField.css @@ -0,0 +1,27 @@ +.root { + composes: textField from "talk-ui/shared/typography.css"; + position: relative; + display: inline-flex; + padding: 7px 10px; + box-sizing: border-box; + border-radius: 1px; +} + +.colorRegular { + backgroun-color: var(--palette-common-white); + color: var(--palette-common-black); + border: 1px solid var(--palette-grey-light); +} + +.colorError { + background-color: var(--palette-common-white); + border-color: var(--palette-error-main); + border: 2px solid #FA4643; +} + +.fullWidth { + display: block; + width: 100%; + box-sizing: border-box; +} + diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx new file mode 100644 index 000000000..e54c0f170 --- /dev/null +++ b/src/core/client/ui/components/TextField/TextField.mdx @@ -0,0 +1,19 @@ +--- +name: TextField +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import TextField from './TextField.tsx' +import Flex from '../Flex' + +## Basic Use + + + + + + + + + diff --git a/src/core/client/ui/components/TextField/TextField.spec.tsx b/src/core/client/ui/components/TextField/TextField.spec.tsx new file mode 100644 index 000000000..0b574cd1a --- /dev/null +++ b/src/core/client/ui/components/TextField/TextField.spec.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-ui/types"; + +import TextField from "./TextField"; + +it("renders correctly", () => { + const props: PropTypesOf = { + className: "custom", + defaultValue: "Hello World", + }; + const renderer = TestRenderer.create(); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx new file mode 100644 index 000000000..3162d62d4 --- /dev/null +++ b/src/core/client/ui/components/TextField/TextField.tsx @@ -0,0 +1,56 @@ +import cn from "classnames"; +import React from "react"; +import { StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import * as styles from "./TextField.css"; + +export interface TextFieldProps { + /** + * The content value of the component. + */ + defaultValue?: string; + /** + * The content value of the component. + */ + value?: string; + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + /** + * Color of the TextField + */ + color?: "regular" | "error"; + /* + * If set renders a full width button + */ + fullWidth?: boolean; +} + +const TextField: StatelessComponent = props => { + const { className, classes, color, fullWidth, value, ...rest } = props; + + const rootClassName = cn( + classes.root, + { + [classes.colorRegular]: color === "regular", + [classes.colorError]: color === "error", + [classes.fullWidth]: fullWidth, + }, + className + ); + + return ; +}; + +TextField.defaultProps = { + color: "regular", + fullWidth: false, +}; + +const enhanced = withStyles(styles)(TextField); +export default enhanced; diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap new file mode 100644 index 000000000..1f68a613c --- /dev/null +++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + +`; diff --git a/src/core/client/ui/components/TextField/index.ts b/src/core/client/ui/components/TextField/index.ts new file mode 100644 index 000000000..46581fed3 --- /dev/null +++ b/src/core/client/ui/components/TextField/index.ts @@ -0,0 +1 @@ +export { default } from "./TextField"; diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css index 4a67dda44..43ee2e78d 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -131,7 +131,16 @@ color: var(--palette-common-black); font-family: var(--font-family); font-weight: var(--font-weight-medium); - font-size: 16px; + font-size: calc(16rem / var(--rem-base)); line-height: normal; letter-spacing: calc(0.2em / 16); } + +.textField { + font-size: calc(16rem / var(--rem-base)); + font-weight: var(--font-weight-regular); + font-family: var(--font-family); + line-height: calc(18em / 16); + letter-spacing: calc(0.2em / 16); + color: var(--palette-text-primary); +}