Cell -> Card

packages/snaps-sdk/src/jsx/components/Cell.test.tsx → packages/snaps-sdk/src/jsx/components/Card.test.tsx

@@ -1,9 +1,9 @@
-import { Cell } from './Cell';
+import { Card } from './Card';
 
-describe('Cell', () => {
-  it('renders a Cell', () => {
+describe('Card', () => {
+  it('renders a card', () => {
     const result = (
-      <Cell
+      <Card
         image="<svg />"
         title="Title"
         description="Description"
@@ -13,7 +13,7 @@ describe('Cell', () => {
     );
 
     expect(result).toStrictEqual({
-      type: 'Cell',
+      type: 'Card',
       key: null,
       props: {
         image: '<svg />',

packages/snaps-sdk/src/jsx/components/Cell.ts → packages/snaps-sdk/src/jsx/components/Card.ts

@@ -1,42 +1,42 @@
 import { createSnapComponent } from '../component';
 
 /**
- * The props of the {@link Cell} component.
+ * The props of the {@link Card} component.
  *
- * @property image - The image to show as part of the Cell, must be an SVG string.
+ * @property image - The image to show as part of the card, must be an SVG string.
  * @property title - The title.
  * @property description - The description, shown below the title.
  * @property value - The value, shown on the right side.
  * @property extra - An additional optional value shown below the value.
  */
-export type CellProps = {
+export type CardProps = {
   image?: string | undefined;
   title: string;
   description?: string | undefined;
   value: string;
   extra?: string | undefined;
 };
 
-const TYPE = 'Cell';
+const TYPE = 'Card';
 
 /**
- * A cell component which can be used to display values within a cell structure.
+ * A card component which can be used to display values within a card structure.
  *
  * @param props - The props of the component.
- * @param props.image - The image to show as part of the Cell, must be an SVG string.
+ * @param props.image - The image to show as part of the card, must be an SVG string.
  * @param props.title - The title.
  * @param props.description - The description, shown below the title.
  * @param props.value - The value, shown on the right side.
  * @param props.extra - An additional optional value shown below the value.
- * @returns A box element.
+ * @returns A card element.
  * @example
- * <Cell image="<svg />" title="Title" description="Description" value="$1200" extra="0.12 ETH" />
+ * <Card image="<svg />" title="Title" description="Description" value="$1200" extra="0.12 ETH" />
  */
-export const Cell = createSnapComponent<CellProps, typeof TYPE>(TYPE);
+export const Card = createSnapComponent<CardProps, typeof TYPE>(TYPE);
 
 /**
- * A cell element.
+ * A card element.
  *
- * @see Cell
+ * @see Card
  */
-export type CellElement = ReturnType<typeof Cell>;
+export type CardElement = ReturnType<typeof Card>;

packages/snaps-sdk/src/jsx/components/index.ts

@@ -1,6 +1,6 @@
 import type { AddressElement } from './Address';
 import type { BoxElement } from './Box';
-import type { CellElement } from './Cell';
+import type { CardElement } from './Card';
 import type { ContainerElement } from './Container';
 import type { CopyableElement } from './Copyable';
 import type { DividerElement } from './Divider';
@@ -20,7 +20,7 @@ export * from './form';
 export * from './formatting';
 export * from './Address';
 export * from './Box';
-export * from './Cell';
+export * from './Card';
 export * from './Copyable';
 export * from './Divider';
 export * from './Value';
@@ -42,7 +42,7 @@ export type JSXElement =
   | StandardFormattingElement
   | AddressElement
   | BoxElement
-  | CellElement
+  | CardElement
   | ContainerElement
   | CopyableElement
   | DividerElement

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -25,15 +25,15 @@ import {
   Checkbox,
   Footer,
   Container,
-  Cell,
+  Card,
 } from './components';
 import {
   AddressStruct,
   assertJSXElement,
   BoldStruct,
   BoxStruct,
   ButtonStruct,
-  CellStruct,
+  CardStruct,
   CheckboxStruct,
   ContainerStruct,
   CopyableStruct,
@@ -514,17 +514,17 @@ describe('FooterStruct', () => {
   });
 });
 
-describe('CellStruct', () => {
+describe('CardStruct', () => {
   it.each([
-    <Cell
+    <Card
       image="<svg />"
       title="Title"
       description="Description"
       value="$1200"
       extra="0.12 ETH"
     />,
-  ])('validates a cell element', (value) => {
-    expect(is(value, CellStruct)).toBe(true);
+  ])('validates a card element', (value) => {
+    expect(is(value, CardStruct)).toBe(true);
   });
 
   it.each([
@@ -535,12 +535,12 @@ describe('CellStruct', () => {
     {},
     [],
     // @ts-expect-error - Invalid props.
-    <Cell />,
+    <Card />,
     <Row label="label">
       <Image src="<svg />" alt="alt" />
     </Row>,
   ])('does not validate "%p"', (value) => {
-    expect(is(value, CellStruct)).toBe(false);
+    expect(is(value, CardStruct)).toBe(false);
   });
 });
 

packages/snaps-sdk/src/jsx/validation.ts

@@ -42,7 +42,7 @@ import type {
   BoxElement,
   ButtonElement,
   CheckboxElement,
-  CellElement,
+  CardElement,
   CopyableElement,
   DividerElement,
   DropdownElement,
@@ -382,9 +382,9 @@ export const ValueStruct: Describe<ValueElement> = element('Value', {
 });
 
 /**
- * A struct for the {@link CellElement} type.
+ * A struct for the {@link CardElement} type.
  */
-export const CellStruct: Describe<CellElement> = element('Cell', {
+export const CardStruct: Describe<CardElement> = element('Card', {
   image: optional(string()),
   title: string(),
   description: optional(string()),
@@ -500,7 +500,7 @@ export const BoxChildStruct = nullUnion([
   TextStruct,
   TooltipStruct,
   CheckboxStruct,
-  CellStruct,
+  CardStruct,
 ]);
 
 /**
@@ -540,7 +540,7 @@ export const JSXElementStruct: Describe<JSXElement> = nullUnion([
   CheckboxStruct,
   FooterStruct,
   ContainerStruct,
-  CellStruct,
+  CardStruct,
 ]);
 
 /**