import React from "react";
import { VictoryLegend } from "../../src/index";

export default class App extends React.Component {
  render() {
    const svgStyle = { border: "1px solid #ccc", padding: 20 };
    const legendSize = {
      width: 500,
      height: 300
    };
    const data = [{
      name: "Series 1",
      label: {
        fontSize: 10
      },
      symbol: {
        type: "circle"
      }
    }, {
      name: "Long Series Name",
      label: {
        fontSize: 12
      },
      symbol: {
        type: "triangleUp",
        style: {
          fill: "blue"
        }
      }
    }, {
      name: "Series 3",
      label: {
        fontSize: 14
      },
      symbol: {
        type: "diamond",
        style: {
          fill: "pink"
        }
      }
    }, {
      name: "Series 4",
      label: {
        fontSize: 16
      },
      symbol: {
        type: "plus"
      }
    }, {
      name: "Series 5",
      label: {
        fontSize: 18
      },
      symbol: {
        type: "star",
        style: {
          fill: "red"
        }
      }
    }];

    return (
      <div className="demo">
        <VictoryLegend {...legendSize} data={data} style={svgStyle} />
        <svg {...legendSize} style={svgStyle}>
          <VictoryLegend {...legendSize} orientation="horizontal" data={data} standalone={false}/>
        </svg>
      </div>
    );
  }
}

@@ -74,208 +74,55 @@
 %22;%0A%0A
-export default class App extends React.Component %7B%0A  render() %7B%0A    const svgStyle = %7B border: %221px solid #ccc%22, padding: 20 %7D;%0A    const legendSize = %7B%0A      width: 500,%0A      height: 300%0A    %7D;%0A    
+const svgStyle = %7B border: %221px solid #ccc%22 %7D;%0A
 cons
@@ -133,20 +133,16 @@
 ta = %5B%7B%0A
-    
   name: 
@@ -157,57 +157,8 @@
 1%22,%0A
-      label: %7B%0A        fontSize: 10%0A      %7D,%0A    
   sy
@@ -165,28 +165,24 @@
 mbol: %7B%0A    
-    
 type: %22circl
@@ -183,38 +183,45 @@
 %22circle%22
+,
 %0A    
-  %7D%0A    
+fill: %22green%22%0A  %7D%0A
 %7D, %7B%0A
-    
   name: 
@@ -244,57 +244,8 @@
 e%22,%0A
-      label: %7B%0A        fontSize: 12%0A      %7D,%0A    
   sy
@@ -244,36 +244,32 @@
 e%22,%0A  symbol: %7B%0A
-    
     type: %22trian
@@ -284,75 +284,30 @@
     
-    style: %7B%0A          fill: %22blue%22%0A        %7D%0A      %7D%0A    
+fill: %22blue%22%0A  %7D%0A
 %7D, %7B%0A
-    
   na
@@ -326,57 +326,8 @@
 3%22,%0A
-      label: %7B%0A        fontSize: 14%0A      %7D,%0A    
   sy
@@ -334,28 +334,24 @@
 mbol: %7B%0A    
-    
 type: %22diamo
@@ -363,75 +363,30 @@
     
-    style: %7B%0A          fill: %22pink%22%0A        %7D%0A      %7D%0A    
+fill: %22pink%22%0A  %7D%0A
 %7D, %7B%0A
-    
   na
@@ -405,57 +405,8 @@
 4%22,%0A
-      label: %7B%0A        fontSize: 16%0A      %7D,%0A    
   sy
@@ -408,32 +408,24 @@
 %0A  symbol: %7B
-%0A       
  type: %22plus
@@ -429,30 +429,16 @@
 lus%22
-%0A      %7D%0A    
+ %7D%0A
 %7D, %7B%0A
-    
   na
@@ -457,57 +457,8 @@
 5%22,%0A
-      label: %7B%0A        fontSize: 18%0A      %7D,%0A    
   sy
@@ -469,20 +469,16 @@
 : %7B%0A    
-    
 type: %22s
@@ -491,87 +491,49 @@
     
-    style: %7B%0A          fill: %22red%22%0A        %7D%0A      %7D%0A    %7D%5D;%0A%0A    return (%0A    
+fill: %22red%22%0A  %7D%0A%7D%5D;%0A%0Aconst App = () =%3E (%0A
   %3Cd
@@ -553,28 +553,24 @@
 %22demo%22%3E%0A    
-    
 %3CVictoryLege
@@ -576,51 +576,18 @@
 end 
-%7B...legendSize%7D data=%7Bdata%7D style=%7BsvgStyle
+data=%7Bdata
 %7D /%3E
@@ -595,32 +595,54 @@
     
-    
 %3Csvg
- %7B...legendSize%7D
+%0A      height=%7B56%7D%0A      width=%7B525%7D%0A     
  sty
@@ -654,22 +654,23 @@
 vgStyle%7D
-%3E
 %0A    
+%3E%0A
       %3CV
@@ -685,87 +685,154 @@
 gend
- %7B...legendSize%7D orientation=%22horizontal%22 data=%7Bdata%7D standalone=%7Bfalse%7D/%3E
+%0A        standalone%0A        data=%7Bdata%7D%0A        padding=%7B20%7D%0A        orientation=%22horizontal%22%0A        style=%7B%7B label: %7B fill: %22#ccc%22 %7D%7D%7D
 %0A    
+  /%3E%0A
     
@@ -838,20 +838,16 @@
  %3C/svg%3E%0A
-    
   %3C/div%3E
@@ -851,17 +851,28 @@
 iv%3E%0A
-    );%0A  %7D%0A%7D
+);%0A%0Aexport default App;
 %0A

update demo