Skip to content

Commit 7411cde

Browse files
gksandergksander
authored
Slide layout tweaks (#1213)
* Move to `children` for quote/big fact * Update api-reference.md
1 parent b3abab6 commit 7411cde

File tree

3 files changed

+43
-36
lines changed

3 files changed

+43
-36
lines changed

‎docs/api-reference.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -428,23 +428,23 @@ A vertically-centered center-aligned statement for if you want to make a stateme
428428
429429
A centered Big Fact layout for if you want to present a fact in a large font.
430430
431-
| Props | Type | Required | Example | Default |
432-
|---------------------------|---------------------------------|----------|------------------------|---------|
433-
| `...slideProps` | [Slide Props](#slide) | ❌ | | |
434-
| `fact` | `string | ReactNode` | ✅ | `100%` | |
435-
| `factInformation` | `string | ReactNode` | ❌ | `Fact information` | |
436-
| `factProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | |
437-
| `factInformationProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | |
438-
| `factFontSize` | `string` | ❌ | `150px` |`250px` |
431+
| Props | Type | Required | Example | Default |
432+
|------------------------|--------------------------------|----------|-----------------------|---------|
433+
| `children` | `ReactNode` | ✅ | `100%` | |
434+
| `...slideProps` | [Slide Props](#slide) | ❌ | | |
435+
| `factInformation` | `ReactNode` | ❌ | `Fact information` | |
436+
| `factProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | |
437+
| `factInformationProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | |
438+
| `factFontSize` | `string` | ❌ | `150px` | `250px` |
439439
440440
### `SlideLayout.Quote`
441441
442442
A vertically-centered Quote layout for if you want to present a quote and attribute it to someone.
443443
444-
| Props | Type | Required | Example |
445-
|-----------------------|---------------------------------|----------|------------------------|
446-
| `...slideProps` | [Slide Props](#slide) | ❌ | |
447-
| `quote` | `string | ReactNode` | ✅ | `To be, or not to be` |
448-
| `attribution` | `string | ReactNode` | ✅ | `William Shakespeare` |
449-
| `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } |
450-
| `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } |
444+
| Props | Type | Required | Example |
445+
|--------------------|--------------------------------|----------|-----------------------|
446+
| `children` | `ReactNode` | ✅ | `To be, or not to be` |
447+
| `...slideProps` | [Slide Props](#slide) | ❌ | |
448+
| `attribution` | `ReactNode` | ✅ | `William Shakespeare` |
449+
| `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } |
450+
| `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } |

‎packages/spectacle/src/components/slide-layout.test.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -196,47 +196,54 @@ describe('SlideLayout', () => {
196196
});
197197

198198
it('SlideLayout.BigFact should render a slide with fact text', () => {
199-
const { getByText } = renderInDeck(<SlideLayout.BigFact fact={'100%'} />);
199+
const { getByText } = renderInDeck(
200+
<SlideLayout.BigFact>100%</SlideLayout.BigFact>
201+
);
200202

201203
expect(getByText('100%')).toBeDefined();
202204
});
203205

204206
it('SlideLayout.BigFact should render a slide with props passed through', () => {
205207
const { getByText } = renderInDeck(
206-
<SlideLayout.BigFact fact={'100%'} factProps={{ fontSize: '88px' }} />
208+
<SlideLayout.BigFact factProps={{ fontSize: '88px' }}>
209+
100%
210+
</SlideLayout.BigFact>
207211
);
208212

209213
expect(getByText('100%')).toHaveStyle({ fontSize: '88px' });
210214
});
211215

212216
it('SlideLayout.BigFact should render a fact with default font size', () => {
213-
const { getByText } = renderInDeck(<SlideLayout.BigFact fact={'100%'} />);
217+
const { getByText } = renderInDeck(
218+
<SlideLayout.BigFact>100%</SlideLayout.BigFact>
219+
);
214220

215221
expect(getByText('100%')).toHaveStyle({ fontSize: '250px' });
216222
});
217223

218224
it('SlideLayout.BigFact should render a fact with customizable font size', () => {
219225
const { getByText } = renderInDeck(
220-
<SlideLayout.BigFact fact={'100%'} factFontSize={'150px'} />
226+
<SlideLayout.BigFact factFontSize={'150px'}>100%</SlideLayout.BigFact>
221227
);
222228

223229
expect(getByText('100%')).toHaveStyle({ fontSize: '150px' });
224230
});
225231

226232
it('SlideLayout.BigFact should render a slide with fact information if it exists', () => {
227233
const { getByText } = renderInDeck(
228-
<SlideLayout.BigFact fact={'100%'} factInformation={'We earned 100%!'} />
234+
<SlideLayout.BigFact factInformation={'We earned 100%!'}>
235+
100%
236+
</SlideLayout.BigFact>
229237
);
230238

231239
expect(getByText('We earned 100%!')).toBeDefined();
232240
});
233241

234242
it('SlideLayout.Quote should render a slide with a quote and attribution text', () => {
235243
const { getByText } = renderInDeck(
236-
<SlideLayout.Quote
237-
quote={'To be, or not to be...'}
238-
attribution={'William Shakespeare'}
239-
/>
244+
<SlideLayout.Quote attribution={'William Shakespeare'}>
245+
To be, or not to be...
246+
</SlideLayout.Quote>
240247
);
241248

242249
expect(getByText('To be, or not to be...')).toBeDefined();
@@ -246,13 +253,14 @@ describe('SlideLayout', () => {
246253
it('SlideLayout.Quote should render a slide with quote and attribution props passed through', () => {
247254
const { getByText } = renderInDeck(
248255
<SlideLayout.Quote
249-
quote={
250-
"I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel."
251-
}
252256
quoteProps={{ fontSize: '68px' }}
253257
attribution={'Maya Angelou'}
254258
attributionProps={{ fontSize: '48px' }}
255-
/>
259+
>
260+
{/* eslint-disable-next-line react/no-unescaped-entities */}
261+
I've learned that people will forget what you said, people will forget
262+
what you did, but people will never forget how you made them feel.
263+
</SlideLayout.Quote>
256264
);
257265

258266
expect(

‎packages/spectacle/src/components/slide-layout.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,13 @@ const Statement = ({
140140
* Big Fact with optional fact information
141141
*/
142142
const BigFact = ({
143-
fact,
143+
children,
144144
factInformation,
145145
factProps,
146146
factFontSize = '250px',
147147
factInformationProps,
148148
...rest
149-
}: Omit<SlideProps, 'children'> & {
150-
fact: string | ReactNode;
149+
}: SlideProps & {
151150
factInformation?: string | ReactNode;
152151
factProps?: ComponentProps<typeof Text>;
153152
factFontSize?: string;
@@ -157,7 +156,7 @@ const BigFact = ({
157156
<FlexBox>
158157
<Box>
159158
<Text textAlign="center" fontSize={factFontSize} {...factProps}>
160-
{fact}
159+
{children}
161160
</Text>
162161
{factInformation ? (
163162
<Text textAlign="center" {...factInformationProps}>
@@ -173,28 +172,28 @@ const BigFact = ({
173172
* Quote layout
174173
*/
175174
const Quote = ({
176-
quote,
175+
children,
177176
quoteProps,
178177
attribution,
179178
attributionProps,
180179
...rest
181-
}: Omit<SlideProps, 'children'> & {
182-
quote: string | ReactNode;
180+
}: SlideProps & {
183181
quoteProps?: ComponentProps<typeof Text>;
184182
attribution: string | ReactNode;
185183
attributionProps?: ComponentProps<typeof Text>;
186184
}) => (
187185
<Slide {...rest}>
188186
<Box width="100%" margin="auto">
189187
<Text fontSize="85px" {...quoteProps}>
190-
{quote}
188+
{children}
191189
</Text>
192190
<Text fontSize="36px" padding={'0em 0em 0em 1em'} {...attributionProps}>
193191
&ndash;{attribution}
194192
</Text>
195193
</Box>
196194
</Slide>
197195
);
196+
198197
/**
199198
* Layouts to consider:
200199
* - Image (left, right, full bleed?)

0 commit comments

Comments
 (0)