@catho/quantum-storybook-ui/src/components/Example/Example.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';
import CodeExample from '../CodeExample';

const Small = styled.small`
  color: ${Colors.grey.harder};
  cursor: pointer;
  text-transform: lowercase;
`;

const Code = styled.div`
  margin-bottom: 20px;
`;

const Example = ({ component: Component, title, importModules, code }) => (
  <>
    {Component}
    <h3>{title}</h3>
    <Code>
      <CodeExample
        code={code}
        withImport={importModules}
        showTitle={false}
        component={Component}
      />
    </Code>
  </>
);

Example.defaultProps = {
  code: '',
  title: '',
  importModules: '',
  component: {},
};

Example.propTypes = {
  code: PropTypes.string,
  component: PropTypes.instanceOf(Object),
  title: PropTypes.string,
  importModules: PropTypes.string,
};

export default Example;