feat(website): add markdown support to component properties help content

website/src/components/Markdown.js

@@ -1,11 +1,3 @@
-/*
- * 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, { memo } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
@@ -26,7 +18,7 @@ const linkRenderer = ({ href, children }) => {
     }
 
     return (
-        <a href={uri} target="_blank" rel="noopener noreferrer">
+        <a href={uri} rel="noopener noreferrer">
             {children}
         </a>
     )

website/src/components/controls/AngleControl.js

@@ -1,18 +1,10 @@
-/*
- * 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, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const size = 36
 const center = size / 2

website/src/components/controls/ArrayControl.js

@@ -1,17 +1,10 @@
-/*
- * 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, { memo, Fragment, useMemo, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import PropertyHeader from './PropertyHeader'
 import ControlsGroup from './ControlsGroup'
-import { Cell, Toggle, Help } from './styled'
+import { Cell, Toggle } from './styled'
+import { Help } from './Help'
 
 const ArrayControl = memo(
     ({

website/src/components/controls/BoxAnchorControl.js

@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, 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 styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const boxWidth = 80
 const boxHeight = 50

website/src/components/controls/ChoicesControl.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Control from './Control'
 import Select from './Select'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const ChoicesControl = memo(
     ({ id, property, flavors, currentFlavor, value: _value, options, onChange }) => {

website/src/components/controls/ColorPickerControl.js

@@ -1,16 +1,8 @@
-/*
- * 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, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 class ColorPickerControl extends Component {
     handleChange = e => {

website/src/components/controls/ColorsControl.js

@@ -1,11 +1,3 @@
-/*
- * 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, { PureComponent } from 'react'
 import range from 'lodash/range'
 import PropTypes from 'prop-types'
@@ -19,7 +11,7 @@ import { components } from 'react-select'
 import ColorsControlItem from './ColorsControlItem'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Select from './Select'
 
 const colors = colorSchemeIds.map(id => ({

website/src/components/controls/Control.js

@@ -1,11 +1,3 @@
-/*
- * 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, { useState, useCallback } from 'react'
 import intersection from 'lodash/intersection'
 import PropTypes from 'prop-types'
@@ -60,7 +52,6 @@ export default Control
 
 const Container = styled(Cell)`
     border-bottom: 1px solid ${({ theme }) => theme.colors.borderLight};
-    // opacity: ${({ isPropertySupported }) => (isPropertySupported ? 1 : 0.5)};
 
     &:last-child {
         border-bottom-width: 0;
@@ -70,7 +61,6 @@ const Container = styled(Cell)`
 const Toggle = styled.span`
     display: block;
     position: absolute;
-    background: red;
     width: 20px;
     top: 0;
     bottom: 0;

website/src/components/controls/Help.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import styled from 'styled-components'
+import dedent from 'dedent-js'
+import Markdown from '../Markdown'
+
+export const Container = styled.div`
+    display: inline;
+    font-size: 0.8rem;
+    color: ${({ theme }) => theme.colors.textLight};
+    
+    p {
+        display: inline;
+    }
+    
+    a {
+        color: ${({ theme }) => theme.colors.text};
+    }
+`
+
+export const Help = ({ children }) => (
+    <Container>
+        <Markdown source={dedent(children)} />
+    </Container>
+)

website/src/components/controls/InheritedColorControl.js

@@ -1,11 +1,3 @@
-/*
- * 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, { useState, useCallback } from 'react'
 import isString from 'lodash/isString'
 import isPlainObject from 'lodash/isPlainObject'
@@ -14,7 +6,7 @@ import styled from 'styled-components'
 import { inheritedColorPropType } from '@nivo/colors'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Select from './Select'
 import InheritedColorModifierControl from './InheritedColorModifierControl'
 

website/src/components/controls/LineWidthControl.js

@@ -1,17 +1,9 @@
-/*
- * 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, { memo, useCallback } from 'react'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const size = 24
 

website/src/components/controls/MarginControl.js

@@ -1,18 +1,10 @@
-/*
- * 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, { Component } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const Grid = styled.div`
     display: grid;

website/src/components/controls/MotionConfigControl.js

@@ -1,11 +1,3 @@
-/*
- * 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, { memo, useCallback, useState } from 'react'
 import { config as springConfig } from '@react-spring/web'
 import { isString } from 'lodash'
@@ -15,7 +7,7 @@ import PropertyHeader from './PropertyHeader'
 import Radio from './Radio'
 import Select from './Select'
 import Switch from './Switch'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const Row = styled.div`
     display: grid;

website/src/components/controls/NumberArrayControl.js

@@ -1,19 +1,11 @@
-/*
- * 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, { Fragment, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import Label from './Label'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const Range = styled.input`
     max-width: 160px;

website/src/components/controls/ObjectControl.js

@@ -1,17 +1,10 @@
-/*
- * 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, { memo, useMemo, useState, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import ControlsGroup from './ControlsGroup'
 import PropertyHeader from './PropertyHeader'
-import { Cell, Toggle, Help } from './styled'
+import { Cell, Toggle } from './styled'
+import { Help } from './Help'
 
 const ObjectControl = memo(
     ({

website/src/components/controls/OpacityControl.js

@@ -1,18 +1,10 @@
-/*
- * 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, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
 import TextInput from './TextInput'
-import { Help } from './styled'
+import { Help } from './Help'
 import { useTheme } from '../../theming/context'
 
 const size = 24

website/src/components/controls/OrdinalColorsControl.js

@@ -1,11 +1,3 @@
-/*
- * 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, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
@@ -20,7 +12,7 @@ import { components } from 'react-select'
 import ColorsControlItem from './ColorsControlItem'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Select from './Select'
 
 const Value = styled.div`

website/src/components/controls/PropertyDocumentation.js

@@ -1,16 +1,8 @@
-/*
- * 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 Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const PropertyDocumentation = ({ id, property, flavors, currentFlavor }) => {
     return (

website/src/components/controls/QuantizeColorsControl.js

@@ -1,19 +1,11 @@
-/*
- * 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, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { quantizeColorScales } from '@nivo/core'
 import Select from './Select'
 import ColorsControlItem from './ColorsControlItem'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 
 const options = Object.keys(quantizeColorScales).map(id => ({
     id,

website/src/components/controls/RadioControl.js

@@ -1,16 +1,8 @@
-/*
- * This file is part of the nivo project.
- *
- * Copyright 2016-present, Raphaël Benitte.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
 import React, { memo, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import Control from './Control'
 import PropertyHeader from './PropertyHeader'
-import { Help } from './styled'
+import { Help } from './Help'
 import Radio from './Radio'
 
 const RadioControl = memo(({ id, property, flavors, currentFlavor, options, value, onChange }) => {