feat(typography): added spacing to typography components

packages/components/src/Button/__snapshots__/button.spec.tsx.snap

@@ -22,7 +22,7 @@ exports[`<Button /> link story renders snapshot 1`] = `
 
 exports[`<Button /> linkInBody story renders snapshot 1`] = `
 <p
-  class="typography sizeBody colorBase"
+  class="typography sizeBody colorBase spacingNone"
 >
   This text surrounds the 
   <button
@@ -38,7 +38,7 @@ exports[`<Button /> linkInBody story renders snapshot 1`] = `
 
 exports[`<Button /> linkInHeading story renders snapshot 1`] = `
 <p
-  class="typography sizeH1 colorBase"
+  class="typography sizeH1 colorBase spacingNone"
 >
   This text surrounds the 
   <button

packages/components/src/Button/button.tsx

@@ -4,32 +4,38 @@ import React, { ReactNode } from "react";
 type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export type ButtonProps = {
-  as: "button" | React.ComponentType<any>;
+  as?: "button" | React.ComponentType<any>;
   /**
    * The button contents or label.
    */
   children: ReactNode;
-  color: ClickableProps<"button">["color"];
-  disabled: ButtonHTMLElementProps["disabled"];
-  size: ClickableProps<"button">["size"];
-  type: ButtonHTMLElementProps["type"];
-  variant: ClickableProps<"button">["variant"];
+  color?: ClickableProps<"button">["color"];
+  disabled?: ButtonHTMLElementProps["disabled"];
+  size?: ClickableProps<"button">["size"];
+  type?: ButtonHTMLElementProps["type"];
+  variant?: ClickableProps<"button">["variant"];
 };
 
-function Button(props: ButtonProps) {
-  const { ...rest } = props;
-  return <Clickable {...rest} />;
+function Button({
+  as = "button",
+  variant = "flat",
+  color = "brand",
+  disabled = false,
+  type = "button",
+  size = "medium",
+  ...rest
+}: ButtonProps) {
+  return (
+    <Clickable
+      {...rest}
+      as={as}
+      variant={variant}
+      color={color}
+      disabled={disabled}
+      type={type}
+      size={size}
+    />
+  );
 }
 
-const defaultProps: Partial<ButtonProps> = {
-  as: "button",
-  variant: "flat",
-  color: "brand",
-  disabled: false,
-  type: "button",
-  size: "medium",
-};
-
-Button.defaultProps = defaultProps;
-
 export default Button;

packages/components/src/Heading/Heading.tsx

@@ -17,6 +17,7 @@ type Props = {
   color?: TypographyProps<HeadingElement>["color"];
   size: TypographyProps<HeadingElement>["size"];
   weight?: TypographyProps<HeadingElement>["weight"];
+  spacing?: TypographyProps<HeadingElement>["spacing"];
 };
 
 function Heading({

packages/components/src/Heading/__snapshots__/Heading.spec.tsx.snap

@@ -2,55 +2,55 @@
 
 exports[`<Heading /> Heading1 story renders snapshot 1`] = `
 <h1
-  class="typography sizeH1 colorBase"
+  class="typography sizeH1 colorBase spacingNone"
 >
   Heading 1 24/32
 </h1>
 `;
 
 exports[`<Heading /> Heading1AsHeading4 story renders snapshot 1`] = `
 <h1
-  class="typography sizeH4 colorBase"
+  class="typography sizeH4 colorBase spacingNone"
 >
   Heading 1 styled as Heading 4
 </h1>
 `;
 
 exports[`<Heading /> Heading2 story renders snapshot 1`] = `
 <h2
-  class="typography sizeH2 colorBase"
+  class="typography sizeH2 colorBase spacingNone"
 >
   Heading 2 18/24
 </h2>
 `;
 
 exports[`<Heading /> Heading3 story renders snapshot 1`] = `
 <h3
-  class="typography sizeH3 colorBase"
+  class="typography sizeH3 colorBase spacingNone"
 >
   Heading 3 16/24
 </h3>
 `;
 
 exports[`<Heading /> Heading4 story renders snapshot 1`] = `
 <h4
-  class="typography sizeH4 colorBase"
+  class="typography sizeH4 colorBase spacingNone"
 >
   Heading 4 14/24
 </h4>
 `;
 
 exports[`<Heading /> Heading4ColorNeutral story renders snapshot 1`] = `
 <h4
-  class="typography sizeH4 colorNeutral"
+  class="typography sizeH4 colorNeutral spacingNone"
 >
   Neutral color Heading 4
 </h4>
 `;
 
 exports[`<Heading /> Heading5 story renders snapshot 1`] = `
 <h5
-  class="typography sizeH5 colorBase"
+  class="typography sizeH5 colorBase spacingNone"
 >
   Heading 5 12/20
 </h5>

packages/components/src/Text/Text.tsx

@@ -13,6 +13,7 @@ type Props = {
   color?: TypographyProps<TextElement>["color"];
   size: TypographyProps<TextElement>["size"];
   weight?: TypographyProps<TextElement>["weight"];
+  spacing?: TypographyProps<TextElement>["spacing"];
 };
 
 function Text({

packages/components/src/Text/__snapshots__/Text.spec.tsx.snap

@@ -2,47 +2,47 @@
 
 exports[`<Text /> Body story renders snapshot 1`] = `
 <p
-  class="typography sizeBody colorBase"
+  class="typography sizeBody colorBase spacingNone"
 >
   Body paragraph 16/24
 </p>
 `;
 
 exports[`<Text /> BodyColorInfoBold story renders snapshot 1`] = `
 <p
-  class="typography sizeBody colorInfo weightBold"
+  class="typography sizeBody colorInfo weightBold spacingNone"
 >
   Info color body text, bold
 </p>
 `;
 
 exports[`<Text /> BodySmall story renders snapshot 1`] = `
 <p
-  class="typography sizeSm colorBase"
+  class="typography sizeSm colorBase spacingNone"
 >
   Body small 14/20
 </p>
 `;
 
 exports[`<Text /> BodyXSmall story renders snapshot 1`] = `
 <p
-  class="typography sizeXs colorBase"
+  class="typography sizeXs colorBase spacingNone"
 >
   Body Xsmall 12/16
 </p>
 `;
 
 exports[`<Text /> Caption story renders snapshot 1`] = `
 <p
-  class="typography sizeCaption colorBase"
+  class="typography sizeCaption colorBase spacingNone"
 >
   Caption 12/20
 </p>
 `;
 
 exports[`<Text /> Overline story renders snapshot 1`] = `
 <p
-  class="typography sizeOverline colorBase"
+  class="typography sizeOverline colorBase spacingNone"
 >
   Overline 12/20
 </p>

packages/components/src/util/typography.module.css

@@ -3,7 +3,7 @@
 .typography,
 .sizeBody {
   @apply text-body leading-body;
-  @apply font-normal;
+  @apply font-normal mb-0;
 }
 
 .sizeH1 {
@@ -85,6 +85,23 @@
   @apply text-white;
 }
 
+/* Spacing */
+.spacingNone {
+  @apply mb-0;
+}
+
+.spacingHalf {
+  @apply mb-1;
+}
+
+.spacing1 {
+  @apply mb-2;
+}
+
+.spacing2 {
+  @apply mb-4;
+}
+
 /**
  * font-weights
  * allows override for text components, shouldn't be used by heading components

packages/components/src/util/typography.tsx

@@ -25,6 +25,8 @@ export type TypographyColor =
   | "warning"
   | "white";
 
+export type TypographyMargin = "none" | "half" | "1x" | "2x";
+
 export type TypographyProps<IComponent extends React.ElementType> = {
   /**
    * This prop can be used to specify which element should
@@ -41,7 +43,7 @@ export type TypographyProps<IComponent extends React.ElementType> = {
   /**
    * The color of the text element. If no color provided, defaults to a base color.
    */
-  color: TypographyColor;
+  color?: TypographyColor;
   /**
    * The size of the html element. If no `as` prop is provided, then
    * the component uses this value to determine which html tag to render
@@ -54,15 +56,20 @@ export type TypographyProps<IComponent extends React.ElementType> = {
    * we will add stricter enforcement -- e.g. enforcing a boldness
    * for each size or checking for mutually exclusive props.
    */
-  weight: "bold" | "normal" | null;
+  weight?: "bold" | "normal" | null;
+  /**
+   * Specifies the bottom-margin that should be applied to the typography element
+   */
+  spacing?: TypographyMargin;
 } & React.ComponentProps<IComponent>;
 
 function Typography<IComponent extends React.ElementType>({
   as,
   children,
-  color,
+  color = "base",
   size,
-  weight,
+  weight = null,
+  spacing,
   ...rest
 }: TypographyProps<IComponent>) {
   const Component = as;
@@ -93,6 +100,11 @@ function Typography<IComponent extends React.ElementType>({
         // Weights
         weight === "bold" && styles.weightBold,
         weight === "normal" && styles.weightNormal,
+        // Spacing
+        spacing === "none" && styles.spacingNone,
+        spacing === "half" && styles.spacingHalf,
+        spacing === "1x" && styles.spacing1,
+        spacing === "2x" && styles.spacing2,
       )}
       {...rest}
     >
@@ -101,9 +113,4 @@ function Typography<IComponent extends React.ElementType>({
   );
 }
 
-Typography.defaultProps = {
-  weight: null,
-  color: "base",
-};
-
 export default Typography;

plop-templates/Component/Component.tsx.hbs

@@ -18,7 +18,10 @@ type Props = {
  * A super cool component that does a really awesome thing.
  * TODO: Update to describe your component!
  */
-function {{pascalCase name}}({ children, align }: Props) {
+function {{pascalCase name}}({ 
+  children: "Hello world =^_^=", 
+  align: "left", 
+}: Props) {
   return (
     <div
       className={clsx(
@@ -30,10 +33,6 @@ function {{pascalCase name}}({ children, align }: Props) {
     </div>
   );
 }
-
-{{pascalCase name}}.defaultProps = {
-  children: "Hello world =^_^=",
-  align: "left",
-};
-
+{{! Thanks to storybook's docgen we have to move the export default }}
+{{! to a separate line from the declaration }}
 export default {{pascalCase name}};