Skip to content

Commit 8161d6d

Browse files
avivkelleravivkeller
authored
chore(ui): move ArticleLayout to ui-components (#7762)
* chore(ui): move `ArticleLayout` to `ui-components` * fixup! chore(ui): move `ArticleLayout` to `ui-components` * add story
1 parent 87b1016 commit 8161d6d

File tree

8 files changed

+122
-82
lines changed

8 files changed

+122
-82
lines changed

‎apps/site/layouts/About.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1+
import Article from '@node-core/ui-components/Containers/Article';
12
import type { FC, PropsWithChildren } from 'react';
23

34
import WithBreadcrumbs from '#site/components/withBreadcrumbs';
45
import WithFooter from '#site/components/withFooter';
56
import WithMetaBar from '#site/components/withMetaBar';
67
import WithNavBar from '#site/components/withNavBar';
78
import WithSidebar from '#site/components/withSidebar';
8-
import ArticleLayout from '#site/layouts/Article';
99
import { ReleaseModalProvider } from '#site/providers/releaseModalProvider';
1010

1111
const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
1212
<ReleaseModalProvider>
1313
<WithNavBar />
1414

15-
<ArticleLayout>
15+
<Article>
1616
<WithSidebar navKeys={['about', 'getInvolved']} />
1717

1818
<div>
@@ -22,7 +22,7 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
2222
</div>
2323

2424
<WithBreadcrumbs navKeys={['about', 'getInvolved']} />
25-
</ArticleLayout>
25+
</Article>
2626

2727
<WithFooter />
2828
</ReleaseModalProvider>

‎apps/site/layouts/ArticlePage.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1+
import Article from '@node-core/ui-components/Containers/Article';
12
import type { FC, PropsWithChildren } from 'react';
23

34
import WithMetaBar from '#site/components/withMetaBar';
45
import WithNavBar from '#site/components/withNavBar';
56
import WithSidebar from '#site/components/withSidebar';
6-
import ArticleLayout from '#site/layouts/Article';
77

88
const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
99
<>
1010
<WithNavBar />
1111

12-
<ArticleLayout>
12+
<Article>
1313
<WithSidebar navKeys={[]} />
1414

1515
<div>
1616
<main>{children}</main>
1717

1818
<WithMetaBar />
1919
</div>
20-
</ArticleLayout>
20+
</Article>
2121
</>
2222
);
2323

‎apps/site/layouts/Default.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1+
import Article from '@node-core/ui-components/Containers/Article';
12
import type { FC, PropsWithChildren } from 'react';
23

34
import WithFooter from '#site/components/withFooter';
45
import WithNavBar from '#site/components/withNavBar';
56
import WithSidebar from '#site/components/withSidebar';
6-
import ArticleLayout from '#site/layouts/Article';
77

88
const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
99
<>
1010
<WithNavBar />
1111

12-
<ArticleLayout>
12+
<Article>
1313
<WithSidebar navKeys={[]} />
1414

1515
<div>
1616
<main>{children}</main>
1717
</div>
18-
</ArticleLayout>
18+
</Article>
1919

2020
<WithFooter />
2121
</>

‎apps/site/layouts/Learn.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Article from '@node-core/ui-components/Containers/Article';
12
import type { FC, PropsWithChildren } from 'react';
23

34
import WithBreadcrumbs from '#site/components/withBreadcrumbs';
@@ -6,13 +7,12 @@ import WithMetaBar from '#site/components/withMetaBar';
67
import WithNavBar from '#site/components/withNavBar';
78
import WithProgressionSidebar from '#site/components/withProgressionSidebar';
89
import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks';
9-
import ArticleLayout from '#site/layouts/Article';
1010

1111
const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
1212
<>
1313
<WithNavBar />
1414

15-
<ArticleLayout>
15+
<Article>
1616
<WithProgressionSidebar navKey="learn" />
1717

1818
<div>
@@ -26,7 +26,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
2626
</div>
2727

2828
<WithBreadcrumbs navKeys={['learn']} />
29-
</ArticleLayout>
29+
</Article>
3030

3131
<WithFooter />
3232
</>

‎apps/site/layouts/layouts.module.css

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -9,75 +9,6 @@
99
grid-rows-[auto_1fr_auto];
1010
}
1111

12-
.articleLayout {
13-
@apply max-w-8xl
14-
mx-auto
15-
block
16-
w-full
17-
sm:grid
18-
sm:grid-cols-[theme(spacing.52)_1fr]
19-
sm:grid-rows-[1fr]
20-
sm:overflow-visible
21-
sm:[grid-template-areas:'sidebar_main''sidebar_footer']
22-
md:grid-cols-[theme(spacing.64)_1fr]
23-
lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
24-
lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
25-
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
26-
27-
> *:nth-child(1) {
28-
@apply [grid-area:sidebar]
29-
lg:sticky
30-
lg:top-0
31-
lg:h-[100vh]
32-
lg:overflow-y-auto;
33-
}
34-
35-
> *:nth-child(2) {
36-
@apply contents
37-
sm:max-lg:block;
38-
39-
> *:first-child {
40-
@apply sm:bg-gradient-subtle
41-
sm:dark:bg-gradient-subtle-dark
42-
xl:px-18
43-
p-4
44-
[grid-area:main]
45-
motion-safe:scroll-smooth
46-
sm:bg-fixed
47-
sm:p-12;
48-
}
49-
50-
> *:last-child {
51-
@apply mt-8
52-
border-t
53-
[grid-area:metabar]
54-
sm:mt-0
55-
lg:sticky
56-
lg:top-0
57-
lg:max-w-xs
58-
lg:border-l
59-
lg:border-t-0;
60-
}
61-
}
62-
63-
> *:nth-child(3) {
64-
@apply sticky
65-
bottom-0
66-
flex
67-
w-full
68-
flex-col
69-
items-center
70-
self-stretch
71-
border-t
72-
border-t-neutral-200
73-
bg-white
74-
py-4
75-
[grid-area:footer]
76-
dark:border-t-neutral-900
77-
dark:bg-neutral-950;
78-
}
79-
}
80-
8112
.centeredLayout {
8213
@apply flex
8314
w-full

‎packages/ui-components/Containers/Article/index.module.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@reference "../../styles/index.css";
2+
3+
.articleLayout {
4+
@apply max-w-8xl
5+
mx-auto
6+
block
7+
w-full
8+
sm:grid
9+
sm:grid-cols-[theme(spacing.52)_1fr]
10+
sm:grid-rows-[1fr]
11+
sm:overflow-visible
12+
sm:[grid-template-areas:'sidebar_main''sidebar_footer']
13+
md:grid-cols-[theme(spacing.64)_1fr]
14+
lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
15+
lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
16+
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
17+
18+
> *:nth-child(1) {
19+
@apply [grid-area:sidebar]
20+
lg:sticky
21+
lg:top-0
22+
lg:h-[100vh]
23+
lg:overflow-y-auto;
24+
}
25+
26+
> *:nth-child(2) {
27+
@apply contents
28+
sm:max-lg:block;
29+
30+
> *:first-child {
31+
@apply sm:bg-gradient-subtle
32+
sm:dark:bg-gradient-subtle-dark
33+
xl:px-18
34+
p-4
35+
[grid-area:main]
36+
motion-safe:scroll-smooth
37+
sm:bg-fixed
38+
sm:p-12;
39+
}
40+
41+
> *:last-child {
42+
@apply mt-8
43+
border-t
44+
[grid-area:metabar]
45+
sm:mt-0
46+
lg:sticky
47+
lg:top-0
48+
lg:max-w-xs
49+
lg:border-l
50+
lg:border-t-0;
51+
}
52+
}
53+
54+
> *:nth-child(3) {
55+
@apply sticky
56+
bottom-0
57+
flex
58+
w-full
59+
flex-col
60+
items-center
61+
self-stretch
62+
border-t
63+
border-t-neutral-200
64+
bg-white
65+
py-4
66+
[grid-area:footer]
67+
dark:border-t-neutral-900
68+
dark:bg-neutral-950;
69+
}
70+
}

‎packages/ui-components/Containers/Article/index.stories.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
3+
import Article from '.';
4+
5+
type Story = StoryObj<typeof Article>;
6+
type Meta = MetaObj<typeof Article>;
7+
8+
const Sidebar = () => (
9+
<div className="text-center">
10+
<h3>Sidebar</h3>
11+
<ul>
12+
<li>Navigation Item 1</li>
13+
<li>Navigation Item 2</li>
14+
<li>Navigation Item 3</li>
15+
<li>Navigation Item 4</li>
16+
</ul>
17+
</div>
18+
);
19+
20+
export const Default: Story = {
21+
args: {
22+
children: (
23+
<>
24+
<Sidebar />
25+
<div>
26+
<main>
27+
<p>
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
29+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
30+
</p>
31+
</main>
32+
<Sidebar />
33+
</div>
34+
</>
35+
),
36+
},
37+
};
38+
39+
export default { component: Article } as Meta;

‎apps/site/layouts/Article.tsx renamed to ‎packages/ui-components/Containers/Article/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { FC, PropsWithChildren } from 'react';
22

3-
import styles from './layouts.module.css';
3+
import styles from './index.module.css';
44

55
const ArticleLayout: FC<PropsWithChildren> = ({ children }) => (
66
<div className={styles.articleLayout}>{children}</div>

0 commit comments

Comments
 (0)