update docs

robinweser · Jul 5, 2024 · 49380b5 · 49380b5
1 parent d5771ee
commit 49380b5
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 8 deletions.
diff --git a/packages/brandeur-primitives/README.md b/packages/brandeur-primitives/README.md
@@ -49,6 +49,15 @@ const App = (
 
 ## API Reference
 
+- [createSystem](#createsystem)
+- [createBox](#createbox)
+- [createText](#createtext)
+- [createClick](#createclick)
+- [createGrid](#creategrid)
+- [createOverlay](#createoverlay)
+- [createSpacer](#createspacer)
+- [createVisuallyHidden](#createvisuallyhidden)
+
 ### createSystem
 
 #### Arguments
@@ -100,7 +109,7 @@ const Example = (
 
 ### createBox
 
-Takes the system object and returns Box component with first-class flexbox layouting props.<br />
+Takes the system object and returns Box component with first-class flexbox layout props.
 
 > **Important**: It uses different default values for some flexbox properties to align more closely with the React Native defaults.
 
@@ -122,24 +131,20 @@ Box renders a [El](#el) component and thus also accepts the `as` and `style` pro
 | paddingRight       |           |                  |           |
 | paddingBottom      |           |                  |           |
 | paddingTop         |           |                  |           |
-| paddingX           |           |                  |           |
-| paddingInline      |           |                  |           |
+| paddingInline      | paddingX  |                  |           |
 | paddingInlineStart |           |                  |           |
 | paddingInlineEnd   |           |                  |           |
-| paddingY           |           |                  |           |
-| paddingBlock       |           |                  |           |
+| paddingBlock       | paddingY  |                  |           |
 | paddingBlockStart  |           |                  |           |
 | paddingBlockEnd    |           |                  |           |
 | margin             |           |                  |           |
 | marginLeft         |           |                  |           |
 | marginRight        |           |                  |           |
 | marginBottom       |           |                  |           |
 | marginTop          |           |                  |           |
-| marginX            |           |                  |           |
 | marginInline       | marginX   |                  |           |
 | marginInlineStart  |           |                  |           |
 | marginInlineEnd    |           |                  |           |
-| marginY            |           |                  |           |
 | marginBlock        | marginY   |                  |           |
 | marginBlockStart   |           |                  |           |
 | marginBlockEnd     |           |                  |           |
@@ -168,7 +173,7 @@ import { createBox } from 'brandeur-primitives'
 
 const Box = createBox(system)
 
-const App = (
+const Example = (
   <Box padding={10} gap={4}>
     <Box direction="row" gap={2}>
       <Box bg="red" width={50} height={50} />
@@ -184,16 +189,153 @@ const App = (
 
 ### createText
 
+Takes the system object and a typography map and returns Text component with first-class text props and typography variants.<br />
+The typography map takes pairs of string variants and style objects.
+
+The first instance of Text renders `display: block` while all child instances render `display: inline-block`.
+
+#### Props
+
+Box renders a [El](#el) component and thus also accepts the `as` and `style` props mentioned above.
+
+| Prop       | Type               |  CSS Property     |  Default |
+| ---------- | ------------------ | ----------------- | -------- |
+| variant    | `keyof typography` |                   |          |
+| size       |                    |                   |          |
+| color      |                    |                   |          |
+| height     |                    | `line-height`     |          |
+| weight     |                    | `font-weight`     |          |
+| decoration |                    | `text-decoration` |          |
+
+#### Example
+
+```tsx
+import { createText } from 'brandeur-primitives'
+
+const Text = createBox(system, {
+  title: {
+    fontSize: 32,
+    fontWeight: 700,
+    fontFamily: 'Inter',
+  },
+  body: {
+    fontSize: 16,
+  },
+})
+
+const Example = (
+  <>
+    <Text variant="title">Hello</Text>
+    <Text variant="body">
+      Hello{' '}
+      <Text color="red" weight={700}>
+        World
+      </Text>
+    </Text>
+  </>
+)
+```
+
 ### createClick
 
 ### createGrid
 
+Takes the system object and returns Box component with first-class grid layout props.
+
+#### Props
+
+Grid renders a [El](#el) component and thus also accepts the `as` and `style` props mentioned above.
+
+| Prop    |  CSS Property           |
+| ------- | ----------------------- |
+| gap     | `grid-gap`              |
+| columns | `grid-template-columns` |
+| rows    | `grid-template-rows`    |
+| areas   | `grid-template-areas`   |
+
+#### Example
+
+```tsx
+import { createGrid } from 'brandeur-primitives'
+
+const Grid = createGrid(system)
+
+const Example = (
+  <Grid columns="1fr 1fr 1fr" gap={4}>
+    <div>Hello</div>
+    <div>World</div>
+    <div>!</div>
+  </Grid>
+)
+```
+
 ### createOverlay
 
+Takes the system object and returns an Overlay component with `position: fixed` and `padding-*: safe-area-inset-*`.
+
+#### Props
+
+Grid renders a [El](#el) component and thus also accepts the `as` and `style` props mentioned above.
+
+| Prop    | Type      |   Default |
+| ------- | --------- | --------- |
+| visible | `boolean` | `false`   |
+| zIndex  |           |           |
+| inset   |           |           |
+| top     |           |           |
+| left    |           |           |
+| bottom  |           |           |
+| right   |           |           |
+
+#### Example
+
+```tsx
+import { createOverlay } from 'brandeur-primitives'
+
+const Grid = createOverlay(system)
+
+const Example = <Overlay>Fixed overlay</Overlay>
+```
+
 ### createSpacer
 
+Takes the system object and returns a Spacer component.
+
+#### Props
+
+Spacer takes a single `size` prop that accepts a length value.<br />
+If a `number` is passed and respects the [baselineGrid](Arguments).
+
+#### Example
+
+```tsx
+import { createSpacer } from 'brandeur-primitives'
+
+const Spacer = createSpacer(system)
+
+const Example = (
+  <>
+    <div>Hello</div>
+    <Spacer size={10} />
+    <div>World</div>
+  </>
+)
+```
+
 ### createVisuallyHidden
 
+Takes the system object and returns a component that visually hides its children while keeping them visible to screen readers.
+
+#### Example
+
+```tsx
+import { createVisuallyHidden } from 'brandeur-primitives'
+
+const VisuallyHidden = createVisuallyHidden(system)
+
+const Example = <VisuallyHidden>I am visually hidden</VisuallyHidden>
+```
+
 ## License
 
 Brandeur is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>

diff --git a/packages/brandeur-primitives/src/components/createOverlay.js b/packages/brandeur-primitives/src/components/createOverlay.js
@@ -29,6 +29,7 @@ export default function createOverlay({ El }) {
       children,
       visible = false,
       zIndex,
+      inset,
       top,
       left,
       bottom,
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ export default function createOverlay({ El }) { @@
           children,
           visible = false,
           zIndex,
+          inset,
           top,
           left,
           bottom,
@@ Expand Down @@