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.

Sign up for GitHub

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

Jump to bottom

refactor: set accordions opened by default #813

Merged
merged 9 commits into from
Nov 14, 2024
Merged

refactor: set accordions opened by default #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
454792d
refactor: set accordions opened by default
patricio0312rev Nov 13, 2024
1bca28f
fix: unit tests
patricio0312rev Nov 13, 2024
0788384
fix: unit tests
patricio0312rev Nov 13, 2024
bc982c5
style: resolve style guide violations
patricio0312rev Nov 13, 2024
a950013
fix: unit tests
patricio0312rev Nov 13, 2024
c86f710
Merge branch 'refactor/set-accordions-open-by-default' of https://git…
patricio0312rev Nov 13, 2024
fbd32ff
fix unit tests
patricio0312rev Nov 13, 2024
87b7851
fix: unit tests
patricio0312rev Nov 13, 2024
8230e50
wip
patricio0312rev Nov 13, 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
4 changes: 2 additions & 2 deletions src/app/components/Accordion/Accordion.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,12 +115,12 @@ describe("Button", () => {
const { container } = render(<Accordion />);

expect(screen.getByTestId("AccordionHeader")).toBeInTheDocument();
expect(screen.queryByTestId("AccordionContent")).not.toBeInTheDocument();
expect(screen.getByTestId("AccordionContent")).toBeInTheDocument();
expect(screen.getByTestId("Accordion__toggle")).toBeInTheDocument();

await userEvent.click(screen.getByTestId("AccordionHeader"));

expect(screen.getByTestId("AccordionContent")).toBeInTheDocument();
expect(screen.queryByTestId("AccordionContent")).not.toBeInTheDocument();

expect(container).toMatchSnapshot();
});
Expand Down
12 changes: 3 additions & 9 deletions src/app/components/Accordion/__snapshots__/Accordion.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ exports[`Button > should toggle the accordion on click 1`] = `
class="css-fvpuky"
>
<div
class="select-none cursor-pointer md:h-20 py-6 px-8 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800 md:border-b"
class="select-none cursor-pointer group md:h-20 py-6 px-8 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800"
data-testid="AccordionHeader"
>
<div
Expand All @@ -310,14 +310,14 @@ exports[`Button > should toggle the accordion on click 1`] = `
Header
</div>
<div
class="ml-4 flex flex-shrink-0 items-center self-stretch css-o6tyc"
class="ml-4 flex flex-shrink-0 items-center self-stretch transition-all duration-100 css-o6tyc"
>
<div
class="css-tz6w2"
data-testid="Accordion__toggle"
>
<div
class="transition-transform rotate-180 css-15txs7d"
class="transition-transform css-15txs7d"
height="10"
width="10"
>
Expand All @@ -342,12 +342,6 @@ exports[`Button > should toggle the accordion on click 1`] = `
</div>
</div>
</div>
<div
class="px-8 pb-6 md:px-4 md:pb-0 md:pt-6"
data-testid="AccordionContent"
>
Content
</div>
</div>
</div>
`;
2 changes: 1 addition & 1 deletion src/app/hooks/use-accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useCallback, useState } from "react";

export const useAccordion = () => {
const [isExpanded, setIsExpanded] = useState(false);
const [isExpanded, setIsExpanded] = useState(true);

const handleHeaderClick = useCallback(
(event: React.MouseEvent) => {
Expand Down
6 changes: 0 additions & 6 deletions src/domains/contact/components/ContactListMobile/ContactListItemMobile.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,6 @@ describe("ContactListItemMobile", () => {
/>,
);

await userEvent.click(screen.getByTestId("AccordionHeader"));

await waitFor(() => {
expect(screen.getByTestId("ContactListItemMobile__addresses")).toBeInTheDocument();
});
Expand All @@ -84,8 +82,6 @@ describe("ContactListItemMobile", () => {
/>,
);

await userEvent.click(screen.getByTestId("AccordionHeader"));

await waitFor(() => {
expect(screen.getByTestId("ContactListItemMobile__addresses")).toBeInTheDocument();
});
Expand Down Expand Up @@ -113,8 +109,6 @@ describe("ContactListItemMobile", () => {
/>,
);

await userEvent.click(screen.getByTestId("AccordionHeader"));

await waitFor(() => {
expect(screen.getByTestId("ContactListItemMobile__addresses")).toBeInTheDocument();
});
Expand Down
113 changes: 110 additions & 3 deletions ...ns/contact/components/ContactListMobile/__snapshots__/ContactListItemMobile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`ContactListItemMobile > should render 1`] = `
class="css-fvpuky"
>
<div
class="select-none cursor-pointer group md:h-20 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800 px-6 py-4"
class="select-none cursor-pointer md:h-20 py-6 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800 md:border-b px-6 pb-3 pt-4"
data-testid="AccordionHeader"
>
<div
Expand Down Expand Up @@ -75,14 +75,14 @@ exports[`ContactListItemMobile > should render 1`] = `
</div>
</div>
<div
class="ml-4 flex flex-shrink-0 items-center self-stretch transition-all duration-100 css-o6tyc"
class="ml-4 flex flex-shrink-0 items-center self-stretch css-o6tyc"
>
<div
class="css-tz6w2"
data-testid="Accordion__toggle"
>
<div
class="transition-transform css-15txs7d"
class="transition-transform rotate-180 css-15txs7d"
height="10"
width="10"
>
Expand All @@ -107,6 +107,113 @@ exports[`ContactListItemMobile > should render 1`] = `
</div>
</div>
</div>
<div
class="md:px-4 md:pb-0 md:pt-6 px-6 pb-4"
data-testid="AccordionContent"
>
<div
class="w-full space-y-3"
data-testid="ContactListItemMobile__addresses"
>
<div
class="flex h-18 items-center justify-between overflow-hidden rounded-xl dark:border-2 dark:border-theme-secondary-800"
>
<div
class="flex h-full flex-1 flex-col justify-center overflow-hidden px-6 dark:bg-theme-secondary-900 bg-theme-secondary-100"
>
<div
class="mb-2 text-xs font-semibold leading-[15px] text-theme-secondary-700 dark:text-theme-secondary-700"
>
ARK Devnet
</div>
<div
class="flex items-center overflow-hidden"
>
<div
class="flex overflow-hidden whitespace-nowrap items-center space-x-2 w-full"
>
<span
class="no-ligatures min-w-0 overflow-hidden text-theme-text font-semibold text-base"
data-testid="Address__address"
>
D61mfSggzbvQgTUe6JhYKH2doHaqJ3Dyib
</span>
<button
class="ring-focus relative focus:outline-none"
data-ring-focus-margin="-m-1"
data-testid="clipboard-icon__wrapper"
type="button"
>
<div
class="text-theme-primary-400 hover:text-theme-primary-700 dark:text-theme-secondary-600 dark:hover:text-white css-v0ob3f"
height="16"
width="16"
>
<svg
id="copy"
viewBox="0 0 20 20"
x="0"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path
d="M7 17.765C7 18.485 7.496 19 8.09 19h-.099 8.82c.694 0 1.189-.618 1.189-1.235V6.235C18 5.515 17.405 5 16.81 5h0-6.242c-.298 0-.595.103-.892.309l-2.379 2.47C7 8.09 7 8.397 7 8.706v9.059z"
/>
<path
d="M13 5V2.235C13 1.515 12.405 1 11.81 1h0-6.242c-.298 0-.595.103-.892.309l-2.379 2.47C2 4.09 2 4.397 2 4.706v9.059C2 14.485 2.496 15 3.09 15h-.099H7"
/>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<div
class="flex h-full"
>
<button
class="flex h-full items-center justify-center bg-theme-primary-100 px-3 dark:bg-theme-secondary-900 text-theme-secondary-500 dark:text-theme-secondary-800"
data-testid="ContactListItemMobileAddress__send-button"
disabled=""
type="button"
>
<div
class="css-1i4b0eq"
height="20"
width="20"
>
<svg
id="double-arrow-right"
viewBox="0 0 20 20"
x="0"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
d="M1 7.744h9.013V3.832c0-.4.2-.4.5-.2 2.103 1.504 7.31 5.014 8.111 5.616.501.3.501 1.103 0 1.504-.8.602-6.008 4.212-8.11 5.616-.401.2-.501.2-.501-.2v-3.71H1"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
Expand Down
111 changes: 108 additions & 3 deletions ...omains/contact/components/ContactListMobile/__snapshots__/ContactListMobile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`ContactListMobile > should render 1`] = `
class="css-fvpuky"
>
<div
class="select-none cursor-pointer group md:h-20 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800 px-6 py-4"
class="select-none cursor-pointer md:h-20 py-6 md:p-4 flex flex-row items-center border-theme-secondary-300 dark:border-theme-secondary-800 md:border-b px-6 pb-3 pt-4"
data-testid="AccordionHeader"
>
<div
Expand Down Expand Up @@ -79,14 +79,14 @@ exports[`ContactListMobile > should render 1`] = `
</div>
</div>
<div
class="ml-4 flex flex-shrink-0 items-center self-stretch transition-all duration-100 css-o6tyc"
class="ml-4 flex flex-shrink-0 items-center self-stretch css-o6tyc"
>
<div
class="css-tz6w2"
data-testid="Accordion__toggle"
>
<div
class="transition-transform css-15txs7d"
class="transition-transform rotate-180 css-15txs7d"
height="10"
width="10"
>
Expand All @@ -111,6 +111,111 @@ exports[`ContactListMobile > should render 1`] = `
</div>
</div>
</div>
<div
class="md:px-4 md:pb-0 md:pt-6 px-6 pb-4"
data-testid="AccordionContent"
>
<div
class="w-full space-y-3"
data-testid="ContactListItemMobile__addresses"
>
<div
class="flex h-18 items-center justify-between overflow-hidden rounded-xl dark:border-2 dark:border-theme-secondary-800"
>
<div
class="flex h-full flex-1 flex-col justify-center overflow-hidden px-6 dark:bg-theme-secondary-900 bg-theme-secondary-100"
>
<div
class="mb-2 text-xs font-semibold leading-[15px] text-theme-secondary-700 dark:text-theme-secondary-700"
/>
<div
class="flex items-center overflow-hidden"
>
<div
class="flex overflow-hidden whitespace-nowrap items-center space-x-2 w-full"
>
<span
class="no-ligatures min-w-0 overflow-hidden text-theme-text font-semibold text-base"
data-testid="Address__address"
>
D61mfSggzbvQgTUe6JhYKH2doHaqJ3Dyib
</span>
<button
class="ring-focus relative focus:outline-none"
data-ring-focus-margin="-m-1"
data-testid="clipboard-icon__wrapper"
type="button"
>
<div
class="text-theme-primary-400 hover:text-theme-primary-700 dark:text-theme-secondary-600 dark:hover:text-white css-v0ob3f"
height="16"
width="16"
>
<svg
id="copy"
viewBox="0 0 20 20"
x="0"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path
d="M7 17.765C7 18.485 7.496 19 8.09 19h-.099 8.82c.694 0 1.189-.618 1.189-1.235V6.235C18 5.515 17.405 5 16.81 5h0-6.242c-.298 0-.595.103-.892.309l-2.379 2.47C7 8.09 7 8.397 7 8.706v9.059z"
/>
<path
d="M13 5V2.235C13 1.515 12.405 1 11.81 1h0-6.242c-.298 0-.595.103-.892.309l-2.379 2.47C2 4.09 2 4.397 2 4.706v9.059C2 14.485 2.496 15 3.09 15h-.099H7"
/>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<div
class="flex h-full"
>
<button
class="flex h-full items-center justify-center bg-theme-primary-100 px-3 dark:bg-theme-secondary-900 text-theme-secondary-500 dark:text-theme-secondary-800"
data-testid="ContactListItemMobileAddress__send-button"
disabled=""
type="button"
>
<div
class="css-1i4b0eq"
height="20"
width="20"
>
<svg
id="double-arrow-right"
viewBox="0 0 20 20"
x="0"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
d="M1 7.744h9.013V3.832c0-.4.2-.4.5-.2 2.103 1.504 7.31 5.014 8.111 5.616.501.3.501 1.103 0 1.504-.8.602-6.008 4.212-8.11 5.616-.401.2-.501.2-.501-.2v-3.71H1"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
Expand Down
Loading
Loading