refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 61 insertions, 0 deletions

diff --git a/src/components/molecules/layout/branding.test.tsx b/src/components/molecules/layout/branding.test.tsx
new file mode 100644
index 0000000..4fe1e9a
--- /dev/null
+++ b/src/components/molecules/layout/branding.test.tsx
@@ -0,0 +1,61 @@
+import { render, screen } from '@test-utils';
+import Branding from './branding';
+
+describe('Branding', () => {
+  it('renders a photo', () => {
+    render(
+      <Branding
+        photo="http://placeimg.com/640/480/city"
+        title="Website title"
+      />
+    );
+    expect(
+      screen.getByRole('img', { name: 'Website title picture' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a logo', () => {
+    render(
+      <Branding photo="http://placeimg.com/640/480/city" title="Website name" />
+    );
+    expect(screen.getByTitle('Website name logo')).toBeInTheDocument();
+  });
+
+  it('renders a baseline', () => {
+    render(
+      <Branding
+        photo="http://placeimg.com/640/480"
+        title="Website title"
+        baseline="Website baseline"
+      />
+    );
+    expect(screen.getByText('Website baseline')).toBeInTheDocument();
+  });
+
+  it('renders a title wrapped with h1 element', () => {
+    render(
+      <Branding
+        photo="http://placeimg.com/640/480"
+        title="Website title"
+        isHome={true}
+      />
+    );
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Website title' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a title with h1 styles', () => {
+    render(
+      <Branding
+        photo="http://placeimg.com/640/480"
+        title="Website title"
+        isHome={false}
+      />
+    );
+    expect(
+      screen.queryByRole('heading', { level: 1, name: 'Website title' })
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Website title')).toHaveClass('heading--1');
+  });
+});