Adiciona botão de adicionar nova conta

playwright-ct.config.ts

@@ -1,4 +1,7 @@
 import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import viteConfig from './vite.config.ts';
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -26,6 +29,10 @@ export default defineConfig({
 
     /* Port to use for Playwright component endpoint. */
     ctPort: 3100,
+    ctViteConfig: {
+      plugins: [tsconfigPaths()],
+      resolve: viteConfig.resolve,
+    },
   },
 
   testMatch: '**/*.spec.ct.tsx',

src/components/Accordion/Accordion.module.scss

@@ -7,5 +7,7 @@
 }
 
 .content {
+  overflow: hidden;
+
   flex-grow: 1;
 }

src/components/Accordion/Accordion.stories.tsx

@@ -1,16 +1,24 @@
+import React from 'react';
+
 import { Story } from '@ladle/react';
 
 import Accordion from './Accordion';
 
 import { TAccordionProps } from './Accordion.types';
 
 export const AccordionStories: Story<TAccordionProps> = (props) => {
+  const [isOpen, setOpen] = React.useState(false);
+
   return (
     <Accordion
       {...props}
       duration={0.3}
-      isOpen
-      header={<button>Click to open!</button>}
+      isOpen={isOpen}
+      header={
+        <button onClick={() => setOpen((isOpen) => !isOpen)}>
+          Click to open!
+        </button>
+      }
       content={
         <div>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. od quis

src/components/Accordion/Accordion.tsx

@@ -15,7 +15,7 @@ function computeVariants(duration: number) {
 function Accordion(props: TAccordionProps) {
   return (
     <section className={classNames(props.className, styles.container)}>
-      <header className={styles.header}>{props.header}</header>
+      <div className={styles.header}>{props.header}</div>
       <AnimatePresence>
         {props.isOpen && (
           <motion.div

src/components/AccordionTab/AccordionTab.module.scss

@@ -0,0 +1,69 @@
+@use '../../styles/global.scss' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+
+  align-items: stretch;
+
+  font-family: $mainFont;
+
+  font-size: 1.6rem;
+
+  border: 1px solid #cbc4cf;
+
+  background-color: $primaryWhite;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  border-radius: 17px 17px 0 0;
+}
+
+.header {
+  width: 100%;
+
+  display: flex;
+  flex-flow: row nowrap;
+
+  align-items: center;
+
+  justify-content: space-between;
+
+  color: $primaryWhite;
+  font-size: 1.6rem;
+  line-height: 1;
+
+  padding: 1.2rem;
+
+  position: relative;
+
+  background-color: $secondaryPurple;
+  border-radius: 17px 17px 0 0;
+
+  &::before {
+    font-size: 1.8rem;
+
+    margin-right: 1rem;
+
+    content: '⬤';
+  }
+}
+
+.headerTitle {
+  flex-grow: 1;
+}
+
+.closeButton {
+  width: min-content;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  color: $primaryWhite;
+  font-size: 4rem;
+  font-weight: 900;
+
+  margin-right: 2rem;
+
+  cursor: pointer;
+}

src/components/AccordionTab/AccordionTab.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+
+import AccordionTab from './AccordionTab';
+
+beforeEach(() => {
+  // https://github.com/vitest-dev/vitest/issues/4223
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window.scrollTo = vi.fn<any>();
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('AccordionTab', () => {
+  describe('when [hideCloseButton] is false', () => {
+    it('not render close button', () => {
+      render(<AccordionTab />);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toBeInTheDocument();
+    });
+  });
+});

src/components/AccordionTab/AccordionTab.stories.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+import { Story } from '@ladle/react';
+
+import AccordionTab from './AccordionTab';
+
+import { TAccordionTabProps } from './AccordionTab.types';
+
+export const AccordionTabStories: Story<TAccordionTabProps> = (props) => {
+  const [isOpen, setOpen] = useState(true);
+
+  return (
+    <AccordionTab
+      title="Accordion Tab"
+      onChangeOpen={() => setOpen((isOpen) => !isOpen)}
+      isOpen={isOpen}
+      {...props}
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam autem
+      soluta labore nulla, nam quisquam sed, nostrum ab vero suscipit quae
+      debitis inventore velit iste iusto earum, iure aspernatur provident.
+    </AccordionTab>
+  );
+};

src/components/AccordionTab/AccordionTab.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+
+import Accordion from '../Accordion/Accordion';
+
+import scss from './AccordionTab.module.scss';
+
+import { TAccordionTabProps } from './AccordionTab.types';
+
+function AccordionTab(props: TAccordionTabProps) {
+  const handleClose = () => {
+    if (props.onChangeOpen) props.onChangeOpen(!props.isOpen);
+  };
+
+  const renderCloseButton = () => {
+    return (
+      <button onClick={handleClose} className={scss.closeButton}>
+        -
+      </button>
+    );
+  };
+
+  const renderHeader = () => (
+    <div className={scss.header}>
+      <p className={scss.headerTitle}>{props.title}</p>
+      {!props.hideCloseButton && renderCloseButton()}
+    </div>
+  );
+
+  return (
+    <Accordion
+      className={classNames(scss.container, props.className)}
+      isOpen={props.isOpen ?? true}
+      header={renderHeader()}
+      content={props.children}
+    />
+  );
+}
+
+export default AccordionTab;

src/components/AccordionTab/AccordionTab.types.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+type TOnChangeOpen = (newIsOpen: boolean) => void;
+
+export type TAccordionTabProps = PropsWithChildren<{
+  title?: string;
+  className?: string;
+  isOpen?: boolean;
+  hideCloseButton?: boolean;
+  onChangeOpen?: TOnChangeOpen;
+}>;

src/components/InputSearch/InputSearch.module.scss

@@ -15,10 +15,12 @@
 }
 
 .container {
+  width: 100%;
+
   color: global.$secondaryGray;
   font-size: 1.4rem;
 
-  margin-top: 3rem;
+  margin-top: 1rem;
 
   margin-bottom: 2.4rem;
   letter-spacing: 0;
@@ -36,7 +38,7 @@
   }
 
   .inputWrapper {
-    width: 28.2rem;
+    width: 100%;
     height: 5.6rem;
 
     display: flex;

src/components/MainComposer/MainComposer.module.scss

@@ -1,97 +1,45 @@
-@use '../../styles/global';
+@use '~styles/global.scss';
 
-.wrapper {
-  width: 100%;
-
-  .mainComposerInputMedia {
-    display: flex;
-    gap: 3.2rem;
-
-    margin-top: 2.4rem;
-  }
-
-  .innerHeader {
-    padding: 1rem 3rem;
-    border: 0.1rem solid global.$primaryGray;
-    border-bottom: 0;
-
-    background-color: global.$secondaryPurple;
-    border-radius: 2rem 2rem 0 0;
-  }
-
-  .innerHeader .mainContent {
-    .mainText {
-      color: global.$primaryWhite;
-      font-size: 2.2rem;
-      font-weight: 400;
-      font-style: normal;
-      line-height: 2.8rem;
-    }
-
-    .mainText::before {
-      width: 1.5rem;
-      height: 1.5rem;
-
-      display: inline-block;
-
-      float: left;
-
-      margin-top: 0.7rem;
-
-      margin-right: 1rem;
+.header {
+  font-size: 2rem;
 
-      background-color: global.$primaryWhite;
-      border-radius: 50%;
+  padding: 1rem 2rem;
 
-      content: '';
-    }
-
-    .mainText::after {
-      width: 2rem;
-      height: 0.5rem;
-
-      display: inline-block;
-
-      float: right;
-
-      margin-top: 1.4rem;
-      margin-left: 1rem;
-
-      background-color: global.$primaryWhite;
+  column-gap: 1rem;
+}
 
-      content: '';
-    }
-  }
+.content {
+  padding: 2.4rem 1.6rem;
+}
 
-  .content {
-    padding: 2.4rem 1.6rem;
-    border: 0.1rem solid global.$primaryGray;
+.textInput textarea {
+  width: 100%;
+  height: 15rem;
 
-    border-radius: 0 0 0.5rem 0.5rem;
-  }
+  font-size: 1.6rem;
 
-  .textInput textarea {
-    width: 100%;
-    height: 15rem;
+  margin-bottom: 2.4rem;
+  border: 0;
+  box-sizing: border-box;
 
-    font-size: 1.6rem;
+  resize: none;
+}
 
-    margin-bottom: 2.4rem;
-    border: 0;
-    box-sizing: border-box;
+.contentBotTop {
+  font-size: 1.6rem;
 
-    resize: none;
-  }
+  border-bottom: 0.1rem solid global.$primaryGray;
+}
 
-  .contentBotTop {
-    font-size: 1.6rem;
+.contentBotBot {
+  font-size: 1.6rem;
 
-    border-bottom: 0.1rem solid global.$primaryGray;
-  }
+  margin-bottom: 2.4rem;
+}
 
-  .contentBotBot {
-    font-size: 1.6rem;
+.mainComposerInputMedia {
+  display: flex;
+  gap: 3.2rem;
 
-    margin-bottom: 2.4rem;
-  }
+  margin-top: 2.4rem;
 }