diff --git a/package.json b/package.json index ba85423..4e8d0ec 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@testing-library/react": "^10.0.2", "@types/jest": "^25.2.1", "@types/node": "^13.11.1", + "@types/styled-system__css": "^5.0.8", "commitlint": "^8.3.5", "emotion-theming": "^10.0.27", "husky": "^4.2.5", diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..73c6da7 --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,19 @@ +import { NextPage } from 'next' +import Head from 'next/head' +import { StackContainer } from '@47ng/chakra-next' +import { AnimatedLogo } from '../src/index' + +const DemoPage: NextPage = () => { + return ( + <> + + Chiffre.io - Design System + + + + + + ) +} + +export default DemoPage diff --git a/src/AnimatedLogo.tsx b/src/AnimatedLogo.tsx new file mode 100644 index 0000000..a43aa8c --- /dev/null +++ b/src/AnimatedLogo.tsx @@ -0,0 +1,141 @@ +import React from 'react' +import { SvgBox } from '@47ng/chakra-next' +import { LogoProps, useLogoColors } from './Logo' +import { keyframes, ClassNames } from '@emotion/core' + +export interface AnimatedLogoProps extends LogoProps { + speed?: number +} + +const animation = keyframes` + 10% { + fill: var(--animated-logo-active-dots); + } + 50% { + fill: var(--animated-logo-inactive-dots); + } +` + +export const AnimatedLogo: React.FC = ({ + invertedColors = false, + speed = 1, + ...props +}) => { + const colors = useLogoColors({ invertedColors }) + return ( + + + + + {/* Dots */} + + {({ css }) => { + const animationClass = css({ + animation: `${animation} ${1.5 / speed}s ease infinite` + }) + + return ( + + {/* Lower Dots */} + + + + + + {/* Upper Dots */} + + + + + + + ) + }} + + + ) +} diff --git a/src/Logo.test.tsx b/src/Logo.test.tsx index c1441bc..2cdd143 100644 --- a/src/Logo.test.tsx +++ b/src/Logo.test.tsx @@ -2,8 +2,9 @@ import '@testing-library/jest-dom/extend-expect' import React from 'react' import { render } from '../test/render' import { Logo } from './index' +import { DarkMode, LightMode } from '@chakra-ui/core/dist/ColorModeProvider' -test('Logo - default', () => { +test('Logo - default (dark text for light backgrounds)', () => { const { getByTestId } = render() const element = getByTestId('logo') expect(element).toMatchInlineSnapshot(` @@ -24,19 +25,19 @@ test('Logo - default', () => { fill="#A0AEC0" /> - `) }) -test('Logo - dark', () => { - const { getByTestId } = render() +test('Logo - dark mode (light text for dark backgrounds)', () => { + const { getByTestId } = render( + + + + ) const element = getByTestId('logo') expect(element).toMatchInlineSnapshot(` { fill="#2D3748" /> - `) }) -test('Logo - light', () => { - const { getByTestId } = render() +test('Logo - inverted colors on dark mode', () => { + const { getByTestId } = render( + + + + ) const element = getByTestId('logo') expect(element).toMatchInlineSnapshot(` { fill="#A0AEC0" /> + + `) +}) + +test('Logo - inverted colors on light mode', () => { + const { getByTestId } = render( + + + + ) + const element = getByTestId('logo') + expect(element).toMatchInlineSnapshot(` + + + `) }) diff --git a/src/Logo.tsx b/src/Logo.tsx index d17b326..b1f5860 100644 --- a/src/Logo.tsx +++ b/src/Logo.tsx @@ -1,22 +1,30 @@ import React from 'react' import { useTheme } from '@chakra-ui/core/dist/ThemeProvider' +import { useColorMode } from '@chakra-ui/core/dist/ColorModeProvider' import { SvgBox, SvgBoxProps } from '@47ng/chakra-next' export interface LogoProps extends SvgBoxProps { - light?: boolean - dark?: boolean + invertedColors?: boolean } -export const Logo: React.FC = ({ light, dark, ...props }) => { +export function useLogoColors(props: LogoProps) { const theme = useTheme() - const lightTheme = light || !dark - + const { colorMode } = useColorMode() + const light = colorMode === (props.invertedColors ? 'dark' : 'light') const colors = { - chiffre: theme.colors['gray'][lightTheme ? '700' : '400'], - dotIo: theme.colors['gray'][lightTheme ? '500' : '600'], - dots: theme.colors['gray'][lightTheme ? '400' : '700'] + chiffre: theme.colors['gray'][light ? '700' : '400'], + dotIo: theme.colors['gray'][light ? '500' : '600'], + dots: theme.colors['gray'][light ? '400' : '700'], + dotsActive: theme.colors['gray'][light ? '600' : '500'] } + return colors +} +export const Logo: React.FC = ({ + invertedColors = false, + ...props +}) => { + const colors = useLogoColors({ invertedColors }) return ( = ({ light, dark, ...props }) => { fill={colors.dots} /> - diff --git a/src/index.ts b/src/index.ts index 9b328ea..e105143 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,3 @@ export * from './Logo' +export * from './AnimatedLogo' export * from './leaderboard/Leaderboard' diff --git a/yarn.lock b/yarn.lock index 1a94860..c53d1f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1883,6 +1883,13 @@ dependencies: csstype "^2.6.9" +"@types/styled-system__css@^5.0.8": + version "5.0.8" + resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.8.tgz#3886fc89e003aadda858349a5cf324fe54b09980" + integrity sha512-skv+daDje8vWQ8wnqVV0GCzgWVKx4gI9lJpAxWE77s52Ne6k/SCPP8HGE4BFbWDvK+qi5O3p89BGWVOQ1VHjMg== + dependencies: + csstype "^2.6.6" + "@types/testing-library__dom@*", "@types/testing-library__dom@^7.0.0": version "7.0.1" resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.1.tgz#426bef0aa306a603fe071859d4b485941b28aca6" @@ -3490,7 +3497,7 @@ cssstyle@^2.0.0: dependencies: cssom "~0.3.6" -csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.9: +csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.6, csstype@^2.6.9: version "2.6.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b" integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==