Merge pull request #4528 from bbc/section-label-mobile-divider

Section Label - Make Mobile Divider Optional

package.json

@@ -93,7 +93,7 @@
     "@bbc/psammead-play-button": "3.0.22",
     "@bbc/psammead-rich-text-transforms": "2.0.6",
     "@bbc/psammead-script-link": "3.0.20",
-    "@bbc/psammead-section-label": "7.0.20",
+    "@bbc/psammead-section-label": "7.1.0",
     "@bbc/psammead-social-embed": "3.1.16",
     "@bbc/psammead-story-promo": "8.0.21",
     "@bbc/psammead-story-promo-list": "6.0.19",

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

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 7.1.0 | [PR#4528](https://github.com/bbc/psammead/pull/4528) Allows the mobile divider to be toggled off |
 | 7.0.20 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles |
 | 7.0.19 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies |
 | 7.0.17 | [PR#4420](https://github.com/bbc/psammead/pull/4420) bumps 3rd-party dependencies |

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

@@ -18,6 +18,7 @@ The only provided child should be the title for the section, provided as a _stri
 | Argument  | Type | Required | Default | Example |
 | --------- | ---- | -------- | ------- | ------- |
 | bar | boolean | no | `true` | `false` |
+| mobileDivider | boolean | no | `true` | `false` |
 | visuallyHidden | boolean | no | `false` | `true` |
 | children | string | yes | N/A | `'Most Read'` |
 | dir | string | no | `'ltr'` | `'rtl'` |
@@ -70,6 +71,27 @@ const WrappingComponent = () => (
 );
 ```
 
+On mobile, this component places a dividing line above the title. This can be disabled by setting the `mobileDivider` prop to `false`:
+
+```jsx
+import SectionLabel from '@bbc/psammead-section-label';
+import { latin } from '@bbc/gel-foundations/scripts';
+
+const WrappingComponent = () => (
+  <div aria-labelledby="example-section-label">
+    <SectionLabel
+      script={latin}
+      dir="ltr"
+      mobileDivider={false}
+      labelId="example-section-label"
+      service="news"
+    >
+      Example section
+    </SectionLabel>
+  </div>
+);
+```
+
 You can also visually hide the SectionLabel for all breakpoints by adding the `visuallyHidden` prop:
 
 ```jsx

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

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