Skip to content

Slide layout tweaks #1213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 24, 2022
Merged

Slide layout tweaks #1213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3bca12
Move to `children` for quote/big fact
gksander Aug 23, 2022
0f00d9b
Update api-reference.md
gksander Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions docs/api-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,23 +428,23 @@ A vertically-centered center-aligned statement for if you want to make a stateme

A centered Big Fact layout for if you want to present a fact in a large font.

| Props | Type | Required | Example | Default |
|---------------------------|---------------------------------|----------|------------------------|---------|
| `...slideProps` | [Slide Props](#slide) | ❌ | | |
| `fact` | `string | ReactNode` | ✅ | `100%` | |
| `factInformation` | `string | ReactNode` | ❌ | `Fact information` | |
| `factProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | |
| `factInformationProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | |
| `factFontSize` | `string` | ❌ | `150px` |`250px` |
| Props | Type | Required | Example | Default |
|------------------------|--------------------------------|----------|-----------------------|---------|
| `children` | `ReactNode` | ✅ | `100%` | |
| `...slideProps` | [Slide Props](#slide) | ❌ | | |
| `factInformation` | `ReactNode` | ❌ | `Fact information` | |
| `factProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } | |
| `factInformationProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } | |
| `factFontSize` | `string` | ❌ | `150px` | `250px` |

### `SlideLayout.Quote`

A vertically-centered Quote layout for if you want to present a quote and attribute it to someone.

| Props | Type | Required | Example |
|-----------------------|---------------------------------|----------|------------------------|
| `...slideProps` | [Slide Props](#slide) | ❌ | |
| `quote` | `string | ReactNode` | ✅ | `To be, or not to be` |
| `attribution` | `string | ReactNode` | ✅ | `William Shakespeare` |
| `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } |
| `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } |
| Props | Type | Required | Example |
|--------------------|--------------------------------|----------|-----------------------|
| `children` | `ReactNode` | ✅ | `To be, or not to be` |
| `...slideProps` | [Slide Props](#slide) | ❌ | |
| `attribution` | `ReactNode` | ✅ | `William Shakespeare` |
| `quoteProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "100px" } |
| `attributionProps` | [Text Props](#typography-tags) | ❌ | { fontSize: "48px" } |
34 changes: 21 additions & 13 deletions packages/spectacle/src/components/slide-layout.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,47 +196,54 @@ describe('SlideLayout', () => {
});

it('SlideLayout.BigFact should render a slide with fact text', () => {
const { getByText } = renderInDeck(<SlideLayout.BigFact fact={'100%'} />);
const { getByText } = renderInDeck(
<SlideLayout.BigFact>100%</SlideLayout.BigFact>
);

expect(getByText('100%')).toBeDefined();
});

it('SlideLayout.BigFact should render a slide with props passed through', () => {
const { getByText } = renderInDeck(
<SlideLayout.BigFact fact={'100%'} factProps={{ fontSize: '88px' }} />
<SlideLayout.BigFact factProps={{ fontSize: '88px' }}>
100%
</SlideLayout.BigFact>
);

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

it('SlideLayout.BigFact should render a fact with default font size', () => {
const { getByText } = renderInDeck(<SlideLayout.BigFact fact={'100%'} />);
const { getByText } = renderInDeck(
<SlideLayout.BigFact>100%</SlideLayout.BigFact>
);

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

it('SlideLayout.BigFact should render a fact with customizable font size', () => {
const { getByText } = renderInDeck(
<SlideLayout.BigFact fact={'100%'} factFontSize={'150px'} />
<SlideLayout.BigFact factFontSize={'150px'}>100%</SlideLayout.BigFact>
);

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

it('SlideLayout.BigFact should render a slide with fact information if it exists', () => {
const { getByText } = renderInDeck(
<SlideLayout.BigFact fact={'100%'} factInformation={'We earned 100%!'} />
<SlideLayout.BigFact factInformation={'We earned 100%!'}>
100%
</SlideLayout.BigFact>
);

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

it('SlideLayout.Quote should render a slide with a quote and attribution text', () => {
const { getByText } = renderInDeck(
<SlideLayout.Quote
quote={'To be, or not to be...'}
attribution={'William Shakespeare'}
/>
<SlideLayout.Quote attribution={'William Shakespeare'}>
To be, or not to be...
</SlideLayout.Quote>
);

expect(getByText('To be, or not to be...')).toBeDefined();
Expand All @@ -246,13 +253,14 @@ describe('SlideLayout', () => {
it('SlideLayout.Quote should render a slide with quote and attribution props passed through', () => {
const { getByText } = renderInDeck(
<SlideLayout.Quote
quote={
"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."
}
quoteProps={{ fontSize: '68px' }}
attribution={'Maya Angelou'}
attributionProps={{ fontSize: '48px' }}
/>
>
{/* eslint-disable-next-line react/no-unescaped-entities */}
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.
</SlideLayout.Quote>
);

expect(
Expand Down
15 changes: 7 additions & 8 deletions packages/spectacle/src/components/slide-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,13 @@ const Statement = ({
* Big Fact with optional fact information
*/
const BigFact = ({
fact,
children,
factInformation,
factProps,
factFontSize = '250px',
factInformationProps,
...rest
}: Omit<SlideProps, 'children'> & {
fact: string | ReactNode;
}: SlideProps & {
factInformation?: string | ReactNode;
factProps?: ComponentProps<typeof Text>;
factFontSize?: string;
Expand All @@ -157,7 +156,7 @@ const BigFact = ({
<FlexBox>
<Box>
<Text textAlign="center" fontSize={factFontSize} {...factProps}>
{fact}
{children}
</Text>
{factInformation ? (
<Text textAlign="center" {...factInformationProps}>
Expand All @@ -173,28 +172,28 @@ const BigFact = ({
* Quote layout
*/
const Quote = ({
quote,
children,
quoteProps,
attribution,
attributionProps,
...rest
}: Omit<SlideProps, 'children'> & {
quote: string | ReactNode;
}: SlideProps & {
quoteProps?: ComponentProps<typeof Text>;
attribution: string | ReactNode;
attributionProps?: ComponentProps<typeof Text>;
}) => (
<Slide {...rest}>
<Box width="100%" margin="auto">
<Text fontSize="85px" {...quoteProps}>
{quote}
{children}
</Text>
<Text fontSize="36px" padding={'0em 0em 0em 1em'} {...attributionProps}>
&ndash;{attribution}
</Text>
</Box>
</Slide>
);

/**
* Layouts to consider:
* - Image (left, right, full bleed?)
Expand Down