Skip to content

Converted all the css into Tailwind css of Badge component #1739

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.

Sign up for GitHub

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

Merged
merged 13 commits into from
Sep 20, 2023
Merged

Converted all the css into Tailwind css of Badge component #1739

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
42bf6db
Converted all the css to tailwind css of ErrorDisplay page
subhajit20 Sep 18, 2023
827b21d
Converted all the css to tailwind css of ErrorDisplay page
subhajit20 Sep 18, 2023
dc7b10e
Converted all css to tailwind css
subhajit20 Sep 18, 2023
23a6499
Replace all styling with Tailwind
subhajit20 Sep 18, 2023
1055b07
Replace all styling with Tailwind
subhajit20 Sep 18, 2023
1299eac
Converted all the css into tailwind css of Badge component
subhajit20 Sep 19, 2023
71a9b5c
Merge branch 'main' into subhajit20/Replace-all-styling-with-Tailwind
subhajit20 Sep 19, 2023
46f136d
Converted all the css into Tailwind css of Badge component
subhajit20 Sep 19, 2023
be04445
Merge branch 'main' into subhajit20/Replace-all-styling-with-Tailwind
subhajit20 Sep 19, 2023
7462502
Update components/Badge/Badge.js
subhajit20 Sep 19, 2023
e67dbca
Fixed syntax error
subhajit20 Sep 19, 2023
b7ec44a
Merge remote-tracking branch 'origin/main' into subhajit20/Replace-al…
kylemh Sep 20, 2023
d371d87
resolve styling problems
kylemh Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions components/Badge/Badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { bool, element, oneOfType, string } from 'prop-types';
import classNames from 'classnames';
import styles from './Badge.module.css';

Badge.propTypes = {
className: string,
Expand All @@ -16,15 +15,20 @@ Badge.defaultProps = {

function Badge({ className, icon, isImageFirst, label }) {
return (
<figure className={classNames(styles.Badge, className)}>
<figure
className={classNames(
'flex flex-col justify-items-center place-content-start m-2 [&>img>svg]:fill-current [&>img>svg]:my-4 [&>img]:mx-0 [&>img]:h-24' [&>svg]:mx-0 [&>svg]:h-24',
className,
)}
>
{isImageFirst ? (
<>
{icon}
<figcaption className={styles.label}>{label}</figcaption>
<figcaption className="text-center whitespace-nowrap">{label}</figcaption>
</>
) : (
<>
<figcaption className={styles.label}>{label}</figcaption>
<figcaption className="text-center whitespace-nowrap">{label}</figcaption>
{icon}
</>
)}
Expand Down
19 changes: 0 additions & 19 deletions components/Badge/Badge.module.css
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions components/Badge/__tests__/__snapshots__/Badge.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

exports[`Badge should render with many props assigned 1`] = `
<figure
className="Badge test-class"
className="flex flex-col justify-items-center place-content-start m-2 [&>img>svg]:fill-current [&>img>svg]:my-4 [&>img>svg]:mx-0 [&>img>svg]:h-24 test-class"
>
<svg />
<figcaption
className="label"
className="text-center whitespace-nowrap"
>
Badge Icon
</figcaption>
Expand All @@ -15,11 +15,11 @@ exports[`Badge should render with many props assigned 1`] = `

exports[`Badge should render with required props 1`] = `
<figure
className="Badge"
className="flex flex-col justify-items-center place-content-start m-2 [&>img>svg]:fill-current [&>img>svg]:my-4 [&>img>svg]:mx-0 [&>img>svg]:h-24"
>
<svg />
<figcaption
className="label"
className="text-center whitespace-nowrap"
>
Testing
</figcaption>
Expand Down