Skip to content

Commit 70cb7fc

Browse files
kenanyusufkenanyusuf
authored
Add styled-system position and layout functions to components (#1079)
* Add styled-system position and layout functions to components * Update type definitions
1 parent b105a2d commit 70cb7fc

File tree

7 files changed

+75
-47
lines changed

7 files changed

+75
-47
lines changed

‎docs/content/api-reference.md‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -220,13 +220,15 @@ Array values can even be mixed to include sub-arrays (for multiple lines) and nu
220220

221221
_Note that each range will be considered as a step in your current slide's animation. Each range will be highlighted as you move forward or backwards on each step._
222222

223-
| Props | Type | Example | Default Props |
224-
| ----------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------- |
225-
| `children` | PropTypes.string | `let name = "Carlos"` | - |
226-
| `highlightRanges` | PropTypes.arrayOf(PropTypes.number) or PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) | `[1, 3]` or `[[6, 8], [10, 15]]` | - |
227-
| `language` | PropTypes.string | `javascript` | - |
228-
| `theme` | PropTypes.object or | [Prism Theme](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/index.js) | vs-dark Theme Object |
229-
| `showLineNumbers` | PropTypes.bool | `true`, `false` | `true` |
223+
| Props | Type | Example | Default Props |
224+
| ---------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------- |
225+
| `children` | PropTypes.string | `let name = "Carlos"` | - |
226+
| `highlightRanges` | PropTypes.arrayOf(PropTypes.number) or PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)) | `[1, 3]` or `[[6, 8], [10, 15]]` | - |
227+
| `language` | PropTypes.string | `javascript` | - |
228+
| `theme` | PropTypes.object or | [Prism Theme](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/index.js) | vs-dark Theme Object |
229+
| `showLineNumbers` | PropTypes.bool | `true`, `false` | `true` |
230+
| [**`Layout`**](./props#layout) | | | |
231+
| [**`Position`**](./props#position) | | | |
230232

231233
```jsx
232234
import tomorrow from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow';
@@ -250,10 +252,11 @@ import tomorrow from 'react-syntax-highlighter/dist/cjs/styles/prism/tomorrow';
250252

251253
FullScreen is a button that takes the presentation in and out of the browser's full screen mode. It can have a different color and be re-sized.
252254

253-
| Props | Type | Example |
254-
| ------- | ---------------- | --------- |
255-
| `size` | PropTypes.number | `23` |
256-
| `color` | PropTypes.string | `#abc123` |
255+
| Props | Type | Example |
256+
| ---------------------------------- | ---------------- | --------- |
257+
| `size` | PropTypes.number | `23` |
258+
| `color` | PropTypes.string | `#abc123` |
259+
| [**`Position`**](./props#position) | | |
257260

258261
## Image
259262

@@ -269,11 +272,13 @@ Image is a component to display a picture within a slide. It is analogous to an
269272

270273
The Markdown components let you include a block of Markdown within a slide using `<Markdown />`, author a complete slide with Markdown using `<MarkdownSlide />`, or author a series of slides with Markdown using `<MarkdownSlides />`. Markdown tags get converted into Spectacle components. The `---` three dash marker when used inside `<MarkdownSlideSet />` is used to divide content into separate slides. Markdown also supports presenter notes using the `Notes:` marker. `<Markdown />` must be a child of `<Slide />` where `<MarkdownSlide />` and `<MarkdownSlideSet />` are children of `<Deck />`.
271274

272-
| Props | Type | Example |
273-
| ------------------ | ----------------- | ----------------------------------------------------------------------------------- |
274-
| `children` | PropTypes.string | `# Hi there` |
275-
| `componentProps` | PropTypes.object | `<MarkdownSlide componentProps={{ color: 'purple' }}># I'm purple!</MarkdownSlide>` |
276-
| `animateListItems` | PropTypes.boolean | `<MarkdownSlide animateListItems />` |
275+
| Props | Type | Example |
276+
| ---------------------------------- | ----------------- | ----------------------------------------------------------------------------------- |
277+
| `children` | PropTypes.string | `# Hi there` |
278+
| `componentProps` | PropTypes.object | `<MarkdownSlide componentProps={{ color: 'purple' }}># I'm purple!</MarkdownSlide>` |
279+
| `animateListItems` | PropTypes.boolean | `<MarkdownSlide animateListItems />` |
280+
| [**`Layout`**](./props#layout) | | |
281+
| [**`Position`**](./props#position) | | |
277282

278283
```jsx
279284
<Slide>
@@ -337,7 +342,8 @@ Notes is a component that only renders in Presenter mode as presenter notes. It
337342
338343
Progress is a component with no children that just shows dots for each slide in your deck. Visited and current slides are represented by a filled circle and future slides with just a stroke. The size and color are customizable.
339344
340-
| Props | Type | Example |
341-
| ------- | ---------------- | --------- |
342-
| `size` | PropTypes.number | `23` |
343-
| `color` | PropTypes.string | `#abc123` |
345+
| Props | Type | Example |
346+
| ---------------------------------- | ---------------- | --------- |
347+
| `size` | PropTypes.number | `23` |
348+
| `color` | PropTypes.string | `#abc123` |
349+
| [**`Position`**](./props#position) | | |

‎docs/content/props.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const transition = {
8787

8888
## Layout
8989

90-
**Layout** props are used by [`Box`](./api-reference#box), [`FlexBox`](./api-reference#flex-box), [`Grid`](./api-reference#grid), [`Table`](./api-reference#table), [`TableHeader`](./api-reference#table-header), [`TableBody`](./api-reference#table-body), [`TableRow`](./api-reference#table-row), and [`TableCell`](./api-reference#table-cell).
90+
**Layout** props are used by [`Box`](./api-reference#box), [`FlexBox`](./api-reference#flex-box), [`Grid`](./api-reference#grid), [`Table`](./api-reference#table), [`TableHeader`](./api-reference#table-header), [`TableBody`](./api-reference#table-body), [`TableRow`](./api-reference#table-row), [`TableCell`](./api-reference#table-cell), [`CodePane`](./api-reference#code-pane), and [`Markdown`](./api-reference#markdown-components).
9191

9292
| Name | PropType | Description | Example |
9393
| ----------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
@@ -141,7 +141,7 @@ const transition = {
141141

142142
## Position
143143

144-
**Position** props are used by [`Box`](./api-reference#box), [`FlexBox`](./api-reference#flex-box), and [`Grid`](./api-reference#grid).
144+
**Position** props are used by [`Box`](./api-reference#box), [`FlexBox`](./api-reference#flex-box), [`Grid`](./api-reference#grid), [`CodePane`](./api-reference#code-pane), [`FullScreen`](./api-reference#fullscreen), [`Progress`](./api-reference#progress), and [`Markdown`](./api-reference#markdown-components).
145145

146146
| Name | PropType | Description | Example |
147147
| ---------- | ---------------- | ------------------------ | ---------- |

‎index.d.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ declare module 'spectacle' {
9292
stepIndex?: number;
9393
highlightRanges?: number | (number | number[])[];
9494
showLineNumbers?: boolean;
95-
}>;
95+
}> &
96+
StyledSystem.LayoutProps &
97+
StyledSystem.PositionProps;
9698

9799
type TypographyProps = {
98100
children: React.ReactNode;
@@ -149,20 +151,24 @@ declare module 'spectacle' {
149151
export const Progress: React.FC<{
150152
color: string;
151153
size: number;
152-
}>;
154+
}> &
155+
StyledSystem.PositionProps;
153156

154157
export const FullScreen: React.FC<{
155158
color: string;
156159
size: number;
157-
}>;
160+
}> &
161+
StyledSystem.PositionProps;
158162

159163
type MdComponentProps = { [key: string]: any };
160164

161165
export const Markdown: React.FC<{
162166
animateListItems?: boolean;
163167
children: React.ReactNode;
164168
componentProps?: MdComponentProps;
165-
}>;
169+
}> &
170+
StyledSystem.LayoutProps &
171+
StyledSystem.PositionProps;
166172

167173
export const MarkdownSlide: React.FC<{
168174
animateListItems?: boolean;

‎src/components/code-pane.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import propTypes from 'prop-types';
33
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
44
import { useSteps } from '../hooks/use-steps';
55
import indentNormalizer from '../utils/indent-normalizer';
6-
import { ThemeContext } from 'styled-components';
6+
import styled, { ThemeContext } from 'styled-components';
7+
import { compose, layout, position } from 'styled-system';
78
import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/vs-dark';
89

910
const checkForNumberValues = ranges => {
@@ -50,6 +51,8 @@ const getStyleForLineNumber = (lineNumber, activeRange) => {
5051
return { opacity: from <= lineNumber && lineNumber <= to ? 1 : 0.5 };
5152
};
5253

54+
const Container = styled('div')(compose(position, layout));
55+
5356
const CodePane = React.forwardRef(
5457
(
5558
{
@@ -58,7 +61,8 @@ const CodePane = React.forwardRef(
5861
showLineNumbers = true,
5962
children: rawCodeString,
6063
stepIndex,
61-
theme: syntaxTheme = dark
64+
theme: syntaxTheme = dark,
65+
...props
6266
},
6367
ref
6468
) => {
@@ -158,7 +162,7 @@ const CodePane = React.forwardRef(
158162
return (
159163
<>
160164
{placeholder}
161-
<div ref={ref}>
165+
<Container ref={ref} {...props}>
162166
<SyntaxHighlighter
163167
customStyle={customStyle}
164168
language={language}
@@ -170,7 +174,7 @@ const CodePane = React.forwardRef(
170174
>
171175
{children}
172176
</SyntaxHighlighter>
173-
</div>
177+
</Container>
174178
</>
175179
);
176180
}

‎src/components/fullscreen.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
import * as React from 'react';
22
import propTypes from 'prop-types';
33
import styled from 'styled-components';
4+
import { position } from 'styled-system';
45

56
import { useToggleFullScreen } from '../hooks/use-full-screen';
67

7-
const FullScreen = React.forwardRef((props, ref) => {
8-
const Container = styled('div')`
9-
@media print {
10-
display: none;
11-
}
12-
`;
8+
const Container = styled('div')`
9+
${position}
10+
@media print {
11+
display: none;
12+
}
13+
`;
1314

15+
const FullScreen = React.forwardRef(({ size, color, ...props }, ref) => {
1416
const toggleFullScreen = useToggleFullScreen();
1517
return (
1618
<Container
1719
ref={ref}
1820
className="spectacle-fullscreen-button"
1921
onClick={toggleFullScreen}
2022
style={{ pointerEvents: 'all' }}
23+
{...props}
2124
>
22-
<svg width={props.size} height={props.size} viewBox="0 0 512 512">
25+
<svg width={size} height={size} viewBox="0 0 512 512">
2326
<path
24-
fill={props.color}
27+
fill={color}
2528
d={
2629
!!document.fullscreenElement || document.webkitIsFullScreen
2730
? 'M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z'

‎src/components/markdown/markdown.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,16 @@ import remarkRaw from 'rehype-raw';
1515
import rehype2react from 'rehype-react';
1616
import { isValidElementType } from 'react-is';
1717
import { root as mdRoot } from 'mdast-builder';
18+
import styled from 'styled-components';
19+
import { compose, layout, position } from 'styled-system';
1820
import mdxComponentMap from '../../utils/mdx-component-mapper';
1921
import indentNormalizer from '../../utils/indent-normalizer';
2022
import Notes from '../notes';
2123
import { ListItem } from '../../index';
2224
import { Appear } from '../appear';
2325

26+
const Container = styled('div')(compose(position, layout));
27+
2428
export const Markdown = React.forwardRef(
2529
(
2630
{
@@ -30,7 +34,8 @@ export const Markdown = React.forwardRef(
3034
},
3135
children: rawMarkdownText,
3236
animateListItems = false,
33-
componentProps
37+
componentProps,
38+
...props
3439
},
3540
ref
3641
) => {
@@ -151,10 +156,12 @@ export const Markdown = React.forwardRef(
151156
const { children, ...restProps } = templateProps;
152157

153158
return (
154-
<TemplateComponent ref={ref} {...restProps}>
155-
{children}
156-
{noteElements}
157-
</TemplateComponent>
159+
<Container ref={ref} {...props}>
160+
<TemplateComponent {...restProps}>
161+
{children}
162+
{noteElements}
163+
</TemplateComponent>
164+
</Container>
158165
);
159166
}
160167
);

‎src/components/progress.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import propTypes from 'prop-types';
33
import styled from 'styled-components';
4+
import { position } from 'styled-system';
45
import { DeckContext } from './deck/deck';
56

67
export const Circle = styled('div')`
@@ -16,23 +17,24 @@ export const Circle = styled('div')`
1617
`;
1718

1819
const Container = styled('div')`
20+
${position}
1921
@media print {
2022
display: none;
2123
}
2224
`;
2325

24-
const Progress = React.forwardRef((props, ref) => {
26+
const Progress = React.forwardRef(({ size, color, ...props }, ref) => {
2527
const { slideCount, skipTo, activeView } = React.useContext(DeckContext);
2628
return (
27-
<Container ref={ref} className="spectacle-progress-indicator">
29+
<Container ref={ref} className="spectacle-progress-indicator" {...props}>
2830
{Array(slideCount)
2931
.fill(0)
3032
.map((_, idx) => (
3133
<Circle
3234
key={`progress-circle-${idx}`}
33-
color={props.color}
35+
color={color}
3436
active={activeView.slideIndex === idx}
35-
size={props.size}
37+
size={size}
3638
onClick={() =>
3739
skipTo({
3840
slideIndex: idx,

0 commit comments

Comments
 (0)