diff --git a/.gitignore b/.gitignore
index 4a1689e..0d10003 100644
--- a/.gitignore
+++ b/.gitignore
@@ -72,4 +72,33 @@ node_modules/
.Spotlight-V100
.Trashes
ehthumbs.db
-Thumbs.db
\ No newline at end of file
+Thumbs.db
+
+# REACT #
+
+# dependencies
+app/node_modules
+app/.pnp
+app.pnp.js
+
+# testing
+app/coverage
+
+# production
+app/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+app/.DS_Store
+app/.env.local
+app/.env.development.local
+app/.env.test.local
+app/.env.production.local
+
+app/npm-debug.log*
+app/storybook/*
\ No newline at end of file
diff --git a/README.md b/README.md
index bf98296..f35a2a0 100644
--- a/README.md
+++ b/README.md
@@ -1,67 +1,77 @@
# cbf-community-website
+
### This is the repository for the Coding Black Females community website
-----------------------------
+
+- For the React site readme, click [here](/app/README.md)
+
+---
## To test your changes to the website before raising a PR (Pull Request)
## Prerequisites
- - Node.js (including NPM) - learn more about Node.js [`here`](https://nodejs.org/)
+
+- Node.js (including NPM) - learn more about Node.js [`here`](https://nodejs.org/)
## Node.js installation
+
### How do i know if i have nodeJS installed
-In your command line terminal (e.g. iTerm or Terminal), TYPE:
+In your command line terminal (e.g. iTerm or Terminal), TYPE:
- `node -v`
+`node -v`
This should tell you which Node.js version you have installed. โ
-If not, please install it to continue. There are various ways to install Node.js
+If not, please install it to continue. There are various ways to install Node.js
-----------------------------
+---
### How to install Node.js
The simplest way is to download Node.js pre-built installer [`here`](https://nodejs.org/en/download/)
-
### Alternatively, you can install from the command line terminal using Homebrew
-If you use [`Homebrew`](https://brew.sh/) for example, TYPE:
- `brew install node`
+If you use [`Homebrew`](https://brew.sh/) for example, TYPE:
+
+`brew install node`
In any case, please choose whichever method suits you.
-----------------------------
+---
+
## How to get these files on your computer so you can work on it locally
+
If you have not already done so ...
-Git clone this repo e.g. TYPE:
+Git clone this repo e.g. TYPE:
- `git clone https://github.com/CodingBlackFemales/cbf-community-website.git`
+`git clone https://github.com/CodingBlackFemales/cbf-community-website.git`
more info on this from here: [`Git-Basics-Getting-a-Git-Repository`](https://git-scm.com/book/en/v2/Git-Basics-Getting-a-Git-Repository)
-----------------------------
+---
+
## Steps to run to CBF community website locally
-Now for the fun bit ๐
- launching ๐ the webserver locally ๐ป
-
+
+Now for the fun bit ๐
- launching ๐ the webserver locally ๐ป
+
In the command line do the following, TYPE:
-
-* `cd cbf-community-website` - to go into the CBF Community Website project folder
-* `cd functions` - to go into the [`functions/`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/) folder
+- `cd cbf-community-website` - to go into the CBF Community Website project folder
-* [`npm install`](https://docs.npmjs.com/cli/install) - to install all the required node modules from [`package.json`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/package.json)
-
-* `npm run local` or `node index.js` - this will launch the website locally
+- `cd functions` - to go into the [`functions/`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/) folder
+
+- [`npm install`](https://docs.npmjs.com/cli/install) - to install all the required node modules from [`package.json`](https://github.com/CodingBlackFemales/cbf-community-website/blob/master/functions/package.json)
+- `npm run local` or `node index.js` - this will launch the website locally
If all went well ๐ค๐ฟ you can now view your local version of cbf community website here:
-
+
## http://localhost:3000 ๐
#### If you have any problems or suggestions let us know so we can update this README
-### That's it! Happy coding black females
+### That's it! Happy coding black females
+
# ๐ฉ๐ฟโ๐ป
## Credits
diff --git a/app/.babelrc b/app/.babelrc
new file mode 100644
index 0000000..84a20a0
--- /dev/null
+++ b/app/.babelrc
@@ -0,0 +1,3 @@
+{
+ "plugins": ["babel-plugin-styled-components"]
+}
diff --git a/app/.gitignore b/app/.gitignore
new file mode 100644
index 0000000..4d29575
--- /dev/null
+++ b/app/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/app/.prettierrc b/app/.prettierrc
new file mode 100644
index 0000000..9444db7
--- /dev/null
+++ b/app/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "printWidth": 80,
+ "semi": true,
+ "tabWidth": 2,
+ "singleQuote": true,
+ "trailingComma": "es5"
+}
diff --git a/app/.storybook/ThemeWrapper.js b/app/.storybook/ThemeWrapper.js
new file mode 100644
index 0000000..7c7a3b3
--- /dev/null
+++ b/app/.storybook/ThemeWrapper.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import theme from '../src/theme';
+
+export default function themeWrapper(storyFn) {
+ return {storyFn()} ;
+}
diff --git a/app/.storybook/addons.js b/app/.storybook/addons.js
new file mode 100644
index 0000000..45a227a
--- /dev/null
+++ b/app/.storybook/addons.js
@@ -0,0 +1,5 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';
+
+// More at https://storybook.js.org/addons/
diff --git a/app/.storybook/config.js b/app/.storybook/config.js
new file mode 100644
index 0000000..bf8d4bf
--- /dev/null
+++ b/app/.storybook/config.js
@@ -0,0 +1,13 @@
+import { addDecorator, configure } from '@storybook/react';
+import '../src/index.css';
+
+import ThemeWrapper from './ThemeWrapper';
+addDecorator(ThemeWrapper);
+
+const req = require.context('../src', true, /\.stories\.jsx$/);
+
+function loadStories() {
+ req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
diff --git a/app/.storybook/main.js b/app/.storybook/main.js
new file mode 100644
index 0000000..f1792fc
--- /dev/null
+++ b/app/.storybook/main.js
@@ -0,0 +1,8 @@
+module.exports = {
+ stories: ['../src/**/*.stories.jsx'],
+ addons: [
+ '@storybook/preset-create-react-app',
+ '@storybook/addon-actions',
+ '@storybook/addon-links',
+ ],
+};
diff --git a/app/README.md b/app/README.md
new file mode 100644
index 0000000..f6fa460
--- /dev/null
+++ b/app/README.md
@@ -0,0 +1,236 @@
+# Coding Black Females (website redesign)
+
+---
+
+
+
+- [1. About](#About)
+- [2. Available Scripts](#AvailableScripts)
+ - [2.1. `npm start`](#npmstart)
+ - [2.2. `npm run build`](#npmrunbuild)
+ - [2.3. `npm test`](#npmtest)
+ - [2.4. `npm run testcoverage`](#npmruntest:coverage)
+ - [2.5. `npm run testno-watch`](#npmruntest:no-watch)
+ - [2.6. `npm run storybook`](#npmrunstorybook)
+ - [2.7. `npm run storybookbuild`](#npmrunstorybook:build)
+ - [2.8. `npm run lint`](#npmrunlint)
+ - [2.9. `npm run lintfix`](#npmrunlint:fix)
+- [3. Directory Structure](#DirectoryStructure)
+ - [3.1. src Directory Structure](#srcDirectoryStructure)
+ - [3.1.1. Component Directory](#ComponentDirectory)
+ - [3.1.2. Shared directory](#Shareddirectory)
+- [4. Tests](#Tests)
+ - [4.1. Unit Tests](#UnitTests)
+- [5. Storybook](#Storybook)
+- [6. Linting](#Linting)
+- [7. Styled Components and CSS](#StyledComponentsandCSS)
+- [8. Pre-commit & Pre-Push Checks](#Pre-commitPre-PushChecks)
+- [9 Learn More About Create-React-App](#LearnMoreAboutCreate-React-App)
+
+
+
+
+---
+
+## React App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
diff --git a/app/public/logo192.png b/app/public/logo192.png
new file mode 100644
index 0000000..fc44b0a
Binary files /dev/null and b/app/public/logo192.png differ
diff --git a/app/public/logo512.png b/app/public/logo512.png
new file mode 100644
index 0000000..a4e47a6
Binary files /dev/null and b/app/public/logo512.png differ
diff --git a/app/public/manifest.json b/app/public/manifest.json
new file mode 100644
index 0000000..321f713
--- /dev/null
+++ b/app/public/manifest.json
@@ -0,0 +1,25 @@
+{
+ "short_name": "Coding Black Females",
+ "name": "Coding Black Females Website",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ },
+ {
+ "src": "logo192.png",
+ "type": "image/png",
+ "sizes": "192x192"
+ },
+ {
+ "src": "logo512.png",
+ "type": "image/png",
+ "sizes": "512x512"
+ }
+ ],
+ "start_url": ".",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/app/public/robots.txt b/app/public/robots.txt
new file mode 100644
index 0000000..e9e57dc
--- /dev/null
+++ b/app/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/app/src/App/App.stories.jsx b/app/src/App/App.stories.jsx
new file mode 100644
index 0000000..0e67ebc
--- /dev/null
+++ b/app/src/App/App.stories.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import App from './';
+
+storiesOf('Main Components', module).add('App', () =>
+ .c0 {
+ text-align: center;
+}
+
+.c0 .app__header {
+ background-color: #282c34;
+ min-height: 100vh;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ color: white;
+}
+
+
+
+
+
+`;
diff --git a/app/src/App/__tests__/index.test.js b/app/src/App/__tests__/index.test.js
new file mode 100644
index 0000000..d298603
--- /dev/null
+++ b/app/src/App/__tests__/index.test.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+
+import App from '..';
+import {
+ mountWithTheme,
+ renderWithTheme,
+} from '../../shared/utils/test/testHelpers';
+
+describe(' {
+ afterEach(cleanup);
+
+ it('matches the snapshot', () => {
+ const { asFragment } = renderWithTheme(
+ ,
+ document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/app/src/index.test.js b/app/src/index.test.js
new file mode 100644
index 0000000..c1151c1
--- /dev/null
+++ b/app/src/index.test.js
@@ -0,0 +1,19 @@
+import ReactDOM from 'react-dom';
+
+describe('Index', () => {
+ let div;
+
+ beforeAll(() => {
+ div = document.createElement('div');
+ div.setAttribute('id', 'root');
+ document.body.append(div);
+ });
+
+ it('mounts without crashing', async () => {
+ await import('./App/index');
+ });
+
+ it('unmounts without crashing', () => {
+ ReactDOM.unmountComponentAtNode(div);
+ });
+});
diff --git a/app/src/serviceWorker.js b/app/src/serviceWorker.js
new file mode 100644
index 0000000..c4838eb
--- /dev/null
+++ b/app/src/serviceWorker.js
@@ -0,0 +1,141 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.0/8 are considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export function register(config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl, config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl, {
+ headers: { 'Service-Worker': 'script' }
+ })
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready
+ .then(registration => {
+ registration.unregister();
+ })
+ .catch(error => {
+ console.error(error.message);
+ });
+ }
+}
diff --git a/app/src/setupTests.js b/app/src/setupTests.js
new file mode 100644
index 0000000..e25f7d7
--- /dev/null
+++ b/app/src/setupTests.js
@@ -0,0 +1,10 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';
+import 'jest-styled-components';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
diff --git a/app/src/shared/components/atoms/Tagline/Tagline.stories.jsx b/app/src/shared/components/atoms/Tagline/Tagline.stories.jsx
new file mode 100644
index 0000000..664b32e
--- /dev/null
+++ b/app/src/shared/components/atoms/Tagline/Tagline.stories.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import Tagline from '.';
+
+storiesOf('Atoms', module).add('Tagline', () => (
+
+ .c0 {
+ text-align: center;
+}
+
+.c0 .tagline__text {
+ margin-top: 0.2em;
+ font-weight: 400;
+}
+
+
+
+`;
diff --git a/app/src/shared/components/atoms/Tagline/__tests__/index.test.js b/app/src/shared/components/atoms/Tagline/__tests__/index.test.js
new file mode 100644
index 0000000..c9a5ad8
--- /dev/null
+++ b/app/src/shared/components/atoms/Tagline/__tests__/index.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+
+import Tagline from '..';
+import {
+ mountWithTheme,
+ renderWithTheme,
+} from '../../../../utils/test/testHelpers';
+
+describe(' {
+ afterEach(cleanup);
+ const taglineComponent =
+ .c0 {
+ text-align: center;
+}
+
+.c0 .title__text {
+ text-transform: uppercase;
+ font-weight: 300;
+ margin-bottom: 0.2em;
+}
+
+<div
+ class="c0"
+ >
+ <h1
+ class="title__text"
+ />
+ </div>
+</DocumentFragment>
+`;
diff --git a/app/src/shared/components/atoms/Title/__tests__/index.test.js b/app/src/shared/components/atoms/Title/__tests__/index.test.js
new file mode 100644
index 0000000..b01d1fe
--- /dev/null
+++ b/app/src/shared/components/atoms/Title/__tests__/index.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+
+import Title from '..';
+import {
+ mountWithTheme,
+ renderWithTheme,
+} from '../../../../utils/test/testHelpers';
+
+describe('<Title', () => {
+ afterEach(cleanup);
+ const titleComponent = <Title label={'A title'} />;
+
+ it('matches the snapshot', () => {
+ const { asFragment } = renderWithTheme(titleComponent);
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('displays the header text and tagline', () => {
+ const component = mountWithTheme(titleComponent);
+
+ const titleText = component.find('.title__text');
+
+ expect(titleText.exists()).toBe(true);
+ });
+});
diff --git a/app/src/shared/components/atoms/Title/index.jsx b/app/src/shared/components/atoms/Title/index.jsx
new file mode 100644
index 0000000..61fb7ed
--- /dev/null
+++ b/app/src/shared/components/atoms/Title/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Title = ({ text, className }) => {
+ const classPrefix = 'title';
+ return (
+ <div className={(classPrefix, className)}>
+ <h1 className={`${classPrefix}__text`}>{text}</h1>
+ </div>
+ );
+};
+
+const StyledTitle = styled(Title)`
+ text-align: center;
+
+ .title__text {
+ text-transform: uppercase;
+ font-weight: 300;
+ margin-bottom: 0.2em;
+ }
+`;
+
+export default StyledTitle;
diff --git a/app/src/shared/components/molecules/TitleWithTagline/TitleWithTagline.stories.jsx b/app/src/shared/components/molecules/TitleWithTagline/TitleWithTagline.stories.jsx
new file mode 100644
index 0000000..3fa68b2
--- /dev/null
+++ b/app/src/shared/components/molecules/TitleWithTagline/TitleWithTagline.stories.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+
+import TitleWithTagline from '.';
+
+storiesOf('Molecules', module).add('Title With Tagline', () => (
+ <TitleWithTagline titleText={'Blog'} taglineText={'A tagline'} />
+));
diff --git a/app/src/shared/components/molecules/TitleWithTagline/__tests__/__snapshots__/index.test.js.snap b/app/src/shared/components/molecules/TitleWithTagline/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000..649aa5c
--- /dev/null
+++ b/app/src/shared/components/molecules/TitleWithTagline/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TitleWithTagline matches the snapshot, when titleText and taglineText exist 1`] = `
+<DocumentFragment>
+ .c1 {
+ text-align: center;
+}
+
+.c1 .title__text {
+ text-transform: uppercase;
+ font-weight: 300;
+ margin-bottom: 0.2em;
+}
+
+.c2 {
+ text-align: center;
+}
+
+.c2 .tagline__text {
+ margin-top: 0.2em;
+ font-weight: 400;
+}
+
+.c0 {
+ text-align: center;
+}
+
+.c0 .title-with-tagline__header {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+<div
+ class="c0"
+ >
+ <header
+ class="title-with-tagline__header"
+ >
+ <div
+ class="c1"
+ >
+ <h1
+ class="title__text"
+ >
+ A title
+ </h1>
+ </div>
+ <div
+ class="c2"
+ >
+ <p
+ class="tagline__text"
+ >
+ A tagline
+ </p>
+ </div>
+ </header>
+ </div>
+</DocumentFragment>
+`;
+
+exports[`<TitleWithTagline matches the snapshot, when titleText exists and taglineText does not exist 1`] = `
+<DocumentFragment>
+ .c1 {
+ text-align: center;
+}
+
+.c1 .title__text {
+ text-transform: uppercase;
+ font-weight: 300;
+ margin-bottom: 0.2em;
+}
+
+.c0 {
+ text-align: center;
+}
+
+.c0 .title-with-tagline__header {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+}
+
+<div
+ class="c0"
+ >
+ <header
+ class="title-with-tagline__header"
+ >
+ <div
+ class="c1"
+ >
+ <h1
+ class="title__text"
+ >
+ A title
+ </h1>
+ </div>
+ </header>
+ </div>
+</DocumentFragment>
+`;
diff --git a/app/src/shared/components/molecules/TitleWithTagline/__tests__/index.test.js b/app/src/shared/components/molecules/TitleWithTagline/__tests__/index.test.js
new file mode 100644
index 0000000..5f7f272
--- /dev/null
+++ b/app/src/shared/components/molecules/TitleWithTagline/__tests__/index.test.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+
+import TitleWithTagline from '..';
+import {
+ mountWithTheme,
+ renderWithTheme,
+} from '../../../../utils/test/testHelpers';
+
+describe('<TitleWithTagline', () => {
+ afterEach(cleanup);
+ const titleWithTagline = (
+ <TitleWithTagline titleText={'A title'} taglineText={'A tagline'} />
+ );
+ const titleNoTagline = <TitleWithTagline titleText={'A title'} />;
+
+ it('matches the snapshot, when titleText and taglineText exist', () => {
+ const { asFragment } = renderWithTheme(titleWithTagline);
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('matches the snapshot, when titleText exists and taglineText does not exist', () => {
+ const { asFragment } = renderWithTheme(titleNoTagline);
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('displays the title and tagline text', () => {
+ const component = mountWithTheme(titleWithTagline);
+
+ const title = component.find('Title');
+ const tagline = component.find('Tagline');
+
+ expect(title.exists()).toBe(true);
+ expect(tagline.exists()).toBe(true);
+ });
+
+ it('displays the title text only', () => {
+ const component = mountWithTheme(titleNoTagline);
+
+ const title = component.find('Title');
+ const tagline = component.find('Tagline');
+
+ expect(title.exists()).toBe(true);
+ expect(tagline.exists()).toBe(false);
+ });
+});
diff --git a/app/src/shared/components/molecules/TitleWithTagline/index.jsx b/app/src/shared/components/molecules/TitleWithTagline/index.jsx
new file mode 100644
index 0000000..d94f9fd
--- /dev/null
+++ b/app/src/shared/components/molecules/TitleWithTagline/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+import Title from '../../atoms/Title';
+import Tagline from '../../atoms/Tagline';
+
+const TitleWithTagline = ({ titleText, taglineText, className }) => {
+ const classPrefix = 'title-with-tagline';
+ return (
+ <div className={(classPrefix, className)}>
+ <header className={`${classPrefix}__header`}>
+ <Title text={titleText} />
+ {taglineText && <Tagline text={taglineText} />}
+ </header>
+ </div>
+ );
+};
+
+const StyledTitleWithTagline = styled(TitleWithTagline)`
+ text-align: center;
+
+ .title-with-tagline__header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+`;
+
+export default StyledTitleWithTagline;
diff --git a/app/src/shared/utils/test/testHelpers.js b/app/src/shared/utils/test/testHelpers.js
new file mode 100644
index 0000000..dbf3875
--- /dev/null
+++ b/app/src/shared/utils/test/testHelpers.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+
+import theme from '../../../theme';
+
+export const renderWithTheme = children => {
+ return render(<ThemeProvider theme={theme}>{children}</ThemeProvider>);
+};
+
+export const mountWithTheme = children => {
+ return mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>);
+};
diff --git a/app/src/theme.js b/app/src/theme.js
new file mode 100644
index 0000000..daf220b
--- /dev/null
+++ b/app/src/theme.js
@@ -0,0 +1,35 @@
+const theme = {
+ colours: {
+ defaultTextColor: '#212529',
+ mutedTextGrey: '#6c757d',
+ burntOrange: '#D69E1D',
+ orange: '#fec503',
+ darkGrey: '#2d2d2d',
+ white: '#FFF',
+ black: '000',
+ },
+
+ typography: {
+ fontFamilyBody:
+ 'Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji',
+ fontSizeBase: '16px',
+ defaultLineHeight: 1.5,
+ },
+
+ breakpoints: {
+ L: '980px',
+ M: '720px',
+ S: '480px',
+ XL: '1024px',
+ XS: '320px',
+ XXL: '1280px',
+ XXXL: '1440px',
+ XXXXL: '1920px',
+ },
+
+ contentWidths: {
+ maxContentWidth: '1380px',
+ },
+};
+
+export default theme;