Merge pull request #966 from WPMedia/TMEDIA-263-chain-updates

TMEDIA-263 - Update all chains to be able to have a heading

blocks/double-chain-block/chains/double-chain/default.jsx

@@ -1,15 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from '@arc-fusion/prop-types';
+import { Heading, HeadingSection } from '@wpmedia/shared-styles';
+
+import '@wpmedia/shared-styles/scss/_chains.scss';
 
 const DoubleChain = ({ children, customFields }) => {
   if (children && children.length && children.length > 0) {
     // if no columnOne length set, then use the length of the children
     // if no length set, then all children will be put in column one
-    const { columnOne: columnOneLength = children.length } = customFields;
+    const {
+      columnOne: columnOneLength = children.length,
+      heading = null,
+    } = customFields;
 
     // check column one length not negative
     if (columnOneLength > 0) {
-      return (
+      const childrenOutput = (
         <div className="container-fluid double-chain chain-container">
           <div className="row wrap-bottom">
             <div className="col-sm-12 col-md-xl-6 ie-flex-100-percent-sm column-1 reduce-internal-row-col-gap chain-col">
@@ -21,6 +27,17 @@ const DoubleChain = ({ children, customFields }) => {
           </div>
         </div>
       );
+
+      if (!heading) {
+        return childrenOutput;
+      }
+
+      return (
+        <HeadingSection>
+          <Heading className="chain-heading">{heading}</Heading>
+          {childrenOutput}
+        </HeadingSection>
+      );
     }
   }
 
@@ -32,6 +49,9 @@ DoubleChain.label = 'Double Chain – Arc Block';
 DoubleChain.propTypes = {
   children: PropTypes.array,
   customFields: PropTypes.shape({
+    heading: PropTypes.string.tag({
+      label: 'Heading',
+    }),
     columnOne: PropTypes.number.isRequired.tag({
       label: 'Column one size',
       description: 'The number of features which will appear in the first column. The rest will go into the second column.',

blocks/double-chain-block/chains/double-chain/default.test.jsx

@@ -76,4 +76,32 @@ describe('the double chain block', () => {
 
     expect(component).toBeEmptyRender();
   });
+
+  it('should render heading from custom field and children', () => {
+    const customFields = { columnOne: 1, heading: 'Double Chain Heading' };
+    const component = mount(
+      <DoubleChain customFields={customFields}>
+        <Comp1 />
+        <Comp2 />
+      </DoubleChain>,
+    );
+
+    expect(component.find('Heading').text()).toBe('Double Chain Heading');
+    expect(component.find('HeadingSection').exists()).toBe(true);
+    expect(component.find('.column-1').text()).toBe('1');
+  });
+
+  it('should not render heading from custom field and children', () => {
+    const customFields = { columnOne: 1 };
+    const component = mount(
+      <DoubleChain customFields={customFields}>
+        <Comp1 />
+        <Comp2 />
+      </DoubleChain>,
+    );
+
+    expect(component.find('Heading').exists()).toBe(false);
+    expect(component.find('HeadingSection').exists()).toBe(false);
+    expect(component.find('.column-1').text()).toBe('1');
+  });
 });

blocks/double-chain-block/index.story.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+import DoubleChain from './chains/double-chain/default';
+
+export default {
+  title: 'Chains/Double',
+  decorators: [withKnobs],
+  parameters: {
+    // Set the viewports in Chromatic at a component level.
+    chromatic: { viewports: [320, 740, 1200] },
+  },
+};
+
+const styles = {
+  backgroundColor: 'rgb(240 240 240)',
+};
+
+const Comp1 = () => <div style={styles}>1</div>;
+const Comp2 = () => <div style={styles}>2</div>;
+
+export const allColumns = () => {
+  const customFields = {
+    columnOne: 1,
+    heading: 'Double Chain Heading',
+  };
+
+  return (
+    <DoubleChain customFields={customFields}>
+      <Comp1 />
+      <Comp2 />
+    </DoubleChain>
+  );
+};
+
+export const allColumnsNoTitle = () => {
+  const customFields = {
+    columnOne: 1,
+  };
+
+  return (
+    <DoubleChain customFields={customFields}>
+      <Comp1 />
+      <Comp2 />
+    </DoubleChain>
+  );
+};
+
+export const zeroColumns = () => {
+  const customFields = {
+    heading: 'Double Chain Heading',
+  };
+
+  return (
+    <DoubleChain customFields={customFields}>
+      <Comp1 />
+      <Comp2 />
+    </DoubleChain>
+  );
+};

blocks/double-chain-block/package.json

@@ -22,8 +22,9 @@
     "directory": "blocks/double-chain-block"
   },
   "peerDependencies": {
+    "@arc-fusion/prop-types": "^0.1.5",
     "@wpmedia/engine-theme-sdk": "*",
-    "@wpmedia/news-theme-css": "*"
+    "@wpmedia/shared-styles": "*"
   },
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1",

blocks/quad-chain-block/chains/quad-chain/default.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from '@arc-fusion/prop-types';
+import { Heading, HeadingSection } from '@wpmedia/shared-styles';
+
+import '@wpmedia/shared-styles/scss/_chains.scss';
 
 const QuadChain = ({ children, customFields }) => {
   if (children && children.length && children.length > 0) {
@@ -9,6 +12,7 @@ const QuadChain = ({ children, customFields }) => {
       columnOne: columnOneLength = children.length,
       columnTwo: columnTwoLength = 0,
       columnThree: columnThreeLength = 0,
+      heading = null,
     } = customFields;
 
     // check column length not negative
@@ -17,7 +21,7 @@ const QuadChain = ({ children, customFields }) => {
 
       const endOfColumnThreeIndex = endOfColumnTwoIndex + columnThreeLength;
 
-      return (
+      const childrenOutput = (
         <div className="container-fluid chain-container">
           <div className="row wrap-bottom">
             <div className="col-sm-12 col-md-xl-3 ie-flex-100-percent-sm reduce-internal-row-col-gap chain-col">
@@ -35,6 +39,17 @@ const QuadChain = ({ children, customFields }) => {
           </div>
         </div>
       );
+
+      if (!heading) {
+        return childrenOutput;
+      }
+
+      return (
+        <HeadingSection>
+          <Heading className="chain-heading">{heading}</Heading>
+          {childrenOutput}
+        </HeadingSection>
+      );
     }
   }
 
@@ -46,6 +61,9 @@ QuadChain.label = 'Quad Chain – Arc Block';
 QuadChain.propTypes = {
   children: PropTypes.array,
   customFields: PropTypes.shape({
+    heading: PropTypes.string.tag({
+      label: 'Heading',
+    }),
     columnOne: PropTypes.number.isRequired.tag({
       label: 'Number of blocks in Column 1:',
       description: 'The number of features which will appear in the first column',

blocks/quad-chain-block/chains/quad-chain/default.test.jsx

@@ -7,12 +7,14 @@ describe('the quad chain block', () => {
   const Comp2 = () => <div>2</div>;
   const Comp3 = () => <div>3</div>;
   const Comp4 = () => <div>4</div>;
+
   it('should only render if there are children', () => {
     const component = shallow(
       <Chain />,
     );
     expect(component).toBeEmptyRender();
   });
+
   it('should put all features into the first column by default', () => {
     const customFields = {};
     const component = shallow(
@@ -30,6 +32,7 @@ describe('the quad chain block', () => {
     expect(columnOne.children().length).toBe(4);
     expect(columnTwo.children().length).toBe(0);
   });
+
   it('should be able to accept a number in the custom field, and that number of features within the chain should appear in the first column. ', () => {
     const customFields = { columnOne: 2, columnTwo: 2, columnThree: 0 };
     const component = mount(
@@ -47,6 +50,7 @@ describe('the quad chain block', () => {
     expect(columnOne.text()).toEqual('12');
     expect(columnTwo.text()).toEqual('34');
   });
+
   it('should be able to accept numbers in the custom field, any additional features in the chain should be placed in the fourth column. ', () => {
     const customFields = { columnOne: 1, columnTwo: 1, columnThree: 1 };
     const component = mount(
@@ -68,6 +72,7 @@ describe('the quad chain block', () => {
     expect(columnThree.text()).toEqual('3');
     expect(columnFour.text()).toEqual('4');
   });
+
   it('should render nothing if negative column 1 amount', () => {
     const customFields = { columnOne: -10 };
     const component = mount(
@@ -81,4 +86,41 @@ describe('the quad chain block', () => {
 
     expect(component).toBeEmptyRender();
   });
+
+  it('should render heading from custom field and children', () => {
+    const customFields = { columnOne: 1, columnTwo: 1, heading: 'Quad Chain Heading' };
+    const component = mount(
+      <Chain customFields={customFields}>
+        <Comp1 />
+        <Comp2 />
+      </Chain>,
+    );
+
+    expect(component.find('Heading').text()).toBe('Quad Chain Heading');
+    expect(component.find('HeadingSection').exists()).toBe(true);
+
+    const columnOne = component.find('.row').children().at(0);
+    const columnTwo = component.find('.row').children().at(1);
+
+    expect(columnOne.text()).toEqual('1');
+    expect(columnTwo.text()).toEqual('2');
+  });
+
+  it('should not render heading from custom field and children', () => {
+    const customFields = { columnOne: 1, columnTwo: 1 };
+    const component = mount(
+      <Chain customFields={customFields}>
+        <Comp1 />
+        <Comp2 />
+      </Chain>,
+    );
+
+    expect(component.find('Heading').exists()).toBe(false);
+    expect(component.find('HeadingSection').exists()).toBe(false);
+    const columnOne = component.find('.row').children().at(0);
+    const columnTwo = component.find('.row').children().at(1);
+
+    expect(columnOne.text()).toEqual('1');
+    expect(columnTwo.text()).toEqual('2');
+  });
 });