Skip to content

Update block docs #13

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

Open
tembo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update block docs #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 23 additions & 24 deletions slab/content/blocks/all-pagination/gallery/product-gallery.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,39 +21,38 @@ This is a private block. It is intended for use only within specific parent bloc

### General

| Setting | Description | Options |
| ---------------------- | ------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals device visibility for the gallery | Checkbox (default: false) |
| Setting | Description | Options |
| ---------------------- | --------------------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals device visibility for the gallery | Checkbox (default: false) |
| Enable variant images | Shows different images based on selected product variants | Checkbox (default: false) |

### Content

| Setting | Description | Options |
| --------------------- | --------------------------------------------------------- | ------------------------- |
| Enable variant images | Shows different images based on selected product variants | Checkbox (default: false) |
| Product | Select the product to display media from | Product picker |
| Item count | Number of media items to display (0 = all media) | Number input (default: 7) |
| Show alt text | Shows each image’s alt text under the media when set | Checkbox (default: false) |
| Setting | Description | Options |
| ---------- | ------------------------------------------------ | ------------------------- |
| Product | Select the product to display media from | Product picker |
| Item count | Number of media items to display (0 = all media) | Number input (default: 7) |

### Color

| Setting | Description | Options |
| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme | Controls the background and text colors | <p>• Body (default)<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent</p> |
| Color border | Controls the border color | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None<br><br>Visible when border position is not blank</p> |
| Setting | Description | Options |
| --- | --- | --- |
| Type | Selects color mode | <p>• Custom<br>• Base (default)</p><br><br>Visible when **Enable inheritance** is off |
| Scheme | Custom color scheme picker | <p>Color scheme picker</p><br><br>Visible when **Type** is **Custom** and **Enable inheritance** is off |
| Color scheme | Controls the background and text colors | <p>• Body background (default)<br>• Body foreground<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Blur<br>• Transparent</p><br><br>Visible when **Type** is **Base** and **Enable inheritance** is off |
| Color border | Controls the border color | <p>• None<br>• Subtle (default)<br>• Strong</p><br><br>Visible when **Border position** is not **None**, **Type** is **Base**, and **Enable inheritance** is off |
| Enable inheritance | Inherits color settings from parent block | Checkbox (default: false) |

### Style

| Setting | Description | Options |
| --------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position | Controls where borders appear | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |

### Layout

| Setting | Description | Options |
| ------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| Enable aspect ratio | Maintains consistent aspect ratio for all media items | Checkbox (default: false) |
| Show entire image | Displays entire image without cropping | <p>Checkbox (default: true)<br><br>Visible when enable aspect ratio is true</p> |
| Aspect ratio | Aspect ratio for media items | <p>• Square<br>• Landscape<br>• Portrait<br>• None<br><br>Visible when enable aspect ratio is true</p> |
| Setting | Description | Options |
| ------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position | Controls where borders appear | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |
| Enable aspect ratio | Maintains consistent aspect ratio for all media items | Checkbox (default: false) |
| Enable zoom hover | Enables zoom effect on image hover | Checkbox (default: false) |
| Show alt text | Shows each image’s alt text under the media | Checkbox (default: false) |
| Show entire image | Displays entire image without cropping | <p>Checkbox (default: true)<br><br>Visible when **Enable aspect ratio** is on</p> |
| Aspect ratio | Aspect ratio for media items | <p>• Square<br>• Landscape<br>• Portrait<br>• None<br><br>Visible when **Enable aspect ratio** is on</p> |

### Display

Expand Down
9 changes: 6 additions & 3 deletions slab/content/blocks/all-pagination/wrappers/collections-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,12 @@ The following blocks can be nested within this block:

### Color

| Setting | Description | Options |
| ------------ | ------------------------- | ------------------------------------- |
| Border color | Controls the border color | <p>• Subtle (default)<br>• Strong</p> |
| Setting | Description | Options |
| --- | --- | --- |
| Type | Selects color mode | <p>• Custom<br>• Base (default)</p><br><br>Visible when **Enable inheritance** is off and **Border position** is not **None** |
| Scheme | Custom color scheme for the border | <p>Color scheme picker</p><br><br>Visible when **Type** is **Custom**, **Enable inheritance** is off, and **Border position** is not **None** |
| Color border | Controls the border color | <p>• Subtle (default)<br>• Strong</p><br><br>Visible when **Border position** is not **None**, **Type** is **Base**, and **Enable inheritance** is off |
| Enable inheritance | Inherits color settings from parent block | <p>Checkbox (default: false)</p><br><br>Visible when **Border position** is not **None** |

### Style

Expand Down
15 changes: 9 additions & 6 deletions slab/content/blocks/basics/video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,28 @@ The following blocks can be nested within this block:

### Color

| Setting | Description | Options |
| ------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Color scheme | Controls the background color scheme | <p>• Body<br>• Neutral<br>• Accent 1 (default)<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur</p> |
| Border color | Controls the border color | <p>• Subtle (default)<br>• Strong<br>• None</p> |
| Setting | Description | Options |
| --- | --- | --- |
| Type | Selects color mode | <p>• Custom<br>• Base (default)</p><br><br>Visible when **Enable inheritance** is off |
| Scheme | Custom color scheme picker | <p>Color scheme picker</p><br><br>Visible when **Type** is **Custom** and **Enable inheritance** is off |
| Color scheme | Controls the background color scheme | <p>• Body background<br>• Body foreground<br>• Accent 1 (default)<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Blur<br>• Transparent</p><br><br>Visible when **Type** is **Base** and **Enable inheritance** is off |
| Border color | Controls the border color | <p>• None (default)<br>• Subtle<br>• Strong</p><br><br>Visible when **Border position** is not **None**, **Type** is **Base**, and **Enable inheritance** is off |
| Enable inheritance | Inherits color settings from parent block | Checkbox (default: false) |

### Style

| Setting | Description | Options |
| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Width | Controls the width of the video container | 5 - 100 % (default: 100) |
| Minimum width | Minimum width of the video container | 5 - 500 px (default: 500) |
| Minimum width | Minimum width of the video container | <p>5 - 500 px (default: 500)</p><br><br>Visible when **Width** is less than 100 |
| Border position | Controls where borders appear on the video | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |
| Radius | Controls the border radius | <p>• None<br>• Default (default)<br>• Sm<br>• Md<br>• Lg<br>• Xl<br>• 2xl<br>• Full</p> |

### Layout

| Setting | Description | Options |
| -------------------- | ------------------------------------------ | ---------------------------------------------- |
| Horizontal alignment | Controls horizontal alignment of the video | <p>• Left (default)<br>• Center<br>• Right</p> |
| Horizontal alignment | Controls horizontal alignment of the video | <p>• Left (default)<br>• Center<br>• Right</p><br><br>Visible when **Width** is less than 100 |

### Display

Expand Down
19 changes: 15 additions & 4 deletions slab/content/blocks/cards/product-card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@ The following blocks can be nested within this block:
* [Slider](../layout/slider/)
* [Grid](../layout/default-grid/)
* [Flex](../layout/flex-grid/)
* [Sibling options](../products/sibling-options.md)
* [Rating](../products/rating.md)
* [Pickup availability](../products/pickup-availability.md)
* [Bundles](../products/bundles.md)
* [Buy button](../products/buy-button.md)
* [Product options](../products/product-options.md)
* [Subscription](../products/subscription.md)

## Block settings

Expand All @@ -61,16 +68,20 @@ The following blocks can be nested within this block:

### Color

| Setting | Description | Options |
| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme | Controls the background and text colors | <p>• Body (default)<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent</p> |
| Color border | Controls the border color | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None</p> |
| Setting | Description | Options |
| --- | --- | --- |
| Type | Selects color mode | <p>• Custom<br>• Base (default)</p><br><br>Visible when **Enable inheritance** is off |
| Scheme | Custom color scheme picker | <p>Color scheme picker</p><br><br>Visible when **Type** is **Custom** and **Enable inheritance** is off |
| Color scheme | Controls the background and text colors | <p>• Body background (default)<br>• Body foreground<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Blur<br>• Transparent</p><br><br>Visible when **Type** is **Base** and **Enable inheritance** is off |
| Color border | Controls the border color | <p>• None<br>• Subtle (default)<br>• Strong</p><br><br>Visible when **Border position** is not **None**, **Type** is **Base**, and **Enable inheritance** is off |
| Enable inheritance | Inherits color settings from parent block | Checkbox (default: false) |

### Style

| Setting | Description | Options |
| ----------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position | Controls where borders appear | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |
| Radius | Controls the border radius | <p>• None<br>• Default (default)<br>• Sm<br>• Md<br>• Lg<br>• Xl<br>• 2xl<br>• Full</p> |
| Show underline on hover | Displays an underline effect when hovering over the card | Checkbox (default: false) |

### Display
Expand Down
16 changes: 10 additions & 6 deletions slab/content/blocks/cart/progress-bar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,16 @@ The following blocks can be nested within this block:

### Color

| Setting | Description | Options |
| ------------ | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color bar | Controls the progress bar fill color | <p>• Body<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent</p> |
| Color scheme | Controls the background and text colors for tier messages | <p>• Body<br>• Neutral (default)<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent</p> |
| Color text | Controls the text color for tier messages | <p>• Default (default)<br>• Alternative<br>• Primary background<br>• Primary foreground<br>• Secondary background<br>• Secondary foreground<br>• Tertiary background<br>• Tertiary foreground<br>• Neutral background<br>• Neutral foreground<br>• Shade</p> |
| Color border | Controls the border color | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None<br><br>Visible when border position is not blank</p> |
| Setting | Description | Options |
| --- | --- | --- |
| Type | Selects color mode | <p>• Custom<br>• Base (default)</p><br><br>Visible when **Enable inheritance** is off |
| Bar (custom) | Custom color scheme for the progress bar fill | <p>Color scheme picker</p><br><br>Visible when **Type** is **Custom** and **Enable inheritance** is off |
| Container (custom) | Custom color scheme for the tier message container | <p>Color scheme picker</p><br><br>Visible when **Type** is **Custom** and **Enable inheritance** is off |
| Color bar | Controls the progress bar fill color | <p>• Body background<br>• Body foreground<br>• Accent 1 (default)<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Blur<br>• Transparent</p><br><br>Visible when **Type** is **Base** and **Enable inheritance** is off |
| Color container | Controls the background color for tier messages | <p>• Body background<br>• Body foreground<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1 (default)<br>• Shade 2<br>• Shade 3<br>• Blur<br>• Transparent</p><br><br>Visible when **Type** is **Base** and **Enable inheritance** is off |
| Color text | Controls the text color for tier messages | <p>• Default (default)<br>• Alternative<br>• Link<br>• Error<br>• Success<br>• Shade 1<br>• Shade 2<br>• Shade 3</p><br><br>Visible when **Type** is **Base** and **Enable inheritance** is off |
| Color border | Controls the border color | <p>• None<br>• Subtle (default)<br>• Strong</p><br><br>Visible when **Border position** is not **None**, **Type** is **Base**, and **Enable inheritance** is off |
| Enable inheritance | Inherits color settings from parent block | Checkbox (default: true) |

### Style

Expand Down