@@ -5,12 +5,7 @@ import { sizes } from '../styles/variables'
55import Pattern from '../resources/pattern-2.jpg'
66import IconTick from '../resources/icon-tick-2.svg'
77
8- const Styled = styled . div < {
9- direction ?: string
10- flexDirectionColumnForImgContainer ?: boolean
11- opposite ?: boolean
12- hasFigFootnote ?: boolean
13- } > `
8+ const Styled = styled . div < any > `
149 display: flex;
1510 justify-content: space-between;
1611 position: relative;
@@ -43,7 +38,7 @@ const Styled = styled.div<{
4338
4439 &:nth-of-type(2n) {
4540 @media (min-width: 1141px) {
46- flex-direction: ${ ( { opposite } ) => ( opposite ? 'reverse ' : 'row-reverse' ) } ;
41+ flex-direction: ${ ( { opposite } ) => ( opposite ? 'row ' : 'row-reverse' ) } ;
4742 }
4843
4944 @media (min-width: 1141px) {
@@ -130,15 +125,15 @@ const Styled = styled.div<{
130125 }
131126
132127 @media (min-width: 1141px) {
133- padding-right: ${ ( { direction } ) => ( direction === 'right' ? '8rem' : '' ) } ;
134- padding-left: ${ ( { direction } ) => ( ! ( direction === 'right' ) ? '8rem' : '' ) } ;
128+ padding-right: ${ ( props ) => ( props [ "data- direction" ] === 'right' ? '8rem' : '' ) } ;
129+ padding-left: ${ ( props ) => ( ! ( props [ "data- direction" ] === 'right' ) ? '8rem' : '' ) } ;
135130 min-height: 520px;
136131 max-height: 500px;
137132 flex: 0 0 52%;
138133
139134 &::before {
140- left: ${ ( { direction } ) => ( direction === 'right' ? '' : 0 ) } ;
141- right: ${ ( { direction } ) => ( ! ( direction === 'right' ) ? '' : 0 ) } ;
135+ left: ${ ( props ) => ( props [ "data- direction" ] === 'right' ? '' : 0 ) } ;
136+ right: ${ ( props ) => ( ! ( props [ "data- direction" ] === 'right' ) ? '' : 0 ) } ;
142137 width: 60vw;
143138 }
144139 }
@@ -181,7 +176,7 @@ const Styled = styled.div<{
181176
182177 .in-view::before {
183178 @media (min-width: 1141px) {
184- animation: ${ ( { direction } ) => ( direction === 'right' ? 'slideInLeft' : 'slideInRight' ) } 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
179+ animation: ${ ( props ) => ( props [ "data- direction" ] === 'right' ? 'slideInLeft' : 'slideInRight' ) } 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1 normal
185180 forwards;
186181 }
187182 }
@@ -303,7 +298,7 @@ const FeatureCard = ({
303298 return (
304299 < Styled
305300 className = "row"
306- direction = { direction }
301+ data- direction= { direction }
307302 flexDirectionColumnForImgContainer = { featuresList && featuresList . length ? true : false }
308303 opposite = { opposite }
309304 hasFigFootnote = { hasFigFootnote }
0 commit comments