From 08c30768a55c8be7908bee720b1e69ef7f6de02f Mon Sep 17 00:00:00 2001 From: plusk Date: Wed, 16 Oct 2019 23:14:07 +0200 Subject: [PATCH 1/5] Add attempt at internal theme switcher --- .../internal/ToggleBackgroundContainer.tsx | 42 +++++++++++++++++++ src/index.ts | 2 + 2 files changed, 44 insertions(+) create mode 100644 src/components/internal/ToggleBackgroundContainer.tsx diff --git a/src/components/internal/ToggleBackgroundContainer.tsx b/src/components/internal/ToggleBackgroundContainer.tsx new file mode 100644 index 0000000..7857b34 --- /dev/null +++ b/src/components/internal/ToggleBackgroundContainer.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { colors } from 'common/colors'; +import { useState } from 'react'; +import Checkbox from '../checkbox/Checkbox'; + +interface ContrastProps { + children: React.ReactNode; + isDark?: boolean; +} + +const StyledContainer = styled.div<{ contrast: boolean }>` + display: block; + width: fit-content; + border-radius: 3px; + border: 1px solid ${colors.grayslightGray}; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-top: 1rem; + padding: 0.5rem; + + & > * { + margin: 0.5rem; + } + + background-image: linear-gradient(0, ${colors.primaryDark} 0, ${colors.primaryDark} 0); + background-size: 100% 200%; + background-position: ${({ contrast }) => !contrast && '0 '}-100%; + background-repeat: no-repeat; + transition: background 0.5s ease-in-out; +`; + +const ToggleBackgroundContainer = ({ children, isDark = false }: ContrastProps) => { + const [contrastTheme, useContrastTheme] = useState(isDark); + return ( +
+ useContrastTheme(!contrastTheme)} /> + {children} +
+ ); +}; + +export default ToggleBackgroundContainer; diff --git a/src/index.ts b/src/index.ts index 4725fe7..eafc47a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,3 +18,5 @@ export { default as StaticLogo } from 'components/logo/StaticLogo'; export { default as TextField } from 'components/textField/TextField'; export { default as ToggleSwitch } from 'components/toggleSwitch/ToggleSwitch'; export { default as Card } from 'components/cards/Card'; + +export { default as ToggleBackgroundContainer } from 'components/internal/ToggleBackgroundContainer'; From 1ef384ae2d605a60b7e50089043f47e1462bc8d1 Mon Sep 17 00:00:00 2001 From: plusk Date: Wed, 16 Oct 2019 23:18:57 +0200 Subject: [PATCH 2/5] Use ToggleBackgroundContainer a few places, change main logo --- src/components/button/Button.stories.mdx | 50 ++++++++++++------------ src/components/logo/Logo.stories.mdx | 9 +++-- src/components/logo/Logo.tsx | 9 +---- src/intro.stories.mdx | 6 +-- 4 files changed, 34 insertions(+), 40 deletions(-) diff --git a/src/components/button/Button.stories.mdx b/src/components/button/Button.stories.mdx index 3a8c756..df9d520 100644 --- a/src/components/button/Button.stories.mdx +++ b/src/components/button/Button.stories.mdx @@ -1,5 +1,6 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import Button from './Button'; +import ToggleBackgroundContainer from '../internal/ToggleBackgroundContainer'; @@ -7,32 +8,29 @@ import Button from './Button'; - <> -
- - - - - -
-
- - - - - -
- + + + + + + +
+ + + + + + diff --git a/src/components/logo/Logo.stories.mdx b/src/components/logo/Logo.stories.mdx index 2440210..e367d87 100644 --- a/src/components/logo/Logo.stories.mdx +++ b/src/components/logo/Logo.stories.mdx @@ -3,6 +3,7 @@ import StaticLogo from './StaticLogo'; import Logo from './Logo'; import StaticSpinnerLogo from './StaticSpinnerLogo'; import LightningO from './LightningO'; +import ToggleBackgroundContainer from '../internal/ToggleBackgroundContainer'; @@ -13,7 +14,9 @@ This is the official logo, meant to be used in its full form. - + + + @@ -54,8 +57,8 @@ This can be used in places where the larger logo cannot fit, as a favicon, or ap -# Futuristic Logo (Static Spinner) - +# Futuristic Logo (Static Spinner) + **NOT APPROVED FOR OFFICIAL USE** diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index 7de3933..2ea35c4 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -1,11 +1,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,13 +12,12 @@ type OwnProps = Partial; const proportion = 59 / 239; export const FullLogo = styled.svg` - background-color: ${({ backgroundColor }) => colors[backgroundColor] + ';'}; ${({ size }) => 'width: ' + size / proportion + 'px; height: ' + size + 'px;'}; `; -const Logo = ({ backgroundColor = 'primary', textColor = '#FFF', lightningColor = '#F9A11B', size = 59 }: OwnProps) => { +const Logo = ({ textColor = '#FFF', lightningColor = '#F9A11B', size = 59 }: OwnProps) => { return ( - + diff --git a/src/intro.stories.mdx b/src/intro.stories.mdx index d221981..504f68c 100644 --- a/src/intro.stories.mdx +++ b/src/intro.stories.mdx @@ -2,11 +2,9 @@ import Logo from 'components/logo/Logo'; -# Online Design System + - - - +# # Get started From b80580582116c45eda5a7ac67bf0a993b6109468 Mon Sep 17 00:00:00 2001 From: plusk Date: Thu, 17 Oct 2019 10:25:00 +0200 Subject: [PATCH 3/5] Replaced theme switcher with a simple example container --- src/components/button/Button.stories.mdx | 13 ++++-- .../internal/ToggleBackgroundContainer.tsx | 42 ------------------- src/components/logo/Logo.stories.mdx | 5 +-- src/index.ts | 2 - 4 files changed, 11 insertions(+), 51 deletions(-) delete mode 100644 src/components/internal/ToggleBackgroundContainer.tsx diff --git a/src/components/button/Button.stories.mdx b/src/components/button/Button.stories.mdx index df9d520..6703494 100644 --- a/src/components/button/Button.stories.mdx +++ b/src/components/button/Button.stories.mdx @@ -1,6 +1,13 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import Button from './Button'; -import ToggleBackgroundContainer from '../internal/ToggleBackgroundContainer'; +import styled from 'styled-components'; + +export const ExampleButtonContainer = styled.div` + margin: -0.5rem; + & > \* { + margin: 0.5rem; + } +`; @@ -8,7 +15,7 @@ import ToggleBackgroundContainer from '../internal/ToggleBackgroundContainer'; - + @@ -30,7 +37,7 @@ import ToggleBackgroundContainer from '../internal/ToggleBackgroundContainer'; - + diff --git a/src/components/internal/ToggleBackgroundContainer.tsx b/src/components/internal/ToggleBackgroundContainer.tsx deleted file mode 100644 index 7857b34..0000000 --- a/src/components/internal/ToggleBackgroundContainer.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; -import { colors } from 'common/colors'; -import { useState } from 'react'; -import Checkbox from '../checkbox/Checkbox'; - -interface ContrastProps { - children: React.ReactNode; - isDark?: boolean; -} - -const StyledContainer = styled.div<{ contrast: boolean }>` - display: block; - width: fit-content; - border-radius: 3px; - border: 1px solid ${colors.grayslightGray}; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-top: 1rem; - padding: 0.5rem; - - & > * { - margin: 0.5rem; - } - - background-image: linear-gradient(0, ${colors.primaryDark} 0, ${colors.primaryDark} 0); - background-size: 100% 200%; - background-position: ${({ contrast }) => !contrast && '0 '}-100%; - background-repeat: no-repeat; - transition: background 0.5s ease-in-out; -`; - -const ToggleBackgroundContainer = ({ children, isDark = false }: ContrastProps) => { - const [contrastTheme, useContrastTheme] = useState(isDark); - return ( -
- useContrastTheme(!contrastTheme)} /> - {children} -
- ); -}; - -export default ToggleBackgroundContainer; diff --git a/src/components/logo/Logo.stories.mdx b/src/components/logo/Logo.stories.mdx index e367d87..1652f6f 100644 --- a/src/components/logo/Logo.stories.mdx +++ b/src/components/logo/Logo.stories.mdx @@ -3,7 +3,6 @@ import StaticLogo from './StaticLogo'; import Logo from './Logo'; import StaticSpinnerLogo from './StaticSpinnerLogo'; import LightningO from './LightningO'; -import ToggleBackgroundContainer from '../internal/ToggleBackgroundContainer'; @@ -14,9 +13,7 @@ This is the official logo, meant to be used in its full form. - - - + diff --git a/src/index.ts b/src/index.ts index eafc47a..4725fe7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,5 +18,3 @@ export { default as StaticLogo } from 'components/logo/StaticLogo'; export { default as TextField } from 'components/textField/TextField'; export { default as ToggleSwitch } from 'components/toggleSwitch/ToggleSwitch'; export { default as Card } from 'components/cards/Card'; - -export { default as ToggleBackgroundContainer } from 'components/internal/ToggleBackgroundContainer'; From f7186d10c7c6efa5d3aae5d6bedd2e2b1cd63cce Mon Sep 17 00:00:00 2001 From: plusk Date: Thu, 17 Oct 2019 11:54:04 +0200 Subject: [PATCH 4/5] Added and used official colors for logos --- src/common/colors.ts | 2 ++ src/components/logo/LightningO.tsx | 7 ++++++- src/components/logo/Logo.tsx | 7 ++++++- src/components/logo/StaticLogo.tsx | 7 ++++++- src/components/logo/StaticSpinnerLogo.tsx | 5 +++-- src/intro.stories.mdx | 2 +- 6 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/common/colors.ts b/src/common/colors.ts index 798ccdb..c1dd671 100644 --- a/src/common/colors.ts +++ b/src/common/colors.ts @@ -1,4 +1,6 @@ export const colors = { + officialBlue: '#0060A3', + officialOrange: '#FAA21B', hotpink: 'hotpink', primary: '#0068B3', primaryLight: '#008CF0', diff --git a/src/components/logo/LightningO.tsx b/src/components/logo/LightningO.tsx index ba29311..ce97915 100644 --- a/src/components/logo/LightningO.tsx +++ b/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` ${({ 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 ( diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index d0d1886..bf2281e 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { colors } from 'common/colors'; interface LogoProps { size: number; @@ -15,7 +16,11 @@ export const FullLogo = styled.svg` ${({ size }): string => 'width: ' + size / proportion + 'px; height: ' + size + 'px;'}; `; -const Logo = ({ textColor = '#FFF', lightningColor = '#F9A11B', size = 59 }: OwnProps): JSX.Element => { +const Logo = ({ + textColor = colors.officialBlue, + lightningColor = colors.officialOrange, + size = 59, +}: OwnProps): JSX.Element => { return ( diff --git a/src/components/logo/StaticLogo.tsx b/src/components/logo/StaticLogo.tsx index b6053bc..cd542ca 100644 --- a/src/components/logo/StaticLogo.tsx +++ b/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 => ( ( diff --git a/src/intro.stories.mdx b/src/intro.stories.mdx index 504f68c..4bdbe2b 100644 --- a/src/intro.stories.mdx +++ b/src/intro.stories.mdx @@ -2,7 +2,7 @@ import Logo from 'components/logo/Logo'; - + # From 8e35156f2313af2325d4f0bdd408a19d0d08789e Mon Sep 17 00:00:00 2001 From: plusk Date: Wed, 23 Oct 2019 20:54:32 +0200 Subject: [PATCH 5/5] Invert colors for spinner logos --- src/components/logo/StaticSpinnerLogo.tsx | 74 ++++++++++----------- src/components/spinner/SpinnerLogo.tsx | 81 ++++++++++++----------- 2 files changed, 80 insertions(+), 75 deletions(-) diff --git a/src/components/logo/StaticSpinnerLogo.tsx b/src/components/logo/StaticSpinnerLogo.tsx index d4c88e0..2186024 100644 --- a/src/components/logo/StaticSpinnerLogo.tsx +++ b/src/components/logo/StaticSpinnerLogo.tsx @@ -35,7 +35,7 @@ const StaticSpinnerLogo = ({ cy="200" r="198" transform="translate(53)" - stroke={secondaryColor} + stroke={primaryColor} strokeWidth="4" strokeDasharray="48 10" /> @@ -44,59 +44,59 @@ const StaticSpinnerLogo = ({ cy="163" r="161" transform="translate(89 36)" - stroke={secondaryColor} + stroke={primaryColor} strokeWidth="4" strokeDasharray="42 10" /> - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/src/components/spinner/SpinnerLogo.tsx b/src/components/spinner/SpinnerLogo.tsx index cccad48..f452dec 100644 --- a/src/components/spinner/SpinnerLogo.tsx +++ b/src/components/spinner/SpinnerLogo.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled, { keyframes } from 'styled-components'; +import { colors } from 'common/colors'; export interface SpinnerLogoProps { primaryColor?: string; @@ -34,7 +35,11 @@ const SpinnerLightning = styled.svg` z-index: 1; `; -const SpinnerLogo = ({ primaryColor = '#FAA21B', secondaryColor = '#0060A3', size = '100px' }: SpinnerLogoProps) => ( +const SpinnerLogo = ({ + primaryColor = colors.officialBlue, + secondaryColor = colors.officialOrange, + size = '100px', +}: SpinnerLogoProps): JSX.Element => ( @@ -51,59 +56,59 @@ const SpinnerLogo = ({ primaryColor = '#FAA21B', secondaryColor = '#0060A3', siz cy="163" r="161" transform="translate(89 36)" - stroke={secondaryColor} + stroke={primaryColor} strokeWidth="4" strokeDasharray="42 10" /> - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + );