Skip to content

Commit

Permalink
Refactored section list items + test
Browse files Browse the repository at this point in the history
  • Loading branch information
@Fuzznimp
Fuzznimp committed Oct 16, 2020
1 parent 611d6dc commit 0f9ec69
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 82 deletions.
89 changes: 23 additions & 66 deletions src/components/display/fewlines/Account/Account.tsx
View file
@@ -1,84 +1,41 @@
import Link from "next/link";
import React from "react";
import styled from "styled-components";

import { Container } from "../Container";
import { H1 } from "../H1/H1";
import { H2 } from "../H2/H2";
import { LoginsIcon } from "../LoginsIcon/LoginsIcon";
import { NeutralLink } from "../NeutralLink/NeutralLink";
import RightChevron from "../RightChevron/RightChevron";
import { SectionListItem } from "../SectionListItem/SectionListItem";
import { SecurityIcon } from "../SecurityIcon/SecurityIcon";
import { ShadowBox } from "../ShadowBox/ShadowBox";

export const SECTION_LIST_CONTENT = {
LOGINS: {
text:
"Manage your logins options, including emails, phone numbers and social logins",
icon: <LoginsIcon />,
},
SECURITY: {
text:
"Set or change your password. You can check your connections history here",
icon: <SecurityIcon />,
},
};

const Account: React.FC = () => {
return (
<Container>
<H1>Welcome to your account</H1>
<H2>First name last name</H2>
<ShadowBox>
<Content>
<Link href="/account/logins">
<NeutralLink>
<Flex>
<LoginsIcon />
<TextBox>
<Span>LOGINS</Span>
<div>
Manage your logins options, including emails, phone numbers
and social logins
</div>
</TextBox>
<RightChevron />
</Flex>
</NeutralLink>
</Link>
</Content>
</ShadowBox>
<ShadowBox>
<Content>
<Link href="/account/security">
<NeutralLink>
<Flex>
<SecurityIcon />
<TextBox>
<Span>SECURITY</Span>
<div>
Set or change your password. You can check your connections
history here,
</div>
</TextBox>
<RightChevron />
</Flex>
</NeutralLink>
</Link>
</Content>
</ShadowBox>
{Object.entries(SECTION_LIST_CONTENT).map(([sectionName, content]) => {
return (
<SectionListItem
key={sectionName}
sectionName={sectionName}
content={content}
/>
);
})}
</Container>
);
};

export default Account;

const Content = styled.div`
cursor: pointer;
`;

const Flex = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: ${({ theme }) => theme.spaces.xs};
`;

export const TextBox = styled.div`
display: flex;
flex-direction: column;
max-width: 50%;
font-size: ${({ theme }) => theme.fontSizes.xxs};
line-height: ${({ theme }) => theme.lineHeights.title};
`;

export const Span = styled.p`
font-size: ${({ theme }) => theme.fontSizes.s};
`;
61 changes: 61 additions & 0 deletions src/components/display/fewlines/SectionListItem/SectionListItem.tsx
View file
@@ -0,0 +1,61 @@
import Link from "next/link";
import React from "react";
import styled from "styled-components";

import { NeutralLink } from "../NeutralLink/NeutralLink";
import { RightChevron } from "../RightChevron/RightChevron";
import { ShadowBox } from "../ShadowBox/ShadowBox";

type SectionListItemProps = {
sectionName: string;
content: { text: string; icon: JSX.Element };
};

export const SectionListItem: React.FC<SectionListItemProps> = ({
sectionName,
content,
}) => {
const { text, icon } = content;

return (
<>
<ShadowBox>
<Content>
<Link href={`/account/${sectionName.toLocaleLowerCase()}`}>
<NeutralLink>
<Flex>
{icon}
<TextBox>
<SectionName>{sectionName}</SectionName>
{text}
</TextBox>
<RightChevron />
</Flex>
</NeutralLink>
</Link>
</Content>
</ShadowBox>
</>
);
};

const Content = styled.div`
cursor: pointer;
`;

const Flex = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: ${({ theme }) => theme.spaces.xs};
`;

export const TextBox = styled.div`
max-width: 50%;
font-size: ${({ theme }) => theme.fontSizes.xs};
line-height: ${({ theme }) => theme.lineHeights.title};
`;

export const SectionName = styled.p`
font-size: ${({ theme }) => theme.fontSizes.s};
`;
26 changes: 10 additions & 16 deletions tests/pages/AccountPage.test.tsx
View file
@@ -1,14 +1,14 @@
import { mount } from "enzyme";
import { execPath } from "process";
import React from "react";

import {
TextBox,
Span,
} from "@src/components/display/fewlines/Account/Account";
import { SECTION_LIST_CONTENT } from "@src/components/display/fewlines/Account/Account";
import { AccountPage } from "@src/components/display/fewlines/Account/Account.stories";
import { H1 } from "@src/components/display/fewlines/H1/H1";
import { H2 } from "@src/components/display/fewlines/H2/H2";
import {
TextBox,
SectionName,
} from "@src/components/display/fewlines/SectionListItem/SectionListItem";
import { ShadowBox } from "@src/components/display/fewlines/ShadowBox/ShadowBox";
import { AccountApp } from "@src/pages/_app";

Expand Down Expand Up @@ -50,20 +50,14 @@ describe("AccountPage", () => {
const shadowBoxes = component.find(ShadowBox);
expect(shadowBoxes).toHaveLength(2);

const accountSectionListName = ["LOGINS", "SECURITY"];
const accountSectionListContent = [
"Manage your logins options, including emails, phone numbers and social logins",
"Set or change your password. You can check your connections history here,",
];

shadowBoxes.forEach((shadowBox, index) => {
const textBox = shadowBox.find(TextBox);
const [sectionName, { text }] = Object.entries(SECTION_LIST_CONTENT)[
index
];

expect(textBox.find(Span).text()).toEqual(accountSectionListName[index]);

expect(
textBox.contains(<div>{accountSectionListContent[index]}</div>),
).toEqual(true);
expect(textBox.find(SectionName).text()).toEqual(sectionName);
expect(textBox.contains(text)).toEqual(true);
});
});
});

0 comments on commit 0f9ec69

Please sign in to comment.