Skip to content

Commit e27e617

Browse files
committed
chore: Bump package version to 1.0.233 and refactor Card component to use Pills
- Updated package version in package.json to 1.0.233 - Replaced Badge component with Pill component in Card component for better visual representation - Updated related tests and stories to reflect the changes in the Card component - Adjusted types and imports to accommodate the new Pill implementation
1 parent c1c9baf commit e27e617

File tree

25 files changed

+1572
-1595
lines changed

25 files changed

+1572
-1595
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.232",
3+
"version": "1.0.233",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

src/Components/Button/types.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { ReactNode } from "react";
22

3-
import { IconName } from "Components/Icons/types";
4-
53
export enum ButtonVariantEnum {
64
PRIMARY = "primary",
75
SECONDARY = "secondary",
@@ -17,7 +15,7 @@ export interface IButtonProps {
1715
isLoading?: boolean;
1816
outlined?: boolean;
1917
icon?: {
20-
iconName?: IconName;
18+
iconName?: string;
2119
iconClassName?: string;
2220
iconPosition?: "left" | "right";
2321
};

src/Components/Card/Card.stories.tsx

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Meta, StoryObj } from "@storybook/react-vite";
22
import { NavLink } from "react-router-dom";
33

44
import Card from ".";
5-
import { BadgeVariantEnum } from "../Badge/types";
65
import Icon from "../Icon";
76
import { ICardData } from "./types";
87

@@ -81,9 +80,9 @@ const defaultData: ICardData = {
8180
aspectRatio: "16:9",
8281
lazy: false
8382
},
84-
badges: [
85-
{ title: "Premium", variant: BadgeVariantEnum.FILLED },
86-
{ title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE }
83+
pills: [
84+
{ title: "Premium", variant: "primary" },
85+
{ title: "Editor's Choice", variant: "secondary" }
8786
],
8887
tags: [
8988
{ name: "nature", url: "/tags/nature" },
@@ -438,72 +437,72 @@ export const EditOnlyActionNoImage: Story = {
438437
}
439438
};
440439

441-
export const WithBadges: Story = {
440+
export const WithPills: Story = {
442441
args: {
443442
...Default.args,
444443
data: {
445444
...defaultData,
446-
badges: [
447-
{ title: "Premium", variant: BadgeVariantEnum.FILLED },
448-
{ title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE },
445+
pills: [
446+
{ title: "Premium", variant: "primary" },
447+
{ title: "Editor's Choice", variant: "secondary" },
449448
{
450449
title: "Trending",
451-
variant: BadgeVariantEnum.FILLED,
450+
variant: "success",
452451
className: "yl:bg-green-500 yl:text-white"
453452
}
454453
]
455454
}
456455
}
457456
};
458457

459-
export const WithManyBadges: Story = {
458+
export const WithManyPills: Story = {
460459
args: {
461460
...Default.args,
462461
data: {
463462
...defaultData,
464-
badges: [
465-
{ title: "Premium", variant: BadgeVariantEnum.FILLED },
466-
{ title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE },
467-
{ title: "Trending", variant: BadgeVariantEnum.FILLED },
463+
pills: [
464+
{ title: "Premium", variant: "primary" },
465+
{ title: "Editor's Choice", variant: "secondary" },
466+
{ title: "Trending", variant: "success" },
468467
{
469468
title: "New",
470-
variant: BadgeVariantEnum.FILLED,
469+
variant: "indigo",
471470
className: "yl:bg-blue-500 yl:text-white"
472471
},
473-
{ title: "Popular", variant: BadgeVariantEnum.OUTLINE },
472+
{ title: "Popular", variant: "warning" },
474473
{
475474
title: "Verified",
476-
variant: BadgeVariantEnum.FILLED,
475+
variant: "success",
477476
className: "yl:bg-green-600 yl:text-white"
478477
}
479478
]
480479
}
481480
}
482481
};
483482

484-
export const BadgesWithoutImage: Story = {
483+
export const PillsWithoutImage: Story = {
485484
args: {
486485
...Default.args,
487486
data: {
488487
...defaultData,
489488
image: undefined,
490-
badges: [
491-
{ title: "Featured", variant: BadgeVariantEnum.FILLED },
492-
{ title: "Staff Pick", variant: BadgeVariantEnum.OUTLINE }
489+
pills: [
490+
{ title: "Featured", variant: "primary" },
491+
{ title: "Staff Pick", variant: "secondary" }
493492
]
494493
}
495494
}
496495
};
497496

498-
export const BadgesOnly: Story = {
497+
export const PillsOnly: Story = {
499498
args: {
500499
...Default.args,
501500
data: {
502501
...defaultData,
503502
tags: undefined,
504-
badges: [
505-
{ title: "Premium", variant: BadgeVariantEnum.FILLED },
506-
{ title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE }
503+
pills: [
504+
{ title: "Premium", variant: "primary" },
505+
{ title: "Editor's Choice", variant: "secondary" }
507506
]
508507
}
509508
}

src/Components/Card/Card.test.tsx

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { BrowserRouter, NavLink } from "react-router-dom";
33
import { vi } from "vitest";
44

55
import Card from ".";
6-
import { BadgeVariantEnum } from "../Badge/types";
76
import { ICardData } from "./types";
87

98
const mockNavLink = NavLink;
@@ -102,49 +101,49 @@ describe("Card component", () => {
102101
expect(screen.getByText("#typescript")).toBeInTheDocument();
103102
});
104103

105-
it("renders badges when provided", () => {
106-
const cardWithBadges: ICardData = {
104+
it("renders pills when provided", () => {
105+
const cardWithPills: ICardData = {
107106
...fullCardData,
108-
badges: [
109-
{ title: "Premium", variant: BadgeVariantEnum.FILLED },
110-
{ title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE }
107+
pills: [
108+
{ title: "Premium", variant: "primary" },
109+
{ title: "Editor's Choice", variant: "secondary" }
111110
]
112111
};
113112

114-
renderCard({ data: cardWithBadges });
113+
renderCard({ data: cardWithPills });
115114

116115
expect(screen.getByText("Premium")).toBeInTheDocument();
117116
expect(screen.getByText("Editor's Choice")).toBeInTheDocument();
118117
});
119118

120-
it("renders multiple badges correctly", () => {
121-
const cardWithManyBadges: ICardData = {
119+
it("renders multiple pills correctly", () => {
120+
const cardWithManyPills: ICardData = {
122121
...fullCardData,
123-
badges: [
124-
{ title: "Premium", variant: BadgeVariantEnum.FILLED },
125-
{ title: "Editor's Choice", variant: BadgeVariantEnum.OUTLINE },
126-
{ title: "Trending", variant: BadgeVariantEnum.FILLED },
127-
{ title: "New", variant: BadgeVariantEnum.OUTLINE }
122+
pills: [
123+
{ title: "Premium", variant: "primary" },
124+
{ title: "Editor's Choice", variant: "secondary" },
125+
{ title: "Trending", variant: "success" },
126+
{ title: "New", variant: "warning" }
128127
]
129128
};
130129

131-
renderCard({ data: cardWithManyBadges });
130+
renderCard({ data: cardWithManyPills });
132131

133132
expect(screen.getByText("Premium")).toBeInTheDocument();
134133
expect(screen.getByText("Editor's Choice")).toBeInTheDocument();
135134
expect(screen.getByText("Trending")).toBeInTheDocument();
136135
expect(screen.getByText("New")).toBeInTheDocument();
137136
});
138137

139-
it("renders card without badges when none provided", () => {
140-
const cardWithoutBadges: ICardData = {
138+
it("renders card without pills when none provided", () => {
139+
const cardWithoutPills: ICardData = {
141140
...fullCardData,
142-
badges: undefined
141+
pills: undefined
143142
};
144143

145-
renderCard({ data: cardWithoutBadges });
144+
renderCard({ data: cardWithoutPills });
146145

147-
// Should not render any badges
146+
// Should not render any pills
148147
expect(screen.queryByText("Premium")).not.toBeInTheDocument();
149148
expect(screen.queryByText("Editor's Choice")).not.toBeInTheDocument();
150149
});

src/Components/Card/Components/CardBadges.test.tsx

Lines changed: 0 additions & 71 deletions
This file was deleted.

src/Components/Card/Components/CardBadges.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { render, screen } from "@testing-library/react";
2+
3+
import { IPill } from "../types";
4+
import CardPills from "./CardPills";
5+
6+
describe("CardPills component", () => {
7+
const mockPills: IPill[] = [
8+
{ title: "Premium", variant: "primary" },
9+
{ title: "Editor's Choice", variant: "secondary" },
10+
{ title: "Custom", className: "custom-class" }
11+
];
12+
13+
it("renders pills correctly", () => {
14+
render(<CardPills pills={mockPills} />);
15+
16+
expect(screen.getByText("Premium")).toBeInTheDocument();
17+
expect(screen.getByText("Editor's Choice")).toBeInTheDocument();
18+
expect(screen.getByText("Custom")).toBeInTheDocument();
19+
});
20+
21+
it("renders nothing when pills array is empty", () => {
22+
const { container } = render(<CardPills pills={[]} />);
23+
expect(container.firstChild).toBeNull();
24+
});
25+
26+
it("renders nothing when pills prop is undefined", () => {
27+
const { container } = render(<CardPills pills={undefined} />);
28+
expect(container.firstChild).toBeNull();
29+
});
30+
31+
it("renders pills with correct variants", () => {
32+
render(<CardPills pills={mockPills} />);
33+
34+
const premiumPill = screen.getByText("Premium");
35+
const editorChoicePill = screen.getByText("Editor's Choice");
36+
37+
expect(premiumPill).toHaveClass("yl:bg-primary/10");
38+
expect(editorChoicePill).toHaveClass("yl:bg-muted/10");
39+
});
40+
41+
it("applies custom className to pills", () => {
42+
render(<CardPills pills={mockPills} />);
43+
44+
const customPill = screen.getByText("Custom");
45+
expect(customPill).toHaveClass("custom-class");
46+
});
47+
48+
it("renders pills in a flex container with proper spacing", () => {
49+
const { container } = render(<CardPills pills={mockPills} />);
50+
51+
const pillsContainer = container.firstChild as HTMLElement;
52+
expect(pillsContainer).toHaveClass(
53+
"yl:flex",
54+
"yl:items-center",
55+
"yl:gap-2",
56+
"yl:flex-wrap",
57+
"yl:mt-3",
58+
"yl:mb-1"
59+
);
60+
});
61+
62+
it("handles single pill correctly", () => {
63+
const singlePill: IPill[] = [{ title: "Single", variant: "primary" }];
64+
65+
render(<CardPills pills={singlePill} />);
66+
expect(screen.getByText("Single")).toBeInTheDocument();
67+
});
68+
});

0 commit comments

Comments
 (0)