Merge branch 'latest' of github.com:bbc/psammead into script-link-sto…

…rybook
BBC-archive · Jan 23, 2020 · 10bedf3 · 10bedf3
2 parents f98fafc + 0814ce0
commit 10bedf3
Show file tree

Hide file tree

Showing 47 changed files with 91 additions and 54 deletions.
diff --git a/packages/components/psammead-headings/CHANGELOG.md b/packages/components/psammead-headings/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.1.25 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_QUIN` constant in the `Headline` |
 | 3.1.24 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 3.1.23 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 3.1.22 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations |

diff --git a/packages/components/psammead-headings/package-lock.json b/packages/components/psammead-headings/package-lock.json
diff --git a/packages/components/psammead-headings/package.json b/packages/components/psammead-headings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-headings",
-  "version": "3.1.24",
+  "version": "3.1.25",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-headings/src/index.jsx b/packages/components/psammead-headings/src/index.jsx
@@ -4,6 +4,7 @@ import { C_SHADOW } from '@bbc/psammead-styles/colours';
 import {
   GEL_SPACING_TRPL,
   GEL_SPACING_QUAD,
+  GEL_SPACING_QUIN,
 } from '@bbc/gel-foundations/spacings';
 import { getCanon, getTrafalgar } from '@bbc/gel-foundations/typography';
 import { MEDIA_QUERY_TYPOGRAPHY } from '@bbc/gel-foundations/breakpoints';
@@ -18,7 +19,7 @@ export const Headline = styled.h1`
   margin: 0; /* Reset */
   padding: ${GEL_SPACING_QUAD} 0;
   ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
-    padding: 2.5rem 0;
+    padding: ${GEL_SPACING_QUIN} 0;
   }
 `;
 

diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.6.25 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_QUAD` in `MediaIndicatorWrapper` |
 | 2.6.24 | [PR#2989](https://github.com/bbc/psammead/pull/2989) Talos - Bump Dependencies - @bbc/psammead-assets |
 | 2.6.23 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 2.6.22 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json
diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-media-indicator",
-  "version": "2.6.24",
+  "version": "2.6.25",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx
@@ -2,7 +2,11 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { string, oneOf, bool } from 'prop-types';
 import { C_WHITE, C_EBON } from '@bbc/psammead-styles/colours';
-import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings';
+import {
+  GEL_SPACING_HLF,
+  GEL_SPACING,
+  GEL_SPACING_QUAD,
+} from '@bbc/gel-foundations/spacings';
 import { GEL_GROUP_1_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints';
 import { GEL_MINION } from '@bbc/gel-foundations/typography';
 import { getSansRegular } from '@bbc/psammead-styles/font-styles';
@@ -15,7 +19,7 @@ const MediaIndicatorWrapper = styled.div`
   ${({ service }) => getSansRegular(service)}
   ${GEL_MINION};
   color: ${C_EBON};
-  height: 2rem;
+  height: ${GEL_SPACING_QUAD};
 
   ${({ topStory }) =>
     !topStory &&

diff --git a/packages/components/psammead-most-read/CHANGELOG.md b/packages/components/psammead-most-read/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 0.5.2-alpha.5 | [PR#2982](https://github.com/bbc/psammead/pull/2982) Update readme |
 | 0.5.2-alpha.4 | [PR#2982](https://github.com/bbc/psammead/pull/2982) Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-section-label |
 | 0.5.2-alpha.3 | [PR#2983](https://github.com/bbc/psammead/pull/2983) Conditionally render timestamp wrapper |
 | 0.5.2-alpha.2 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations, @bbc/psammead-grid |

diff --git a/packages/components/psammead-most-read/README.md b/packages/components/psammead-most-read/README.md
@@ -218,7 +218,7 @@ import { MostReadRank } from '@bbc/psammead-most-read';
 />;
 ```
 
-## MostReadTitle
+## MostReadSection
 
 ### Props
 
@@ -228,17 +228,26 @@ import { MostReadRank } from '@bbc/psammead-most-read';
 | script | object | yes | N/A | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
 | service | string | yes | N/A | `'news'` |
 | header | string | yes | N/A | `'Most Read'`  |
-| labelId | string | no | `'most-read-title'` | `'most-read-title'`  |
+| labelId | string | no | `'most-read'` | `'most-read'`  |
+| children | node | yes | N/A | `<MostReadList numberOfItems={10} dir='ltr'><MostReadItemWrapper dir='ltr'><MostReadRank service='news' script={script} listIndex={1} numberOfItems={10} dir='ltr'/><MostReadLink dir='ltr' service='news' script={script} title='article headline' href='/bbc.co.uk/articles/000027051997'>{timestamp}</MostReadLink></MostReadItemWrapper></MostReadList>`  |
+| dir | string | no | `"ltr"` | `"ltr"` |
 
 ### Usage
 
 ```jsx
 import React from 'react';
 import { latin } from '@bbc/gel-foundations/scripts';
-import { MostReadTitle } from '@bbc/psammead-most-read/Title';
-
-<MostReadTitle header="Most Read" script={latin} service="news" </MostReadTitle>;
+import { MostReadSection } from '@bbc/psammead-most-read';
 
+<MostReadSection
+  labelId={labelId}
+  script={script}
+  service={service}
+  header={header}
+  dir={dir}
+>
+  <p>Most Read content</p>
+</MostReadSection>;
 ```
 
 ### When to use this component

diff --git a/packages/components/psammead-most-read/package-lock.json b/packages/components/psammead-most-read/package-lock.json
diff --git a/packages/components/psammead-most-read/package.json b/packages/components/psammead-most-read/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-most-read",
-  "version": "0.5.2-alpha.4",
+  "version": "0.5.2-alpha.5",
   "publishConfig": {
     "tag": "alpha"
   },

diff --git a/packages/components/psammead-navigation/CHANGELOG.md b/packages/components/psammead-navigation/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 6.0.0-alpha.26 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_HLF` and `GEL_SPACING_SEXT` constants |
 | 6.0.0-alpha.25 | [PR#2989](https://github.com/bbc/psammead/pull/2989) Talos - Bump Dependencies - @bbc/psammead-assets |
 | 6.0.0-alpha.24 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 6.0.0-alpha.23 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |

diff --git a/packages/components/psammead-navigation/package-lock.json b/packages/components/psammead-navigation/package-lock.json
diff --git a/packages/components/psammead-navigation/package.json b/packages/components/psammead-navigation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "6.0.0-alpha.25",
+  "version": "6.0.0-alpha.26",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx b/packages/components/psammead-navigation/src/ScrollableNavigation/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { node, oneOf } from 'prop-types';
+import { GEL_SPACING_SEXT } from '@bbc/gel-foundations/spacings';
 import { GEL_GROUP_2_SCREEN_WIDTH_MAX } from '@bbc/gel-foundations/breakpoints';
 
 /* Convert C_POSTBOX to rgba as IE doesn't like 8 digit hex */
@@ -24,7 +25,7 @@ const StyledScrollableNav = styled.div`
     &:after {
       content: ' ';
       height: 100%;
-      width: 3rem;
+      width: ${GEL_SPACING_SEXT};
       position: absolute;
       ${({ dir }) => css`
         ${dir === 'ltr' ? 'right' : 'left'}: 0;

diff --git a/packages/components/psammead-navigation/src/index.jsx b/packages/components/psammead-navigation/src/index.jsx
@@ -8,7 +8,11 @@ import {
   C_EBON,
   C_GHOST,
 } from '@bbc/psammead-styles/colours';
-import { GEL_SPACING_HLF, GEL_SPACING } from '@bbc/gel-foundations/spacings';
+import {
+  GEL_SPACING_HLF,
+  GEL_SPACING,
+  GEL_SPACING_SEXT,
+} from '@bbc/gel-foundations/spacings';
 import {
   GEL_GROUP_2_SCREEN_WIDTH_MAX,
   GEL_GROUP_3_SCREEN_WIDTH_MIN,
@@ -21,7 +25,6 @@ import { NAV_BAR_TOP_BOTTOM_SPACING } from './DropdownNavigation';
 
 const SPACING_AROUND_NAV_ITEMS = `${NAV_BAR_TOP_BOTTOM_SPACING}rem`; // 12px
 const CURRENT_ITEM_HOVER_BORDER = '0.3125rem'; // 5px
-const GRADIENT_WIDTH = '3rem'; // 48px
 
 /* White with 30% transparency over #B80000 */
 const BORDER_COLOR = '#eab3b3';
@@ -77,7 +80,7 @@ const StyledLink = styled.a`
   &:focus::after {
     ${ListItemBorder}
     top: 0;
-    border: 0.25rem solid ${C_WHITE};
+    border: ${GEL_SPACING_HLF} solid ${C_WHITE};
   }
 `;
 
@@ -89,7 +92,7 @@ const StyledListItem = styled.li`
   @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
     &:last-child {
       ${({ dir }) => css`
-        margin-${dir === 'ltr' ? 'right' : 'left'}: ${GRADIENT_WIDTH}; 
+        margin-${dir === 'ltr' ? 'right' : 'left'}: ${GEL_SPACING_SEXT}; 
       `}
     }
   }

diff --git a/packages/components/psammead-script-link/CHANGELOG.md b/packages/components/psammead-script-link/CHANGELOG.md
@@ -3,7 +3,8 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
-| 1.0.6 | [PR#2995](https://github.com/bbc/psammead/pull/2995) Add `VisuallyHiddenText` to Script Link story |
+| 1.0.7 | [PR#2995](https://github.com/bbc/psammead/pull/2995) Add `VisuallyHiddenText` to Script Link story |
+| 1.0.6 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING`, `GEL_SPACING_DBL` and `GEL_SPACING_QUIN` constants |
 | 1.0.5 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 1.0.4 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.3 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations |

diff --git a/packages/components/psammead-script-link/package-lock.json b/packages/components/psammead-script-link/package-lock.json
diff --git a/packages/components/psammead-script-link/package.json b/packages/components/psammead-script-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-script-link",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

diff --git a/packages/components/psammead-script-link/src/index.jsx b/packages/components/psammead-script-link/src/index.jsx
@@ -1,5 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
+import {
+  GEL_SPACING,
+  GEL_SPACING_DBL,
+  GEL_SPACING_QUIN,
+} from '@bbc/gel-foundations/spacings';
 import {
   GEL_GROUP_2_SCREEN_WIDTH_MIN,
   GEL_GROUP_2_SCREEN_WIDTH_MAX,
@@ -18,13 +23,13 @@ const StyledLink = styled.a`
   text-decoration: none;
   height: 2.25rem;
   border: 0.0625rem solid ${C_WHITE};
-  margin: 0.5rem 0 0.5rem 0.5rem;
+  margin: ${GEL_SPACING} 0 ${GEL_SPACING} ${GEL_SPACING};
 
   > span {
     margin: 0.1875rem;
     display: inline-block;
     height: calc(100%);
-    padding: 0 1rem;
+    padding: 0 ${GEL_SPACING_DBL};
   }
 
   &:hover > span,
@@ -34,15 +39,15 @@ const StyledLink = styled.a`
   }
 
   @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
-    line-height: calc(2.25rem - 0.5rem);
+    line-height: calc(2.25rem - ${GEL_SPACING});
   }
 
   @media (max-width: ${GEL_GROUP_2_SCREEN_WIDTH_MAX}) {
-    height: 2.5rem;
+    height: ${GEL_SPACING_QUIN};
 
     > span {
       padding: 0 0.75rem;
-      line-height: calc(2.5rem - 0.5rem);
+      line-height: calc(${GEL_SPACING_QUIN} - ${GEL_SPACING});
     }
   }
 `;

diff --git a/packages/components/psammead-script-link/src/index.stories.jsx b/packages/components/psammead-script-link/src/index.stories.jsx
@@ -3,13 +3,14 @@ import { storiesOf } from '@storybook/react';
 import { withKnobs, text } from '@storybook/addon-knobs';
 import styled from 'styled-components';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
+import { GEL_SPACING_DBL } from '@bbc/gel-foundations/spacings';
 import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
 import notes from '../README.md';
 import ScriptLink from './index';
 
 const Container = styled.div`
   background-color: black;
-  padding: 1rem;
+  padding: ${GEL_SPACING_DBL};
   height: 100vh;
 `;
 

diff --git a/packages/components/psammead-section-label/CHANGELOG.md b/packages/components/psammead-section-label/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.12 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_DBL` constant |
 | 3.0.11 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 3.0.10 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 3.0.9 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations |

diff --git a/packages/components/psammead-section-label/package-lock.json b/packages/components/psammead-section-label/package-lock.json
diff --git a/packages/components/psammead-section-label/package.json b/packages/components/psammead-section-label/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-section-label",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "description": "React styled component for a section label",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-section-label/src/titles.jsx b/packages/components/psammead-section-label/src/titles.jsx
@@ -64,7 +64,7 @@ const FlexTextRow = styled(FlexRow).attrs({
 })``;
 
 const titleMargins = `
-  margin: 1rem 0;
+  margin: ${GEL_SPACING_DBL} 0;
 
   ${MEDIA_QUERY_TYPOGRAPHY.LAPTOP_AND_LARGER} {
     margin: 0;

diff --git a/packages/components/psammead-sitewide-links/CHANGELOG.md b/packages/components/psammead-sitewide-links/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 4.0.6 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_DBL` constant |
 | 4.0.5 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 4.0.4 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 4.0.3 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations |

diff --git a/packages/components/psammead-sitewide-links/package-lock.json b/packages/components/psammead-sitewide-links/package-lock.json
diff --git a/packages/components/psammead-sitewide-links/package.json b/packages/components/psammead-sitewide-links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-sitewide-links",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "React styled component for a sitewide-links",
   "main": "dist/index.js",
   "module": "esm/index.js",

diff --git a/packages/components/psammead-sitewide-links/src/List/index.jsx b/packages/components/psammead-sitewide-links/src/List/index.jsx
@@ -95,7 +95,7 @@ const StyledList = styled.ul`
 
 const StyledListItem = styled.li`
   min-width: 50%;
-  column-gap: 1rem;
+  column-gap: ${GEL_SPACING_DBL};
   break-inside: avoid-column;
 `;
 

diff --git a/packages/components/psammead-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 2.1.26 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_DBL` and `GEL_SPACING_TRPL` constants |
 | 2.1.25 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
 | 2.1.24 | [PR#2973](https://github.com/bbc/psammead/pull/2973) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.1.23 | [PR#2920](https://github.com/bbc/psammead/pull/2920) Talos - Bump Dependencies - @bbc/gel-foundations |