Tec 4141 front resumo componentes de subtotais ds (#24)

src/components/PurchaseSummary/PurchaseSummary.stories.tsx

@@ -0,0 +1,136 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { PurchaseSummary } from './index'
+import { PurchaseSummaryProps } from './type'
+import { PurchaseSummaryAccordion } from './PurchaseSummaryAccordion'
+
+export default {
+  title: 'Components/PurchaseSummary',
+  component: PurchaseSummary,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title of the component',
+    },
+    totalitems: {
+      control: 'text',
+      description: 'Total number of items',
+    },
+    productsPrice: {
+      control: 'number',
+      description: 'Price of the products',
+    },
+    deliveryCost: {
+      control: 'number',
+      description: 'Price of the delivery Cost',
+    },
+    totalDiscount: {
+      control: 'number',
+      description: 'Total value of all discounts applied',
+    },
+    totalPrice: {
+      control: 'Total value of the purchase summary',
+      description: 'Total value of the purchase summary',
+    },
+    installmentPayment: {
+      control: 'text',
+      description: 'Number of installments and monthly amount',
+    },
+    discounts: {
+      control: 'object',
+      description: 'Array of discounts applied to the purchase',
+      label: {
+        options: ['Cupom de desconto', 'Cashback'],
+        mapping: {
+          'Cupom de desconto': {
+            title: 'Cupom de desconto',
+            price: '31,00',
+          },
+          Cashback: {
+            title: 'Cashback',
+            price: '11,50',
+          },
+        },
+      },
+    },
+    deliveryValue: {
+      control: 'text',
+      description: 'Label for the delivery value',
+    },
+    productsLabel: {
+      control: 'text',
+      description: 'Label for the products value',
+    },
+    totalItems: {
+      control: 'number',
+      description: 'Total number of items',
+    },
+    labelItensText: {
+      control: 'text',
+      description: 'Label for the items',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', backgroundColor: '#f0f0f0' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<PurchaseSummaryProps>
+
+type Story = StoryObj<PurchaseSummaryProps>
+
+export const WithDiscounts: Story = {
+  name: 'WithDiscounts',
+  args: {
+    title: '',
+    productsLabel: 'Valor dos produtos',
+    deliveryValue: 'Valor da entrega',
+    discountLabel: 'Total de descontos',
+    totalItems: 1,
+    labelItensText: 'item',
+    productsPrice: 178.6,
+    deliveryCost: 15.0,
+    totalDiscount: 29.35,
+    totalPrice: 90,
+    installmentPayment: '2x de 59,85 sem juros',
+    discounts: [
+      {
+        id: 1,
+        title: 'Cupom de desconto',
+        price: '31,00',
+      },
+      {
+        id: 2,
+        title: 'Cashback',
+        price: '11,50',
+      },
+    ],
+  },
+  render: (args) => (
+    <PurchaseSummary {...args}>
+      <PurchaseSummaryAccordion
+        title={args.discountLabel}
+        total={args.totalDiscount}
+        listDiscount={args.discounts}
+      />
+    </PurchaseSummary>
+  ),
+}
+
+export const WithoutDiscounts: Story = {
+  args: {
+    productsLabel: 'Valor dos produtos',
+    deliveryValue: 'Valor da entrega',
+    totalItems: 2,
+    labelItensText: 'itens',
+    productsPrice: 178.6,
+    deliveryCost: 15.0,
+    totalDiscount: 29.35,
+    totalPrice: 90,
+    installmentPayment: '2x de 59,85 sem juros',
+    discounts: [],
+  },
+  render: (args) => <PurchaseSummary {...args} />,
+}

src/components/PurchaseSummary/PurchaseSummaryAccordion/index.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronUp } from 'semillon'
+import {
+  PurchaseSummaryAccordionAccordionContainer,
+  PurchaseSummaryAccordionAccordionHeader,
+  PurchaseSummaryAccordionAccordionContent,
+  PurchaseSummaryAccordionAccordionItem,
+  PurchaseSummaryAccordionPriceHeader,
+  PurchaseSummaryAccordionchevronIcon,
+  PurchaseSummaryAccordionItemValue,
+  PurchaseSummaryAccordionAccordionTitle,
+  PurchaseSummaryAccordionAccordionSpanTitle,
+  PurchaseSummaryAccordionAccordionUlItens,
+} from './style'
+import { PurchaseSummaryAccordionProps } from './type'
+
+export function PurchaseSummaryAccordion({
+  title,
+  total,
+  listDiscount,
+}: PurchaseSummaryAccordionProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <PurchaseSummaryAccordionAccordionContainer>
+      <PurchaseSummaryAccordionAccordionHeader onClick={toggleAccordion}>
+        <PurchaseSummaryAccordionAccordionSpanTitle>
+          {title}
+        </PurchaseSummaryAccordionAccordionSpanTitle>
+        <PurchaseSummaryAccordionchevronIcon>
+          {isOpen ? (
+            <ChevronUp size={16} color="#1C1C1C" />
+          ) : (
+            <ChevronDown size={16} color="#1C1C1C" />
+          )}
+        </PurchaseSummaryAccordionchevronIcon>
+        <PurchaseSummaryAccordionPriceHeader>
+          {total}
+        </PurchaseSummaryAccordionPriceHeader>
+      </PurchaseSummaryAccordionAccordionHeader>
+
+      {isOpen && listDiscount && listDiscount.length > 0 && (
+        <PurchaseSummaryAccordionAccordionContent>
+          <PurchaseSummaryAccordionAccordionUlItens>
+            {listDiscount.map((item) => (
+              <PurchaseSummaryAccordionAccordionItem key={item.id}>
+                <PurchaseSummaryAccordionAccordionTitle>
+                  {item.title}
+                </PurchaseSummaryAccordionAccordionTitle>
+                <PurchaseSummaryAccordionItemValue>
+                  {item.price}
+                </PurchaseSummaryAccordionItemValue>
+              </PurchaseSummaryAccordionAccordionItem>
+            ))}
+          </PurchaseSummaryAccordionAccordionUlItens>
+        </PurchaseSummaryAccordionAccordionContent>
+      )}
+    </PurchaseSummaryAccordionAccordionContainer>
+  )
+}

src/components/PurchaseSummary/PurchaseSummaryAccordion/style.tsx

@@ -0,0 +1,103 @@
+import styled from 'styled-components'
+import { Colors, mediaQueries } from '../../../tokens'
+
+const PurchaseSummaryAccordionAccordionContainer = styled.div`
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 14px;
+`
+
+const PurchaseSummaryAccordionAccordionHeader = styled.div`
+  width: 100%;
+  background-color: ${Colors.light.neutral.neutral100};
+  color: ${Colors.light.neutral.neutral500};
+
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  margin-bottom: 8px !important;
+`
+
+const PurchaseSummaryAccordionAccordionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media screen and (max-width: ${mediaQueries.screenXxs}) {
+    ul {
+      padding: 0 0 0 8px;
+      font-size: 12px;
+
+      li {
+        font-size: 12px;
+      }
+    }
+  }
+`
+
+const PurchaseSummaryAccordionAccordionItem = styled.li`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 16px;
+
+  .itemValue {
+    color: ${Colors.light.action.action100};
+  }
+`
+
+const PurchaseSummaryAccordionPriceHeader = styled.span`
+  margin-left: auto;
+  cursor: pointer;
+  color: ${Colors.light.feedback.feedbackInfo100};
+`
+
+const PurchaseSummaryAccordionTitle = styled.span`
+  font-size: 14px;
+  color: ${Colors.light.neutral.neutral500};
+  font-weight: 400;
+`
+
+const PurchaseSummaryAccordionchevronIcon = styled.span`
+  color: ${Colors.light.neutral.neutral100};
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-left: 7px;
+`
+
+const PurchaseSummaryAccordionAccordionTitle = styled.li`
+  font-size: 14px;
+  color: ${Colors.light.neutral.neutral500};
+  padding-left: 8px;
+`
+
+const PurchaseSummaryAccordionItemValue = styled.span`
+  color: ${Colors.light.action.action100};
+`
+
+const PurchaseSummaryAccordionAccordionSpanTitle = styled.span`
+  color: ${Colors.light.neutral.neutral500};
+`
+
+const PurchaseSummaryAccordionAccordionUlItens = styled.ul`
+  padding: 0 0 0 11px;
+  margin: 0;
+`
+
+export {
+  PurchaseSummaryAccordionAccordionContainer,
+  PurchaseSummaryAccordionAccordionHeader,
+  PurchaseSummaryAccordionAccordionContent,
+  PurchaseSummaryAccordionAccordionItem,
+  PurchaseSummaryAccordionPriceHeader,
+  PurchaseSummaryAccordionTitle,
+  PurchaseSummaryAccordionchevronIcon,
+  PurchaseSummaryAccordionItemValue,
+  PurchaseSummaryAccordionAccordionTitle,
+  PurchaseSummaryAccordionAccordionSpanTitle,
+  PurchaseSummaryAccordionAccordionUlItens,
+}

src/components/PurchaseSummary/PurchaseSummaryAccordion/type.ts

@@ -0,0 +1,9 @@
+import { PurchaseSummaryDiscountItemProps } from '../type'
+
+type PurchaseSummaryAccordionProps = {
+  title: string
+  total: number | string
+  listDiscount?: Array<PurchaseSummaryDiscountItemProps>
+}
+
+export type { PurchaseSummaryAccordionProps }

src/components/PurchaseSummary/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { PurchaseSummaryProps } from './type'
+import {
+  PurchaseSummaryContainer,
+  PurchaseSummaryTitle,
+  PurchaseSummaryItemContainer,
+  PurchaseSummaryItemText,
+  PurchaseSummaryProductsPrice,
+  PurchaseSummaryDeliveryPrice,
+  PurchaseSummaryItemsTitle,
+  PurchaseSummaryLineDivider,
+  PurchaseSummaryFooter,
+  PurchaseSummaryFooterItems,
+  PurchaseSummaryFooterTitle,
+  PurchaseSummaryTotal,
+  PurchaseSummaryPaymentInstallments,
+} from './style'
+
+const PurchaseSummary: React.FC<PurchaseSummaryProps> = ({
+  title,
+  productsLabel,
+  deliveryValue,
+  totalItems,
+  labelItensText,
+  productsPrice,
+  deliveryCost,
+  totalPrice,
+  installmentPayment,
+  children,
+}) => {
+  return (
+    <PurchaseSummaryContainer>
+      {title && <PurchaseSummaryTitle>{title}</PurchaseSummaryTitle>}
+      <PurchaseSummaryItemContainer>
+        <PurchaseSummaryItemText>
+          {productsLabel}
+          <PurchaseSummaryItemsTitle>
+            ({totalItems} {labelItensText})
+          </PurchaseSummaryItemsTitle>
+          <PurchaseSummaryProductsPrice>
+            {productsPrice}
+          </PurchaseSummaryProductsPrice>
+        </PurchaseSummaryItemText>
+      </PurchaseSummaryItemContainer>
+
+      {deliveryValue && (
+        <PurchaseSummaryItemContainer>
+          <PurchaseSummaryItemText>
+            {deliveryValue}
+            <PurchaseSummaryDeliveryPrice>
+              {deliveryCost}
+            </PurchaseSummaryDeliveryPrice>
+          </PurchaseSummaryItemText>
+        </PurchaseSummaryItemContainer>
+      )}
+
+      {children && (
+        <PurchaseSummaryItemContainer>{children}</PurchaseSummaryItemContainer>
+      )}
+
+      <PurchaseSummaryLineDivider />
+
+      <PurchaseSummaryFooter>
+        <PurchaseSummaryFooterTitle>Total</PurchaseSummaryFooterTitle>
+        <PurchaseSummaryFooterItems>
+          <PurchaseSummaryTotal>{totalPrice}</PurchaseSummaryTotal>
+          {installmentPayment && (
+            <PurchaseSummaryPaymentInstallments>
+              {installmentPayment}
+            </PurchaseSummaryPaymentInstallments>
+          )}
+        </PurchaseSummaryFooterItems>
+      </PurchaseSummaryFooter>
+    </PurchaseSummaryContainer>
+  )
+}
+
+export { PurchaseSummary }