From cce1c3dde10c0a8f8ef15eb3b6d8e9e80d05df2b Mon Sep 17 00:00:00 2001 From: Marcos Conceicao Date: Wed, 9 Oct 2024 10:08:37 -0300 Subject: [PATCH 1/4] docs(Alert.mdx): Removing onClose from component usage examples and adding component-specific exampl --- stories/Alert/Alert.mdx | 9 ++++++++- stories/Alert/Alert.stories.jsx | 12 +++++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/stories/Alert/Alert.mdx b/stories/Alert/Alert.mdx index 8dc3874de..cac9f5930 100644 --- a/stories/Alert/Alert.mdx +++ b/stories/Alert/Alert.mdx @@ -9,7 +9,8 @@ import { Primary, Success, Error, - WithIcon + WithIcon, + WithClose } from './Alert.stories.jsx'; import EvaluationForm from '../../stories/shared/EvaluationForm' @@ -65,4 +66,10 @@ import Alert from '@catho/quantum/Alert'; +### With Close + + + + + diff --git a/stories/Alert/Alert.stories.jsx b/stories/Alert/Alert.stories.jsx index d900a8776..7d029cac7 100644 --- a/stories/Alert/Alert.stories.jsx +++ b/stories/Alert/Alert.stories.jsx @@ -16,11 +16,7 @@ const sampleChildren = ( ); -const Template = (args) => ( - {}} {...args}> - {sampleChildren} - -); +const Template = (args) => {sampleChildren}; export const Default = Template.bind({}); @@ -44,3 +40,9 @@ WithIcon.args = { skin: 'primary', icon: 'info', }; + +export const WithClose = Template.bind({}); +WithClose.args = { + skin: 'primary', + onClose: () => {}, +}; From 3cbcc82900505207a2cc8c4591ba22b2d575947b Mon Sep 17 00:00:00 2001 From: Marcos Conceicao Date: Fri, 18 Oct 2024 10:47:45 -0300 Subject: [PATCH 2/4] feat(Pagination.jsx): Migrated to css modules --- components/Pagination/Pagination.jsx | 18 +- components/Pagination/Pagination.module.css | 5 + .../Pagination.unit.test.jsx.snap | 2961 +++++------------ components/Pagination/index.css | 5 + .../sub-components/ActionButton.jsx | 71 +- .../sub-components/ActionButton.module.css | 28 + components/Pagination/sub-components/Dots.jsx | 73 +- .../Pagination/sub-components/Dots.module.css | 34 + .../Pagination/sub-components/Mobile.jsx | 142 +- .../sub-components/Mobile.module.css | 37 + .../Pagination/sub-components/PageButton.jsx | 79 +- .../sub-components/PageButton.module.css | 45 + .../ActionButton.unit.test.jsx.snap | 62 +- .../__snapshots__/Dots.unit.test.jsx.snap | 33 +- .../PageButton.unit.test.jsx.snap | 80 +- components/index.css | 1 + 16 files changed, 1172 insertions(+), 2502 deletions(-) create mode 100644 components/Pagination/Pagination.module.css create mode 100644 components/Pagination/index.css create mode 100644 components/Pagination/sub-components/ActionButton.module.css create mode 100644 components/Pagination/sub-components/Dots.module.css create mode 100644 components/Pagination/sub-components/Mobile.module.css create mode 100644 components/Pagination/sub-components/PageButton.module.css diff --git a/components/Pagination/Pagination.jsx b/components/Pagination/Pagination.jsx index 5d74fb02e..33cc5baec 100644 --- a/components/Pagination/Pagination.jsx +++ b/components/Pagination/Pagination.jsx @@ -1,16 +1,11 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import classNames from 'classnames'; import { Hide } from '../Grid'; import Desktop from './sub-components/Desktop'; import Mobile from './sub-components/Mobile'; - -const Wrapper = styled.nav` - align-items: center; - display: flex; - justify-content: center; -`; +import styles from './Pagination.module.css'; class Pagination extends Component { constructor(props) { @@ -36,6 +31,7 @@ class Pagination extends Component { hideLastPagination, ...props } = this.props; + const wrapperClass = classNames(styles.wrapper); const handlePageClick = (page) => (e) => { if (!onPageClick) { @@ -76,15 +72,15 @@ class Pagination extends Component { return ( <> - + - + ); diff --git a/components/Pagination/Pagination.module.css b/components/Pagination/Pagination.module.css new file mode 100644 index 000000000..adfe9e24c --- /dev/null +++ b/components/Pagination/Pagination.module.css @@ -0,0 +1,5 @@ +.wrapper { + align-items: center; + display: flex; + justify-content: center; +} \ No newline at end of file diff --git a/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap b/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap index bd92e752c..0a453197c 100644 --- a/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap +++ b/components/Pagination/__snapshots__/Pagination.unit.test.jsx.snap @@ -2,195 +2,102 @@ exports[` Snapshots should match snapshot when last pagination is not displayed 1`] = ` - @media (max-width:calc(600px - 1px)) { - .Hide-module__hide-xsmall___CSbWx { - display: none!important; - } -} - -@media (min-width:600px) and (max-width:calc(1024px - 1px)) { - .Hide-module__hide-small___4sGBt { - display: none!important; - } -} - -.c1 { + .ActionButton-module__action___kJcys { + border: 2px solid transparent; + border-radius: 4px; + color: var(--qtm-colors-primary-700); cursor: pointer; - font-weight: normal; + font-weight: 400; + margin: 0 var(--qtm-spacing-xxsmall); outline: none; + padding: var(--qtm-spacing-xsmall) var(--qtm-spacing-medium); text-align: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out; - transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out; + transition: color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; - -ms-user-select: none; user-select: none; white-space: nowrap; - border-radius: 4px; - border: 2px solid transparent; - margin: 0 4px; - padding: 8px 16px; - color: #1250C4; -} - -.c1[aria-disabled=true] { - display: none; -} - -.c1[aria-disabled=false]:hover, -.c1[aria-disabled=false]:focus { - background-color: #E5EDFC; - border: 2px solid #1250C4; } -.c4 { +.Dots-module__wrapper-dot___2KnG7 { display: inline-block; - margin: 0 4px; + margin: 0 var(--qtm-spacing-xxsmall); min-width: 22px; } -.c5 { +.Dots-module__pagination-dot___VsFe4 { position: relative; } -.c5, -.c5:after, -.c5:before { - background-color: #e0e0e0; +.Dots-module__pagination-dot___VsFe4, +.Dots-module__pagination-dot___VsFe4:after, +.Dots-module__pagination-dot___VsFe4:before { + background-color: var(--qtm-colors-neutral-300); border-radius: 50%; display: inline-block; height: 5px; width: 5px; } -.c5:after, -.c5:before { - content: ''; - position: absolute; - top: 0; -} - -.c5:after { - left: 8px; -} - -.c5:before { - left: 16px; -} - -.c2 { - font-weight: bold; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 10px; - box-sizing: border-box; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - min-height: 40px; - min-width: 40px; - outline: none; - -webkit-text-decoration: none; - text-decoration: none; - -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: #1250C4; - border: 1px solid #1250C4; - color: #ffffff; - font-size: 16px; - margin: 0 4px; - padding: 4px 8px; -} - -.c2:hover, -.c2:focus { - background-color: #002F7B; - border-color: #002F7B; - color: #ffffff; -} - -.c3 { - font-weight: bold; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; +.PageButton-module__page-button___eu3bX { align-items: center; + background-color: var(--qtm-colors-neutral-0); + border: 1px solid var(--qtm-colors-neutral-300); border-radius: 10px; box-sizing: border-box; + color: var(--qtm-colors-neutral-700); cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; + font-size: var(--qtm-base-font-size); + font-weight: 700; justify-content: center; + margin: 0 var(--qtm-spacing-xxsmall); min-height: 40px; min-width: 40px; outline: none; - -webkit-text-decoration: none; + padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-xsmall); text-decoration: none; - -webkit-transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out; + transition: background-color .2s ease-in-out,border-color .2s ease-in-out,color .2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; - -ms-user-select: none; user-select: none; - background-color: #ffffff; - border: 1px solid #e0e0e0; - color: #424242; - font-size: 16px; - margin: 0 4px; - padding: 4px 8px; } -.c3:hover, -.c3:focus { - background-color: #E5EDFC; - border-color: #1250C4; - color: #1250C4; +.PageButton-module__page-button-active___8ARg2 { + background-color: var(--qtm-colors-primary-700); + border: 1px solid var(--qtm-colors-primary-700); + color: var(--qtm-colors-neutral-0); } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; +.Pagination-module__wrapper___tisiU { align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } +@media (max-width:calc(600px - 1px)) { + .Hide-module__hide-xsmall___CSbWx { + display: none!important; + } +} + +@media (min-width:600px) and (max-width:calc(1024px - 1px)) { + .Hide-module__hide-small___4sGBt { + display: none!important; + } +} + - @media (min-width:1024px) and (max-width:calc(1440px - 1px)) { - .Hide-module__hide-medium___2Ovgf { - display: none!important; - } -} - -@media (min-width:1440px) { - .Hide-module__hide-large___X3Usc { - display: none!important; - } -} - -.c1 { + .ActionButton-module__action___kJcys { + border: 2px solid transparent; + border-radius: 4px; + color: var(--qtm-colors-primary-700); cursor: pointer; - font-weight: normal; + font-weight: 400; + margin: 0 var(--qtm-spacing-xxsmall); outline: none; + padding: var(--qtm-spacing-xsmall) var(--qtm-spacing-medium); text-align: center; - -webkit-text-decoration: none; text-decoration: none; - -webkit-transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out; - transition: color 0.2s ease-in-out,background-color 0.2s ease-in-out,border 0.2s ease-in-out; + transition: color .2s ease-in-out,background-color .2s ease-in-out,border .2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; - -ms-user-select: none; user-select: none; white-space: nowrap; - border-radius: 4px; - border: 2px solid transparent; - margin: 0 4px; - padding: 8px 16px; - color: #1250C4; } -.c1[aria-disabled=true] { - display: none; -} - -.c1[aria-disabled=false]:hover, -.c1[aria-disabled=false]:focus { - background-color: #E5EDFC; - border: 2px solid #1250C4; -} - -.c3 { +.Mobile-module__pages-info___qedLb { border-bottom: 1px solid; border-top: 1px solid; - -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out; - border-color: #e0e0e0; - color: #424242; - padding: 8px 16px; + color: var(--qtm-colors-neutral-700); + padding: var(--qtm-spacing-xsmall) var(--qtm-spacing-medium); + transition: background-color .2s ease-in-out,color .2s ease-in-out; } -.c2 { - border-color: #e0e0e0; - border-radius: 10px; - border-width: 1px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - margin: 0; +.Mobile-module__pages-info___qedLb, +.Mobile-module__switch-button___iqftY { + border-color: var(--qtm-colors-neutral-300); } -.c2[aria-disabled=true] { - color: #e0e0e0; - display: block; +.Mobile-module__switch-button___iqftY { + border-radius: 10px; + border-width: 1px; } -.c2[aria-disabled=false]:focus { - border-width: 1px; +.Mobile-module__switch-button-right___USxzj { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin: 0; } -.c4 { - border-color: #e0e0e0; - border-radius: 10px; - border-width: 1px; - border-top-left-radius: 0; +.Mobile-module__switch-button-left___Walf2 { border-bottom-left-radius: 0; + border-top-left-radius: 0; margin: 0; } -.c4[aria-disabled=true] { - color: #e0e0e0; - display: block; +.Pagination-module__wrapper___tisiU { + align-items: center; + display: flex; + justify-content: center; } -.c4[aria-disabled=false]:focus { - border-width: 1px; +@media (min-width:1024px) and (max-width:calc(1440px - 1px)) { + .Hide-module__hide-medium___2Ovgf { + display: none!important; + } } -.c0 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; +@media (min-width:1440px) { + .Hide-module__hide-large___X3Usc { + display: none!important; + } }
Snapshots should match snapshot when last pagination is >