From 6c5de3be72291a5ae4b03f554c1f14261747fb7a Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sat, 12 Jan 2019 11:09:48 +0100 Subject: [PATCH] Implement core atom component to represent a color palette This is a card that renders a color box with the associated color code as label and the title of a color palette. The title can either float above the card (`floatingTitle` prop) or can be placed within the card below the color code labels using the `title` prop. GH-112 --- .../ColorPaletteCard/ColorPaletteCard.jsx | 80 +++++++++++++++++++ .../atoms/core/ColorPaletteCard/index.js | 10 +++ .../core/ColorPaletteCard/shared/styles.js | 36 +++++++++ .../core/ColorPaletteCard/styled/Card.jsx | 43 ++++++++++ .../ColorPaletteCard/styled/CardWrapper.jsx | 25 ++++++ .../core/ColorPaletteCard/styled/Color.jsx | 25 ++++++ .../core/ColorPaletteCard/styled/ColorBox.jsx | 27 +++++++ .../ColorPaletteCard/styled/FloatingTitle.jsx | 39 +++++++++ .../core/ColorPaletteCard/styled/Label.jsx | 32 ++++++++ .../core/ColorPaletteCard/styled/Palette.jsx | 24 ++++++ .../core/ColorPaletteCard/styled/Title.jsx | 41 ++++++++++ .../core/ColorPaletteCard/styled/index.js | 19 +++++ 12 files changed, 401 insertions(+) create mode 100644 src/components/atoms/core/ColorPaletteCard/ColorPaletteCard.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/index.js create mode 100644 src/components/atoms/core/ColorPaletteCard/shared/styles.js create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/Card.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/CardWrapper.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/Color.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/ColorBox.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/FloatingTitle.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/Label.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/Palette.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/Title.jsx create mode 100644 src/components/atoms/core/ColorPaletteCard/styled/index.js diff --git a/src/components/atoms/core/ColorPaletteCard/ColorPaletteCard.jsx b/src/components/atoms/core/ColorPaletteCard/ColorPaletteCard.jsx new file mode 100644 index 00000000..b92ba14a --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/ColorPaletteCard.jsx @@ -0,0 +1,80 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import PropTypes from "prop-types"; + +import { Card, CardWrapper, Color, ColorBox, FloatingTitle, Label, Palette, Title } from "./styled"; + +const ColorCard = ({ color, ...passProps }) => ( + + + + +); + +ColorCard.propTypes = { + color: PropTypes.string.isRequired +}; + +const BaseCard = ({ colors, title, ...passProps }) => ( + + + {colors.map(c => ( + + ))} + + {title && {title}} + +); + +BaseCard.propTypes = { + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + title: PropTypes.string +}; + +BaseCard.defaultProps = { + colors: [], + title: "" +}; + +/** + * A card that renders a color box with the associated color code as label and the title of a color palette. + * The title can either float above the card (`floatingTitle` prop) or can be placed within the card below the color + * code labels. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const ColorPaletteCard = ({ colors, floatingTitle, title, ...passProps }) => { + if (floatingTitle) { + return ( + + {floatingTitle} + + + ); + } + return ; +}; + +ColorPaletteCard.propTypes = { + colors: PropTypes.arrayOf(PropTypes.string).isRequired, + floatingTitle: PropTypes.string, + title: PropTypes.string +}; + +ColorPaletteCard.defaultProps = { + colors: [], + floatingTitle: "", + title: "" +}; + +export default ColorPaletteCard; diff --git a/src/components/atoms/core/ColorPaletteCard/index.js b/src/components/atoms/core/ColorPaletteCard/index.js new file mode 100644 index 00000000..5f451de1 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/index.js @@ -0,0 +1,10 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +export { default } from "./ColorPaletteCard"; diff --git a/src/components/atoms/core/ColorPaletteCard/shared/styles.js b/src/components/atoms/core/ColorPaletteCard/shared/styles.js new file mode 100644 index 00000000..b038d3e7 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/shared/styles.js @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides multiple styles for the `ColorPaletteCard` component. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ + +import { rgba } from "polished"; + +import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +const floatingLineColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord4, 0.8), + [MODE_DARK_NIGHT_FROST]: rgba(colors.nord4, 0.5) +}); + +const dropShadowColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.shadow.base[MODE_BRIGHT_SNOW_FLURRY], 0.35), + [MODE_DARK_NIGHT_FROST]: rgba(colors.shadow.base[MODE_DARK_NIGHT_FROST], 0.2) +}); + +const fontColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.nord3, + [MODE_DARK_NIGHT_FROST]: colors.nord4 +}); + +export { dropShadowColor, floatingLineColor, fontColor }; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/Card.jsx b/src/components/atoms/core/ColorPaletteCard/styled/Card.jsx new file mode 100644 index 00000000..83240b81 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/Card.jsx @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +import { dropShadowColor } from "../shared/styles"; + +const backgroundColor = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.base[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.base[MODE_DARK_NIGHT_FROST] +}); + +/** + * The main container of the color palette card. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Card = styled.div` + display: flex; + background-color: ${backgroundColor}; + flex-direction: column; + box-shadow: 0px 3px 6px 0px ${dropShadowColor}; + border-radius: 0.5em; + transition: box-shadow ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out, + background-color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + overflow: hidden; + + &:hover { + box-shadow: 0px 10px 20px 2px ${dropShadowColor}; + } +`; + +export default Card; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/CardWrapper.jsx b/src/components/atoms/core/ColorPaletteCard/styled/CardWrapper.jsx new file mode 100644 index 00000000..e734423a --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/CardWrapper.jsx @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ +import styled from "styled-components"; + +/** + * The main wrapper of the color palette card and the floating title. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const CardWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; +`; + +export default CardWrapper; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/Color.jsx b/src/components/atoms/core/ColorPaletteCard/styled/Color.jsx new file mode 100644 index 00000000..eaefd20e --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/Color.jsx @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * The container representing a single color code. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Color = styled.div` + background-color: ${({ color }) => color}; + width: 100%; + height: 100%; +`; + +export default Color; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/ColorBox.jsx b/src/components/atoms/core/ColorPaletteCard/styled/ColorBox.jsx new file mode 100644 index 00000000..2fd10ac2 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/ColorBox.jsx @@ -0,0 +1,27 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * The container for a color code component. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const ColorBox = styled.div` + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + height: 10em; +`; + +export default ColorBox; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/FloatingTitle.jsx b/src/components/atoms/core/ColorPaletteCard/styled/FloatingTitle.jsx new file mode 100644 index 00000000..16d3ed29 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/FloatingTitle.jsx @@ -0,0 +1,39 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { motion } from "styles/theme"; + +import { floatingLineColor, fontColor } from "../shared/styles"; + +/** + * The floating title of the color palette. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const FloatingTitle = styled.span` + font-size: 1.5em; + color: ${fontColor}; + text-align: center; + transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + + &:after { + content: ""; + display: block; + height: 1px; + background-color: ${floatingLineColor}; + width: 70%; + margin: 1.2rem auto; + } +`; + +export default FloatingTitle; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/Label.jsx b/src/components/atoms/core/ColorPaletteCard/styled/Label.jsx new file mode 100644 index 00000000..ccb88a1a --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/Label.jsx @@ -0,0 +1,32 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { motion } from "styles/theme"; + +import { fontColor } from "../shared/styles"; + +/** + * The label for a color code. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Label = styled.div` + font-size: 0.875em; + text-transform: uppercase; + padding: 0.8em 0; + text-align: center; + color: ${fontColor}; + transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; +`; + +export default Label; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/Palette.jsx b/src/components/atoms/core/ColorPaletteCard/styled/Palette.jsx new file mode 100644 index 00000000..71643869 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/Palette.jsx @@ -0,0 +1,24 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * The container for all color code components. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Palette = styled.div` + display: flex; + overflow: hidden; +`; + +export default Palette; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/Title.jsx b/src/components/atoms/core/ColorPaletteCard/styled/Title.jsx new file mode 100644 index 00000000..85a7f0c3 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/Title.jsx @@ -0,0 +1,41 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { motion } from "styles/theme"; + +import { floatingLineColor, fontColor } from "../shared/styles"; + +/** + * The title of the color palette. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.6.0 + */ +const Title = styled.div` + font-size: 1.1em; + color: ${fontColor}; + text-align: center; + padding: 0.5em 0; + transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out; + + &:before { + content: ""; + display: block; + height: 1px; + background-color: ${floatingLineColor}; + width: 70%; + margin: 0.568em auto; + border-radius: 1px; + } +`; + +export default Title; diff --git a/src/components/atoms/core/ColorPaletteCard/styled/index.js b/src/components/atoms/core/ColorPaletteCard/styled/index.js new file mode 100644 index 00000000..a9952508 --- /dev/null +++ b/src/components/atoms/core/ColorPaletteCard/styled/index.js @@ -0,0 +1,19 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import Card from "./Card"; +import CardWrapper from "./CardWrapper"; +import Color from "./Color"; +import ColorBox from "./ColorBox"; +import FloatingTitle from "./FloatingTitle"; +import Label from "./Label"; +import Palette from "./Palette"; +import Title from "./Title"; + +export { Card, CardWrapper, Color, ColorBox, FloatingTitle, Label, Palette, Title };