feat: Remove Header and Footer components (#669)

BREAKING CHANGE: Header and Footer are no longer available

Instead, use the private @seek/anz-candidate-header-footer package

.github/ISSUE_TEMPLATE.md

@@ -1,11 +1,3 @@
-# Motivation
+NOTE: This project has been deprecated in favour of [Braid Design System.](https://github.com/seek-oss/braid-design-system)
 
-{{ Why are we proposing an API change? }}
-
-# Proposed solution with API example(s)
-
-{{ What does your proposed API look like and why? }}
-
-# Unresolved questions
-
-{{ Is there anything else that needs to be discussed? }}
+Unless there's a critical production issue, we won't be making further changes to this repo.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,31 +1,3 @@
-** Please provide as much detail as possible, but feel free to remove irrelevant sections **
+NOTE: This project has been deprecated in favour of [Braid Design System.](https://github.com/seek-oss/braid-design-system)
 
-{{ Reason for change }}
-
-BREAKING CHANGE:
-
-{{ Description of breaking API change }}
-
-RFC URL:
-
-{{ URL of associated RFC for API change }}
-
-MIGRATION GUIDE:
-
-Before:
-
-```js
-{{ Old code }}
-```
-
-After:
-
-```js
-{{ New code }}
-```
-
-EXAMPLE USAGE:
-
-```js
-{{ Code }}
-```
+Unless there's a critical production issue, we won't be making further changes to this repo.

CONTRIBUTING.md

@@ -1,3 +1,9 @@
+## ⚠️ NOTE: This project has been deprecated in favour of [Braid Design System.](https://github.com/seek-oss/braid-design-system)
+
+Unless there's a critical production issue, we won't be making further changes to this repo.
+
+---
+
 # Contributing to seek-style-guide
 
 ⚠️ 🌏 👀 First and foremost, remember that this repo is **open source**.

README.md

@@ -1,3 +1,7 @@
+## ⚠️ NOTE: This project has been deprecated in favour of [Braid Design System.](https://github.com/seek-oss/braid-design-system)
+
+---
+
 [![Build Status](https://img.shields.io/travis/seek-oss/seek-style-guide/master.svg?style=flat-square)](http://travis-ci.org/seek-oss/seek-style-guide) [![npm](https://img.shields.io/npm/v/seek-style-guide.svg?style=flat-square)](https://www.npmjs.com/package/seek-style-guide) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![Styled with Prettier](https://img.shields.io/badge/styled%20with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 # seek-style-guide
@@ -50,28 +54,6 @@ export default class App extends Component {
 
 `StyleGuideProvider`'s props are used to set the page head properties using [Helmet](https://github.com/nfl/react-helmet).
 
-### Applying the Standard Header and Footer
-
-The standard header and footer are provided as React components:
-
-```js
-import { Header, Footer } from 'seek-style-guide/react';
-```
-
-The `<Header>` component accepts the following props:
-
-- **locale:** `'AU'` (default) or `'NZ'`
-- **authenticated:** `null/undefined` (default, authentication pending), `true` or `false`
-- **userName:** User's display name, when authenticated
-- **activeTab:** Text of the active tab, e.g. `'Job Search'`
-- **divider:** `true` (default, renders a blue divider below the navigation tabs) or `false`
-- **linkRenderer:** Function to allow custom rendering of links. The default implementation simply renders a standard link, spreading all props: `props => <a {...props} />`
-
-The `<Footer>` component accepts the following props:
-
-- **locale:** See above.
-- **linkRenderer:** See above.
-
 ## High Level Components
 
 As much as possible, you should aim to minimise the amount of custom CSS you need to write. This is achieved by leveraging our suite of high level components, which are demonstrated on our [style guide documentation site](https://seek-oss.github.io/seek-style-guide/).
@@ -230,80 +212,6 @@ It's important to note that any additions to these values (e.g. borders) will ne
 }
 ```
 
-## Standalone Header and Footer
-
-If you're maintaining or updating a non-React app, a standalone JS + CSS + HTML package is provided when [installing from npm](#installation). The bundled JavaScript is provided as a [UMD package](https://github.com/umdjs/umd), providing a global `SeekHeaderFooter` object as a fallback for older apps without a proper module system.
-
-First, include the following files in your app:
-
-- `seek-style-guide/dist/header-footer/styles.css`
-- `seek-style-guide/dist/header-footer/client.js`
-
-Then, include the appropriate header and footer HTML snippets, switching based on locale:
-
-**Header:**
-
-- `seek-style-guide/dist/header-footer/header__au.html`
-- `seek-style-guide/dist/header-footer/header__nz.html`
-
-**Header, with "Career Advice" tab selected:**
-
-- `seek-style-guide/dist/header-footer/header__au__career_advice.html`
-- `seek-style-guide/dist/header-footer/header__nz__career_advice.html`
-
-_Note: If you need a different tab selected, feel free to open a pull request or raise an issue_
-
-**Footer:**
-
-- `seek-style-guide/dist/header-footer/footer__au.html`
-- `seek-style-guide/dist/header-footer/footer__nz.html`
-
-When the document is ready, rehydrate the header by triggering a client-side render:
-
-```js
-var header = SeekHeaderFooter.renderHeader();
-
-// Update props later, if needed:
-header.updateProps({ ...newProps });
-```
-
-Finally, render the footer following a similar pattern:
-
-```js
-var footer = SeekHeaderFooter.renderFooter();
-
-// Again, update props later, if needed:
-footer.updateProps({ ...newProps });
-```
-
-If you'd prefer not to use the pre-rendered header and footer snippets and purely render client-side, you can manually pass the container element and initial props to the render methods yourself.
-
-First, add placeholder elements to the page:
-
-```html
-<div id="header"></div>
-<div id="footer"></div>
-```
-
-Then, trigger the initial render client-side:
-
-```js
-var header = SeekHeaderFooter.renderHeader(document.getElementById('header'), {
-  ...props
-});
-var footer = SeekHeaderFooter.renderHeader(document.getElementById('footer'), {
-  ...props
-});
-```
-
-For more detail on accepted props, read the React documentation for [applying the standard header and footer](#applying-the-standard-header-and-footer).
-
-If you need to create React elements (e.g. when providing a `linkRenderer` function), the standalone bundle also exports React's [createElement](https://facebook.github.io/react/docs/react-api.html#createelement) function so you don't need to install React separately to gain access to it:
-
-```js
-var link = SeekHeaderFooter.createElement('a', { href: '/jobs' }, 'Jobs');
-```
-
 ## Advanced Usage
 
 ### Babel Plugin

docs/src/components/PageLayout/PageLayout.js

@@ -8,7 +8,6 @@ import {
   Section,
   Paragraph,
   Text,
-  TextLink,
   Strong
 } from 'seek-style-guide/react';
 import Demo from '../Demo/Demo';
@@ -96,18 +95,6 @@ export default () => (
             </Text>
           </Paragraph>
         </Section>
-        <Section>
-          <Text heading>Header and Footer</Text>
-          <Paragraph>
-            <Text>
-              The obvious starting point is to add the{' '}
-              <TextLink to="/header">Header</TextLink> and{' '}
-              <TextLink to="/footer">Footer</TextLink> components to your page,
-              both of which are fairly self explanatory and documented
-              separately.
-            </Text>
-          </Paragraph>
-        </Section>
         <Section>
           <Text heading>Page Blocks</Text>
           <Paragraph>

docs/src/components/Playground/Playground.js

@@ -23,20 +23,15 @@ import {
   Critical,
   Secondary,
   Strong,
-  Header,
-  Footer,
   Rating,
   HeartIcon,
   ThumbsUpIcon
 } from 'seek-style-guide/react';
 
-import { makeDummyLinkRendererForPath } from 'seek-style-guide/react/Header/Header.demo';
 import TextLink from './Atoms/TextLink/TextLink';
 import IconButton from './Atoms/IconButton/IconButton';
 import Tab from './Atoms/Tab/Tab';
 
-const dummyLinkRenderer = makeDummyLinkRendererForPath('/playground');
-
 const renderAsideProfile = () => (
   <Card transparent>
     <Section>
@@ -161,8 +156,6 @@ export default class Playground extends Component {
   render() {
     return (
       <div>
-        <Header linkRenderer={dummyLinkRenderer} />
-
         <PageBlock>
           <Section header>
             <Text hero>Button Groups</Text>
@@ -852,7 +845,6 @@ export default class Playground extends Component {
             </Section>
           </Card>
         </PageBlock>
-        <Footer linkRenderer={dummyLinkRenderer} />
       </div>
     );
   }

package.json

@@ -8,21 +8,19 @@
   "main": "index.js",
   "scripts": {
     "start": "BASE_HREF=/ node docs/server",
-    "start-header-footer": "webpack-dev-server --config standalone/header-footer/webpack.config.js --content-base dist",
     "test": "npm run test-unit && npm run lint && npm run build && npm run html-sketchapp",
     "test-unit": "BABEL_ENV=test jest --config ./jest.config.json",
     "test-unit-watch": "npm run test-unit -- --watch",
     "update-snapshot": "npm run test-unit -- --updateSnapshot",
     "lint": "npm run lint-js && npm run lint-less && npm run flow && npm run lint-format",
-    "lint-js": "eslint standalone/*/src docs/src react test",
-    "lint-less": "stylelint '{theme,react,standalone,docs}/**/*.less'",
+    "lint-js": "eslint docs/src react test",
+    "lint-less": "stylelint '{theme,react,docs}/**/*.less'",
     "lint-format": "prettier --check \"**/*.{js,ts,tsx,md,less,css}\"",
     "format": "prettier --write \"**/*.{js,ts,tsx,md,less,css}\"",
     "clean": "rm -rf dist && rm -rf docs/dist && mkdir -p dist && mkdir -p docs/dist",
-    "compile": "npm run compile-render && npm run compile-client && npm run compile-header-footer",
+    "compile": "npm run compile-render && npm run compile-client",
     "compile-render": "NODE_ENV=production BASE_HREF=${BASE_HREF:-/} webpack --config docs/webpack.static.render.config.js && rm docs/dist/render.js",
     "compile-client": "NODE_ENV=production BASE_HREF=${BASE_HREF:-/} webpack --config docs/webpack.static.client.config.js",
-    "compile-header-footer": "NODE_ENV=production webpack --config standalone/header-footer/webpack.config.js && rm dist/header-footer/render.js",
     "html-sketchapp": "html-sketchapp --config docs/html-sketchapp.config.js",
     "html-sketchapp-dev": "html-sketchapp --config docs/html-sketchapp.dev.config.js",
     "build": "npm run clean && npm run compile && npm run playroom:build",