<Button primary>
  Buy more stuff
</Button>

<Button secondary>
  Buy more stuff
</Button>

<Button cta>
  Buy more stuff
</Button>

<Button 
  cta 
  primary 
  secondary
>
  Buy more stuff
</Button>

<Button 
  variant="cta"
>
  Buy more stuff
</Button>

<Button 
  variant="cta"
  loading
  disabled
>
  Buying more stuff
</Button>

<Modal />

<Modal 
  showCloseButton
  isOpen
  title="My modal"
  content="Here is some modal content"
  onLeftButtonClick={handleLeftButtonClick}
  onRightButtonClick={handleRightButtonClick}
  leftButtonLabel="Cancel"
  rightButtonLabel="Ok"
  rightButtonVariant="secondary"
  overlayColor="rgba(0,0,255,1)"
  background="white"
/>

<ModalOverlay>
  Are you sure you want a modal?
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    Are you sure you want a modal?
  </ModalBox>
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    <ModalCloseButton />
    Are you sure you want a modal?
  </ModalBox>
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    <ModalCloseButton />
    <ModalTitle>Modals!</ModalTitle>
    Are you sure you want a modal?
  </ModalBox>
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    <ModalCloseButton />
    <ModalTitle>Modals!</ModalTitle>
    <ModalContent>
      Are you sure you want a modal?
    </ModalContent>
  </ModalBox>
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    <ModalCloseButton />
    <ModalTitle>Modals!</ModalTitle>
    <ModalContent>
      Are you sure you want a modal?
    </ModalContent>
    <ModalFooter>
      <button>
        Nah
      </button>
    </ModalFooter>
  </ModalBox>
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    <ModalCloseButton />
    <ModalTitle>Modals!</ModalTitle>
    <ModalContent>
      Are you sure you want a modal?
    </ModalContent>
    <ModalFooter>
      <button>
        Nah
      </button>
    </ModalFooter>
  </ModalBox>
</ModalOverlay>

<ModalOverlay>
  <ModalBox>
    <ModalContent>
      Are you sure you want a modal?
    </ModalContent>
    <ModalFooter>
      <button>
        Nah
      </button>
    </ModalFooter>
  </ModalBox>
</ModalOverlay>

const Modal = (props) => (
  <ModalOverlay>
    <ModalBox>
      <ModalCloseButton />
      <ModalTitle>{props.title}</ModalTitle>
      <ModalContent>
        {props.children}
      </ModalContent>
      <ModalFooter>
        {props.buttons}
      </ModalFooter>
    </ModalBox>
  </ModalOverlay>
);

<Modal title="Modals are cool">
  And composition is the best!
</Modal>

<Card>
  <CardImage src="/phone.png" alt="My phone" />
  <CardContent>
    My new phone
  </CardContent>
</Card>

<Card as="li">
  <CardImage src="/phone.png" alt="My phone" />
  <CardContent>
    My new phone
  </CardContent>
</Card>

<Card as={Link} to="/phone">
  <CardImage src="/phone.png" alt="My phone" />
  <CardContent>
    My new phone
  </CardContent>
</Card>

function Card(props) {
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

function Card(props) {
  const Element = props.as ?? 'div';
  return (
    <Element className="card">
      {props.children}
    </Element>
  );
}

function Card({ children, as: Element = 'div' }) {
  return (
    <Element className="card">
      {props.children}
    </Element>
  );
}

function Card({ 
  children, 
  as: Element = 'div',
}) {
  return (
    <Element className="card">
      {props.children}
    </Element>
  );
}

function Card({ 
  children, 
  as: Element = 'div',
  ...rest
}) {
  return (
    <Element className="card">
      {props.children}
    </Element>
  );
}

function Card({ 
  children, 
  as: Element = 'div',
  ...rest
}) {
  return (
    <Element className="card" {...rest}>
      {props.children}
    </Element>
  );
}

function Card({ 
  children, 
  className = '',
  as: Element = 'div',
  ...rest
}) {
  return (
    <Element 
      className={`card ${className}`} 
      {...rest}
    >
      {props.children}
    </Element>
  );
}

<Card 
  as={Link}
  to="/phone"
  className="extra-classy"
>
  <CardImage src="/phone.png" alt="My phone" />
  <CardContent>
    My phone
  </CardContent>
</Card>

<Button type="primary" />

<Button type="primary" buttonType="button" />

<Button type="button" variant="primary" />

<Button 
  type="button" 
  variant="primary" 
/>

<Button 
  type="button" 
  variant="primary" 
  isLoading
/>

<Button 
  type="button" 
  variant="primary" 
  ariaBusy
/>

<Button 
  type="button" 
  variant="primary" 
  aria-busy
/>

<Button 
  type="button" 
  variant="primary" 
  aria-busy
  aria-label="Please wait"
/>

/** Card
 *
 * Used for creating elements that pop out from the page
 * Can also be used as clickable elements, with or without
 * images, titles and text content.
 * 
 * If you need more control, please look at the composable
 * components instead - CardBox, CardContent, CardTitle and CardImage
 */
function Card({ 
  children, 
  className = '',
  as: Element = 'div',
  ...rest
}) {
  return ...;
}

/** Card
 *
 * Used for creating elements that pop out from the page
 * Can also be used as clickable elements, with or without
 * images, titles and text content.
 * 
 * If you need more control, please look at the composable
 * components instead - CardBox, CardContent, CardTitle and CardImage
 *  
 * @example
 * <Card as="a" href="/example">
 *   Go to example
 * </Card>
 */
function Card({ 
  children, 
  className = '',
  as: Element = 'div',
  ...rest
}) {
  return ...;
}

/** Card
 *
 * ...
 */
function Card({
  /** The content inside the card. Could be just text, or a CardImage component */
  children, 
  /** Extra class names are added to the root node */
  className = '',
  /** The type of the root element. Defaults to div. */
  as: Element = 'div',
  ...rest
}) {
  return ...;
}

// eslintrc.json
{
  "extends": "react-app"
}

type ButtonProps = {
  as?: string | React.ComponentType;
  variant: 'primary' | 'secondary' | 'cta';
  onClick: () => void;
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = (props) => {
  return (...);
}