Merge pull request #476 from bbc/fail-gracefully-when-svg-not-provided

Fail gracefully when svg not provided
BBC-archive · Apr 29, 2019 · e560809 · e560809
2 parents 4295449 + 8b51a07
commit e560809
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 17 deletions.
diff --git a/packages/components/psammead-brand/CHANGELOG.md b/packages/components/psammead-brand/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 | ------- | ----------- |
+| 1.0.1   | [PR#476](https://github.com/bbc/psammead/pull/476) Fail gracefully if brand svg is not provided |
 | 1.0.0   | [PR#457](https://github.com/bbc/psammead/pull/457) Enable passing of different svgs |
 | 0.3.4   | [PR#424](https://github.com/bbc/psammead/pull/424) Add Snyk badge to readme |
 | 0.3.3   | [PR#407](https://github.com/bbc/psammead/pull/407) Organise dependencies properly |

diff --git a/packages/components/psammead-brand/package-lock.json b/packages/components/psammead-brand/package-lock.json
diff --git a/packages/components/psammead-brand/package.json b/packages/components/psammead-brand/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-brand",
-  "version": "1.0.0",
+  "version": "1.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": {

diff --git a/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-brand/src/__snapshots__/index.test.jsx.snap
@@ -110,3 +110,42 @@ exports[`Brand should render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Brand should render correctly with svg not provided 1`] = `
+.c0 {
+  background-color: #B80000;
+  height: 5rem;
+  width: 100%;
+}
+
+.c1 {
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+@media (max-width:25rem) {
+  .c0 {
+    padding: 0 0.5rem;
+  }
+}
+
+@media (min-width:25rem) {
+  .c0 {
+    padding: 0 1rem;
+  }
+}
+
+@media (min-width:62.9375rem) {
+  .c0 {
+    padding: 0 1rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  />
+</div>
+`;
diff --git a/packages/components/psammead-brand/src/index.jsx b/packages/components/psammead-brand/src/index.jsx
@@ -76,20 +76,22 @@ const BrandSvg = styled.svg`
 const Brand = ({ brandName, svg }) => (
   <StyledWrapper>
     <ConstraintWrapper>
-      <StyledLink href="https://www.bbc.co.uk/news">
-        <StyledSpan>
-          <BrandSvg
-            viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
-            xmlns="http://www.w3.org/2000/svg"
-            focusable="false"
-            aria-hidden="true"
-            ratio={svg.ratio}
-          >
-            {svg.group}
-          </BrandSvg>
-          <VisuallyHiddenText>{brandName}</VisuallyHiddenText>
-        </StyledSpan>
-      </StyledLink>
+      {svg && (
+        <StyledLink href="https://www.bbc.co.uk/news">
+          <StyledSpan>
+            <BrandSvg
+              viewBox={`0 0 ${svg.viewbox.width} ${svg.viewbox.height}`}
+              xmlns="http://www.w3.org/2000/svg"
+              focusable="false"
+              aria-hidden="true"
+              ratio={svg.ratio}
+            >
+              {svg.group}
+            </BrandSvg>
+            <VisuallyHiddenText>{brandName}</VisuallyHiddenText>
+          </StyledSpan>
+        </StyledLink>
+      )}
     </ConstraintWrapper>
   </StyledWrapper>
 );

diff --git a/packages/components/psammead-brand/src/index.stories.jsx b/packages/components/psammead-brand/src/index.stories.jsx
@@ -19,4 +19,7 @@ storiesOf('Brand', module)
       return <Brand brandName="Default Brand Name" svg={svgs[choice]} />;
     },
     { notes },
-  );
+  )
+  .add('without brand svg', () => <Brand brandName="Default Brand Name" />, {
+    notes,
+  });
diff --git a/packages/components/psammead-brand/src/index.test.jsx b/packages/components/psammead-brand/src/index.test.jsx
@@ -20,4 +20,8 @@ describe('Brand', () => {
     'should render correctly',
     <Brand brandName="Default Brand Name" svg={svg} />,
   );
+  shouldMatchSnapshot(
+    'should render correctly with svg not provided',
+    <Brand brandName="Default Brand Name" />,
+  );
 });