@khanacademy/wonder-blocks-card 0.0.0-PR2799-20251002231102 → 0.0.0-PR2799-20251003161247
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/CHANGELOG.md +1 -1
- package/package.json +3 -3
- package/src/components/card.tsx +2 -38
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-card",
|
|
3
|
-
"version": "0.0.0-PR2799-
|
|
3
|
+
"version": "0.0.0-PR2799-20251003161247",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Card component for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@khanacademy/wonder-blocks-core": "12.4.0",
|
|
17
|
-
"@khanacademy/wonder-blocks-
|
|
18
|
-
"@khanacademy/wonder-blocks-
|
|
17
|
+
"@khanacademy/wonder-blocks-icon-button": "10.5.2",
|
|
18
|
+
"@khanacademy/wonder-blocks-tokens": "14.0.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"aphrodite": "^1.2.5",
|
package/src/components/card.tsx
CHANGED
|
@@ -139,45 +139,9 @@ type Props = BaseCardProps & TagProps & DismissProps;
|
|
|
139
139
|
* </Card>
|
|
140
140
|
* ```
|
|
141
141
|
*
|
|
142
|
-
*
|
|
142
|
+
* When the `onDismiss` prop is provided, a dismiss button will be rendered. In this case, the `labels.dismissButtonAriaLabel` prop is required to provide an accessible label for the dismiss button.
|
|
143
143
|
*
|
|
144
|
-
*
|
|
145
|
-
*
|
|
146
|
-
* **`background` prop**
|
|
147
|
-
*
|
|
148
|
-
* | value | resolves to |
|
|
149
|
-
* |---|---|
|
|
150
|
-
* | `base-subtle` | `semanticColor.core.background.base.subtle` (light gray) |
|
|
151
|
-
* | `base-default` | `semanticColor.core.background.base.default` (white) |
|
|
152
|
-
*
|
|
153
|
-
* **`borderRadius` prop**
|
|
154
|
-
*
|
|
155
|
-
* | value | resolves to |
|
|
156
|
-
* |---|---|
|
|
157
|
-
* | `small` | `border.radius.radius_080` |
|
|
158
|
-
* | `medium` | `border.radius.radius_120` |
|
|
159
|
-
*
|
|
160
|
-
* **`elevation` prop**
|
|
161
|
-
*
|
|
162
|
-
* | value | resolves to |
|
|
163
|
-
* |---|---|
|
|
164
|
-
* | `none` | `none` |
|
|
165
|
-
* | `low` | `boxShadow.low` |
|
|
166
|
-
*
|
|
167
|
-
* **`paddingSize` prop**
|
|
168
|
-
*
|
|
169
|
-
* | value | resolves to |
|
|
170
|
-
* |---|---|
|
|
171
|
-
* | `none` | `sizing.size_0` |
|
|
172
|
-
* | `small` | `sizing.size_160` |
|
|
173
|
-
* | `medium` | `sizing.size_240` |
|
|
174
|
-
*
|
|
175
|
-
* Other styles can be applied via the `styles` prop, which accepts an object with `root` and `dismissButton` keys for custom styling of the card container and dismiss button respectively.
|
|
176
|
-
*
|
|
177
|
-
* ### Accessibility
|
|
178
|
-
* - When using `tag="section"` or `tag="figure"`, the `labels.cardAriaLabel` prop is required to provide an accessible name for the card.
|
|
179
|
-
* - When the `onDismiss` prop is provided, a dismiss button will be rendered. In this case, the `labels.dismissButtonAriaLabel` prop is required to provide an accessible label for the dismiss button.
|
|
180
|
-
* - Cards cannot be interactive elements themselves (e.g. buttons or links), but they can contain interactive elements as children.
|
|
144
|
+
* See additional [Accessibility docs](./?path=/docs/packages-card-card-accessibility--docs).
|
|
181
145
|
*/
|
|
182
146
|
|
|
183
147
|
const Card = React.forwardRef(function Card(
|