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}>
@@ -34,7 +35,7 @@ const StaticSpinnerLogo = ({
         cy="200"
         r="198"
         transform="translate(53)"
-        stroke={secondaryColor}
+        stroke={primaryColor}
         strokeWidth="4"
         strokeDasharray="48 10"
       />
@@ -43,59 +44,59 @@ const StaticSpinnerLogo = ({
         cy="163"
         r="161"
         transform="translate(89 36)"
-        stroke={secondaryColor}
+        stroke={primaryColor}
         strokeWidth="4"
         strokeDasharray="42 10"
       />
     </SpinningCircle>
     <SpinnerLightning viewBox="0 0 506 400" fill="none">
-      <circle cx="22" cy="22" r="20" transform="translate(200 143)" stroke={primaryColor} strokeWidth="4" />
-      <circle cx="22" cy="22" r="20" transform="translate(133 197)" stroke={primaryColor} strokeWidth="4" />
-      <circle cx="16" cy="16" r="14" transform="translate(314 174)" stroke={primaryColor} strokeWidth="4" />
-      <circle cx="12" cy="12" r="10" transform="translate(342 171)" stroke={primaryColor} strokeWidth="4" />
-      <circle cx="12" cy="12" r="10" transform="translate(239 192)" stroke={primaryColor} strokeWidth="4" />
-      <circle cx="12" cy="12" r="10" transform="translate(67 253)" stroke={primaryColor} strokeWidth="4" />
-      <circle cx="11" cy="11" r="9" transform="translate(222 154)" stroke={primaryColor} strokeWidth="4" />
+      <circle cx="22" cy="22" r="20" transform="translate(200 143)" stroke={secondaryColor} strokeWidth="4" />
+      <circle cx="22" cy="22" r="20" transform="translate(133 197)" stroke={secondaryColor} strokeWidth="4" />
+      <circle cx="16" cy="16" r="14" transform="translate(314 174)" stroke={secondaryColor} strokeWidth="4" />
+      <circle cx="12" cy="12" r="10" transform="translate(342 171)" stroke={secondaryColor} strokeWidth="4" />
+      <circle cx="12" cy="12" r="10" transform="translate(239 192)" stroke={secondaryColor} strokeWidth="4" />
+      <circle cx="12" cy="12" r="10" transform="translate(67 253)" stroke={secondaryColor} strokeWidth="4" />
+      <circle cx="11" cy="11" r="9" transform="translate(222 154)" stroke={secondaryColor} strokeWidth="4" />
       <path
         d="M41.9012 2.00023C40.8978 12.1069 32.3707 20.0003 22 20.0003C11.6293 20.0003
 3.10217 12.1069 2.09874 2.00022L5.69367 2.00017L20.5 2.00009L36.8063 2.00017L41.9012 2.00023Z"
         transform="translate(292.676 246.907) rotate(142.1)"
-        stroke={primaryColor}
+        stroke={secondaryColor}
         strokeWidth="4"
       />
       <path
         d="M262.536 114.961L263.155 118.943L266.792 117.208L480.72 15.1462L230.8 205.969L220.974
 131.11L220.454 127.141L216.791 128.754L19.448 215.658L249.335 30.1025L262.536 114.961Z"
         transform="translate(0 86)"
-        stroke={primaryColor}
+        stroke={secondaryColor}
         strokeWidth="6"
       />
-      <path d="M0 2L4 0L8 12.5L4 15L0 2Z" transform="translate(400.5 140.5)" fill={primaryColor} />
-      <path d="M0 2L4 0L5.5 4L2 7L0 2Z" transform="translate(434.5 124.5)" fill={primaryColor} />
-      <path d="M0 3L3.5625 0L7.5625 10L3.0625 11.5L0 3Z" transform="translate(64.9375 265.5)" fill={primaryColor} />
-      <path d="M0 3L4 0L10.5 19.5L6.5 21.5L0 3Z" transform="translate(95 241)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(204 163)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(224 230)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(225 258)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(185 229) rotate(-90)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(185 206) rotate(-90)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(138.455 230.464) rotate(150)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(116.455 243.464) rotate(150)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(185 183) rotate(-90)" fill={primaryColor} />
-      <rect width="20" height="4" transform="translate(145 217)" fill={primaryColor} />
-      <rect width="20" height="4" transform="translate(153 229) rotate(-90)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(247 230)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(270 230)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(293.283 222.108) rotate(141)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(310.283 208.108) rotate(141)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(377.239 167.695) rotate(100)" fill={primaryColor} />
-      <rect width="11.7261" height="4" transform="translate(379.976 151.858) rotate(100)" fill={primaryColor} />
-      <rect width="9.60508" height="4" transform="translate(320.981 199.37) rotate(141)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(239 234) rotate(-90)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(239 211) rotate(-90)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(239 188) rotate(-90)" fill={primaryColor} />
-      <rect width="19" height="4" transform="translate(293 230)" fill={primaryColor} />
-      <circle cx="3" cy="3" r="3" transform="translate(327 187)" fill={primaryColor} />
+      <path d="M0 2L4 0L8 12.5L4 15L0 2Z" transform="translate(400.5 140.5)" fill={secondaryColor} />
+      <path d="M0 2L4 0L5.5 4L2 7L0 2Z" transform="translate(434.5 124.5)" fill={secondaryColor} />
+      <path d="M0 3L3.5625 0L7.5625 10L3.0625 11.5L0 3Z" transform="translate(64.9375 265.5)" fill={secondaryColor} />
+      <path d="M0 3L4 0L10.5 19.5L6.5 21.5L0 3Z" transform="translate(95 241)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(204 163)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(224 230)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(225 258)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(185 229) rotate(-90)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(185 206) rotate(-90)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(138.455 230.464) rotate(150)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(116.455 243.464) rotate(150)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(185 183) rotate(-90)" fill={secondaryColor} />
+      <rect width="20" height="4" transform="translate(145 217)" fill={secondaryColor} />
+      <rect width="20" height="4" transform="translate(153 229) rotate(-90)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(247 230)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(270 230)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(293.283 222.108) rotate(141)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(310.283 208.108) rotate(141)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(377.239 167.695) rotate(100)" fill={secondaryColor} />
+      <rect width="11.7261" height="4" transform="translate(379.976 151.858) rotate(100)" fill={secondaryColor} />
+      <rect width="9.60508" height="4" transform="translate(320.981 199.37) rotate(141)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(239 234) rotate(-90)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(239 211) rotate(-90)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(239 188) rotate(-90)" fill={secondaryColor} />
+      <rect width="19" height="4" transform="translate(293 230)" fill={secondaryColor} />
+      <circle cx="3" cy="3" r="3" transform="translate(327 187)" fill={secondaryColor} />
     </SpinnerLightning>
   </SpinnerContainer>
 );