feat(website): update colors guide

plouc · Apr 17, 2019 · 99e66e1 · 99e66e1
1 parent e895556
commit 99e66e1
Show file tree

Hide file tree

Showing 10 changed files with 293 additions and 123 deletions.
diff --git a/website/src/components/controls/InheritedColorControl.js b/website/src/components/controls/InheritedColorControl.js
@@ -16,50 +16,13 @@ import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import { Help } from './styled'
 import Select from './Select'
+import InheritedColorModifierControl from './InheritedColorModifierControl'
 
 const themeProperties = ['background', 'grid.line.stroke', 'labels.text.fill'].map(prop => ({
     label: prop,
     value: prop,
 }))
 
-const TypeSelector = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    margin-bottom: 10px;
-`
-
-const TypeSelectorItem = styled.span`
-    cursor: pointer;
-    padding: 5px 9px;
-    text-align: center;
-    font-weight: ${({ isActive }) => (isActive ? 600 : 400)};
-    background: ${({ isActive, theme }) =>
-        isActive ? theme.colors.cardBackground : theme.colors.background};
-    color: ${({ isActive, theme }) => (isActive ? theme.colors.accent : theme.colors.textLight)};
-    border: 1px solid ${({ theme }) => theme.colors.border};
-    border-left-width: 0;
-    box-shadow: ${({ isActive }) => (isActive ? 'none' : '0 1px 1px rgba(0, 0, 0, 0.1) inset')};
-
-    &:first-child {
-        border-left-width: 1px;
-        border-top-left-radius: 3px;
-        border-bottom-left-radius: 3px;
-    }
-    &:last-child {
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-    }
-
-    &:hover {
-        color: ${({ isActive, theme }) => (isActive ? theme.colors.accent : theme.colors.text)};
-        box-shadow: none;
-    }
-`
-
-const SubLabel = styled.div`
-    margin-bottom: 5px;
-`
-
 const InheritedColorControl = ({
     id,
     property,
@@ -77,36 +40,56 @@ const InheritedColorControl = ({
     const [fromProp, setFromProp] = useState(
         isPlainObject(value) && value.from !== undefined ? value.from : defaultFrom
     )
+    const [modifiers, setModifiers] = useState(
+        isPlainObject(value) && value.modifiers !== undefined ? value.modifiers : []
+    )
 
     let type
     let subControl = null
 
     const handleTypeChange = useCallback(
         type => {
-            if (type === 'custom') {
-                onChange(customColor)
-            }
-            if (type === 'theme') {
-                onChange({ theme: themeProp })
-            }
-            if (type === 'inherit') {
-                onChange({ from: fromProp })
-            }
+            if (type === 'custom') onChange(customColor)
+            if (type === 'theme') onChange({ theme: themeProp })
+            if (type === 'inherit') onChange({ from: fromProp, modifiers })
         },
         [onChange]
     )
-
     const handleThemePropertyChange = useCallback(
         value => {
             setThemeProp(value.value)
             onChange({ theme: value.value })
         },
         [onChange, setThemeProp]
     )
+    const handleModifierChange = useCallback(
+        index => modifier => {
+            const newModifiers = [...modifiers]
+            newModifiers[index] = modifier
+            setModifiers(newModifiers)
+            onChange({
+                from: fromProp,
+                modifiers: newModifiers,
+            })
+        },
+        [onChange, modifiers]
+    )
+    const handleCustomColorChange = useCallback(
+        event => {
+            setCustomColor(event.target.value)
+            onChange(event.target.value)
+        },
+        [onChange, setCustomColor]
+    )
 
     if (isString(value)) {
         type = 'custom'
-        subControl = <div>static color: {value}</div>
+        subControl = (
+            <CustomColor>
+                <input type="color" onChange={handleCustomColorChange} value={value} />
+                <code>{value}</code>
+            </CustomColor>
+        )
     } else if (isPlainObject(value)) {
         if (value.theme !== undefined) {
             type = 'theme'
@@ -134,6 +117,15 @@ const InheritedColorControl = ({
                         value={propertyOptions.find(prop => prop.value === value.from)}
                         //onChange={handleThemePropertyChange}
                     />
+                    <SubLabel>modifiers</SubLabel>
+                    {modifiers.length === 0 && <NoModifiers>No modifier.</NoModifiers>}
+                    {modifiers.map((modifier, i) => (
+                        <InheritedColorModifierControl
+                            key={i}
+                            modifier={modifier}
+                            onChange={handleModifierChange(i)}
+                        />
+                    ))}
                 </>
             )
         }
@@ -171,9 +163,6 @@ const InheritedColorControl = ({
 InheritedColorControl.propTypes = {
     property: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
-    //defaultGammaValue: PropTypes.number.isRequired,
-    //withTheme: PropTypes.bool.isRequired,
-    //withCustomColor: PropTypes.bool.isRequired,
     inheritableProperties: PropTypes.arrayOf(PropTypes.string).isRequired,
     defaultCustomColor: PropTypes.string.isRequired,
     defaultThemeProperty: PropTypes.string.isRequired,
@@ -188,3 +177,57 @@ InheritedColorControl.defaultProps = {
 }
 
 export default InheritedColorControl
+
+const TypeSelector = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    margin-bottom: 10px;
+`
+
+const TypeSelectorItem = styled.span`
+    cursor: pointer;
+    padding: 5px 9px;
+    text-align: center;
+    font-weight: ${({ isActive }) => (isActive ? 600 : 400)};
+    background: ${({ isActive, theme }) =>
+        isActive ? theme.colors.cardBackground : theme.colors.background};
+    color: ${({ isActive, theme }) => (isActive ? theme.colors.accent : theme.colors.textLight)};
+    border: 1px solid ${({ theme }) => theme.colors.border};
+    border-left-width: 0;
+    box-shadow: ${({ isActive }) => (isActive ? 'none' : '0 1px 1px rgba(0, 0, 0, 0.1) inset')};
+
+    &:first-child {
+        border-left-width: 1px;
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+    }
+    &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+    }
+
+    &:hover {
+        color: ${({ isActive, theme }) => (isActive ? theme.colors.accent : theme.colors.text)};
+        box-shadow: none;
+    }
+`
+
+const SubLabel = styled.div`
+    margin-bottom: 5px;
+    font-size: 0.8rem;
+`
+
+const CustomColor = styled.div`
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    grid-column-gap: 10px;
+    margin-bottom: 5px;
+`
+
+const NoModifiers = styled.div`
+    color: ${({ theme }) => theme.colors.textLight};
+    font-style: italic;
+    font-size: 0.8rem;
+    margin-bottom: 5px;
+`
diff --git a/website/src/components/controls/InheritedColorModifierControl.js b/website/src/components/controls/InheritedColorModifierControl.js
@@ -0,0 +1,58 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import Select from './Select'
+import TextInput from './TextInput'
+
+const modifierTypes = ['brighter', 'darker', 'opacity'].map(prop => ({
+    label: prop,
+    value: prop,
+}))
+
+const InheritedColorModifierControl = ({ modifier, onChange }) => {
+    return (
+        <Container>
+            <Select
+                options={modifierTypes}
+                value={modifierTypes.find(prop => prop.value === modifier[0])}
+                onChange={value => onChange([value.value, modifier[1]])}
+            />
+            <TextInput
+                value={modifier[1]}
+                isNumber={true}
+                onChange={event => onChange([modifier[0], event.target.value])}
+            />
+            <input
+                type="range"
+                value={modifier[1]}
+                min={0}
+                max={2}
+                step={0.1}
+                onChange={event => onChange([modifier[0], event.target.value])}
+            />
+        </Container>
+    )
+}
+
+InheritedColorModifierControl.propTypes = {
+    modifier: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+}
+
+export default InheritedColorModifierControl
+
+const Container = styled.div`
+    display: grid;
+    grid-template-columns: 110px 40px auto;
+    margin-bottom: 5px;
+    align-items: center;
+    grid-column-gap: 12px;
+`
diff --git a/website/src/components/controls/OrdinalColorsControl.js b/website/src/components/controls/OrdinalColorsControl.js
@@ -85,11 +85,13 @@ const OrdinalColorsControl = ({ property, value, onChange }) => {
                     Option,
                 }}
             />
+            {/*
             <Value>
                 {`{ scheme: `}
                 <code className="code-string">'{value.scheme}'</code>
                 {` }`}
             </Value>
+            */}
             <Help>{property.help}</Help>
         </Control>
     )