@comicrelief/component-library 7.37.0 → 7.38.0

package/src/components/Organisms/ImpactSlider/ImpactSlider.style.js

@@ -8,10 +8,10 @@ const OuterWrapper = styled.div`
   background-color: ${props => props.theme.color(`${props.backgroundColour}`)};
   padding: 32px 16px;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: 50px;
   }
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     padding: 64px 0;
   }
 `;
@@ -21,7 +21,7 @@ const InnerWrapper = styled.div`
   max-width: 780px;
   margin: 0 auto;
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     h1 {
       font-size: 48px;
       line-height: 48px;
@@ -31,7 +31,7 @@ const InnerWrapper = styled.div`
 
 const Copy = styled.div`
   position: relative;
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     p {
       font-size: 20px;
       line-height: 24.38px;
@@ -43,7 +43,7 @@ const CurrentAmountCopy = styled(Text)`
   font-weight: bold;
   margin-top: 16px;
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     font-size: 20px;
     line-height: 24.38px;
     margin: 24px 0 38px;
@@ -55,13 +55,13 @@ const SubmitButton = styled(Button)`
   width: 100%;
   font-family: ${({ theme }) => theme.fontFamilies(theme.font.regular)};
   display: block;
-  
-  @media ${({ theme }) => theme.breakpoint('small')} {
+
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     width: 70%;
     margin: 40px auto 0;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 100%;
   }
 `;

package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js

@@ -20,7 +20,7 @@ const TopCopyWrapper = styled.div`
   display: flex;
   width: 100%;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     padding: 10px;
   }
 `;
@@ -42,7 +42,7 @@ const FormField = styled.div`${({ theme }) => css`
   display: flex;
   flex-direction: column;
 
-  @media ${theme.breakpoint('small')} {
+  @media ${theme.allBreakpoints('M')} {
     width: 50%;
     padding: 10px;
   }
@@ -82,7 +82,7 @@ const CheckLabel = styled.label`${({ theme }) => css`
   align-items: center;
   font-size: ${theme.fontSize('xs')};
 
-  @media ${theme.breakpoint('small')} {
+  @media ${theme.allBreakpoints('M')} {
     font-size: ${theme.fontSize('s')};
   }
 `}`;
@@ -108,7 +108,7 @@ const CheckInput = styled.input`
     float: left;
     border-radius: 8px;
 
-    @media ${({ theme }) => theme.breakpoint('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       margin-right: 15px;
     }
   }

package/src/components/Organisms/Membership/Membership.style.js

@@ -12,7 +12,7 @@ const Container = styled.div`
   display: flex;
   justify-content: center;
   min-height: 100vh;
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     align-items: center;
     justify-content: inherit;
     min-height: 750px;
@@ -37,7 +37,7 @@ const BgImage = styled(Picture)`
     height: 100%;
     box-shadow: inset 0px ${spacing('xl')} ${spacing('l')} -${spacing('l')};
   }
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     height: 100%;
 
     :before {

package/src/components/Organisms/WYMDCarousel/WYMDCarousel.style.js

@@ -34,7 +34,7 @@ const ImageWrapper = styled.div`
     border-bottom: 2px dashed #89888b;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: 50%;
     padding: 9%;
     &:after {
@@ -46,12 +46,12 @@ const ImageWrapper = styled.div`
 
 const AmountWrapper = styled.div`
   padding: ${spacing('m')} 0 0.75rem;
-  
+
   h1 {
     font-size: 34px;
     line-height: 37px;
-    
-    @media ${({ theme }) => theme.breakpoint('small')} {
+
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       font-size: 40px;
       line-height: 40px;
     }
@@ -72,7 +72,7 @@ const CopyWrapper = styled.div`
 const Heading = styled(Text)`
   width: 75%;
   margin: 0 auto;
-  
+
   // To override pre-existing first-child rule
   &:first-child {
     margin-bottom: ${spacing('l')};
@@ -80,7 +80,7 @@ const Heading = styled(Text)`
     font-size: 16px;
     line-height: 19.5px;
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       font-size: 20px;
       line-height: 24.38px;
     }
@@ -93,12 +93,12 @@ const PeopleHelpedText = styled(Text)`
   font-size: 34px;
   line-height: 37px;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     font-size: 60px;
     line-height: 60px;
   }
 
-  @media ${({ theme }) => theme.breakpoint('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     font-size: 64px;
     line-height: 68px;
   }
@@ -110,7 +110,7 @@ const Including = styled(Text)`
   font-size: 12px;
   line-height: 14.63px;
 
-  @media ${({ theme }) => theme.breakpoint('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     font-size: 17px;
     line-height: 19px;
   }
@@ -123,7 +123,7 @@ const CarouselWrapper = styled.div`
   max-width: 760px;
   padding:  ${spacing('l')};
   margin: 0 auto;
-  
+
   border-radius: 20px;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
 
@@ -132,10 +132,10 @@ const CarouselWrapper = styled.div`
     margin: 0 auto;
     padding-top: ${spacing('l')};
 
-    @media ${({ theme }) => theme.breakpoint('medium')} {
+    @media ${({ theme }) => theme.allBreakpoints('L')} {
       padding-top: ${spacing('l')};
     }
-  
+
     button.carousel__back-button,
     button.carousel__next-button {
       position: absolute;
@@ -148,7 +148,7 @@ const CarouselWrapper = styled.div`
       text-indent: -9999px;
       background-color: transparent;
       border: none;
-        
+
       &:after {
         content: "";
         position: absolute;
@@ -167,18 +167,18 @@ const CarouselWrapper = styled.div`
         }
       }
 
-      @media ${({ theme }) => theme.breakpoint('small')} {
+      @media ${({ theme }) => theme.allBreakpoints('M')} {
         width: 33.3% !important;
         &:after {
           width: 100%;
         }
       }
     }
-      
+
     button.carousel__next-button {
       left: auto;
       right: 0;
-      
+
       &:before {
         transform: translate(0, -50%) rotate(-90deg);
       }
@@ -190,7 +190,7 @@ const CarouselWrapper = styled.div`
         rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
       }
     }
-      
+
     .wymd-carousel {
       // Override default animations
       transition: -webkit-transform ${animationSpeed}s;
@@ -204,13 +204,13 @@ const CarouselWrapper = styled.div`
           content: none;
         }
       }
-      
+
       .carousel__slide {
         // 'Mobile'
         padding-bottom: ${props => props.mobileHeight}px !important;
 
         // 'Tablet' (and up) tweaks for the 3-visible layout
-        @media ${({ theme }) => theme.breakpoint('small')} {
+        @media ${({ theme }) => theme.allBreakpoints('M')} {
 
           padding-bottom: ${props => props.tabletHeight}px !important;
 
@@ -221,7 +221,7 @@ const CarouselWrapper = styled.div`
             > div:first-child {
               transition: transform ${animationSpeed}s ease;
               transform: scale(0.5);
-              
+
               &:after {
                 transition: transform ${animationSpeed}s ease,
                 width ${animationSpeed}s ease,
@@ -288,7 +288,7 @@ const CarouselWrapper = styled.div`
         }
 
         // 'Desktop'
-        @media ${({ theme }) => theme.breakpoint('medium')} {
+        @media ${({ theme }) => theme.allBreakpoints('L')} {
           padding-bottom: ${props => props.desktopHeight}px !important;
 
           // First

package/src/theme/crTheme/theme.js

@@ -3,6 +3,7 @@ import buttonColors from './buttonColors';
 import linkStyles from './linkStyles';
 import fontSize from './fontSizes';
 import breakpoint from '../shared/breakpoint';
+import allBreakpoints from '../shared/allBreakpoints';
 import fontFamilies from '../shared/fontFamilies';
 
 export default {
@@ -11,6 +12,7 @@ export default {
   linkStyles,
   fontSize,
   breakpoint,
+  allBreakpoints,
   fontFamilies,
   font: {
     regular: 'Montserrat',

package/src/theme/shared/allBreakpoints.js

@@ -0,0 +1,14 @@
+export const sizes = {
+  S: 0,
+  M: 740,
+  L: 1024,
+  Nav: 1150,
+  XL: 1440
+};
+
+export default size => {
+  if (size) {
+    return `(min-width: ${sizes[size]}px)`;
+  }
+  return 'inherit';
+};