Spread extra props in components.

packages/components/psammead-brand/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 5.0.6 | [PR#2377](https://github.com/bbc/psammead/pull/2377) Spread extra props to the component |
 | 5.0.5 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 5.0.4 | [PR#2273](https://github.com/bbc/psammead/pull/2273) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 5.0.3 | [PR#2251](https://github.com/bbc/psammead/pull/2251) Talos - Bump Dependencies - @bbc/psammead-styles |

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "5.0.5",
+  "version": "5.0.6",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

packages/components/psammead-brand/src/index.jsx

@@ -174,6 +174,7 @@ const Brand = props => {
     borderBottom,
     backgroundColour,
     logoColour,
+    ...rest
   } = props;
 
   return (
@@ -183,6 +184,7 @@ const Brand = props => {
       borderBottom={borderBottom}
       backgroundColour={backgroundColour}
       logoColour={logoColour}
+      {...rest}
     >
       {url ? (
         <SvgWrapper>

packages/components/psammead-brand/src/index.test.jsx

@@ -112,5 +112,25 @@ describe('Brand', () => {
 
       expect(container.querySelector('span').getAttribute('role')).toBeNull();
     });
+
+    it('should add extra props passed to the component', () => {
+      const { container } = render(
+        <Brand
+          product="Default Brand Name"
+          svgHeight={24}
+          maxWidth={280}
+          minWidth={180}
+          svg={svg}
+          url="https://www.bbc.co.uk/news"
+          backgroundColour={C_POSTBOX}
+          logoColour={C_WHITE}
+          data-brand="header"
+        />,
+      );
+
+      expect(container.querySelector('div').getAttribute('data-brand')).toEqual(
+        'header',
+      );
+    });
   });
 });

packages/components/psammead-navigation/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.0 | [PR#2377](https://github.com/bbc/psammead/pull/2377) Spread extra props to the component |
 | 2.3.6 | [PR#2343](https://github.com/bbc/psammead/pull/2343) Add `data-navigation` data attribute to navigation links |
 | 2.3.5 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.3.4 | [PR#2273](https://github.com/bbc/psammead/pull/2273) Talos - Bump Dependencies - @bbc/psammead-styles |

packages/components/psammead-navigation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-navigation",
-  "version": "2.3.6",
+  "version": "3.0.0",
   "description": "A navigation bar to use on index pages",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-navigation/src/__snapshots__/index.test.jsx.snap

@@ -251,7 +251,7 @@ exports[`Navigation should render correctly 1`] = `
       >
         <a
           class="c6"
-          data-navigation="Akụkọ_/igbo"
+          data-navigation="test_navigation"
           href="/igbo"
         >
           <span
@@ -274,7 +274,7 @@ exports[`Navigation should render correctly 1`] = `
       >
         <a
           class="c9"
-          data-navigation="Egwuregwu_/igbo/egwuregwu"
+          data-navigation="test_navigation"
           href="/igbo/egwuregwu"
         >
           Egwuregwu
@@ -286,7 +286,7 @@ exports[`Navigation should render correctly 1`] = `
       >
         <a
           class="c9"
-          data-navigation="Ihe nkiri_/igbo/media/video"
+          data-navigation="test_navigation"
           href="/igbo/media/video"
         >
           Ihe nkiri
@@ -298,7 +298,7 @@ exports[`Navigation should render correctly 1`] = `
       >
         <a
           class="c9"
-          data-navigation="Nke ka ewuewu_/igbo/popular/read"
+          data-navigation="test_navigation"
           href="/igbo/popular/read"
         >
           Nke ka ewuewu

packages/components/psammead-navigation/src/index.jsx

@@ -162,6 +162,7 @@ export const NavigationLi = ({
   currentPageText,
   active,
   service,
+  ...props
 }) => (
   <StyledListItem role="listitem">
     {active && currentPageText ? (
@@ -170,19 +171,14 @@ export const NavigationLi = ({
         script={script}
         currentLink="true"
         service={service}
-        data-navigation={`${link}_${url}`}
+        {...props}
       >
         <CurrentLink script={script} currentPageText={currentPageText}>
           {link}
         </CurrentLink>
       </StyledLink>
     ) : (
-      <StyledLink
-        href={url}
-        script={script}
-        service={service}
-        data-navigation={`${link}_${url}`}
-      >
+      <StyledLink href={url} script={script} service={service} {...props}>
         {link}
       </StyledLink>
     )}

packages/components/psammead-navigation/src/index.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import { render } from '@testing-library/react';
 import { latin } from '@bbc/gel-foundations/scripts';
 import Navigation, { NavigationUl, NavigationLi } from './index';
 import igboNavData from '../testHelpers/igbo';
@@ -21,6 +22,7 @@ describe('Navigation', () => {
               active={active}
               currentPageText="Current page"
               service="news"
+              data-navigation="test_navigation"
             >
               {title}
             </NavigationLi>
@@ -30,3 +32,24 @@ describe('Navigation', () => {
     </Navigation>,
   );
 });
+
+describe('Assertions', () => {
+  it('should add extra props passed to the NavigationLi link', () => {
+    const { container } = render(
+      <NavigationLi
+        key="test-key"
+        url="http://test.url"
+        script={latin}
+        currentPageText="Current page"
+        service="news"
+        active
+        data-navigation="test_navigation"
+      >
+        Testing exta props
+      </NavigationLi>,
+    );
+    expect(
+      container.querySelector('a').getAttribute('data-navigation'),
+    ).toEqual('test_navigation');
+  });
+});

packages/components/psammead-section-label/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 3.0.0 | [PR#2377](https://github.com/bbc/psammead/pull/2377) Spread extra props to the component |
 | 2.3.18 | [PR#2353](https://github.com/bbc/psammead/pull/2353) Use `labelId` prop to set `data-section-divider` for event tracking |
 | 2.3.17 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 2.3.16 | [PR#2273](https://github.com/bbc/psammead/pull/2273) Talos - Bump Dependencies - @bbc/psammead-styles |

packages/components/psammead-section-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-section-label",
-  "version": "2.3.18",
+  "version": "3.0.0",
   "description": "React styled component for a section label",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-section-label/src/__snapshots__/index.test.jsx.snap

@@ -111,7 +111,6 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"
@@ -311,7 +310,6 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -528,7 +526,6 @@ exports[`SectionLabel With bar With linking title should render correctly with a
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -745,7 +742,6 @@ exports[`SectionLabel With bar With linking title should render correctly with e
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -962,7 +958,6 @@ exports[`SectionLabel With bar With linking title should render correctly with e
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -1126,7 +1121,6 @@ exports[`SectionLabel With bar With plain title should render correctly 1`] = `
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -1276,7 +1270,6 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -1426,7 +1419,6 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -1576,7 +1568,6 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <div
     class="c1"
@@ -1759,7 +1750,6 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`]
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"
@@ -1953,7 +1943,6 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"
@@ -2147,7 +2136,6 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"
@@ -2288,7 +2276,6 @@ exports[`SectionLabel Without bar With plain title should render correctly 1`] =
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"
@@ -2415,7 +2402,6 @@ exports[`SectionLabel Without bar With plain title should render correctly with
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"
@@ -2542,7 +2528,6 @@ exports[`SectionLabel Without bar With plain title should render correctly with
 
 <div
   class="c0"
-  data-section-divider="test-section-label"
 >
   <h2
     class="c1"

packages/components/psammead-section-label/src/index.jsx

@@ -71,11 +71,9 @@ const SectionLabel = ({
   script,
   service,
   visuallyHidden,
+  ...props
 }) => (
-  <SectionLabelWrapper
-    visuallyHidden={visuallyHidden}
-    data-section-divider={labelId}
-  >
+  <SectionLabelWrapper visuallyHidden={visuallyHidden} {...props}>
     {bar && <Bar script={script} />}
     <Heading>
       {linkText && href ? (

packages/components/psammead-section-label/src/index.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import { render } from '@testing-library/react';
 import { latin, arabic } from '@bbc/gel-foundations/scripts';
 import SectionLabel from './index';
 
@@ -214,4 +215,25 @@ describe('SectionLabel', () => {
       </SectionLabel>,
     );
   });
+
+  describe('Assertions', () => {
+    it('should add extra props passed to the component', () => {
+      const { container } = render(
+        <SectionLabel
+          script={latin}
+          bar={false}
+          visuallyHidden
+          labelId="test-section-label"
+          service="news"
+          data-section-divider="section_name"
+        >
+          This is the text in a SectionLabel
+        </SectionLabel>,
+      );
+
+      expect(
+        container.querySelector('div').getAttribute('data-section-divider'),
+      ).toEqual('section_name');
+    });
+  });
 });

packages/components/psammead-story-promo/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 3.0.0-alpha.0 | [PR#2377](https://github.com/bbc/psammead/pull/2377) Spread extra props to the component |
 | 2.8.0-alpha.1 | [PR#2354](https://github.com/bbc/psammead/pull/2354) Add `sectionName` prop to set `data-story-promo` for event tracking |
 | 2.8.0-alpha.0 | [PR#2296](https://github.com/bbc/psammead/pull/2296) Change Story Promo design 1080+px |
 | 2.7.18 | [PR#2289](https://github.com/bbc/psammead/pull/2289) Talos - Bump Dependencies - @bbc/psammead-styles |