From 42e28416e850ede965d89622236a18b55cb869f4 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:13:20 +0100 Subject: [PATCH 1/6] remove duplicate decorator --- .../components/src/stories/decorators/ThemeDecorator.tsx | 8 -------- packages/components/src/stories/decorators/index.ts | 1 - 2 files changed, 9 deletions(-) delete mode 100644 packages/components/src/stories/decorators/ThemeDecorator.tsx delete mode 100644 packages/components/src/stories/decorators/index.ts diff --git a/packages/components/src/stories/decorators/ThemeDecorator.tsx b/packages/components/src/stories/decorators/ThemeDecorator.tsx deleted file mode 100644 index 732a51816e3..00000000000 --- a/packages/components/src/stories/decorators/ThemeDecorator.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { ThemeProvider } from 'styled-components'; - -import theme from '@codesandbox/common/lib/theme'; - -export const ThemeDecorator = (fn: () => JSX.Element) => ( - {fn()} -); diff --git a/packages/components/src/stories/decorators/index.ts b/packages/components/src/stories/decorators/index.ts deleted file mode 100644 index 10b8fe9988e..00000000000 --- a/packages/components/src/stories/decorators/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ThemeDecorator'; From 1e65f7ad3429ba88e7a05c113f153ed44dd1d895 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:20:35 +0100 Subject: [PATCH 2/6] add parent styles to layout decorator --- .../.storybook/decorators/LayoutDecorator.tsx | 15 ++++++++----- .../components/Element/element.stories.tsx | 22 +++++++++++++++++++ .../src/components/Element/index.tsx | 16 ++++++++++++++ .../src/components/Stack/stack.stories.tsx | 8 +++---- 4 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 packages/components/src/components/Element/element.stories.tsx create mode 100644 packages/components/src/components/Element/index.tsx diff --git a/packages/components/.storybook/decorators/LayoutDecorator.tsx b/packages/components/.storybook/decorators/LayoutDecorator.tsx index 893eea70b80..f690fcbfdb1 100644 --- a/packages/components/.storybook/decorators/LayoutDecorator.tsx +++ b/packages/components/.storybook/decorators/LayoutDecorator.tsx @@ -3,25 +3,28 @@ import React from 'react'; import styled from 'styled-components'; const ColoredChildren = styled.div` - & > div > * { + & > *:first-child { + background: #343434; + } + & > * > * { --color: rgb(103, 126, 208); background: var(--color); min-height: 4em; min-width: 4em; } - & > div > *:nth-child(6n + 2) { + & > * > *:nth-child(6n + 2) { --color: rgb(217, 103, 219); } - & > div > *:nth-child(6n + 3) { + & > * > *:nth-child(6n + 3) { --color: rgb(77, 214, 115); } - & > div > *:nth-child(6n + 4) { + & > * > *:nth-child(6n + 4) { --color: rgb(248, 110, 91); } - & > div > *:nth-child(6n + 5) { + & > * > *:nth-child(6n + 5) { --color: rgb(94, 204, 211); } - & > div > *:nth-child(6n + 6) { + & > * > *:nth-child(6n + 6) { --color: rgb(0, 35, 208); } & > div > *:nth-child(6n + 7) { diff --git a/packages/components/src/components/Element/element.stories.tsx b/packages/components/src/components/Element/element.stories.tsx new file mode 100644 index 00000000000..fb8667ef119 --- /dev/null +++ b/packages/components/src/components/Element/element.stories.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { LayoutDecorator } from '../../../.storybook/decorators'; +import { Element } from '.'; + +export default { + title: 'components/Element', + component: Element, + decorators: [LayoutDecorator], +}; + +// replace the text inside with Text variants when available +export const Basic = () => ( + +
+ +); + +export const DefaultOpen = () => ( + +
+ +); diff --git a/packages/components/src/components/Element/index.tsx b/packages/components/src/components/Element/index.tsx new file mode 100644 index 00000000000..3a6d64b5d91 --- /dev/null +++ b/packages/components/src/components/Element/index.tsx @@ -0,0 +1,16 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Element = styled.div<{ + margin?: number; + marginX?: number; + marginY?: number; + marginBottom?: number; +}>(props => + css({ + margin: props.margin || null, + marginX: props.marginX || null, + marginY: props.marginX || null, + marginBottom: props.marginBottom || null, + }) +); diff --git a/packages/components/src/components/Stack/stack.stories.tsx b/packages/components/src/components/Stack/stack.stories.tsx index 6bc215d46fd..d2ee7ab6e08 100644 --- a/packages/components/src/components/Stack/stack.stories.tsx +++ b/packages/components/src/components/Stack/stack.stories.tsx @@ -11,14 +11,14 @@ export default { // replace the text inside with Text variants when available export const Defaults = () => ( - +
); export const WithGap = () => ( - +
spacing token as gap
@@ -26,14 +26,14 @@ export const WithGap = () => ( ); export const Justify = () => ( - +
); export const Align = () => ( - +
From df4d8501d775698187a231c373514ad19045dc5d Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:26:42 +0100 Subject: [PATCH 3/6] add min height to layout decorator --- packages/components/.storybook/decorators/LayoutDecorator.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/.storybook/decorators/LayoutDecorator.tsx b/packages/components/.storybook/decorators/LayoutDecorator.tsx index f690fcbfdb1..821440fc5f4 100644 --- a/packages/components/.storybook/decorators/LayoutDecorator.tsx +++ b/packages/components/.storybook/decorators/LayoutDecorator.tsx @@ -3,8 +3,9 @@ import React from 'react'; import styled from 'styled-components'; const ColoredChildren = styled.div` - & > *:first-child { + & > * { background: #343434; + min-height: 4em; } & > * > * { --color: rgb(103, 126, 208); From 1172b149e5769d8703073c8a3e7dab444c98edd5 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:26:58 +0100 Subject: [PATCH 4/6] add common base element --- .../components/Element/element.stories.tsx | 20 +++++++++---------- .../src/components/Element/index.tsx | 4 +++- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/components/src/components/Element/element.stories.tsx b/packages/components/src/components/Element/element.stories.tsx index fb8667ef119..c5cbe57221a 100644 --- a/packages/components/src/components/Element/element.stories.tsx +++ b/packages/components/src/components/Element/element.stories.tsx @@ -8,15 +8,15 @@ export default { decorators: [LayoutDecorator], }; -// replace the text inside with Text variants when available -export const Basic = () => ( - -
- -); +export const Basic = () => content; + +export const AsProp = () => content; -export const DefaultOpen = () => ( - -
- +export const Margins = () => ( + <> + 2 on the space grid is 2*4px = 8px or 0.5em + left and right + top and bottom + prefer margin bottom when you can + ); diff --git a/packages/components/src/components/Element/index.tsx b/packages/components/src/components/Element/index.tsx index 3a6d64b5d91..68095a9b4cf 100644 --- a/packages/components/src/components/Element/index.tsx +++ b/packages/components/src/components/Element/index.tsx @@ -6,11 +6,13 @@ export const Element = styled.div<{ marginX?: number; marginY?: number; marginBottom?: number; + marginTop?: number; // prefer margin bottom to top }>(props => css({ margin: props.margin || null, marginX: props.marginX || null, - marginY: props.marginX || null, + marginY: props.marginY || null, marginBottom: props.marginBottom || null, + marginTop: props.marginTop || null, }) ); From 9db471a45aa9db6337a7011198463d702a4f4500 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:34:12 +0100 Subject: [PATCH 5/6] use base element for other components --- packages/components/src/components/Collapsible/index.tsx | 5 +++-- packages/components/src/components/Example/index.tsx | 3 ++- packages/components/src/components/Grid/index.tsx | 5 +++-- packages/components/src/components/Stack/index.tsx | 3 ++- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/Collapsible/index.tsx b/packages/components/src/components/Collapsible/index.tsx index 030f24ac610..b3de61d8004 100644 --- a/packages/components/src/components/Collapsible/index.tsx +++ b/packages/components/src/components/Collapsible/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import css from '@styled-system/css'; +import { Element } from '../Element'; export const Header = styled.div( css({ @@ -81,12 +82,12 @@ export const Collapsible: React.FC = ({ const toggle = () => setOpen(!open); return ( -
+
{title}
{open ? {children} : null} -
+ ); }; diff --git a/packages/components/src/components/Example/index.tsx b/packages/components/src/components/Example/index.tsx index 4a7468ef24f..031094e7fc7 100644 --- a/packages/components/src/components/Example/index.tsx +++ b/packages/components/src/components/Example/index.tsx @@ -1,7 +1,8 @@ import React from 'react'; import styled from 'styled-components'; +import { Element } from '../Element'; -const H1 = styled.h1` +const H1 = styled(Element).attrs({ as: 'h1' })` color: red; `; diff --git a/packages/components/src/components/Grid/index.tsx b/packages/components/src/components/Grid/index.tsx index 945284699b1..86e6063fee7 100644 --- a/packages/components/src/components/Grid/index.tsx +++ b/packages/components/src/components/Grid/index.tsx @@ -1,10 +1,11 @@ import styled from 'styled-components'; import css from '@styled-system/css'; +import { Element } from '../Element'; const fontSize = 1; // rem = 16px const lineHeight = fontSize * 1.5; -export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>( +export const Grid = styled(Element)<{ columnGap?: number; rowGap?: number }>( ({ columnGap, rowGap }) => css({ display: 'grid', @@ -19,7 +20,7 @@ export const Grid = styled.div<{ columnGap?: number; rowGap?: number }>( // valid combinations are // start | start + end | start + span | span // span + end is also possible but not implemented here -export const Column = styled.div<{ +export const Column = styled(Element)<{ start?: number; end?: number; span?: number; diff --git a/packages/components/src/components/Stack/index.tsx b/packages/components/src/components/Stack/index.tsx index eb78b4a413c..5016f60b66c 100644 --- a/packages/components/src/components/Stack/index.tsx +++ b/packages/components/src/components/Stack/index.tsx @@ -1,7 +1,8 @@ import styled from 'styled-components'; import css from '@styled-system/css'; +import { Element } from '../Element'; -export const Stack = styled.div<{ +export const Stack = styled(Element)<{ gap?: number; // theme.space token direction?: 'horizontal' | 'vertical'; justify?: string; From eb8cbf9db8b3074e3c6939862c7ba22d63953f17 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Wed, 8 Jan 2020 10:39:14 +0100 Subject: [PATCH 6/6] add all fontsizes + update example --- packages/common/src/design-language/typography.ts | 5 +++++ packages/components/src/components/Example/index.tsx | 10 +++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/common/src/design-language/typography.ts b/packages/common/src/design-language/typography.ts index cc6dd76667f..045a02e61c0 100644 --- a/packages/common/src/design-language/typography.ts +++ b/packages/common/src/design-language/typography.ts @@ -4,6 +4,11 @@ export const fontSizes = [ 11, 13, 16, + 19, + 24, + 28, + 33, + 40, ]; export const fontWeights = { diff --git a/packages/components/src/components/Example/index.tsx b/packages/components/src/components/Example/index.tsx index 031094e7fc7..6c24900eeeb 100644 --- a/packages/components/src/components/Example/index.tsx +++ b/packages/components/src/components/Example/index.tsx @@ -1,10 +1,14 @@ import React from 'react'; import styled from 'styled-components'; +import css from '@styled-system/css'; import { Element } from '../Element'; -const H1 = styled(Element).attrs({ as: 'h1' })` - color: red; -`; +const H1 = styled(Element).attrs({ as: 'h1' })( + css({ + color: 'reds.500', + fontSize: 7, + }) +); const ExampleComponent = () =>

I am an example component

;