Skip to content
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

Document Snaps Card Component #1707

Merged
merged 6 commits into from
Nov 5, 2024
Merged

Document Snaps Card Component #1707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
370e320
Document Snaps Card Component
Montoya Nov 5, 2024
4ec7f8f
Add PRs and fix links in What's New
Montoya Nov 5, 2024
e535e66
Update image sizing for Card example
Montoya Nov 5, 2024
5d1cb36
Add an info section for Card and reorder the params.
Montoya Nov 5, 2024
23e704d
Update docs/whats-new.md
alexandratran Nov 5, 2024
8429b0f
Merge branch 'main' into snaps-card-component
alexandratran Nov 5, 2024
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
5 changes: 5 additions & 0 deletions docs/whats-new.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ The latest major MetaMask documentation updates are listed by the month they wer
For a comprehensive list of recent product changes, visit the "Release Notes" section at the bottom
of the [MetaMask developer page](https://metamask.io/developer/).

## November 2024

- Documented Snaps [`Card`](/snaps/features/custom-ui/#card) and [`Section`](/snaps/features/custom-ui/#section) UI components.
([#1707](https://github.com/MetaMask/metamask-docs/pull/1707)) ([#1700](https://github.com/MetaMask/metamask-docs/pull/1700))

## October 2024

- Documented support for [non-EVM networks](/wallet/how-to/use-non-evm-networks), starting with [Starknet](/wallet/how-to/use-non-evm-networks/starknet). ([#1509](https://github.com/MetaMask/metamask-docs/pull/1509))
Expand Down
Binary file added snaps/assets/custom-ui-card.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions snaps/features/custom-ui/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,66 @@
<img src={require("../../assets/custom-ui-button.png").default} alt="Button UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
</p>

### `Card`

Outputs a card component which is used to display values in a card structure.

:::info
Unlike many `Card` components from other UI libraries, the Snaps `Card` does not have any shape.

Check warning on line 211 in snaps/features/custom-ui/index.md

View workflow job for this annotation

GitHub Actions / Lint / Spelling (.md) 

[vale] reported by reviewdog 🐶
[Consensys.Weasel] 'many' is a weasel word!

Raw Output:
{"message": "[Consensys.Weasel] 'many' is a weasel word!", "location": {"path": "snaps/features/custom-ui/index.md", "range": {"start": {"line": 211, "column": 8}}}, "severity": "WARNING"}

Check warning on line 211 in snaps/features/custom-ui/index.md

View workflow job for this annotation

GitHub Actions / Lint / Spelling (.md) 

[vale] reported by reviewdog 🐶
[Microsoft.Contractions] Use 'doesn't' instead of 'does not'.

Raw Output:
{"message": "[Microsoft.Contractions] Use 'doesn't' instead of 'does not'.", "location": {"path": "snaps/features/custom-ui/index.md", "range": {"start": {"line": 211, "column": 73}}}, "severity": "WARNING"}
It is only used for layout. To give a shape to a `Card`, wrap it in a [`Section`](#section) component.

Check warning on line 212 in snaps/features/custom-ui/index.md

View workflow job for this annotation

GitHub Actions / Lint / Spelling (.md) 

[vale] reported by reviewdog 🐶
[Microsoft.Contractions] Use 'it's' instead of 'It is'.

Raw Output:
{"message": "[Microsoft.Contractions] Use 'it's' instead of 'It is'.", "location": {"path": "snaps/features/custom-ui/index.md", "range": {"start": {"line": 212, "column": 1}}}, "severity": "WARNING"}
:::

#### Props

- `title`: `string` - The title of the card.
- `value`: `string` - The value, shown on the right side.
- `image`: `string` - (Optional) An image shown on the left side. Accepts inline SVG.
- `description`: `string` - (Optional) A description, shown below the title.
- `extra`: `string` - (Optional) Additional text shown below the value.

#### Example

```js
import icon from "./../img/icon.svg"

export const onHomePage: OnHomePageHandler = async () => {
return {
content: (
<Box>
<Card
image={icon}
title="Card title"
description="Card description"
value="Card value"
extra="Extra value"
/>
<Card
title="Minimal card"
value="Example value"
/>
<Section>
<Card
image={icon}
title="Card title"
description="Card description"
value="Card value"
extra="Extra value"
/>
<Card
title="Minimal card"
value="Example value"
/>
</Section>
</Box>
),
};
};
```

<p align="center">
<img src={require("../../assets/custom-ui-card.png").default} alt="Card UI example" width="450px" style={{border: "1px solid #DCDCDC"}} />
</p>

### `Checkbox`

Outputs a checkbox for use in [interactive UI](interactive-ui.md).
Expand Down
Loading