Skip to content

Commit

Permalink
Feature/page navigation (#93)
Browse files Browse the repository at this point in the history
* Page navigation component

* Add page navigation component to project

* hoc to anchor, file name only

* asAnchor => Anchor component

* yarn lock

* as-nav-link fixtures and snapshot

* update usage instructions

* Separate React Router example from standard usage

* Remove `exact` from fixture links

* Snapshot update following `exact` change

* Change `let` for `const` in test

* Update non react router fixture to use non react router props
  • Loading branch information
Loque- authored and stevesims committed Oct 22, 2018
1 parent ae712db commit c669fe7
Show file tree
Hide file tree
Showing 11 changed files with 669 additions and 7 deletions.
52 changes: 52 additions & 0 deletions components/page-navigation/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
PageNavigation
==============

### Import
```js
import PageNavigation from '@govuk-frederic/page-navigation';
```
<!-- STORY -->

### Usage

Default example

```jsx
import { Link } from 'react-router-dom';
import PageNavigation, { asAnchor } from '@govuk-frederic/page-navigation';

const NavLink = asAnchor(Link);
const NavigationItems = [
{
url: '/',
title: 'Home',
},
{
url: '/section-01',
title: 'Section 01',
},
{
url: '/section-02',
title: 'Section 02',
},
];


<PageNavigation>
{NavigationItems.map(({url, title}, index) => (
<NavLink key={index} to={url}>{title}</NavLink>
))}
</PageNavigation>
```

### TODO:
- Add responsive considerations
- Replace magic numbers from HOC items with constants

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
`children` | | ```null``` | node | Navigation items


34 changes: 34 additions & 0 deletions components/page-navigation/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"name": "@govuk-frederic/page-navigation",
"version": "0.1.1",
"dependencies": {
"@govuk-react/constants": "^0.2.7",
"govuk-colours": "^1.0.3"
},
"devDependencies": {
"@govuk-react/storybook-components": "^0.2.4",
"as-nav-link": "^0.1.4"
},
"peerDependencies": {
"emotion": ">=9",
"prop-types": ">=15",
"react": ">=16.2.0",
"react-emotion": ">=9"
},
"scripts": {
"build": "npm run build:lib && npm run build:es",
"build:lib": "rimraf lib && babel src -d lib --source-maps",
"build:es": "rimraf es && cross-env BABEL_ENV=es babel src -d es --source-maps",
"docs": "doc-component ./lib/index.js ./README.md"
},
"main": "lib/index.js",
"module": "es/index.js",
"author": "Toby Brancher",
"license": "MIT",
"homepage": "https://github.com/stevesims/govuk-frederic/tree/master/components/page-navigation",
"description": "Page navigation component",
"private": false,
"publishConfig": {
"access": "public"
}
}
Loading

0 comments on commit c669fe7

Please sign in to comment.