Brand updates (#1330)

Co-authored-by: Christy Presler <cpresler@users.noreply.github.com>
FormidableLabs · May 8, 2024 · 494c8b7 · 494c8b7
1 parent 638c808
commit 494c8b7
Show file tree

Hide file tree

Showing 30 changed files with 5,112 additions and 2,451 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,5 @@
-<p align="center">
-  <a href="https://formidable.com/open-source/" target="_blank">
-    <img alt="Spectacle — Formidable, We build the modern web" src="https://raw.githubusercontent.com/FormidableLabs/spectacle/main/Spectacle-Hero.png" />
-  </a>
-</p>
+[![Spectacle](https://oss.nearform.com/api/banner?badge=spectacle&bg=fc6986)](https://commerce.nearform.com/open-source/spectacle/)
+
 <p align="center">
   <strong>✨ A ReactJS based Presentation Library ✨</strong>
   <br><br>

diff --git a/docs/api-reference.md b/docs/api-reference.md
@@ -65,7 +65,7 @@ These tags are for displaying textual content.
 | **`CodeSpan`**      | [**Space**](./props#space)<br />[**Color**](./props#color)<br /> [**Typography**](./props#typography)       | —                          | **fontFamily**: monospace<br />**fontSize**: text                                                                                                                |
 
 
-## Templates 🆕
+## Templates
 
 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`.
 

diff --git a/docs/index.mdx b/docs/index.mdx
@@ -62,11 +62,11 @@ Spectacle is a React-based library for creating sleek presentations using React
     export default App;
     ```
 
-    :::info
+    \:\:\:info
 
     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).
 
-    :::
+    \:\:\:
 
 
   </TabItem>

diff --git a/docs/props.md b/docs/props.md
@@ -44,7 +44,7 @@ const transition = {
 
 ## Color
 
-**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).
+**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).
 
 | Name                      | PropType         | Description                                             | Example                  |
 | ------------------------- | ---------------- | ------------------------------------------------------- | ------------------------ |
@@ -53,7 +53,7 @@ const transition = {
 
 ## Space
 
-**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).
+**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).
 
 | Name                    | PropType         | Description                                                             | Example                             |
 | ----------------------- | ---------------- | ----------------------------------------------------------------------- | ----------------------------------- |
@@ -74,21 +74,21 @@ const transition = {
 
 ## Typography
 
-**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).
+**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).
 
 | Name            | PropType         | Description                                                    | Example                                                |
 | --------------- | ---------------- | -------------------------------------------------------------- | ------------------------------------------------------ |
 | `fontFamily`    | PropTypes.string | Set CSS `font-family` value or `fonts` theme value             | `Helvetica` or `primary`                               |
 | `fontSize`      | PropTypes.string | Set CSS `font-size` value or `fontSizes` theme value           | `16px` or `bodyCopy`                                   |
-| `fontWeight`    | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value       | `400`, `bold`, or [`Heading`](./api-reference.md#heading) |
+| `fontWeight`    | PropTypes.string | Set CSS `font-weight` value or `fontWeights` theme value       | `400`, `bold`, or [`Heading`](./api-reference.md#typography-tags) |
 | `lineHeight`    | PropTypes.string | Set CSS `line-height` value or `fontWeights` theme value       | `1.5em` or `paragraph`                                 |
 | `letterSpacing` | PropTypes.string | Set CSS `letter-spacing` value or `letterSpacings` theme value | `1px` or `spreadOutText`                               |
 | `textAlign`     | PropTypes.string | Set CSS `text-align` value                                     | `left`                                                 |
 | `fontStyle`     | PropTypes.string | Set CSS `font-style` value                                     | `normal` or `italic`                                   |
 
 ## Layout
 
-**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).
+**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).
 
 | Name        | PropType                             | Description                                                                                                                                                                              | Example                                    |
 | ----------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
@@ -106,7 +106,7 @@ const transition = {
 
 ## Flex
 
-**Flex** props are used by [`FlexBox`](./api-reference.md#flex-box).
+**Flex** props are used by [`FlexBox`](./api-reference.md#layout-tags).
 
 | Name             | PropType                             | Description                     | Example         |
 | ---------------- | ------------------------------------ | ------------------------------- | --------------- |
@@ -123,7 +123,7 @@ const transition = {
 
 ## Grid
 
-**Grid** props are used by [`Grid`](./api-reference.md#grid).
+**Grid** props are used by [`Grid`](./api-reference.md#layout-tags).
 
 | Name                  | PropType                             | Description                           | Example                                       |
 | --------------------- | ------------------------------------ | ------------------------------------- | --------------------------------------------- |
@@ -142,7 +142,7 @@ const transition = {
 
 ## Position
 
-**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).
+**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).
 
 | Name       | PropType         | Description              | Example    |
 | ---------- | ---------------- | ------------------------ | ---------- |
@@ -155,7 +155,7 @@ const transition = {
 
 ## Border
 
-**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).
+**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).
 
 | Name                      | PropType                             | Description                                    | Example              |
 | ------------------------- | ------------------------------------ | ---------------------------------------------- | -------------------- |

diff --git a/docs/react-slide-layouts.md b/docs/react-slide-layouts.md
@@ -64,7 +64,7 @@ A layout with a section title
 | Props           | Type                                          | Required | Example              |
 |-----------------|-----------------------------------------------|----------|----------------------|
 | `...slideProps` | [Slide Props](./api-reference#slide)          | ❌        |                      |
-| `sectionProps`  | [Text Props](./api-reference#typography-tags) | ❌        | { fontSize: "48px" } |
+| `sectionProps`  | [Text Props](./api-reference#typography-tags) | ❌        | `{ fontSize: "48px" }` |
 
 ![Section layout example slide](../website/static/img/slide-layouts/section.png)
 
@@ -75,7 +75,7 @@ A layout with a centered statement
 | Props            | Type                                          | Required | Example              |
 |------------------|-----------------------------------------------|----------|----------------------|
 | `...slideProps`  | [Slide Props](./api-reference#slide)          | ❌        |                      |
-| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌        | { fontSize: "48px" } |
+| `statementProps` | [Text Props](./api-reference#typography-tags) | ❌        | `{ fontSize: "48px" }` |
 
 ![Statement layout example slide](../website/static/img/slide-layouts/statement.png)
 
@@ -88,8 +88,8 @@ A layout to present a fact in large font
 | `children`             | `ReactNode`                                   | ✅        | `100%`                |         |
 | `...slideProps`        | [Slide Props](./api-reference#slide)          | ❌        |                       |         |
 | `factInformation`      | `ReactNode`                                   | ❌        | `Fact information`    |         |
-| `factProps`            | [Text Props](./api-reference#typography-tags) | ❌        | { fontSize: "100px" } |         |
-| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌        | { fontSize: "48px" }  |         |
+| `factProps`            | [Text Props](./api-reference#typography-tags) | ❌        | `{ fontSize: "100px" }` |         |
+| `factInformationProps` | [Text Props](./api-reference#typography-tags) | ❌        | `{ fontSize: "48px" }`  |         |
 | `factFontSize`         | `string`                                      | ❌        | `150px`               | `250px` |
 
 ![Big fact layout example slide](../website/static/img/slide-layouts/bigFact.png)
@@ -103,8 +103,8 @@ A quote and attribution layout
 | `...slideProps`    | [Slide Props](./api-reference#slide)          | ❌        |                       |
 | `children`         | `ReactNode`                                   | ✅        | `To be, or not to be` |
 | `attribution`      | `ReactNode`                                   | ✅        | `William Shakespeare` |
-| `quoteProps`       | [Text Props](./api-reference#typography-tags) | ❌        | { fontSize: "100px" } |
-| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌        | { fontSize: "48px" }  |
+| `quoteProps`       | [Text Props](./api-reference#typography-tags) | ❌        | `{ fontSize: "100px" }` |
+| `attributionProps` | [Text Props](./api-reference#typography-tags) | ❌        | `{ fontSize: "48px" }`  |
 
 ![Quote layout example slide](../website/static/img/slide-layouts/quote.png)
 ![Long quote layout example slide](../website/static/img/slide-layouts/quote2.png)