WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 9800f10

Browse files
robredpathrobredpath
authored
Merge pull request #66 from IATI/compact-header
Compact header variant
2 parents 70e78f0 + 62a1205 commit 9800f10

File tree

10 files changed

+237
-8
lines changed

10 files changed

+237
-8
lines changed

‎src/scss/components/button/_button.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,14 @@
4141

4242
&--submit {
4343
color: $color-grey-90;
44-
background-color: $color-green-50;
44+
background-color: $color-green-40;
4545
&:hover {
46-
background-color: $color-green-40;
46+
background-color: $color-green-50;
4747
}
4848
}
49+
50+
&--compact {
51+
padding-top: 0.5rem;
52+
padding-bottom: 0.5rem;
53+
}
4954
}

‎src/scss/components/button/button.stories.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,27 @@ export const WithIcon: Story = {
5050
</button>
5151
`,
5252
};
53+
54+
export const Compact: Story = {
55+
render: () =>
56+
html`<button class="iati-button iati-button--compact">Button</button>`,
57+
};
58+
59+
export const CompactLight: Story = {
60+
parameters: {
61+
backgrounds: {
62+
default: "dark",
63+
},
64+
},
65+
render: () =>
66+
html`<button class="iati-button iati-button--light iati-button--compact">
67+
Button
68+
</button>`,
69+
};
70+
71+
export const CompactSubmit: Story = {
72+
render: () =>
73+
html`<button class="iati-button iati-button--submit iati-button--compact">
74+
Submit
75+
</button>`,
76+
};

‎src/scss/components/country-switcher/_country-switcher.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,16 @@
3737
background-color: currentColor;
3838
clip-path: polygon(15% 0, 0 0, 50% 100%, 100% 0, 85% 0, 50% 70%);
3939
}
40+
41+
&--compact {
42+
.iati-country-switcher__control {
43+
padding-top: 0.5rem;
44+
padding-bottom: 0.5rem;
45+
}
46+
&::after {
47+
right: 0.6875rem;
48+
width: 0.625rem;
49+
height: 0.3125rem;
50+
}
51+
}
4052
}

‎src/scss/components/country-switcher/country-switcher.stories.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,22 @@ export const CountrySwitcher: Story = {
2626
</div>
2727
`,
2828
};
29+
30+
export const Compact: Story = {
31+
render: () => html`
32+
<div class="iati-country-switcher iati-country-switcher--compact">
33+
<label
34+
for="iati-country-switcher-compact"
35+
class="iati-country-switcher__label"
36+
>Choose your language</label
37+
>
38+
<select
39+
id="iati-country-switcher-compact"
40+
class="iati-country-switcher__control"
41+
>
42+
<option>English</option>
43+
<option>French</option>
44+
</select>
45+
</div>
46+
`,
47+
};

‎src/scss/components/header/Docs.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,12 @@ The first link in the menu must return to the tool's home page. Further links ar
1818

1919
If breadcrumbs are to be used, these should be directly below the header.
2020

21+
## Default Header
22+
2123
<Canvas of={ComponentStories.Header} />
24+
25+
## Compact Header
26+
27+
The compact header variant places the title bar and actions on the same line and removes the `Tool Nav`.
28+
29+
<Canvas of={ComponentStories.CompactHeader} />

‎src/scss/components/header/_header.scss‎

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@
3333
&:not(:has(.iati-header__nav[hidden])) {
3434
padding-block-end: 0;
3535
}
36-
@media (min-width: $mobile_nav_breakpoint) {
37-
padding-block: 2rem;
38-
}
3936
}
4037
}
4138

@@ -46,7 +43,7 @@
4643
align-items: flex-start;
4744
border-block-end: 1px solid #fff;
4845
padding-block-end: 1rem;
49-
margin-block-end: 1rem;
46+
margin-block-end: 0.5rem;
5047
> :last-child {
5148
margin-inline-start: auto;
5249
}
@@ -103,3 +100,32 @@
103100
display: none;
104101
}
105102
}
103+
104+
.iati-header--compact {
105+
.iati-header__main-row {
106+
display: flex;
107+
flex-direction: column;
108+
width: 100%;
109+
@media (min-width: $mobile_nav_breakpoint) {
110+
flex-direction: row-reverse;
111+
align-items: center;
112+
gap: 2rem;
113+
justify-content: space-between;
114+
}
115+
}
116+
117+
.iati-header-title {
118+
flex: 1 1 0;
119+
min-width: 0;
120+
}
121+
122+
.iati-header__actions {
123+
flex-shrink: 0;
124+
}
125+
126+
.iati-brand-background__content {
127+
@media (min-width: $mobile_nav_breakpoint) {
128+
padding-block: 0;
129+
}
130+
}
131+
}

‎src/scss/components/header/header.stories.ts‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import type { Meta, StoryObj } from "@storybook/web-components";
22
import { html } from "lit";
33
import logoColourUrl from "../../../assets/svg/logo-colour.svg";
4-
import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories";
4+
import {
5+
Compact as CompactCountrySwitcher,
6+
CountrySwitcher,
7+
} from "../../components/country-switcher/country-switcher.stories";
58
import { Open as MenuToggle } from "../../components/menu-toggle/menu-toggle.stories";
69
import { MobileNav } from "../../components/mobile-nav/mobile-nav.stories";
7-
import { Default as TitleBar } from "./title-bar/title-bar.stories";
10+
import {
11+
Compact as CompactTitleBar,
12+
Default as TitleBar,
13+
} from "./title-bar/title-bar.stories";
814
import { ToolNav } from "./tool-nav/tool-nav.stories";
915

1016
const meta: Meta = {
@@ -80,3 +86,67 @@ export const Header: Story = {
8086
</header>
8187
`,
8288
};
89+
90+
export const CompactHeader: Story = {
91+
args: {
92+
heading: "Tool Name",
93+
},
94+
render: (args, context) => html`
95+
${MobileNav.render({ ...args }, context)}
96+
<header class="iati-header iati-header--compact">
97+
<div class="iati-header__section iati-header__section--first">
98+
<div class="iati-header__container">
99+
${logo}
100+
<nav class="iati-header__general-nav">
101+
<ul class="iati-piped-list">
102+
<li>
103+
<a href="https://iatistandard.org/en/about/">About IATI</a>
104+
</li>
105+
<li>
106+
<a href="https://iatistandard.org/en/using-data/">Use Data</a>
107+
</li>
108+
<li>
109+
<a href="https://iatistandard.org/en/guidance/publishing-data/">
110+
Publish Data
111+
</a>
112+
</li>
113+
<li>
114+
<a href="https://iatistandard.org/guidance/get-support/">
115+
Contact
116+
</a>
117+
</li>
118+
</ul>
119+
</nav>
120+
</div>
121+
</div>
122+
<div
123+
class="iati-header__section iati-header__section--last iati-brand-background"
124+
>
125+
<div class="iati-header__container iati-brand-background__content">
126+
<div class="iati-header__main-row">
127+
<div class="iati-header__actions">
128+
${CompactCountrySwitcher.render?.call({ ...args })}
129+
<button
130+
class="iati-button iati-button--light iati-button--compact hide--mobile-nav"
131+
>
132+
<span>Help Docs</span>
133+
<i class="iati-icon iati-icon--info"></i>
134+
</button>
135+
<button
136+
class="iati-button iati-button--light iati-button--compact"
137+
>
138+
<span>Search</span>
139+
<i class="iati-icon iati-icon--search"></i>
140+
</button>
141+
${MenuToggle.render?.call({ ...args })}
142+
</div>
143+
${CompactTitleBar.render(args, context)}
144+
</div>
145+
</div>
146+
</div>
147+
</header>
148+
`,
149+
argTypes: {
150+
heading: { control: "text" },
151+
},
152+
};

‎src/scss/components/header/title-bar/_title-bar.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,45 @@
3838
font-size: 2.5rem;
3939
}
4040
}
41+
42+
.iati-header--compact {
43+
.iati-header-title {
44+
flex-direction: row;
45+
align-items: center;
46+
gap: 1.2rem;
47+
padding-inline-start: 0;
48+
margin-block-end: 0.75rem;
49+
border: none;
50+
@media (min-width: $mobile_nav_breakpoint) {
51+
margin-block-start: 0.5rem;
52+
}
53+
}
54+
55+
.iati-header-title__eyebrow {
56+
border-right: 2px solid $color-blue-50;
57+
padding-right: 1rem;
58+
margin: 0;
59+
display: flex;
60+
align-items: center;
61+
font-size: 1.0625rem;
62+
flex-direction: column;
63+
align-items: flex-start;
64+
line-height: 1;
65+
span {
66+
display: block;
67+
}
68+
@media (min-width: $screen-sm) {
69+
line-height: 1.2;
70+
}
71+
}
72+
73+
.iati-header-title__heading {
74+
white-space: normal;
75+
word-break: break-word;
76+
font-size: 1.5rem;
77+
line-height: 1.2;
78+
@media (max-width: $screen-sm) {
79+
font-size: 1rem;
80+
}
81+
}
82+
}

‎src/scss/components/header/title-bar/title-bar.stories.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,22 @@ export const Default: Story = {
2121
</div>
2222
`,
2323
};
24+
25+
export const Compact: Story = {
26+
args: {
27+
heading: "Tool Name",
28+
},
29+
argTypes: {
30+
heading: { control: "text" },
31+
},
32+
render: ({ heading } = {}) => html`
33+
<div class="iati-header--compact">
34+
<div class="iati-header-title">
35+
<p class="iati-header-title__eyebrow">
36+
<span>IATI</span><span>Tools</span>
37+
</p>
38+
<p class="iati-header-title__heading">${heading}</p>
39+
</div>
40+
</div>
41+
`,
42+
};

‎src/types/svg.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module "*.svg" {
2+
const content: string;
3+
export default content;
4+
}

0 commit comments

Comments
 (0)