@comicrelief/component-library 7.38.0 → 7.39.0

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

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 
 import spacing from '../../../theme/shared/spacing';
-import { media } from '../../../theme/shared/size';
 import checkBoxIcon from './assets/CR_Tick_black.svg';
 import TextInput from './_TextInput';
 
@@ -9,7 +8,7 @@ const OuterWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
-  ${media('small')} {
+  @media ${({ theme }) => theme.allBreakpoints('M')} {
     flex-direction: row;
     flex-wrap: wrap;
   }
@@ -166,7 +165,7 @@ const ExtraInfo = styled.span`
 const MPTextInput = styled(TextInput)`
   input {
     border: 1px solid  ${({ theme }) => theme.color('black')};;
-    ${media('small')} {
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
       max-width: none;
     }
   }

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import Input from '../../Atoms/Input/Input';
 import Text from '../../Atoms/Text/Text';
 import spacing from '../../../theme/shared/spacing';
-import { media } from '../../../theme/shared/size';
 import Picture from '../../Atoms/Picture/Picture';
 
 const Container = styled.div`
@@ -52,7 +51,7 @@ const Wrapper = styled.div`
   text-align: center;
   margin-bottom: 50%;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     margin: 0 ${spacing('xxl')};
     max-width: 420px;
   }
@@ -68,7 +67,7 @@ const FormWrapper = styled.div`
   box-shadow: 0px ${spacing('md')} ${spacing('xl')} rgba(0, 0, 0, 0.3);
   height: 450px;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     height: 430px;
   }
 `;
@@ -139,7 +138,7 @@ const AmountField = styled(Input)`
   font-weight: 400;
   display: block;
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     flex: 0 0 60%;
   }
 
@@ -185,7 +184,7 @@ const Button = styled.button`
     background-color: ${({ theme }) => theme.color('coral_dark')};
   }
 
-  ${media('medium')} {
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
     width: auto;
     padding: ${spacing('md')} ${spacing('l')};
     margin: 0 auto ${spacing('l')};

package/src/index.js

@@ -9,6 +9,7 @@ export { default as zIndex } from './theme/shared/zIndex';
 export { default as allowListed } from './utils/allowListed';
 export { default as spacing } from './theme/shared/spacing';
 export { default as breakpoint } from './theme/shared/breakpoint';
+export { default as allBreakpoints } from './theme/shared/allBreakpoints';
 export { media, screen, container } from './theme/shared/size';
 
 /* Atoms */

package/src/theme/shared/allContainers.js

@@ -0,0 +1,7 @@
+const container = {
+  small: '880px',
+  medium: '1200px',
+  large: '1440px'
+};
+
+export default container;