Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit 6fc9d13

Browse files
kieferbonkkieferbonk
authored
TILA-2627 common container (#694)
1 parent c8bb062 commit 6fc9d13

37 files changed

Lines changed: 142 additions & 455 deletions

‎common/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
getUnRoundedReservationVolume,
88
} from "./src/reservation-pricing";
99
import UserInfo from "./src/userinfo/UserInfo";
10+
import Container from "./src/layout/Container";
1011

1112
export {
1213
Breadcrumb,
@@ -16,6 +17,7 @@ export {
1617
getPriceUnitMinutes,
1718
getReservationPrice,
1819
formatters,
20+
Container,
1921
};
2022

2123
export * from "./types/common";

‎common/src/layout/Container.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { breakpoints } from "../common/style";
4+
5+
type Size = "s" | "l";
6+
7+
type Props = {
8+
children: React.ReactElement | React.ReactElement[];
9+
size?: Size;
10+
};
11+
12+
const Wrapper = styled.div.attrs(() => ({}))<{ $size: Size }>`
13+
max-width: ${({ $size }) =>
14+
$size === "l" ? "var(--container-width-xl)" : "var(--container-width-l)"};
15+
margin: 0 auto;
16+
padding-right: var(--spacing-s);
17+
padding-left: var(--spacing-s);
18+
--spacing-hz: var(--spacing-s);
19+
20+
@media (min-width: ${breakpoints.m}) {
21+
padding-right: var(--spacing-m);
22+
padding-left: var(--spacing-m);
23+
--spacing-hz: var(--spacing-m);
24+
}
25+
`;
26+
27+
const Container = ({ size = "l", children, ...rest }: Props): JSX.Element => {
28+
return (
29+
<Wrapper $size={size} {...rest}>
30+
{children}
31+
</Wrapper>
32+
);
33+
};
34+
35+
export const CenteredContainer = styled(Container)`
36+
margin: 0 auto;
37+
38+
@media (min-width: ${breakpoints.m}) {
39+
max-width: var(--container-width-s);
40+
}
41+
`;
42+
43+
export default Container;

‎ui/components/application/ApplicationPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next";
33
import styled from "styled-components";
44
import { Application } from "common/types/common";
55
import { breakpoints } from "common/src/common/style";
6-
import Container from "../common/Container";
6+
import { Container } from "common";
77
import Head from "./Head";
88
import Stepper from "./Stepper";
99

@@ -57,7 +57,7 @@ const ApplicationPage = ({
5757
<Head heading={t(`${translationKeyPrefix}.heading`)}>
5858
{headContent || overrideText || t(`${translationKeyPrefix}.text`)}
5959
</Head>
60-
<StyledContainer main>
60+
<StyledContainer>
6161
<InnerContainer $hideStepper={hideStepper}>
6262
{hideStepper ? <div /> : <Stepper application={application} />}
6363
<Main>{children}</Main>

‎ui/components/application/Sent.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import React from "react";
44
import { useTranslation } from "next-i18next";
55
import styled from "styled-components";
66
import { breakpoints } from "common/src/common/style";
7+
import { Container } from "common";
8+
79
import { applicationsUrl } from "../../modules/util";
8-
import Container from "../common/Container";
910
import Head from "./Head";
1011

1112
const Paragraph = styled.p`
@@ -30,7 +31,7 @@ const Sent = (): JSX.Element => {
3031
<Head heading={t("application:sent.heading")}>
3132
<p>{t("application:sent.subHeading")}</p>
3233
</Head>
33-
<Container main>
34+
<Container>
3435
<Paragraph>{t("application:sent.body")}</Paragraph>
3536
<StyledButton
3637
onClick={() => router.push(applicationsUrl)}

‎ui/components/common/ListWithPagination.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import styled from "styled-components";
44
import { Button, LoadingSpinner } from "hds-react";
55
import { breakpoints } from "common/src/common/style";
66
import { PageInfo } from "common/types/gql-types";
7-
import Container from "./Container";
87
import { CenterSpinner } from "./common";
98

109
export type Props = {
@@ -125,7 +124,7 @@ const ListWithPagination = ({
125124
) : null;
126125

127126
return (
128-
<Container className={className} id={id}>
127+
<div className={className} id={id}>
129128
{loading && !loadingMore ? (
130129
<CenterSpinner
131130
style={{
@@ -149,7 +148,7 @@ const ListWithPagination = ({
149148
{items?.length > 0 && content}
150149
</>
151150
)}
152-
</Container>
151+
</div>
153152
);
154153
};
155154

‎ui/components/common/PageWrapper.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import styled from "styled-components";
33
import Footer from "./Footer";
44
import { Navigation } from "./Navigation/Navigation";
5-
import ServiceNotification from "./ServiceNotification";
65
import Title from "./Title";
76
import UnpaidReservationNotification from "../reservations/UnpaidReservationNotification";
87

@@ -22,7 +21,6 @@ const PageWrapper = (props: Props): JSX.Element => {
2221
<>
2322
<Title>Tilavarauspalvelu</Title>
2423
<Navigation />
25-
<ServiceNotification />
2624
<UnpaidReservationNotification />
2725
<Main
2826
$bgColor={props.overrideBackgroundColor}

‎ui/components/common/ServiceNotification.tsx‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎ui/components/common/StartApplicationBar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const BackgroundContainer = styled.div`
1717
background-color: var(--color-bus);
1818
position: fixed;
1919
bottom: 0;
20+
left: 0;
2021
width: 100%;
2122
z-index: 20;
2223
min-width: ${breakpoints.xs};

‎ui/components/index/Header.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import styled from "styled-components";
33
import { fontRegular, H1 } from "common/src/common/typography";
44
import { breakpoints } from "common/src/common/style";
5-
import Container from "../common/Container";
65

76
interface HeadProps {
87
heading: string;
@@ -13,12 +12,12 @@ const Wrapper = styled.div`
1312
width: 100%;
1413
color: var(--color-black);
1514
font-size: var(--fontsize-heading-s);
15+
margin-bottom: var(--spacing-layout-m);
1616
`;
1717

18-
const Content = styled(Container)`
18+
const Content = styled.div`
1919
display: flex;
2020
flex-direction: column;
21-
padding: 0 var(--spacing-m);
2221
`;
2322

2423
const Title = styled(H1)`
@@ -32,7 +31,7 @@ const Title = styled(H1)`
3231
`;
3332

3433
const Ingress = styled.p`
35-
margin: var(--spacing-m) 0;
34+
margin: var(--spacing-m) 0 0;
3635
font-size: var(--fontsize-body-l);
3736
`;
3837

‎ui/components/index/Promotions.tsx‎

Lines changed: 0 additions & 118 deletions
This file was deleted.

0 commit comments

Comments
 (0)