nathanyoung

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const Title = styled.h1`
  font-family: vars(--sans-serif);
  line-height: 1;
  margin: 0 0 2rem 0;
  font-size: ${props =>
    props.fontSize === "super"

nathanyoung

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

interface Props {
  label: string;
  className: string;
  onClick: () => void;
  type: "default" | "primary" | "outline";
  disabled: boolean;
}

nathanyoung

<Block
  className={className}
  border={{ side: 'all', width: '4px', color: 'red-light' }}
  background="red-lighter"
  direction="column"
  itemSpacing="5"
  padding="5"
  radius={!isMobile ? 3 : null}
>
  <Heading element="4">Danger Zone</Heading>

nathanyoung

import Heading from './Heading'; import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; import { PALMETTO_FONT_SIZE_OPTIONS, PALMETTO_BRAND_COLOR_OPTIONS } from '../../lib/tokens'; import { HEADING_LEVELS } from './Heading.constants';

<Meta title="Components/Heading" component={Heading} argTypes={{ color: { control: { type: 'select', options: PALMETTO_BRAND_COLOR_OPTIONS } },