Skip to content
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.

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

feat(QTM-647): Conversion of styles from Styled Components to CSS modules of Grid components #561

Merged
merged 37 commits into from
May 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
d3bd0e2
feat: updates yarn.lock]
alizeleal Apr 18, 2024
32e0989
updates unit tests
alizeleal Apr 18, 2024
0193a6c
updates nvmrc
alizeleal Apr 18, 2024
5289649
Merge pull request #556 from catho/QTM-687
alizeleal Apr 22, 2024
3e5bb7f
feat(menu): adds menu component based on mui menu
santanasara Apr 25, 2024
d001939
refactor(menu): improves types and component readbility
santanasara Apr 30, 2024
5d33faf
test(menu): improves test by removing unecessary id
santanasara Apr 30, 2024
507af29
fix(menu): content typing in menu items
santanasara Apr 30, 2024
38e065d
refactor(menu): improves aria labels on documentation component
santanasara Apr 30, 2024
cb27ba9
fix(menu): navigation issues
santanasara May 2, 2024
fc066e9
Merge pull request #558 from santanasara/feat/RA-3888-add-menu-component
MarcosViniciusPC May 3, 2024
15b75a2
docs: Inclusion in the CONTRIBUTING.MD and README.md docs of the sugg…
MarcosViniciusPC May 7, 2024
bca0c03
docs(README.MD): Removed line breaks in the motivation text for why n…
MarcosViniciusPC May 7, 2024
69dcd69
docs: Adding suggestions for implementing new components
MarcosViniciusPC May 7, 2024
eac40fe
feat(icon): add lightbulb_outlined icon
LeonardsonCC May 9, 2024
e516906
Update CONTRIBUTING.MD
MarcosViniciusPC May 9, 2024
4b2a3ad
Update README.md
MarcosViniciusPC May 9, 2024
4cdfe35
Update CONTRIBUTING.MD
MarcosViniciusPC May 9, 2024
c1f9b8d
Update README.md
MarcosViniciusPC May 9, 2024
d80541e
Merge pull request #560 from catho/feat/add-lightbulb-icon
MarcosViniciusPC May 9, 2024
3edf66a
Merge pull request #559 from catho/QTM-698
MarcosViniciusPC May 10, 2024
f2cac30
feat: Conversion of styles from Styled Components to CSS modules of G…
MarcosViniciusPC May 15, 2024
304947e
chore(index.d.ts): Removal of unused props from grid subcomponents ty…
MarcosViniciusPC May 15, 2024
81e8f43
test(Grid.regression-test.story.jsx): Addition of regressive testing …
MarcosViniciusPC May 15, 2024
73d406b
chore: Removing unused files and functions
MarcosViniciusPC May 15, 2024
64869ea
test: Removed 'hide' prop check unit tests from Container
MarcosViniciusPC May 15, 2024
b95725b
chore(SegmentedControle.jsx): Removal of 'withBreakpoints' prop passe…
MarcosViniciusPC May 15, 2024
a284112
test(styleSheetSerializer.js): Fix to avoid injection of empty 'media…
MarcosViniciusPC May 15, 2024
b3f970e
test: Updated snapshots and screenshots
MarcosViniciusPC May 15, 2024
544227d
Merge branch 'master' into QTM-647
MarcosViniciusPC May 15, 2024
b10ab5b
chore: Updating MUI in yarn.lock and snapshots
MarcosViniciusPC May 15, 2024
5f0ab3e
chore(theme.css): Adding all theme colors
MarcosViniciusPC May 15, 2024
5171300
chore(Container.module.css): Nested container size fix
MarcosViniciusPC May 16, 2024
345feb9
chore: Classes passed to the component have priority over the compone…
MarcosViniciusPC May 16, 2024
bd68598
chore: Visual Test Container now contains two nested Containers
MarcosViniciusPC May 16, 2024
057aa0d
chore: Classes passed to the component have priority over the compone…
MarcosViniciusPC May 16, 2024
49c656d
chore: updated snapshots and screenshots
MarcosViniciusPC May 16, 2024
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
Binary file added .loki/reference/chrome_iphone7_Grid_Container.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .loki/reference/chrome_iphone7_Menu_Default.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .loki/reference/chrome_laptop_Grid_Container.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .loki/reference/chrome_laptop_Menu_Default.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
16.15.1
16.17.1
13 changes: 11 additions & 2 deletions CONTRIBUTING.MD
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
## Summary

- [Contribution Prerequisites](#contribution-prerequisites)
- [Important Notices](#important-notices)
- [Getting Started](#getting-started)
- [Editing a Component](#editing-a-component)

Expand All @@ -13,7 +14,7 @@ You can contribute in many ways: opening or participating of a issue, reporting

## Contribution Prerequisites

- Node v16.15.1;
- Node v16.17.1;

Obs.: We have .nvmrc. When you run nvm use, it will set the node to the same version based on the .nvmrc file in the repository.

Expand All @@ -26,7 +27,15 @@ Obs.: We have .nvmrc. When you run nvm use, it will set the node to the same ver
Why _commitizen_? To enforce a padronization to the commits and make sure every commit follows the same profile.

---
## Important Notices ⚠️

We do not recommend using ready-made components from [MUI](https://mui.com/material-ui/getting-started/) when implementing Quantum components for performance and long-term maintenance reasons. MUI is included in our library only to enable the use of [Material Icons](https://mui.com/material-ui/material-icons/).

The MUI library, as well as the Styled Components, uses internally resources and libraries that aren't compatible with [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components), a resource added to Next JS 13. We intend to enable its use in the future to improve the performance of our components. Therefore, we plan to remove the mentioned libraries completely from our components.

Also, we do not recommend using any other ready-made component library. We suggest for new components to have DOM structure, styling and functionalities completely implemented internally, without any dependence on third-party libraries.

---
## Getting Started
1. Fork the project, [Help Guide to Fork a repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo);
2. Clone the project;
Expand Down Expand Up @@ -127,7 +136,7 @@ Why _commitizen_? To enforce a padronization to the commits and make sure every

13. Submit a pull request;

Open your pull request. If you don't know how do it, check this [tutorial](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
Open your pull request. If you don't know how do it, check this [tutorial](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).

14. Review flow for Pull Requests:

Expand Down
8 changes: 8 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@
> **Warning**
> Quantum requires react@16.14.0 or higher.

## Notices ⚠️

For performance and long-term maintenance reasons, we do not recommend using [MUI](https://mui.com/material-ui/getting-started/) in Quantum components implementation. MUI is present in our library only to allow the use of [Material Icons](https://mui.com/material-ui/material-icons/).

Also, we do not recommend using any other ready-made component library. We suggest for new components to have DOM structure, styling and functionalities completely implemented internally, without any dependence on third-party libraries.

For more details, visit the "Important notices" section at [CONTRIBUTING.MD](https://github.com/catho/quantum/blob/master/CONTRIBUTING.MD#important-notices)

## Getting started

Quantum is available as an [npm package](https://github.com/catho/quantum/pkgs/npm/quantum). It can be installed using:
Expand Down
2 changes: 1 addition & 1 deletion components/Alert/__snapshots__/Alert.unit.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1343,7 +1343,7 @@ exports[`Alert component Should match the snapshot with an icon 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
/>
</svg>
<span>
Expand Down
12 changes: 6 additions & 6 deletions components/Avatar/__snapshots__/Avatar.unit.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ exports[`<Avatar /> Should match snapshot With href 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
/>
</svg>
</a>
Expand Down Expand Up @@ -83,7 +83,7 @@ exports[`<Avatar /> Should match snapshot With notification 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
/>
</svg>
<span
Expand Down Expand Up @@ -168,7 +168,7 @@ exports[`<Avatar /> Should match snapshot With text 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
/>
</svg>
<span
Expand Down Expand Up @@ -216,7 +216,7 @@ exports[`<Avatar /> Should match snapshot With toggle icon 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
/>
</svg>
<svg
Expand All @@ -229,7 +229,7 @@ exports[`<Avatar /> Should match snapshot With toggle icon 1`] = `
viewBox="0 0 24 24"
>
<path
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
/>
</svg>
</span>
Expand Down Expand Up @@ -268,7 +268,7 @@ exports[`<Avatar /> Should match snapshot Without picture 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
/>
</svg>
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<button
Expand Down Expand Up @@ -175,7 +175,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<a
Expand All @@ -200,7 +200,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<a
Expand All @@ -224,7 +224,7 @@ exports[`<Breadcrumbs /> should match the snapshots 1`] = `
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<span>
Expand Down Expand Up @@ -382,7 +382,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<button
Expand Down Expand Up @@ -410,7 +410,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<a
Expand All @@ -435,7 +435,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<a
Expand All @@ -459,7 +459,7 @@ exports[`<Breadcrumbs /> should match the snapshots when breadcrumbs is collapse
viewBox="0 0 24 24"
>
<path
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
/>
</svg>
<span>
Expand Down Expand Up @@ -492,7 +492,7 @@ exports[`<Breadcrumbs /> should match the snapshots when collapsed breadcrumbs i
class=\\"MuiSvgIcon-root MuiSvgIcon-fontSizeMedium Breadcrumbs__BreadcrumbIcon-sc-d5msik-2 bJMWQD css-1696fkf-MuiSvgIcon-root\\"
data-qtm-preloader=\\"icon\\"
@@ -46,21 +47,21 @@
d=\\"M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\\"
d=\\"M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z\\"
/>
</svg>
<button
Expand Down
16 changes: 8 additions & 8 deletions components/Button/__snapshots__/Button.unit.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ exports[`Button component should render a button only icon state 1`] = `
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
/>
</svg>
</button>
Expand Down Expand Up @@ -198,7 +198,7 @@ exports[`Button component should render a button only icon state 2`] = `
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
/>
</svg>
</button>
Expand Down Expand Up @@ -273,7 +273,7 @@ exports[`Button component should render a button only icon state 3`] = `
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
/>
</svg>
</button>
Expand Down Expand Up @@ -348,7 +348,7 @@ exports[`Button component should render a button only icon state 4`] = `
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
/>
</svg>
</button>
Expand Down Expand Up @@ -423,7 +423,7 @@ exports[`Button component should render a button only icon state 5`] = `
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
/>
</svg>
</button>
Expand Down Expand Up @@ -1041,7 +1041,7 @@ exports[`Button component with an icon should match secondary snapshot 1`] = `
viewBox="0 0 24 24"
>
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
/>
</svg>
Search
Expand Down Expand Up @@ -1117,7 +1117,7 @@ exports[`Button component with an icon should match secondary snapshot 2`] = `
viewBox="0 0 24 24"
>
<path
d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"
d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2m0 14H4v-6h16zm0-10H4V6h16z"
/>
</svg>
Payment
Expand Down Expand Up @@ -1193,7 +1193,7 @@ exports[`Button component with an icon should match secondary snapshot 3`] = `
viewBox="0 0 24 24"
>
<path
d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2m-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1z"
/>
</svg>
Lock
Expand Down
2 changes: 1 addition & 1 deletion components/Card/Card.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ class Card extends Component {
render() {
const { className = '', style, backgroundOpacity, ...rest } = this.props;
const classArticle = classNames(
className,
styles['card-wrapper'],
'shadow-1',
className,
);

return (
Expand Down
2 changes: 1 addition & 1 deletion components/Card/sub-components/Content.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classNames from 'classnames';
import styles from './Content.module.css';

const Content = ({ className = '', children, ...props }) => {
const classContent = classNames(className, styles.content);
const classContent = classNames(styles.content, className);
return (
<div className={classContent} {...props}>
{children}
Expand Down
2 changes: 1 addition & 1 deletion components/Card/sub-components/Description.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import styles from './Description.module.css';

const Description = ({ className = '', children, small, ...props }) => {
const classDescription = classNames(
className,
styles['description-content'],
{ [styles['description-content-small']]: small },
className,
);

return (
Expand Down
2 changes: 1 addition & 1 deletion components/Card/sub-components/Footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classNames from 'classnames';
import styles from './Footer.module.css';

const Footer = ({ className = '', children, ...props }) => {
const classFooter = classNames(className, styles['footer-wrapper']);
const classFooter = classNames(styles['footer-wrapper'], className);

return (
<footer {...props} className={classFooter}>
Expand Down
2 changes: 1 addition & 1 deletion components/Card/sub-components/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classNames from 'classnames';
import styles from './Header.module.css';

const Header = ({ className = '', children, ...props }) => {
const classHeader = classNames(className, styles['header-wrapper']);
const classHeader = classNames(styles['header-wrapper'], className);

return (
<header className={classHeader} {...props}>
Expand Down
2 changes: 1 addition & 1 deletion components/Card/sub-components/HeaderText.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import classNames from 'classnames';
import styles from './HeaderText.module.css';

const HeaderText = ({ className = '', children, ...props }) => {
const classHeaderText = classNames(className, styles['header-text']);
const classHeaderText = classNames(styles['header-text'], className);

return (
<div className={classHeaderText} {...props}>
Expand Down
2 changes: 1 addition & 1 deletion components/Card/sub-components/Media.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import classNames from 'classnames';
import styles from './Media.module.css';

const Media = ({ className = '', style, src, alt, ...props }) => {
const classMedia = classNames(className, styles['media-wrapper']);
const classMedia = classNames(styles['media-wrapper'], className);
return (
<div className={classMedia} style={style}>
<img className={styles['media-image']} src={src} alt={alt} {...props} />
Expand Down
10 changes: 7 additions & 3 deletions components/Card/sub-components/Thumbnail.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ import classNames from 'classnames';
import styles from './Thumbnail.module.css';

const Thumbnail = ({ className = '', src, alt, rounded, ...props }) => {
const classImg = classNames(className, styles.thumbnail, {
[styles['thumbnail-rounded']]: rounded,
});
const classImg = classNames(
styles.thumbnail,
{
[styles['thumbnail-rounded']]: rounded,
},
className,
);

return (
<img loading="lazy" src={src} alt={alt} className={classImg} {...props} />
Expand Down
10 changes: 7 additions & 3 deletions components/Card/sub-components/Title.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,13 @@ import classNames from 'classnames';
import styles from './Title.module.css';

const Title = ({ className = '', children, small, ...props }) => {
const classH2 = classNames(className, styles.title, {
[styles['title-small']]: small,
});
const classH2 = classNames(
styles.title,
{
[styles['title-small']]: small,
},
className,
);

return (
<h2 className={classH2} {...props}>
Expand Down
Loading
Loading