├── .eslintrc.js ├── .gitignore ├── .idea └── modules.xml ├── .prettierrc ├── .storybook ├── addons.js ├── config.js └── webpack.config.js ├── LICENSE ├── README.md ├── babel.config.js ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.esm.js ├── gatsby-node.js ├── gatsby-ssr.js ├── jsconfig.json ├── package-lock.json ├── package.json ├── path-mappings.json ├── src ├── components │ ├── animated-character │ │ ├── animated-character.js │ │ ├── animated-character.module.scss │ │ ├── animated-character.stories.js │ │ └── index.js │ ├── author-block │ │ ├── author-block.js │ │ ├── author-block.module.scss │ │ ├── author-block.stories.js │ │ └── index.js │ ├── avatar │ │ ├── avatar.js │ │ ├── avatar.module.scss │ │ ├── avatar.stories.js │ │ └── index.js │ ├── blog-link │ │ ├── blog-link.js │ │ ├── blog-link.module.scss │ │ ├── blog-link.stories.js │ │ └── index.js │ ├── blogs-listing-block │ │ ├── blogs.js │ │ ├── blogs.module.scss │ │ ├── blogs.stories.js │ │ └── index.js │ ├── bustout │ │ ├── bustout.js │ │ ├── bustout.module.scss │ │ ├── bustout.stories.js │ │ └── index.js │ ├── case-studies-block │ │ ├── case-studies-block.js │ │ ├── case-studies-block.module.scss │ │ ├── case-studies-block.stories.js │ │ └── index.js │ ├── code-block │ │ ├── code-block.js │ │ └── index.js │ ├── contact-detailed │ │ ├── contact.js │ │ ├── contact.module.scss │ │ ├── contact.stories.js │ │ └── index.js │ ├── contact │ │ ├── contact.js │ │ ├── contact.module.scss │ │ ├── contact.stories.js │ │ └── index.js │ ├── filter-tags │ │ ├── filter-tags.js │ │ ├── filter-tags.module.scss │ │ ├── filter-tags.stories.js │ │ └── index.js │ ├── footer │ │ ├── footer.js │ │ ├── footer.module.scss │ │ ├── footer.stories.js │ │ └── index.js │ ├── header │ │ ├── header.js │ │ ├── header.module.scss │ │ ├── header.stories.js │ │ └── index.js │ ├── help-block │ │ ├── help-block.js │ │ ├── help-block.module.scss │ │ ├── help-block.stories.js │ │ └── index.js │ ├── hero │ │ ├── hero.js │ │ ├── hero.module.scss │ │ ├── hero.stories.js │ │ └── index.js │ ├── jobs-listing-block │ │ ├── index.js │ │ ├── jobs-block.js │ │ ├── jobs-block.module.scss │ │ └── jobs-block.stories.js │ ├── layout │ │ ├── index.js │ │ ├── layout.js │ │ └── layout.module.scss │ ├── markdown │ │ ├── index.js │ │ └── markdown.js │ ├── menu-button │ │ ├── index.js │ │ ├── menu-button.js │ │ └── menu-button.module.scss │ ├── nav-link │ │ ├── index.js │ │ ├── nav-link.js │ │ └── nav-link.module.scss │ ├── parent-page-link │ │ ├── index.js │ │ ├── parent-page-link.js │ │ ├── parent-page-link.module.scss │ │ └── parent-page-link.stories.js │ ├── process-block │ │ ├── index.js │ │ ├── process-block.js │ │ ├── process-block.module.scss │ │ └── process-block.stories.js │ ├── process-image-block │ │ ├── index.js │ │ ├── process-image-block.js │ │ ├── process-image-block.module.scss │ │ └── process-image-block.stories.js │ ├── quote-slider │ │ ├── index.js │ │ ├── quote-slider.js │ │ ├── quote-slider.module.scss │ │ └── quote-slider.stories.js │ ├── rich-text │ │ ├── index.js │ │ └── rich-text.js │ ├── seo.js │ ├── services-listing-block │ │ ├── index.js │ │ ├── services-block.js │ │ ├── services-block.module.scss │ │ └── services-block.stories.js │ ├── streamfield-block │ │ ├── index.js │ │ ├── streamfield-block.js │ │ ├── streamfield-block.module.scss │ │ └── streamfield-block.stories.js │ ├── tag │ │ ├── index.js │ │ ├── tag.js │ │ ├── tag.module.scss │ │ └── tag.stories.js │ ├── team-listing-block │ │ ├── index.js │ │ ├── team-listing-block.js │ │ ├── team-listing-block.module.scss │ │ └── team-listing-block.stories.js │ ├── teaser-block │ │ ├── index.js │ │ ├── teaser-block.js │ │ ├── teaser-block.module.scss │ │ ├── teaser-block.stories.js │ │ └── teaser.js │ ├── testimonials-block │ │ ├── index.js │ │ ├── testimonials-block.js │ │ ├── testimonials-block.module.scss │ │ └── testimonials-block.stories.js │ ├── theme-provider │ │ ├── index.js │ │ ├── theme-provider.js │ │ └── themes.js │ └── title-block │ │ ├── index.js │ │ ├── title-block.js │ │ ├── title-block.module.scss │ │ └── title-block.stories.js ├── context │ └── theme-context.js ├── fonts │ └── apercu │ │ ├── apercu-black-pro.eot │ │ ├── apercu-black-pro.ttf │ │ ├── apercu-black-pro.woff │ │ ├── apercu-black-pro.woff2 │ │ ├── apercu-bold-pro.eot │ │ ├── apercu-bold-pro.ttf │ │ ├── apercu-bold-pro.woff │ │ ├── apercu-bold-pro.woff2 │ │ ├── apercu-light-pro.eot │ │ ├── apercu-light-pro.ttf │ │ ├── apercu-light-pro.woff │ │ ├── apercu-light-pro.woff2 │ │ ├── apercu-regular-pro.eot │ │ ├── apercu-regular-pro.ttf │ │ ├── apercu-regular-pro.woff │ │ └── apercu-regular-pro.woff2 ├── fragments │ └── index.js ├── html.js ├── images │ ├── 1162px-Firefox_Logo,_2017.png │ ├── 404.jpg │ ├── data-greeting.svg │ ├── default-avatar.png │ ├── default-featured.png │ ├── default-search-image.jpg │ ├── favicon.png │ ├── firefox.png │ ├── frag-cluster1.svg │ ├── frag-cluster2.svg │ ├── frag-cluster3.svg │ ├── help-character.png │ ├── help-character.svg │ ├── icons │ │ ├── chevron.svg │ │ ├── cluster.svg │ │ ├── diamond.svg │ │ ├── frag.png │ │ ├── quote.svg │ │ ├── tick.png │ │ └── tick.svg │ ├── logo.svg │ ├── man-coffee.svg │ ├── man-fruit.svg │ ├── man-right.svg │ ├── processes-desktop.png │ ├── processes-mobile.png │ ├── tbx-flame.svg │ ├── toolkit.svg │ ├── wagtail-bird.svg │ ├── wagtail-greeting.svg │ ├── wagtail.svg │ └── will.jpg ├── pages │ ├── 404 │ │ ├── 404.js │ │ ├── 404.module.scss │ │ └── index.js │ └── preview.js ├── styles │ ├── _animations.scss │ ├── _base-page.scss │ ├── _fonts.scss │ ├── _global.scss │ ├── _grid.scss │ ├── _mixins.scss │ ├── _typography.scss │ ├── _vars.scss │ └── app.module.scss ├── templates │ ├── blog-post │ │ ├── blog-post.js │ │ ├── blog-post.module.scss │ │ ├── blog-post.stories.js │ │ └── index.js │ ├── blogs │ │ ├── blog-listing.js │ │ ├── blog-listing.module.scss │ │ ├── blog-listing.stories.js │ │ └── index.js │ ├── case-studies │ │ ├── case-study-listing.js │ │ ├── case-study-listing.module.scss │ │ ├── case-study-listing.stories.js │ │ └── index.js │ ├── case-study │ │ ├── case-study.js │ │ ├── case-study.module.scss │ │ ├── case-study.stories.js │ │ └── index.js │ ├── culture │ │ ├── culture-page.js │ │ ├── culture-page.module.scss │ │ ├── culture-page.stories.js │ │ └── index.js │ ├── index.js │ ├── jobs │ │ ├── index.js │ │ ├── jobs-listing.js │ │ ├── jobs-listing.module.scss │ │ └── jobs-listing.stories.js │ ├── person │ │ ├── index.js │ │ ├── person.js │ │ ├── person.module.scss │ │ └── person.stories.js │ ├── service │ │ ├── index.js │ │ ├── service-page.js │ │ ├── service-page.module.scss │ │ └── service-page.stories.js │ ├── standard │ │ ├── index.js │ │ ├── standard.js │ │ ├── standard.module.scss │ │ └── standard.stories.js │ ├── sub-service │ │ └── index.js │ └── team │ │ ├── index.js │ │ ├── team-listing.js │ │ ├── team-listing.module.scss │ │ └── team-listing.stories.js └── utils │ ├── css-vars-polyfill.js │ ├── safeget.js │ ├── selectors.js │ ├── tags.js │ ├── torchup.js │ ├── urls.js │ └── wagtail-preview.js └── static ├── BingSiteAuth.xml ├── _redirects ├── images └── default-search-image.jpg └── robots.txt /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const paths = require('./path-mappings.json') 2 | 3 | module.exports = { 4 | "parser": "babel-eslint", 5 | "extends": [ 6 | "plugin:react/recommended", 7 | "prettier", 8 | "prettier/react" 9 | ], 10 | "plugins": [ 11 | "organize-imports" 12 | ], 13 | "rules": { 14 | "organize-imports/organize-imports": ["error", { 15 | "orderRules": [{ 16 | "moduleType": "nodeModule", 17 | "comment": "Vendor Modules" 18 | }, { 19 | "moduleType": "componentModules", 20 | "comment": "Components", 21 | "include": [ 22 | "src/components/", 23 | "src/templates/" 24 | ], 25 | "exclude": [ 26 | "src/**/*.scss" 27 | ] 28 | }, { 29 | "moduleType": "utilityModule", 30 | "comment": "Utilities", 31 | "include": [ 32 | "src/utils/", 33 | "src/context/", 34 | "src/fragments/", 35 | "src/images/" 36 | ] 37 | }, { 38 | "moduleType": "styleModules", 39 | "comment": "Styles", 40 | "include": [ 41 | "src/**/*.scss" 42 | ] 43 | }], 44 | "pathAliases": Object.keys(paths).map(prefix => { 45 | return { 46 | "prefix": prefix, 47 | "resolvesTo": paths[prefix] 48 | } 49 | }) 50 | }] 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | /.idea/vcs.xml 71 | /.idea/misc.xml 72 | /.idea/codeStyles/Project.xml 73 | /.idea/codeStyles/codeStyleConfig.xml 74 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "trailingComma": "es5" 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-actions/register'; 2 | import '@storybook/addon-links/register'; 3 | import '@storybook/addon-viewport/register'; 4 | import '@storybook/addon-backgrounds/register'; 5 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { addDecorator } from '@storybook/react'; // <- or your storybook framework 2 | import { withBackgrounds } from '@storybook/addon-backgrounds'; 3 | import { configure } from '@storybook/react'; 4 | import 'reset-css' 5 | import '../src/styles/_fonts.scss' 6 | 7 | // automatically import all files ending in *.stories.js 8 | const req = require.context('../src', true, /.stories.js$/); 9 | function loadStories() { 10 | req.keys().forEach(filename => req(filename)); 11 | } 12 | 13 | addDecorator( 14 | withBackgrounds([ 15 | { name: 'tbx-accent', value: '#fd5765', default: true }, 16 | { name: 'tbx-purple', value: '#231749' }, 17 | { name: 'white', value: '#FFF' }, 18 | ]) 19 | ) 20 | 21 | // Gatsby's Link overrides: 22 | // Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here 23 | global.___loader = { 24 | enqueue: () => {}, 25 | hovering: () => {}, 26 | } 27 | // Gatsby internal mocking to prevent unnecessary errors in storybook testing environment 28 | global.__PATH_PREFIX__ = "" 29 | // This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook 30 | window.___navigate = pathname => { 31 | action("NavigateTo:")(pathname) 32 | } 33 | configure(loadStories, module) 34 | 35 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = (baseConfig, env, defaultConfig) => { 4 | // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. 5 | defaultConfig.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/] 6 | 7 | // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7) 8 | defaultConfig.module.rules[0].use[0].loader = require.resolve("babel-loader") 9 | 10 | // use @babel/plugin-proposal-class-properties for class arrow functions 11 | defaultConfig.module.rules[0].use[0].options.plugins = [ 12 | require.resolve("@babel/plugin-proposal-class-properties"), 13 | // require.resolve("@babel/plugin-syntax-export-default-from") 14 | ] 15 | 16 | // SCSS Support 17 | defaultConfig.module.rules.push({ 18 | test: /\.scss$/, 19 | loaders: [ 20 | "style-loader", 21 | { 22 | loader: 'css-loader', 23 | options: { 24 | modules: true, 25 | importLoaders: 1, 26 | }, 27 | }, 28 | "sass-loader" 29 | ], 30 | include: path.resolve(__dirname, "../src/") 31 | }) 32 | 33 | // use @babel/preset-react for JSX and env (instead of staged presets) 34 | defaultConfig.module.rules[0].use[0].options.presets = [ 35 | require.resolve("@babel/preset-react"), 36 | require.resolve("@babel/preset-env"), 37 | ] 38 | 39 | defaultConfig.resolve.mainFields = ["browser", "module", "main"] 40 | 41 | return defaultConfig 42 | } 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const pathMappings = require('./path-mappings.json') 2 | var browserslist = require('browserslist') 3 | 4 | module.exports = function (api) { 5 | api.cache(true) 6 | 7 | return { 8 | "presets": [ 9 | [ 10 | "babel-preset-gatsby", 11 | { 12 | "targets": { 13 | "browsers": browserslist() 14 | } 15 | } 16 | ] 17 | ], 18 | "plugins": [ 19 | ["module-resolver", { 20 | "root": ["./"], 21 | "alias": pathMappings 22 | }] 23 | ] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import 'reset-css' 2 | import 'babel-polyfill' 3 | import smartquotes from 'smartquotes' 4 | 5 | // Smartquotes (at Tom D's request!) 6 | smartquotes().listen() 7 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | // Use esm to allow importing ES6 modules in gatsby-node.esm.js 2 | require = require('esm')(module) 3 | module.exports = require('./gatsby-node.esm.js') 4 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "allowSyntheticDefaultImports": false, 5 | "baseUrl": "./", 6 | "paths": { 7 | "@root": ["./"], 8 | "@components": ["./src/components"], 9 | "@images": ["./src/images"], 10 | "@utils": ["./src/utils"], 11 | "@context": ["./src/context"], 12 | "@templates": ["./src/templates"], 13 | } 14 | }, 15 | "exclude": ["node_modules", "public"] 16 | } -------------------------------------------------------------------------------- /path-mappings.json: -------------------------------------------------------------------------------- 1 | { 2 | "@root": "./", 3 | "@components": "./src/components", 4 | "@images": "./src/images", 5 | "@utils": "./src/utils", 6 | "@context": "./src/context", 7 | "@templates": "./src/templates", 8 | "@styles": "./src/styles" 9 | } -------------------------------------------------------------------------------- /src/components/animated-character/animated-character.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | // Utilities 5 | import { ReactComponent as WomanChar } from '@images/help-character.svg' 6 | import { ReactComponent as WagtailChar } from '@images/wagtail.svg' 7 | import { ReactComponent as ManChar } from '@images/data-greeting.svg' 8 | // Styles 9 | import './animated-character.module.scss' 10 | import styles from './animated-character.module.scss' 11 | 12 | class AnimatedCharacter extends React.Component { 13 | constructor(props) { 14 | super(props) 15 | this.state = { active: false } 16 | this.containerRef = React.createRef() 17 | } 18 | 19 | animate = () => { 20 | if (this.containerRef.current) { 21 | setTimeout(() => { 22 | this.setState({ active: true }) 23 | }, 500) 24 | } 25 | } 26 | 27 | componentDidMount() { 28 | if (this.containerRef.current && window) { 29 | this.animate() 30 | } 31 | } 32 | 33 | render() { 34 | const { containerClassName, character } = this.props 35 | return ( 36 |
44 | {this.renderCharacter()} 45 |
46 | ) 47 | } 48 | 49 | renderCharacter = () => { 50 | const { active } = this.state 51 | switch (this.props.character) { 52 | case 'woman-left': 53 | return ( 54 | 57 | ) 58 | 59 | case 'wagtail': 60 | return ( 61 | 64 | ) 65 | 66 | case 'man-left': 67 | return ( 68 | 71 | ) 72 | 73 | default: 74 | return
75 | } 76 | } 77 | } 78 | 79 | AnimatedCharacter.propTypes = { 80 | character: PropTypes.string, 81 | containerClassName: PropTypes.string, 82 | } 83 | 84 | AnimatedCharacter.defaultProps = { 85 | className: '', 86 | containerClassName: '', 87 | } 88 | 89 | export default AnimatedCharacter 90 | -------------------------------------------------------------------------------- /src/components/animated-character/animated-character.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import AnimatedCharacter from './animated-character' 6 | 7 | storiesOf('Components/Shared Components', module).add( 8 | 'Animated Character', 9 | () => { 10 | return ( 11 |
12 | 13 |
14 | ) 15 | } 16 | ) 17 | -------------------------------------------------------------------------------- /src/components/animated-character/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import AnimatedCharacter from './animated-character' 3 | export default AnimatedCharacter 4 | -------------------------------------------------------------------------------- /src/components/author-block/author-block.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | import dayjs from 'dayjs' 5 | import { Link } from 'gatsby' 6 | // Components 7 | import Avatar from '@components/avatar' 8 | import Tag from '@components/tag' 9 | // Styles 10 | import styles from './author-block.module.scss' 11 | 12 | const AuthorBlock = ({ author, datePublished, tags, readTime, className }) => ( 13 |
14 |
15 | 20 |
21 | 22 | {author.name || ''} 23 | 24 |

25 | 26 | {author.role || ''} 27 | 28 | {datePublished ? ( 29 | 30 | {dayjs(datePublished).format(`DD MMM 'YY`)} 31 | 32 | ) : null} 33 | {readTime ? ( 34 | 35 | {readTime} min read 36 | 37 | ) : null} 38 |

39 | {tags.length ? ( 40 |
41 | {tags.map((tag, index) => ( 42 | 43 | ))} 44 |
45 | ) : null} 46 |
47 |
48 |
49 | ) 50 | 51 | AuthorBlock.propTypes = { 52 | className: PropTypes.string, 53 | author: PropTypes.object.isRequired, 54 | datePublished: PropTypes.string, 55 | tags: PropTypes.array, 56 | readTime: PropTypes.number, 57 | } 58 | 59 | AuthorBlock.defaultProps = { 60 | author: { 61 | avatar: require('@images/default-avatar.png'), 62 | }, 63 | } 64 | 65 | export default AuthorBlock 66 | -------------------------------------------------------------------------------- /src/components/author-block/author-block.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | .authorBlock { 4 | 5 | &Container { 6 | @include container(); 7 | display: flex; 8 | align-items: flex-start; 9 | } 10 | 11 | &Image { 12 | width: 55px; 13 | height: 55px; 14 | margin-right: 20px; 15 | 16 | @include for-desktop-up { 17 | width: 80px; 18 | height: 80px; 19 | } 20 | } 21 | 22 | &Details { 23 | display: flex; 24 | flex-direction: column; 25 | } 26 | 27 | &Name { 28 | color: $primary; 29 | font-size: 20px; 30 | margin-bottom: 2px; 31 | border-bottom: none; 32 | } 33 | 34 | &Meta { 35 | font-size: 12px; 36 | line-height: 1.4; 37 | margin: 0 0 0; 38 | 39 | &Role { 40 | margin: 0 0 2px; 41 | line-height: 1.4; 42 | color: $accent-small-text; 43 | text-transform: uppercase; 44 | letter-spacing: 0.15em; 45 | font-weight: bold; 46 | font-size: 12px; 47 | } 48 | 49 | &Date { 50 | font-size: 12px; 51 | text-transform: none; 52 | letter-spacing: 0; 53 | color: #333; 54 | margin-left: 5px; 55 | padding-left: 5px; 56 | border-left: 1px solid rgba(0, 0, 0, 0.1); 57 | } 58 | 59 | &ReadTime { 60 | font-size: 12px; 61 | text-transform: none; 62 | letter-spacing: 0; 63 | color: #333; 64 | margin-left: 5px; 65 | padding-left: 5px; 66 | border-left: 1px solid rgba(0, 0, 0, 0.1); 67 | } 68 | } 69 | 70 | &Tags { 71 | margin: 10px 0 0; 72 | } 73 | 74 | } 75 | -------------------------------------------------------------------------------- /src/components/author-block/author-block.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import AuthorBlock from './author-block' 6 | 7 | storiesOf('Components/Shared Components', module).add('Author Block', () => { 8 | return ( 9 |
17 | 31 |
32 | ) 33 | }) 34 | -------------------------------------------------------------------------------- /src/components/author-block/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import AuthorBlock from './author-block' 3 | export default AuthorBlock 4 | -------------------------------------------------------------------------------- /src/components/avatar/avatar.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | // Styles 5 | import styles from './avatar.module.scss' 6 | 7 | const Avatar = ({ src, className, containerClassName, alt }) => ( 8 |
9 | {alt} 14 |
15 | ) 16 | 17 | Avatar.propTypes = { 18 | src: PropTypes.string, 19 | className: PropTypes.string, 20 | containerClassName: PropTypes.string, 21 | alt: PropTypes.string, 22 | } 23 | 24 | Avatar.defaultProps = { 25 | className: '', 26 | containerClassName: '', 27 | alt: '', 28 | } 29 | 30 | export default Avatar 31 | -------------------------------------------------------------------------------- /src/components/avatar/avatar.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | .avatar { 4 | height: 100px; 5 | width: 100px; 6 | border-radius: 90px; 7 | 8 | &Image { 9 | height: 100%; 10 | min-width: 100%; 11 | border-radius: 100%; 12 | } 13 | 14 | } 15 | -------------------------------------------------------------------------------- /src/components/avatar/avatar.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import Avatar from './avatar' 6 | 7 | storiesOf('Components/Shared Components', module).add('Avatar', () => { 8 | return ( 9 |
18 | 19 |
20 | ) 21 | }) 22 | -------------------------------------------------------------------------------- /src/components/avatar/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import Avatar from './avatar' 3 | export default Avatar 4 | -------------------------------------------------------------------------------- /src/components/blog-link/blog-link.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | import { Link } from 'gatsby' 5 | import dayjs from 'dayjs' 6 | // Components 7 | import Avatar from '@components/avatar' 8 | // Styles 9 | import styles from './blog-link.module.scss' 10 | 11 | const BlogLink = ({ 12 | href, 13 | title, 14 | featured, 15 | description, 16 | className, 17 | authorAvatar, 18 | authorName, 19 | authorRole, 20 | datePublished, 21 | }) => ( 22 | 29 |

{title}

30 | {description && featured ? ( 31 |

{description}

32 | ) : null} 33 |
34 | 39 |
40 | {authorName} 41 | 42 | {authorRole} 43 | {datePublished ? ( 44 | 45 | {dayjs(datePublished).format(`DD MMM 'YY`)} 46 | 47 | ) : null} 48 | 49 |
50 |
51 | 52 | ) 53 | 54 | BlogLink.propTypes = { 55 | href: PropTypes.string, 56 | title: PropTypes.string, 57 | featured: PropTypes.bool, 58 | description: PropTypes.string, 59 | className: PropTypes.string, 60 | authorAvatar: PropTypes.string, 61 | authorName: PropTypes.string, 62 | authorRole: PropTypes.string, 63 | datePublished: PropTypes.string, 64 | } 65 | 66 | BlogLink.defaultProps = { 67 | className: '', 68 | } 69 | 70 | export default BlogLink 71 | -------------------------------------------------------------------------------- /src/components/blog-link/blog-link.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | // Theme overrides: 4 | $blog-author: var(--testimonial-name); 5 | 6 | .blogLink { 7 | display: block; 8 | padding: 0 0 50px 0; 9 | margin: 40px 0 0; 10 | text-decoration: none; 11 | border-bottom: none; 12 | 13 | &:hover { 14 | .blogLinkTitle { 15 | color: $light-blue; 16 | } 17 | } 18 | 19 | &Meta { 20 | display: flex; 21 | flex-direction: row; 22 | align-items: center; 23 | } 24 | 25 | &Title { 26 | font-size: 30px; 27 | font-weight: bold; 28 | line-height: 40px; 29 | margin: 0 0 20px; 30 | color: $primary; 31 | } 32 | 33 | &Image { 34 | width: 55px; 35 | height: 55px; 36 | margin-right: 15px; 37 | } 38 | 39 | &Author { 40 | display: flex; 41 | flex-direction: column; 42 | 43 | &Name { 44 | color: $primary; 45 | font-size: 20px; 46 | } 47 | 48 | &Role { 49 | margin: 0 0 2px; 50 | line-height: 1.4; 51 | color: $blog-author; 52 | text-transform: uppercase; 53 | letter-spacing: 0.15em; 54 | font-weight: bold; 55 | font-size: 12px; 56 | } 57 | 58 | &Date { 59 | font-size: 12px; 60 | font-weight: normal; 61 | text-transform: none; 62 | letter-spacing: 0; 63 | color: #333; 64 | margin-left: 5px; 65 | padding-left: 5px; 66 | border-left: 1px solid rgba(0, 0, 0, 0.1); 67 | } 68 | } 69 | 70 | &Featured { 71 | @extend .blogLink; 72 | border-top: none; 73 | padding-top: 0; 74 | padding-bottom: 50px !important; 75 | 76 | @include for-desktop-up { 77 | width: 58.33vw; 78 | } 79 | 80 | .blogLinkTitle { 81 | font-size: 45px; 82 | line-height: 50px; 83 | font-weight: 800; 84 | 85 | @include for-desktop-up { 86 | font-size: 65px !important; 87 | line-height: 80px; 88 | } 89 | } 90 | 91 | .blogLinkDesc { 92 | margin: 0 0 30px; 93 | color: $grey; 94 | @include for-tablet-portrait-up { 95 | line-height: 34px; 96 | font-size: 20px ; 97 | } 98 | } 99 | 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/components/blog-link/blog-link.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import BlogLink from './blog-link' 6 | 7 | storiesOf('Components/Shared Components', module).add('BlogLink', () => { 8 | return ( 9 |
18 | 19 |
20 | ) 21 | }) 22 | -------------------------------------------------------------------------------- /src/components/blog-link/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import BlogLink from './blog-link' 3 | export default BlogLink 4 | -------------------------------------------------------------------------------- /src/components/blogs-listing-block/blogs.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | import { Link } from 'gatsby' 5 | // Components 6 | import BlogLink from '@components/blog-link' 7 | // Styles 8 | import styles from './blogs.module.scss' 9 | 10 | class BlogsBlock extends React.Component { 11 | render() { 12 | const { 13 | blogs, 14 | className, 15 | sectionTitle, 16 | listingUrl, 17 | showFeatured = true, 18 | } = this.props 19 | const featuredPost = blogs[0] 20 | 21 | if (!blogs || blogs.length === 0) { 22 | return
; 23 | } 24 | 25 | return ( 26 |
27 | {sectionTitle ? ( 28 | {sectionTitle} 29 | ) : null} 30 |
31 | {(showFeatured && featuredPost) ? ( 32 |
33 | 42 |
43 | ) : null} 44 | 45 |
46 | {(blogs || []).slice(showFeatured ? 1 : 0).map((blog, index) => ( 47 | 55 | ))} 56 |
57 | 58 | {listingUrl ? ( 59 |
60 | See more blogs 61 |
62 | ) : null} 63 |
64 |
65 | ) 66 | } 67 | } 68 | 69 | BlogsBlock.propTypes = { 70 | blogs: PropTypes.array, 71 | className: PropTypes.string, 72 | listingUrl: PropTypes.string, 73 | sectionTitle: PropTypes.string, 74 | showFeatured: PropTypes.bool, 75 | } 76 | 77 | BlogsBlock.defaultProps = { 78 | className: '', 79 | blogs: [], 80 | sectionTitle: 'Thinking', 81 | } 82 | 83 | export default BlogsBlock 84 | -------------------------------------------------------------------------------- /src/components/blogs-listing-block/blogs.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | .block { 4 | background-color: white; 5 | padding: 100px 0 20px; 6 | position: relative; 7 | 8 | &Content { 9 | @include container; 10 | } 11 | 12 | &Intro { 13 | 14 | &Opinion { 15 | position: relative; 16 | padding-top: 20px; 17 | 18 | @include for-tablet-landscape-up { 19 | width: 60%; 20 | } 21 | 22 | &Title { 23 | color: $accent; 24 | } 25 | 26 | &Text { 27 | line-height: 30px; 28 | margin: 0 0 40px; 29 | color: $primary; 30 | @include for-tablet-landscape-up { 31 | line-height: 42px; 32 | } 33 | } 34 | 35 | &::before { 36 | position: absolute; 37 | content: ''; 38 | width: 60px; 39 | height: 8px; 40 | left: 0; 41 | top: 0; 42 | background: $accent; 43 | } 44 | } 45 | } 46 | 47 | &BlogList { 48 | display: grid; 49 | grid-template-columns: 1fr; 50 | @include for-tablet-landscape-up { 51 | grid-template-columns: 1fr 1fr; 52 | grid-column-gap: 8.33vw; 53 | } 54 | padding-bottom: 50px; 55 | 56 | @include target-ie { 57 | display: flex; 58 | flex-direction: column; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/blogs-listing-block/blogs.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import Blogs from './blogs' 6 | 7 | storiesOf('Components/Landing Page', module).add('Blog Listing block', () => { 8 | return ( 9 | 46 | ) 47 | }) 48 | -------------------------------------------------------------------------------- /src/components/blogs-listing-block/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import Blogs from './blogs' 3 | export default Blogs 4 | -------------------------------------------------------------------------------- /src/components/bustout/bustout.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | // Utilities 5 | import { renderTorchUp } from '@utils/torchup' 6 | // Styles 7 | import styles from './bustout.module.scss' 8 | 9 | const Bustout = ({ src, align = 'left', className, caption }) => ( 10 |
11 |
21 |
27 | {caption ? ( 28 |
29 |
33 |
34 | ) : null} 35 |
36 |
37 | ) 38 | 39 | Bustout.propTypes = { 40 | src: PropTypes.string, 41 | caption: PropTypes.string, 42 | align: PropTypes.oneOf(['left', 'right', 'full']), 43 | className: PropTypes.string, 44 | } 45 | 46 | Bustout.defaultProps = { 47 | className: '', 48 | src: 'http://playground.torchboxapps.com/tbx-rebrand/assets/images/todd.jpg', 49 | } 50 | 51 | export default Bustout 52 | -------------------------------------------------------------------------------- /src/components/bustout/bustout.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | .bustout { 4 | display: flex; 5 | position: relative; 6 | background: $blue; 7 | 8 | flex-direction: column; 9 | @include for-tablet-landscape-up { 10 | flex-direction: row; 11 | } 12 | 13 | &Container { 14 | margin: 60px 0 80px; 15 | } 16 | 17 | &RightAligned { 18 | @extend .bustout; 19 | flex-direction: column-reverse; 20 | @include for-tablet-landscape-up { 21 | flex-direction: row-reverse; 22 | } 23 | } 24 | 25 | &Full { 26 | flex-direction: column; 27 | 28 | .bustoutImage { 29 | width: 100%; 30 | } 31 | 32 | .bustoutCaption { 33 | width: 100%; 34 | } 35 | } 36 | 37 | &Image { 38 | min-height: 300px; 39 | width: 100%; 40 | @include for-tablet-landscape-up { 41 | float: left; 42 | width: 50%; 43 | } 44 | background-size: cover; 45 | background-position: center; 46 | 47 | } 48 | 49 | &Caption { 50 | background: $light-blue; 51 | width: 100%; 52 | 53 | @include for-tablet-landscape-up { 54 | float: left; 55 | width: 50%; 56 | } 57 | 58 | &Inner { 59 | padding: 8.33vw; 60 | } 61 | 62 | h1, h2, h3, h4, h5 { 63 | color: white; 64 | margin-top: 0; 65 | } 66 | 67 | p { 68 | color: rgba(white, 0.8); 69 | } 70 | 71 | } 72 | 73 | &::after { 74 | content: ""; 75 | display: table; 76 | clear: both; 77 | } 78 | 79 | } 80 | -------------------------------------------------------------------------------- /src/components/bustout/bustout.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import Bustout from './bustout' 6 | 7 | storiesOf('Components/Shared Components', module).add('Bustout', () => { 8 | return ( 9 |
16 | 17 |
18 | ) 19 | }) 20 | -------------------------------------------------------------------------------- /src/components/bustout/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import Bustout from './bustout' 3 | export default Bustout 4 | -------------------------------------------------------------------------------- /src/components/case-studies-block/case-studies-block.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import CaseStudiesBlock from './case-studies-block' 6 | 7 | storiesOf('Components/Landing Page', module).add('Case Studies block', () => { 8 | return ( 9 | 46 | ) 47 | }) 48 | -------------------------------------------------------------------------------- /src/components/case-studies-block/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import CaseStudiesBlock from './case-studies-block' 3 | export default CaseStudiesBlock 4 | -------------------------------------------------------------------------------- /src/components/code-block/code-block.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | import HighlightJS from 'highlightjs' 5 | import 'highlightjs/styles/idea.css' 6 | 7 | 8 | class CodeBlock extends React.PureComponent { 9 | constructor(props) { 10 | super(props) 11 | this.setRef = this.setRef.bind(this) 12 | } 13 | 14 | setRef(el) { 15 | this.codeEl = el 16 | } 17 | 18 | componentDidMount() { 19 | this.highlightCode() 20 | } 21 | 22 | componentDidUpdate() { 23 | this.highlightCode() 24 | } 25 | 26 | highlightCode() { 27 | HighlightJS.highlightBlock(this.codeEl) 28 | } 29 | 30 | render() { 31 | return ( 32 | 
33 |         
34 |           {this.props.value}
35 |         
36 |
37 | ) 38 | } 39 | } 40 | 41 | CodeBlock.defaultProps = { 42 | language: '' 43 | } 44 | 45 | CodeBlock.propTypes = { 46 | value: PropTypes.string.isRequired, 47 | language: PropTypes.string 48 | } 49 | 50 | export default CodeBlock 51 | -------------------------------------------------------------------------------- /src/components/code-block/index.js: -------------------------------------------------------------------------------- 1 | import CodeBlock from './code-block' 2 | export default CodeBlock 3 | -------------------------------------------------------------------------------- /src/components/contact-detailed/contact.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import Contact from './contact' 6 | 7 | storiesOf('Components/Shared Components', module).add( 8 | 'Contact Block (Detailed)', 9 | () => { 10 | return 11 | } 12 | ) 13 | -------------------------------------------------------------------------------- /src/components/contact-detailed/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import Contact from './contact' 3 | export default Contact 4 | -------------------------------------------------------------------------------- /src/components/contact/contact.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | import { Link } from 'gatsby' 5 | // Components 6 | import Avatar from '@components/avatar' 7 | // Styles 8 | import styles from './contact.module.scss' 9 | // Utils 10 | import safeGet from '@utils/safeget' 11 | 12 | const Contact = ({ title, emailAddress, phoneNumber, className, image }) => ( 13 |
14 |
15 | 19 | 28 |
29 |
30 | ) 31 | 32 | Contact.propTypes = { 33 | title: PropTypes.string, 34 | emailAddress: PropTypes.string, 35 | phoneNumber: PropTypes.string, 36 | className: PropTypes.string, 37 | image: PropTypes.object, 38 | } 39 | 40 | Contact.defaultProps = { 41 | title: 'Get in touch about your project', 42 | className: '', 43 | emailAddress: 'will@torchbox.com', 44 | name: 'Will Heinemen', 45 | phoneNumber: '+41524204242', 46 | role: 'Head of new buisness', 47 | avatar: require('@images/will.jpg'), 48 | } 49 | 50 | export default Contact 51 | -------------------------------------------------------------------------------- /src/components/contact/contact.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | // Theme overrides: 4 | $contact-phone-number-color: var(--contact-phone-number-color); 5 | $contact-phone-number-hover-color: var(--contact-phone-number-hover-color); 6 | 7 | .contactBlock { 8 | background-color: white; 9 | padding-top: 20px; 10 | padding-bottom: 20px; 11 | 12 | &Content { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | @include container; 17 | @include for-tablet-portrait-up { 18 | flex-direction: row; 19 | align-items: center; 20 | } 21 | } 22 | 23 | &Image { 24 | margin-bottom: 20px; 25 | @include for-tablet-portrait-up { 26 | margin-bottom: 0; 27 | } 28 | } 29 | 30 | &Details { 31 | display: flex; 32 | flex-direction: row; 33 | flex-wrap: wrap; 34 | align-items: center; 35 | @include for-phone-only { 36 | justify-content: center; 37 | } 38 | 39 | @include for-tablet-portrait-up { 40 | padding-left: 20px; 41 | } 42 | } 43 | 44 | &Title { 45 | width: 100%; 46 | color: $primary; 47 | font-size: 26px; 48 | line-height: 30px; 49 | margin: 0 0 5px; 50 | font-weight: 800; 51 | 52 | @include for-phone-only { 53 | text-align: center; 54 | } 55 | } 56 | 57 | &Email { 58 | color: $light-blue; 59 | font-size: 20px; 60 | line-height: 24px; 61 | text-decoration: none; 62 | margin: 0px 15px 0 0; 63 | font-weight: bold; 64 | 65 | @include for-phone-only { 66 | margin: 10px 15px 0 0; 67 | } 68 | 69 | &:hover, 70 | &:focus { 71 | color: $blue; 72 | } 73 | } 74 | 75 | &Number { 76 | height: 24px; 77 | line-height: 24px; 78 | text-decoration: none; 79 | font-size: 20px; 80 | font-weight: bold; 81 | color: $contact-phone-number-color; 82 | margin: 0px 15px 0 0; 83 | border-bottom: none; 84 | @include for-phone-only { 85 | margin: 10px 15px 0 0; 86 | } 87 | 88 | &:hover { 89 | color: $contact-phone-number-hover-color; 90 | } 91 | } 92 | 93 | } 94 | -------------------------------------------------------------------------------- /src/components/contact/contact.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import Contact from './contact' 6 | 7 | storiesOf('Components/Shared Components', module).add( 8 | 'Contact Block (Minimal)', 9 | () => { 10 | return ( 11 | 16 | ) 17 | } 18 | ) 19 | -------------------------------------------------------------------------------- /src/components/contact/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import Contact from './contact' 3 | export default Contact 4 | -------------------------------------------------------------------------------- /src/components/filter-tags/filter-tags.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import PropTypes from 'prop-types' 4 | // Components 5 | import Tag from '@components/tag' 6 | // Styles 7 | import styles from './filter-tags.module.scss' 8 | 9 | const FilterTags = ({ tags, onChange = () => null, activeTag, className }) => ( 10 |
11 | {tags.map((tag, index) => ( 12 | onChange(tag, index)} 18 | href={tag.href || '#'} 19 | label={tag.label || tag} 20 | /> 21 | ))} 22 |
23 | ) 24 | 25 | FilterTags.propTypes = { 26 | tags: PropTypes.array, 27 | className: PropTypes.string, 28 | onChange: PropTypes.func, 29 | activeTag: PropTypes.number, 30 | } 31 | 32 | FilterTags.defaultProps = { 33 | className: '', 34 | } 35 | 36 | export default FilterTags 37 | -------------------------------------------------------------------------------- /src/components/filter-tags/filter-tags.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | .filter { 4 | display: flex; 5 | align-items: center; 6 | justify-content: flex-start; 7 | flex-wrap: wrap; 8 | 9 | &Tag { 10 | box-sizing: content-box; 11 | font-size: 14px; 12 | padding: 2px 8px; 13 | margin-right: 10px; 14 | 15 | &Active { 16 | @extend .filterTag; 17 | border: 2px solid #fd5765; 18 | color: #fd5765; 19 | } 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/components/filter-tags/filter-tags.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | 5 | import { State, Store } from '@sambego/storybook-state' 6 | // Components 7 | import FilterTags from './filter-tags' 8 | 9 | const store = new Store({ 10 | activeOption: 0, 11 | }) 12 | 13 | storiesOf('Components/Shared Components', module).add('Filter Tags', () => { 14 | return ( 15 |
23 | 24 | { 28 | store.set({ activeOption: index }) 29 | }} 30 | /> 31 | 32 |
33 | ) 34 | }) 35 | -------------------------------------------------------------------------------- /src/components/filter-tags/index.js: -------------------------------------------------------------------------------- 1 | // Components 2 | import FilterTags from './filter-tags' 3 | export default FilterTags 4 | -------------------------------------------------------------------------------- /src/components/footer/footer.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { Link } from 'gatsby' 4 | import PropTypes from 'prop-types' 5 | // Styles 6 | import styles from './footer.module.scss' 7 | 8 | const Footer = ({ links, className }) => ( 9 |
10 |
11 |
    12 |
  • 13 |

    Glorious Oxfordshire

    14 |

    15 | Unit 9
    16 | Southill Business Park
    17 | Charlbury
    18 | OX7 3EW
    19 | UK 20 |

    21 |
    • 22 | 23 |
  • 24 |

    Vibrant Bristol

    25 |

    26 | 3rd Floor 27 |
    28 | 15 Colston Street 29 |
    30 | Bristol 31 |
    32 | BS1 5AP 33 |
    34 | UK 35 |

    36 |
    • 37 | 38 |
  • 39 |

    Historic Cambridge

    40 |

    41 | Future Business Centre 42 |
    43 | Kings Hedge road 44 |
    45 | Cambridge 46 |
    47 | CB4 2HY 48 |
    49 | UK 50 |

    51 |
    • 52 | 53 |
  • 54 |

    Working in the US

    55 |

    56 | We have a special formula for working successfully with 57 | organisations in the US 58 |

    59 |
    • 60 |
61 | 62 |
63 | © Torchbox {new Date().getFullYear()} 64 | {links.map((link, index) => ( 65 | 70 | {link.label} 71 | 72 | ))} 73 |
74 |
75 | 80 |
81 | ) 82 | 83 | Footer.propTypes = { 84 | links: PropTypes.array, 85 | className: PropTypes.string, 86 | } 87 | 88 | Footer.defaultProps = { 89 | className: '', 90 | links: [], 91 | } 92 | 93 | export default Footer 94 | -------------------------------------------------------------------------------- /src/components/footer/footer.module.scss: -------------------------------------------------------------------------------- 1 | @import '../../styles/app.module'; 2 | 3 | .footer { 4 | position: relative; 5 | background-color: $light-grey; 6 | padding: 100px 0 30px; 7 | 8 | &Content { 9 | @include container; 10 | } 11 | 12 | &Address { 13 | position: relative; 14 | padding: 0px 100px 20px 0px; 15 | 16 | &List { 17 | display: flex; 18 | flex-direction: row; 19 | flex-wrap: wrap; 20 | margin: 0 0 60px; 21 | } 22 | 23 | &Title { 24 | font-size: 20px; 25 | font-weight: bold; 26 | color: $primary; 27 | margin: 0 0 10px; 28 | line-height: 1; 29 | 30 | &::after { 31 | position: absolute; 32 | top: -6px; 33 | margin-left: 10px; 34 | content: ''; 35 | width: 20px; 36 | height: 30px; 37 | background: url("../../images/icons/diamond.svg"); 38 | transform: rotate(30deg); 39 | } 40 | } 41 | 42 | p { 43 | line-height: 22px; 44 | color: $grey; 45 | font-size: 14px; 46 | max-width: 300px; 47 | } 48 | } 49 | 50 | &Copyright { 51 | font-size: 0.7em; 52 | color: $grey; 53 | margin-right: 10px; 54 | } 55 | 56 | &Link { 57 | display: inline-block; 58 | height: 30px; 59 | font-size: 14px; 60 | margin-right: 10px; 61 | } 62 | 63 | a { 64 | font-size: 14px; 65 | height: 23px; 66 | font-weight: bold; 67 | border-bottom: 2px solid $green; 68 | color: $blue; 69 | &:hover { 70 | color: $blue; 71 | } 72 | } 73 | 74 | &Image { 75 | position: absolute; 76 | bottom: 0; 77 | right: 20px; 78 | width: 25vw; 79 | display: block; 80 | z-index: 20; 81 | 82 | @include for-phone-only { 83 | display: none ; 84 | } 85 | } 86 | 87 | } 88 | -------------------------------------------------------------------------------- /src/components/footer/footer.stories.js: -------------------------------------------------------------------------------- 1 | // Vendor Modules 2 | import React from 'react' 3 | import { storiesOf } from '@storybook/react' 4 | // Components 5 | import Footer from './footer' 6 | 7 | storiesOf('Components/Shared Components', module).add('Footer', () => { 8 | return ( 9 |