Legend

import React from 'react'

import Legend from 'playbook-ui'

const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar', 'Gutters', 'Insulation', 'Other']

const LegendDefault = (props) => (
  <div>
    {
      products.map((product, i) => (
        <Legend
            color={`data_${i + 1}`}
            key={`legend_${i + 1}`}
            text={product}
        />
      ))
    }
  </div>
)

export default LegendDefault

import React from 'react'
import { Legend } from 'playbook-ui'

const LegendPrefix = (props) => (
  <div>
    <Legend
        color="data_3"
        prefixText="10"
        text="Windows"
    />
  </div>
)

export default LegendPrefix

import React from 'react'
import { Legend } from 'playbook-ui'

const LegendColors = (props) => (
  <div>
    <Legend
        color="data_8"
        text="Data 8"
    />
    <Legend
        color="warning"
        text="Warning"
    />
    <Legend
        color="product_6_highlight"
        text="Product 6 (highlight)"
    />
    <Legend
        color="category_7"
        text="Category 7"
    />
  </div>
)

export default LegendColors

import React from 'react'
import { Legend } from 'playbook-ui'

const LegendCustomColors = (props) => (
  <div>
    <Legend
        color="#dc418a"
        text="Custom Legend Color 1"
    />
    <Legend
        color="#3ef0b8"
        text="Custom Legend Color 2"
    />
    <Legend
        color="#ab8b04"
        text="Custom Legend Color 3"
    />
  </div>
)

export default LegendCustomColors