From f8e9b5dd50e39e983b4adf9ec14b4c31cc8a910c Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Fri, 20 Jul 2018 10:46:48 -0300 Subject: [PATCH] Harmonize typography --- .../__snapshots__/Username.spec.tsx.snap | 4 +- src/core/client/stream/components/Indent.css | 2 +- .../stream/components/PostCommentForm.css | 2 +- .../test/__snapshots__/loadMore.spec.tsx.snap | 24 ++++---- .../__snapshots__/renderReplies.spec.tsx.snap | 18 +++--- .../__snapshots__/renderStream.spec.tsx.snap | 10 ++-- .../showAllReplies.spec.tsx.snap | 24 ++++---- .../client/ui/components/Button/Button.css | 22 ++++---- .../components/RelativeTime/RelativeTime.css | 2 +- .../ui/components/Typography/Typography.css | 28 ++++------ .../ui/components/Typography/Typography.mdx | 56 +++++++++++++++++++ .../components/Typography/Typography.spec.tsx | 20 +++++++ .../ui/components/Typography/Typography.tsx | 26 ++++----- .../__snapshots__/Typography.spec.tsx.snap | 9 +++ src/core/client/ui/shared/typography.css | 14 +---- src/core/client/ui/theme/variables.ts | 2 +- 16 files changed, 161 insertions(+), 102 deletions(-) create mode 100644 src/core/client/ui/components/Typography/Typography.mdx create mode 100644 src/core/client/ui/components/Typography/Typography.spec.tsx create mode 100644 src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap diff --git a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap index ab0e141e6..54224f9b0 100644 --- a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap +++ b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap @@ -2,7 +2,7 @@ exports[`renders correctly on big screens 1`] = ` Marvin @@ -10,7 +10,7 @@ exports[`renders correctly on big screens 1`] = ` exports[`renders correctly on small screens 1`] = ` Marvin diff --git a/src/core/client/stream/components/Indent.css b/src/core/client/stream/components/Indent.css index c675b03a6..d779d93e0 100644 --- a/src/core/client/stream/components/Indent.css +++ b/src/core/client/stream/components/Indent.css @@ -4,5 +4,5 @@ } .level0 { - border-color: var(--palette-secondary-darkest); + border-color: var(--palette-grey-darkest); } diff --git a/src/core/client/stream/components/PostCommentForm.css b/src/core/client/stream/components/PostCommentForm.css index df045285d..7e3ef2e15 100644 --- a/src/core/client/stream/components/PostCommentForm.css +++ b/src/core/client/stream/components/PostCommentForm.css @@ -1,5 +1,5 @@ .textarea { - composes: body1 from "talk-ui/shared/typography.css"; + composes: bodyCopy from "talk-ui/shared/typography.css"; display: block; height: 100px; diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap index 2dfb892fb..83651f7d6 100644 --- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`loads more comments 1`] = ` className="Stream-root" >

Talk NEO

@@ -57,7 +57,7 @@ exports[`loads more comments 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -70,7 +70,7 @@ exports[`loads more comments 1`] = `

Joining Too

@@ -86,7 +86,7 @@ exports[`loads more comments 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Lukas @@ -99,7 +99,7 @@ exports[`loads more comments 1`] = `

What's up?

@@ -115,7 +115,7 @@ exports[`loads more comments 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Isabelle @@ -128,7 +128,7 @@ exports[`loads more comments 1`] = `

Hey!

@@ -147,7 +147,7 @@ exports[`renders comment stream 1`] = ` className="Stream-root" >

Talk NEO

@@ -196,7 +196,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -209,7 +209,7 @@ exports[`renders comment stream 1`] = `

Joining Too

@@ -225,7 +225,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Lukas @@ -238,7 +238,7 @@ exports[`renders comment stream 1`] = `

What's up?

diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap index badf42b74..e0ae72400 100644 --- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`renders comment stream 1`] = ` className="Stream-root" >

Talk NEO

@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -70,7 +70,7 @@ exports[`renders comment stream 1`] = `

Joining Too

@@ -86,7 +86,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -99,7 +99,7 @@ exports[`renders comment stream 1`] = `

I like yoghurt

@@ -119,7 +119,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -132,7 +132,7 @@ exports[`renders comment stream 1`] = `

Joining Too

@@ -144,7 +144,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Lukas @@ -157,7 +157,7 @@ exports[`renders comment stream 1`] = `

What's up?

diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap index 345e6d7fb..ec9d09a32 100644 --- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`renders comment stream 1`] = ` className="Stream-root" >

Talk NEO

@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -70,7 +70,7 @@ exports[`renders comment stream 1`] = `

Joining Too

@@ -86,7 +86,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Lukas @@ -99,7 +99,7 @@ exports[`renders comment stream 1`] = `

What's up?

diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap index d902e970a..d904af123 100644 --- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`renders comment stream 1`] = ` className="Stream-root" >

Talk NEO

@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -70,7 +70,7 @@ exports[`renders comment stream 1`] = `

Joining Too

@@ -90,7 +90,7 @@ exports[`renders comment stream 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Lukas @@ -103,7 +103,7 @@ exports[`renders comment stream 1`] = `

What's up?

@@ -139,7 +139,7 @@ exports[`show all replies 1`] = ` className="Stream-root" >

Talk NEO

@@ -188,7 +188,7 @@ exports[`show all replies 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Markus @@ -201,7 +201,7 @@ exports[`show all replies 1`] = `

Joining Too

@@ -221,7 +221,7 @@ exports[`show all replies 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Lukas @@ -234,7 +234,7 @@ exports[`show all replies 1`] = `

What's up?

@@ -246,7 +246,7 @@ exports[`show all replies 1`] = ` className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn" > Isabelle @@ -259,7 +259,7 @@ exports[`show all replies 1`] = `

Hey!

diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css index ee57301a2..2e2171d55 100644 --- a/src/core/client/ui/components/Button/Button.css +++ b/src/core/client/ui/components/Button/Button.css @@ -46,7 +46,7 @@ .variantRegular { &.colorRegular { - color: var(--palette-secondary-main); + color: var(--palette-grey-main); } &.colorPrimary { color: var(--palette-primary-main); @@ -61,10 +61,10 @@ &:not(.disabled) { &.colorRegular { &.mouseHover { - color: var(--palette-secondary-light); + color: var(--palette-grey-light); } &:active { - color: var(--palette-secondary-lighter); + color: var(--palette-grey-lighter); } } &.colorPrimary { @@ -97,7 +97,7 @@ .variantFilled { color: var(--palette-common-white); &.colorRegular { - background-color: var(--palette-secondary-main); + background-color: var(--palette-grey-main); } &.colorPrimary { background-color: var(--palette-primary-main); @@ -112,10 +112,10 @@ &:not(.disabled) { &.colorRegular { &.mouseHover { - background-color: var(--palette-secondary-light); + background-color: var(--palette-grey-light); } &:active { - background-color: var(--palette-secondary-lighter); + background-color: var(--palette-grey-lighter); } } &.colorPrimary { @@ -147,7 +147,7 @@ .variantOutlined { &.colorRegular { - color: var(--palette-secondary-main); + color: var(--palette-grey-main); border: 1px solid currentColor; } &.colorPrimary { @@ -166,11 +166,11 @@ &:not(.disabled) { &.colorRegular { &.mouseHover { - color: var(--palette-secondary-light); + color: var(--palette-grey-light); border: 1px solid currentColor; } &:active { - color: var(--palette-secondary-lighter); + color: var(--palette-grey-lighter); border: 1px solid currentColor; } } @@ -209,7 +209,7 @@ .variantGhost { &.colorRegular { - color: var(--palette-secondary-main); + color: var(--palette-grey-main); } &.colorPrimary { color: var(--palette-primary-main); @@ -228,7 +228,7 @@ } &:active { color: var(--palette-common-white); - background-color: var(--palette-secondary-main); + background-color: var(--palette-grey-main); } } &.colorPrimary { diff --git a/src/core/client/ui/components/RelativeTime/RelativeTime.css b/src/core/client/ui/components/RelativeTime/RelativeTime.css index 3faa5e162..e0450679f 100644 --- a/src/core/client/ui/components/RelativeTime/RelativeTime.css +++ b/src/core/client/ui/components/RelativeTime/RelativeTime.css @@ -1,4 +1,4 @@ .root { - composes: body1 from "talk-ui/shared/typography.css"; + composes: bodyCopy from "talk-ui/shared/typography.css"; background-color: transparent; } diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css index a3c19a400..8b0edc3b8 100644 --- a/src/core/client/ui/components/Typography/Typography.css +++ b/src/core/client/ui/components/Typography/Typography.css @@ -19,28 +19,16 @@ composes: heading4 from "talk-ui/shared/typography.css"; } -.subtitle1 { - composes: subtitle1 from "talk-ui/shared/typography.css"; -} - -.subtitle2 { - composes: subtitle2 from "talk-ui/shared/typography.css"; -} - -.body1 { - composes: body1 from "talk-ui/shared/typography.css"; -} - -.body2 { - composes: body2 from "talk-ui/shared/typography.css"; +.bodyCopy { + composes: bodyCopy from "talk-ui/shared/typography.css"; } .button { composes: button from "talk-ui/shared/typography.css"; } -.overline { - composes: overline from "talk-ui/shared/typography.css"; +.buttonLarge { + composes: buttonLarge from "talk-ui/shared/typography.css"; } .timestamp { @@ -85,8 +73,8 @@ color: var(--palette-primary-main); } -.colorSecondary { - color: var(--palette-secondary-main); +.colorTextPrimary { + color: var(--palette-text-primary); } .colorTextSecondary { @@ -96,3 +84,7 @@ .colorError { color: var(--palette-error-main); } + +.colorSuccess { + color: var(--palette-success-main); +} diff --git a/src/core/client/ui/components/Typography/Typography.mdx b/src/core/client/ui/components/Typography/Typography.mdx new file mode 100644 index 000000000..8833e95f9 --- /dev/null +++ b/src/core/client/ui/components/Typography/Typography.mdx @@ -0,0 +1,56 @@ +--- +name: Typography +menu: UI Kit +--- + +import { Playground } from 'docz' +import Typography from './Typography' +import Flex from '../Flex' + +# Typography + +## Basic Use + + + Heading1 + Heading2 + Heading3 + Heading4 + BodyCopy + timestamp + + + +## Using different colors + + + textPrimary + textSecondary + success + error + + + +## Set align + + + left + center + right + No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo + quiera, simplemente porque es el dolor. + + + +## Cut off long text + + No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo quiera, simplemente porque es el dolor. + + +## Gutters + + I have a bottom gutter + I have a paragraph gutter + Just a normal text + + diff --git a/src/core/client/ui/components/Typography/Typography.spec.tsx b/src/core/client/ui/components/Typography/Typography.spec.tsx new file mode 100644 index 000000000..d694869f8 --- /dev/null +++ b/src/core/client/ui/components/Typography/Typography.spec.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-ui/types"; + +import Typography from "./Typography"; + +it("renders correctly", () => { + const props: PropTypesOf = { + className: "custom", + variant: "heading1", + color: "textSecondary", + gutterBottom: true, + children: "Hello World", + noWrap: true, + align: "left", + }; + const renderer = TestRenderer.create(); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx index c02bb5cf3..752f1f828 100644 --- a/src/core/client/ui/components/Typography/Typography.tsx +++ b/src/core/client/ui/components/Typography/Typography.tsx @@ -12,11 +12,7 @@ type Variant = | "heading2" | "heading3" | "heading4" - | "subtitle1" - | "subtitle2" - | "body1" - | "body2" - | "button" + | "bodyCopy" | "timestamp"; // Based on Typography Component of Material UI. @@ -45,10 +41,10 @@ interface InnerProps extends HTMLAttributes { color?: | "inherit" | "primary" + | "textPrimary" | "textSecondary" - | "secondary" | "error" - | "default"; + | "success"; /** * The component used for the root node. * Either a string to use a DOM element or a component. @@ -102,10 +98,11 @@ const Typography: StatelessComponent = props => { classes.root, classes[variant!], { - [classes.colorPrimary]: color === "primary", - [classes.colorSecondary]: color === "secondary", - [classes.colorError]: color === "error", + [classes.colorTextPrimary]: color === "textPrimary", [classes.colorTextSecondary]: color === "textSecondary", + [classes.colorPrimary]: color === "primary", + [classes.colorError]: color === "error", + [classes.colorSuccess]: color === "success", [classes.noWrap]: noWrap, [classes.gutterBottom]: gutterBottom, [classes.paragraph]: paragraph, @@ -125,22 +122,19 @@ const Typography: StatelessComponent = props => { Typography.defaultProps = { align: "inherit", - color: "default", + color: "textPrimary", gutterBottom: false, headlineMapping: { heading1: "h1", heading2: "h1", heading3: "h1", heading4: "h1", - subtitle1: "h2", - subtitle2: "h3", - body1: "p", - body2: "aside", + bodyCopy: "p", timestamp: "span", }, noWrap: false, paragraph: false, - variant: "body1", + variant: "bodyCopy", }; const enhanced = withForwardRef(withStyles(styles)(Typography)); diff --git a/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap b/src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap new file mode 100644 index 000000000..b1090fb8a --- /dev/null +++ b/src/core/client/ui/components/Typography/__snapshots__/Typography.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/shared/typography.css b/src/core/client/ui/shared/typography.css index 6c396f992..9e52cfc89 100644 --- a/src/core/client/ui/shared/typography.css +++ b/src/core/client/ui/shared/typography.css @@ -91,16 +91,7 @@ color: var(--palette-text-primary); } -.subtitle1 { -} - -.subtitle2 { -} - -.body2 { -} - -.body1 { +.bodyCopy { font-size: calc(16rem / var(--rem-base)); font-weight: var(--font-weight-regular); font-family: "Source Sans Pro"; @@ -127,9 +118,6 @@ letter-spacing: calc(0.57em / 16); } -.overline { -} - .timestamp { color: var(--palette-text-secondary); font-family: "Source Sans Pro"; diff --git a/src/core/client/ui/theme/variables.ts b/src/core/client/ui/theme/variables.ts index b62b60b8f..415a5c32f 100644 --- a/src/core/client/ui/theme/variables.ts +++ b/src/core/client/ui/theme/variables.ts @@ -15,7 +15,7 @@ const variables = { lightest: "#EBF5FB", }, /* Secondary colors */ - secondary: { + grey: { darkest: "#404345", dark: "#65696B", main: "#787D80",