Skip to content

Commit

Permalink
Step 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshwooding
joshwooding committed Oct 31, 2024
1 parent 43b6acd commit 758fec9
Show file tree
Hide file tree
Showing 64 changed files with 508 additions and 1,234 deletions.
29 changes: 9 additions & 20 deletions site/docs/components/accordion/examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,29 @@ data:
$ref: ./#/data
---

<LivePreview componentName="accordion" exampleName="Default" >

## Default

By default, `Accordion` is a single element the user can expand or collapse to show or hide content within a panel.

</LivePreview>
<LivePreview componentName="accordion" exampleName="Group">
<LivePreview componentName="accordion" exampleName="Default" />

## Accordion group

You can place accordions in an accordion group, which allows multiple accordions to be open at the same time.

</LivePreview>
<LivePreview componentName="accordion" exampleName="ExclusiveGroup">
<LivePreview componentName="accordion" exampleName="Group" />

## Exclusive group

You can use `Accordion`'s controlled API to allow only one accordion to be expanded at a time.

</LivePreview>
<LivePreview componentName="accordion" exampleName="Disabled" >
<LivePreview componentName="accordion" exampleName="ExclusiveGroup" />

## Disabled

Use the `disabled` prop to disable an accordion. The user can't expand, collapse or focus a disabled accordion.

</LivePreview>
<LivePreview componentName="accordion" exampleName="IndicatorSide" >
<LivePreview componentName="accordion" exampleName="Disabled" />

## Indicator side

Expand All @@ -58,33 +52,28 @@ The right position should be avoided:

The indicator icon is positioned on the far right of the accordion. Additional elements, such as a secondary label or validation icons (error, warning, success), will be positioned between the accordion label and the chevron icon.

</LivePreview>
<LivePreview componentName="accordion" exampleName="Status" >
<LivePreview componentName="accordion" exampleName="IndicatorSide" />

## Status

You can set a status of "error", "warning" or "success" for an accordion to indicate the type of content it contains.

</LivePreview>
<LivePreview componentName="accordion" exampleName="InlineBadge" >
<LivePreview componentName="accordion" exampleName="Status" />

## Inline badge

You can use an inline [badge](../badge) to indicate a change, or several changes, to the content within the accordion.

</LivePreview>
<LivePreview componentName="accordion" exampleName="AdditionalLabels" >
<LivePreview componentName="accordion" exampleName="InlineBadge" />

## Additional labels

You can add additional labels to provide extra context using the [`Text`](../text) and [`Stack Layout`](../stack-layout) components.

</LivePreview>

<LivePreview componentName="accordion" exampleName="ExpandAll" >
<LivePreview componentName="accordion" exampleName="AdditionalLabels" />

## Expand all

You can use Accordion's controlled API to implement custom behaviour e.g. expand/collapse all.

</LivePreview>
<LivePreview componentName="accordion" exampleName="ExpandAll" />
70 changes: 22 additions & 48 deletions site/docs/components/ag-grid-theme/examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,12 @@ data:
---

<AGThemeProvider>
<LivePreview componentName="ag-grid-theme" exampleName="Default" >

## Default

Applies the default look when applying the Salt theme.

</LivePreview>

<LivePreview componentName="ag-grid-theme" exampleName="Variants" >
<LivePreview componentName="ag-grid-theme" exampleName="Default" />

## Variants

Expand All @@ -28,149 +25,126 @@ The class names are:
- `ag-theme-salt-variant-secondary`
- `ag-theme-salt-variant-zebra`

</LivePreview>

<LivePreview componentName="ag-grid-theme" exampleName="CheckboxSelection" >
<LivePreview componentName="ag-grid-theme" exampleName="Variants" />

## Checkbox selection

Users will be able to select rows via checkboxes.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="Coloration" >
<LivePreview componentName="ag-grid-theme" exampleName="CheckboxSelection" />

## Coloration

You can apply custom color to cells with `cellStyle` or `cellClass`.

</LivePreview>

<LivePreview componentName="ag-grid-theme" exampleName="ColumnGroup" >
<LivePreview componentName="ag-grid-theme" exampleName="Coloration" />

## Column group

Similar to row groups, column groups collapse columns behind a group name.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="ColumnSpanning" >
<LivePreview componentName="ag-grid-theme" exampleName="ColumnGroup" />

## Column spanning

Rows can span multiple columns.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="ContextMenu" >
<LivePreview componentName="ag-grid-theme" exampleName="ColumnSpanning" />

## Context menu

Users can open the menu on the column to view details or filters.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="CustomFilter" >
<LivePreview componentName="ag-grid-theme" exampleName="ContextMenu" />

## Custom filter

Users can quickly filter table information with the controls at the top.

</LivePreview>

<LivePreview componentName="ag-grid-theme" exampleName="DragRowOrder" >
<LivePreview componentName="ag-grid-theme" exampleName="CustomFilter" />

## Drag row order

Users can drag rows to rearrange.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="FloatingFilter" >
<LivePreview componentName="ag-grid-theme" exampleName="DragRowOrder" />

## Floating filter

The filter remains visible as the user scrolls.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="HDCompact" >
<LivePreview componentName="ag-grid-theme" exampleName="FloatingFilter" />

## HD Compact

You can use the HD Compact theme by applying the `ag-grid-salt-high-compact-*` class name.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="InfiniteScroll" >
<LivePreview componentName="ag-grid-theme" exampleName="HDCompact" />

## Infinite scroll

The page continues to load as the user scrolls down the table.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="LoadingOverlay" >
<LivePreview componentName="ag-grid-theme" exampleName="InfiniteScroll" />

## Loading overlay

This feature communicates to the user that the page is loading. Use `loadingOverlayComponent`
from ag grid to provide a custom overlay component.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="MasterDetail" >
<LivePreview componentName="ag-grid-theme" exampleName="LoadingOverlay" />

## Master detail

Users can reveal a child grid when a row in the master grid is expanded.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="NoDataOverlay" >
<LivePreview componentName="ag-grid-theme" exampleName="MasterDetail" />

## "No data" overlay

This overlay tells the user that there is no information to display.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="Pagination" >
<LivePreview componentName="ag-grid-theme" exampleName="NoDataOverlay" />

## Pagination

Users can move between pages using the controls in the lower right.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="ParentChildRows" >
<LivePreview componentName="ag-grid-theme" exampleName="Pagination" />

## Parent-child rows

These rows group items under headers and sub-headers.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="PinnedRows" >
<LivePreview componentName="ag-grid-theme" exampleName="ParentChildRows" />

## Pinned rows

The top row remains visible as the user scrolls.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="RowGrouping" >
<LivePreview componentName="ag-grid-theme" exampleName="PinnedRows" />

## Row grouping

Row groups collapse related items under a single group.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="RowGroupPanel" >
<LivePreview componentName="ag-grid-theme" exampleName="RowGrouping" />

## Row group panel

Row groups display in the above panel.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="StatusBar" >
<LivePreview componentName="ag-grid-theme" exampleName="RowGroupPanel" />

## Status bar

The section below the table displays a status bar.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="WrappedHeader" >
<LivePreview componentName="ag-grid-theme" exampleName="StatusBar" />

## Wrapped header

Text in header cells can be wrapped when space is limited.

</LivePreview>
<LivePreview componentName="ag-grid-theme" exampleName="WrappedHeader" />
</AGThemeProvider>
13 changes: 4 additions & 9 deletions site/docs/components/avatar/examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,13 @@ data:
$ref: ./#/data
---

<LivePreview componentName="avatar" exampleName="Image" >

## Image

You can pass an image as the avatar image using the `src` prop.

You can also pass a custom image or SVG as the child of the component. Note that for images passed as children, you'll also need to handle the fallback logic.

</LivePreview>
<LivePreview componentName="avatar" exampleName="Initials" >
<LivePreview componentName="avatar" exampleName="Image" />

## Initials

Expand All @@ -26,18 +23,16 @@ If a photo is not available, the avatar will fall back to initials or an icon:
- You can use initials when a photo is unavailable, but profile information is.
- Use an icon when neither a photo nor profile information is available.

</LivePreview>
<LivePreview componentName="avatar" exampleName="Sizes" >
<LivePreview componentName="avatar" exampleName="Initials" />

## Sizes

You can use the `size` prop to modify the avatar size. Each avatar variant has a default size across all four densities, equal to the [size foundation](/salt/foundations/size) `size-base`: 20px (HD), 28px (MD), 36px (LD), and 44px (TD). The size property acts as a multiplier of the base size.

</LivePreview>
<LivePreview componentName="avatar" exampleName="CustomFallbackIcon" >
<LivePreview componentName="avatar" exampleName="Sizes" />

## Custom fallback icon

`Avatar` renders with an icon defined by `UserSolidIcon`, but you can pass an alternative icon as `fallbackIcon`.

</LivePreview>
<LivePreview componentName="avatar" exampleName="CustomFallbackIcon" />
22 changes: 7 additions & 15 deletions site/docs/components/badge/examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ data:
$ref: ./#/data
---

<LivePreview componentName="badge" exampleName="Default">
## Default

The `Badge` is anchored to the top-right corner when attached to a child component such as a button. As the number of alphanumeric characters increases, the badge width expands but stays in the same place.
Expand All @@ -17,8 +16,7 @@ The `Badge` is anchored to the top-right corner when attached to a child compone

Use a badge to summarize the overall state of the content the badge is anchored to. For example, you may want to provide a quick overview of the number of new or unread items.

</LivePreview>
<LivePreview componentName="badge" exampleName="InlineBadge">
<LivePreview componentName="badge" exampleName="Default" />

## Inline badge

Expand All @@ -27,25 +25,21 @@ To place a badge inline instead of in the top-right corner of an element, don't
- Using a badge inline with text clarifies which part of the content the badge relates to.
- Highlight specific details within the content to draw the user’s attention, such as using a badge inside a tab.

</LivePreview>
<LivePreview componentName="badge" exampleName="BadgeWithMaximumDigits">
<LivePreview componentName="badge" exampleName="InlineBadge" />

## Badge with maximum digits

Specify the maximum displayed number with the `max` prop. If `value` exceeds `max`, it will clamp the value and append a (`+`) suffix.

- Without a `max` value, the component limits the value to three digits by default, displaying `999+` for any values over 999.

</LivePreview>
<LivePreview componentName="badge" exampleName="BadgeWithString">

<LivePreview componentName="badge" exampleName="BadgeWithMaximumDigits" />

## Badge with string

The `value` property can accept both a `number` and a `string`. When you pass a string, the badge will not clamp the value.

</LivePreview>

<LivePreview componentName="badge" exampleName="DotBadge">
<LivePreview componentName="badge" exampleName="BadgeWithString" />

## Dot badge

Expand All @@ -57,12 +51,10 @@ A dot badge is a circular dot that notifies users of changes in state.
- If there is a 3:1 contrast between the badge and the element it is attached to, the badge can be anchored to the element's contents.
- If the icon graphic has number on the right top, don't anchor the badge directly to it to avoid blocking the number.

</LivePreview>

<LivePreview componentName="badge" exampleName="InlineDotBadge">
<LivePreview componentName="badge" exampleName="DotBadge" />

## Inline dot badge

Similarly to a regular badge, you can place a dot badge inline. To do this, do not pass `children` to the badge.

</LivePreview>
<LivePreview componentName="badge" exampleName="InlineDotBadge" />
Loading

0 comments on commit 758fec9

Please sign in to comment.