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

Commit f47f191

Browse files
chiciochicio
authored
Art page with logo (#93) 🚀
* showcase page template 🚀 * Added showcase story 🚀 * Adding showcase template to art page 🚀 * Added featured image for art page 🚀 * Adding description to art page 🚀 * Below the fold content for art page 🚀 * Fix tests 🚀 * Fix tests 🚀 * Fix logo image position 🚀 * Added arrow bouncing 🚀 * Ready for prod 🚀
1 parent 461ae2b commit f47f191

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+531
-247
lines changed

‎.storybook/preview.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { action } from "@storybook/addon-actions"
33
import { ThemeProvider } from 'styled-components';
4-
import { theme } from "../src/components/design-system/theme";
4+
import { blogTheme } from "../src/components/design-system/theme";
55
import { GlobalStyle } from "../src/components/design-system/global-style";
66

77
/** https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/ **/
@@ -18,7 +18,7 @@ window.___navigate = pathname => {
1818

1919
export const decorators = [
2020
(Story) => (
21-
<ThemeProvider theme={theme}>
21+
<ThemeProvider theme={blogTheme}>
2222
<GlobalStyle/>
2323
<Story />
2424
</ThemeProvider>

‎__stories__/colors.stories.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { Meta } from "@storybook/react";
33
import styled from "styled-components";
44
import { ContainerFluid } from "../src/components/design-system/atoms/container-fluid";
5-
import { dark, light } from "../src/components/design-system/theme";
5+
import { blogDark, blogLight } from "../src/components/design-system/theme";
66

77
const ColorsContainer = styled.div`
88
display: flex;
@@ -39,18 +39,18 @@ export const Colors: React.VFC = () => (
3939
<ColorsContainer>
4040
<ColorColumnContainer>
4141
<ColorColumnTitle>Dark theme</ColorColumnTitle>
42-
{Object.keys(dark).map((color, index) => (
42+
{Object.keys(blogDark).map((color, index) => (
4343
// @ts-ignore
44-
<Color key={`${color}${index}dark`} color={dark[color]}>
44+
<Color key={`${color}${index}dark`} color={blogDark[color]}>
4545
{color}
4646
</Color>
4747
))}
4848
</ColorColumnContainer>
4949
<ColorColumnContainer>
5050
<ColorColumnTitle>Light theme</ColorColumnTitle>
51-
{Object.keys(light).map((color, index) => (
51+
{Object.keys(blogLight).map((color, index) => (
5252
// @ts-ignore
53-
<Color key={`${color}${index}light`} color={light[color]}>
53+
<Color key={`${color}${index}light`} color={blogLight[color]}>
5454
{color}
5555
</Color>
5656
))}

‎__stories__/organism/gallery.stories.tsx‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ GalleryStory.args = {
1818
backgroundColor: "#d8d8d8",
1919
images: {
2020
fallback: {
21-
src:
22-
"/static/d91415fd4b18003859c9ff621f4f0596/e3115/2021-04-18.jpg",
21+
src: "/static/d91415fd4b18003859c9ff621f4f0596/e3115/2021-04-18.jpg",
2322
srcSet:
2423
"/static/d91415fd4b18003859c9ff621f4f0596/e3115/2021-04-18.jpg 640w",
2524
sizes: "100vw",
@@ -48,8 +47,7 @@ GalleryStory.args = {
4847
backgroundColor: "#b8a888",
4948
images: {
5049
fallback: {
51-
src:
52-
"/static/d3746394c1a8e0a5067cd1f090a5a9b8/e3115/2021-03-18.jpg",
50+
src: "/static/d3746394c1a8e0a5067cd1f090a5a9b8/e3115/2021-03-18.jpg",
5351
srcSet:
5452
"/static/d3746394c1a8e0a5067cd1f090a5a9b8/e3115/2021-03-18.jpg 640w",
5553
sizes: "100vw",
@@ -78,8 +76,7 @@ GalleryStory.args = {
7876
backgroundColor: "#d8d8d8",
7977
images: {
8078
fallback: {
81-
src:
82-
"/static/617e9a5009f456d3a16060908f474963/e3115/2021-03-07.jpg",
79+
src: "/static/617e9a5009f456d3a16060908f474963/e3115/2021-03-07.jpg",
8380
srcSet:
8481
"/static/617e9a5009f456d3a16060908f474963/e3115/2021-03-07.jpg 640w",
8582
sizes: "100vw",
@@ -108,8 +105,7 @@ GalleryStory.args = {
108105
backgroundColor: "#e8e8e8",
109106
images: {
110107
fallback: {
111-
src:
112-
"/static/e047f986b42333fa75dc0ff0d02ead2e/e3115/2021-02-21.jpg",
108+
src: "/static/e047f986b42333fa75dc0ff0d02ead2e/e3115/2021-02-21.jpg",
113109
srcSet:
114110
"/static/e047f986b42333fa75dc0ff0d02ead2e/e3115/2021-02-21.jpg 640w",
115111
sizes: "100vw",
@@ -138,8 +134,7 @@ GalleryStory.args = {
138134
backgroundColor: "#a89888",
139135
images: {
140136
fallback: {
141-
src:
142-
"/static/c1a6764b0e07aaa8423197bf5ea42baf/ccdae/2021-01-31.jpg",
137+
src: "/static/c1a6764b0e07aaa8423197bf5ea42baf/ccdae/2021-01-31.jpg",
143138
srcSet:
144139
"/static/c1a6764b0e07aaa8423197bf5ea42baf/a6eba/2021-01-31.jpg 750w,\n/static/c1a6764b0e07aaa8423197bf5ea42baf/ccdae/2021-01-31.jpg 1080w",
145140
sizes: "100vw",
@@ -168,8 +163,7 @@ GalleryStory.args = {
168163
backgroundColor: "#e8c8a8",
169164
images: {
170165
fallback: {
171-
src:
172-
"/static/556abc843cb34ae666f4d7e8f000eab3/68d35/2021-01-13.jpg",
166+
src: "/static/556abc843cb34ae666f4d7e8f000eab3/68d35/2021-01-13.jpg",
173167
srcSet:
174168
"/static/556abc843cb34ae666f4d7e8f000eab3/4423a/2021-01-13.jpg 750w,\n/static/556abc843cb34ae666f4d7e8f000eab3/68d35/2021-01-13.jpg 1080w",
175169
sizes: "100vw",
@@ -198,8 +192,7 @@ GalleryStory.args = {
198192
backgroundColor: "#e8c8a8",
199193
images: {
200194
fallback: {
201-
src:
202-
"/static/2d9a015e1931e2e416a62abeafc91ceb/d93c0/2020-12-21.jpg",
195+
src: "/static/2d9a015e1931e2e416a62abeafc91ceb/d93c0/2020-12-21.jpg",
203196
srcSet:
204197
"/static/2d9a015e1931e2e416a62abeafc91ceb/33257/2020-12-21.jpg 750w,\n/static/2d9a015e1931e2e416a62abeafc91ceb/d93c0/2020-12-21.jpg 1080w",
205198
sizes: "100vw",
@@ -228,8 +221,7 @@ GalleryStory.args = {
228221
backgroundColor: "#f8d8b8",
229222
images: {
230223
fallback: {
231-
src:
232-
"/static/81602406773c0409bbe9016362435bf4/49438/2020-11-11.jpg",
224+
src: "/static/81602406773c0409bbe9016362435bf4/49438/2020-11-11.jpg",
233225
srcSet:
234226
"/static/81602406773c0409bbe9016362435bf4/6c918/2020-11-11.jpg 750w,\n/static/81602406773c0409bbe9016362435bf4/49438/2020-11-11.jpg 1080w",
235227
sizes: "100vw",
@@ -258,8 +250,7 @@ GalleryStory.args = {
258250
backgroundColor: "#d8b898",
259251
images: {
260252
fallback: {
261-
src:
262-
"/static/6d78e5250cc32ed29a9694fa0db5e30a/68d35/2020-10-20.jpg",
253+
src: "/static/6d78e5250cc32ed29a9694fa0db5e30a/68d35/2020-10-20.jpg",
263254
srcSet:
264255
"/static/6d78e5250cc32ed29a9694fa0db5e30a/4423a/2020-10-20.jpg 750w,\n/static/6d78e5250cc32ed29a9694fa0db5e30a/68d35/2020-10-20.jpg 1080w",
265256
sizes: "100vw",

__stories__/templates/blog-generic-post-list-page.stories.tsx renamed to __stories__/templates/blog-generic-post-list-page-template.stories.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from "react";
22
import { Meta, Story } from "@storybook/react";
3-
import { BlogPage } from "../../src/components/design-system/templates/blog-page";
3+
import { BlogPageTemplate } from "../../src/components/design-system/templates/blog-page-template";
44
import {
5-
BlogGenericPostListPage,
6-
BlogGenericPostListPageProps
7-
} from "../../src/components/design-system/templates/blog-generic-post-list-page";
5+
BlogGenericPostListPageTemplate,
6+
BlogGenericPostListPageProps,
7+
} from "../../src/components/design-system/templates/blog-generic-post-list-page-template";
88
import { OgPageType } from "../../src/logic/seo";
99

10-
export const BlogGenericPostListPagePageStory: Story<BlogGenericPostListPageProps> = (
11-
args
12-
) => <BlogGenericPostListPage {...args} />;
13-
BlogGenericPostListPagePageStory.args = {
10+
export const BlogGenericPostListPagePageTemplateStory: Story<BlogGenericPostListPageProps> =
11+
(args) => <BlogGenericPostListPageTemplate {...args} />;
12+
BlogGenericPostListPagePageTemplateStory.args = {
1413
title: "Archive",
1514
posts: [
1615
{
@@ -140,9 +139,10 @@ BlogGenericPostListPagePageStory.args = {
140139
ogImage: "/a-photo.jpg",
141140
trackingCategory: "archive",
142141
};
143-
BlogGenericPostListPagePageStory.storyName = "Blog Page Generic Post List";
142+
BlogGenericPostListPagePageTemplateStory.storyName =
143+
"Blog Page Generic Post List";
144144

145145
export default {
146-
title: "Templates/Blog Page Generic Post List",
147-
component: BlogPage,
146+
title: "Templates/Blog Page Generic Post List Page Template",
147+
component: BlogPageTemplate,
148148
} as Meta;

__stories__/templates/blog-page.stories.tsx renamed to __stories__/templates/blog-page-template.stories.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from "react";
22
import { Meta, Story } from "@storybook/react";
33
import {
4-
BlogPage,
4+
BlogPageTemplate,
55
BlogPageProps,
6-
} from "../../src/components/design-system/templates/blog-page";
6+
} from "../../src/components/design-system/templates/blog-page-template";
77
import { Paragraph } from "../../src/components/design-system/atoms/paragraph";
88
import { OgPageType } from "../../src/logic/seo";
99

10-
export const BlogPageStory: Story<BlogPageProps> = (args) => (
11-
<BlogPage {...args}>
10+
export const BlogPageTemplateStory: Story<BlogPageProps> = (args) => (
11+
<BlogPageTemplate {...args}>
1212
<Paragraph>Example page</Paragraph>
13-
</BlogPage>
13+
</BlogPageTemplate>
1414
);
15-
BlogPageStory.args = {
15+
BlogPageTemplateStory.args = {
1616
location: {
1717
pathname: "/blog/",
1818
url: "http://localhost:8000/blog/",
@@ -22,9 +22,9 @@ BlogPageStory.args = {
2222
ogImage: "/a-photo.jpg",
2323
trackingCategory: "blog",
2424
};
25-
BlogPageStory.storyName = "Blog Page";
25+
BlogPageTemplateStory.storyName = "Blog Page Template";
2626

2727
export default {
28-
title: "Templates/Blog Page",
29-
component: BlogPage,
28+
title: "Templates/Blog Page Template",
29+
component: BlogPageTemplate,
3030
} as Meta;

‎__stories__/templates/showcase-page-template.stories.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import { Meta, Story } from "@storybook/react";
3+
import { BlogPageProps } from "../../src/components/design-system/templates/blog-page-template";
4+
import { OgPageType } from "../../src/logic/seo";
5+
import { ProfilePresentation } from "../../src/components/design-system/organism/profile-presentation";
6+
import { ShowcasePageTemplate } from "../../src/components/design-system/templates/showcase-page-template";
7+
import { BackgroundFullScreen } from "../../src/components/background-fullscreen";
8+
import BottomIndex from "../../src/components/bottom-index";
9+
import { blogTheme } from "../../src/components/design-system/theme";
10+
11+
export const ShowcasePageTemplateStory: Story<BlogPageProps> = () => (
12+
<ShowcasePageTemplate
13+
location={{
14+
pathname: "/",
15+
url: "http://localhost:8000/",
16+
}}
17+
theme={blogTheme}
18+
fullScreenComponent={
19+
<>
20+
<BackgroundFullScreen />
21+
<ProfilePresentation author={"author"} />
22+
</>
23+
}
24+
trackingCategory={"tracking"}
25+
ogPageType={OgPageType.Person}
26+
featuredImage={"url"}
27+
>
28+
<BottomIndex author={"author"} />
29+
</ShowcasePageTemplate>
30+
);
31+
32+
ShowcasePageTemplateStory.storyName = "Showcase Page Template";
33+
34+
export default {
35+
title: "Templates/Showcase Page Template",
36+
component: ShowcasePageTemplate,
37+
} as Meta;

‎__tests__/call-to-action-external-with-tracking.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { fireEvent, render, screen } from "@testing-library/react";
33
import { trackWith } from "../src/logic/tracking";
4-
import { Page } from "../src/components/design-system/templates/page";
4+
import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";
55
import { CallToActionExternalWithTracking } from "../src/components/call-to-action-external-with-tracking";
66

77
jest.mock("../src/logic/tracking", () => ({
@@ -14,7 +14,7 @@ const trackWithMock = trackWith as jest.MockedFunction<typeof trackWith>;
1414
describe("CallToActionExternalWithTracking", () => {
1515
it("track", async () => {
1616
render(
17-
<Page>
17+
<BlogThemePage>
1818
<CallToActionExternalWithTracking
1919
href={"/an-url"}
2020
trackingData={{
@@ -25,7 +25,7 @@ describe("CallToActionExternalWithTracking", () => {
2525
>
2626
Button
2727
</CallToActionExternalWithTracking>
28-
</Page>
28+
</BlogThemePage>
2929
);
3030
const button = screen.getByText("Button");
3131

‎__tests__/call-to-action-internal-with-tracking.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { fireEvent, render, screen } from "@testing-library/react";
33
import { CallToActionInternalWithTracking } from "../src/components/call-to-action-internal-with-tracking";
44
import { trackWith } from "../src/logic/tracking";
5-
import { Page } from "../src/components/design-system/templates/page";
5+
import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";
66

77
jest.mock("../src/logic/tracking", () => ({
88
...jest.requireActual("../src/logic/tracking"),
@@ -14,7 +14,7 @@ const trackWithMock = trackWith as jest.MockedFunction<typeof trackWith>;
1414
describe("CallToActionInternalWithTracking", () => {
1515
it("track", async () => {
1616
render(
17-
<Page>
17+
<BlogThemePage>
1818
<CallToActionInternalWithTracking
1919
to={"/an-url"}
2020
trackingData={{
@@ -25,7 +25,7 @@ describe("CallToActionInternalWithTracking", () => {
2525
>
2626
Button
2727
</CallToActionInternalWithTracking>
28-
</Page>
28+
</BlogThemePage>
2929
);
3030
const button = screen.getByText("Button");
3131

‎__tests__/gallery.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22
import { fireEvent, render, screen } from "@testing-library/react";
33
import { Gallery } from "../src/components/design-system/organism/gallery";
4-
import { Page } from "../src/components/design-system/templates/page";
4+
import { BlogThemePage } from "../src/components/design-system/templates/blog-theme-page";
55

66
const images = [
77
{
@@ -67,9 +67,9 @@ const images = [
6767
describe("Gallery", () => {
6868
it("shows the image when the user clicks on it", async () => {
6969
render(
70-
<Page>
70+
<BlogThemePage>
7171
<Gallery images={images} />
72-
</Page>
72+
</BlogThemePage>
7373
);
7474

7575
const image = screen.getByAltText("2021-03-30");

‎__tests__/head.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ describe("Head", () => {
6868
customTitle={"a custom title"}
6969
date={""}
7070
description={""}
71+
cookieConsentColor={"303F9F"}
7172
/>
7273
);
7374

@@ -84,6 +85,7 @@ describe("Head", () => {
8485
imageUrl={""}
8586
date={""}
8687
description={""}
88+
cookieConsentColor={"303F9F"}
8789
/>
8890
);
8991

@@ -104,6 +106,7 @@ describe("Head", () => {
104106
customTitle={"a custom title"}
105107
date={""}
106108
description={""}
109+
cookieConsentColor={"303F9F"}
107110
/>
108111
);
109112

@@ -121,6 +124,7 @@ describe("Head", () => {
121124
customTitle={"a custom title"}
122125
date={""}
123126
description={""}
127+
cookieConsentColor={"303F9F"}
124128
/>
125129
);
126130

@@ -141,6 +145,7 @@ describe("Head", () => {
141145
customTitle={"a custom title"}
142146
date={""}
143147
description={""}
148+
cookieConsentColor={"303F9F"}
144149
/>
145150
);
146151

@@ -174,6 +179,7 @@ describe("Head", () => {
174179
customTitle={"a custom title"}
175180
date={""}
176181
description={""}
182+
cookieConsentColor={"#303F9F"}
177183
/>
178184
);
179185

@@ -208,6 +214,7 @@ describe("Head", () => {
208214
customTitle={"a custom title"}
209215
date={""}
210216
description={""}
217+
cookieConsentColor={"303F9F"}
211218
/>
212219
);
213220

0 commit comments

Comments
 (0)