feat(bump): add screenshots

conf/base.yaml

@@ -8,6 +8,14 @@ capture:
       #
       #########################################################################
 
+      - path: /area-bump/
+        selector: '#chart'
+        output: ./packages/bump/doc/area-bump.png
+
+      - path: /bump/
+        selector: '#chart'
+        output: ./packages/bump/doc/bump.png
+
       # - path: /swarmplot
       #   selector: '#chart'
       #   output: ./packages/swarmplot/doc/swarmplot.png
@@ -149,6 +157,19 @@ capture:
       #  capture charts' icons
       #
       #########################################################################
+      - path: /internal/icons/
+        selector: '#area-bump-lightNeutral'
+        output: ./website/src/assets/icons/area-bump-light-neutral.png
+      - path: /internal/icons/
+        selector: '#area-bump-lightColored'
+        output: ./website/src/assets/icons/area-bump-light-colored.png
+      - path: /internal/icons/
+        selector: '#area-bump-darkNeutral'
+        output: ./website/src/assets/icons/area-bump-dark-neutral.png
+      - path: /internal/icons/
+        selector: '#area-bump-darkColored'
+        output: ./website/src/assets/icons/area-bump-dark-colored.png
+
       # - path: /internal/icons/
       #   selector: '#bar-lightNeutral'
       #   output: ./website/src/assets/icons/bar-light-neutral.png

packages/bump/README.md

@@ -7,3 +7,9 @@
 [documentation](http://nivo.rocks/bump/)
 
 ![Bump](https://raw.githubusercontent.com/plouc/nivo/master/packages/bump/doc/bump.png)
+
+## AreaBump
+
+[documentation](http://nivo.rocks/area-bump/)
+
+![Bump](https://raw.githubusercontent.com/plouc/nivo/master/packages/bump/doc/area-bump.png)

packages/bump/src/area-bump/StaticArea.js

@@ -41,6 +41,7 @@ StaticArea.propTypes = {
         style: PropTypes.shape({
             fillOpacity: PropTypes.number.isRequired,
             borderWidth: PropTypes.number.isRequired,
+            borderColor: PropTypes.string.isRequired,
             borderOpacity: PropTypes.number.isRequired,
         }).isRequired,
     }).isRequired,

website/src/components/icons/AreaBumpIcon.js

@@ -0,0 +1,153 @@
+/*
+ * 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 { AreaBump } from '@nivo/bump'
+import bumpLightNeutralImg from '../../assets/icons/bump-light-neutral.png'
+import bumpLightColoredImg from '../../assets/icons/bump-light-colored.png'
+import bumpDarkNeutralImg from '../../assets/icons/bump-dark-neutral.png'
+import bumpDarkColoredImg from '../../assets/icons/bump-dark-colored.png'
+import { ICON_SIZE, Icon, colors, IconImg } from './styled'
+
+const chartProps = {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    data: [
+        {
+            id: 'A',
+            data: [
+                {
+                    x: -1,
+                    y: 2,
+                },
+                {
+                    x: 0,
+                    y: 2,
+                },
+                {
+                    x: 1,
+                    y: 3,
+                },
+                {
+                    x: 2,
+                    y: 3,
+                },
+                {
+                    x: 3,
+                    y: 3,
+                },
+            ],
+        },
+        {
+            id: 'B',
+            data: [
+                {
+                    x: -1,
+                    y: 1,
+                },
+                {
+                    x: 0,
+                    y: 1,
+                },
+                {
+                    x: 1,
+                    y: 1,
+                },
+                {
+                    x: 2,
+                    y: 2,
+                },
+                {
+                    x: 3,
+                    y: 2,
+                },
+            ],
+        },
+        {
+            id: 'C',
+            data: [
+                {
+                    x: -1,
+                    y: 2,
+                },
+                {
+                    x: 0,
+                    y: 2,
+                },
+                {
+                    x: 1,
+                    y: 2,
+                },
+                {
+                    x: 2,
+                    y: 1,
+                },
+                {
+                    x: 3,
+                    y: 1,
+                },
+            ],
+        },
+    ],
+    margin: {
+        top: 8,
+        right: 5,
+        bottom: 8,
+        left: 5,
+    },
+    align: 'end',
+    spacing: 4,
+    borderWidth: 0,
+    endLabel: false,
+    axisTop: null,
+    axisBottom: null,
+    enableGridX: false,
+    isInteractive: true,
+}
+
+const AreaBumpIconItem = ({ type }) => (
+    <Icon id={`area-bump-${type}`} type={type}>
+        <AreaBump
+            {...chartProps}
+            colors={colors[type].colors}
+            theme={{
+                axis: {
+                    domain: {
+                        line: {
+                            stroke: colors[type].colors[3],
+                            strokeWidth: 3,
+                            strokeLinecap: 'square',
+                        },
+                    },
+                },
+                grid: {
+                    line: {
+                        strokeWidth: 2,
+                        strokeOpacity: 0.5,
+                        stroke: colors[type].colors[1],
+                    },
+                },
+            }}
+        />
+    </Icon>
+)
+
+const AreaBumpIcon = () => (
+    <>
+        <AreaBumpIconItem type="lightNeutral" />
+        <IconImg url={bumpLightNeutralImg} />
+        <AreaBumpIconItem type="lightColored" />
+        <IconImg url={bumpLightColoredImg} />
+        <AreaBumpIconItem type="darkNeutral" />
+        <IconImg url={bumpDarkNeutralImg} />
+        <AreaBumpIconItem type="darkColored" />
+        <IconImg url={bumpDarkColoredImg} />
+    </>
+)
+
+export default AreaBumpIcon

website/src/components/icons/Icons.js

@@ -8,6 +8,7 @@
  */
 import React, { Fragment } from 'react'
 import { Container } from './styled'
+import AreaBumpIcon from './AreaBumpIcon'
 import BarIcon from './BarIcon'
 import BulletIcon from './BulletIcon'
 import BumpIcon from './BumpIcon'
@@ -61,11 +62,12 @@ const ColorsDemo = ({ type }) => {
 
 const Icons = () => (
     <Container>
-        <BumpIcon />
+        <AreaBumpIcon />
         <ColorsDemo type="lightNeutral" />
         <ColorsDemo type="lightColored" />
         <ColorsDemo type="darkNeutral" />
         <ColorsDemo type="darkColored" />
+        <BumpIcon />
         <NetworkIcon />
         <BarIcon />
         <CirclePackingIcon />

website/src/data/nav.js

@@ -35,7 +35,7 @@ export const components = [
     {
         label: 'AreaBump',
         path: '/area-bump/',
-        icon: 'bump',
+        icon: 'area-bump',
         tags: areaBump.AreaBump.tags,
     },
     {

website/src/pages/area-bump/index.js

@@ -77,7 +77,7 @@ const Bump = () => {
         <ComponentTemplate
             name="AreaBump"
             meta={meta.AreaBump}
-            icon="bump"
+            icon="area-bump"
             flavors={meta.flavors}
             currentFlavor="svg"
             properties={groups}

website/src/styles/icons.css

@@ -1,4 +1,4 @@
-/* glue: 0.13 hash: c3ab469375 */
+/* glue: 0.13 hash: 0a618edcf6 */
 .sprite-icons-waffle-light-neutral,
 .sprite-icons-waffle-light-colored,
 .sprite-icons-waffle-dark-neutral,
@@ -103,7 +103,11 @@
 .sprite-icons-bar-light-neutral,
 .sprite-icons-bar-light-colored,
 .sprite-icons-bar-dark-neutral,
-.sprite-icons-bar-dark-colored {
+.sprite-icons-bar-dark-colored,
+.sprite-icons-area-bump-light-neutral,
+.sprite-icons-area-bump-light-colored,
+.sprite-icons-area-bump-dark-neutral,
+.sprite-icons-area-bump-dark-colored {
     background-image: url('../assets/icons.png');
     background-repeat: no-repeat;
 }
@@ -738,6 +742,30 @@
     height: 52px;
 }
 
+.sprite-icons-area-bump-light-neutral {
+    background-position: -604px -304px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-light-colored {
+    background-position: -604px -364px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-dark-neutral {
+    background-position: -604px -424px;
+    width: 52px;
+    height: 52px;
+}
+
+.sprite-icons-area-bump-dark-colored {
+    background-position: -604px -484px;
+    width: 52px;
+    height: 52px;
+}
+
 @media screen and (-webkit-min-device-pixel-ratio: 1),
     screen and (min--moz-device-pixel-ratio: 1),
     screen and (-o-min-device-pixel-ratio: 100/100),
@@ -847,7 +875,11 @@
     .sprite-icons-bar-light-neutral,
     .sprite-icons-bar-light-colored,
     .sprite-icons-bar-dark-neutral,
-    .sprite-icons-bar-dark-colored {
+    .sprite-icons-bar-dark-colored,
+    .sprite-icons-area-bump-light-neutral,
+    .sprite-icons-area-bump-light-colored,
+    .sprite-icons-area-bump-dark-neutral,
+    .sprite-icons-area-bump-dark-colored {
         background-image: url('../assets/icons.png');
         -webkit-background-size: 660px 600px;
         -moz-background-size: 660px 600px;
@@ -964,7 +996,11 @@
     .sprite-icons-bar-light-neutral,
     .sprite-icons-bar-light-colored,
     .sprite-icons-bar-dark-neutral,
-    .sprite-icons-bar-dark-colored {
+    .sprite-icons-bar-dark-colored,
+    .sprite-icons-area-bump-light-neutral,
+    .sprite-icons-area-bump-light-colored,
+    .sprite-icons-area-bump-dark-neutral,
+    .sprite-icons-area-bump-dark-colored {
         background-image: url('../assets/icons@2x.png');
         -webkit-background-size: 660px 600px;
         -moz-background-size: 660px 600px;