build(bundler): add all blocks to the rollup build

BREAKING CHANGE: the "Block" suffix is removed from the names of all blocks

docs/src/js/blocks/HeadlineBlockExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HeadlineBlock } from 'telus-thorium-enriched/blocks';
+import { Headline } from 'telus-thorium-enriched/blocks';
 
 const HeadlineBlockExample = () => {
   const props = {
@@ -8,7 +8,7 @@ const HeadlineBlockExample = () => {
   };
 
   return (
-    <HeadlineBlock {...props} />
+    <Headline {...props} />
   );
 };
 

docs/src/js/blocks/OverviewBlockExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { OverviewBlock } from 'telus-thorium-enriched/blocks';
+import { Overview } from 'telus-thorium-enriched/blocks';
 
 const OverviewBlockExample = () => {
   const props = {
@@ -18,7 +18,7 @@ const OverviewBlockExample = () => {
   };
 
   return (
-    <OverviewBlock {...props} />
+    <Overview {...props} />
   );
 };
 

docs/src/js/blocks/TitledTextBlockExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TitledTextBlock } from 'telus-thorium-enriched/blocks';
+import { TitledText } from 'telus-thorium-enriched/blocks';
 
 const TitledTextBlockExample = () => {
   const props = {
@@ -17,7 +17,7 @@ const TitledTextBlockExample = () => {
   };
 
   return (
-    <TitledTextBlock {...props} />
+    <TitledText {...props} />
   );
 };
 

docs/src/js/blocks/VideoBlockExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VideoBlock } from 'telus-thorium-enriched/blocks';
+import { Video } from 'telus-thorium-enriched/blocks';
 
 const VideoBlockExample = () => {
   const props = {
@@ -9,7 +9,7 @@ const VideoBlockExample = () => {
   };
 
   return (
-    <VideoBlock {...props} />
+    <Video {...props} />
   );
 };
 

enriched/package.json

@@ -16,7 +16,8 @@
     "build": "npm run clean && npm run build:lib && npm run build:umd && npm run build:umd:min",
     "test": "jest",
     "test:watch": "npm run test -- --watch",
-    "rollup": "rollup -c"
+    "test:u": "npm run test -- -u",
+    "rollup": "rollup -c && cp ./src/blocks/Headline/wave_header_default.png ./dist/"
   },
   "dependencies": {
     "@telusdigital/redux-contentful": "^2.2.1",

enriched/rollup.config.js

@@ -13,7 +13,8 @@ export default {
   ],
   sourceMap: true,
 
-  external: ['react', 'prop-types'],
+  external: ['react', 'prop-types', '@telusdigital/redux-contentful'],
+
   plugins: [
     resolve({
       extensions: ['.js', '.jsx']

enriched/src/blocks/HeadlineBlock/index.jsx → enriched/src/blocks/Headline/Headline.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-if (process.env.BROWSER) {
-  require('./headline.scss');
-}
+import './Headline.scss';
 
-const HeadlineBlock = (props) => {
+const Headline = (props) => {
   const { eyebrow, title } = props;
 
   return (
@@ -22,13 +20,13 @@ const HeadlineBlock = (props) => {
   );
 };
 
-HeadlineBlock.propTypes = {
+Headline.propTypes = {
   title: PropTypes.string.isRequired,
   eyebrow: PropTypes.string
 };
 
-HeadlineBlock.defaultProps = {
+Headline.defaultProps = {
   eyebrow: ''
 };
 
-export default HeadlineBlock;
+export default Headline;

enriched/src/blocks/HeadlineBlock/headline.scss → enriched/src/blocks/Headline/Headline.scss

@@ -1,4 +1,4 @@
-@import '~telus-thorium-core/scss/settings/variables';
+@import '../../../../core/scss/settings/variables';
 
 .headline-block__bg {
   background-image: url('./wave_header_default.png');

enriched/src/blocks/HeadlineBlock/__tests__/headline.spec.jsx → enriched/src/blocks/Headline/__tests__/Headline.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { mountToJson } from 'enzyme-to-json';
-import Headline from '../';
+import Headline from '../Headline';
 
 describe('Headline', () => {
   const data = { eyebrow: 'Foo', title: 'Bar' };

enriched/src/blocks/HeadlineBlock/__tests__/__snapshots__/headline.spec.jsx.snap → enriched/src/blocks/Headline/__tests__/__snapshots__/headline.spec.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Headline matches snapshot 1`] = `
-<HeadlineBlock
+<Headline
   eyebrow="Foo"
   title="Bar"
 >
@@ -31,5 +31,5 @@ exports[`Headline matches snapshot 1`] = `
       </div>
     </div>
   </div>
-</HeadlineBlock>
+</Headline>
 `;

enriched/src/blocks/OverviewBlock/index.jsx → enriched/src/blocks/Overview/Overview.jsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import CheckList from '../components/CheckList';
 import TextTitleBodyButton from '../components/TextTitleBodyButton';
 
-const OverviewBlock = (props) => {
+const Overview = (props) => {
   const { className, ctaLink, overviewTitle, overviewDescription, sideContent } = props;
   const cls = cx(className);
   const bodyContent = {
@@ -26,15 +26,15 @@ const OverviewBlock = (props) => {
   );
 };
 
-OverviewBlock.propTypes = {
+Overview.propTypes = {
   className: PropTypes.string,
   overviewTitle: PropTypes.string,
   overviewDescription: PropTypes.string,
   ctaLink: PropTypes.object,
   sideContent: PropTypes.object
 };
 
-OverviewBlock.defaultProps = {
+Overview.defaultProps = {
   className: '',
   overviewTitle: '',
   overviewDescription: '',
@@ -49,4 +49,4 @@ OverviewBlock.defaultProps = {
   }
 };
 
-export default OverviewBlock;
+export default Overview;

enriched/src/blocks/Overview/__tests__/Overview.spec.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Overview from '../Overview';
+
+describe('<Overview />', () => {
+  const props = {
+    className: 'class',
+    overviewTitle: 'title',
+    overviewDescription: 'description',
+    ctaLink: {
+      target: 'target',
+      href: 'href',
+      text: 'text'
+    },
+    sideContent: {
+      listTitle: 'title',
+      listItems: ['one', 'two']
+    }
+  };
+
+  const overview = shallow(<Overview {...props} />);
+
+  it('sets the classes from the className prop', () => {
+    expect(overview.hasClass('class')).toBeTruthy();
+  });
+
+  it('renders a textTitleBodyButton Component', () => {
+    expect(overview.find('TextTitleBodyButton')).toBeDefined();
+    expect(overview.find('TextTitleBodyButton').props().caption).toBe('title');
+    expect(overview.find('TextTitleBodyButton').props().description).toEqual('description');
+  });
+
+  it('renders a checklist Component', () => {
+    expect(overview.find('CheckList')).toBeDefined();
+    expect(overview.find('CheckList').props().listTitle).toBe('title');
+    expect(overview.find('CheckList').props().listItems).toEqual(['one', 'two']);
+  });
+});

enriched/src/blocks/TitledTextBlock/index.jsx → enriched/src/blocks/TitledText/TitledText.jsx

@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-if (process.env.BROWSER) {
-  require('./titledTextBlock.scss');
-}
+import './TitledText.scss';
 
-class TitledTextBlock extends Component {
+class TitledText extends Component {
 
   render() {
     const { title, content, titleHeadingClass } = this.props;
@@ -32,7 +30,7 @@ class TitledTextBlock extends Component {
   }
 }
 
-TitledTextBlock.propTypes = {
+TitledText.propTypes = {
   title: PropTypes.string.isRequired,
   content: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
@@ -41,8 +39,8 @@ TitledTextBlock.propTypes = {
   titleHeadingClass: PropTypes.string
 };
 
-TitledTextBlock.defaultProps = {
+TitledText.defaultProps = {
   titleHeadingClass: 'heading-1'
 };
 
-export default TitledTextBlock;
+export default TitledText;

enriched/src/blocks/TitledTextBlock/__tests__/titledTextBlock.spec.jsx → enriched/src/blocks/TitledText/__tests__/TitledText.spec.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { mountToJson } from 'enzyme-to-json';
-import TitledTextBlock from '../';
+import TitledText from '../TitledText';
 
-describe('TextBlock Component', () => {
+describe('TitledText', () => {
   const data = {
     title: 'Title1',
     content: [
@@ -12,26 +12,26 @@ describe('TextBlock Component', () => {
   };
 
   it('matches snapshot', () => {
-    const wrapper = mount(<TitledTextBlock {...data} />);
+    const wrapper = mount(<TitledText {...data} />);
     expect(mountToJson(wrapper)).toMatchSnapshot();
   });
 
   it('should render title with default class', () => {
-    const wrapper = mount(<TitledTextBlock {...data} />);
+    const wrapper = mount(<TitledText {...data} />);
     const elem = wrapper.find('h1').first();
     expect(elem.text()).toEqual('Title1');
     expect(elem.hasClass('heading-1')).toBeTruthy();
   });
 
   it('should render title with specified class', () => {
-    const wrapper = mount(<TitledTextBlock {...data} titleHeadingClass="heading-2" />);
+    const wrapper = mount(<TitledText {...data} titleHeadingClass="heading-2" />);
     const elem = wrapper.find('h1').first();
     expect(elem.text()).toEqual('Title1');
     expect(elem.hasClass('heading-2')).toBeTruthy();
   });
 
   it('should render content', () => {
-    const wrapper = mount(<TitledTextBlock {...data} />);
+    const wrapper = mount(<TitledText {...data} />);
     expect(wrapper.find('h2').first().text()).toEqual('Small Title 1');
     expect(wrapper.find('p').first().text()).toEqual('Small Text1');
   });

enriched/src/blocks/TitledTextBlock/__tests__/__snapshots__/titledTextBlock.spec.jsx.snap → enriched/src/blocks/TitledText/__tests__/__snapshots__/TitledText.spec.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextBlock Component matches snapshot 1`] = `
-<TitledTextBlock
+exports[`TitledText matches snapshot 1`] = `
+<TitledText
   content={
     Array [
       Object {
@@ -46,5 +46,5 @@ exports[`TextBlock Component matches snapshot 1`] = `
       </div>
     </div>
   </section>
-</TitledTextBlock>
+</TitledText>
 `;

enriched/src/blocks/VideoBlock/index.jsx → enriched/src/blocks/Video/Video.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-if (process.env.BROWSER) {
-  require('./video-block.scss');
-}
+import './Video.scss';
 
-const VideoBlock = (props) => {
+const Video = (props) => {
   const { caption, subtext, videoUrl } = props;
 
   return (
@@ -27,16 +25,16 @@ const VideoBlock = (props) => {
   );
 };
 
-VideoBlock.propTypes = {
+Video.propTypes = {
   caption: PropTypes.string,
   subtext: PropTypes.string,
   videoUrl: PropTypes.string
 };
 
-VideoBlock.defaultProps = {
+Video.defaultProps = {
   subtext: '',
   caption: '',
   videoUrl: ''
 };
 
-export default VideoBlock;
+export default Video;