Add lang attribute to brand component

packages/components/psammead-brand/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 3.0.1   | [PR#609](https://github.com/bbc/psammead/pull/609) Add lang attribute to brand component |
 | 3.0.0   | [PR#528](https://github.com/bbc/psammead/pull/528) Add link prop to allow dynamic link |
 | 2.0.0   | [PR#480](https://github.com/bbc/psammead/pull/480) Allow the SVG to dynamically scale between the minimum and maximum widths passed in as props, also bump psammead-assets@0.1.9. Also reduce banner height and left-right padding under 600px. |
 | 1.0.2   | [PR#515](https://github.com/bbc/psammead/pull/515) Update story to use dirDecorator |

packages/components/psammead-brand/README.md

@@ -4,9 +4,9 @@
 
 The `Brand` component provides the BBC service logo (as SVG), nested inside a styled link and div. The link is currently hardcoded to "https://www.bbc.co.uk/news".
 
-`Brand` takes a `brandName`, `svgHeight`, `minWidth`, `maxWidth`, `url` and `svg` as props.
+`Brand` takes a `product`, `svgHeight`, `minWidth`, `maxWidth`, `url`, `serviceLocalizedName` and `svg` as props.
 
-The `brandName` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand.
+The `product` is passed to a [VisuallyHiddenText](https://github.com/bbc/psammead/tree/latest/packages/components/VisuallyHiddenText) component, nested inside Brand.
 
 The `svg` prop must contain a `group`, `viewbox` values and a `ratio`, which is used within an `svg` element. Examples of the `svg` object can be found in [@bbc/psammead-assets](https://github.com/bbc/psammead/blob/latest/packages/utilities/psammead-assets/README.md#service-svgs).
 
@@ -16,6 +16,8 @@ The `svgHeight` value acts as a placeholder for the `svg` element meaning the ov
 
 The `url` value is the link that points to the frontpage of the service associated with the `svg`.
 
+The `serviceLocalizedName` is an optional props referring to the local name of a service eg `Yoruba`.
+
 ## Installation
 
 `npm install @bbc/psammead-brand`
@@ -25,12 +27,13 @@ The `url` value is the link that points to the frontpage of the service associat
 <!-- prettier-ignore -->
 | Argument  | Type   | Required | Default | Example      |
 | --------- | ------ | -------- | ------- | ------------ |
-| brandName | String | yes      | N/A     | `'BBC News'` |
+| product | String | yes      | N/A     | `'BBC News'` |
 | svgHeight | Number | yes | N/A | `24` |
 | minWidth | Number | yes | N/A | `240` |
 | maxWidth | Number | yes | N/A | `380` |
 | svg | Object | yes | N/A | { group: `(<g fillrule="evenodd"><path d="M84.32" /></g>)`, viewbox: { height: 24, width: 167.95 }, ratio: 6.9979 } |
 | url | String | no | N/A | `https://www.bbc.co.uk/news` |
+| serviceLocalizedName | String | no      | N/A     | `'Yoruba'` |
 
 ## Usage
 
@@ -40,10 +43,11 @@ The typical use-case of this component is at the top of pages in a [`header` ele
 import Brand from '@bbc/psammead-brand';
 import { igbo } from '@bbc/psammead-assets/svgs';
 
-const Header = brandName => (
+const Header = (product, serviceName) => (
   <header role="banner">
     <Brand
-      brandName={brandName}
+      product={product}
+      serviceLocalizedName={serviceName}
       svgHeight={24}
       maxWidth={280}
       minWidth={180}

packages/components/psammead-brand/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "main": "dist/index.js",
   "description": "Provides the BBC News logo (as SVG), nested a hardcoded link to https://www.bbc.co.uk/news",
   "repository": {

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

@@ -78,7 +78,13 @@ exports[`Brand should render correctly with link not provided 1`] = `
   <span
     className="c2"
   >
-    Default Brand Name
+    <span
+      lang="en-GB"
+    >
+      Default Brand Name
+      ,
+    </span>
+    Service
   </span>
 </div>
 `;
@@ -172,8 +178,97 @@ exports[`Brand should render correctly with link provided 1`] = `
     <span
       className="c4"
     >
-      Default Brand Name
+      <span
+        lang="en-GB"
+      >
+        Default Brand Name
+        ,
+      </span>
+      Service
     </span>
   </a>
 </div>
 `;
+
+exports[`Brand should render correctly with no service Localized Name 1`] = `
+.c2 {
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+}
+
+.c0 {
+  background-color: #B80000;
+  height: 3.5rem;
+  width: 100%;
+  padding: 0 0.5rem;
+}
+
+.c1 {
+  box-sizing: content-box;
+  fill: #FFFFFF;
+  padding-top: 1rem;
+  padding-bottom: 0.75rem;
+  width: 100%;
+  max-width: 17.5rem;
+  min-width: 11.25rem;
+}
+
+.c3:hover .c1,
+.c3:focus .c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom: 0.25rem solid #FFFFFF;
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    height: 5rem;
+    padding: 0 1rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c1 {
+    padding-top: 1.75rem;
+    padding-bottom: 1.5rem;
+  }
+}
+
+@media screen and (-ms-high-contrast:active),print {
+  .c1 {
+    fill: windowText;
+  }
+}
+
+<div
+  className="c0"
+>
+  <svg
+    aria-hidden="true"
+    className="c1"
+    focusable="false"
+    height={24}
+    viewBox="0 0 167.95 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fillrule="evenodd"
+    >
+      <path
+        d="M84.32"
+      />
+    </g>
+  </svg>
+  <span
+    className="c2"
+  >
+    BBC News
+  </span>
+</div>
+`;

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

@@ -71,7 +71,33 @@ const BrandSvg = styled.svg`
   /* stylelint-enable */
 `;
 
-const StyledBrand = ({ brandName, svgHeight, svg, maxWidth, minWidth }) => (
+const LocalisedBrandName = ({ product, serviceLocalizedName }) =>
+  serviceLocalizedName ? (
+    <Fragment>
+      <span lang="en-GB">{product},</span>
+      {serviceLocalizedName}
+    </Fragment>
+  ) : (
+    product
+  );
+
+LocalisedBrandName.propTypes = {
+  product: string.isRequired,
+  serviceLocalizedName: string,
+};
+
+LocalisedBrandName.defaultProps = {
+  serviceLocalizedName: null,
+};
+
+const StyledBrand = ({
+  product,
+  serviceLocalizedName,
+  svgHeight,
+  svg,
+  maxWidth,
+  minWidth,
+}) => (
   <Fragment>
     {svg && (
       <Fragment>
@@ -87,14 +113,20 @@ const StyledBrand = ({ brandName, svgHeight, svg, maxWidth, minWidth }) => (
         >
           {svg.group}
         </BrandSvg>
-        <VisuallyHiddenText>{brandName}</VisuallyHiddenText>
+        <VisuallyHiddenText>
+          <LocalisedBrandName
+            product={product}
+            serviceLocalizedName={serviceLocalizedName}
+          />
+        </VisuallyHiddenText>
       </Fragment>
     )}
   </Fragment>
 );
 
 const brandProps = {
-  brandName: string.isRequired,
+  product: string.isRequired,
+  serviceLocalizedName: string,
   maxWidth: number.isRequired,
   minWidth: number.isRequired,
   svgHeight: number.isRequired,
@@ -110,37 +142,50 @@ const brandProps = {
 
 StyledBrand.propTypes = brandProps;
 
-const Brand = ({ brandName, svgHeight, minWidth, maxWidth, svg, url }) => (
-  <Banner svgHeight={svgHeight}>
-    {url ? (
-      <StyledLink href={url} maxWidth={maxWidth} minWidth={minWidth}>
-        <StyledBrand
-          brandName={brandName}
-          svg={svg}
-          maxWidth={maxWidth}
-          minWidth={minWidth}
-          svgHeight={svgHeight}
-        />
-      </StyledLink>
-    ) : (
-      <StyledBrand
-        brandName={brandName}
-        svg={svg}
-        svgHeight={svgHeight}
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-      />
-    )}
-  </Banner>
-);
+StyledBrand.defaultProps = {
+  serviceLocalizedName: null,
+};
+
+const Brand = ({
+  product,
+  serviceLocalizedName,
+  svgHeight,
+  minWidth,
+  maxWidth,
+  svg,
+  url,
+}) => {
+  const styledBrandProps = {
+    product,
+    serviceLocalizedName,
+    svgHeight,
+    minWidth,
+    maxWidth,
+    svg,
+  };
+
+  return (
+    <Banner svgHeight={svgHeight}>
+      {url ? (
+        <StyledLink href={url} maxWidth={maxWidth} minWidth={minWidth}>
+          <StyledBrand {...styledBrandProps} />
+        </StyledLink>
+      ) : (
+        <StyledBrand {...styledBrandProps} />
+      )}
+    </Banner>
+  );
+};
 
 Brand.defaultProps = {
   url: null,
+  serviceLocalizedName: null,
 };
 
 Brand.propTypes = {
   ...brandProps,
   url: string,
+  serviceLocalizedName: string,
 };
 
 export default Brand;

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

@@ -38,7 +38,8 @@ storiesOf('Components|Brand', module)
 
       return (
         <Brand
-          brandName="Default Brand Name"
+          product="Default Brand Name"
+          serviceLocalizedName="Service"
           svgHeight={svgHeightInput}
           minWidth={minWidthInput}
           maxWidth={maxWidthInput}
@@ -60,7 +61,8 @@ storiesOf('Components|Brand', module)
 
       return (
         <Brand
-          brandName="Default Brand Name"
+          product="Default Brand Name"
+          serviceLocalizedName="Service"
           svgHeight={svgHeightInput}
           minWidth={minWidthInput}
           maxWidth={maxWidthInput}

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

@@ -19,7 +19,8 @@ describe('Brand', () => {
   shouldMatchSnapshot(
     'should render correctly with link provided',
     <Brand
-      brandName="Default Brand Name"
+      product="Default Brand Name"
+      serviceLocalizedName="Service"
       svgHeight={24}
       maxWidth={280}
       minWidth={180}
@@ -31,7 +32,19 @@ describe('Brand', () => {
   shouldMatchSnapshot(
     'should render correctly with link not provided',
     <Brand
-      brandName="Default Brand Name"
+      product="Default Brand Name"
+      serviceLocalizedName="Service"
+      svg={svg}
+      svgHeight={24}
+      maxWidth={280}
+      minWidth={180}
+    />,
+  );
+
+  shouldMatchSnapshot(
+    'should render correctly with no service Localized Name',
+    <Brand
+      product="BBC News"
       svg={svg}
       svgHeight={24}
       maxWidth={280}