Skip to content

Commit c6df6c2

Browse files
ashleynolanjamieomaguire
ashleynolan
and
jamieomaguire
authored
DSW-3689 - adding typography mixin test page (#395)
* typography page vanilla * all other pages * TEST: Cross-app header * TEST: Cross-app header 2 * preserve location between apps * test code to preserve location in url * typography visual tests and nav url update * visual test fix * percy.yml test * remove yml * remove strong tags * DSW-3594 - updating snapshot and adding classes * remove header stuff * DSW-3689 - adding typography mixin test page * DSW-3689 - adding typography mixin test page * DSW-3689 - test update * DSW-3689 - test title fix * DSW-3689 - test title fix * DSW-3689 - vanilla app scss support * DSW-3689 - update pie-css version --------- Co-authored-by: personal <jamieolivermaguire@googlemail.com>
1 parent fe31600 commit c6df6c2

Some content is hidden

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

44 files changed

+1154
-74
lines changed

‎nextjs-app-v14/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"upgrade-pie-packages": "yarn npm-check-updates \"@justeattakeaway/pie-*\" -u"
1515
},
1616
"dependencies": {
17-
"@justeattakeaway/pie-css": "0.24.0",
17+
"@justeattakeaway/pie-css": "0.26.2",
1818
"@justeattakeaway/pie-icons-webc": "1.17.0",
1919
"@justeattakeaway/pie-webc": "0.7.41",
2020
"@lit-labs/nextjs": "0.2.3",

‎nextjs-app-v14/src/app/components/home-page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ export default function HomePage() {
1414
<ul>
1515
<li><PieLink onClick={() => router.push('/integrations/controlled-form')} tag="button">Controlled Form Demo</PieLink></li>
1616
<li><PieLink onClick={() => router.push('/integrations/uncontrolled-form')} tag="button">Uncontrolled Form Demo</PieLink></li>
17+
<li><PieLink onClick={() => router.push('/integrations/typography-classes')} tag="button">Typography Demo (CSS Classes)</PieLink></li>
18+
<li><PieLink onClick={() => router.push('/integrations/typography-mixins')} tag="button">Typography Demo (Mixins)</PieLink></li>
1719
</ul>
1820
<h2>Component Pages</h2>
1921
<ul>

‎nextjs-app-v14/src/app/integrations/typography-classes/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import TypographyClasses from './typography-classes';
2+
import { type Metadata } from 'next';
3+
4+
export const metadata: Metadata = {
5+
title: 'Typography Demo (CSS Classes)',
6+
}
7+
8+
export default function TypographyPage() {
9+
return <TypographyClasses/>;
10+
}

‎nextjs-app-v14/src/app/integrations/typography-classes/typography-classes.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
'use client';
2+
3+
import NavigationLayout from '@/app/layout/navigation';
4+
5+
export default function TypographyClasses() {
6+
return (
7+
<NavigationLayout title="Typography (CSS Classes)">
8+
<section>
9+
<h1 className="u-font-heading-xxl">Main Title (XXL)</h1>
10+
<h2 className="u-font-heading-xl">Section Heading (XL)</h2>
11+
<h3 className="u-font-heading-l">Sub-Section Heading (L)</h3>
12+
<h4 className="u-font-heading-m">Content Block Title (M)</h4>
13+
<h5 className="u-font-heading-s">Small Header (S)</h5>
14+
<h6 className="u-font-heading-xs">Tiny Header (XS)</h6>
15+
16+
<h1 className="u-font-heading-xxl-italic">Main Title Italic (XXL)</h1>
17+
<h2 className="u-font-heading-xl-italic">Section Heading Italic (XL)</h2>
18+
<h3 className="u-font-heading-l-italic">Sub-Section Heading Italic (L)</h3>
19+
<h4 className="u-font-heading-m-italic">Content Block Title Italic (M)</h4>
20+
<h5 className="u-font-heading-s-italic">Small Header Italic (S)</h5>
21+
<h6 className="u-font-heading-xs-italic">Tiny Header Italic (XS)</h6>
22+
23+
<hr />
24+
25+
<p className="u-font-subheading-l">This is a prominent subheading, perhaps introducing a new section of body text (L).</p>
26+
<p className="u-font-subheading-s">This is a smaller subheading, useful for brief context or labels (S).</p>
27+
28+
<hr />
29+
30+
<p className="u-font-body-l">This is a main paragraph of body text (L). It&apos;s intended for long-form reading, like an article or detailed description.
31+
<a href="#" className="u-font-body-l-link">This is a link within the body text.</a>
32+
</p>
33+
34+
<p className="u-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
35+
<a href="#" className="u-font-body-s-link">This is a small link in the secondary body text.</a>
36+
</p>
37+
38+
<p className="u-font-body-strong-l">This is strong body text (L), highlighting a key takeaway or important warning.
39+
<a href="#" className="u-font-body-strong-l-link">Strong link here.</a>
40+
</p>
41+
42+
<p className="u-font-body-strong-s">This is strong body text (S), for emphasis in smaller contexts.
43+
<a href="#" className="u-font-body-strong-s-link">Strong small link here.</a>
44+
</p>
45+
46+
<hr />
47+
48+
<p>
49+
<button className="u-font-interactive-l">Large Interactive Button Text</button>
50+
<button className="u-font-interactive-s">Small Interactive Text</button>
51+
<button className="u-font-interactive-xs">Extra-Small Interactive Text</button>
52+
</p>
53+
54+
<hr />
55+
56+
<p className="u-font-caption">This is a standard caption, used for image descriptions, metadata, or footnotes.
57+
<a href="#" className="u-font-caption-link">Caption link example.</a>
58+
</p>
59+
60+
<p className="u-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
61+
<a href="#" className="u-font-caption-strong-link">Strong caption link.</a>
62+
</p>
63+
</section>
64+
</NavigationLayout>
65+
);
66+
}

‎nextjs-app-v14/src/app/integrations/typography-mixins/page.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import TypographyMixins from './typography-mixins';
2+
import { type Metadata } from 'next';
3+
4+
export const metadata: Metadata = {
5+
title: 'Typography Demo (Mixins)',
6+
}
7+
8+
export default function TypographyPage() {
9+
return <TypographyMixins/>;
10+
}

‎nextjs-app-v14/src/app/integrations/typography-mixins/typography-mixins.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
'use client';
2+
3+
import NavigationLayout from '@/app/layout/navigation';
4+
import '@/styles/typography-mixins.scss';
5+
6+
export default function TypographyDemo() {
7+
return (
8+
<NavigationLayout title="Typography">
9+
<section>
10+
<h1 className="test-font-heading-xxl">Main Title (XXL)</h1>
11+
<h2 className="test-font-heading-xl">Section Heading (XL)</h2>
12+
<h3 className="test-font-heading-l">Sub-Section Heading (L)</h3>
13+
<h4 className="test-font-heading-m">Content Block Title (M)</h4>
14+
<h5 className="test-font-heading-s">Small Header (S)</h5>
15+
<h6 className="test-font-heading-xs">Tiny Header (XS)</h6>
16+
17+
<h1 className="test-font-heading-xxl-italic">Main Title Italic (XXL)</h1>
18+
<h2 className="test-font-heading-xl-italic">Section Heading Italic (XL)</h2>
19+
<h3 className="test-font-heading-l-italic">Sub-Section Heading Italic (L)</h3>
20+
<h4 className="test-font-heading-m-italic">Content Block Title Italic (M)</h4>
21+
<h5 className="test-font-heading-s-italic">Small Header Italic (S)</h5>
22+
<h6 className="test-font-heading-xs-italic">Tiny Header Italic (XS)</h6>
23+
24+
<hr />
25+
26+
<p className="test-font-subheading-l">This is a prominent subheading, perhaps introducing a new section of body text (L).</p>
27+
<p className="test-font-subheading-s">This is a smaller subheading, useful for brief context or labels (S).</p>
28+
29+
<hr />
30+
31+
<p className="test-font-body-l">This is a main paragraph of body text (L). It&apos;s intended for long-form reading, like an article or detailed description.
32+
<a href="#" className="test-font-body-l-link">This is a link within the body text.</a>
33+
</p>
34+
35+
<p className="test-font-body-s">This is a smaller paragraph of body text (S). Used for secondary content or compact information.
36+
<a href="#" className="test-font-body-s-link">This is a small link in the secondary body text.</a>
37+
</p>
38+
39+
<p className="test-font-body-strong-l">This is strong body text (L), highlighting a key takeaway or important warning.
40+
<a href="#" className="test-font-body-strong-l-link">Strong link here.</a>
41+
</p>
42+
43+
<p className="test-font-body-strong-s">This is strong body text (S), for emphasis in smaller contexts.
44+
<a href="#" className="test-font-body-strong-s-link">Strong small link here.</a>
45+
</p>
46+
47+
<hr />
48+
49+
<p>
50+
<button className="test-font-interactive-l">Large Interactive Button Text</button>
51+
<button className="test-font-interactive-s">Small Interactive Text</button>
52+
<button className="test-font-interactive-xs">Extra-Small Interactive Text</button>
53+
</p>
54+
55+
<hr />
56+
57+
<p className="test-font-caption">This is a standard caption, used for image descriptions, metadata, or footnotes.
58+
<a href="#" className="test-font-caption-link">Caption link example.</a>
59+
</p>
60+
61+
<p className="test-font-caption-strong">This is a strong caption, useful for crucial metadata or brief labels.
62+
<a href="#" className="test-font-caption-strong-link">Strong caption link.</a>
63+
</p>
64+
</section>
65+
</NavigationLayout>
66+
);
67+
}

‎nextjs-app-v14/src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import Head from "next/head";
33
import "@justeattakeaway/pie-css";
4+
import "@justeattakeaway/pie-css/dist/helpers/typography.css";
45
import "@/styles/main.scss";
56

67
export const metadata: Metadata = {

‎nextjs-app-v14/src/app/layout/navigation.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ export default function NavigationLayout({ children, title }: NavigationLayoutPr
1818

1919
return (
2020
<>
21-
<h1>NextJS 14 - PIE { title } </h1>
22-
{ !isHomePage &&
21+
<h1 className="u-font-heading-xl">NextJS 14 - PIE { title } </h1>
22+
{ !isHomePage &&
2323
<>
2424
<PieLink onClick={() => router.push('/')} tag="button">Back to home</PieLink>
2525
<PieDivider/>

‎nextjs-app-v14/src/styles/main.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ html {
44

55
@font-face {
66
font-family: JETSansDigital;
7-
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
8-
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
9-
font-weight: 400;
7+
src: url('https://pie-design-system-cdn.production.jet-external.com/fonts/JETSansDigital-VF-optimised-extended.woff2') format("woff2");
8+
font-weight: 100 1000;
9+
font-stretch: 25% 151%;
10+
font-style: oblique 0deg 20deg;
1011
font-display: swap;
1112
}
1213

1314
@font-face {
14-
font-family: JETSansDigital;
15-
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
16-
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
17-
font-weight: 700;
15+
font-family: PTMono;
16+
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/PTMono-Regular.ttf') format("truetype");
17+
font-weight: 400;
1818
font-display: swap;
1919
}
2020
}

‎nextjs-app-v14/src/styles/typography-mixins.scss‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
@use '@justeattakeaway/pie-css/scss/mixins' as *;
2+
3+
// Typography utility classes using font-theme mixin
4+
5+
// Heading classes
6+
.test-font-heading-xs {
7+
@include font-theme('font-heading-xs');
8+
}
9+
.test-font-heading-s {
10+
@include font-theme('font-heading-s');
11+
}
12+
.test-font-heading-m {
13+
@include font-theme('font-heading-m');
14+
}
15+
.test-font-heading-l {
16+
@include font-theme('font-heading-l');
17+
}
18+
.test-font-heading-xl {
19+
@include font-theme('font-heading-xl');
20+
}
21+
.test-font-heading-xxl {
22+
@include font-theme('font-heading-xxl');
23+
}
24+
25+
// Heading italic classes
26+
.test-font-heading-xs-italic {
27+
@include font-theme('font-heading-xs-italic');
28+
}
29+
.test-font-heading-s-italic {
30+
@include font-theme('font-heading-s-italic');
31+
}
32+
.test-font-heading-m-italic {
33+
@include font-theme('font-heading-m-italic');
34+
}
35+
.test-font-heading-l-italic {
36+
@include font-theme('font-heading-l-italic');
37+
}
38+
.test-font-heading-xl-italic {
39+
@include font-theme('font-heading-xl-italic');
40+
}
41+
.test-font-heading-xxl-italic {
42+
@include font-theme('font-heading-xxl-italic');
43+
}
44+
45+
// Subheading classes
46+
.test-font-subheading-l {
47+
@include font-theme('font-subheading-l');
48+
}
49+
.test-font-subheading-s {
50+
@include font-theme('font-subheading-s');
51+
}
52+
53+
// Body text classes
54+
.test-font-body-l {
55+
@include font-theme('font-body-l');
56+
}
57+
.test-font-body-l-link {
58+
@include font-theme('font-body-l-link');
59+
}
60+
.test-font-body-s {
61+
@include font-theme('font-body-s');
62+
}
63+
.test-font-body-s-link {
64+
@include font-theme('font-body-s-link');
65+
}
66+
67+
// Strong body text classes
68+
.test-font-body-strong-l {
69+
@include font-theme('font-body-strong-l');
70+
}
71+
.test-font-body-strong-l-link {
72+
@include font-theme('font-body-strong-l-link');
73+
}
74+
.test-font-body-strong-s {
75+
@include font-theme('font-body-strong-s');
76+
}
77+
.test-font-body-strong-s-link {
78+
@include font-theme('font-body-strong-s-link');
79+
}
80+
81+
// Interactive classes
82+
.test-font-interactive-l {
83+
@include font-theme('font-interactive-l');
84+
}
85+
.test-font-interactive-s {
86+
@include font-theme('font-interactive-s');
87+
}
88+
.test-font-interactive-xs {
89+
@include font-theme('font-interactive-xs');
90+
}
91+
92+
// Caption classes
93+
.test-font-caption {
94+
@include font-theme('font-caption');
95+
}
96+
.test-font-caption-link {
97+
@include font-theme('font-caption-link');
98+
}
99+
.test-font-caption-strong {
100+
@include font-theme('font-caption-strong');
101+
}
102+
.test-font-caption-strong-link {
103+
@include font-theme('font-caption-strong-link');
104+
}

0 commit comments

Comments
 (0)