add RowAlignLeft Component

Author: thorrellt

components/containers/Row/index.js

@@ -1,9 +1,9 @@
 import S from './styles';
 
-export default function Row({ customClass, children, styles }) {
-  return (
-    <S.Row $alignment={customClass} style={styles}>
-      {children}
-    </S.Row>
-  );
+export function Row({ customClass, children, styles }) {
+  return <S.Row style={styles}>{children}</S.Row>;
+}
+
+export function RowAlignLeft({ customClass, children, styles }) {
+  return <S.RowAlignLeft style={styles}>{children}</S.RowAlignLeft>;
 }

components/containers/Row/styles.js

@@ -9,13 +9,12 @@ const Row = styled.div`
   ${m.desktopBreakpointMinus(css`
     justify-content: space-between;
   `)}
-
-  //check props to inject alignment css
-  ${props => (props.$alignment === 'align__left' ? AlignLeft : '')}
 `;
 
-const AlignLeft = css`
-  justify-content: left !important;
+const RowAlignLeft = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
 `;
 
-export default { Row };
+export default { Row, RowAlignLeft };

pages/about.js

@@ -10,7 +10,7 @@ import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoa
 import Title from '@/components/snippets/Title';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
-import Row from '@/components/containers/Row';
+import { Row, RowAlignLeft } from '@/components/containers/Row';
 import Member from '@/components/containers/Member';
 import { whoWeAre } from '@/utils/about';
 
@@ -233,7 +233,7 @@ export default function AboutUs() {
         <Wrapper customClass='primary__accent'>
           <Container>
             <Title title='Who we are' />
-            <Row customClass='align__left'>
+            <RowAlignLeft>
               {whoWeAre.map(_ => {
                 return (
                   <Member
@@ -248,7 +248,7 @@ export default function AboutUs() {
                   />
                 );
               })}
-            </Row>
+            </RowAlignLeft>
           </Container>
         </Wrapper>
       </RevealContentContainer>