fix(website): fix legends guide

plouc · Aug 24, 2018 · 6828c33
1 parent 527b1fa
commit 6828c33
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@