Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

refactor: adjust paddings in Section component #3430

Merged
merged 7 commits into from
Mar 3, 2021
Merged

refactor: adjust paddings in Section component #3430

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
30b9652
refactor: adjust paddings in `Section` components
dated Mar 1, 2021
36aa2b4
refactor: adjust margins in `Header` component
dated Mar 1, 2021
660a543
test: coverage
dated Mar 1, 2021
d37b512
Merge branch 'develop' into refactor/paddings-CU-egzjma
dated Mar 2, 2021
a509dbf
Merge branch 'develop' into refactor/paddings-CU-egzjma
dated Mar 2, 2021
0526d14
refactor: build classes with `classnames` package
dated Mar 2, 2021
702ec1e
chore: update snapshots
dated Mar 2, 2021
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
28 changes: 14 additions & 14 deletions src/app/__snapshots__/App.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ exports[`App should close splash screen if not e2e 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="mx-auto w-72"
Expand Down Expand Up @@ -291,10 +291,10 @@ exports[`App should render application error if the app fails to boot 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="mx-auto w-64 lg:w-128"
Expand Down Expand Up @@ -384,10 +384,10 @@ exports[`App should render mock 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="mx-auto w-72"
Expand Down Expand Up @@ -636,10 +636,10 @@ exports[`App should render splash screen 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="mx-auto w-72"
Expand Down Expand Up @@ -883,10 +883,10 @@ exports[`App should render the offline screen if there is no internet connection
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="sm:mx-auto sm:w-full sm:max-w-md"
Expand Down Expand Up @@ -966,10 +966,10 @@ exports[`App should render welcome screen after splash screen 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="mx-auto w-72"
Expand Down Expand Up @@ -1218,10 +1218,10 @@ exports[`App shouldn't migrate profiles 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex flex-col flex-1 justify-center text-center"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex flex-col flex-1 justify-center text-center"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="mx-auto w-72"
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ type Props = {

export const Header = ({ title, subtitle, extra }: Props) => (
<div className="flex justify-between items-end bg-theme-background">
<div>
<h1 className="mb-0 md:text-4xl" data-testid="header__title">
<div className="space-y-4">
<h1 className="mb-0 text-4xl" data-testid="header__title">
{title}
</h1>
{subtitle && (
Expand Down
18 changes: 12 additions & 6 deletions src/app/components/Header/__snapshots__/Header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ exports[`Header should render an header 1`] = `
<div
class="flex justify-between items-end bg-theme-background"
>
<div>
<div
class="space-y-4"
>
<h1
class="mb-0 md:text-4xl"
class="mb-0 text-4xl"
data-testid="header__title"
>
Header test
Expand All @@ -22,9 +24,11 @@ exports[`Header should render an header with a subtitle 1`] = `
<div
class="flex justify-between items-end bg-theme-background"
>
<div>
<div
class="space-y-4"
>
<h1
class="mb-0 md:text-4xl"
class="mb-0 text-4xl"
data-testid="header__title"
>
Header test
Expand All @@ -45,9 +49,11 @@ exports[`Header should render an header with extra 1`] = `
<div
class="flex justify-between items-end bg-theme-background"
>
<div>
<div
class="space-y-4"
>
<h1
class="mb-0 md:text-4xl"
class="mb-0 text-4xl"
data-testid="header__title"
>
Header test
Expand Down
6 changes: 6 additions & 0 deletions src/app/components/Layout/components/Section/Section.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,10 @@ describe("Section", () => {
expect(container).toBeTruthy();
expect(asFragment()).toMatchSnapshot();
});

it("should render with border", () => {
const { container, asFragment } = render(<Section border />);
expect(container).toBeTruthy();
expect(asFragment()).toMatchSnapshot();
});
});
31 changes: 25 additions & 6 deletions src/app/components/Layout/components/Section/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,41 @@ import tw, { css, styled } from "twin.macro";
type SectionProps = {
children: React.ReactNode;
backgroundColor?: string;
border?: boolean;
className?: string;
innerClassName?: string;
};

const SectionWrapper = styled.div<{ backgroundColor?: string }>`
${tw`w-full`}
const SectionWrapper = styled.div<{ backgroundColor?: string; border?: boolean }>`
${tw`w-full py-4 first:pt-8 last:pb-8`};

${({ backgroundColor }) =>
backgroundColor &&
css`
& {
background-color var(${backgroundColor});
background-color: var(${backgroundColor});
}
`};

${({ border }) =>
border && [
tw`border-b border-theme-secondary-300 dark:border-theme-secondary-800`,
css`
&.hasBorder + & {
${tw`pt-8`}
}
`,
]};

${({ backgroundColor, border }) => (backgroundColor ? tw`py-8` : border ? tw`pb-8` : "")};
`;

export const Section = ({ children, backgroundColor, className, innerClassName }: SectionProps) => (
<SectionWrapper backgroundColor={backgroundColor} className={className}>
<div className={`container py-16 px-14 mx-auto ${innerClassName || ""}`}>{children}</div>
export const Section = ({ children, backgroundColor, border, className, innerClassName }: SectionProps) => (
<SectionWrapper
backgroundColor={backgroundColor}
border={border}
className={`${border ? "hasBorder" : ""} ${className || ""}`}
>
<div className={`container px-10 mx-auto ${innerClassName || ""}`}>{children}</div>
</SectionWrapper>
);
20 changes: 16 additions & 4 deletions src/app/components/Layout/components/Section/__snapshots__/Section.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,22 @@
exports[`Section should render 1`] = `
<DocumentFragment>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
/>
</div>
</DocumentFragment>
`;

exports[`Section should render with border 1`] = `
<DocumentFragment>
<div
class="Section__SectionWrapper-sc-8cjvre-0 gGdSDT hasBorder "
>
<div
class="container px-10 mx-auto "
/>
</div>
</DocumentFragment>
Expand All @@ -15,10 +27,10 @@ exports[`Section should render 1`] = `
exports[`Section should render with custom background color 1`] = `
<DocumentFragment>
<div
class="Section__SectionWrapper-sc-8cjvre-0 kXEPyr"
class="Section__SectionWrapper-sc-8cjvre-0 dgHHTG "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
/>
</div>
</DocumentFragment>
Expand Down
6 changes: 2 additions & 4 deletions src/app/components/Layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,2 @@
import { Page } from "./components/Page";
import { Section } from "./components/Section";

export { Page, Section };
export * from "./components/Page";
export * from "./components/Section";
28 changes: 16 additions & 12 deletions src/domains/contact/pages/Contacts/__snapshots__/Contacts.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,17 +272,19 @@ exports[`Contacts with contacts should render with contacts 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="flex justify-between items-end bg-theme-background"
>
<div>
<div
class="space-y-4"
>
<h1
class="mb-0 md:text-4xl"
class="mb-0 text-4xl"
data-testid="header__title"
>
My Contacts
Expand Down Expand Up @@ -345,10 +347,10 @@ exports[`Contacts with contacts should render with contacts 1`] = `
</div>
</div>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex-1"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="w-full"
Expand Down Expand Up @@ -1292,17 +1294,19 @@ exports[`Contacts without contacts should render empty 1`] = `
class="flex flex-col flex-1"
>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="flex justify-between items-end bg-theme-background"
>
<div>
<div
class="space-y-4"
>
<h1
class="mb-0 md:text-4xl"
class="mb-0 text-4xl"
data-testid="header__title"
>
My Contacts
Expand Down Expand Up @@ -1335,10 +1339,10 @@ exports[`Contacts without contacts should render empty 1`] = `
</div>
</div>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww flex-1"
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="text-center"
Expand Down
8 changes: 4 additions & 4 deletions src/domains/dashboard/components/PortfolioChart/__snapshots__/PortfolioChart.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
exports[`PortfolioChart should render 1`] = `
<div>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="-mb-2 text-4xl font-bold"
Expand Down Expand Up @@ -125,10 +125,10 @@ exports[`PortfolioChart should render hidden 1`] = `<div />`;
exports[`PortfolioChart should render with balance 1`] = `
<div>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="-mb-2 text-4xl font-bold"
Expand Down
2 changes: 1 addition & 1 deletion src/domains/dashboard/components/Transactions/Transactions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const Transactions = memo(
}

return (
<Section className="flex-1" data-testid="dashboard__transactions-view">
<Section data-testid="dashboard__transactions-view">
<div className="flex relative justify-between">
<div className="mb-8 text-4xl font-bold">{t("DASHBOARD.TRANSACTION_HISTORY.TITLE")}</div>
<FilterTransactions
Expand Down
12 changes: 6 additions & 6 deletions src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
exports[`Transactions should fetch more transactions 1`] = `
<DocumentFragment>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="flex relative justify-between"
Expand Down Expand Up @@ -1536,10 +1536,10 @@ exports[`Transactions should fetch more transactions 1`] = `
exports[`Transactions should open detail modal on transaction row click 1`] = `
<DocumentFragment>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="flex relative justify-between"
Expand Down Expand Up @@ -2433,10 +2433,10 @@ exports[`Transactions should open detail modal on transaction row click 1`] = `
exports[`Transactions should render 1`] = `
<DocumentFragment>
<div
class="Section__SectionWrapper-sc-8cjvre-0 iWOAFi flex-1"
class="Section__SectionWrapper-sc-8cjvre-0 kJTPww "
>
<div
class="container py-16 px-14 mx-auto "
class="container px-10 mx-auto "
>
<div
class="flex relative justify-between"
Expand Down
Loading