This repository has been archived by the owner on Jul 4, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from Financial-Times/v3
V3
- Loading branch information
Showing
61 changed files
with
590 additions
and
2,616 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| const viewports = [ | ||
| { | ||
| width: 768, | ||
| height: 1024 | ||
| }, | ||
| { | ||
| width: 490, | ||
| height: 732 | ||
| }, | ||
| { | ||
| width: 320, | ||
| height: 480 | ||
| } | ||
| ]; | ||
|
|
||
| const urls = [ | ||
| 'http://localhost:5005/', | ||
| 'http://localhost:5005/core' | ||
| ]; | ||
|
|
||
| const config = { | ||
| defaults: { | ||
| page: { | ||
| headers: { | ||
| 'Cookie': 'next-flags=ads:off,cookieMessage:off; secure=true' | ||
| } | ||
| }, | ||
| timeout: 25000, | ||
| rules: ['Principle1.Guideline1_3.1_3_1_AAA'] | ||
| }, | ||
| urls: [] | ||
| }; | ||
|
|
||
| for (const viewport of viewports) { | ||
| for (const url of urls) { | ||
|
|
||
| const path = `${url.substring(url.lastIndexOf('/'))}@${viewport.width}x${viewport.height}`; | ||
|
|
||
| config.urls.push({ | ||
| url: url, | ||
| page: { | ||
| viewport: viewport | ||
| }, | ||
| screenCapture: `./pa11y_screenCapture/${path}.png` | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| module.exports = config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,148 +1,77 @@ | ||
| # kmt-header [](https://circleci.com/gh/Financial-Times/kmt-header) | ||
| # kat-header [](https://circleci.com/gh/Financial-Times/kmt-header) | ||
|
|
||
| Header component for KAT. | ||
| Handlebars header template for KAT apps. | ||
|
|
||
| KAT (Knowledge & administration tools) is an ft.com application created for Financial Times B2B clients. | ||
| ## Usage | ||
|
|
||
| ## Getting started | ||
| These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. | ||
| If using `n-internal-tool` you'll have to add the path to your `node-modules/@financial-times` directory as the `partialsDirectory` option to `n-internal-tool` so that it can resolve the partial location. | ||
|
|
||
| ### HTML | ||
| ```sh | ||
| npm install --save @financial-times/kat-header | ||
| ``` | ||
| $ git clone git@github.com:Financial-Times/kmt-header.git | ||
| $ npm install | ||
| $ bower install | ||
| or | ||
| ```sh | ||
| bower install --save kat-header | ||
| ``` | ||
|
|
||
| Then you can run `$ npm start` and go to `http://local.ft.com:5000/` in your browser to see the footer module running locally on your machine. | ||
| Use handlebars template | ||
| ```hbs | ||
| {{> kat-header/header }} | ||
| To be able to manage footer main settings you can create an `.env` file in the root directory with the following variables: | ||
| {{!-- Put the rest of your body content here. The footer should be included before the drawer --}} | ||
| {{>kat-header/drawer}} | ||
| ``` | ||
| NODE_ENV=development | ||
| PORT=5000 | ||
|
|
||
| FOOTER_THEME="theme-dark" | ||
| FOOTER_TYPE="short" | ||
| FOOTER_PADDING_TOP="10" | ||
| FOOTER_HELP_LINK="http://help.ft.com/help/b2b-support/knowledge-administration-tool/" | ||
| ``` | ||
|
|
||
| #### Important notes | ||
| If you see an error like `Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime` you will probably need to run `$ npm rebuild node-sass` to overcome this. In addition you might need to update `origami-build-tools`. | ||
|
|
||
| ## Testing | ||
| We are using [Jest](https://facebook.github.io/jest/) for testing React components, and [Enzyme](http://airbnb.io/enzyme/) for rendering components inside our tests. | ||
|
|
||
| **Please note that due to using an earlier version of React, we are using version1.4.x of Enzyme, so not all of the latest functions are available to us. Please refer to [the docs for Enzyme1.4.x](https://github.com/airbnb/enzyme/tree/442147f669abace1eeae08040885893894ae0505/docs) for a list of available functions.** | ||
|
|
||
| Tests for React components should be saved as `test.js` inside the folder for that component. | ||
| It will display a licence switcher form if a `licenceList` property exists in the template. See the [demo](./demos/app.js) for example usage. /* You should provide a route for the core form to fallback to, this ideally would be a route that directs the user to the same page but for the licence selected via the form */ | ||
|
|
||
| ### Running tests | ||
| - To run a one-time test: `$ npm test`; | ||
| - To run tests and watch for changes: `$ npm run testWatch`; | ||
| - `$ npm test- -- -coverage` to see the coverage of tested files. | ||
| ### Navigation Config | ||
| Pass an object with a `nav` property to your handlebars template. | ||
|
|
||
| ## Deployment | ||
| This component has been created to be included throughout other KAT components. | ||
| This will have a `heading` property which will act as the heading of the page (defaults to "Knowledge & administration tools"). | ||
|
|
||
| ### How to update a repo that uses the component to the new version | ||
| If you want to update connected components with the latest version, you need to follow the following steps: | ||
| 1. Create a new repository release on GitHub. Please follow naming convention of previous releases. | ||
| 2. Go to `bower.json` file of the component you want to update, and change `"kmt-header"` dependency version to the [newly released one](https://github.com/Financial-Times/kmt-header/releases). | ||
| 3. Run `$ bower install` in the component repository. | ||
| It also will take an `items` property which is an array of objects to populate the navigation links, each of these have the following properties: | ||
| - `name` - String - the text to render | ||
| - `href` - String - the URL to link to | ||
| - `showFlag` - String (optional) - if the nav item requires a flag to be on, the value of this is the flag name. When that flag is true this nav item will render | ||
| - `hideFlag` - String (optional) - if the nav item requires a flag to be off, the value of this is the flag name. When that flag is false this nav item will render | ||
| - `selected` - Boolean (optional) - when true this nav item will render as "selected" to denote the current page. Only one nav item should be "selected". | ||
| - `last` - Boolean (optional) - when true this nav item will float to the right of the header | ||
|
|
||
| The following KAT components are currently using `kmt-header`: | ||
| - [kmt-overview](https://github.com/Financial-Times/kmt-overview) | ||
| - [kmt-myft](https://github.com/Financial-Times/kmt-myft) | ||
| - [kat-usage-report](https://github.com/Financial-Times/kat-usage-report) | ||
| There is a [default config object](./navigation-config.js) you can use by calling the function and extend if needed. Pass in the `licenceId` as the first parameter in order to populate the link URLs, In order to mark an item as "selected" you can pass the `trackable` value to the function which will mark that item as selected. You can use this in your controller as the example shown below: | ||
|
|
||
| ### How to use the component | ||
| ```js | ||
| const navigationConfig = require('@financial-times/kat-header/navigation-config'); | ||
|
|
||
| ## Installation: | ||
| ``` | ||
| bower install- -S kmt-header | ||
| res.render('index', navigationConfig('licenceId123')) // this won't show any tabs as selected | ||
| // or | ||
| res.render('overview', navigationConfig('licenceId123', 'overview', '/overview/')) // this will show overview as the selected tab | ||
| ``` | ||
|
|
||
| ## Usage: | ||
| ### Load the CSS: | ||
|
|
||
| ### Styles | ||
| Include the styles for the header by adding the following to your SCSS | ||
| ```scss | ||
| @import '../bower_components/kmt-header/main'; | ||
| @import 'kmt-header/main'; | ||
| ``` | ||
|
|
||
| ### Load the JS: | ||
| * **Inside** React Redux app: | ||
| ```js | ||
| // first add the header reducers to the parent app reducers | ||
| import { KmtHeaderNs } from "kmt-header/main"; | ||
| //... | ||
| combineReducers(Object.assign({}, parentAppReducers, { KmtHeaderNs })); | ||
| ``` | ||
| ```js | ||
| // then include and use in a component/container | ||
| import { KmtHeaderContainer } from "kmt-header/main"; | ||
| //... | ||
| <KmtHeaderContainer /> | ||
| ``` | ||
| ### Javascript | ||
|
|
||
| * **Outside** React Redux app (normal standalone use): | ||
| Include the javascript by adding the following to your JS and initialise when ready using the `init` function. This will add an enhanced experience to the licence switcher. | ||
| ```js | ||
| // include and use in a component/container | ||
| import KmtHeader from "kmt-header/main"; | ||
| //... | ||
| KmtHeader.init(options); | ||
| ``` | ||
| const katHeader = require('@financial-times/kat-header'); | ||
|
|
||
| ### `options`: | ||
| * React Redux store data (both for when **Inside** and **Outside** React Redux app): | ||
| ```js | ||
| KmtHeaderNs: { // {Object}- optional- Namespace for the KMT header React Redux store- if store data is provided it needs to be wrapped inside this object | ||
| mainMenu: { // {Object}- optional- Menu data. If provided, all the child elements are required | ||
| items: [ // {Array} Links to be shown | ||
| { // {Object} Link data | ||
| label: "DASHBOARD", // {String} Link label | ||
| href: "#" // {String} Link href | ||
| } | ||
| ], | ||
| enableMobile: true // {Bool} Enable/disable mobile menu | ||
| }, | ||
| headerTitle: { // {Object}- optional- Header text data. If provided, all the child elements are required | ||
| label: "KMT", // {String} Header main title | ||
| summary: "KNOWLEDGE MANAGER TOOLS" // {String}- optional- Header summary | ||
| }, | ||
| extraActions: { // {Object}- optional- Header extra action data. If provided, all the child elements are required | ||
| items: [ // {Object} links to be shown | ||
| { // {Object} Link data | ||
| label: "Logout", // {String} Link label | ||
| href: "#" // {String} Link href | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| // when ready | ||
| katHeader.init(); | ||
| ``` | ||
|
|
||
| * Normal standalone use: | ||
| ## Local Development | ||
|
|
||
| ```js | ||
| rootEl: "#root" | ||
| // {String|DOM element}- optional- Query string or DOM element inside which the KMT Header will be placed. | ||
| ``` | ||
| ### Demos | ||
|
|
||
| ```js | ||
| // Example | ||
| const options = { | ||
| rootEl: "#root", | ||
| data: { | ||
| KmtHeaderNs: { | ||
| headerTitle: { | ||
| label: "KMT", | ||
| summary: "KNOWLEDGE MANAGER TOOLS" | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| KmtHeader.init(options); | ||
| Run the demos using | ||
| ```sh | ||
| make build run | ||
| ``` | ||
|
|
||
| ## Feedback form | ||
| `kmt-header` doesn't save the data entered in the feedback form, it just passes it to `KmtHeaderNs.helpers.doRequest()`. The `doRequest()` method in `kmt-header` is only a stub. Any module(s) that needs to submit the feedback needs to supply a function to `doRequest()` that will handle this. | ||
| And view the demos on `http://local.ft.com:5005/` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,27 @@ | ||
| { | ||
| "name": "kmt-header", | ||
| "main": "index.js", | ||
| "homepage": "https://github.com/Financial-Times/kmt-header", | ||
| "authors": [ | ||
| "Ciprian Lujeru <ciprian.lujeru@ft.com>" | ||
| ], | ||
| "description": "react wrapper of o-header-services", | ||
| "keywords": [ | ||
| "knowledge", | ||
| "management", | ||
| "tool" | ||
| "main": [ | ||
| "index.js", | ||
| "main.scss" | ||
| ], | ||
| "homepage": "https://github.com/Financial-Times/kat-header", | ||
| "description": "kat wrapper of o-header-services", | ||
| "license": "MIT", | ||
| "private": true, | ||
| "ignore": [ | ||
| "**/.*", | ||
| "node_modules", | ||
| "bower_components", | ||
| "test", | ||
| "tests" | ||
| "tests", | ||
| "demos", | ||
| "public" | ||
| ], | ||
| "dependencies": { | ||
| "n-ui": "^6.14.0", | ||
| "o-header-services": "^2.0.1", | ||
| "n-ui-foundations": "^2.5.0", | ||
| "o-buttons": "^5.7.0", | ||
| "o-forms": "^4.0.3", | ||
| "n-notification": "^6.0.0", | ||
| "o-card": "^3.0.0" | ||
| }, | ||
| "resolutions": { | ||
| "n-ui-foundations": "^2.4.3" | ||
| "o-header-services": "^2.0.1", | ||
| "o-colors": "^4.1.4" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,10 @@ | ||
| machine: | ||
| node: | ||
| version: 7.2.1 | ||
| version: 8.2.1 | ||
|
|
||
| dependencies: | ||
| override: | ||
| - npm prune && npm install && ./node_modules/.bin/bower install | ||
|
|
||
| test: | ||
| override: | ||
| - echo "test" | ||
| deployment: | ||
| release: | ||
| tag: /^v?\d+\.\d+\.\d+(?:-beta\.\d+)?$/ | ||
| owner: Financial-Times | ||
| commands: | ||
| - make npm-publish |
Oops, something went wrong.