fix(flexcol): change align default prop (#39)

ZopaPublic · Jun 21, 2019 · a3b5b68 · a3b5b68
1 parent 02a186f
commit a3b5b68
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 35 deletions.
diff --git a/src/components/layout/FlexCol/FlexCol.tsx b/src/components/layout/FlexCol/FlexCol.tsx
@@ -2,10 +2,13 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import grid from '../../../constants/grid';
 
-export type TAlignSelf = 'flex-start' | 'center' | 'flex-end' | 'stretch';
+export type TAlignSelf = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'auto';
 export type TColWidth = number | 'fill' | 'auto' | 'hidden';
 
 export interface IFlexColProps {
+  /**
+   * @default auto
+   */
   align?: TAlignSelf;
   cols?: number;
   gutter?: number;
@@ -64,16 +67,16 @@ const getWidth = (breakpoint, colWidth, cols) => {
 };
 
 const defaultProps: Partial<IFlexCol> = {
-  align: 'flex-start',
+  align: 'auto',
 };
 
 const StyledFlexCol = styled.div<IFlexCol>`
   position: relative;
   width: 100%;
   min-height: 1px;
-  padding-right: ${props => props.gutter}px;
-  padding-left: ${props => props.gutter}px;
-  align-self: ${props => props.align};
+  padding-right: ${({ gutter }) => gutter}px;
+  padding-left: ${({ gutter }) => gutter}px;
+  align-self: ${({ align }) => align};
   ${props =>
     Object.keys(grid.breakpoints)
       .sort((a, b) => grid.breakpoints[a] - grid.breakpoints[b])

diff --git a/src/components/layout/FlexCol/__snapshots__/FlexCol.test.tsx.snap b/src/components/layout/FlexCol/__snapshots__/FlexCol.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`<FlexCol /> renders a FlexCol component 1`] = `
   min-height: 1px;
   padding-right: px;
   padding-left: px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 <div

diff --git a/src/components/molecules/Help/__snapshots__/Help.test.tsx.snap b/src/components/molecules/Help/__snapshots__/Help.test.tsx.snap
@@ -23,9 +23,9 @@ exports[`<Help /> renders the default Help component with no a11y violations 1`]
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c5 {
@@ -34,9 +34,9 @@ exports[`<Help /> renders the default Help component with no a11y violations 1`]
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c2 {

diff --git a/src/components/molecules/ZopaFooter/Links/__snapshots__/Links.test.tsx.snap b/src/components/molecules/ZopaFooter/Links/__snapshots__/Links.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`<Links /> renders the component 1`] = `
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c7 {
@@ -18,9 +18,9 @@ exports[`<Links /> renders the component 1`] = `
   min-height: 1px;
   padding-right: px;
   padding-left: px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c0 {

diff --git a/src/components/molecules/ZopaFooter/MiscLinks/__snapshots__/MiscLinks.test.tsx.snap b/src/components/molecules/ZopaFooter/MiscLinks/__snapshots__/MiscLinks.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`<MiscLinks /> renders the component 1`] = `
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c0 {

diff --git a/src/components/molecules/ZopaFooter/SocialLinks/__snapshots__/SocialLinks.test.tsx.snap b/src/components/molecules/ZopaFooter/SocialLinks/__snapshots__/SocialLinks.test.tsx.snap
@@ -7,9 +7,9 @@ exports[`<SocialLinks /> renders the component 1`] = `
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c0 {

diff --git a/src/components/molecules/ZopaFooter/__snapshots__/ZopaFooter.test.tsx.snap b/src/components/molecules/ZopaFooter/__snapshots__/ZopaFooter.test.tsx.snap
@@ -123,9 +123,9 @@ exports[`<ZopaFooter /> renders the component with default props 1`] = `
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c9 {
@@ -134,9 +134,9 @@ exports[`<ZopaFooter /> renders the component with default props 1`] = `
   min-height: 1px;
   padding-right: px;
   padding-left: px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c12 {
@@ -145,9 +145,9 @@ exports[`<ZopaFooter /> renders the component with default props 1`] = `
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px;
-  -webkit-align-self: flex-start;
-  -ms-flex-item-align: start;
-  align-self: flex-start;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
 }
 
 .c2 {