@catho/quantum-storybook-ui/src/components/SimpleHighlight/SimpleHighlight.jsx

A **Design System** is the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards. Over time, these 'systems' are growing in popularity - a very popular one is [Q

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Colors from '../../ui/Colors';

const HightlightWrapper = styled.pre`
  position: relative;
  padding: 10px;
  color: ${({ fontColor }) => fontColor};
  background-color: ${({ backgroundColor }) => backgroundColor};
  margin: 0;
  overflow: auto;

  code {
    background-color: transparent;
  }
`;

const SimpleHighlight = ({ backgroundColor, fontColor, children }) => (
  <HightlightWrapper backgroundColor={backgroundColor} fontColor={fontColor}>
    <code>{children}</code>
  </HightlightWrapper>
);

SimpleHighlight.defaultProps = {
  backgroundColor: Colors.blue.selago,
  fontColor: Colors.blue.curious
};

SimpleHighlight.propTypes = {
  backgroundColor: PropTypes.string,
  fontColor: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.string.isRequired,
    PropTypes.array.isRequired
  ])
};

export default SimpleHighlight;