Adding official colors to logo and a custom example container for buttons

src/common/colors.ts

@@ -1,4 +1,6 @@
 export const colors = {
+  officialBlue: '#0060A3',
+  officialOrange: '#FAA21B',
   hotpink: 'hotpink',
   primary: '#0068B3',
   primaryLight: '#008CF0',

src/components/button/Button.stories.mdx

@@ -1,38 +1,43 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import Button from './Button';
+import styled from 'styled-components';
+
+export const ExampleButtonContainer = styled.div`
+  margin: -0.5rem;
+  & > \* {
+    margin: 0.5rem;
+  }
+`;
 
 <Meta title="Forms|Button" component={Button} />
 
 # Button
 
 <Preview>
   <Story name="All">
-    <>
-      <div style={{ display: 'inline-flex' }}>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
-        <Button color="success">Success</Button>
-        <Button color="danger">Danger</Button>
-        <Button disabled>Disabled</Button>
-      </div>
-      <div style={{ display: 'inline-flex' }}>
-        <Button variant="outline" color="primary">
-          Primary
-        </Button>
-        <Button variant="outline" color="secondary">
-          Secondary
-        </Button>
-        <Button variant="outline" color="success">
-          Success
-        </Button>
-        <Button variant="outline" color="danger">
-          Danger
-        </Button>
-        <Button variant="outline" disabled>
-          Disabled
-        </Button>
-      </div>
-    </>
+    <ExampleButtonContainer>
+      <Button color="primary">Primary</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="success">Success</Button>
+      <Button color="danger">Danger</Button>
+      <Button disabled>Disabled</Button>
+      <br />
+      <Button variant="outline" color="primary">
+        Primary
+      </Button>
+      <Button variant="outline" color="secondary">
+        Secondary
+      </Button>
+      <Button variant="outline" color="success">
+        Success
+      </Button>
+      <Button variant="outline" color="danger">
+        Danger
+      </Button>
+      <Button variant="outline" disabled>
+        Disabled
+      </Button>
+    </ExampleButtonContainer>
   </Story>
 </Preview>
 

src/components/logo/LightningO.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { colors } from 'common/colors';
 
 interface SvgProps {
   width: number;
@@ -17,7 +18,11 @@ const OSvg = styled.svg<SvgProps>`
   ${({ height }): string => height + 'px;'}
 `;
 
-const LightningO = ({ size = 300, oColor = '#2167a5', lightningColor = '#faa532' }: OwnProps): JSX.Element => {
+const LightningO = ({
+  size = 300,
+  oColor = colors.officialBlue,
+  lightningColor = colors.officialOrange,
+}: OwnProps): JSX.Element => {
   const proportion = 615 / 445;
   return (
     <OSvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 445" width={size} height={size / proportion}>

src/components/logo/Logo.stories.mdx

@@ -54,8 +54,8 @@ This can be used in places where the larger logo cannot fit, as a favicon, or ap
 
 <Props of={StaticLogo} />
 
-# Futuristic Logo (Static Spinner)  
-  
+# Futuristic Logo (Static Spinner)
+
 **NOT APPROVED FOR OFFICIAL USE**
 
 <Preview>

src/components/logo/Logo.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { colors } from 'common/colors';
 
-type ColorKeys = keyof typeof colors;
-
 interface LogoProps {
-  backgroundColor: ColorKeys;
   size: number;
   textColor?: string;
   lightningColor?: string;
@@ -16,18 +13,16 @@ type OwnProps = Partial<LogoProps>;
 const proportion = 59 / 239;
 
 export const FullLogo = styled.svg<LogoProps>`
-  background-color: ${({ backgroundColor }): string => colors[backgroundColor] + ';'};
   ${({ size }): string => 'width: ' + size / proportion + 'px; height: ' + size + 'px;'};
 `;
 
 const Logo = ({
-  backgroundColor = 'primary',
-  textColor = '#FFF',
-  lightningColor = '#F9A11B',
+  textColor = colors.officialBlue,
+  lightningColor = colors.officialOrange,
   size = 59,
 }: OwnProps): JSX.Element => {
   return (
-    <FullLogo xmlns="http://www.w3.org/2000/svg" size={size} backgroundColor={backgroundColor} viewBox="0 0 239 59">
+    <FullLogo xmlns="http://www.w3.org/2000/svg" size={size} viewBox="0 0 239 59">
       <defs />
       <g fill={textColor}>
         <path d="M120.49 55.778l11.203-42.789h10.948l-11.002 42.789z" />

src/components/logo/StaticLogo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { colors } from 'common/colors';
 
 export interface Props {
   primaryColor?: string;
@@ -12,7 +13,11 @@ const Logo = styled.svg<{ size: string }>`
   width: ${({ size }): string => size};
 `;
 
-const StaticLogo = ({ primaryColor = '#0068B3', secondaryColor = '#FAA21B', size = '100px' }: Props): JSX.Element => (
+const StaticLogo = ({
+  primaryColor = colors.officialBlue,
+  secondaryColor = colors.officialOrange,
+  size = '100px',
+}: Props): JSX.Element => (
   <Logo size={size} viewBox="0 0 141 112" fill="none">
     <g clipPath="url(#clip0)">
       <path

src/components/logo/StaticSpinnerLogo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { colors } from 'common/colors';
 
 export interface SpinnerLogoProps {
   primaryColor?: string;
@@ -23,8 +24,8 @@ const SpinnerLightning = styled.svg`
 `;
 
 const StaticSpinnerLogo = ({
-  primaryColor = '#FAA21B',
-  secondaryColor = '#0060A3',
+  primaryColor = colors.officialBlue,
+  secondaryColor = colors.officialOrange,
   spinnerSize = '100px',
 }: SpinnerLogoProps): JSX.Element => (
   <SpinnerContainer size={spinnerSize}>

src/intro.stories.mdx

@@ -2,11 +2,9 @@ import Logo from 'components/logo/Logo';
 
 <Meta title="Design System|Intro" />
 
-# Online Design System
+<Logo size={200} />
 
-<left>
-  <Logo backgroundColor="transparent" textColor="black" size={200}/>
-</left>
+#
 
 # Get started