import React from 'react';
import PropTypes from 'prop-types';
import {css} from 'react-emotion';

const wipStyle = css`
  background-color: tomato;
  color: ivory;
  font-variant: small-caps;
  line-height: 1.1;
  padding: 0 2px;
`;

const expStyle = css`
  background-color: deepskyblue;
  color: ivory;
  font-variant: small-caps;
  line-height: 1.1;
  padding: 0 2px;
`;

const StatusTag = ({label}) => {
  switch (label) {
  case 'wip':
    return <small className={wipStyle}>wip</small>;
  case 'exp':
    return <small className={expStyle}>exp</small>;
  default:
    return null;
  }
};

StatusTag.propTypes = {
  label: PropTypes.string,
};

export default StatusTag;

import React from 'react';
import PropTypes from 'prop-types';
import {css} from 'react-emotion';

const wipStyle = css`
  background-color: tomato;
  color: ivory;
  font-variant: small-caps;
  line-height: 1.1;
  padding: 0 2px;
  font-size: 12px;
  border-bottom: none;
`;

const expStyle = css`
  background-color: deepskyblue;
  color: ivory;
  font-variant: small-caps;
  line-height: 1.1;
  padding: 0 2px;
  font-size: 12px;
  border-bottom: none;
`;

const StatusTag = ({label}) => {
  switch (label) {
  case 'wip':
    return <abbr title="work in progress" className={wipStyle}>wip</abbr>;
  case 'exp':
    return <abbr className={expStyle} title="experimental">exp</abbr>;
  default:
    return null;
  }
};

StatusTag.propTypes = {
  label: PropTypes.string,
};

export default StatusTag;

Use abbr for status tags
style: Use abbr for status tags

Signed-off-by: Arnau Siches <3ce1c0b0b7032cdfdae7820ed353835a9a8f94c3@digital.cabinet-office.gov.uk>
