Skip to content

Commit 3cf16d1

Browse files
StegosaurussStegosauruss
committed
feat: subnavigation dropdown options - Use design tokens in subnav story
1 parent ae44fbd commit 3cf16d1

File tree

2 files changed

+48
-47
lines changed

2 files changed

+48
-47
lines changed

‎components/o-header/stories/subnav.scss‎

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
1+
@import '@financial-times/o-private-foundation/main';
12

23
.demo-dropdown-description {
3-
padding: 20px;
4+
padding: oPrivateFoundationGet('o3-spacing-xs');
45
max-width: 800px;
5-
margin: 40px auto 0;
6-
background-color: #FFF1E5;
7-
border-left: 4px solid #FF8833;
8-
font-family: MetricWeb, sans-serif;
6+
margin: oPrivateFoundationGet('o3-spacing-l') auto 0;
7+
background-color: oPrivateFoundationGet('o3-color-palette-paper');
8+
border-left: oPrivateFoundationGet('o3-spacing-5xs') solid oPrivateFoundationGet('o3-color-palette-mandarin');
9+
font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
910

1011
h3 {
1112
margin-top: 0;
12-
margin-bottom: 12px;
13-
font-size: 18px;
14-
font-weight: 600;
13+
margin-bottom: oPrivateFoundationGet('o3-spacing-3xs');
14+
font-size: oPrivateFoundationGet('o3-type-headline-sm-font-size');
15+
font-weight: bold;
1516
}
1617

1718
p {
18-
margin: 8px 0;
19-
line-height: 1.6;
20-
font-size: 14px;
19+
margin: oPrivateFoundationGet('o3-spacing-4xs') 0;
20+
line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
21+
font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
2122
}
2223
}
2324

2425
.o-header__subnav-dropdown {
2526
position: fixed;
2627
transform: translate(-50%, -50%);
27-
border: 1px solid #E6D9CE;
28-
background: #FFFFFF;
29-
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
28+
border: 1px solid oPrivateFoundationGet('o3-color-palette-black-10');
29+
background: oPrivateFoundationGet('o3-color-palette-white');
30+
box-shadow: 0 oPrivateFoundationGet('o3-spacing-5xs') oPrivateFoundationGet('o3-spacing-5xs') 0 rgba(0, 0, 0, 0.25);
3031
z-index: 9999;
3132
width: 177px;
32-
padding: 16px 72px 24px 12px;
33+
padding: oPrivateFoundationGet('o3-spacing-2xs') 72px oPrivateFoundationGet('o3-spacing-xs') oPrivateFoundationGet('o3-spacing-3xs');
3334
display: none;
3435
}
3536

@@ -41,26 +42,26 @@
4142

4243
.o-header__subnav-dropdown-item {
4344
&:not(:last-child) {
44-
margin-bottom: 24px;
45+
margin-bottom: oPrivateFoundationGet('o3-spacing-xs');
4546
}
4647
}
4748

4849
.o-header__subnav-dropdown-link {
4950
display: block;
5051
width: 177px;
51-
height: 20px;
52-
color: #000000;
53-
line-height: 1.5;
54-
font-weight: 400;
55-
font-family: MetricWeb, sans-serif;
56-
font-size: 16px;
52+
height: oPrivateFoundationGet('o3-spacing-xs');
53+
color: oPrivateFoundationGet('o3-color-palette-black');
54+
line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
55+
font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
56+
font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
57+
font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
5758
text-decoration: none;
5859
transition: text-decoration 0.2s ease;
5960

6061
@media (hover: hover) and (pointer: fine) {
6162
&:hover {
6263
text-decoration: underline;
63-
color: #000000;
64+
color: oPrivateFoundationGet('o3-color-palette-black');
6465
}
6566
}
6667
}
@@ -72,43 +73,43 @@
7273

7374
.o-header__subnav-dropdown {
7475
position: fixed;
75-
top: 8px;
76-
left: 8px;
77-
right: 8px;
78-
bottom: 8px;
76+
top: oPrivateFoundationGet('o3-spacing-4xs');
77+
left: oPrivateFoundationGet('o3-spacing-4xs');
78+
right: oPrivateFoundationGet('o3-spacing-4xs');
79+
bottom: oPrivateFoundationGet('o3-spacing-4xs');
7980
width: auto;
8081
max-width: none;
8182
height: auto;
8283
transform: none;
8384
padding: 0;
8485
overflow-y: auto;
85-
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.3);
86+
box-shadow: 0 oPrivateFoundationGet('o3-spacing-5xs') oPrivateFoundationGet('o3-spacing-3xs') 0 rgba(0, 0, 0, 0.3);
8687
}
8788

8889
.o-header__subnav-dropdown-title,
8990
.o-header__subnav-dropdown-link {
90-
font-size: 20px;
91-
color: #000000;
92-
font-family: MetricWeb, sans-serif;
93-
line-height: 1.4;
91+
font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
92+
color: oPrivateFoundationGet('o3-color-palette-black');
93+
font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
94+
line-height: oPrivateFoundationGet('o3-type-body-base-font-size');
9495
}
9596

9697
.o-header__subnav-dropdown-title {
9798
display: block;
98-
margin: 64px 16px 0 24px;
99-
padding-bottom: 8px;
100-
border-bottom: 6px solid #000000;
99+
margin: oPrivateFoundationGet('o3-spacing-2xl') oPrivateFoundationGet('o3-spacing-2xs') 0 oPrivateFoundationGet('o3-spacing-xs');
100+
padding-bottom: oPrivateFoundationGet('o3-spacing-4xs');
101+
border-bottom: 6px solid oPrivateFoundationGet('o3-color-palette-black');
101102
padding-left: 2px;
102-
font-weight: 700;
103+
font-weight: bold;
103104
}
104105

105106
.o-header__subnav-dropdown-close {
106107
display: block;
107108
position: absolute;
108-
top: 16px;
109-
right: 16px;
110-
width: 24px;
111-
height: 24px;
109+
top: oPrivateFoundationGet('o3-spacing-2xs');
110+
right: oPrivateFoundationGet('o3-spacing-2xs');
111+
width: oPrivateFoundationGet('o3-spacing-xs');
112+
height: oPrivateFoundationGet('o3-spacing-xs');
112113
border: unset;
113114
background: transparent;
114115
padding: 0;
@@ -121,9 +122,9 @@
121122
position: absolute;
122123
top: 50%;
123124
left: 50%;
124-
width: 20px;
125+
width: oPrivateFoundationGet('o3-spacing-xs');
125126
height: 2px;
126-
background-color: #000000;
127+
background-color: oPrivateFoundationGet('o3-color-palette-black');
127128
}
128129

129130
&::before {
@@ -136,18 +137,18 @@
136137
}
137138

138139
.o-header__subnav-dropdown-list {
139-
margin: 0 16px 16px 24px;
140-
padding-top: 16px;
140+
margin: 0 oPrivateFoundationGet('o3-spacing-2xs') oPrivateFoundationGet('o3-spacing-2xs') oPrivateFoundationGet('o3-spacing-xs');
141+
padding-top: oPrivateFoundationGet('o3-spacing-2xs');
141142
padding-left: 2px;
142143
}
143144

144145
.o-header__subnav-dropdown-link {
145-
height: 20px;
146+
height: oPrivateFoundationGet('o3-spacing-xs');
146147
width: 100%;
147148
display: flex;
148149
align-items: center;
149150
padding: 0;
150-
font-weight: 400;
151+
font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
151152
}
152153
}
153154

‎components/o-header/stories/subnav.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function SubnavWithDropdownsDemo({items}: {items: SubnavItem[]}) {
7474
data-o-header-subnav-wrapper>
7575
<div className="o-header__subnav-content">
7676
<ul
77-
className="o-header__subnav-list o-header__subnav-list--children"
77+
className="o-header__subnav-list o-header__subnav-list-children"
7878
aria-label="Subsections">
7979
{items.map((item, i) => {
8080
const selectedClass = item.selected

0 commit comments

Comments
 (0)