Skip to content

Commit 494c8b7

Browse files
cpreslercpresler
authored
Brand updates (#1330)
Co-authored-by: Christy Presler <[email protected]>
1 parent 638c808 commit 494c8b7

30 files changed

+5112
-2451
lines changed

‎README.md

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
<p align="center">
2-
<a href="https://formidable.com/open-source/" target="_blank">
3-
<img alt="Spectacle — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/spectacle/main/Spectacle-Hero.png" />
4-
</a>
5-
</p>
1+
[![Spectacle](https://oss.nearform.com/api/banner?badge=spectacle&bg=fc6986)](https://commerce.nearform.com/open-source/spectacle/)
2+
63
<p align="center">
74
<strong>✨ A ReactJS based Presentation Library ✨</strong>
85
<br><br>

‎docs/api-reference.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ These tags are for displaying textual content.
6565
| **`CodeSpan`** | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography) | — | **fontFamily**: monospace<br />**fontSize**: text |
6666

6767

68-
## Templates 🆕
68+
## Templates
6969

7070
Templates are overlays that are present on every slide. Typically, they contain controls and deck progress. Spectacle contains a default template, shown below, ready to use that contains the full screen control and the animated progress dots. `<DefaultTemplate />` also supports customizing the color using the prop `color` and CSS color values such as `purple` or `#fff`.
7171

‎docs/index.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ Spectacle is a React-based library for creating sleek presentations using React
6262
export default App;
6363
```
6464

65-
:::info
65+
\:\:\:info
6666

6767
If you are using NextJS with App Router, Spectacle needs to be rendered inside a client component. You can read more about this [here](https://nextjs.org/docs/app/building-your-application/rendering/client-components).
6868

69-
:::
69+
\:\:\:
7070

7171

7272
</TabItem>

‎docs/props.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const transition = {
4444

4545
## Color
4646

47-
**Color** props are used by [`CodeSpan`](./api-reference.md#code-span), [`Text`](./api-reference.md#text), [`Link`](./api-reference.md#link), [`Heading`](./api-reference.md#heading), [`Quote`](./api-reference.md#quote), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`UnorderedList`](./api-reference.md#unordered-list), [`OrderedList`](./api-reference.md#ordered-list), and [`ListItem`](./api-reference.md#list-item).
47+
**Color** props are used by [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).
4848

4949
| Name | PropType | Description | Example |
5050
| ------------------------- | ---------------- | ------------------------------------------------------- | ------------------------ |
@@ -53,7 +53,7 @@ const transition = {
5353

5454
## Space
5555

56-
**Space** props used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`CodeSpan`](./api-reference.md#code-span), [`Text`](./api-reference.md#text), [`Link`](./api-reference.md#link), [`Heading`](./api-reference.md#heading), [`Quote`](./api-reference.md#quote), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`UnorderedList`](./api-reference.md#unordered-list), [`OrderedList`](./api-reference.md#ordered-list), and [`ListItem`](./api-reference.md#list-item).
56+
**Space** props used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).
5757

5858
| Name | PropType | Description | Example |
5959
| ----------------------- | ---------------- | ----------------------------------------------------------------------- | ----------------------------------- |
@@ -74,21 +74,21 @@ const transition = {
7474

7575
## Typography
7676

77-
**Typography** props are used by [`CodeSpan`](./api-reference.md#code-span), [`Text`](./api-reference.md#text), [`Link`](./api-reference.md#link), [`Heading`](./api-reference.md#heading), [`Quote`](./api-reference.md#quote), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), [`TableCell`](./api-reference.md#table-cell), [`UnorderedList`](./api-reference.md#unordered-list), [`OrderedList`](./api-reference.md#ordered-list), and [`ListItem`](./api-reference.md#list-item).
77+
**Typography** props are used by [`CodeSpan`](./api-reference.md#typography-tags), [`Text`](./api-reference.md#typography-tags), [`Link`](./api-reference.md#typography-tags), [`Heading`](./api-reference.md#typography-tags), [`Quote`](./api-reference.md#typography-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), [`TableCell`](./api-reference.md#table-tags), [`UnorderedList`](./api-reference.md#typography-tags), [`OrderedList`](./api-reference.md#typography-tags), and [`ListItem`](./api-reference.md#typography-tags).
7878

7979
| Name | PropType | Description | Example |
8080
| --------------- | ---------------- | -------------------------------------------------------------- | ------------------------------------------------------ |
8181
| `fontFamily` | PropTypes.string | Set CSS `font-family` value or `fonts` theme value | `Helvetica` or `primary` |
8282
| `fontSize` | PropTypes.string | Set CSS `font-size` value or `fontSizes` theme value | `16px` or `bodyCopy` |
83-
| `fontWeight` | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value | `400`, `bold`, or [`Heading`](./api-reference.md#heading) |
83+
| `fontWeight` | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value | `400`, `bold`, or [`Heading`](./api-reference.md#typography-tags) |
8484
| `lineHeight` | PropTypes.string | Set CSS `line-height` value or `fontWeights` theme value | `1.5em` or `paragraph` |
8585
| `letterSpacing` | PropTypes.string | Set CSS `letter-spacing` value or `letterSpacings` theme value | `1px` or `spreadOutText` |
8686
| `textAlign` | PropTypes.string | Set CSS `text-align` value | `left` |
8787
| `fontStyle` | PropTypes.string | Set CSS `font-style` value | `normal` or `italic` |
8888

8989
## Layout
9090

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

9393
| Name | PropType | Description | Example |
9494
| ----------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
@@ -106,7 +106,7 @@ const transition = {
106106

107107
## Flex
108108

109-
**Flex** props are used by [`FlexBox`](./api-reference.md#flex-box).
109+
**Flex** props are used by [`FlexBox`](./api-reference.md#layout-tags).
110110

111111
| Name | PropType | Description | Example |
112112
| ---------------- | ------------------------------------ | ------------------------------- | --------------- |
@@ -123,7 +123,7 @@ const transition = {
123123

124124
## Grid
125125

126-
**Grid** props are used by [`Grid`](./api-reference.md#grid).
126+
**Grid** props are used by [`Grid`](./api-reference.md#layout-tags).
127127

128128
| Name | PropType | Description | Example |
129129
| --------------------- | ------------------------------------ | ------------------------------------- | --------------------------------------------- |
@@ -142,7 +142,7 @@ const transition = {
142142

143143
## Position
144144

145-
**Position** props are used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`CodePane`](./api-reference.md#code-pane), [`FullScreen`](./api-reference.md#fullscreen), [`Progress`](./api-reference.md#progress), [`AnimatedProgress`](./api-reference.md#animatedprogress), and [`Markdown`](./api-reference.md#markdown-components).
145+
**Position** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`CodePane`](./api-reference.md#typography-tags), [`FullScreen`](./api-reference.md#fullscreen), [`Progress`](./api-reference.md#progress), [`AnimatedProgress`](./api-reference.md#animatedprogress), and [`Markdown`](./api-reference.md#markdown-components).
146146

147147
| Name | PropType | Description | Example |
148148
| ---------- | ---------------- | ------------------------ | ---------- |
@@ -155,7 +155,7 @@ const transition = {
155155

156156
## Border
157157

158-
**Border** props are used by [`Box`](./api-reference.md#box), [`FlexBox`](./api-reference.md#flex-box), [`Grid`](./api-reference.md#grid), [`Table`](./api-reference.md#table), [`TableHeader`](./api-reference.md#table-header), [`TableBody`](./api-reference.md#table-body), [`TableRow`](./api-reference.md#table-row), and [`TableCell`](./api-reference.md#table-cell).
158+
**Border** props are used by [`Box`](./api-reference.md#layout-tags), [`FlexBox`](./api-reference.md#layout-tags), [`Grid`](./api-reference.md#layout-tags), [`Table`](./api-reference.md#table-tags), [`TableHeader`](./api-reference.md#table-tags), [`TableBody`](./api-reference.md#table-tags), [`TableRow`](./api-reference.md#table-tags), and [`TableCell`](./api-reference.md#table-tags).
159159

160160
| Name | PropType | Description | Example |
161161
| ------------------------- | ------------------------------------ | ---------------------------------------------- | -------------------- |

‎docs/react-slide-layouts.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ A layout with a section title
6464
| Props | Type | Required | Example |
6565
|-----------------|-----------------------------------------------|----------|----------------------|
6666
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
67-
| `sectionProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } |
67+
| `sectionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |
6868

6969
![Section layout example slide](../website/static/img/slide-layouts/section.png)
7070

@@ -75,7 +75,7 @@ A layout with a centered statement
7575
| Props | Type | Required | Example |
7676
|------------------|-----------------------------------------------|----------|----------------------|
7777
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
78-
| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } |
78+
| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |
7979

8080
![Statement layout example slide](../website/static/img/slide-layouts/statement.png)
8181

@@ -88,8 +88,8 @@ A layout to present a fact in large font
8888
| `children` | `ReactNode` | ✅ | `100%` | |
8989
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | | |
9090
| `factInformation` | `ReactNode` | ❌ | `Fact information` | |
91-
| `factProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "100px" } | |
92-
| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } | |
91+
| `factProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "100px" }` | |
92+
| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` | |
9393
| `factFontSize` | `string` | ❌ | `150px` | `250px` |
9494

9595
![Big fact layout example slide](../website/static/img/slide-layouts/bigFact.png)
@@ -103,8 +103,8 @@ A quote and attribution layout
103103
| `...slideProps` | [Slide Props](./api-reference#slide) | ❌ | |
104104
| `children` | `ReactNode` | ✅ | `To be, or not to be` |
105105
| `attribution` | `ReactNode` | ✅ | `William Shakespeare` |
106-
| `quoteProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "100px" } |
107-
| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌ | { fontSize: "48px" } |
106+
| `quoteProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "100px" }` |
107+
| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌ | `{ fontSize: "48px" }` |
108108

109109
![Quote layout example slide](../website/static/img/slide-layouts/quote.png)
110110
![Long quote layout example slide](../website/static/img/slide-layouts/quote2.png)

0 commit comments

Comments
 (0)