From 6828c33f733c39026914e7d18c2fe0b8493b3157 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= <raphael.benitte@ekino.com>
Date: Sat, 25 Aug 2018 02:02:22 +0900
Subject: [PATCH] fix(website): fix legends guide

---
 .../guides/legends/LegendDirection.js         | 12 ++++-----
 .../guides/legends/LegendItemDirection.js     | 24 ++++++++++++++---
 .../guides/legends/LegendPosition.js          | 26 ++++++++++++++-----
 .../components/guides/legends/SymbolShape.js  | 10 +++++--
 4 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/website/src/components/guides/legends/LegendDirection.js b/website/src/components/guides/legends/LegendDirection.js
index f017bb53d5..ab75a2b206 100644
--- a/website/src/components/guides/legends/LegendDirection.js
+++ b/website/src/components/guides/legends/LegendDirection.js
@@ -21,9 +21,9 @@ export default () => (
                 anchor="left"
                 direction="column"
                 data={[
-                    { label: `column`, fill: '#dc5a32' },
-                    { label: `column`, fill: '#dc5a32' },
-                    { label: `column`, fill: '#dc5a32' },
+                    { id: 'a', label: `column`, fill: '#dc5a32' },
+                    { id: 'b', label: `column`, fill: '#dc5a32' },
+                    { id: 'c', label: `column`, fill: '#dc5a32' },
                 ]}
             />
             <BoxLegendSvg
@@ -32,9 +32,9 @@ export default () => (
                 translateX={260}
                 direction="row"
                 data={[
-                    { label: `row`, fill: '#dc5a32' },
-                    { label: `row`, fill: '#dc5a32' },
-                    { label: `row`, fill: '#dc5a32' },
+                    { id: 'a', label: `row`, fill: '#dc5a32' },
+                    { id: 'b', label: `row`, fill: '#dc5a32' },
+                    { id: 'c', label: `row`, fill: '#dc5a32' },
                 ]}
             />
         </svg>
diff --git a/website/src/components/guides/legends/LegendItemDirection.js b/website/src/components/guides/legends/LegendItemDirection.js
index fc176f5497..191309ac28 100644
--- a/website/src/components/guides/legends/LegendItemDirection.js
+++ b/website/src/components/guides/legends/LegendItemDirection.js
@@ -19,7 +19,10 @@ const itemsProps = {
     y: 0,
     width: 160,
     height: 40,
-    fill: '#dc5a32',
+    data: {
+        id: 'demo',
+        fill: '#dc5a32',
+    },
 }
 
 export default () => (
@@ -48,7 +51,14 @@ export default () => (
                     }}
                 >
                     <svg width={itemsProps.width} height={itemsProps.height}>
-                        <LegendSvgItem {...itemsProps} label={dir} direction={dir} />
+                        <LegendSvgItem
+                            {...itemsProps}
+                            data={{
+                                ...itemsProps.data,
+                                label: dir,
+                            }}
+                            direction={dir}
+                        />
                     </svg>
                 </div>
             ))}
@@ -75,7 +85,15 @@ export default () => (
                     }}
                 >
                     <svg key={dir} width={itemsProps.width} height={itemsProps.height}>
-                        <LegendSvgItem {...itemsProps} label={dir} direction={dir} justify={true} />
+                        <LegendSvgItem
+                            {...itemsProps}
+                            data={{
+                                ...itemsProps.data,
+                                label: dir,
+                            }}
+                            direction={dir}
+                            justify={true}
+                        />
                     </svg>
                 </div>
             ))}
diff --git a/website/src/components/guides/legends/LegendPosition.js b/website/src/components/guides/legends/LegendPosition.js
index bdcb6d22ac..cdda4f54ee 100644
--- a/website/src/components/guides/legends/LegendPosition.js
+++ b/website/src/components/guides/legends/LegendPosition.js
@@ -96,9 +96,9 @@ export default () => (
                         key={anchor}
                         anchor={anchor}
                         data={[
-                            { label: anchor, fill: '#dc5a32' },
-                            { label: '...', fill: '#dc5a32' },
-                            { label: '...', fill: '#dc5a32' },
+                            { id: 'a', label: anchor, fill: '#dc5a32' },
+                            { id: 'b', label: '...', fill: '#dc5a32' },
+                            { id: 'c', label: '...', fill: '#dc5a32' },
                         ]}
                     />
                 ))}
@@ -141,7 +141,11 @@ export default () => (
                         {...legendProps}
                         {...omit(example, ['translateX', 'translateY'])}
                         data={[
-                            { label: `${example.anchor} (regular)`, fill: 'rgb(232, 193, 160)' },
+                            {
+                                id: example.anchor,
+                                label: `${example.anchor} (regular)`,
+                                fill: 'rgb(232, 193, 160)',
+                            },
                         ]}
                     />
                 ))}
@@ -151,9 +155,17 @@ export default () => (
                         {...legendProps}
                         {...example}
                         data={[
-                            { label: `${example.anchor} (translated)`, fill: '#dc5a32' },
-                            { label: `translateX: ${example.translateX}`, fill: '#dc5a32' },
-                            { label: `translateY: ${example.translateY}`, fill: '#dc5a32' },
+                            { id: 'a', label: `${example.anchor} (translated)`, fill: '#dc5a32' },
+                            {
+                                id: 'b',
+                                label: `translateX: ${example.translateX}`,
+                                fill: '#dc5a32',
+                            },
+                            {
+                                id: 'c',
+                                label: `translateY: ${example.translateY}`,
+                                fill: '#dc5a32',
+                            },
                         ]}
                     />
                 ))}
diff --git a/website/src/components/guides/legends/SymbolShape.js b/website/src/components/guides/legends/SymbolShape.js
index 39e496c196..38d88c2c23 100644
--- a/website/src/components/guides/legends/SymbolShape.js
+++ b/website/src/components/guides/legends/SymbolShape.js
@@ -8,7 +8,10 @@ const itemsProps = {
     y: 0,
     width: 160,
     height: 40,
-    fill: '#dc5a32',
+    data: {
+        id: 'demo',
+        fill: '#dc5a32',
+    },
 }
 
 export default () => (
@@ -37,7 +40,10 @@ export default () => (
                     <svg width={itemsProps.width} height={itemsProps.height}>
                         <LegendSvgItem
                             {...itemsProps}
-                            label={shape}
+                            data={{
+                                ...itemsProps.data,
+                                label: shape,
+                            }}
                             direction={DIRECTION_LEFT_TO_RIGHT}
                             symbolShape={shape}
                         />