Update components

jpmonette · Aug 12, 2018 · 726795d · 726795d
1 parent d0441cb
commit 726795d
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 138 deletions.
diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
@@ -1,6 +1,26 @@
 import * as React from "react";
 import classNames from "classnames";
 
+interface ItemProps {
+  className?: string;
+  href?: string;
+  isActive?: boolean;
+  // TODO: add icons
+}
+
+class BreadcrumbItem extends React.Component<ItemProps> {
+  render() {
+    const { children, href, isActive, className, ...props } = this.props;
+    return (
+      <li {...props} className={classNames(className, isActive && "is-active")}>
+        <a href={href} aria-current={isActive ? "page" : undefined}>
+          {children}
+        </a>
+      </li>
+    );
+  }
+}
+
 interface Props {
   className?: string;
   children?: React.ReactNode;
@@ -16,6 +36,7 @@ interface Props {
 }
 
 class Breadcrumb extends React.Component<Props> {
+  static Item = BreadcrumbItem;
   render() {
     const {
       children,
@@ -46,7 +67,7 @@ class Breadcrumb extends React.Component<Props> {
           isLarge && "is-large",
           isMedium && "is-medium",
           isRight && "is-right",
-          isSmall && "is-small"
+          isSmall && "is-small",
         )}
         aria-label="breadcrumbs"
       >
@@ -56,24 +77,4 @@ class Breadcrumb extends React.Component<Props> {
   }
 }
 
-interface ItemProps {
-  className?: string;
-  href?: string;
-  isActive?: boolean;
-  // TODO: add icons
-}
-
-class BreadcrumbItem extends React.Component<ItemProps> {
-  render() {
-    const { children, href, isActive, className, ...props } = this.props;
-    return (
-      <li {...props} className={classNames(className, isActive && "is-active")}>
-        <a href={href} aria-current={isActive ? "page" : undefined}>
-          {children}
-        </a>
-      </li>
-    );
-  }
-}
-
-export { Breadcrumb, BreadcrumbItem };
+export { Breadcrumb };
diff --git a/src/Container.tsx b/src/Container.tsx
@@ -21,7 +21,7 @@ class Container extends React.Component<Props> {
           className,
           isFluid && "is-fluid",
           isWidescreen && "is-widescreen",
-          isFullHD && "is-fullhd"
+          isFullHD && "is-fullhd",
         )}
       >
         {children}

diff --git a/src/Hero.tsx b/src/Hero.tsx
@@ -1,6 +1,17 @@
 import classNames from "classnames";
 import * as React from "react";
 
+interface HeroBodyProps {
+  className?: string;
+  children?: Element | JSX.Element | string;
+}
+
+const HeroBody = ({ children, className, ...props }: HeroBodyProps) => (
+  <div {...props} className={classNames(className, "hero-body")}>
+    {children}
+  </div>
+);
+
 interface HeroProps {
   className?: string;
   children?: React.ReactNode;
@@ -17,53 +28,49 @@ interface HeroProps {
   isFullHeight?: boolean;
 }
 
-const Hero = ({
-  children,
-  className,
-  isPrimary,
-  isInfo,
-  isSuccess,
-  isWarning,
-  isDanger,
-  isLight,
-  isDark,
-  isBold,
-  isMedium,
-  isLarge,
-  isFullHeight,
-  ...props
-}: HeroProps) => (
-  <section
-    {...props}
-    className={classNames(
+class Hero extends React.Component<HeroProps> {
+  static Body = HeroBody;
+
+  render() {
+    const {
+      children,
       className,
-      "hero",
-      isPrimary && "is-primary",
-      isInfo && "is-info",
-      isSuccess && "is-success",
-      isWarning && "is-warning",
-      isDanger && "is-danger",
-      isLight && "is-light",
-      isDark && "is-dark",
-      isBold && "is-bold",
-      isMedium && "is-medium",
-      isLarge && "is-large",
-      isFullHeight && "is-fullheight"
-    )}
-  >
-    {children}
-  </section>
-);
+      isPrimary,
+      isInfo,
+      isSuccess,
+      isWarning,
+      isDanger,
+      isLight,
+      isDark,
+      isBold,
+      isMedium,
+      isLarge,
+      isFullHeight,
+      ...props
+    } = this.props;
 
-interface HeroBodyProps {
-  className?: string;
-  children?: Element | JSX.Element | string;
+    return (
+      <section
+        {...props}
+        className={classNames(
+          className,
+          "hero",
+          isPrimary && "is-primary",
+          isInfo && "is-info",
+          isSuccess && "is-success",
+          isWarning && "is-warning",
+          isDanger && "is-danger",
+          isLight && "is-light",
+          isDark && "is-dark",
+          isBold && "is-bold",
+          isMedium && "is-medium",
+          isLarge && "is-large",
+          isFullHeight && "is-fullheight",
+        )}
+      >
+        {children}
+      </section>
+    );
+  }
 }
-
-const HeroBody = ({ children, className, ...props }: HeroBodyProps) => (
-  <div {...props} className={classNames(className, "hero-body")}>
-    {children}
-  </div>
-);
-
-export { Hero, HeroBody };
+export { Hero };
diff --git a/src/Level.tsx b/src/Level.tsx
@@ -1,24 +1,6 @@
 import * as React from "react";
 import classNames from "classnames";
 
-interface Props {
-  className?: string;
-  children?: React.ReactNode;
-  isMobile?: boolean;
-}
-
-class Level extends React.Component<Props> {
-  render() {
-    const { children, className, isMobile, ...props } = this.props;
-
-    return (
-      <nav {...props} className={classNames("level", isMobile && "is-mobile", className)} aria-label="breadcrumbs">
-        {children && <ul>{children}</ul>}
-      </nav>
-    );
-  }
-}
-
 class LevelLeft extends React.Component<ItemProps> {
   render() {
     const { children, className, ...props } = this.props;
@@ -58,4 +40,26 @@ class LevelItem extends React.Component<ItemProps> {
   }
 }
 
-export { Level, LevelItem, LevelLeft, LevelRight };
+interface Props {
+  className?: string;
+  children?: React.ReactNode;
+  isMobile?: boolean;
+}
+
+class Level extends React.Component<Props> {
+  static Left = LevelLeft;
+  static Right = LevelRight;
+  static Item = LevelItem;
+
+  render() {
+    const { children, className, isMobile, ...props } = this.props;
+
+    return (
+      <nav {...props} className={classNames("level", isMobile && "is-mobile", className)} aria-label="breadcrumbs">
+        {children && <ul>{children}</ul>}
+      </nav>
+    );
+  }
+}
+
+export { Level };
diff --git a/src/Media.tsx b/src/Media.tsx
@@ -6,12 +6,6 @@ interface MediaProps {
   children?: React.ReactNode;
 }
 
-const Media = ({ children, className, ...props }: MediaProps) => (
-  <article {...props} className={classNames(className, "media")}>
-    {children}
-  </article>
-);
-
 const MediaContent = ({ children, className, ...props }: MediaProps) => (
   <div {...props} className={classNames(className, "media-content")}>
     {children}
@@ -30,4 +24,20 @@ const MediaRight = ({ children, className, ...props }: MediaProps) => (
   </div>
 );
 
-export { Media, MediaContent, MediaLeft, MediaRight };
+class Media extends React.Component<MediaProps> {
+  static Left = MediaLeft;
+  static Right = MediaRight;
+  static Content = MediaContent;
+
+  render() {
+    const { children, className, ...props } = this.props;
+
+    return (
+      <article {...props} className={classNames(className, "media")}>
+        {children}
+      </article>
+    );
+  }
+}
+
+export { Media };
diff --git a/src/__tests__/Breadcrumb.spec.tsx b/src/__tests__/Breadcrumb.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
-import { Breadcrumb, BreadcrumbItem as Item } from "../Breadcrumb";
 import { create } from "react-test-renderer";
 
+import { Breadcrumb } from "../";
+
 describe("Breadcrumb", () => {
   it("should generate an empty breadcrumb", () => {
     const tree = create(<Breadcrumb />).toJSON();
@@ -11,18 +12,18 @@ describe("Breadcrumb", () => {
 
   it("should generate a breadcrumb", () => {
     const children = [
-      <Item key={0} href={"/home"} isActive={true}>
+      <Breadcrumb.Item key={0} href={"/home"} isActive={true}>
         Home
-      </Item>,
-      <Item key={1} isActive={true}>
+      </Breadcrumb.Item>,
+      <Breadcrumb.Item key={1} isActive={true}>
         About
-      </Item>
+      </Breadcrumb.Item>,
     ];
 
     const tree = create(
       <Breadcrumb hasArrowSeperator={true} className={"custom-class"} isCentered isLarge>
         {children}
-      </Breadcrumb>
+      </Breadcrumb>,
     ).toJSON();
 
     expect(tree).toMatchSnapshot();
@@ -32,9 +33,9 @@ describe("Breadcrumb", () => {
 describe("Breadcrumb.Item", () => {
   it("should generate an item", () => {
     const tree = create(
-      <Item key={0} href={"/home"} isActive={true}>
+      <Breadcrumb.Item key={0} href={"/home"} isActive={true}>
         Home
-      </Item>
+      </Breadcrumb.Item>,
     ).toJSON();
 
     expect(tree).toMatchSnapshot();

diff --git a/src/__tests__/Container.spec.tsx b/src/__tests__/Container.spec.tsx
@@ -1,13 +1,14 @@
 import * as React from "react";
-import { Container } from "../Container";
 import { create } from "react-test-renderer";
 
+import { Container } from "../";
+
 describe("Container", () => {
   it("should generate a container", () => {
     const tree = create(
       <Container isFluid isWidescreen isFullHD>
         Sample container
-      </Container>
+      </Container>,
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });

diff --git a/src/__tests__/Hero.spec.tsx b/src/__tests__/Hero.spec.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
-import { Hero, HeroBody } from "../Hero";
 import { create } from "react-test-renderer";
 
+import { Hero } from "..";
+
 describe("Hero", () => {
   it("should generate a hero", () => {
     const tree = create(
@@ -19,8 +20,8 @@ describe("Hero", () => {
         isFullHeight
         className={"test-class"}
       >
-        <HeroBody>Sample Website Title</HeroBody>
-      </Hero>
+        <Hero.Body>Sample Website Title</Hero.Body>
+      </Hero>,
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });