components: Element (#3287)

siddharthkp · SaraVieira · commit bc56b76dc1ac · 2020-01-08T11:06:30.000Z
* remove duplicate decorator

* add parent styles to layout decorator

* add min height to layout decorator

* add common base element

* use base element for other components

* add all fontsizes + update example
diff --git 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/.storybook/decorators/LayoutDecorator.tsx b/packages/components/.storybook/decorators/LayoutDecorator.tsx
@@ -3,25 +3,29 @@ import React from 'react';
 import styled from 'styled-components';
 
 const ColoredChildren = styled.div`
-  & > div > * {
+  & > * {
+    background: #343434;
+    min-height: 4em;
+  }
+  & > * > * {
     --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/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<ICollapsibleProps> = ({
   const toggle = () => setOpen(!open);
 
   return (
-    <section {...props}>
+    <Element as="section" {...props}>
       <Header onClick={toggle}>
         <ToggleIcon open={open} />
         <Title>{title}</Title>
       </Header>
       {open ? <Body>{children}</Body> : null}
-    </section>
+    </Element>
   );
 };
diff --git a/packages/components/src/components/Element/element.stories.tsx 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],
+};
+
+export const Basic = () => <Element>content</Element>;
+
+export const AsProp = () => <Element as="span">content</Element>;
+
+export const Margins = () => (
+  <>
+    <Element margin={2}>2 on the space grid is 2*4px = 8px or 0.5em</Element>
+    <Element marginX={2}>left and right</Element>
+    <Element marginY={2}>top and bottom</Element>
+    <Element marginBottom={2}>prefer margin bottom when you can</Element>
+  </>
+);
diff --git a/packages/components/src/components/Element/index.tsx b/packages/components/src/components/Element/index.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import css from '@styled-system/css';
+
+export const Element = styled.div<{
+  margin?: number;
+  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.marginY || null,
+    marginBottom: props.marginBottom || null,
+    marginTop: props.marginTop || null,
+  })
+);
diff --git a/packages/components/src/components/Example/index.tsx b/packages/components/src/components/Example/index.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
+import css from '@styled-system/css';
+import { Element } from '../Element';
 
-const H1 = styled.h1`
-  color: red;
-`;
+const H1 = styled(Element).attrs({ as: 'h1' })(
+  css({
+    color: 'reds.500',
+    fontSize: 7,
+  })
+);
 
 const ExampleComponent = () => <H1>I am an example component</H1>;
 
diff --git 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
@@ -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;
diff --git a/packages/components/src/components/Stack/stack.stories.tsx b/packages/components/src/components/Stack/stack.stories.tsx
@@ -11,29 +11,29 @@ export default {
 
 // replace the text inside with Text variants when available
 export const Defaults = () => (
-  <Stack style={{ height: 100, background: '#343434' }}>
+  <Stack style={{ height: 100 }}>
     <div />
     <div />
   </Stack>
 );
 
 export const WithGap = () => (
-  <Stack gap={4} style={{ height: 100, background: '#343434' }}>
+  <Stack gap={4} style={{ height: 100 }}>
     <div />
     <div>spacing token as gap</div>
     <div />
   </Stack>
 );
 
 export const Justify = () => (
-  <Stack justify="space-around" style={{ height: 100, background: '#343434' }}>
+  <Stack justify="space-around" style={{ height: 100 }}>
     <div />
     <div />
   </Stack>
 );
 
 export const Align = () => (
-  <Stack align="center" style={{ height: 100, background: '#343434' }}>
+  <Stack align="center" style={{ height: 100 }}>
     <div />
     <div />
   </Stack>
diff --git a/packages/components/src/stories/decorators/ThemeDecorator.tsx b/packages/components/src/stories/decorators/ThemeDecorator.tsx
diff --git a/packages/components/src/stories/decorators/index.ts b/packages/components/src/stories/decorators/index.ts

-Original file line number
+Diff line change
 ,
 ,
 ,
 +  19,
 +  24,
 +  28,
 +  33,
 +  40,
 ];
 export const fontWeights = {