Box Shadow Examples

src/constants/boxShadows/index.js

@@ -1,17 +1,21 @@
+/*
+ * Note: Each Category is exported separately to be rendered in storybook:
+ */
+
 import { transparentize } from '../../utils';
 import COLORS from '../colors';
 
 const boxShadowColor = '#2d2d30';
 const boxShadowOverlayColor = '#505050';
 
-const BASE_CONFIG = {
+export const BASE_CONFIG = {
   clickable: `0 1px 3px 0 ${transparentize(boxShadowColor, 0.06)}`,
   clickableHover: `0 1px 3px 0 ${transparentize(boxShadowColor, 0.15)}`,
   message: `0 12px 20px 0 ${transparentize(boxShadowColor, 0.05)}`,
   focusSecondary: `0 0 2px 2px ${transparentize(COLORS.secondary, 0.5)}`,
 };
 
-const OLD_BASE_CONFIG = {
+export const OLD_BASE_CONFIG = {
   boxShadow1: `0 12px 20px 0 ${transparentize(boxShadowColor, 0.05)}`,
   boxShadow2: `0 5px 11px 0 ${transparentize(boxShadowColor, 0.1)}`,
   boxShadow3: `0 4px 6px 0 ${transparentize(boxShadowColor, 0.15)}`,
@@ -20,15 +24,15 @@ const OLD_BASE_CONFIG = {
   boxShadowOnOverlay: `0 12px 20px 0 ${boxShadowOverlayColor}`,
 };
 
-const DESIGN_SYSTEM_NAMING = {
+export const DESIGN_SYSTEM_NAMING = {
   elevation2: OLD_BASE_CONFIG.boxShadow5,
   elevation3: OLD_BASE_CONFIG.boxShadow4,
   elevation6: OLD_BASE_CONFIG.boxShadow3,
   elevation11: OLD_BASE_CONFIG.boxShadow2,
   elevation20: OLD_BASE_CONFIG.boxShadow1,
 };
 
-const ALIASED_CONFIG = {
+export const ALIASED_CONFIG = {
   card: OLD_BASE_CONFIG.boxShadow4,
 };
 
@@ -38,4 +42,3 @@ export default {
   ...DESIGN_SYSTEM_NAMING,
   ...ALIASED_CONFIG,
 };
-

stories/constants/boxShadowsStory.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+import { SPACING } from 'src/constants';
+import * as BOX_SHADOWS from 'src/constants/boxShadows';
+import { Container, Typography } from 'src/shared-components';
+
+const MainContainer = styled.div`
+  padding: ${SPACING.medium};
+`;
+
+const BoxesContainer = styled.div`
+  margin: ${SPACING.medium} 0;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+const baseBoxStyle = css`
+  width: 350px;
+  margin: ${SPACING.base};
+`;
+
+const boxShadowsStory = () => (
+  <MainContainer>
+    {Object.keys(BOX_SHADOWS).map(category => {
+      if (category === 'default') {
+        return null;
+      }
+
+      const categoryBoxShadows = BOX_SHADOWS[category];
+
+      return (
+        <React.Fragment key={category}>
+          <Typography.Title>{category}:</Typography.Title>
+          <BoxesContainer>
+            {Object.keys(categoryBoxShadows).map(shadow => {
+              const styles = css`
+                ${baseBoxStyle};
+                box-shadow: ${categoryBoxShadows[shadow]};
+              `;
+
+              return (
+                <Container css={styles}>
+                  <Container.Section>
+                    <strong>Key:</strong> {shadow}
+                    <br />
+                    <br />
+                    <strong>Value:</strong> {categoryBoxShadows[shadow]}
+                  </Container.Section>
+                </Container>
+              );
+            })}
+          </BoxesContainer>
+        </React.Fragment>
+      );
+    })}
+  </MainContainer>
+);
+
+export default boxShadowsStory;

stories/constants/colorsStory.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { SPACING } from 'src/constants';
+import { Typography } from 'src/shared-components';
+import * as COLORS from 'src/constants/colors';
+
+import Color from './color';
+
+const MainContainer = styled.div`
+  padding: ${SPACING.medium};
+`;
+
+const ColorsContainer = styled.div`
+  margin: ${SPACING.medium} 0;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+const colorsStory = () => (
+  <MainContainer>
+    {Object.keys(COLORS).map(category => {
+      if (category === 'default') {
+        return null;
+      }
+
+      const categoryColors = COLORS[category];
+
+      return (
+        <React.Fragment key={category}>
+          <Typography.Title>{category}:</Typography.Title>
+          <ColorsContainer>
+            {Object.keys(categoryColors).map(color => {
+              const colorHex = categoryColors[color];
+              return (
+                <Color key={color} colorName={color} colorHex={colorHex} />
+              );
+            })}
+          </ColorsContainer>
+        </React.Fragment>
+      );
+    })}
+  </MainContainer>
+);
+
+export default colorsStory;

stories/constants/index.js

@@ -3,65 +3,49 @@ import { withDocs } from 'storybook-readme';
 import { storiesOf } from '@storybook/react';
 import { css } from '@emotion/core';
 
-import * as COLORS from 'src/constants/colors';
 import * as CONSTANTS from 'src/constants';
 import { Typography } from 'src/shared-components';
 import ConstantsReadme from 'docs/constants.md';
 
 import renderConstantsMap from './renderConstantsMap';
-import Color from './Color';
+import colorsStory from './colorsStory';
+import boxShadowsStory from './boxShadowsStory';
 
 const stories = storiesOf('CONSTANTS', module);
 
-const CONSTANTS_WITH_OWN_STORY = [
-  'COLORS',
-];
+const CONSTANTS_WITH_OWN_STORY = ['COLORS'];
 
 stories.add(
-  'available constants',
+  'Available Constants',
   withDocs(ConstantsReadme, () => (
-    <div css={css`text-align: left;`}>
-      {
-        Object.keys(CONSTANTS).map(category => {
-          if (CONSTANTS_WITH_OWN_STORY.includes(category)) {
-            return null;
-          }
-
-          const categoryConstant = CONSTANTS[category];
-
-          return (
-            <div key={category} css={css`padding-bottom: ${CONSTANTS.SPACING.small};`}>
-              <Typography.Heading>{category}</Typography.Heading>
-              {renderConstantsMap(categoryConstant)}
-            </div>
-          );
-        })
-      }
+    <div
+      css={css`
+        text-align: left;
+      `}
+    >
+      {Object.keys(CONSTANTS).map(category => {
+        if (CONSTANTS_WITH_OWN_STORY.includes(category)) {
+          return null;
+        }
+
+        const categoryConstant = CONSTANTS[category];
+
+        return (
+          <div
+            key={category}
+            css={css`
+              padding-bottom: ${CONSTANTS.SPACING.small};
+            `}
+          >
+            <Typography.Heading>{category}</Typography.Heading>
+            {renderConstantsMap(categoryConstant)}
+          </div>
+        );
+      })}
     </div>
   ))
 );
 
-stories.add('COLORS', () => (
-  <React.Fragment>
-    {Object.keys(COLORS).map(category => {
-      if (category === 'default') {
-        return null;
-      }
+stories.add('COLORS', colorsStory);
 
-      const categoryColors = COLORS[category];
-
-      return (
-        <React.Fragment key={category}>
-          <div css={css`font-size: 16px;`}>{category}</div>
-          <div css={css`display: flex; flex-wrap: wrap;`}>
-            {Object.keys(categoryColors).map(color => {
-              const colorHex = categoryColors[color];
-              return <Color key={color} colorName={color} colorHex={colorHex} />;
-            })}
-          </div>
-          <br />
-        </React.Fragment>
-      );
-    })}
-  </React.Fragment>
-));
+stories.add('BOX_SHADOWS', boxShadowsStory);