Tec 4141 front resumo componentes de subtotais ds #24
Conversation
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
juninhokaponne
requested review from
samuelvermeuln,
pserick and
joelsalmeida
as code owners
WalkthroughUma atualização substancial foi realizada no componente Changes
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files ignored due to path filters (1)
package.jsonis excluded by:!**/*.json
Files selected for processing (8)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts (1 hunks)
- src/components/PurchaseSummary/index.tsx (1 hunks)
- src/components/PurchaseSummary/style.tsx (1 hunks)
- src/components/PurchaseSummary/type.ts (1 hunks)
- src/tokens/colors.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- src/components/PurchaseSummary/type.ts
Additional comments: 11
src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts (1)
- 3-7: LGTM! A definição da interface
PurchaseSummaryAccordionPropsestá clara e bem tipada, utilizando a reutilização de tipos de forma eficaz.src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx (2)
- 1-2: As importações dos ícones
ChevronDowneChevronUp, assim como a definição e manipulação do estadoisOpen, estão corretas e seguem as boas práticas para componentes de acordeão.Also applies to: 16-20
- 36-47: A renderização condicional e o mapeamento da lista
listDiscountestão bem implementados, utilizando boas práticas como a verificação da presença de itens na lista e a atribuição de chaves únicas para cada item renderizado.src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx (2)
- 4-9: Os estilos definidos para
AccordionContainerestão apropriados e seguem as boas práticas para a estilização de um contêiner de acordeão.- 11-75: A utilização de tokens de cores e a definição de estilos responsivos estão bem implementadas, seguindo as boas práticas para manter a consistência do design e garantir uma boa experiência do usuário em diferentes tamanhos de tela.
src/components/PurchaseSummary/PurchaseSummary.stories.tsx (2)
- 5-42: A configuração das histórias para o Storybook, incluindo a definição de
argTypes, está correta e bem estruturada, permitindo a personalização e teste eficaz dos props do componentePurchaseSummary.- 46-87: Os exemplos de histórias
EmptyDiscountseDefaultestão bem construídos, demonstrando eficazmente o comportamento do componentePurchaseSummaryem cenários com e sem descontos. A passagem de props e os valores utilizados são apropriados.src/components/PurchaseSummary/index.tsx (2)
- 36-38: A função
formatPriceestá corretamente implementada, utilizando boas práticas para a formatação de valores monetários no formato brasileiro.- 62-70: A integração com o componente
PurchaseSummaryAccordione a renderização condicional dos descontos estão bem implementadas, seguindo boas práticas para uma experiência de usuário aprimorada.src/tokens/colors.ts (1)
- 72-72: A adição da cor
neutral600ao grupo de cores neutras do tema escuro está correta, seguindo a convenção de nomenclatura e melhorando a paleta de cores disponível.src/components/PurchaseSummary/style.tsx (1)
- 1-119: A utilização de tokens de cores e a definição de estilos responsivos no arquivo
style.tsxdo componentePurchaseSummaryestão bem implementadas, seguindo as boas práticas para manter a consistência do design e garantir uma boa experiência do usuário em diferentes tamanhos de tela.
samuelvermeuln
suggested changes
Mar 25, 2024
src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx
Outdated
Show resolved
Hide resolved
src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts
Outdated
Show resolved
Hide resolved
…ithub.com:vissimo-group/chardonnay into TEC-4141-Front-Resumo-Componentes-de-Subtotais-DS
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (7)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts (1 hunks)
- src/components/PurchaseSummary/index.tsx (1 hunks)
- src/components/PurchaseSummary/style.tsx (1 hunks)
- src/components/PurchaseSummary/type.ts (1 hunks)
Files skipped from review as they are similar to previous changes (7)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts
- src/components/PurchaseSummary/index.tsx
- src/components/PurchaseSummary/style.tsx
- src/components/PurchaseSummary/type.ts
| import styled from 'styled-components' | ||
| import { Colors, mediaQueries } from '../../../tokens' | ||
|
|
||
| export const AccordionContainer = styled.div` |
There was a problem hiding this comment.
All styled components come with the Styled suffix. (AccordionContainerStyled, AccordionHeaderStyled, AccordionContentStyled...)
This way it is easier to differentiate common components from styled components.
| .itemValue { | ||
| color: ${Colors.light.action.action100}; | ||
| } | ||
| ` |
There was a problem hiding this comment.
We always use the export pattern at the end of the file.
export { AccordionHeaderStyled, AccordionContentStyled, ... }
| @@ -0,0 +1,119 @@ | |||
| import styled from 'styled-components' | |||
There was a problem hiding this comment.
There are some lint errors in this file.
You need to adjust the pattern of styled component names too.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (2)
- src/components/PurchaseSummary/index.tsx (1 hunks)
- src/components/PurchaseSummary/style.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- src/components/PurchaseSummary/index.tsx
- src/components/PurchaseSummary/style.tsx
| @@ -0,0 +1,89 @@ | |||
| import { Meta, StoryObj } from '@storybook/react' | |||
|
|
||
| type Story = StoryObj<PurchaseSummaryProps> | ||
|
|
||
| export const EmptyDiscounts: Story = { |
There was a problem hiding this comment.
This name is used when displaying stories. It would be interesting to use WithDiscounts and WithoutDiscounts discounts. (or something similar)
This will be displayed as: With Discouts, Without Discouts.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (6)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts (1 hunks)
- src/components/PurchaseSummary/index.tsx (1 hunks)
- src/components/PurchaseSummary/type.ts (1 hunks)
Files skipped from review as they are similar to previous changes (6)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts
- src/components/PurchaseSummary/index.tsx
- src/components/PurchaseSummary/type.ts
samuelvermeuln
approved these changes
Mar 26, 2024
…ng for discounts property
…he property children to display the child component's information.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (4)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx (1 hunks)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts (1 hunks)
- src/components/PurchaseSummary/index.tsx (1 hunks)
- src/components/PurchaseSummary/type.ts (1 hunks)
Files skipped from review as they are similar to previous changes (4)
- src/components/PurchaseSummary/PurchaseSummary.stories.tsx
- src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts
- src/components/PurchaseSummary/index.tsx
- src/components/PurchaseSummary/type.ts
joelsalmeida
approved these changes
Mar 27, 2024
There was a problem hiding this comment.
Review Status
Actionable comments generated: 0
Configuration used: CodeRabbit UI
Files selected for processing (1)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Task link
(required)
Jira task
Layout link
(optional)
Web version
Mobile version
Task description
Create the Subtotals component in the Design System. Note that if there are no discounts applied, the discount area should be hidden, and the total amount should be adjusted accordingly. Once created, integrate the Subtotals component with Tempranillo.
Roadmap
(optional)
Step by step about what you did in this PR
Screenshots
(required when is related to design and/or layout)
Add here images from browsers that tempranillo is more used (Chrome/Safari/Firefox)
Web version:
Mobile Version:
Unrelated Issues
(optional)
How to test
(optional)
To test, simply open the Chardonay project, run the project locally and look for the PurchaseSummary component.
Ambient to test
(required)
Enviroment
Summary by CodeRabbit
Novos Recursos
Resumo de Compraque exibe um sumário dos itens comprados, incluindo preços dos produtos, custos de entrega e preço total com detalhes de pagamento parcelado opcional.Acordeão do Resumo de Compraque permite aos usuários alternar a visibilidade de uma lista de descontos em um estilo de acordeão.Estilo
Documentação
Resumo de Comprano Storybook, permitindo visualizar diferentes configurações de propriedades.