@comicrelief/component-library 6.1.5 → 6.3.0

package/dist/components/Molecules/ArticleTeaser/ArticleTeaser.test.js

@@ -10,13 +10,13 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _ArticleTeaser = _interopRequireDefault(require("./ArticleTeaser"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders article teaser correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_ArticleTeaser.default, {
     href: "/test",
-    images: _data.default.images,
-    image: _data.default.image,
+    images: _data.defaultData.images,
+    image: _data.defaultData.image,
     date: " 01 July 2019",
     title: "News article",
     copy: "News article copy",

package/dist/components/Molecules/Box/Box.md

@@ -3,12 +3,11 @@
 ## Flexible container only (‘invisible’ to user)
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 <div style={{ display: 'flex', background: '#E1E2E3' }}>
   <div style={{ width: '50%', margin: '1rem' }}>
-    <Box imageLow={data.image} images={data.images} height="auto">
+    <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
       <Text tag="h3" family="Anton" color="black" size="xl" uppercase>
         Title
       </Text>
@@ -16,7 +15,7 @@ import Link from '../../Atoms/Link/Link';
     </Box>
   </div>
   <div style={{ width: '50%', margin: '1rem' }}>
-    <Box imageLow={data.image} images={data.images} height="auto">
+    <Box imageLow={defaultData.image} images={defaultData.images} height="auto">
       <Text tag="h3" family="Anton" color="black" size="xl" uppercase>
         Title
       </Text>
@@ -29,7 +28,6 @@ import Link from '../../Atoms/Link/Link';
 ### Box no body
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
-<Box imageLow={data.image} images={data.image} />;
+const defaultData = require('../../../styleguide/data/data').defaultData;
+<Box imageLow={defaultData.image} images={defaultData.image} />;
 ```

package/dist/components/Molecules/Box/Box.test.js

@@ -10,12 +10,12 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Box.default, {
-    imageLow: _data.default.image,
-    images: _data.default.image
+    imageLow: _data.defaultData.image,
+    images: _data.defaultData.image
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });

package/dist/components/Molecules/Card/Card.md

@@ -1,13 +1,12 @@
 # Card
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <Card
-  imageLow={data.image}
-  images={data.images}
+  imageLow={defaultData.image}
+  images={defaultData.images}
   backgroundColor="yellow"
   height="auto"
 >
@@ -21,7 +20,6 @@ import Link from '../../Atoms/Link/Link';
 ### Card no body
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
-<Card imageLow={data.image} images={data.image} />;
+const defaultData = require('../../../styleguide/data/data').defaultData;
+<Card imageLow={defaultData.image} images={defaultData.image} />;
 ```

package/dist/components/Molecules/Card/Card.test.js

@@ -10,20 +10,20 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _Card = _interopRequireDefault(require("./Card"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
-    image: _data.default.image,
-    images: _data.default.image,
+    image: _data.defaultData.image,
+    images: _data.defaultData.image,
     backgroundColor: "yellow"
   }, /*#__PURE__*/_react.default.createElement("h2", null, "Title"), /*#__PURE__*/_react.default.createElement("p", null, "Description"))).toJSON();
   expect(tree).toMatchSnapshot();
 });
 it('renders correctly with no body', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Card.default, {
-    imageLow: _data.default.image,
-    images: _data.default.image,
+    imageLow: _data.defaultData.image,
+    images: _data.defaultData.image,
     backgroundColor: "yellow"
   })).toJSON();
   expect(tree).toMatchSnapshot();

package/dist/components/Molecules/CardDs/CardDs.md

@@ -4,8 +4,7 @@
 
 ### CardDs:  Image, Text & Link
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import { Internal } from '../../Atoms/Icons/index';
 
@@ -21,8 +20,8 @@ import { Internal } from '../../Atoms/Icons/index';
     target="_blank"
     link="/home"
     linkLabel="find out more"
-    imageLow={data.image}
-    images={data.images}
+    imageLow={defaultData.image}
+    images={defaultData.images}
     imageAltText="Happy man going to work"
     backgroundColor="white"
     height="auto"
@@ -39,8 +38,7 @@ import { Internal } from '../../Atoms/Icons/index';
 
 ### CardDs: Text & Link
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import { Download } from '../../Atoms/Icons/index';
 
@@ -70,8 +68,7 @@ import { Download } from '../../Atoms/Icons/index';
 
 ### CardDs: Text only
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 <div
   style={{
@@ -92,8 +89,7 @@ import Link from '../../Atoms/Link/Link';
 
 ### CardDs: Image & Text, No Link
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 import { Internal } from '../../Atoms/Icons/index';
 
@@ -107,8 +103,8 @@ import { Internal } from '../../Atoms/Icons/index';
 >
   <CardDs
     target="_blank"
-    imageLow={data.image}
-    images={data.images}
+    imageLow={defaultData.image}
+    images={defaultData.images}
     imageAltText="Happy man going to work"
     backgroundColor="white"
     height="auto"

package/dist/components/Molecules/CardDs/CardDs.test.js

@@ -10,7 +10,7 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _CardDs = _interopRequireDefault(require("./CardDs"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 var _index = require("../../Atoms/Icons/index");
 
@@ -19,8 +19,8 @@ it('renders correctly', function () {
     target: "_blank",
     link: "/home",
     linkLabel: "Find out more",
-    imageLow: _data.default.image,
-    images: _data.default.images,
+    imageLow: _data.defaultData.image,
+    images: _data.defaultData.images,
     backgroundColor: "white",
     height: "auto",
     icon: /*#__PURE__*/_react.default.createElement(_index.Internal, {

package/dist/components/Molecules/PartnerLink/PartnerLink.md

@@ -1,9 +1,8 @@
 # Partner Link
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Picture from '../../Atoms/Picture/Picture';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Picture from '../../Atoms/Picture/Picture';
 <PartnerLink link="https://www.comicrelief.com">
-  <Picture alt="test Image" imageLow={data.imageLow} images={data.images} />
+  <Picture alt="test Image" imageLow={defaultData.imageLow} images={defaultData.images} />
 </PartnerLink>;
 ```

package/dist/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -12,15 +12,15 @@ var _PartnerLink = _interopRequireDefault(require("./PartnerLink"));
 
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_PartnerLink.default, {
     link: "https://www.comicrelief.com"
   }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: "test Image",
-    imageLow: _data.default.imageLow,
-    images: _data.default.images
+    imageLow: _data.defaultData.imageLow,
+    images: _data.defaultData.images
   }))).toJSON();
   expect(tree).toMatchInlineSnapshot("\n    .c4 {\n      color: #FFFFFF;\n      font-size: 0.6875rem;\n      line-height: 0.6875rem;\n      text-transform: inherit;\n      line-height: normal;\n      font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n    }\n\n    .c2 {\n      display: block;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    .c3 {\n      width: 100%;\n      height: auto;\n      display: block;\n      object-fit: none;\n    }\n\n    .c0 {\n      position: relative;\n      -webkit-text-decoration: none;\n      text-decoration: none;\n      display: inline;\n      line-height: 1.5rem;\n      color: #000000;\n      border-bottom: 2px solid #000000;\n      font-weight: normal;\n    }\n\n    .c0:hover {\n      color: #000000;\n      border-bottom: 2px solid #000000;\n    }\n\n    .c6 {\n      border: 0;\n      -webkit-clip: rect(0 0 0 0);\n      clip: rect(0 0 0 0);\n      -webkit-clip-path: inset(50%);\n      clip-path: inset(50%);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      white-space: nowrap;\n      width: 1px;\n      height: auto;\n    }\n\n    .c1 {\n      display: block;\n      position: relative;\n      padding: 0;\n      border: none;\n    }\n\n    .c1:hover,\n    .c1:focus {\n      border: none;\n    }\n\n    .c1:hover .c5,\n    .c1:focus .c5 {\n      overflow: inherit;\n      -webkit-clip-path: none;\n      clip-path: none;\n      margin: 0;\n      text-align: center;\n      -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n      transform: translateY(-50%);\n      -webkit-clip: auto;\n      clip: auto;\n      top: 50%;\n      left: 0;\n      width: 100%;\n      z-index: 2;\n    }\n\n    .c1:hover::after,\n    .c1:focus::after {\n      content: '';\n      position: absolute;\n      display: block;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #E52630;\n    }\n\n    @media (min-width:740px) {\n      .c6 {\n        font-size: 1rem;\n      }\n    }\n\n    <a\n      className=\"c0 c1\"\n      color=\"red\"\n      href=\"https://www.comicrelief.com\"\n      target=\"_self\"\n      type=\"standard\"\n    >\n      <div\n        className=\"c2 lazyload\"\n        height=\"auto\"\n        width=\"100%\"\n      >\n        <img\n          alt=\"test Image\"\n          className=\"c3 lazyload\"\n          data-lowsrc=\"http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100\"\n          data-sizes=\"auto\"\n          data-src={null}\n          data-srcset=\"//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w\"\n          height=\"auto\"\n          src={null}\n          srcSet=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n          width=\"100%\"\n        />\n      </div>\n      <span\n        className=\"c4 c5 c6\"\n        color=\"white\"\n        size=\"xxs\"\n      >\n        Find out more\n      </span>\n    </a>\n  ");
 });

package/dist/components/Molecules/Promo/Promo.md

@@ -1,8 +1,7 @@
 Promo
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <div>
@@ -11,9 +10,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}
@@ -47,9 +46,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}
@@ -83,9 +82,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}
@@ -119,9 +118,9 @@ import Link from '../../Atoms/Link/Link';
 </Text>
 <Promo
   backgroundColor="blue_dark"
-  imageSet={data.promoImage}
-  image={data.promoImage}
-  imageLow={data.promoImage}
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
   imageAltText=""
   copyFirst={true}
   hasOverlay={true}

package/dist/components/Molecules/Promo/Promo.test.js

@@ -14,13 +14,13 @@ var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
 
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 
-var data = require('../../../styleguide/data/data').default;
+var defaultData = require('../../../styleguide/data/data').defaultData;
 
 it('renders Promo correctly', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Promo.default, {
     backgroundColor: "blue_dark",
-    imageSet: data.promoImage,
-    image: data.promoImage,
+    imageSet: defaultData.promoImage,
+    image: defaultData.promoImage,
     imageAltText: "",
     copyFirst: false
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -43,8 +43,8 @@ it('renders Promo correctly', function () {
 it('renders Promo correctly end position', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Promo.default, {
     backgroundColor: "blue_dark",
-    imageSet: data.promoImage,
-    image: data.promoImage,
+    imageSet: defaultData.promoImage,
+    image: defaultData.promoImage,
     imageAltText: "",
     copyFirst: false,
     position: "end"

package/dist/components/Molecules/SearchResult/SearchResult.md

@@ -1,12 +1,11 @@
 ### Minimalist
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   title="News article"
   alt="Image's description"
 />;
@@ -15,12 +14,11 @@ const data = require('../../../styleguide/data/data').default;
 ### With copy
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   title="News article"
   copy="News article copy"
   alt="Image's description"
@@ -30,12 +28,11 @@ const data = require('../../../styleguide/data/data').default;
 ### With date
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   date="01 July 2019"
   title="News article"
   alt="Image's description"
@@ -45,12 +42,11 @@ const data = require('../../../styleguide/data/data').default;
 ### With date and type
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SearchResult
   href="/test"
-  imageLow={data.imageLow}
-  images={data.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   date="01 July 2019"
   type="article"
   title="News article"

package/dist/components/Molecules/SearchResult/SearchResult.test.js

@@ -10,12 +10,12 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _SearchResult = _interopRequireDefault(require("./SearchResult"));
 
-var _data = _interopRequireDefault(require("../../../styleguide/data/data"));
+var _data = require("../../../styleguide/data/data");
 
 it('renders correctly in minimalist form', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SearchResult.default, {
     href: "/test",
-    image: _data.default.image,
+    image: _data.defaultData.image,
     title: "News article",
     alt: "Image's description"
   })).toJSON();
@@ -24,7 +24,7 @@ it('renders correctly in minimalist form', function () {
 it('renders correctly with copy', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SearchResult.default, {
     href: "/test",
-    image: _data.default.image,
+    image: _data.defaultData.image,
     title: "News article",
     copy: "News article copy",
     alt: "Image's description"
@@ -34,7 +34,7 @@ it('renders correctly with copy', function () {
 it('renders correctly with date', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SearchResult.default, {
     href: "/test",
-    image: _data.default.image,
+    image: _data.defaultData.image,
     date: "01 July 2019",
     title: "News article",
     alt: "Image's description"
@@ -44,7 +44,7 @@ it('renders correctly with date', function () {
 it('renders correctly with date and type', function () {
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_SearchResult.default, {
     href: "/test",
-    image: _data.default.image,
+    image: _data.defaultData.image,
     date: "01 July 2019",
     type: "article",
     title: "News article",

package/dist/components/Molecules/SingleMessage/SingleMessage.md

@@ -1,14 +1,13 @@
 Single Message
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
 >
@@ -29,14 +28,13 @@ import Link from '../../Atoms/Link/Link';
 Single Message fullImage
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   fullImage={true}
@@ -59,14 +57,13 @@ import Link from '../../Atoms/Link/Link';
 Single Message fullImage no copy
 
 ```js
-const data = require('../../../styleguide/data/data').default;
-import Text from '../../Atoms/Text/Text';
+const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
 import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple_dark"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   fullImage={true}
@@ -91,13 +88,12 @@ Single Message vertical height 100%
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple_dark"
-  imageLow={data.imageLow}
-  imageSet={data.images}
-  image={data.image}
+  imageLow={defaultData.imageLow}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   vhFull
 >
@@ -112,16 +108,15 @@ Single Message double image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="yellow"
-  imageLow={data.imageLow}
-  imageSet={data.images}
-  image={data.image}
+  imageLow={defaultData.imageLow}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
-  imageSet2={data.images}
-  image2={data.image}
+  imageSet2={defaultData.images}
+  image2={defaultData.image}
   imageAltText2=""
 >
   <Text tag="p" color="black" size="xxl">
@@ -135,12 +130,11 @@ Single Message with 16:9 video
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"
@@ -154,12 +148,11 @@ const data = require('../../../styleguide/data/data').default;
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={false}
   videoID="WUgvvPRH7Oc"
@@ -175,12 +168,11 @@ Single Message with portrait video
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="FoMlSB6ftQg"
@@ -195,12 +187,11 @@ Single Message with portrait video, 100VH
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="fwCQRMlKBnA"
@@ -216,12 +207,11 @@ Single Message with landscape video, 100VH, fullwidth image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"
@@ -239,12 +229,11 @@ Single Message with landscape video, 50VH, fullwidth image
 
 ```js
 import Text from '../../Atoms/Text/Text';
-const data = require('../../../styleguide/data/data').default;
-
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.images}
-  image={data.image}
+  imageSet={defaultData.images}
+  image={defaultData.image}
   imageAltText=""
   copyFirst={true}
   videoID="WUgvvPRH7Oc"