feat: add simple column view to CardDs Component Library for use in C…

…ardsCarousel (#673) * fix: indentify code needed to enforce column view * feat: setup example * chore: setup all props * feat: add proper code to prop checks * lint * Additional test for good measure --------- Co-authored-by: AndyEPhipps <a.phipps@comicrelief.com>
comicrelief · Oct 4, 2024 · 5aa9233 · 5aa9233
1 parent fe49595
commit 5aa9233
Show file tree

Hide file tree

Showing 5 changed files with 366 additions and 28 deletions.
diff --git a/src/components/Molecules/CardDs/CardDs.js b/src/components/Molecules/CardDs/CardDs.js
@@ -19,10 +19,14 @@ const CardDs = ({
   height = '100%',
   icon = null,
   children,
+  isCarousel,
   ...rest
 }) => {
   const Media = (
-    <Image hasLink={link}>
+    <Image
+      hasLink={link}
+      isCarousel={isCarousel}
+    >
       <Picture
         alt={imageAltText}
         imageLow={imageLow}
@@ -39,6 +43,7 @@ const CardDs = ({
     if (imageLow && link) {
       return (
         <MediaLink
+          isCarousel={isCarousel}
           aria-hidden="true"
           tabIndex="-1"
           href={link}
@@ -59,17 +64,24 @@ const CardDs = ({
   const external = target === 'blank' ? 'noopener' : null;
 
   return (
-    <Container {...rest}>
+    <Container
+      isCarousel={isCarousel}
+      {...rest}
+    >
       {hasMedia()}
       <Copy
+        isCarousel={isCarousel}
         hasImage={imageLow}
         hasLink={link}
         backgroundColor={backgroundColor}
       >
         {children}
       </Copy>
       {link && (
-        <CTA hasImage={imageLow}>
+        <CTA
+          hasImage={imageLow}
+          isCarousel={isCarousel}
+        >
           <Link
             rel={external}
             color="red"
@@ -88,6 +100,7 @@ const CardDs = ({
 };
 
 CardDs.propTypes = {
+  isCarousel: PropTypes.bool,
   backgroundColor: PropTypes.string,
   imageLow: PropTypes.string,
   images: PropTypes.string,

diff --git a/src/components/Molecules/CardDs/CardDs.md b/src/components/Molecules/CardDs/CardDs.md
@@ -1,7 +1,6 @@
 # CardDs
 ## Image and CTA are clickable and links user through to full content
 
-
 ### CardDs:  Image, Text & Link
 ```js
 const defaultData = require('../../../styleguide/data/data').defaultData;import Text from '../../Atoms/Text/Text';
@@ -117,3 +116,38 @@ import { Internal } from '../../Atoms/Icons/index';
   </CardDs>
 </div>;
 ```
+
+
+### CardDs:  only column view for use in CardsCarousel
+```js
+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';
+
+<div
+  style={{
+    display: 'flex',
+    padding: '2rem 0',
+    background: '#E1E2E3',
+    justifyContent: 'space-around'
+  }}
+>
+  <CardDs
+    target="_blank"
+    link="/home"
+    linkLabel="find out more"
+    imageLow={defaultData.image}
+    images={defaultData.images}
+    imageAltText="Happy man going to work"
+    backgroundColor="white"
+    height="auto"
+    icon={<Internal colour="white" />}
+    isCarousel={true}
+  >
+    <Text tag="h3" color="purple" size="xl">
+      Only Column view
+    </Text>
+    <Text tag="p">Text body copy description</Text>
+  </CardDs>
+</div>;
+```
diff --git a/src/components/Molecules/CardDs/CardDs.style.js b/src/components/Molecules/CardDs/CardDs.style.js
@@ -9,9 +9,12 @@ const Container = styled.div`
   height: 100%;
   width: 100%;
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    flex-direction: row;
-  }
+
+  ${({ isCarousel, theme }) => !isCarousel && css`
+    @media ${theme.allBreakpoints('M')} {
+      flex-direction: row;
+    }
+  `};
 
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
     flex-direction: column;
@@ -21,9 +24,12 @@ const Container = styled.div`
 const Image = styled.div`
   height: auto;
   margin: 0 0 0 ${spacing('m')};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    margin: 0 -${spacing('m')} 0 ${spacing('m')};
-  }
+
+  ${({ isCarousel, theme }) => !isCarousel && css`
+    @media ${theme.allBreakpoints('M')} {
+      margin: 0 -${spacing('m')} 0 ${spacing('m')};
+    }
+  `};
 
   img {
     border-radius: ${spacing('md')};
@@ -33,9 +39,13 @@ const Image = styled.div`
 
 const MediaLink = styled.a`
   width: 100%;
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: calc(50% + 6rem);
-  }
+
+  ${({ isCarousel, theme }) => !isCarousel && css`
+    @media ${theme.allBreakpoints('M')} {
+      width: calc(50% + 6rem);
+    }
+  `};
+
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
     width: 100%;
   }
@@ -49,37 +59,45 @@ const Copy = styled.div`
   border-radius: ${spacing('md')};
   box-shadow: 0 0 ${spacing('md')} rgba(0, 0, 0, 0.15);
   background: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
-  // width: 100%;
   margin: 0 ${spacing('m')} 0 0;
+
   @media ${({ theme }) => theme.allBreakpoints('XL')} {
     height: 100%;
   }
+
   ${zIndex('low')};
-  ${({ hasImage }) => hasImage
-    && css`
-      margin-top: calc(-2 * ${spacing('m')});
-      min-height: calc(5 * ${spacing('l')});
-      @media ${({ theme }) => theme.allBreakpoints('M')} {
+
+  ${({ hasImage, isCarousel, theme }) => hasImage && css`
+    margin-top: calc(-2 * ${spacing('m')});
+    min-height: calc(5 * ${spacing('l')});
+
+    ${!isCarousel && css`
+      @media ${theme.allBreakpoints('M')} {
         margin: ${spacing('m')} 0 -${spacing('m')} -${spacing('m')};
         width: calc(50% + 6rem);
       }
-
-      @media ${({ theme }) => theme.allBreakpoints('XL')} {
-        margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
-        width: 100%;
-      }
     `};
+
+    @media ${theme.allBreakpoints('XL')} {
+      margin: calc(-2 * ${spacing('m')}) 0 -${spacing('m')} 0;
+      width: 100%;
+    }
+  `};
 `;
 
 const CTA = styled.div`
   position: absolute;
   right: ${spacing('m')};
   bottom: -${spacing('m')};
+
   ${zIndex('medium')};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
-    ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
-  }
+
+  ${({ isCarousel, theme }) => !isCarousel && css`
+    @media ${theme.allBreakpoints('M')} {
+      bottom: calc(-1 * (${spacing('l')} + ${spacing('md')}));
+      ${({ hasImage }) => !hasImage && `bottom: -${spacing('m')};`};
+    }
+  `};
 `;
 
 export {

diff --git a/src/components/Molecules/CardDs/CardDs.test.js b/src/components/Molecules/CardDs/CardDs.test.js
@@ -22,3 +22,24 @@ it('renders correctly', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders Column view correctly', () => {
+  const tree = renderWithTheme(
+    <CardDs
+      target="_blank"
+      link="/home"
+      linkLabel="find out more"
+      imageLow={defaultData.image}
+      images={defaultData.images}
+      imageAltText="Happy man going to work"
+      backgroundColor="white"
+      height="auto"
+      icon={<Internal colour="white" />}
+      isCarousel={true}
+  >
+    Column view
+  </CardDs>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});