Card: remove deprecated size prop (#328)

Cambly · Mar 8, 2024 · 5ceb281 · 5ceb281
1 parent 6c54b7f
commit 5ceb281
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 49 deletions.
diff --git a/.changeset/tasty-hornets-do.md b/.changeset/tasty-hornets-do.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Card: remove deprecated size prop
diff --git a/packages/syntax-core/src/Card/Card.test.tsx b/packages/syntax-core/src/Card/Card.test.tsx
@@ -16,36 +16,6 @@ describe("card", () => {
     expect(screen.getByText(/text/)).toBeInTheDocument();
   });
 
-  it("should have the right width for sm", () => {
-    render(
-      <Card size="sm" data-testid="card-sm">
-        <>
-          <h1>title</h1>
-          <p>text</p>
-        </>
-      </Card>,
-    );
-    expect(screen.getByTestId("card-sm")).toHaveStyle({
-      width: "100%",
-      maxWidth: "352px",
-    });
-  });
-
-  it("should have the right width for lg", () => {
-    render(
-      <Card size="lg" data-testid="card-lg">
-        <>
-          <h1>title</h1>
-          <p>text</p>
-        </>
-      </Card>,
-    );
-    expect(screen.getByTestId("card-lg")).toHaveStyle({
-      width: "100%",
-      maxWidth: "744px",
-    });
-  });
-
   it("should stretch to the width of the container", () => {
     render(
       <Box width={1000}>

diff --git a/packages/syntax-core/src/Card/Card.tsx b/packages/syntax-core/src/Card/Card.tsx
@@ -1,8 +1,6 @@
 import Box from "../Box/Box";
 import type allColors from "../colors/allColors";
 
-const DeprecatedCardSizes = ["sm", "lg"] as const;
-
 type CardType = {
   /**
    * Test id for the button
@@ -17,16 +15,6 @@ type CardType = {
    * The child components to render within Card.
    */
   children: JSX.Element;
-  /**
-   * The size of the card
-   *
-   * `sm`: 352px
-   * `lg`: 744px
-   *
-   * @deprecated Card width should be controlled by the parent container
-   * @defaultValue `undefined`
-   */
-  size?: (typeof DeprecatedCardSizes)[number];
 };
 
 /**
@@ -35,21 +23,14 @@ type CardType = {
 export default function Card({
   backgroundColor = "white",
   children,
-  size,
   "data-testid": dataTestId,
 }: CardType): JSX.Element {
-  const sizeWidth = {
-    sm: 352,
-    lg: 744,
-  } as const;
-
   return (
     <Box
       rounding="lg"
       padding={5}
       smPadding={7}
       lgPadding={7}
-      maxWidth={size && sizeWidth[size]}
       width="100%"
       backgroundColor={backgroundColor}
       data-testid={dataTestId}