diff --git a/package-lock.json b/package-lock.json index e2c77a532..f89274a76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16496,9 +16496,9 @@ "dev": true }, "popper.js": { - "version": "1.14.3", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz", - "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=", + "version": "1.14.4", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz", + "integrity": "sha1-juwdj/AqWjoVLdQ0FKFce3n9abY=", "dev": true }, "portfinder": { diff --git a/package.json b/package.json index afde65a13..9283410b5 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "react-dev-utils": "6.0.0-next.3e165448", "react-dom": "^16.4.0", "react-final-form": "^3.6.4", - "react-popper": "^1.0.0-beta.6", + "react-popper": "^1.0.0", "react-relay": "github:coralproject/patched#react-relay", "react-responsive": "^5.0.0", "react-test-renderer": "^16.4.1", diff --git a/src/core/client/ui/components/CallOut/CallOut.css b/src/core/client/ui/components/CallOut/CallOut.css new file mode 100644 index 000000000..2022383a5 --- /dev/null +++ b/src/core/client/ui/components/CallOut/CallOut.css @@ -0,0 +1,34 @@ +.root { + composes: bodyCopy from "talk-ui/shared/typography.css"; + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + padding: var(--spacing-unit); + box-sizing: border-box; + border-width: 1px; + border-style: solid; +} + +.colorRegular { + background-color: var(--palette-grey-lightest); + border-color: var(--palette-grey-light); + color: var(--palette-text-primary); +} + +.colorPrimary { + background-color: var(--palette-primary-lightest); + border-color: var(--palette-primary-light); + color: var(--palette-text-primary); +} + +.colorError { + background-color: var(--palette-error-lightest); + border-color: var(--palette-error-light); + color: var(--palette-text-primary); +} + +.fullWidth { + display: flex; + width: 100%; +} diff --git a/src/core/client/ui/components/CallOut/CallOut.mdx b/src/core/client/ui/components/CallOut/CallOut.mdx new file mode 100644 index 000000000..b3977a56a --- /dev/null +++ b/src/core/client/ui/components/CallOut/CallOut.mdx @@ -0,0 +1,23 @@ +--- +name: CallOut +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import CallOut from './CallOut' +import Flex from '../Flex' + +# CallOut + +## Basic Use + + + This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs. + This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs. + This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs. + The email address or password you entered is incorrect. Try again + The email address or password you entered is incorrect. Try again + + + + diff --git a/src/core/client/ui/components/CallOut/CallOut.spec.tsx b/src/core/client/ui/components/CallOut/CallOut.spec.tsx new file mode 100644 index 000000000..183e5acb5 --- /dev/null +++ b/src/core/client/ui/components/CallOut/CallOut.spec.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-ui/types"; + +import CallOut from "./CallOut"; + +it("renders correctly", () => { + const props: PropTypesOf = { + className: "custom", + color: "error", + children: "Hello World", + }; + const renderer = TestRenderer.create(); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/CallOut/CallOut.tsx b/src/core/client/ui/components/CallOut/CallOut.tsx new file mode 100644 index 000000000..11eccff2c --- /dev/null +++ b/src/core/client/ui/components/CallOut/CallOut.tsx @@ -0,0 +1,57 @@ +import cn from "classnames"; +import React from "react"; +import { ReactNode, StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import * as styles from "./CallOut.css"; + +export interface CallOutProps { + /** + * The content of the component. + */ + children: ReactNode; + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + /** + * Color of the CallOut + */ + color?: "regular" | "primary" | "error"; + /* + * If set renders a full width CallOut + */ + fullWidth?: boolean; +} + +const CallOut: StatelessComponent = props => { + const { className, classes, color, fullWidth, children, ...rest } = props; + + const rootClassName = cn( + classes.root, + { + [classes.colorRegular]: color === "regular", + [classes.colorError]: color === "error", + [classes.colorPrimary]: color === "primary", + [classes.fullWidth]: fullWidth, + }, + className + ); + + return ( +
+ {children} +
+ ); +}; + +CallOut.defaultProps = { + color: "regular", + fullWidth: false, +}; + +const enhanced = withStyles(styles)(CallOut); +export default enhanced; diff --git a/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap b/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap new file mode 100644 index 000000000..1891d1d73 --- /dev/null +++ b/src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+ Hello World +
+`; diff --git a/src/core/client/ui/components/CallOut/index.ts b/src/core/client/ui/components/CallOut/index.ts new file mode 100644 index 000000000..189466420 --- /dev/null +++ b/src/core/client/ui/components/CallOut/index.ts @@ -0,0 +1 @@ +export { default } from "./CallOut"; diff --git a/src/core/client/ui/components/InputLabel/InputLabel.css b/src/core/client/ui/components/InputLabel/InputLabel.css new file mode 100644 index 000000000..63d08ecce --- /dev/null +++ b/src/core/client/ui/components/InputLabel/InputLabel.css @@ -0,0 +1,3 @@ +.root { + display: block; +} diff --git a/src/core/client/ui/components/InputLabel/InputLabel.mdx b/src/core/client/ui/components/InputLabel/InputLabel.mdx new file mode 100644 index 000000000..8d7721ba7 --- /dev/null +++ b/src/core/client/ui/components/InputLabel/InputLabel.mdx @@ -0,0 +1,19 @@ +--- +name: InputLabel +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import InputLabel from './InputLabel.tsx' +import Flex from '../Flex' + +# InputLabel + +## Basic Use + + + Well... Hello there. + + + + diff --git a/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx b/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx new file mode 100644 index 000000000..7e1b87fac --- /dev/null +++ b/src/core/client/ui/components/InputLabel/InputLabel.spec.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-ui/types"; + +import InputLabel from "./InputLabel"; + +it("renders correctly", () => { + const props: PropTypesOf = { + className: "custom", + }; + const renderer = TestRenderer.create( + Hello + ); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/InputLabel/InputLabel.tsx b/src/core/client/ui/components/InputLabel/InputLabel.tsx new file mode 100644 index 000000000..5445d8ccd --- /dev/null +++ b/src/core/client/ui/components/InputLabel/InputLabel.tsx @@ -0,0 +1,36 @@ +import cn from "classnames"; +import React, { ReactNode } from "react"; +import { StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import Typography from "../Typography"; +import * as styles from "./InputLabel.css"; + +export interface InputLabelProps { + /** + * The content of the component. + */ + children?: ReactNode; + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; +} + +const InputLabelProps: StatelessComponent = props => { + const { className, children, classes, ...rest } = props; + + const rootClassName = cn(classes.root, className); + + return ( + + {children} + + ); +}; + +const enhanced = withStyles(styles)(InputLabelProps); +export default enhanced; diff --git a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap new file mode 100644 index 000000000..ec528e72d --- /dev/null +++ b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + +`; diff --git a/src/core/client/ui/components/InputLabel/index.ts b/src/core/client/ui/components/InputLabel/index.ts new file mode 100644 index 000000000..b5002b7c0 --- /dev/null +++ b/src/core/client/ui/components/InputLabel/index.ts @@ -0,0 +1 @@ +export { default } from "./InputLabel"; diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css index 7cbfed982..970a4ce29 100644 --- a/src/core/client/ui/components/TextField/TextField.css +++ b/src/core/client/ui/components/TextField/TextField.css @@ -1,8 +1,24 @@ .root { - composes: textField from "talk-ui/shared/typography.css"; - background: var(--palette-common-white); - border: 1px solid var(--palette-grey-lighter); + composes: inputText placeholderPseudo from "talk-ui/shared/typography.css"; + position: relative; + display: block; + padding: calc(0.5 * var(--spacing-unit)); box-sizing: border-box; border-radius: var(--round-corners); - padding: calc(0.5 * var(--spacing-unit)); +} + +.colorRegular { + background-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 var(--palette-error-darkest); +} + +.fullWidth { + width: 100%; } diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx index 82f1c474d..7fee8bea9 100644 --- a/src/core/client/ui/components/TextField/TextField.mdx +++ b/src/core/client/ui/components/TextField/TextField.mdx @@ -4,14 +4,17 @@ menu: UI Kit --- import { Playground, PropsTable } from 'docz' -import TextField from './TextField' +import TextField from './TextField.tsx' +import Flex from '../Flex' # TextField -`TextField` - -## Basic usage +## 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 index 57f26e7d1..1c7089c4a 100644 --- a/src/core/client/ui/components/TextField/TextField.tsx +++ b/src/core/client/ui/components/TextField/TextField.tsx @@ -1,17 +1,80 @@ import cn from "classnames"; -import React, { InputHTMLAttributes, StatelessComponent } from "react"; - +import React from "react"; +import { StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; import * as styles from "./TextField.css"; -interface TextFieldProps extends InputHTMLAttributes { - classes?: typeof styles; +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; + /** + * Placeholder + */ + placeholder?: string; + /** + * Mark as readonly + */ + readOnly?: boolean; } -const TextField: StatelessComponent = ({ - className, - ...rest -}) => { - return ; +const TextField: StatelessComponent = props => { + const { + className, + classes, + color, + fullWidth, + value, + placeholder, + ...rest + } = props; + + const rootClassName = cn( + classes.root, + { + [classes.colorRegular]: color === "regular", + [classes.colorError]: color === "error", + [classes.fullWidth]: fullWidth, + }, + className + ); + + return ( + + ); }; -export default TextField; +TextField.defaultProps = { + color: "regular", + fullWidth: false, + placeholder: "", +}; + +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..a277de918 --- /dev/null +++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + +`; diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css index 9f2a5b699..22d06c2ed 100644 --- a/src/core/client/ui/components/Typography/Typography.css +++ b/src/core/client/ui/components/Typography/Typography.css @@ -35,6 +35,10 @@ composes: buttonLarge from "talk-ui/shared/typography.css"; } +.inputLabel { + composes: inputLabel from "talk-ui/shared/typography.css"; +} + .timestamp { composes: timestamp from "talk-ui/shared/typography.css"; } diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx index a4ab393cc..5eeb3b8ee 100644 --- a/src/core/client/ui/components/Typography/Typography.tsx +++ b/src/core/client/ui/components/Typography/Typography.tsx @@ -14,6 +14,7 @@ type Variant = | "heading4" | "bodyCopy" | "bodyCopyBold" + | "inputLabel" | "timestamp"; // Based on Typography Component of Material UI. @@ -132,6 +133,7 @@ Typography.defaultProps = { heading4: "h1", bodyCopy: "p", bodyCopyBold: "p", + inputLabel: "label", timestamp: "span", }, noWrap: false, diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css new file mode 100644 index 000000000..b3d6a6290 --- /dev/null +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css @@ -0,0 +1,27 @@ +.root { + composes: alertMessage from "talk-ui/shared/typography.css"; + position: relative; + display: inline-flex; + justify-content: flex-start; + align-items: center; + padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit); + box-sizing: border-box; + border-radius: var(--round-corners); + border-left-width: calc(0.5 * var(--spacing-unit)); + border-left-style: solid; +} + +.colorError { + background-color: var(--palette-error-light); + border-color: var(--palette-error-darkest); + color: var(--palette-common-white); +} + +.fullWidth { + display: flex; + width: 100%; +} + +.icon { + margin-right: var(--spacing-unit); +} diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx new file mode 100644 index 000000000..35537e098 --- /dev/null +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx @@ -0,0 +1,20 @@ +--- +name: ValidationMessage +menu: UI Kit +--- + +import { Playground } from 'docz' +import ValidationMessage from './ValidationMessage.tsx' +import Flex from '../Flex' + +# ValidationMessage + +## Basic Use + + + Invalid characters. Try again + Account with this email address already exists. Try another email. + + + + diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx new file mode 100644 index 000000000..f336fb06e --- /dev/null +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-ui/types"; + +import ValidationMessage from "./ValidationMessage"; + +it("renders correctly", () => { + const props: PropTypesOf = { + className: "custom", + children: "Hello World", + }; + const renderer = TestRenderer.create(); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx new file mode 100644 index 000000000..f4c5406f7 --- /dev/null +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx @@ -0,0 +1,54 @@ +import cn from "classnames"; +import React from "react"; +import { ReactNode, StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import Icon from "../Icon"; +import * as styles from "./ValidationMessage.css"; + +export interface ValidationMessageProps { + /** + * The content of the component. + */ + children: ReactNode; + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + /* + * If set renders a full width message + */ + fullWidth?: boolean; +} + +const ValidationMessage: StatelessComponent = props => { + const { className, classes, fullWidth, children, ...rest } = props; + + const rootClassName = cn( + classes.root, + classes.colorError, + { + [classes.fullWidth]: fullWidth, + }, + className + ); + + return ( +
+ + warning + + {children} +
+ ); +}; + +ValidationMessage.defaultProps = { + fullWidth: false, +}; + +const enhanced = withStyles(styles)(ValidationMessage); +export default enhanced; diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap new file mode 100644 index 000000000..2a80be622 --- /dev/null +++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+ + warning + + Hello World +
+`; diff --git a/src/core/client/ui/components/ValidationMessage/index.ts b/src/core/client/ui/components/ValidationMessage/index.ts new file mode 100644 index 000000000..6fb76fcbc --- /dev/null +++ b/src/core/client/ui/components/ValidationMessage/index.ts @@ -0,0 +1 @@ +export { default, ValidationMessageProps } from "./ValidationMessage"; diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index f7366ddc1..81d32ebf7 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -3,11 +3,14 @@ export { default as Button } from "./Button"; export { default as ButtonIcon } from "./Button/ButtonIcon"; export { default as Typography } from "./Typography"; export { default as Popover } from "./Popover"; -export { default as TextField } from "./TextField"; export { default as RelativeTime } from "./RelativeTime"; export { default as UIContext, UIContextProps } from "./UIContext"; export { default as Flex } from "./Flex"; export { default as MatchMedia } from "./MatchMedia"; export { default as TrapFocus } from "./TrapFocus"; +export { default as ValidationMessage } from "./ValidationMessage"; +export { default as InputLabel } from "./InputLabel"; +export { default as TextField } from "./TextField"; +export { default as CallOut } from "./CallOut"; export { default as ClickOutside } from "./ClickOutside"; export { default as Popup } from "./Popup"; diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css index c81577465..677b168d2 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -59,33 +59,34 @@ .heading1 { font-size: calc(24rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(32em / 24); - letter-spacing: calc(0.2em / 16); + letter-spacing: calc(0.2em / 24); color: var(--palette-text-primary); } .heading2 { font-size: calc(20rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(24em / 20); + letter-spacing: calc(0.2em / 20); color: var(--palette-text-primary); } .heading3 { font-size: calc(18rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(20em / 18); - letter-spacing: calc(0.2em / 16); + letter-spacing: calc(0.2em / 18); color: var(--palette-text-primary); } .heading4 { font-size: calc(16rem / var(--rem-base)); font-weight: var(--font-weight-medium); - font-family: "Manuale"; + font-family: var(--font-family-serif); line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); color: var(--palette-text-primary); @@ -94,7 +95,7 @@ .bodyCopy { font-size: calc(16rem / var(--rem-base)); font-weight: var(--font-weight-regular); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); line-height: calc(18em / 16); letter-spacing: calc(0.2em / 16); color: var(--palette-text-primary); @@ -107,36 +108,72 @@ .button { color: var(--palette-text-secondary); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: 14px; - line-height: calc(18em / 16); - letter-spacing: calc(0.57em / 16); + font-size: calc(14rem / var(--rem-base)); + line-height: calc(18em / 14); + letter-spacing: calc(0.57em / 14); } .buttonLarge { color: var(--palette-text-secondary); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: 16px; + font-size: calc(16rem / var(--rem-base)); line-height: calc(20em / 16); letter-spacing: calc(0.57em / 16); } .timestamp { color: var(--palette-text-secondary); - font-family: "Source Sans Pro"; + font-family: var(--font-family-sans-serif); font-weight: var(--font-weight-medium); - font-size: 14px; - line-height: calc(18em / 16); - letter-spacing: calc(0.2em / 16); + font-size: calc(14rem / var(--rem-base)); + line-height: calc(18em / 14); + letter-spacing: 0; } -.textField { +.alertMessage { color: var(--palette-common-black); - font-family: "Source Sans Pro"; + 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); +} + +.inputText { font-weight: var(--font-weight-regular); - font-size: 16px; + font-family: var(--font-family-sans-serif); + font-size: calc(16rem / var(--rem-base)); line-height: calc(18em / 16); - letter-spacing: calc(0.57em / 16); + letter-spacing: calc(0.2em / 16); + color: var(--palette-text-primary); +} + +.inputLabel { + font-size: calc(18rem / var(--rem-base)); + font-weight: var(--font-weight-medium); + font-family: var(--font-family-serif); + line-height: calc(18em / 18); + letter-spacing: calc(0.2em / 18); + color: var(--palette-text-primary); +} + +.placeholder { + font-family: var(--font-family-sans-serif); + font-weight: var(--font-weight-regular); + font-size: calc(16rem / var(--rem-base)); + line-height: calc(20em / 16); + letter-spacing: 0; + color: var(--palette-grey-lighter); +} + +.placeholderPseudo::placeholder { + font-family: var(--font-family-sans-serif); + font-weight: var(--font-weight-regular); + font-size: calc(16rem / var(--rem-base)); + line-height: calc(20em / 16); + letter-spacing: 0; + color: var(--palette-grey-lighter); } diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts index a5ae14893..c6065ab2f 100644 --- a/src/core/client/ui/theme/variables.ts +++ b/src/core/client/ui/theme/variables.ts @@ -64,8 +64,8 @@ const variables = { roundCorners: "2px", /* Typography */ remBase: 16, - fontFamily: '"Source Sans Pro"', - fontSize: 16, + fontFamilySansSerif: '"Source Sans Pro"', + fontFamilySerif: '"Manuale"', fontWeightLight: 300, fontWeightRegular: 400, fontWeightMedium: 600, diff --git a/src/docs/forms.mdx b/src/docs/forms.mdx new file mode 100644 index 000000000..5667d6f78 --- /dev/null +++ b/src/docs/forms.mdx @@ -0,0 +1,52 @@ +--- +name: Forms +route: '/forms' +--- + +# Forms + +Let's build some forms! We will use the following compoenents `InputLabel`, `Typography`, `TextField`, `ValidationMessage` + +### Examples + +import { Playground, PropsTable } from 'docz' +import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components' + +# InputLabel + +## Simple Form + + + Sign up to join the conversation + Email Address + + Username + A unique identifier displayed on your comments. You may use “_” and “.” + + Password + Must be at least 8 characters + + Confirm Password + + + + + +## Simple Form with error + + + Sign up to join the conversation + Email Address + + Username + A unique identifier displayed on your comments. You may use “_” and “.” + + Invalid characters. Try again. + Password + Must be at least 8 characters + + Confirm Password + + + +