MAP fauxHeadline and visuallyHiddenHeadline logic

src/app/containers/CpsAssetPageMain/index.jsx

@@ -13,6 +13,8 @@ import MediaPlayer from '../CpsAssetMediaPlayer';
 import Blocks from '../Blocks';
 import ATIAnalytics from '../ATIAnalytics';
 import cpsAssetPagePropTypes from '../../models/propTypes/cpsAssetPage';
+import fauxHeadline from '../FauxHeadline';
+import visuallyHiddenHeadline from '../VisuallyHiddenHeadline';
 
 const CpsAssetPageMain = ({ pageData }) => {
   const title = path(['promo', 'headlines', 'headline'], pageData);
@@ -22,6 +24,8 @@ const CpsAssetPageMain = ({ pageData }) => {
   const blocks = pathOr([], ['content', 'model', 'blocks'], pageData);
 
   const componentsToRender = {
+    fauxHeadline,
+    visuallyHiddenHeadline,
     headline: headings,
     subheadline: headings,
     text,

src/app/containers/FauxHeadline/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FauxHeadline with headline data should render correctly 1`] = `
+.c1 {
+  font-size: 1.75rem;
+  line-height: 2rem;
+  font-family: ReithSerif,Helvetica,Arial,sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  color: #3F3F42;
+  margin: 0;
+  padding: 2rem 0;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c1 {
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c1 {
+    font-size: 2.75rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c1 {
+    padding: 2.5rem 0;
+  }
+}
+
+@media (max-width:63rem) {
+  .c0 {
+    grid-column: 1 / span 6;
+  }
+}
+
+@media (min-width:63rem) and (max-width:80rem) {
+  .c0 {
+    grid-column: 3 / span 6;
+  }
+}
+
+@media (min-width:80rem) {
+  .c0 {
+    grid-column: 6 / span 12;
+  }
+}
+
+@media (max-width:25rem) {
+  .c0 {
+    padding: 0 0.5rem;
+  }
+}
+
+@media (min-width:25rem) and (max-width:62.9375rem) {
+  .c0 {
+    padding: 0 1rem;
+  }
+}
+
+<div
+  class="c0"
+>
+  <strong
+    aria-hidden="true"
+    class="c1"
+  >
+    This is a headline!
+  </strong>
+</div>
+`;
+
+exports[`FauxHeadline with plain text headline should render <strong> containing correct text 1`] = `
+.c1 {
+  font-size: 1.75rem;
+  line-height: 2rem;
+  font-family: ReithSerif,Helvetica,Arial,sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  color: #3F3F42;
+  margin: 0;
+  padding: 2rem 0;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c1 {
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c1 {
+    font-size: 2.75rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c1 {
+    padding: 2.5rem 0;
+  }
+}
+
+@media (max-width:63rem) {
+  .c0 {
+    grid-column: 1 / span 6;
+  }
+}
+
+@media (min-width:63rem) and (max-width:80rem) {
+  .c0 {
+    grid-column: 3 / span 6;
+  }
+}
+
+@media (min-width:80rem) {
+  .c0 {
+    grid-column: 6 / span 12;
+  }
+}
+
+@media (max-width:25rem) {
+  .c0 {
+    padding: 0 0.5rem;
+  }
+}
+
+@media (min-width:25rem) and (max-width:62.9375rem) {
+  .c0 {
+    padding: 0 1rem;
+  }
+}
+
+<div
+  class="c0"
+>
+  <strong
+    aria-hidden="true"
+    class="c1"
+  >
+    Plain headline
+  </strong>
+</div>
+`;

src/app/containers/FauxHeadline/index.jsx

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import { Headline } from '@bbc/psammead-headings';
+import { textDefaultPropTypes } from '#models/propTypes';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { headlineModelPropTypes } from '#models/propTypes/headline';
+import Fragment from '../Fragment';
+import Blocks from '../Blocks';
+import { GridItemConstrainedLarge } from '#lib/styledGrid';
+
+// missing CSS 'display: block;' in psammead branch `explicitly-set-h1-styles-display-and-font-weight`
+const FauxHeadline = props => <Headline as="strong" {...props} />;
+
+const FauxHeadlineContainer = ({ blocks }) => {
+  const { script, service } = useContext(ServiceContext);
+
+  const arrayOfFragments = blocks[0].model.blocks[0].model.blocks;
+
+  if (!arrayOfFragments || !Array.isArray(arrayOfFragments)) {
+    return null;
+  }
+  const componentsToRender = { fragment: Fragment };
+
+  const renderText = () => (
+    <Blocks blocks={arrayOfFragments} componentsToRender={componentsToRender} />
+  );
+
+  return (
+    <GridItemConstrainedLarge>
+      <FauxHeadline script={script} service={service} aria-hidden="true">
+        {renderText()}
+      </FauxHeadline>
+    </GridItemConstrainedLarge>
+  );
+};
+
+FauxHeadlineContainer.propTypes = {
+  ...headlineModelPropTypes,
+};
+
+FauxHeadlineContainer.defaultProps = textDefaultPropTypes;
+
+export default FauxHeadlineContainer;

src/app/containers/FauxHeadline/index.stories.jsx

@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { latin } from '@bbc/gel-foundations/scripts';
+import FauxHeadlineContainer from '.';
+import { ServiceContext } from '#contexts/ServiceContext';
+import blocksSingleFragment from '../Headings/testHelpers';
+
+const headline = blocksSingleFragment('This is a headline.', []);
+
+storiesOf('Containers|FauxHeadline', module)
+  .addParameters({ chromatic: { disable: true } })
+  .add('default FauxHeadline', () => (
+    <ServiceContext.Provider value={{ script: latin, service: 'news' }}>
+      <FauxHeadlineContainer type="fauxHeadline" blocks={headline} />
+    </ServiceContext.Provider>
+  ));

src/app/containers/FauxHeadline/index.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  shouldMatchSnapshot,
+  isNull,
+  suppressPropWarnings,
+} from '@bbc/psammead-test-helpers';
+import { latin } from '@bbc/gel-foundations/scripts';
+import FauxHeadlineContainer from '.';
+import { ServiceContext } from '#contexts/ServiceContext';
+import { textBlock } from '#models/blocks';
+import blocksSingleFragment from '../Headings/testHelpers';
+
+const FauxHeadlineContainerWithContext = data => (
+  <ServiceContext.Provider value={{ script: latin, service: 'news' }}>
+    <FauxHeadlineContainer {...data} />
+  </ServiceContext.Provider>
+);
+
+describe('FauxHeadline', () => {
+  describe('with no data', () => {
+    suppressPropWarnings(['blocks', 'supplied']);
+    isNull('should not render anything', FauxHeadlineContainerWithContext());
+  });
+
+  describe('with headline data', () => {
+    const data = {
+      ...textBlock('This is a headline!'),
+    };
+    shouldMatchSnapshot(
+      'should render correctly',
+      FauxHeadlineContainerWithContext(data),
+    );
+  });
+
+  describe('with plain text', () => {
+    describe('headline', () => {
+      const data = {
+        blocks: blocksSingleFragment('Plain headline', []),
+      };
+
+      shouldMatchSnapshot(
+        'should render <strong> containing correct text',
+        FauxHeadlineContainerWithContext(data),
+      );
+    });
+  });
+});

src/app/containers/VisuallyHiddenHeadline/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VisuallyHiddenHeadline with headline data should render correctly 1`] = `
+.c0 {
+  -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;
+  margin: 0;
+}
+
+<h1
+  class="c0"
+  id="content"
+  tabindex="-1"
+>
+  This is a headline!
+</h1>
+`;
+
+exports[`VisuallyHiddenHeadline with plain text headline should render h1 containing correct text 1`] = `
+.c0 {
+  -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;
+  margin: 0;
+}
+
+<h1
+  class="c0"
+  id="content"
+  tabindex="-1"
+>
+  Plain headline
+</h1>
+`;

src/app/containers/VisuallyHiddenHeadline/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import path from 'ramda/src/path';
+import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';
+import { textDefaultPropTypes } from '#models/propTypes';
+import { headlineModelPropTypes } from '#models/propTypes/headline';
+
+const VisuallyHiddenHeadline = props => (
+  <VisuallyHiddenText as="h1" {...props} />
+);
+
+const VisuallyHiddenHeadlineContainer = ({ blocks }) => {
+  const { text } = path(['0', 'model', 'blocks', '0', 'model'], blocks);
+
+  if (!text) {
+    return null;
+  }
+
+  const id = 'content'; // Used for the skiplink
+
+  return (
+    <VisuallyHiddenHeadline id={id} tabIndex="-1">
+      {text}
+    </VisuallyHiddenHeadline>
+  );
+};
+
+VisuallyHiddenHeadlineContainer.propTypes = {
+  ...headlineModelPropTypes,
+};
+
+VisuallyHiddenHeadlineContainer.defaultProps = textDefaultPropTypes;
+
+export default VisuallyHiddenHeadlineContainer;

src/app/containers/VisuallyHiddenHeadline/index.stories.jsx

@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import VisuallyHiddenHeadlineContainer from '.';
+import blocksSingleFragment from '../Headings/testHelpers';
+
+const headline = blocksSingleFragment('This is a headline.', []);
+
+storiesOf('Containers|VisuallyHiddenHeadline', module)
+  .addParameters({ chromatic: { disable: true } })
+  .add('default VisuallyHiddenHeadline', () => (
+    <VisuallyHiddenHeadlineContainer
+      type="visuallyHiddenHeadline"
+      blocks={headline}
+    />
+  ));