Palette

Error rendering component

Unknown plugin "module-resolver" specified in "base" at 0, attempted to resolve relative to "/home/circleci/wellcomecollection.org/common/views/global/palette"

// @flow

type Props = {|
  colorsArray: Array<{|name: string, hex: string|}>
|}

function colorBlock(name, hex) {
  if (hex.indexOf('#') !== 0) return; // Don't display e.g. 'currentColor' or 'transparent'

  return (
    <div key={name} className='styleguide__palette__block'>
      <h2 className='styleguide__palette__name'>{name}</h2>
      <div className={`styleguide__palette__color styleguide__palette__color--${name}`} style={{background: hex}}></div>
      <span className='styleguide__palette__hex'>Hex: <code className='styleguide__palette__code'>{hex}</code></span>
    </div>
  );
}

const Palette = ({colorsArray}: Props) => (
  <div>
    <div className='styleguide__palette__section'>
      {colorsArray.map(color => colorBlock(color.name, color.hex))}
    </div>
  </div>
);

export default Palette;
{
  "colorsArray": [
    {
      "name": "white",
      "hex": "#ffffff"
    },
    {
      "name": "black",
      "hex": "#010101"
    },
    {
      "name": "purple",
      "hex": "#944aa0"
    },
    {
      "name": "teal",
      "hex": "#006272"
    },
    {
      "name": "cyan",
      "hex": "#298187"
    },
    {
      "name": "turquoise",
      "hex": "#5cb8bf"
    },
    {
      "name": "red",
      "hex": "#e01b2f"
    },
    {
      "name": "orange",
      "hex": "#e87500"
    },
    {
      "name": "yellow",
      "hex": "#ffce3c"
    },
    {
      "name": "brown",
      "hex": "#815e48"
    },
    {
      "name": "cream",
      "hex": "#f0ede3"
    },
    {
      "name": "green",
      "hex": "#088574"
    },
    {
      "name": "charcoal",
      "hex": "#323232"
    },
    {
      "name": "pewter",
      "hex": "#717171"
    },
    {
      "name": "silver",
      "hex": "#8f8f8f"
    },
    {
      "name": "marble",
      "hex": "#bcbab5"
    },
    {
      "name": "pumice",
      "hex": "#d9d6ce"
    },
    {
      "name": "smoke",
      "hex": "#e8e8e8"
    },
    {
      "name": "transparent",
      "hex": "transparent"
    },
    {
      "name": "transparent-black",
      "hex": "rgba(29, 29, 29, 0.61)"
    },
    {
      "name": "inherit",
      "hex": "inherit"
    },
    {
      "name": "currentColor",
      "hex": "currentColor"
    }
  ]
}

There are no notes for this item.