Skip to content

Commit 7e39d83

Browse files
agjsagjs
committed
chore: Bump package version and add Tabs component
- Updated package version in package.json to include react-tabs at version 6.1.0 - Introduced Tabs component with TabList and TabPanel for better UI organization - Updated index.ts and types.ts to include new Tabs component and its types - Enhanced existing components with new styling and functionality adjustments
1 parent 31b1131 commit 7e39d83

File tree

23 files changed

+964
-16
lines changed

23 files changed

+964
-16
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@
155155
"react-select": "5.10.1",
156156
"react-select-async-paginate": "0.7.10",
157157
"react-step-wizard": "5.3.11",
158+
"react-tabs": "6.1.0",
158159
"react-tooltip": "5.28.1",
159160
"sanitize-html": "2.17.0",
160161
"tippy.js": "6.3.7"

‎pnpm-lock.yaml‎

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Components/AuthorCard/__snapshots__/AuthorCard.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ exports[`AuthorCard component > renders correctly 1`] = `
1212
class="yl:hidden yl:md:block"
1313
>
1414
<div
15-
class="yl:sm:mt-0 yl:rounded-full yl:overflow-hidden"
15+
class="yl:sm:mt-0 yl:rounded-full yl:overflow-hidden yl:flex yl:items-center yl:justify-center yl:flex-shrink-0"
1616
style="width: 75px; height: 75px;"
1717
>
1818
<img
1919
alt="John Doe"
20+
class="yl:bg-background yl:object-cover yl:object-center yl:w-full yl:h-full"
2021
loading="lazy"
2122
src="https://avatars.githubusercontent.com/u/2085263?v=4"
22-
style="width: 75px; height: 75px;"
2323
/>
2424
</div>
2525
</div>

‎src/Components/Avatar/Avatar.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const Default: Story = {
2323

2424
export const WithURL: Story = {
2525
args: {
26-
src: "https://avatars.githubusercontent.com/u/2085263?v=4",
26+
src: "https://imagedelivery.net/mG9yIKlH_7CYi04eBXEpYg/47d46959-283a-4d0f-4ff3-6a1fa4686b00/public",
2727
size: 150
2828
}
2929
};

‎src/Components/Avatar/__snapshots__/Avatar.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Avatar component > renders correctly - snapshot test 1`] = `
44
<DocumentFragment>
55
<div
6-
class="yl:sm:mt-0 yl:rounded-full yl:overflow-hidden"
6+
class="yl:sm:mt-0 yl:rounded-full yl:overflow-hidden yl:flex yl:items-center yl:justify-center yl:flex-shrink-0"
77
data-testid="svg-avatar-parent"
88
style="width: 50px; height: 50px;"
99
>

‎src/Components/Avatar/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Avatar: FC<IAvatarProps> = ({
1313
className
1414
}) => {
1515
const classes = classNames(
16-
"yl:sm:mt-0 yl:rounded-full yl:overflow-hidden",
16+
"yl:sm:mt-0 yl:rounded-full yl:overflow-hidden yl:flex yl:items-center yl:justify-center yl:flex-shrink-0",
1717
className
1818
);
1919

@@ -37,7 +37,7 @@ const Avatar: FC<IAvatarProps> = ({
3737
style={{ width: `${size}px`, height: `${size}px` }}
3838
>
3939
<img
40-
style={{ width: `${size}px`, height: `${size}px` }}
40+
className='yl:bg-background yl:object-cover yl:object-center yl:w-full yl:h-full'
4141
src={src}
4242
alt={alt}
4343
loading='lazy'

‎src/Components/Button/Button.utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ButtonVariantEnum, IGetButtonClassesArgs } from "./types";
44

55
export const getStyles = (isLoading: boolean) => {
66
return {
7-
base: "yl:select-none yl:px-3 yl:py-2 yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2",
7+
base: "yl:select-none yl:px-3 yl:py-2 yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:transition-all yl:duration-200 yl:transform yl:hover:scale-105",
88
disabled: "yl:cursor-not-allowed yl:opacity-70",
99
enabled: classNames({
1010
"yl:cursor-pointer": !isLoading

‎src/Components/Button/__snapshots__/Button.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Button component > renders correctly - snapshot test 1`] = `
44
<DocumentFragment>
55
<button
6-
class="yl:select-none yl:px-3 yl:py-2 yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:cursor-pointer yl:border-primary yl:bg-primary yl:text-background yl:hover:bg-transparent yl:hover:text-primary"
6+
class="yl:select-none yl:px-3 yl:py-2 yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:transition-all yl:duration-200 yl:transform yl:hover:scale-105 yl:cursor-pointer yl:border-primary yl:bg-primary yl:text-background yl:hover:bg-transparent yl:hover:text-primary"
77
type="button"
88
>
99
<div

‎src/Components/Card/Card.stories.tsx‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -508,4 +508,186 @@ export const PillsOnly: Story = {
508508
}
509509
};
510510

511+
export const WithFooterActions: Story = {
512+
args: {
513+
...Default.args,
514+
footerActions: [
515+
{
516+
label: "View Details",
517+
onClick: e => {
518+
action("view-details-clicked")(e);
519+
window.alert("View Details clicked");
520+
},
521+
variant: "primary",
522+
icon: <Icon iconName='IconEye' className='w-4 h-4' />
523+
},
524+
{
525+
label: "Share",
526+
onClick: e => {
527+
action("share-clicked")(e);
528+
window.alert("Share clicked");
529+
},
530+
variant: "outlined",
531+
icon: <Icon iconName='IconShare' className='w-4 h-4' />
532+
}
533+
]
534+
}
535+
};
536+
537+
export const WithSingleFooterAction: Story = {
538+
args: {
539+
...Default.args,
540+
footerActions: [
541+
{
542+
label: "Read More",
543+
onClick: e => {
544+
action("read-more-clicked")(e);
545+
window.alert("Read More clicked");
546+
},
547+
variant: "primary",
548+
icon: <Icon iconName='IconArrowRight' className='w-4 h-4' />
549+
}
550+
]
551+
}
552+
};
553+
554+
export const WithMultipleFooterActions: Story = {
555+
args: {
556+
...Default.args,
557+
footerActions: [
558+
{
559+
label: "Like",
560+
onClick: e => {
561+
action("like-clicked")(e);
562+
window.alert("Like clicked");
563+
},
564+
variant: "primary",
565+
icon: <Icon iconName='IconHeart' className='w-4 h-4' />
566+
},
567+
{
568+
label: "Comment",
569+
onClick: e => {
570+
action("comment-clicked")(e);
571+
window.alert("Comment clicked");
572+
},
573+
variant: "outlined",
574+
icon: <Icon iconName='IconMessage' className='w-4 h-4' />
575+
},
576+
{
577+
label: "Save",
578+
onClick: e => {
579+
action("save-clicked")(e);
580+
window.alert("Save clicked");
581+
},
582+
variant: "outlined",
583+
icon: <Icon iconName='IconBookmark' className='w-4 h-4' />
584+
},
585+
{
586+
label: "Delete",
587+
onClick: e => {
588+
action("delete-clicked")(e);
589+
window.alert("Delete clicked");
590+
},
591+
variant: "danger",
592+
icon: <Icon iconName='IconDeleteBin' className='w-4 h-4' />
593+
}
594+
]
595+
}
596+
};
597+
598+
export const WithTopAndBottomActions: Story = {
599+
args: {
600+
...Default.args,
601+
actions: [
602+
{
603+
label: "Edit",
604+
onClick: e => {
605+
action("edit-clicked")(e);
606+
window.alert("Edit action clicked");
607+
},
608+
variant: "primary",
609+
icon: <Icon iconName='IconEdit' className='w-4 h-4' />
610+
}
611+
],
612+
footerActions: [
613+
{
614+
label: "View Comments",
615+
onClick: e => {
616+
action("view-comments-clicked")(e);
617+
window.alert("View Comments clicked");
618+
},
619+
variant: "outlined",
620+
icon: <Icon iconName='IconMessage' className='w-4 h-4' />
621+
},
622+
{
623+
label: "Share Article",
624+
onClick: e => {
625+
action("share-article-clicked")(e);
626+
window.alert("Share Article clicked");
627+
},
628+
variant: "primary",
629+
icon: <Icon iconName='IconShare' className='w-4 h-4' />
630+
}
631+
]
632+
}
633+
};
634+
635+
export const FooterActionsNoImage: Story = {
636+
args: {
637+
...Default.args,
638+
data: {
639+
...defaultData,
640+
image: undefined
641+
},
642+
footerActions: [
643+
{
644+
label: "Continue Reading",
645+
onClick: e => {
646+
action("continue-reading-clicked")(e);
647+
window.alert("Continue Reading clicked");
648+
},
649+
variant: "primary",
650+
icon: <Icon iconName='IconArrowRight' className='w-4 h-4' />
651+
},
652+
{
653+
label: "Add to Favorites",
654+
onClick: e => {
655+
action("add-to-favorites-clicked")(e);
656+
window.alert("Add to Favorites clicked");
657+
},
658+
variant: "outlined",
659+
icon: <Icon iconName='IconHeart' className='w-4 h-4' />
660+
}
661+
]
662+
}
663+
};
664+
665+
export const ConditionalFooterActions: Story = {
666+
args: {
667+
...Default.args,
668+
footerActions: [
669+
{
670+
label: "Visible Action",
671+
onClick: e => {
672+
action("visible-action-clicked")(e);
673+
window.alert("Visible Action clicked");
674+
},
675+
variant: "primary",
676+
show: true,
677+
icon: <Icon iconName='IconCheck' className='w-4 h-4' />
678+
},
679+
{
680+
label: "Hidden Action",
681+
onClick: e => {
682+
action("hidden-action-clicked")(e);
683+
window.alert("Hidden Action clicked");
684+
},
685+
variant: "danger",
686+
show: false,
687+
icon: <Icon iconName='IconX' className='w-4 h-4' />
688+
}
689+
]
690+
}
691+
};
692+
511693
export default CardStories;

0 commit comments

Comments
 (0)