@axeptio/design-system/src/_components/DoAndDont.jsx

Design System for Axeptio

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Paragraph from '../Core/Typography/Paragraph/index';

const Root = styled.div`
  ${props =>
    props.success &&
    `
    label {
      color: #14b8a6;
      border-color: #14b8a6;
    }
  `}
`;

const Label = styled.label`
  display: block;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e22f5a;
  border-bottom: 2px solid #e22f5a;
`;

export default function DoAndDont({ description, success }) {
  return (
    <Root success={success}>
      {success ? <Label success>Do</Label> : <Label>Don&apos;t</Label>}
      <Paragraph>{description}</Paragraph>
    </Root>
  );
}

DoAndDont.propTypes = {
  description: PropTypes.string,
  success: PropTypes.bool
};