feat: Buttons and icons (#18)

- Wrapper component for listing multiple buttons in a responsive and styled manner.
- An Icon component that supports Font Awesome based icons.

package.json

@@ -11,6 +11,7 @@
   ],
   "version": "0.0.2",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
     "bulma": "^0.9.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

src/components/Button.tsx → src/components/button/Button.tsx

@@ -1,21 +1,9 @@
 import { ButtonHTMLAttributes } from "react";
+import { colors } from "../../types";
 
-export const ButtonColors = [
-  "white",
-  "light",
-  "dark",
-  "black",
-  "text",
-  "ghost",
-  "primary",
-  "link",
-  "info",
-  "success",
-  "warning",
-  "danger",
-] as const;
-
-export const ButtonSizes = ["small", "normal", "medium", "large"];
+export const ButtonColors = [...colors, "text", "ghost"] as const;
+
+export const ButtonSizes = ["small", "normal", "medium", "large"] as const;
 
 export type ButtonColor = typeof ButtonColors[number];
 export type ButtonSize = typeof ButtonSizes[number];

src/components/button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

src/components/buttons/Buttons.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import { Button } from "../button/Button";
+import { Buttons } from "./Buttons";
+
+it("renders child buttons", () => {
+  const firstText = "First Button";
+  const secondText = "Second Button";
+  render(
+    <Buttons>
+      <Button color="success">{firstText}</Button>
+      <Button color="danger">{secondText}</Button>
+    </Buttons>
+  );
+  const firstButton = screen.getByRole("button", { name: firstText });
+  const secondButton = screen.getByRole("button", { name: secondText });
+  expect(firstButton).toBeInTheDocument();
+  expect(secondButton).toBeInTheDocument();
+});

src/components/buttons/Buttons.tsx

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+
+type ButtonsProps = HTMLAttributes<HTMLDivElement>;
+
+export const Buttons = (props: ButtonsProps): JSX.Element => (
+  <div className="buttons">{props.children}</div>
+);

src/components/buttons/index.tsx

@@ -0,0 +1 @@
+export * from "./Buttons";

src/components/icon/Icon.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { Color, colors } from "../../types";
+import { Icon } from "./Icon";
+
+it("renders an icon", () => {
+  const message = "Home";
+  render(<Icon name="home" message={message} />);
+  const icon = screen.getByTitle(message);
+  expect(icon).toBeInTheDocument();
+});
+
+it.each<Color>(colors)("renders an icon with color = %p", (color: Color) => {
+  const message = "Home";
+  render(<Icon name="home" message={message} color={color} />);
+  const icon = screen.getByTitle(message);
+  expect(icon).toHaveClass(`has-text-${color}`);
+});
+
+it("renders an icon with a border", () => {
+  const message = "Home";
+  render(<Icon name="home" message={message} bordered />);
+  const icon = screen.getByTitle(message);
+  expect(icon).toHaveClass("fa-border");
+});
+
+it("renders an icon without a border", () => {
+  const message = "Home";
+  render(<Icon name="home" message={message} bordered={false} />);
+  const icon = screen.getByTitle(message);
+  expect(icon).not.toHaveClass("fa-border");
+});
+
+it("renders an icon without a border by default", () => {
+  const message = "Home";
+  render(<Icon name="home" message={message} />);
+  const icon = screen.getByTitle(message);
+  expect(icon).not.toHaveClass("fa-border");
+});
+
+it("renders the message for screen readers only", () => {
+  const message = "Create Test";
+  render(<Icon name="plus" message={message} />);
+  const screenOnlyMessage = screen.getByText(message);
+  expect(screenOnlyMessage).toHaveClass("is-sr-only");
+});
+
+it("does not render the screen reader message if a message is not provided", () => {
+  render(<Icon name="minus" />);
+  const screenOnlyMessage = screen.queryByTestId("icon-screen-reader-message");
+  expect(screenOnlyMessage).toBeNull();
+});

src/components/icon/Icon.tsx

@@ -0,0 +1,37 @@
+import { Color } from "../../types";
+
+export type IconProps = {
+  name: string; // https://fontawesome.com/v5/cheatsheet displays the possible names
+  message?: string;
+  color?: Color;
+  bordered?: boolean;
+};
+
+export const Icon = ({
+  name,
+  color,
+  message,
+  bordered,
+}: IconProps): JSX.Element => {
+  const classes = [`fas fa-${name.toLowerCase()}`];
+
+  if (color) {
+    classes.push(`has-text-${color}`);
+  }
+  if (bordered) {
+    classes.push("fa-border");
+  }
+
+  const className = classes.join(" ");
+
+  return (
+    <span className="icon">
+      <i aria-hidden="true" title={message} className={className}></i>
+      {message && (
+        <span className="is-sr-only" data-testid="icon-screen-reader-message">
+          {message}
+        </span>
+      )}
+    </span>
+  );
+};

src/components/icon/index.ts

@@ -0,0 +1 @@
+export * from "./Icon";

src/components/index.ts

@@ -1 +1,3 @@
-export * from "./Button";
+export * from "./button";
+export * from "./buttons";
+export * from "./icon";

src/index.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./types";

src/stories/Button.stories.tsx

@@ -1,11 +1,6 @@
 import { Story, Meta } from "@storybook/react";
 
-import {
-  Button,
-  ButtonColors,
-  ButtonProps,
-  ButtonSizes,
-} from "../components/Button";
+import { Button, ButtonColors, ButtonProps, ButtonSizes } from "../components";
 
 export default {
   title: "Example/Button",

src/stories/Buttons.stories.tsx

@@ -0,0 +1,19 @@
+import { Story, Meta } from "@storybook/react";
+
+import { Button, Buttons } from "../components";
+
+export default {
+  title: "Example/Buttons",
+  component: Buttons,
+} as Meta;
+
+const Template: Story = () => (
+  <Buttons>
+    <Button color="success">Submit</Button>
+    <Button color="danger">Cancel</Button>
+    <Button color="warning">Re-Do</Button>
+  </Buttons>
+);
+
+export const DefaultButtons = Template.bind({});
+DefaultButtons.args = {};

src/stories/Icon.stories.tsx

@@ -0,0 +1,30 @@
+import { Story, Meta } from "@storybook/react";
+
+import { Icon, IconProps } from "../components";
+import { colors } from "../types";
+
+export default {
+  title: "Example/Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      control: {
+        type: "text",
+      },
+    },
+    color: {
+      control: {
+        type: "select",
+        options: colors,
+      },
+    },
+  },
+} as Meta;
+
+const Template: Story<IconProps> = (args) => <Icon {...args} />;
+
+export const InteractiveIcon = Template.bind({});
+InteractiveIcon.args = {
+  name: "home",
+  message: "Go Home",
+};

src/styles/theme.scss

@@ -1,2 +1,3 @@
 @charset "utf-8";
 @import "../../node_modules/bulma/bulma.sass";
+@import "../../node_modules/@fortawesome/fontawesome-free/css/all.css";

src/types/color/colors.ts

@@ -0,0 +1,14 @@
+export const colors = [
+  "white",
+  "light",
+  "dark",
+  "black",
+  "primary",
+  "link",
+  "info",
+  "success",
+  "warning",
+  "danger",
+] as const;
+
+export type Color = typeof colors[number];

src/types/color/index.ts

@@ -0,0 +1 @@
+export * from "./colors";

src/types/index.ts

@@ -0,0 +1 @@
+export * from "./color";

yarn.lock

@@ -2255,6 +2255,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-free@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz#c36ffa64a2a239bf948541a97b6ae8d729e09a9a"
+  integrity sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==
+
 "@hapi/[email protected]":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"