From e286116aec9fa5f598c25b4ba484654e984c563a Mon Sep 17 00:00:00 2001 From: Simos Pavlakis Date: Thu, 12 Aug 2021 11:50:31 +0300 Subject: [PATCH 1/8] feat: add Typography components --- src/atoms/Button/Button.stories.tsx | 11 -- src/atoms/Button/Button.test.js | 16 -- src/atoms/Button/Button.tsx | 9 - src/atoms/Button/styles.ts | 5 - src/atoms/Typography/Heading.stories.tsx | 68 +++++++ src/atoms/Typography/Heading.test.js | 12 ++ src/atoms/Typography/Heading.tsx | 32 ++++ src/atoms/Typography/Text.stories.tsx | 39 ++++ src/atoms/Typography/Text.test.js | 12 ++ src/atoms/Typography/Text.tsx | 28 +++ src/atoms/Typography/TypeScale.stories.tsx | 86 +++++++++ .../Typography/TypographyDocs.stories.tsx | 172 ++++++++++++++++++ src/atoms/Typography/styles.ts | 27 +++ src/atoms/index.ts | 28 ++- src/types/emotion.d.ts | 3 +- 15 files changed, 504 insertions(+), 44 deletions(-) delete mode 100644 src/atoms/Button/Button.stories.tsx delete mode 100644 src/atoms/Button/Button.test.js delete mode 100644 src/atoms/Button/Button.tsx delete mode 100644 src/atoms/Button/styles.ts create mode 100644 src/atoms/Typography/Heading.stories.tsx create mode 100644 src/atoms/Typography/Heading.test.js create mode 100644 src/atoms/Typography/Heading.tsx create mode 100644 src/atoms/Typography/Text.stories.tsx create mode 100644 src/atoms/Typography/Text.test.js create mode 100644 src/atoms/Typography/Text.tsx create mode 100644 src/atoms/Typography/TypeScale.stories.tsx create mode 100644 src/atoms/Typography/TypographyDocs.stories.tsx create mode 100644 src/atoms/Typography/styles.ts diff --git a/src/atoms/Button/Button.stories.tsx b/src/atoms/Button/Button.stories.tsx deleted file mode 100644 index 42fb499e..00000000 --- a/src/atoms/Button/Button.stories.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import { Story } from "@storybook/react"; -import Button from "./Button"; - -export default { - title: "atoms/Button", -}; - -const Template: Story = (args) => ); - const button = screen.getByRole("button"); - - // console.log(button); - - expect(button).toHaveTextContent("Button"); - // expect(button).toHaveAttribute("type"); - expect(button).not.toBeDisabled(); - }); -}); diff --git a/src/atoms/Button/Button.tsx b/src/atoms/Button/Button.tsx deleted file mode 100644 index d084ecf3..00000000 --- a/src/atoms/Button/Button.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React, { FC } from "react"; -import { SerializedStyles } from "@emotion/react"; -import { btnContainer } from "./styles"; - -const Button: FC = () => { - return ; -}; - -export default Button; diff --git a/src/atoms/Button/styles.ts b/src/atoms/Button/styles.ts deleted file mode 100644 index ea380d9d..00000000 --- a/src/atoms/Button/styles.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { css, SerializedStyles, Theme } from "@emotion/react"; - -export const btnContainer = (theme: Theme): SerializedStyles => css` - background-color: ${theme.button.primary.default.background}; -`; diff --git a/src/atoms/Typography/Heading.stories.tsx b/src/atoms/Typography/Heading.stories.tsx new file mode 100644 index 00000000..b11dd0eb --- /dev/null +++ b/src/atoms/Typography/Heading.stories.tsx @@ -0,0 +1,68 @@ +import { Story } from "@storybook/react/types-6-0"; +import React from "react"; +import Heading, { HeadingProps, SIZES } from "./Heading"; + +export default { + title: "base/Typography/Heading", + component: Heading, + argTypes: { + size: { + control: { + type: "select", + options: Object.values(SIZES), + }, + }, + as: { + control: { + type: "select", + options: Object.keys(SIZES), + }, + }, + }, +}; + +const Template: Story = (args) => ( + The quick brown fox jumps over the lazy dog +); + +export const H1 = Template.bind({}); + +H1.args = { + size: "3xl", + as: "h1", +}; + +export const H2 = Template.bind({}); + +H2.args = { + size: "2xl", + as: "h2", +}; + +export const H3 = Template.bind({}); + +H3.args = { + size: "xl", + as: "h3", +}; + +export const H4 = Template.bind({}); + +H4.args = { + size: "lg", + as: "h4", +}; + +export const H5 = Template.bind({}); + +H5.args = { + size: "md", + as: "h5", +}; + +export const H6 = Template.bind({}); + +H6.args = { + size: "sm", + as: "h6", +}; diff --git a/src/atoms/Typography/Heading.test.js b/src/atoms/Typography/Heading.test.js new file mode 100644 index 00000000..7e18e7e3 --- /dev/null +++ b/src/atoms/Typography/Heading.test.js @@ -0,0 +1,12 @@ +import React from "react"; +import Heading from "./Text"; +import { render, screen } from "@test-utils/render"; + +describe("", () => { + it("renders correctly", () => { + render(My super title); + const h1 = screen.getByText(/my super title/i); + + expect(h1).toHaveTextContent("My super title"); + }); +}); diff --git a/src/atoms/Typography/Heading.tsx b/src/atoms/Typography/Heading.tsx new file mode 100644 index 00000000..b58ef31b --- /dev/null +++ b/src/atoms/Typography/Heading.tsx @@ -0,0 +1,32 @@ +import React, { FC, HTMLAttributes } from "react"; +import { headingContainer } from "./styles"; +import { TypographyLevels } from "@theme/utils/typography"; + +export type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; + +export type HeadingProps = Omit, "css"> & { + size?: TypographyLevels; + as?: HeadingTag; +}; + +export const SIZES = { + h1: "3xl", + h2: "2xl", + h3: "xl", + h4: "lg", + h5: "md", + h6: "sm", +} as const; + +const Heading: FC = ({ size, as = "h2", children, ...rest }) => { + const HeadingTag = as; + const selectedSize = size || SIZES[as]; + + return ( + headingContainer(theme, { size: selectedSize })} {...rest}> + {children} + + ); +}; + +export default Heading; diff --git a/src/atoms/Typography/Text.stories.tsx b/src/atoms/Typography/Text.stories.tsx new file mode 100644 index 00000000..ad832ff8 --- /dev/null +++ b/src/atoms/Typography/Text.stories.tsx @@ -0,0 +1,39 @@ +import React from "react"; +import { Story } from "@storybook/react/types-6-0"; +import Text, { TextProps } from "./Text"; + +export default { + component: Text, + title: "atoms/Text", + argTypes: { + weight: { + control: { + type: "select", + options: ["400", "700"], + }, + }, + fontSize: { + control: { + type: "select", + // TODO: add the remaining sizes when typography docs are merged in master + options: ["xs", "sm", "md", "lg", "xl", "2xl"], + }, + }, + as: { + control: { + type: "select", + options: ["span", "div", "p"], + }, + }, + }, +}; + +const Template: Story = (args) => This is some text!; + +export const Default = Template.bind({}); + +Default.args = { + weight: "400", + fontSize: "md", + as: "span", +}; diff --git a/src/atoms/Typography/Text.test.js b/src/atoms/Typography/Text.test.js new file mode 100644 index 00000000..680d7f1c --- /dev/null +++ b/src/atoms/Typography/Text.test.js @@ -0,0 +1,12 @@ +import React from "react"; +import Text from "./Text"; +import { render, screen } from "@test-utils/render"; + +describe("", () => { + it("renders correctly", () => { + render(My content.); + const textEl = screen.getByText(/my content/i); + + expect(textEl).toHaveTextContent("My content."); + }); +}); diff --git a/src/atoms/Typography/Text.tsx b/src/atoms/Typography/Text.tsx new file mode 100644 index 00000000..49c772ee --- /dev/null +++ b/src/atoms/Typography/Text.tsx @@ -0,0 +1,28 @@ +import React, { FC } from "react"; +import { textContainer } from "./styles"; +import { TypographyLevels } from "@theme/utils/typography"; + +export type TextWeight = "400" | "700"; + +export type TextProps = { + fontSize: TypographyLevels; + weight?: TextWeight; + as?: "span" | "div" | "p"; + className?: string; +}; + +const Text: FC = ({ children, weight = "400", fontSize, as = "span", className }) => { + const Tag = as; + + return ( + textContainer(theme, weight, fontSize)} + className={className} + > + {children} + + ); +}; + +export default Text; diff --git a/src/atoms/Typography/TypeScale.stories.tsx b/src/atoms/Typography/TypeScale.stories.tsx new file mode 100644 index 00000000..6458f40e --- /dev/null +++ b/src/atoms/Typography/TypeScale.stories.tsx @@ -0,0 +1,86 @@ +import React from "react"; +import { Story } from "@storybook/react/types-6-0"; +import Heading, { HeadingTag, SIZES, HeadingProps } from "./Heading"; + +export default { + title: "base/Typography/Type Scale", + decorators: [ + (Story: Story): JSX.Element => ( +
+ +
+ ), + ], +}; + +const Template: Story = ({ as, size }) => ( + <> +
+ The quick brown fox jumps over the lazy dog ({size}) +

+ What looked like a small patch of purple grass, above five feet square, was moving across + the sand in their direction. When it came near enough he perceived that it was not grass; + there were no blades, but only purple roots. The roots were revolving, for each small plant + in the whole patch, like the spokes of a rimless wheel. +

+

+ When it came near enough he perceived that it was not grass; there were no blades, but only + purple roots. The roots were revolving, for each small plant in the whole patch, like the + spokes of a rimless wheel. +

+ + We are using technologies such as: + + + - The Gnosis Front end team +
+ +); + +export const TypeScale: Story<{ baseFontSize: number }> = () => { + return ( +
+ {Object.keys(SIZES).map((key) => ( +