forked from nodejs/nodejs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add Badge component (nodejs#5776)
* fix: tailwind darkMode config updated * feat: badge component * chore: component enums added * docs: storybook for badge * refactor: unnecessary children type removed * fix: tailwind darkMode config updated * feat: badge component * chore: component enums added * docs: storybook for badge * refactor: unnecessary children type removed * refactor: class names updated, components moved into the single component * refactor: feedbacks from review * refactor: classnames replaced with template literals * refactor: font information moved to wrapper * chore: Unnecessary stories removed * chore: Badge component import order and return statement
- Loading branch information
1 parent
1250ef9
commit 4d93098
Showing
3 changed files
with
123 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
.wrapper { | ||
@apply border rounded-full flex items-center w-fit py-1 pl-1 pr-2.5 text-sm font-medium; | ||
|
||
.icon { | ||
@apply w-4 h-4; | ||
} | ||
|
||
.badge { | ||
@apply rounded-full border px-2.5 py-0.5 mr-2 text-white; | ||
} | ||
|
||
.message { | ||
@apply mr-1; | ||
} | ||
|
||
&.default { | ||
@apply border-green-200 bg-green-100 dark:border-green-700 dark:bg-neutral-900; | ||
|
||
.icon { | ||
@apply text-green-500 dark:text-green-300; | ||
} | ||
|
||
.badge { | ||
@apply border-green-200 dark:border-green-600 bg-green-600; | ||
} | ||
|
||
.message { | ||
@apply text-green-700 dark:text-green-300; | ||
} | ||
} | ||
|
||
&.error { | ||
@apply border-danger-200 dark:border-danger-700 bg-danger-100 dark:bg-neutral-900; | ||
|
||
.icon { | ||
@apply text-danger-500 dark:text-danger-300; | ||
} | ||
|
||
.badge { | ||
@apply border-danger-200 dark:border-danger-600 bg-danger-600; | ||
} | ||
|
||
.message { | ||
@apply text-danger-700 dark:text-danger-300; | ||
} | ||
} | ||
|
||
&.warning { | ||
@apply border-warning-200 dark:border-warning-700 bg-warning-100 dark:bg-neutral-900; | ||
|
||
.icon { | ||
@apply text-warning-500 dark:text-warning-300; | ||
} | ||
|
||
.badge { | ||
@apply border-warning-200 dark:border-warning-600 bg-warning-600; | ||
} | ||
|
||
.message { | ||
@apply text-warning-700 dark:text-warning-300; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import Badge from './'; | ||
import type { Meta as MetaObj, StoryObj } from '@storybook/react'; | ||
|
||
type Story = StoryObj<typeof Badge>; | ||
type Meta = MetaObj<typeof Badge>; | ||
|
||
export const Default: Story = { | ||
args: { | ||
href: '/', | ||
children: 'OpenJS Foundation Certification 2023', | ||
kind: 'default', | ||
badgeText: 'New', | ||
}, | ||
}; | ||
|
||
export const Error: Story = { | ||
args: { | ||
href: '/', | ||
children: 'OpenJS Foundation Certification 2023', | ||
kind: 'error', | ||
badgeText: 'New', | ||
}, | ||
}; | ||
|
||
export const Warning: Story = { | ||
args: { | ||
href: '/', | ||
children: 'OpenJS Foundation Certification 2023', | ||
kind: 'warning', | ||
badgeText: 'New', | ||
}, | ||
}; | ||
|
||
export default { component: Badge } as Meta; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon'; | ||
import LocalizedLink from '@/components/LocalizedLink'; | ||
import type { ComponentProps, FC, PropsWithChildren } from 'react'; | ||
import type Link from 'next/link'; | ||
|
||
import styles from './index.module.scss'; | ||
|
||
type BadgeProps = { | ||
kind?: 'default' | 'warning' | 'error'; | ||
badgeText?: string; | ||
} & ComponentProps<typeof Link>; | ||
|
||
const Badge: FC<PropsWithChildren<BadgeProps>> = ({ | ||
kind = 'default', | ||
badgeText, | ||
children, | ||
...args | ||
}) => ( | ||
<LocalizedLink className={`${styles.wrapper} ${styles[kind]}`} {...args}> | ||
{badgeText && <span className={styles.badge}>{badgeText}</span>} | ||
<span className={styles.message}>{children}</span> | ||
<ArrowRightIcon className={styles.icon} /> | ||
</LocalizedLink> | ||
); | ||
|
||
export default Badge; |