@govuk-react/top-nav - npm Package Compare versions

Comparing version 0.9.1 to 0.10.0

package.json

 {
   "name": "@govuk-react/top-nav",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "dependencies": {
-    "@govuk-react/button": "^0.9.1",
-    "@govuk-react/constants": "^0.9.1",
-    "@govuk-react/hoc": "^0.9.1",
+    "@govuk-react/button": "^0.10.0",
+    "@govuk-react/constants": "^0.10.0",
     "@govuk-react/icon-crown": "0.0.5",
-    "@govuk-react/icons": "^0.9.1",
-    "@govuk-react/lib": "^0.9.1",
-    "@govuk-react/search-box": "^0.9.1",
+    "@govuk-react/icons": "^0.10.0",
+    "@govuk-react/lib": "^0.10.0",
+    "@govuk-react/search-box": "^0.10.0",
     "govuk-colours": "^1.1.0"
@@ -19,9 +18,8 @@ },
   "scripts": {
-    "build": "yarn build:lib && yarn build:es",
-    "build:lib": "rimraf lib && babel src -x .js,jsx,.ts,.tsx -d lib --source-maps --config-file ../../babel.config.js",
-    "build:es": "rimraf es && cross-env BABEL_ENV=es babel src -x .js,jsx,.ts,.tsx -d es --source-maps --config-file ../../babel.config.js",
-    "docs": "doc-component ./lib/index.js ./README.md"
+    "docs": "doc-component ./src/index.tsx ./README.md",
+    "version": "yarn version"
   },
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "dist/govuk-react-top-nav.cjs.js",
+  "module": "dist/govuk-react-top-nav.esm.js",
+  "source": "src/index.tsx",
   "author": "Alasdair McLeay",
@@ -31,3 +29,2 @@ "license": "MIT",
   "description": "Styled top navigation header with numerous constituent parts input as props.",
-  "private": false,
   "publishConfig": {
@@ -34,0 +31,0 @@ "access": "public"

README.md

@@ -10,86 +10,18 @@ TopNav
 
-### Usage
+The GOV.UK header shows users that they are on GOV.UK and which service they are using.
 
-TopNav with logo, service title and navigation items
-
-```jsx
-import { SearchBox, TopNav } from 'govuk-react';
-import CrownIcon from '@govuk-react/icon-crown';
-
-const link = 'https://example.com?=1';
-
-const Company = (
-  <TopNav.Anchor href={link} target="new">
-    <TopNav.IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</TopNav.IconTitle>
-  </TopNav.Anchor>
-);
-
-const ServiceTitle = (
-  <TopNav.NavLink href={link} target="new">
-    Service Title
-  </TopNav.NavLink>
-);
-
-const Search = (
-  <SearchBox>
-    <SearchBox.Input placeholder="Search GOV.UK" />
-    <SearchBox.Button />
-  </SearchBox>
-);
-
-<TopNav company={Company} serviceTitle={ServiceTitle} search={Search} active={0}>
-  <TopNav.NavLink href="https://example.com?q=catdog" target="new">Navigation item #1</TopNav.NavLink>
-  <TopNav.NavLink href="https://example.com?q=dogcat" target="new">Navigation item #2</TopNav.NavLink>
-</TopNav>
-```
-
-With React Router
-
-```jsx
-import { BrowserRouter, Link } from 'react-router-dom';
-import { TopNav } from 'govuk-react';
-import CrownIcon from '@govuk-react/icon-crown';
-
-const reactRouterLink = '/section';
-const CompanyLink = (
-  <TopNav.Anchor as={Link} to={reactRouterLink}>
-    <TopNav.IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</TopNav.IconTitle>
-  </TopNav.Anchor>
-);
-
-const ServiceTitleLink = (
-  <TopNav.NavLink as={Link} to={reactRouterLink}>
-    Service Title
-  </TopNav.NavLink>
-);
-
-<BrowserRouter>
-  <TopNav company={CompanyLink} serviceTitle={ServiceTitleLink} />
-</BrowserRouter>
-```
-
-### References:
-
-- http://alphagov.github.io/govuk_template/example-proposition-menu.html
+- https://govuk-react.github.io/govuk-react/?path=/docs/top-nav
 - https://design-system.service.gov.uk/components/header/
 
-### TODO:
-- TODO: this component is a work in progress and needs to more closely match existing examples
-- TODO: is TopNav the right name? What's it called in other GDS styles/patterns?
-- TODO: (The name Header is ambiguous)
-- TODO: #205 Use context api and/or render props for `active` navigation items
-- TODO: Vertical alignment here needs some work, perhaps should be its own component
-- TODO: Icon should be lined up with font baseline, e.g. vertical-align: baseline
-
 ### Properties
 Prop | Required | Default | Type | Description
 :--- | :------- | :------ | :--- | :----------
- `bgColor` |  | ```BLACK``` | string | Top nav background color
- `children` |  | ```undefined``` | node | List Navigation items with anchor tags e.g. NavAnchor components
- `color` |  | ```WHITE``` | string | Top nav text color
- `company` |  | ```<IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</IconTitle>``` | node | Company component e.g. GOV UK
- `defaultOpen` |  | ```false``` | bool | Is the mobile navigation open by default?
- `search` |  | ```false``` | node | Search component
- `serviceTitle` |  | ```undefined``` | node | Service title component e.g. Food Standards Authority
+ `bgColor` |  | ```undefined``` | string | Top nav background color
+ `children` |  | ```undefined``` | any | List Navigation items with anchor tags e.g. NavAnchor components
+ `color` |  | ```undefined``` | string | Top nav text color
+ `company` |  | ```<IconTitle icon={<CrownIcon width="36" height="32" />}>GOV.UK</IconTitle>``` | any | Company component e.g. GOV UK
+ `defaultOpen` |  | ```undefined``` | boolean | Is the mobile navigation open by default?
+ `search` |  | ```undefined``` | any | Search component
+ `serviceTitle` |  | ```undefined``` | any | Service title component e.g. Food Standards Authority
 
 

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

9

decreased by-10%

Lines of code

2271

increased by3.13%

Worsened metrics

Total package byte prevSize

122318

decreased by-44.27%

Number of package files

38

decreased by-54.22%

Number of lines in readme file

27

decreased by-71.58%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@govuk-react/button@0.10.7(transitive)

• + Added@govuk-react/constants@0.10.7(transitive)

• + Added@govuk-react/icons@0.10.7(transitive)

• + Added@govuk-react/lib@0.10.7(transitive)

• + Added@govuk-react/search-box@0.10.7(transitive)

• - Removed@govuk-react/hoc@^0.9.1

• - Removed@govuk-react/button@0.9.1(transitive)

• - Removed@govuk-react/constants@0.9.1(transitive)

• - Removed@govuk-react/hoc@0.9.1(transitive)

• - Removed@govuk-react/icons@0.9.1(transitive)

• - Removed@govuk-react/lib@0.9.1(transitive)

• - Removed@govuk-react/link@0.9.1(transitive)

• - Removed@govuk-react/search-box@0.9.1(transitive)

• Updated@govuk-react/button@^0.10.0

• Updated@govuk-react/constants@^0.10.0

• Updated@govuk-react/icons@^0.10.0

• Updated@govuk-react/lib@^0.10.0

• Updated@govuk-react/search-box@^0.10.0