Sha256: 426977cd552fc6116c5208cf447de31fedf096391a09fb8c2aaba9cfd4a1e516

Contents?: true

Size: 1.05 KB

Versions: 31

Compression:

Stored size: 1.05 KB

Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { spacing } from '../utilities/spacing.js'

import { Body, Title } from '../'

type LegendProps = {
  color?: | "data_1"
    | "data_2"
    | "data_3"
    | "data_4"
    | "data_5"
    | "data_6"
    | "data_7",
  dark?: Boolean,
  prefixText?: String,
  text: String,
}

const Legend = (props: LegendProps) => {
  const { color = 'data_1', dark = false, prefixText, text } = props
  const darkClass = dark ? 'dark' : 'light'
  const bodyCSS = classnames(
    buildCss('pb_legend_kit', color, darkClass),
    spacing(props)
  )

  return (
    <div className={bodyCSS}>
      <Body color={dark ? 'lighter' : 'light'}>
        <span className="pb_legend_indicator_circle" />
        <If condition={prefixText}>
          <Title
              dark={dark}
              size={4}
              tag="span"
              text={` ${prefixText} `}
          />
        </If>
        {` ${text} `}
      </Body>
    </div>
  )
}

export default Legend

Version data entries

31 entries across 31 versions & 1 rubygems

Version Path
playbook_ui-5.0.2 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-5.0.1.pre.beta app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-5.1.0.pre.alpha4 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-5.1.0.pre.alpha2 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-5.1.0.pre.alpha1 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-5.0.1 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-5.0.1.pre.alpha1 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-4.18.1.pre.alpha1 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-4.18.1 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-4.18.0 app/pb_kits/playbook/pb_legend/_legend.jsx
playbook_ui-4.17.0 app/pb_kits/playbook/pb_legend/_legend.jsx