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.

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

Card: remove deprecated size prop #328

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tasty-hornets-do.md
@@ -0,0 +1,5 @@
---
"@cambly/syntax-core": minor
---

Card: remove deprecated size prop
30 changes: 0 additions & 30 deletions packages/syntax-core/src/Card/Card.test.tsx
Expand Up @@ -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}>
Expand Down
19 changes: 0 additions & 19 deletions 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
Expand All @@ -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];
};

/**
Expand All @@ -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}
Expand Down