example-first-publish/src/components/heading/index.js

Typography for BNNVARA

import React from 'react';
import PropTypes from 'prop-types';

import styled from 'styled-components';
import * as S from './style/heading';

const getElement = (props) => {
  const { element } = props;
  const Component = `${element}`;

  return (
    <Component {...props} />
  );
};

const HeadingStyle = styled(getElement)`
  ${S.HeadingBase}
  ${props => S[props.variant]};  
`;

const Heading = ({
  variant,
  element,
  value,
}) => (
  <HeadingStyle
    variant={variant}
    element={element}
  >
    {value}
  </HeadingStyle>
);

Heading.defaultProps = {
  value: '',
};

Heading.propTypes = {
  value: PropTypes.string,
  element: PropTypes.string.isRequired,
  variant: PropTypes.string.isRequired,
};

export default Heading;