@czi-sds/mcp 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/component-props/Accordion.json +14 -15
- package/data/component-props/Alert.json +2 -44
- package/data/component-props/Autocomplete.json +14 -32
- package/data/component-props/Banner.json +11 -12
- package/data/component-props/Button.json +17 -82
- package/data/component-props/ButtonDropdown.json +26 -0
- package/data/component-props/ButtonIcon.json +4 -60
- package/data/component-props/ButtonToggle.json +2 -66
- package/data/component-props/Callout.json +11 -65
- package/data/component-props/CellBasic.json +28 -56
- package/data/component-props/CellComponent.json +4 -32
- package/data/component-props/CellHeader.json +13 -49
- package/data/component-props/ComplexFilter.json +24 -4
- package/data/component-props/ContentCard.json +66 -2
- package/data/component-props/Dialog.json +26 -0
- package/data/component-props/Dropdown.json +29 -67
- package/data/component-props/DropdownMenu.json +16 -56
- package/data/component-props/HeatmapChart.json +6 -87
- package/data/component-props/Icon.json +3 -8
- package/data/component-props/InputCheckbox.json +5 -53
- package/data/component-props/InputDropdown.json +11 -33
- package/data/component-props/InputRadio.json +5 -53
- package/data/component-props/InputSearch.json +6 -70
- package/data/component-props/InputSlider.json +21 -35
- package/data/component-props/InputText.json +7 -63
- package/data/component-props/InputToggle.json +5 -54
- package/data/component-props/Link.json +18 -0
- package/data/component-props/LoadingIndicator.json +1 -2
- package/data/component-props/MenuItem.json +11 -41
- package/data/component-props/MenuSelect.json +4 -67
- package/data/component-props/NavigationFooter.json +0 -8
- package/data/component-props/NavigationHeader.json +14 -65
- package/data/component-props/NavigationJumpTo.json +0 -40
- package/data/component-props/Notification.json +14 -58
- package/data/component-props/Pagination.json +8 -33
- package/data/component-props/Panel.json +4 -54
- package/data/component-props/SegmentedControl.json +0 -55
- package/data/component-props/TableRow.json +10 -38
- package/data/component-props/Tabs.json +18 -0
- package/data/component-props/Tag.json +10 -56
- package/data/component-props/TagFilter.json +0 -47
- package/data/component-props/Tooltip.json +12 -61
- package/data/component-props/TooltipCondensed.json +18 -0
- package/data/component-props/TooltipTable.json +0 -4
- package/data/zeroheight-exports/Accordion.md +167 -125
- package/data/zeroheight-exports/Banner.md +71 -48
- package/data/zeroheight-exports/Borders.md +72 -73
- package/data/zeroheight-exports/Buttons.md +375 -330
- package/data/zeroheight-exports/Callout.md +138 -116
- package/data/zeroheight-exports/Colors.md +254 -255
- package/data/zeroheight-exports/Content-Card.md +36 -37
- package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
- package/data/zeroheight-exports/Control-Inputs.md +289 -234
- package/data/zeroheight-exports/Corners.md +63 -64
- package/data/zeroheight-exports/Cover-page.md +0 -1
- package/data/zeroheight-exports/Dialog.md +237 -179
- package/data/zeroheight-exports/Downloads.md +10 -11
- package/data/zeroheight-exports/Drop-Shadows.md +40 -41
- package/data/zeroheight-exports/Dropdown-Input.md +158 -127
- package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
- package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
- package/data/zeroheight-exports/Field-Inputs.md +149 -130
- package/data/zeroheight-exports/Filters.md +114 -94
- package/data/zeroheight-exports/Getting-Started.md +112 -249
- package/data/zeroheight-exports/Hero.md +43 -37
- package/data/zeroheight-exports/Icons.md +205 -206
- package/data/zeroheight-exports/Intent.md +6 -7
- package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
- package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
- package/data/zeroheight-exports/Introduction.md +52 -53
- package/data/zeroheight-exports/Link.md +50 -37
- package/data/zeroheight-exports/Lists.md +78 -63
- package/data/zeroheight-exports/Loading-Indicator.md +7 -8
- package/data/zeroheight-exports/Navigation.md +163 -142
- package/data/zeroheight-exports/Notification.md +132 -102
- package/data/zeroheight-exports/Panel.md +231 -115
- package/data/zeroheight-exports/Responsive-Design.md +35 -32
- package/data/zeroheight-exports/Search-Input.md +9 -10
- package/data/zeroheight-exports/Search.md +87 -104
- package/data/zeroheight-exports/Segmented-Control.md +68 -45
- package/data/zeroheight-exports/Spacing.md +210 -211
- package/data/zeroheight-exports/Table.md +414 -302
- package/data/zeroheight-exports/Tabs.md +126 -98
- package/data/zeroheight-exports/Tags.md +148 -118
- package/data/zeroheight-exports/Text-Link.md +32 -33
- package/data/zeroheight-exports/Theming.md +48 -29
- package/data/zeroheight-exports/Tooltips.md +253 -237
- package/data/zeroheight-exports/Typography.md +463 -464
- package/dist/stdio.js +44 -132
- package/package.json +3 -4
- package/data/component-props/Chip.json +0 -73
- package/data/component-props/List.json +0 -43
- package/data/component-props/Menu.json +0 -48
- package/data/component-props/Table.json +0 -26
- package/data/component-props-storybook/Accordion-storybook.json +0 -45
- package/data/component-props-storybook/Alert-storybook.json +0 -30
- package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
- package/data/component-props-storybook/Banner-storybook.json +0 -78
- package/data/component-props-storybook/Button-storybook.json +0 -115
- package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
- package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
- package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
- package/data/component-props-storybook/Callout-storybook.json +0 -90
- package/data/component-props-storybook/CellBasic-storybook.json +0 -138
- package/data/component-props-storybook/CellComponent-storybook.json +0 -48
- package/data/component-props-storybook/CellHeader-storybook.json +0 -71
- package/data/component-props-storybook/Chip-storybook.json +0 -26
- package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
- package/data/component-props-storybook/ContentCard-storybook.json +0 -175
- package/data/component-props-storybook/Dialog-storybook.json +0 -56
- package/data/component-props-storybook/Dropdown-storybook.json +0 -93
- package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
- package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
- package/data/component-props-storybook/Icon-storybook.json +0 -75
- package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
- package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
- package/data/component-props-storybook/InputRadio-storybook.json +0 -56
- package/data/component-props-storybook/InputSearch-storybook.json +0 -55
- package/data/component-props-storybook/InputSlider-storybook.json +0 -55
- package/data/component-props-storybook/InputText-storybook.json +0 -59
- package/data/component-props-storybook/InputToggle-storybook.json +0 -42
- package/data/component-props-storybook/Link-storybook.json +0 -50
- package/data/component-props-storybook/List-storybook.json +0 -26
- package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
- package/data/component-props-storybook/Menu-storybook.json +0 -26
- package/data/component-props-storybook/MenuItem-storybook.json +0 -74
- package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
- package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
- package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
- package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
- package/data/component-props-storybook/Notification-storybook.json +0 -89
- package/data/component-props-storybook/Pagination-storybook.json +0 -50
- package/data/component-props-storybook/Panel-storybook.json +0 -52
- package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
- package/data/component-props-storybook/Table-storybook.json +0 -26
- package/data/component-props-storybook/TableHeader-storybook.json +0 -26
- package/data/component-props-storybook/TableRow-storybook.json +0 -62
- package/data/component-props-storybook/Tabs-storybook.json +0 -45
- package/data/component-props-storybook/Tag-storybook.json +0 -78
- package/data/component-props-storybook/TagFilter-storybook.json +0 -30
- package/data/component-props-storybook/Tooltip-storybook.json +0 -85
- package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
- package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
|
@@ -6,8 +6,8 @@ Content Cards are used throughout the UI to present information in a visually or
|
|
|
6
6
|
|
|
7
7
|
## Overview
|
|
8
8
|
|
|
9
|
-
|
|
|
10
|
-
| --- |
|
|
9
|
+
| | In Figma | | | Meets Accessibility | | | In Code |
|
|
10
|
+
| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
|
|
11
11
|
|
|
12
12
|
### Content Card Variants
|
|
13
13
|
|
|
@@ -36,27 +36,27 @@ Teams can choose whether to display the Content Card with a bounding box, with a
|
|
|
36
36
|
#### Visual Element Options
|
|
37
37
|
|
|
38
38
|
| Image | Icon | None |
|
|
39
|
-
|
|
|
39
|
+
| ----- | ---- | ---- |
|
|
40
40
|
|
|
41
41
|
#### Image Options
|
|
42
42
|
|
|
43
43
|
| Image left (padding) | Image left (no padding) | Image right (padding) | Image right (no padding) |
|
|
44
|
-
|
|
|
44
|
+
| -------------------- | ----------------------- | --------------------- | ------------------------ |
|
|
45
45
|
|
|
46
46
|
#### Content Options
|
|
47
47
|
|
|
48
48
|
| Text | Slot |
|
|
49
|
-
|
|
|
49
|
+
| ---- | ---- |
|
|
50
50
|
|
|
51
51
|
#### Additional Options
|
|
52
52
|
|
|
53
53
|
All of the following options are available regardless of whether the image is positioned on the left or right side of the Content Card
|
|
54
54
|
|
|
55
55
|
| With decorative border | Without decorative border | With bounding box | Without bounding box |
|
|
56
|
-
|
|
|
56
|
+
| ---------------------- | ------------------------- | ----------------- | -------------------- |
|
|
57
57
|
|
|
58
58
|
| Left-aligned Buttons | Right-aligned Buttons |
|
|
59
|
-
|
|
|
59
|
+
| -------------------- | --------------------- |
|
|
60
60
|
|
|
61
61
|
#### Interaction States
|
|
62
62
|
|
|
@@ -65,7 +65,7 @@ For Content Cards with one or zero Buttons, the Content Card itself can function
|
|
|
65
65
|
The following states are used regardless of whether there is a visual element included on the Content Card and, if the visual element is an image, regardless of whether it is positioned on the left or right side of the Content Card.
|
|
66
66
|
|
|
67
67
|
| Default | Hover | Pressed |
|
|
68
|
-
|
|
|
68
|
+
| ------- | ----- | ------- |
|
|
69
69
|
|
|
70
70
|
---
|
|
71
71
|
|
|
@@ -82,25 +82,25 @@ Teams can choose whether to display the Content Card with a bounding box, with a
|
|
|
82
82
|
#### Visual Element Options
|
|
83
83
|
|
|
84
84
|
| Image | Icon | None |
|
|
85
|
-
|
|
|
85
|
+
| ----- | ---- | ---- |
|
|
86
86
|
|
|
87
87
|
#### Image Options
|
|
88
88
|
|
|
89
89
|
| Padding | No Padding |
|
|
90
|
-
|
|
|
90
|
+
| ------- | ---------- |
|
|
91
91
|
|
|
92
92
|
#### Content Options
|
|
93
93
|
|
|
94
94
|
| Text | Slot |
|
|
95
|
-
|
|
|
95
|
+
| ---- | ---- |
|
|
96
96
|
|
|
97
97
|
#### Additional Options
|
|
98
98
|
|
|
99
99
|
| With decorative border | Without decorative border | With bounding box | Without bounding box |
|
|
100
|
-
|
|
|
100
|
+
| ---------------------- | ------------------------- | ----------------- | -------------------- |
|
|
101
101
|
|
|
102
102
|
| Left-aligned Buttons | Right-aligned Buttons |
|
|
103
|
-
|
|
|
103
|
+
| -------------------- | --------------------- |
|
|
104
104
|
|
|
105
105
|
#### Interaction States
|
|
106
106
|
|
|
@@ -109,7 +109,7 @@ For Content Cards with one or zero Buttons, the Content Card itself can function
|
|
|
109
109
|
The following states are used regardless of whether there is a visual element included on the Content Card.
|
|
110
110
|
|
|
111
111
|
| Default | Hover | Pressed |
|
|
112
|
-
|
|
|
112
|
+
| ------- | ----- | ------- |
|
|
113
113
|
|
|
114
114
|
---
|
|
115
115
|
|
|
@@ -119,7 +119,7 @@ These rules establish how much margin should exist between and around elements.
|
|
|
119
119
|
|
|
120
120
|
## Code
|
|
121
121
|
|
|
122
|
-
|
|
122
|
+
> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
|
|
123
123
|
|
|
124
124
|
## Content Card
|
|
125
125
|
|
|
@@ -135,28 +135,27 @@ Documentation for the underlying MUI `Card` component can be found here.
|
|
|
135
135
|
|
|
136
136
|
Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
|
|
137
137
|
|
|
138
|
-
| Name
|
|
139
|
-
|
|
|
140
|
-
| `boundingBox`
|
|
141
|
-
| `buttonsPosition`
|
|
142
|
-
| `classes`
|
|
143
|
-
| `decorativeBorder`
|
|
144
|
-
| `children`
|
|
145
|
-
| `clickableCard`
|
|
146
|
-
| `clickableCardProps` | `Partial<SdsMinimalButtonProps>` | `-`
|
|
147
|
-
| `icon`
|
|
148
|
-
| `image`
|
|
149
|
-
| `imagePadding`
|
|
150
|
-
| `imagePosition`
|
|
151
|
-
| `imageSize`
|
|
152
|
-
| `metadataText`
|
|
153
|
-
| `overlineText`
|
|
154
|
-
| `sdsType`
|
|
155
|
-
| `subtitleText`
|
|
156
|
-
| `titleText`
|
|
157
|
-
| `visualElementType`
|
|
138
|
+
| Name | Type | Default | Description |
|
|
139
|
+
| -------------------- | -------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
140
|
+
| `boundingBox` | `boolean` | `true` | If `true`, wraps content and visuals inside a bounded layout with background and padding. |
|
|
141
|
+
| `buttonsPosition` | `"left"` | `"right"` | `"left"` | Determines the alignment of buttons in the ContentCardActions component. |
|
|
142
|
+
| `classes` | `object` | `-` | Custom class names for different card sub-sections (e.g., cardPaper, cardTitle, cardActions, etc.). Could be used to style the component with TailwindCss. Full list of available class names are:`cardPaper`, `cardContent`, `cardHeader`, `cardMedia`, `cardOverline`, `cardTitle`, `cardSubtitle`, `cardMetadata`, `cardActions`, `clickableCardButton` |
|
|
143
|
+
| `decorativeBorder` | `boolean` | `false` | If `true`, shows a decorative border around the card. |
|
|
144
|
+
| `children` | `ReactNode` | `-` | The content to be displayed inside the card body, including custom components and ContentCardActions. |
|
|
145
|
+
| `clickableCard` | `boolean` | `false` | If `true`, wraps the card with an action area and makes it clickable. |
|
|
146
|
+
| `clickableCardProps` | `Partial<SdsMinimalButtonProps>` | `-` | Props forwarded to the clickable card wrapper when clickableCard is true. |
|
|
147
|
+
| `icon` | `ReactNode` | `-` | The icon displayed in the card when `visualElementType` is `icon`. |
|
|
148
|
+
| `image` | `ReactNode` | `-` | The image displayed in the card when `visualElementType` is `image`. |
|
|
149
|
+
| `imagePadding` | `boolean` | `false` | If `true`, applies padding around the image inside the card. |
|
|
150
|
+
| `imagePosition` | `"left"` | `"right"` | `"left"` | Position of the image in the card layout (left or right). |
|
|
151
|
+
| `imageSize` | `number` | `300` | Width of the image area in pixels when `visualElementType` is `image`. |
|
|
152
|
+
| `metadataText` | `ReactNode` | `-` | Optional metadata text, usually used for extra context like date or author. |
|
|
153
|
+
| `overlineText` | `ReactNode` | `-` | A small overline text displayed above the title. |
|
|
154
|
+
| `sdsType` | `"wide"` | `"narrow"` | `"wide"` | Determines the card layout style. `wide` shows the image and content side by side, `narrow` stacks them vertically. |
|
|
155
|
+
| `subtitleText` | `ReactNode` | `-` | Optional subtitle text displayed below the title. |
|
|
156
|
+
| `titleText` | `ReactNode` | `-` | The main title text of the card. |
|
|
157
|
+
| `visualElementType` | `"image"` | `"icon"` | `"none"` | `"none"` | Specifies what type of visual element to render on the card: an image, an icon, or none. |
|
|
158
158
|
|
|
159
159
|
### Code examples
|
|
160
160
|
|
|
161
|
-
|
|
162
|
-
|
|
161
|
+
> **Note:** Due to a bug in Zeroheight we are unable to publish code examples at this time; we will update this section once a fix is released.
|
|
@@ -12,14 +12,14 @@ Use the following guides when you have a new request for something to be added o
|
|
|
12
12
|
2. If not, submit the request or idea you want to contribute to the SDS by creating a github issue
|
|
13
13
|
3. The SDS Team will assess the request and make sure they understand the needs
|
|
14
14
|
4. **Decision Point**: should it be included in the SDS?
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
1. If the needs are joint across multiple projects, the SDS team will likely decide to include it
|
|
16
|
+
2. If not, it can become a **Snowflake** (a one-off component maintained by the product teams)
|
|
17
17
|
|
|
18
18
|
#### Design
|
|
19
19
|
|
|
20
20
|
1. **Decision Point**: who will build the component, the SDS or product team?
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
1. SDS team – if the SDS team has bandwidth in alignment with other priorities
|
|
22
|
+
2. Product team – if the product team is in a rush and need it sooner. They may build for SDS or in their own codebase to be incorporated into SDS later
|
|
23
23
|
2. Design Process – gather requirements, design critique, design review with SDS team and product teams, and iteration and hand-off to engineering with specs. Communicate with teams throughout.
|
|
24
24
|
|
|
25
25
|
#### Implementation and Testing
|
|
@@ -37,9 +37,9 @@ Use the following guides when you have a new request for something to be added o
|
|
|
37
37
|
|
|
38
38
|
When getting started with contributing, here are guides to follow. Be sure to also partner with an SDS core team member.
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
- Contributing Design – SDS Feature Design Process
|
|
41
|
+
- Contributing Code – [guide coming soon]
|
|
42
|
+
- Contributing Documentation – [guide coming soon]
|
|
43
43
|
|
|
44
44
|
## Contributor Models
|
|
45
45
|
|
|
@@ -47,10 +47,10 @@ When getting started with contributing, here are guides to follow. Be sure to al
|
|
|
47
47
|
|
|
48
48
|
There are a range of tasks and projects to work on as a contributor to the SDS, such as:
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
- Fixing a bug; grab something from the backlog
|
|
51
|
+
- Flagging things to the SDS team; give the SDS team feedback
|
|
52
|
+
- Brainstorming new feature needs; suggest features
|
|
53
|
+
- Participating in engineering design reviews
|
|
54
54
|
|
|
55
55
|
### Commitment Levels
|
|
56
56
|
|
|
@@ -58,42 +58,41 @@ Contributing to the SDS doesn't need to be a huge time commitment and there are
|
|
|
58
58
|
|
|
59
59
|
#### One-Off Contributor (Occasional)
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
61
|
+
- Contribute when they have free time or interest in a particular project
|
|
62
|
+
- No commitment to contribute long term; contributions can be sporadic
|
|
63
63
|
|
|
64
|
-
Some examples include:
|
|
64
|
+
Some examples include:
|
|
65
65
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
- Participating during SDS events, such as hackathons, sprints, or workshops
|
|
67
|
+
- Pick up one-off tickets, such as a well-defined accessibility task
|
|
68
|
+
- Make fixes or contributions on things relevant to your current work—if you’re already working on something on your team and want to contribute back to SDS
|
|
69
69
|
|
|
70
70
|
#### Team Representative
|
|
71
71
|
|
|
72
72
|
These contributors are go-to SDS advocates on their teams and point people. Their expectations include:
|
|
73
73
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
74
|
+
- Consistent involvement within their team
|
|
75
|
+
- Act as advocates, spreading awareness and encouraging participation, such as:
|
|
76
|
+
- Flagging when a SDS component is beneficial
|
|
77
|
+
- When their team has a need to share with SDS
|
|
78
|
+
- Watching for breaking changes so their team can react if needed
|
|
79
|
+
- May not be directly involved in development but promote the project's importance
|
|
80
|
+
- Project based: if the SDS team is collaborating on a project with their team
|
|
81
81
|
|
|
82
82
|
Current team representatives:
|
|
83
83
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
- Janeece Pourroy – design
|
|
85
|
+
- Harley Thomas – design
|
|
86
|
+
- Karen Liang – design
|
|
87
|
+
- Timmy Huang – engineering
|
|
88
|
+
- Jerry Fu – engineering
|
|
89
89
|
|
|
90
90
|
#### Commitment to a Timeframe (fixed-term)
|
|
91
91
|
|
|
92
92
|
These contributors commit to a specific period, typically 3 to 6 months, at the Quarter and Half planning times, to work on SDS and its roadmap. This involves:
|
|
93
93
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
94
|
+
- Defined time commitment
|
|
95
|
+
- Attend SDS meetings
|
|
96
|
+
- Typically involved in development, planning, or execution of project goals
|
|
97
|
+
- Providing a more predictable level of support over a specified timeframe
|
|
98
|
+
- Revisited after initial timeframe commitment is complete
|