npm - @comicrelief/component-library - Versions diffs - 6.2.0 → 6.3.0 - Mend

@comicrelief/component-library 6.2.0 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (63) hide show

package/src/components/Organisms/Donate/assets/close.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.70694 4.99994L9.85344 0.853438C10.0487 0.658188 10.0487 0.341688 9.85344 0.146437C9.65819 -0.0488125 9.34169 -0.0488125 9.14644 0.146437L4.99994 4.29294L0.853438 0.146437C0.658188 -0.0488125 0.341688 -0.0488125 0.146437 0.146437C-0.0488125 0.341688 -0.0488125 0.658188 0.146437 0.853438L4.29294 4.99994L0.146437 9.14644C-0.0488125 9.34169 -0.0488125 9.65819 0.146437 9.85344C0.244188 9.95119 0.371938 9.99994 0.499938 9.99994C0.627937 9.99994 0.755688 9.95119 0.853438 9.85344L4.99994 5.70694L9.14644 9.85344C9.24419 9.95119 9.37194 9.99994 9.49994 9.99994C9.62794 9.99994 9.75569 9.95119 9.85344 9.85344C10.0487 9.65819 10.0487 9.34169 9.85344 9.14644L5.70694 4.99994Z" fill="#222222"/>
+</svg>

package/src/components/Organisms/Membership/Membership.md CHANGED Viewed

@@ -4,14 +4,14 @@
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <Membership
   alt="Background image"
   backgroundColor="orange_light"
   formAligntRight={true}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"
@@ -26,13 +26,13 @@ const pictures = require('../../../styleguide/data/data').default;
 ```js
 import data from './dev-data/data';
-const pictures = require('../../../styleguide/data/data').default;
+const defaultData = require('../../../styleguide/data/data').defaultData;
 <Membership
   backgroundColor="orange_light"
   formAligntRight={false}
-  imageLow={pictures.imageLow}
-  images={pictures.images}
+  imageLow={defaultData.imageLow}
+  images={defaultData.images}
   data={data}
   mbshipID="mship-1"
   donateLink="https://donation.comicrelief.com/"

package/src/components/Organisms/Membership/Membership.test.js CHANGED Viewed

@@ -1,19 +1,19 @@
-import React from 'react';
-import 'jest-styled-components';
+import React from "react";
+import "jest-styled-components";
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Membership from './Membership';
-import pictures from '../../../styleguide/data/data';
-import data from './dev-data/data';
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Membership from "./Membership";
+import { defaultData } from "../../../styleguide/data/data";
+import data from "./dev-data/data";
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = renderWithTheme(
     <Membership
       alt="Background image"
       backgroundColor="orange_light"
       formAligntRight={false}
-      imageLow={pictures.imageLow}
-      images={pictures.images}
+      imageLow={defaultData.pictures.imageLow}
+      images={defaultData.pictures.images}
       data={data}
       mbshipID="mship-1"
       donateLink="https://donation.comicrelief.com/"
@@ -406,13 +406,8 @@ it('renders correctly', () => {
         <img
           alt="Background image"
           className="c3 lazyload"
-          data-lowsrc="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=100&h=50&q=100"
-          data-sizes="auto"
           data-src={null}
-          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"
           height="100%"
-          src={null}
-          srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
           width="100%"
         />
       </div>

package/src/styleguide/data/data.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export default {
+const defaultData = {
   title: 'What your money does',
   text:
     'When you donate to Comic Relief or Sport Relief, you’re supporting vulnerable people and communities in the UK and internationally.',
@@ -16,3 +16,14 @@ export default {
   images:
     '//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'
 };
+const mobileImages = {
+  imageLow:
+    'http://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=100&h=50&q=100',
+  image:
+    'https://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg',
+  images:
+    '//https://images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/54DHIEgtwbr9TDkf70lToB/ffe8d6a8e9bbc224343f475a5c55c832/-CROP-Promo-Des_2000x945-_Kate.jpg?w=1440&h=1080&q=50 1440w'
+};
+export { defaultData, mobileImages };