feat(display): add display atomic classes

src/components/styles/Display.tsx

@@ -0,0 +1,70 @@
+import { css } from 'styled-components';
+import { grid } from '../../constants';
+import { GridBreakpoints } from '../../constants/grid';
+
+const displayProperties = [
+  'block',
+  'inline-block',
+  'inline',
+  'flex',
+  'inline-flex',
+  'table',
+  'inline-table',
+  'table-caption',
+  'table-cell',
+  'table-column',
+  'table-column-group',
+  'table-footer-group',
+  'table-header-group',
+  'table-row-group',
+  'table-row',
+  'flow-root',
+  'grid',
+  'inline-grid',
+  'contents',
+  'list-item',
+  'none',
+];
+
+/**
+ * Build ClassNames for display properties
+ */
+const createTopLevelDisplay = () =>
+  displayProperties.reduce(
+    (acc, property) => ({
+      ...acc,
+      [`.${property === 'none' ? 'hidden' : property}`]: { display: property },
+    }),
+    {},
+  );
+
+/**
+ * Build ClassNames for display properties
+ * at different breakpoints
+ */
+const createResponsiveDisplay = () =>
+  Object.keys(grid.breakpoints)
+    .filter((v) => v !== 'xs')
+    .reduce(
+      (mediaQueries, breakpoint) => ({
+        ...mediaQueries,
+        [`@media screen and (min-width: ${grid.breakpoints[breakpoint as GridBreakpoints]}px)`]: {
+          ...displayProperties.reduce(
+            (acc, property) => ({
+              ...acc,
+              [`${breakpoint}\\:${property === 'none' ? 'hidden' : property}`]: { display: property },
+            }),
+            {},
+          ),
+        },
+      }),
+      {},
+    );
+
+export const display = css`
+  .hidden {
+    display: none;
+  }
+  ${css(createTopLevelDisplay())}
+  ${css(createResponsiveDisplay())}
+`;

src/components/styles/GlobalStyles.tsx

@@ -3,6 +3,7 @@ import { normalize } from 'styled-normalize';
 import { typography } from '../../constants';
 import { maxEqualToMedia } from '../../helpers/responsiveness';
 import { spacing } from './Spacing';
+import { display } from './Display';
 
 // Universal box sizing with Inheritance. More info: https://css-tricks.com/box-sizing/#article-header-id-6
 const boxSizing = css`
@@ -54,6 +55,7 @@ const GlobalStyles = createGlobalStyle`
   ${imagery}
   ${navMenu}
   body {
+    ${display}
     ${spacing}
   }
 `;

src/content/Display/Display.tsx

@@ -0,0 +1,15 @@
+import React, { HTMLAttributes } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../constants';
+
+const Square = styled.div`
+  background-color: ${colors.greyLightest};
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+  font-family: monospace;
+  display: inline-block;
+  padding: 10px;
+`;
+
+export default function Spacing(props: HTMLAttributes<HTMLDivElement>) {
+  return <Square {...props} />;
+}

src/content/Spacing/Spacing.md

@@ -4,69 +4,22 @@ This library exports **Tailwind** flavoured [atomic classes](https://css-tricks.
 
 Here's a guide on how to use them:
 
-- [margin](https://tailwindcss.com/docs/margin/#add-margin-to-a-single-side)
-- [padding](https://tailwindcss.com/docs/padding/#add-padding-to-a-single-side)
+- [https://night-tailwindcss.vercel.app/docs/display](https://night-tailwindcss.vercel.app/docs/display)
 
-This is our available spacing scale which is made out of **multiples of 4**:
+The avalible properties are:
 
-```tsx static
-const spacingScale = {
-  'auto': 'auto', //Only available with margin
-  '0': '0',
-  '1': '4px',
-  '2': '8px',
-  '3': '12px',
-  '4': '16px',
-  '5': '20px',
-  '6': '24px',
-  '7': '32px',
-  '8': '40px',
-  '9': '56px',
-  '10': '64px',
-  '11': '104px',
-};
-
-/**
- * Using the indexes on the spacing scale above:
- */
-<div className='mr-10' /> // margin-right: 64px
-<div className='mx-5' /> // margin-left: 20px margin-right: 20px
-<div className='pt-2' /> // padding-top: 8px
-```
+- `.{displayProperty}`
+- `.{s|m|l|xl}:{displayProperty}`
 
-You can also specify **breakpoints** at which to start applying the spacing:
+### Examples
 
 ```tsx static
-// available breakpoints
-const breakpoints: {
-  l: 992;
-  m: 768;
-  s: 576;
-  xl: 1300;
-  xs: 0;
-};
-
-<div className='l:mr-10' /> // apply `margin-right: 64px` for screens wider than 992px
-<div className='s:pt-2' /> // apply `padding-top: 8px` for screens wider than 576px
-```
-
-### Examples
+// Some examples
 
-```tsx
-// `<Spacing />` is NOT available in the library. It is used for documentation only.
 <>
-  <div className="mb-5">
-    <Spacing className="mr-6 p-3">margin-right 24px</Spacing>
-    <Spacing className="p-3">Block</Spacing>
-  </div>
-  <div>
-    <Spacing className="l:mr-9 p-3">margin-right 56px on screens wider than 992px</Spacing>
-    <Spacing className="p-3">Block</Spacing>
-  </div>
-  <div>
-    <Spacing className="l:mx-auto" style={{ display: 'block', width: '70%' }}>
-      margin-left auto margin-right auto on screens wider than 992px
-    </Spacing>
-  </div>
+  <div className="hidden m:block">I am hidden at mobile but visible on desktop</div>
+  <div className="hidden m:block l:hidden">I am hidden at mobile but visible on tablet and hidden on desktop</div>
+  <div className="flex">I am a flexible div</div>
+  <div className="hidden m:flex">I am hidden at mobile but a flexible div at tablet and desktop</div>
 </>
 ```