feat: Implement Container (#23)

* container component

* container export

* container props

* export

* interactive container story

* container tests

src/components/container/Container.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { Container } from "./Container";
+
+it("renders children", () => {
+  const message = "This is a test container. Cool!";
+  render(<Container>{message}</Container>);
+  const container = screen.getByText(message);
+  expect(container).toBeInTheDocument();
+});
+
+it("renders in fluid mode if provided", () => {
+  const message = "This is a test container. Cool!";
+  render(<Container fluid>{message}</Container>);
+  const container = screen.getByText(message);
+  expect(container).toHaveClass("is-fluid");
+});
+
+it("renders in non-fluid mode if provided as false", () => {
+  const message = "This is a test container. Cool!";
+  render(<Container fluid={false}>{message}</Container>);
+  const container = screen.getByText(message);
+  expect(container).not.toHaveClass("is-fluid");
+});
+
+it("renders in non-fluid mode by default", () => {
+  const message = "This is a test container. Cool!";
+  render(<Container>{message}</Container>);
+  const container = screen.getByText(message);
+  expect(container).not.toHaveClass("is-fluid");
+});

src/components/container/Container.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+
+export type ContainerProps = PropsWithChildren<{
+  fluid?: boolean;
+}>;
+
+export const Container = ({ fluid, children }: ContainerProps): JSX.Element => {
+  const classes = ["container"];
+
+  if (fluid) {
+    classes.push("is-fluid");
+  }
+
+  const className = classes.join(" ");
+
+  return <div className={className}>{children}</div>;
+};

src/components/container/index.ts

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

src/components/index.ts

@@ -3,5 +3,6 @@ export * from "./button";
 export * from "./buttons";
 export * from "./column";
 export * from "./columns";
+export * from "./container";
 export * from "./icon";
 export * from "./icon-button";

src/stories/Container.stories.tsx

@@ -0,0 +1,29 @@
+import { Story, Meta } from "@storybook/react";
+
+import { Container, ContainerProps } from "../components";
+
+export default {
+  component: Container,
+  title: "Example/Container",
+  argTypes: {
+    fluid: {
+      control: {
+        type: "boolean",
+      },
+    },
+    children: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+} as Meta<ContainerProps>;
+
+const Template: Story<ContainerProps> = (args) => (
+  <Container {...args}>{args.children}</Container>
+);
+
+export const InteractiveContainer = Template.bind({});
+InteractiveContainer.args = {
+  children: "This is an interactive container.",
+};