From df0950b87c5e70ef0baae0a559e1fcc49d01140e Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Fri, 14 Dec 2018 12:15:22 +0000 Subject: [PATCH 01/10] Update package descriptions of utilities, ensuring realistic usage is included --- packages/utilities/gel-constants/README.md | 15 +++++++++++++-- .../utilities/gel-constants/package-lock.json | 2 +- packages/utilities/gel-constants/package.json | 2 +- .../gel-foundations-styled-components/README.md | 11 ++++++++++- .../package-lock.json | 2 +- .../package.json | 2 +- packages/utilities/psammead-assets/README.md | 2 +- .../utilities/psammead-assets/package-lock.json | 2 +- packages/utilities/psammead-assets/package.json | 2 +- packages/utilities/psammead-styles/README.md | 12 +++++++++++- .../utilities/psammead-styles/package-lock.json | 2 +- packages/utilities/psammead-styles/package.json | 2 +- .../utilities/psammead-test-helpers/README.md | 2 +- .../psammead-test-helpers/package-lock.json | 2 +- .../utilities/psammead-test-helpers/package.json | 2 +- 15 files changed, 46 insertions(+), 16 deletions(-) diff --git a/packages/utilities/gel-constants/README.md b/packages/utilities/gel-constants/README.md index f9f98b1dea..a0e0c75db6 100644 --- a/packages/utilities/gel-constants/README.md +++ b/packages/utilities/gel-constants/README.md @@ -1,6 +1,6 @@ # gel-constants · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-constants.svg)](https://www.npmjs.com/package/@bbc/gel-constants) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection of variable constants which can be imported into your application. +This package provides a range of String constants for use in CSS, intended to help implement [BBC GEL-compliant]() webpages and components. ## Installation @@ -13,7 +13,18 @@ npm install @bbc/gel-constants --save ```jsx import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-constants/breakpoints'; -import { GEL_GUTTER_BELOW_600PX } from '@bbc/gel-constants/spacings'; +import { GEL_GUTTER_ABOVE_600PX } from '@bbc/gel-constants/spacings'; +``` + +These values can then be used directly within CSS declarations in code: +```jsx +import { css } from 'styled-components'; + +const SomeStyledComponent = css` + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + grid-gap: ${GEL_GUTTER_ABOVE_600PX }; + } +`; ``` ## Exports diff --git a/packages/utilities/gel-constants/package-lock.json b/packages/utilities/gel-constants/package-lock.json index 613d7cc58f..b676af5189 100644 --- a/packages/utilities/gel-constants/package-lock.json +++ b/packages/utilities/gel-constants/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/gel-constants", - "version": "0.1.2", + "version": "0.1.3", "lockfileVersion": 1 } diff --git a/packages/utilities/gel-constants/package.json b/packages/utilities/gel-constants/package.json index 3b8b42a3c0..13667a4d09 100644 --- a/packages/utilities/gel-constants/package.json +++ b/packages/utilities/gel-constants/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-constants", - "version": "0.1.2", + "version": "0.1.3", "description": "A collection of gel constants", "repository": { "type": "git", diff --git a/packages/utilities/gel-foundations-styled-components/README.md b/packages/utilities/gel-foundations-styled-components/README.md index f5926ffe51..a4d9cac2d2 100644 --- a/packages/utilities/gel-foundations-styled-components/README.md +++ b/packages/utilities/gel-foundations-styled-components/README.md @@ -1,6 +1,6 @@ # gel-foundations-styled-components · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-foundations-styled-components.svg)](https://www.npmjs.com/package/@bbc/gel-foundations-styled-components) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection of styled component implementations based on BBC GEL guidelines which can be imported into your application. +This package provides a collection of styled component implementations based on BBC GEL guidelines which can be imported into your application. [More details on the type sizes defined in this package are available here.](./typography_sizes_web.md) @@ -16,6 +16,15 @@ npm install @bbc/gel-foundations-styled-components --save import { GEL_BREVIER } from '@bbc/gel-foundations-styled-components/typography'; ``` +These values can then be used directly within CSS declarations in code: +```jsx +import { css } from 'styled-components'; + +const SomeStyledComponent = css` + ${GEL_BREVIER}; +`; +``` + To allow the typography to be fully accessible and responsive, please note that you should apply a default font-size to the document root (e.g. `html { font-size: 100% }`). Our typography uses `em` for font-size and `rem` for line-height. `em` allows modularity of components: you can change the component font-size by changing the font-size of its container. `rem` is relative to the document root, so we use that for line-height and spacing for a consistent look-and-feel across the document. You can read our [detailed analysis of "REMs vs EMs for spacing"](https://github.com/BBC-News/simorgh/blob/latest/docs/Spacing-Units.md) for more information. diff --git a/packages/utilities/gel-foundations-styled-components/package-lock.json b/packages/utilities/gel-foundations-styled-components/package-lock.json index dba58bf4a3..a4e41a0415 100644 --- a/packages/utilities/gel-foundations-styled-components/package-lock.json +++ b/packages/utilities/gel-foundations-styled-components/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations-styled-components", - "version": "0.2.0", + "version": "0.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/gel-foundations-styled-components/package.json b/packages/utilities/gel-foundations-styled-components/package.json index d93b8d26cf..c05bbf9c7e 100644 --- a/packages/utilities/gel-foundations-styled-components/package.json +++ b/packages/utilities/gel-foundations-styled-components/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations-styled-components", - "version": "0.2.0", + "version": "0.2.1", "description": "A collection of styled component implementations based on BBC GEL guidelines.", "repository": { "type": "git", diff --git a/packages/utilities/psammead-assets/README.md b/packages/utilities/psammead-assets/README.md index 1ed3b30a9e..a81b0c7c85 100644 --- a/packages/utilities/psammead-assets/README.md +++ b/packages/utilities/psammead-assets/README.md @@ -1,6 +1,6 @@ # psammead-assets · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-assets.svg)](https://www.npmjs.com/package/@bbc/psammead-assets) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection of variable constants which can be imported into your application. +This package provides a collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts. ## Installation diff --git a/packages/utilities/psammead-assets/package-lock.json b/packages/utilities/psammead-assets/package-lock.json index 1abb752905..0eece2fc24 100644 --- a/packages/utilities/psammead-assets/package-lock.json +++ b/packages/utilities/psammead-assets/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/psammead-assets", - "version": "0.1.2", + "version": "0.1.3", "lockfileVersion": 1 } diff --git a/packages/utilities/psammead-assets/package.json b/packages/utilities/psammead-assets/package.json index 403becde27..9ebc99fb66 100644 --- a/packages/utilities/psammead-assets/package.json +++ b/packages/utilities/psammead-assets/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-assets", - "version": "0.1.2", + "version": "0.1.3", "description": "A collection of BBC assets including svgs", "repository": { "type": "git", diff --git a/packages/utilities/psammead-styles/README.md b/packages/utilities/psammead-styles/README.md index 71698b8ad0..ee185b3346 100644 --- a/packages/utilities/psammead-styles/README.md +++ b/packages/utilities/psammead-styles/README.md @@ -1,6 +1,6 @@ # psammead-styles · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-styles.svg)](https://www.npmjs.com/package/@bbc/psammead-styles) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection of variable constants which can be imported into your application. +This package provides a collection of String constants for use in CSS, containing non-GEL styling details that are bespoke to specific services. ## Installation @@ -16,6 +16,16 @@ import { C_POSTBOX } from '@bbc/psammead-styles/colours'; import { FF_NEWS_SANS_REG } from '@bbc/psammead-styles/fonts'; ``` +These values can then be used directly within CSS declarations in code: +```jsx +import { css } from 'styled-components'; + +const SomeStyledComponent = css` + background-color: ${C_POSTBOX}; + font-family: ${FF_NEWS_SANS_REG}; +`; +``` + ## Contributing Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md). diff --git a/packages/utilities/psammead-styles/package-lock.json b/packages/utilities/psammead-styles/package-lock.json index d9e51371ec..d83d9c6953 100644 --- a/packages/utilities/psammead-styles/package-lock.json +++ b/packages/utilities/psammead-styles/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/psammead-styles", - "version": "0.1.4", + "version": "0.1.5", "lockfileVersion": 1 } diff --git a/packages/utilities/psammead-styles/package.json b/packages/utilities/psammead-styles/package.json index 92b6ad173b..37dd6d0e0a 100644 --- a/packages/utilities/psammead-styles/package.json +++ b/packages/utilities/psammead-styles/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-styles", - "version": "0.1.4", + "version": "0.1.5", "description": "A collection of BBC colours and fonts.", "repository": { "type": "git", diff --git a/packages/utilities/psammead-test-helpers/README.md b/packages/utilities/psammead-test-helpers/README.md index 3db836b442..f58e72bc31 100644 --- a/packages/utilities/psammead-test-helpers/README.md +++ b/packages/utilities/psammead-test-helpers/README.md @@ -1,6 +1,6 @@ # psammead-test-helpers · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-test-helpers.svg)](https://www.npmjs.com/package/@bbc/psammead-test-helpers) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package is a collection helper methods used for snapshot testing, with support for styled components. +This package provides a collection of helper methods for implementing Jest snapshot tests for styled-components, required by many Psammead components. ## Installation diff --git a/packages/utilities/psammead-test-helpers/package-lock.json b/packages/utilities/psammead-test-helpers/package-lock.json index fc04652d93..e3191c593f 100644 --- a/packages/utilities/psammead-test-helpers/package-lock.json +++ b/packages/utilities/psammead-test-helpers/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-test-helpers", - "version": "0.1.1", + "version": "0.1.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/utilities/psammead-test-helpers/package.json b/packages/utilities/psammead-test-helpers/package.json index 203946d210..70b4819425 100644 --- a/packages/utilities/psammead-test-helpers/package.json +++ b/packages/utilities/psammead-test-helpers/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-test-helpers", - "version": "0.1.1", + "version": "0.1.2", "main": "dist/index.js", "description": "A collection of helper methods for react snapshot testing with support for styled components", "repository": { From 7d4ce679cedb24e93c9744aa2c6dd146826c171e Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 08:08:45 +0000 Subject: [PATCH 02/10] Fix broken link in gel-constants README --- packages/utilities/gel-constants/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-constants/README.md b/packages/utilities/gel-constants/README.md index a0e0c75db6..4bece69ef0 100644 --- a/packages/utilities/gel-constants/README.md +++ b/packages/utilities/gel-constants/README.md @@ -1,6 +1,6 @@ # gel-constants · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-constants.svg)](https://www.npmjs.com/package/@bbc/gel-constants) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package provides a range of String constants for use in CSS, intended to help implement [BBC GEL-compliant]() webpages and components. +This package provides a range of String constants for use in CSS, intended to help implement [BBC GEL-compliant](https://www.bbc.co.uk/gel/articles/what-is-gel) webpages and components. ## Installation From 3d772e2b26f424cd03a9e921654324e3aa3d1113 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 10:30:45 +0000 Subject: [PATCH 03/10] Update changelogs, fix gel-foundations package version --- packages/utilities/gel-foundations/CHANGELOG.md | 1 + packages/utilities/gel-foundations/package.json | 2 +- packages/utilities/psammead-assets/CHANGELOG.md | 1 + packages/utilities/psammead-styles/CHANGELOG.md | 1 + packages/utilities/psammead-test-helpers/CHANGELOG.md | 1 + 5 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/CHANGELOG.md b/packages/utilities/gel-foundations/CHANGELOG.md index 08ee1178b7..96fe832305 100644 --- a/packages/utilities/gel-foundations/CHANGELOG.md +++ b/packages/utilities/gel-foundations/CHANGELOG.md @@ -2,5 +2,6 @@ | Version | Description | |---------|-------------| +| 0.1.1 | [PR#212](https://github.com/BBC-News/psammead/pull/212) Update package description and README. | | 0.1.0 | [PR#221](https://github.com/BBC-News/psammead/pull/221) Create initial package, pulled in from gel-constants and gel-foundations-styled-components packages. | diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index 2adc6b86b5..8cd5640556 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations", - "version": "0.1.3", + "version": "0.1.1", "description": "A collection of gel constants", "repository": { "type": "git", diff --git a/packages/utilities/psammead-assets/CHANGELOG.md b/packages/utilities/psammead-assets/CHANGELOG.md index cc31487297..efd881515d 100644 --- a/packages/utilities/psammead-assets/CHANGELOG.md +++ b/packages/utilities/psammead-assets/CHANGELOG.md @@ -2,6 +2,7 @@ | Version | Description | |---------|-------------| +| 0.1.3 | [PR#212](https://github.com/BBC-News/psammead/pull/212) Update package description and README. | | 0.1.2 | [PR#173](https://github.com/BBC-News/psammead/pull/173) Update PRs welcome link | | 0.1.1 | [PR#74](https://github.com/BBC-News/psammead/pull/74) Move file contents into a src directory and babel transpile prepublish. | | 0.1.0 | [PR#49](https://github.com/BBC-News/psammead/pull/49) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md). | diff --git a/packages/utilities/psammead-styles/CHANGELOG.md b/packages/utilities/psammead-styles/CHANGELOG.md index 253795cee2..8d50ba0dfd 100644 --- a/packages/utilities/psammead-styles/CHANGELOG.md +++ b/packages/utilities/psammead-styles/CHANGELOG.md @@ -2,6 +2,7 @@ | Version | Description | |---------|-------------| +| 0.1.5 | [PR#212](https://github.com/BBC-News/psammead/pull/212) Update package description and README. | | 0.1.4 | [PR#173](https://github.com/BBC-News/psammead/pull/173) Update PRs welcome link | | 0.1.3 | [PR#74](https://github.com/BBC-News/psammead/pull/74) Move file contents into a src directory and babel transpile prepublish. | | 0.1.2 | [PR#72](https://github.com/BBC-News/psammead/pull/72) Update Readme's usage examples | diff --git a/packages/utilities/psammead-test-helpers/CHANGELOG.md b/packages/utilities/psammead-test-helpers/CHANGELOG.md index 07d53051b3..bd2c53bf75 100644 --- a/packages/utilities/psammead-test-helpers/CHANGELOG.md +++ b/packages/utilities/psammead-test-helpers/CHANGELOG.md @@ -2,5 +2,6 @@ | Version | Description | |---------|-------------| +| 0.1.2 | [PR#212](https://github.com/BBC-News/psammead/pull/212) Update package description and README. | | 0.1.1 | [PR#173](https://github.com/BBC-News/psammead/pull/173) Update PRs welcome link | | 0.1.0 | [PR#80](https://github.com/BBC-News/psammead/pull/80) Create initial package, pulled in from [simorgh](https://github.com/BBC-News/simorgh). | From c51d3f96594f791afd29563e66612f55fbca22de Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 10:47:18 +0000 Subject: [PATCH 04/10] Update NPM package descriptions --- packages/utilities/gel-foundations/package.json | 2 +- packages/utilities/psammead-assets/package.json | 2 +- packages/utilities/psammead-styles/package.json | 2 +- packages/utilities/psammead-test-helpers/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index 8cd5640556..160bacb4da 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,7 +1,7 @@ { "name": "@bbc/gel-foundations", "version": "0.1.1", - "description": "A collection of gel constants", + "description": "A range of String constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.", "repository": { "type": "git", "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/gel-foundations" diff --git a/packages/utilities/psammead-assets/package.json b/packages/utilities/psammead-assets/package.json index 9ebc99fb66..9e9b43bddb 100644 --- a/packages/utilities/psammead-assets/package.json +++ b/packages/utilities/psammead-assets/package.json @@ -1,7 +1,7 @@ { "name": "@bbc/psammead-assets", "version": "0.1.3", - "description": "A collection of BBC assets including svgs", + "description": "A collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.", "repository": { "type": "git", "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/psammead-assets" diff --git a/packages/utilities/psammead-styles/package.json b/packages/utilities/psammead-styles/package.json index 37dd6d0e0a..578c4cc544 100644 --- a/packages/utilities/psammead-styles/package.json +++ b/packages/utilities/psammead-styles/package.json @@ -1,7 +1,7 @@ { "name": "@bbc/psammead-styles", "version": "0.1.5", - "description": "A collection of BBC colours and fonts.", + "description": "A collection of String constants for use in CSS, containing non-GEL styling details that are bespoke to specific services.", "repository": { "type": "git", "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/psammead-styles" diff --git a/packages/utilities/psammead-test-helpers/package.json b/packages/utilities/psammead-test-helpers/package.json index 70b4819425..50c8fa7e43 100644 --- a/packages/utilities/psammead-test-helpers/package.json +++ b/packages/utilities/psammead-test-helpers/package.json @@ -2,7 +2,7 @@ "name": "@bbc/psammead-test-helpers", "version": "0.1.2", "main": "dist/index.js", - "description": "A collection of helper methods for react snapshot testing with support for styled components", + "description": "A collection of helper methods for implementing Jest snapshot tests for styled-components, required by many Psammead components.", "repository": { "type": "git", "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/psammead-test-helpers" From 09345853fb76a483439691c35256c1dc2fbb1946 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 10:54:23 +0000 Subject: [PATCH 05/10] Fix package version for gel-foundations --- packages/utilities/gel-foundations/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index 160bacb4da..458849d4f4 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/gel-foundations", - "version": "0.1.1", + "version": "0.1.3", "description": "A range of String constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.", "repository": { "type": "git", From 73ae5b56b45adcb7e4f0205185c50d8099d13619 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 10:55:55 +0000 Subject: [PATCH 06/10] Update package-locks --- packages/utilities/gel-foundations/package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/package-lock.json b/packages/utilities/gel-foundations/package-lock.json index 9a3146460d..77416583ed 100644 --- a/packages/utilities/gel-foundations/package-lock.json +++ b/packages/utilities/gel-foundations/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/gel-foundations", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 1 } From c480e2a50519ad5125b50d773d9e9e5a0037417b Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 10:58:59 +0000 Subject: [PATCH 07/10] Update package-locks --- packages/utilities/gel-foundations/package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/package-lock.json b/packages/utilities/gel-foundations/package-lock.json index 77416583ed..c64d1b78e5 100644 --- a/packages/utilities/gel-foundations/package-lock.json +++ b/packages/utilities/gel-foundations/package-lock.json @@ -1,5 +1,5 @@ { "name": "@bbc/gel-foundations", - "version": "0.1.1", + "version": "0.1.3", "lockfileVersion": 1 } From f0c754f020e3239fcacc1d089b8911b84fd70647 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 11:10:44 +0000 Subject: [PATCH 08/10] Update util READMEs to make exports more obvious --- packages/utilities/gel-foundations/README.md | 12 ++++++------ packages/utilities/psammead-assets/README.md | 5 +++++ packages/utilities/psammead-styles/README.md | 5 +++++ .../utilities/psammead-test-helpers/README.md | 18 +++++++++--------- 4 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index 557de8dbd6..b1178d9318 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -2,18 +2,18 @@ This package provides a range of String constants for use in CSS, intended to help implement [BBC GEL-compliant](https://www.bbc.co.uk/gel/articles/what-is-gel) webpages and components. -## Installation - -```jsx -npm install @bbc/gel-foundations --save -``` - ## Exports `/breakpoints` - GEL breakpoints, as well as typography breakpoints. These use the GEL grid sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#grid-sizes). `/spacings` - GEL spacings and GEL Grid margins and gutters. These use the GEL grid spacing sizes which can be found in the [GEL Grid guidelines](https://www.bbc.co.uk/gel/guidelines/grid#spacing-layout). `/typography` - GEL typography. These are based on the gel typography standard which can be found in the [GEL guidelines](https://www.bbc.co.uk/gel/guidelines/typography). [More details on how these sizes were implemented for this package are available here.](./typography_sizes_web.md) +## Installation + +```jsx +npm install @bbc/gel-foundations --save +``` + ## Usage ```jsx diff --git a/packages/utilities/psammead-assets/README.md b/packages/utilities/psammead-assets/README.md index a81b0c7c85..b2db042cbb 100644 --- a/packages/utilities/psammead-assets/README.md +++ b/packages/utilities/psammead-assets/README.md @@ -2,6 +2,11 @@ This package provides a collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts. +## Exports + +`/amp-boilerplate` - A helper, allowing projects using Psammead to easily pull in a versioned copy of [AMP's required boilerplate scripts](https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md). +`/svgs` - SVG icons commonly required by projects using Psammead. + ## Installation ```jsx diff --git a/packages/utilities/psammead-styles/README.md b/packages/utilities/psammead-styles/README.md index ee185b3346..2c2f1d05d4 100644 --- a/packages/utilities/psammead-styles/README.md +++ b/packages/utilities/psammead-styles/README.md @@ -2,6 +2,11 @@ This package provides a collection of String constants for use in CSS, containing non-GEL styling details that are bespoke to specific services. +## Exports + +`/colours` - Project-defined colours that will be required by multiple Psammead components or themes. These colours are not defined by GEL. +`/fonts` - Project-defined font families. These fallbacks are not defined by GEL. + ## Installation ```jsx diff --git a/packages/utilities/psammead-test-helpers/README.md b/packages/utilities/psammead-test-helpers/README.md index f58e72bc31..f41ba58a09 100644 --- a/packages/utilities/psammead-test-helpers/README.md +++ b/packages/utilities/psammead-test-helpers/README.md @@ -2,6 +2,15 @@ This package provides a collection of helper methods for implementing Jest snapshot tests for styled-components, required by many Psammead components. +## Exported Functions + +| Name | Arguments | Description | +|:---------------------------|:-----------------|:-------------| +| shouldMatchSnapshot | title, component | Renders the component using react-test-renderer, converts it to JSON and asserts that it matches the given snapshot, which will be saved in the `__snapshots__` directory. The first argument `title` is the title for the test. | +| shallowRender | component | Shallow renders the component using react-test-renderer and returns the render output | +| shouldShallowMatchSnapshot | title, component | Shallow renders the component using react-test-renderer and asserts that it matches the given snapshot, which will be saved in the `__snapshots__` directory. The first argument `title` is the title for the test. | +| isNull | title, component | Renders the component using react-test-renderer, converts it to JSON and asserts that it is null. The first argument `title` is the title for the test. | + ## Installation ```jsx @@ -19,15 +28,6 @@ shouldMatchSnapshot( ); ``` -## Functions - -| Name | Arguments | Description | -|:---------------------------|:-----------------|:-------------| -| shouldMatchSnapshot | title, component | Renders the component using react-test-renderer, converts it to JSON and asserts that it matches the given snapshot, which will be saved in the `__snapshots__` directory. The first argument `title` is the title for the test. | -| shallowRender | component | Shallow renders the component using react-test-renderer and returns the render output | -| shouldShallowMatchSnapshot | title, component | Shallow renders the component using react-test-renderer and asserts that it matches the given snapshot, which will be saved in the `__snapshots__` directory. The first argument `title` is the title for the test. | -| isNull | title, component | Renders the component using react-test-renderer, converts it to JSON and asserts that it is null. The first argument `title` is the title for the test. | - ## Roadmap There is currently a plan to migrate from `react-test-renderer` to `enzyme` as it provides a nicer higher-level API over the same functionality, as well as having support for more granular unit tests. From c01dcd1aab2b322059e8dcb5becb90c204e1b753 Mon Sep 17 00:00:00 2001 From: Ben Newcombe Date: Tue, 18 Dec 2018 12:04:03 +0000 Subject: [PATCH 09/10] Apply suggestions from code review Co-Authored-By: bcmn --- packages/utilities/gel-foundations/README.md | 2 +- packages/utilities/gel-foundations/package.json | 2 +- packages/utilities/psammead-styles/README.md | 2 +- packages/utilities/psammead-styles/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index b1178d9318..09829dacd8 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -19,7 +19,7 @@ npm install @bbc/gel-foundations --save ```jsx import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints'; -import { GEL_GUTTER_ABOVE_600PX } from '@bbc/gel-constants/spacings'; +import { GEL_GUTTER_ABOVE_600PX } from '@bbc/gel-foundations/spacings'; import { GEL_BREVIER } from '@bbc/gel-foundations-styled-components/typography'; ``` diff --git a/packages/utilities/gel-foundations/package.json b/packages/utilities/gel-foundations/package.json index 458849d4f4..dbc0ce775d 100644 --- a/packages/utilities/gel-foundations/package.json +++ b/packages/utilities/gel-foundations/package.json @@ -1,7 +1,7 @@ { "name": "@bbc/gel-foundations", "version": "0.1.3", - "description": "A range of String constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.", + "description": "A range of string constants for use in CSS, intended to help implement BBC GEL-compliant webpages and components.", "repository": { "type": "git", "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/gel-foundations" diff --git a/packages/utilities/psammead-styles/README.md b/packages/utilities/psammead-styles/README.md index 2c2f1d05d4..3174e113fe 100644 --- a/packages/utilities/psammead-styles/README.md +++ b/packages/utilities/psammead-styles/README.md @@ -1,6 +1,6 @@ # psammead-styles · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-styles.svg)](https://www.npmjs.com/package/@bbc/psammead-styles) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package provides a collection of String constants for use in CSS, containing non-GEL styling details that are bespoke to specific services. +This package provides a collection of string constants for use in CSS, containing non-GEL styling details that are bespoke to specific BBC services and products ## Exports diff --git a/packages/utilities/psammead-styles/package.json b/packages/utilities/psammead-styles/package.json index 578c4cc544..002e2096f9 100644 --- a/packages/utilities/psammead-styles/package.json +++ b/packages/utilities/psammead-styles/package.json @@ -1,7 +1,7 @@ { "name": "@bbc/psammead-styles", "version": "0.1.5", - "description": "A collection of String constants for use in CSS, containing non-GEL styling details that are bespoke to specific services.", + "description": "A collection of string constants for use in CSS, containing non-GEL styling details that are bespoke to specific BBC services and products.", "repository": { "type": "git", "url": "https://github.com/BBC-News/psammead/tree/latest/packages/utilities/psammead-styles" From 01e22600d6881bf117af2bdc0838b4503a3b9471 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Tue, 18 Dec 2018 12:04:44 +0000 Subject: [PATCH 10/10] Update packages/utilities/gel-foundations/README.md Co-Authored-By: bcmn --- packages/utilities/gel-foundations/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/utilities/gel-foundations/README.md b/packages/utilities/gel-foundations/README.md index 09829dacd8..52cb03dd5a 100644 --- a/packages/utilities/gel-foundations/README.md +++ b/packages/utilities/gel-foundations/README.md @@ -1,6 +1,6 @@ # gel-foundations · [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/BBC-News/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/gel-foundations.svg)](https://www.npmjs.com/package/@bbc/gel-foundations) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/BBC-News/psammead/blob/latest/CONTRIBUTING.md) -This package provides a range of String constants for use in CSS, intended to help implement [BBC GEL-compliant](https://www.bbc.co.uk/gel/articles/what-is-gel) webpages and components. +This package provides a range of string constants for use in CSS, intended to help implement [BBC GEL-compliant](https://www.bbc.co.uk/gel/articles/what-is-gel) webpages and components. ## Exports