Skip to content

Commit

Permalink
feat(Card): icon prop is deprecated
Browse files Browse the repository at this point in the history
  • Loading branch information
@DSil
DSil committed Apr 21, 2023
1 parent 6de5f6b commit f6ba524
Show file tree
Hide file tree
Showing 12 changed files with 68 additions and 119 deletions.
2 changes: 0 additions & 2 deletions docs/src/__examples__/Card/DEFAULT.tsx
View file
Expand Up @@ -11,7 +11,6 @@ export default {
{
component: "Card",
knobs: [
{ name: "icon", type: "icon", defaultValue: "" },
{ name: "margin", type: "text", defaultValue: "" },
{ name: "loading", type: "boolean", defaultValue: false },
{ name: "title", type: "text", defaultValue: "Passenger info" },
Expand All @@ -21,7 +20,6 @@ export default {
{
component: "CardSection",
knobs: [
{ name: "icon", type: "icon", defaultValue: "" },
{ name: "noSeparator", type: "boolean", defaultValue: false },
{ name: "expandable", type: "boolean", defaultValue: true },
{ name: "initialExpanded", type: "boolean", defaultValue: false },
Expand Down
5 changes: 1 addition & 4 deletions docs/src/__examples__/Card/EXPAND_UNCONTROLLED.tsx
View file
@@ -1,11 +1,10 @@
import React from "react";
import { Card, CardSection, Stack, Text } from "@kiwicom/orbit-components";
import { GenderWoman } from "@kiwicom/orbit-components/icons";

export default {
Example: () => (
<Card title="Passenger info">
<CardSection expandable title="Yasmin Karenth" icon={<GenderWoman ariaLabel="female" />}>
<CardSection expandable title="Yasmin Karenth">
<Stack direction="column" spacing="XSmall">
<Text type="secondary">January 20, 1978</Text>
<Text type="secondary">yas.karenth@example.com</Text>
Expand All @@ -17,7 +16,6 @@ export default {
{
component: "Card",
knobs: [
{ name: "icon", type: "icon", defaultValue: "" },
{ name: "loading", type: "boolean", defaultValue: false },
{ name: "title", type: "text", defaultValue: "" },
{ name: "description", type: "text", defaultValue: "" },
Expand All @@ -26,7 +24,6 @@ export default {
{
component: "CardSection",
knobs: [
{ name: "icon", type: "icon", defaultValue: "" },
{ name: "noSeparator", type: "boolean", defaultValue: false },
{ name: "initialExpanded", type: "boolean", defaultValue: false },
{ name: "expandable", type: "boolean", defaultValue: false },
Expand Down
84 changes: 54 additions & 30 deletions docs/src/__examples__/Modal/FIXED_FOOTER.tsx
View file
Expand Up @@ -32,12 +32,16 @@ export default {
</Text>
<Card>
<CardSection
icon={<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />}
title={
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Cairo CAI</Text>
<FlightDirect size="small" />
<Text weight="bold">Dubai SHJ</Text>
<Stack direction="row" spacing="XSmall" align="center">
<Box>
<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
</Box>
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Cairo CAI</Text>
<FlightDirect size="small" />
<Text weight="bold">Dubai SHJ</Text>
</Stack>
</Stack>
}
actions={
Expand All @@ -47,12 +51,16 @@ export default {
}
/>
<CardSection
icon={<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />}
title={
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Dubai SHJ</Text>
<FlightDirect size="small" />
<Text weight="bold">Mumbai BOM</Text>
<Stack direction="row" spacing="XSmall" align="center">
<Box>
<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
</Box>
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Dubai SHJ</Text>
<FlightDirect size="small" />
<Text weight="bold">Mumbai BOM</Text>
</Stack>
</Stack>
}
actions={
Expand All @@ -62,12 +70,16 @@ export default {
}
/>
<CardSection
icon={<CarrierLogo carriers={[{ code: "G8", name: "Go Air" }]} size="large" />}
title={
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Mumbai BOM</Text>
<FlightDirect size="small" />
<Text weight="bold">Malé MLE</Text>
<Stack direction="row" spacing="XSmall" align="center">
<Box>
<CarrierLogo carriers={[{ code: "G8", name: "Go Air" }]} size="large" />
</Box>
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Mumbai BOM</Text>
<FlightDirect size="small" />
<Text weight="bold">Malé MLE</Text>
</Stack>
</Stack>
}
actions={
Expand All @@ -86,12 +98,16 @@ export default {
</Text>
<Card>
<CardSection
icon={<CarrierLogo carriers={[{ code: "G8", name: "Go Air" }]} size="large" />}
title={
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Malé MLE</Text>
<FlightDirect size="small" />
<Text weight="bold">Mumbai BOM</Text>
<Stack direction="row" spacing="XSmall" align="center">
<Box>
<CarrierLogo carriers={[{ code: "G8", name: "Go Air" }]} size="large" />
</Box>
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Malé MLE</Text>
<FlightDirect size="small" />
<Text weight="bold">Mumbai BOM</Text>
</Stack>
</Stack>
}
actions={
Expand All @@ -101,12 +117,16 @@ export default {
}
/>
<CardSection
icon={<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />}
title={
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Mumbai BOM</Text>
<FlightDirect size="small" />
<Text weight="bold">Dubai SHJ</Text>
<Stack direction="row" spacing="XSmall" align="center">
<Box>
<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
</Box>
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Mumbai BOM</Text>
<FlightDirect size="small" />
<Text weight="bold">Dubai SHJ</Text>
</Stack>
</Stack>
}
actions={
Expand All @@ -116,12 +136,16 @@ export default {
}
/>
<CardSection
icon={<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />}
title={
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Dubai SHJ</Text>
<FlightDirect size="small" />
<Text weight="bold">Cairo CAI</Text>
<Stack direction="row" spacing="XSmall" align="center">
<Box>
<CarrierLogo carriers={[{ code: "G9", name: "Air Arabia" }]} size="large" />
</Box>
<Stack direction="row" spacing="XXSmall" align="center">
<Text weight="bold">Dubai SHJ</Text>
<FlightDirect size="small" />
<Text weight="bold">Cairo CAI</Text>
</Stack>
</Stack>
}
actions={
Expand Down
38 changes: 5 additions & 33 deletions packages/orbit-components/src/Card/Card.stories.tsx
View file
Expand Up @@ -3,14 +3,12 @@ import { text, boolean, select } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";

import RenderInRtl from "../utils/rtl/RenderInRtl";
import CarrierLogo from "../CarrierLogo";
import Stack from "../Stack";
import Text from "../Text";
import ButtonLink from "../ButtonLink";
import Badge from "../Badge";
import Clock from "../icons/Clock";
import CardSection from "./CardSection";
import * as Icons from "../icons";
import { ELEMENT_OPTIONS } from "../Heading/consts";

import Card from ".";
Expand All @@ -22,20 +20,13 @@ export default {
export const Default = () => {
const title = text("Title", "Card with title");
const titleAs = select("titleAs", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.H2);
return <Card icon={<Icons.Airplane />} title={title} titleAs={titleAs} />;
return <Card title={title} titleAs={titleAs} />;
};

export const CardWithDescription = () => {
const title = text("Title", "Card with title");
const description = text("Description", "This is description of the card");
return (
<Card
icon={<Icons.Airplane />}
onClose={action("onClose")}
title={title}
description={description}
/>
);
return <Card onClose={action("onClose")} title={title} description={description} />;
};

CardWithDescription.story = {
Expand All @@ -47,7 +38,6 @@ export const CardWithActions = () => {
const description = text("Description", "This is description of the card");
return (
<Card
icon={<Icons.Airplane />}
title={title}
description={description}
actions={
Expand Down Expand Up @@ -84,22 +74,11 @@ export const CardWithSections = () => {
<CardSection
onClick={action("onClick")}
title={sectionTitle}
icon={<Icons.Airplane />}
description={sectionDescription}
titleAs={titleAs}
/>
<CardSection
icon={<Icons.Airplane />}
title={sectionTitle}
description={sectionDescription}
titleAs={titleAs}
/>
<CardSection
icon={<Icons.Airplane />}
title={sectionTitle}
description={sectionDescription}
titleAs={titleAs}
/>
<CardSection title={sectionTitle} description={sectionDescription} titleAs={titleAs} />
<CardSection title={sectionTitle} description={sectionDescription} titleAs={titleAs} />
</Card>
);
};
Expand Down Expand Up @@ -199,7 +178,6 @@ export const CardWithDefaultExpanded = () => {
<Card>
<CardSection
expandable
icon={<CarrierLogo carriers={[{ code: "FR", name: "Ryanair" }]} />}
header={
<Stack inline align="center" justify="end">
<Text type="secondary">Trip length: 1h55m</Text>
Expand All @@ -220,7 +198,6 @@ export const CardWithDefaultExpanded = () => {
Close
</ButtonLink>
}
icon={<CarrierLogo carriers={[{ code: "FR", name: "Ryanair" }]} />}
onClose={action("onClose")}
header={
<Stack inline justify="end">
Expand Down Expand Up @@ -262,7 +239,6 @@ export const CardWithMixedSections = () => {
>
<CardSection
expandable
icon={<Icons.Airplane />}
title={sectionTitle}
actions={
<ButtonLink compact size="small" type="secondary">
Expand Down Expand Up @@ -308,11 +284,7 @@ LoadingCard.story = {

export const Rtl = () => (
<RenderInRtl>
<Card
title="Title of the CardHeader"
icon={<Icons.Airplane />}
description="Description of the CardHeader"
>
<Card title="Title of the CardHeader" description="Description of the CardHeader">
<CardSection title="Content with Heading and text">
<Text>Text in content</Text>
</CardSection>
Expand Down
3 changes: 3 additions & 0 deletions packages/orbit-components/src/Card/CardSection/types.d.ts
View file
Expand Up @@ -21,6 +21,9 @@ type ExpandableConditionalProps =
interface CardProps extends Common.Globals {
readonly title?: React.ReactNode;
readonly titleAs?: As;
/**
* @deprecated icon prop is no longer supported. Icons can still be added manually, if needed.
*/
readonly icon?: React.ReactNode;
readonly description?: React.ReactNode;
readonly children?: React.ReactNode;
Expand Down
2 changes: 0 additions & 2 deletions packages/orbit-components/src/Card/README.md
View file
Expand Up @@ -26,7 +26,6 @@ Table below contains all types of the props available in the Card component.
| id | `string` | | Set `id` for `Card` |
| description | `React.Node` | | The description of the Card |
| header | `React.Node` | | The header of the Card. Useful when you need different layout then combination of eg `title` and `description` |
| icon | `React.Node` | | Display icon on the left |
| loading | `boolean` | | If `true` `Loading` will be rendered |
| onClose | `() => void \| Promise` | | Callback that is triggered when Card is closing |
| title | `React.Node` | | The title of the Card |
Expand Down Expand Up @@ -59,7 +58,6 @@ import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
| expandable | `boolean` | `false` | If `true`, the CardSection will be expandable. |
| expanded | `boolean` | | If you pass either `true` or `false` the CardSection component will controlled component and you will have to manage the state via `onExpand` or `onClose`. Can only be used if `expandable` is `true`. |
| header | `React.Node` | | The header of the CardSection. Useful when you need different layout than combination of e.g. `title` and `description` properties. |
| icon | `React.Node` | | Displayed icon on the left side of the CardSection. |
| initialExpanded | `boolean` | `false` | Initial state of expandable CardSection when it mounts in uncontrolled variant. Can only be used if `expandable` is `true`. |
| noSeparator | `Boolean` | | Optional prop to turn off Separator between `header` and `children` |
| onClick | `event => void \| Promise` | | Function for handling the onClick event. |
Expand Down
5 changes: 0 additions & 5 deletions packages/orbit-components/src/Card/__tests__/index.test.tsx
View file
Expand Up @@ -4,7 +4,6 @@ import userEvent from "@testing-library/user-event";

import Card, { CardSection } from "..";
import Button from "../../Button";
import { Airplane } from "../../icons";

describe("Card", () => {
it("default", () => {
Expand All @@ -13,15 +12,13 @@ describe("Card", () => {
dataTest="test"
title="kek"
description="description"
icon={<Airplane dataTest="airplane" />}
margin={{ top: "12px" }}
actions={<Button>button</Button>}
/>,
);
expect(screen.getByTestId("test"));
expect(screen.getByText("kek")).toBeInTheDocument();
expect(screen.getByText("description")).toBeInTheDocument();
expect(screen.getByTestId("airplane"));
expect(screen.getByRole("button"));
expect(screen.getByTestId("test")).toHaveStyle({
marginTop: "12px",
Expand All @@ -38,7 +35,6 @@ describe("Card", () => {
dataTest="test"
title="kek"
description="description"
icon={<Airplane dataTest="airplane" />}
actions={<Button>action</Button>}
expandable
expanded
Expand All @@ -50,7 +46,6 @@ describe("Card", () => {
expect(screen.getByTestId("test")).toBeInTheDocument();
expect(screen.getByText("kek")).toBeInTheDocument();
expect(screen.getByText("description")).toBeInTheDocument();
expect(screen.getByTestId("airplane")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "action" })).toBeInTheDocument();
expect(screen.getByText("section")).toBeInTheDocument();
});
Expand Down
18 changes: 0 additions & 18 deletions packages/orbit-components/src/Card/components/CardWrapper/index.js.flow
View file

This file was deleted.

21 changes: 0 additions & 21 deletions packages/orbit-components/src/Card/components/Header/index.js.flow
View file

This file was deleted.

0 comments on commit f6ba524

Please sign in to comment.