Skip to content

Commit f406a8c

Browse files
curlyfriespleasecurlyfriesplease
committed
Merge branch 'master' into ENG-5005-video-banner-bugs
2 parents f633ae1 + 839a135 commit f406a8c

15 files changed

Lines changed: 2712 additions & 274 deletions

File tree

‎src/components/Atoms/AmbientVideo/AmbientVideo.style.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
import styled from 'styled-components';
1+
import styled, { keyframes } from 'styled-components';
22

33
import { breakpointValues } from '../../../theme/shared/allBreakpoints';
44
import zIndex from '../../../theme/shared/zIndex';
55

66
const mobileMaxWidth = breakpointValues.L - 1;
77

8+
// This is so that the button is initially visible, then afterwards
9+
// it's only seen again on hover
10+
const playPauseIntro = keyframes`
11+
0%,
12+
93.75% {
13+
opacity: 0.8;
14+
}
15+
100% {
16+
opacity: 0;
17+
}
18+
`;
19+
820
const Wrapper = styled.div`
921
width: 100%;
1022
height: 100%;
@@ -81,7 +93,9 @@ const PlayPauseButton = styled.button`
8193
align-items: center;
8294
justify-content: center;
8395
opacity: 0;
84-
transition: opacity 0.2s ease 2s;
96+
animation: ${playPauseIntro} 3s ease;
97+
transition: opacity 0.2s ease 3s;
98+
${zIndex('high')};
8599
86100
// Play icon is shifted to the right slightly as it
87101
// doesn't look quite right when centered normally

‎src/components/Atoms/ButtonWithStates/ButtonWithStates.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const ButtonWithStates = React.forwardRef(({
4949
});
5050

5151
ButtonWithStates.propTypes = {
52-
children: PropTypes.node.isRequired,
52+
children: PropTypes.node,
5353
loadingText: PropTypes.string,
5454
loading: PropTypes.bool,
5555
disabled: PropTypes.bool

‎src/components/Atoms/ButtonWithStates/ButtonWithStates.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,14 @@ import ButtonWithStates from './ButtonWithStates';
1010
>
1111
Enter prize draw
1212
</ButtonWithStates>
13-
```
13+
```
14+
15+
## Optional prop `children`
16+
17+
`children` is an optional prop, this example demonstrates the button will not error without any provided.
18+
19+
```js
20+
import ButtonWithStates from './ButtonWithStates';
21+
22+
<ButtonWithStates type="submit" loading loadingText="Submitting…" />
23+
```

‎src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,10 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
6262
-ms-flex-pack: center;
6363
justify-content: center;
6464
opacity: 0;
65-
-webkit-transition: opacity 0.2s ease 2s;
66-
transition: opacity 0.2s ease 2s;
65+
-webkit-animation: diKSqD 3s ease;
66+
animation: diKSqD 3s ease;
67+
-webkit-transition: opacity 0.2s ease 3s;
68+
transition: opacity 0.2s ease 3s;
6769
z-index: 3;
6870
}
6971

‎src/components/Organisms/RichtextCarousel/RichtextCarousel.js‎

Lines changed: 82 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,26 @@ import {
77
} from 'pure-react-carousel';
88
import 'pure-react-carousel/dist/react-carousel.es.css';
99
import {
10-
CarouselWrapper, SlideCopyWrapper, HeadingCopyWrapper
10+
CarouselWrapper, SlideCopyWrapper, HeadingCopyWrapper, Container
1111
} from './RichtextCarousel.style';
1212
import { breakpointValues } from '../../../theme/shared/allBreakpoints';
1313

1414
const RichtextCarousel = ({
1515
data: {
16-
contentful_id: thisID,
1716
autoPlay,
18-
nodes,
17+
contentful_id: thisID,
1918
headingCopy,
19+
nodes,
2020
// Set some defaults for good measure:
21+
carouselBackgroundColour = 'white',
22+
desktopHeight = 350,
2123
mobileHeight = 300,
2224
tabletHeight = 350,
23-
desktopHeight = 350,
24-
carouselBackgroundColour = 'white',
2525
nodeBackgroundColour = 'white',
26-
nodeOutlineColour = 'grey'
26+
nodeOutlineColour = 'grey',
27+
paddingBottom = '2rem',
28+
paddingTop = '2rem',
29+
rowBackgroundColour = 'grey_light'
2730
}
2831
}) => {
2932
// Defaults to mobile config:
@@ -67,84 +70,92 @@ const RichtextCarousel = ({
6770
}
6871

6972
return (
70-
<CarouselWrapper
71-
className="CarouselWrapper"
72-
id={thisID}
73-
mobileHeight={mobileHeight}
74-
tabletHeight={tabletHeight}
75-
desktopHeight={desktopHeight}
76-
carouselBackgroundColour={carouselBackgroundColour}
73+
<Container
74+
paddingTop={paddingTop}
75+
paddingBottom={paddingBottom}
76+
rowBackgroundColour={rowBackgroundColour}
7777
>
7878

79-
<HeadingCopyWrapper>
80-
{headingCopy}
81-
</HeadingCopyWrapper>
82-
83-
{theseItems && (
84-
<CarouselProvider
85-
naturalSlideWidth={50}
86-
naturalSlideHeight={200}
87-
totalSlides={totalSlides}
88-
isPlaying={autoPlay}
89-
interval={5000}
90-
visibleSlides={visibleSlides}
91-
infinite
79+
<CarouselWrapper
80+
className="CarouselWrapper"
81+
id={thisID}
82+
mobileHeight={mobileHeight}
83+
tabletHeight={tabletHeight}
84+
desktopHeight={desktopHeight}
85+
carouselBackgroundColour={carouselBackgroundColour}
9286
>
93-
<Slider classNameAnimation="richtext-carousel">
94-
95-
{/* Dummy slide for our desired non-mobile layout and functionality */}
96-
{isMobile === false && (
97-
<Slide index={0} key={0} />
98-
)}
9987

100-
{Object.keys(theseItems).map((key, index) => {
88+
<HeadingCopyWrapper>
89+
{headingCopy}
90+
</HeadingCopyWrapper>
91+
92+
{theseItems && (
93+
<CarouselProvider
94+
naturalSlideWidth={50}
95+
naturalSlideHeight={200}
96+
totalSlides={totalSlides}
97+
isPlaying={autoPlay}
98+
interval={5000}
99+
visibleSlides={visibleSlides}
100+
infinite
101+
>
102+
<Slider classNameAnimation="richtext-carousel">
103+
104+
{/* Dummy slide for our desired non-mobile layout and functionality */}
105+
{isMobile === false && (
106+
<Slide index={0} key={0} />
107+
)}
108+
109+
{Object.keys(theseItems).map((key, index) => {
101110
// Reflect that initial dummy/bookend slide shown on non-mobile/tablet views:
102-
const thisOffsetIndex = index + (isMobile ? 0 : 1);
111+
const thisOffsetIndex = index + (isMobile ? 0 : 1);
103112

104-
return (
113+
return (
105114
// Calculate the index offset accordingly to reflect the number of slides,
106115
// but use the REAL index when determining if its the last REAL slide
107-
<Slide
108-
index={thisOffsetIndex}
109-
className={index === (theseItems.length - 1) && 'last-slide'}
110-
key={thisOffsetIndex}
111-
>
112-
113-
<SlideCopyWrapper
114-
className="slide-copy-wrapper"
115-
mobileHeight={mobileHeight}
116-
tabletHeight={tabletHeight}
117-
desktopHeight={desktopHeight}
118-
nodeBackgroundColour={nodeBackgroundColour}
119-
nodeOutlineColour={nodeOutlineColour}
116+
<Slide
117+
index={thisOffsetIndex}
118+
className={index === (theseItems.length - 1) && 'last-slide'}
119+
key={thisOffsetIndex}
120120
>
121-
{theseItems[index].copy}
122-
</SlideCopyWrapper>
123-
124-
</Slide>
125-
);
126-
})}
127-
128-
{/* Dummy slide for our desired non-mobile layout and functionality */}
129-
{isMobile === false && (
130-
<Slide index={theseItems.length + 1} key="bookend-last" />
131-
)}
132121

133-
</Slider>
134-
<ButtonBack>Back</ButtonBack>
135-
<ButtonNext>Next</ButtonNext>
136-
</CarouselProvider>
137-
)}
122+
<SlideCopyWrapper
123+
className="slide-copy-wrapper"
124+
mobileHeight={mobileHeight}
125+
tabletHeight={tabletHeight}
126+
desktopHeight={desktopHeight}
127+
nodeBackgroundColour={nodeBackgroundColour}
128+
nodeOutlineColour={nodeOutlineColour}
129+
>
130+
{theseItems[index].copy}
131+
</SlideCopyWrapper>
132+
133+
</Slide>
134+
);
135+
})}
136+
137+
{/* Dummy slide for our desired non-mobile layout and functionality */}
138+
{isMobile === false && (
139+
<Slide index={theseItems.length + 1} key="bookend-last" />
140+
)}
141+
142+
</Slider>
143+
<ButtonBack>Back</ButtonBack>
144+
<ButtonNext>Next</ButtonNext>
145+
</CarouselProvider>
146+
)}
147+
148+
</CarouselWrapper>
149+
</Container>
138150

139-
</CarouselWrapper>
140151
);
141152
};
142153

143154
RichtextCarousel.propTypes = {
144155
data: PropTypes.shape({
145-
headingCopy: PropTypes.string.isRequired,
156+
headingCopy: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
146157
nodes: PropTypes.arrayOf(PropTypes.shape({
147-
copy: PropTypes.string.isRequired
158+
copy: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
148159
})).isRequired,
149160
autoPlay: PropTypes.bool.isRequired,
150161
contentful_id: PropTypes.string.isRequired,
@@ -153,7 +164,10 @@ RichtextCarousel.propTypes = {
153164
desktopHeight: PropTypes.number,
154165
carouselBackgroundColour: PropTypes.string,
155166
nodeBackgroundColour: PropTypes.string,
156-
nodeOutlineColour: PropTypes.string
167+
nodeOutlineColour: PropTypes.string,
168+
paddingTop: PropTypes.string,
169+
paddingBottom: PropTypes.string,
170+
rowBackgroundColour: PropTypes.string
157171
}).isRequired
158172
};
159173

‎src/components/Organisms/RichtextCarousel/RichtextCarousel.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,23 @@ const { RichtextCarouselItems } = require('../../../styleguide/data/data');
55

66
<div>
77
<h2 style={{textAlign: 'center'}}>
8-
Richtext Carousel #1
8+
Richtext Carousel #1 (default padding)
99
</h2>
1010
<RichtextCarousel
1111
data={RichtextCarouselItems}/>
1212
</div>
1313

14+
```
15+
16+
```js
17+
const { RichtextCarouselItemsWithPadding } = require('../../../styleguide/data/data');
18+
19+
<div>
20+
<h2 style={{textAlign: 'center'}}>
21+
Richtext Carousel #2 (custom padding)
22+
</h2>
23+
<RichtextCarousel
24+
data={RichtextCarouselItemsWithPadding}/>
25+
</div>
26+
1427
```

‎src/components/Organisms/RichtextCarousel/RichtextCarousel.style.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,12 @@ const CarouselWrapper = styled.div`
242242
}
243243
`;
244244

245+
const Container = styled.div`
246+
background-color: ${({ theme, rowBackgroundColour }) => theme.color(rowBackgroundColour)};
247+
padding: ${({ paddingTop, paddingBottom }) => `${paddingTop} 0 ${paddingBottom}`};
248+
`;
249+
245250
export {
246251
CarouselWrapper, SlideCopyWrapper,
247-
HeadingCopyWrapper
252+
HeadingCopyWrapper, Container
248253
};

0 commit comments

Comments
 (0)