@onsvisual/svelte-components 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/Header/Header.stories.svelte +1 -1
  2. package/dist/components/Header/Header.svelte +33 -12
  3. package/dist/components/Header/Header.svelte.d.ts +4 -2
  4. package/dist/components/Header/HeaderNav.svelte +12 -13
  5. package/dist/components/Header/HeaderNav.svelte.d.ts +4 -0
  6. package/dist/components/Header/HeaderNavCompact.svelte +5 -13
  7. package/dist/components/Header/HeaderNavCompact.svelte.d.ts +2 -0
  8. package/dist/css/main.css +1 -1
  9. package/package.json +1 -1
package/dist/components/Header/Header.stories.svelte CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  <Story name="Dark mode" args={{ theme: "dark" }} />
23
23
 
24
- <Story name="Compact" args={{ compact: true, border: true }} />
24
+ <Story name="Compact" args={{ compact: true, headerBorder: true }} />
25
25
 
26
26
  <Story name="Compact with page title" args={{ compact: true, title: "Page title" }} />
27
27
 
package/dist/components/Header/Header.svelte CHANGED
@@ -44,10 +44,15 @@
44
44
  */
45
45
  export let bilingual = true;
46
46
  /**
47
- * Include a border/line under the header
47
+ * Include a border/line under the header. For use if hero is transparent
48
48
  * @type {boolean}
49
49
  */
50
- export let border = false;
50
+ export let headerBorder = false;
51
+ /**
52
+ * Include a border/line under the menu when open. For use if hero colour matches menu
53
+ * @type {boolean}
54
+ */
55
+ export let menuBorder = true;
51
56
  /**
52
57
  * Use the legacy nav header
53
58
  * @type {boolean}
@@ -94,7 +99,7 @@
94
99
  });
95
100
  </script>
96
101
 
97
- <header class="ons-header" class:ons-header--border={border && !title} role="banner">
102
+ <header class="ons-header" role="banner">
98
103
  {#if skipHref}
99
104
  <SkipLink href={skipHref} />
100
105
  {/if}
@@ -105,15 +110,37 @@
105
110
  cls={["dark", "blue", "navyblue"].includes(theme) ? "dark-mode" : null}
106
111
  >
107
112
  <!-- <div id="pagePath" class="hide">{path}</div> -->
113
+ <div class="ons-browser-banner">
114
+ <div class="ons-container">
115
+ <p class="ons-browser-banner__content">
116
+ <span class="ons-browser-banner__lead">This website no longer supports your browser.</span
117
+ ><span class="ons-browser-banner__cta">
118
+ You can <a class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers"
119
+ >upgrade your browser to the latest version</a
120
+ >.</span
121
+ >
122
+ </p>
123
+ </div>
124
+ </div>
108
125
  {#if compact}
109
- <HeaderNavCompact {baseurl} {i18n} />
126
+ <HeaderNavCompact {headerBorder} {baseurl} {i18n} />
110
127
  {:else if !legacy}
111
- <HeaderNav {search} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
128
+ <HeaderNav
129
+ {headerBorder}
130
+ {menuBorder}
131
+ {search}
132
+ {bilingual}
133
+ {lang}
134
+ {baseurl}
135
+ {baseother}
136
+ {path}
137
+ {i18n}
138
+ />
112
139
  {:else}
113
140
  <HeaderNavLegacy {search} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
114
141
  {/if}
115
142
  {#if title}
116
- <div class="ons-header__main" class:ons-header--border={border}>
143
+ <div class="ons-header__main">
117
144
  <div class="ons-container">
118
145
  <div
119
146
  class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
@@ -133,9 +160,3 @@
133
160
  {/if}
134
161
  </Theme>
135
162
  </header>
136
-
137
- <style>
138
- .ons-header--border {
139
- border-bottom: 1px solid var(--ons-color-borders);
140
- }
141
- </style>
package/dist/components/Header/Header.svelte.d.ts CHANGED
@@ -8,9 +8,10 @@ export default class Header extends SvelteComponentTyped<{
8
8
  title?: string | null | undefined;
9
9
  skipHref?: string | null | undefined;
10
10
  compact?: boolean | undefined;
11
+ headerBorder?: boolean | undefined;
12
+ menuBorder?: boolean | undefined;
11
13
  bilingual?: boolean | undefined;
12
14
  titleHref?: string | null | undefined;
13
- border?: boolean | undefined;
14
15
  legacy?: boolean | undefined;
15
16
  }, {
16
17
  [evt: string]: CustomEvent<any>;
@@ -30,9 +31,10 @@ declare const __propDef: {
30
31
  title?: string | null | undefined;
31
32
  skipHref?: string | null | undefined;
32
33
  compact?: boolean | undefined;
34
+ headerBorder?: boolean | undefined;
35
+ menuBorder?: boolean | undefined;
33
36
  bilingual?: boolean | undefined;
34
37
  titleHref?: string | null | undefined;
35
- border?: boolean | undefined;
36
38
  legacy?: boolean | undefined;
37
39
  };
38
40
  events: {
package/dist/components/Header/HeaderNav.svelte CHANGED
@@ -2,6 +2,8 @@
2
2
  import { onMount } from "svelte";
3
3
  import initNav from "./nav.js";
4
4
 
5
+ export let headerBorder = false;
6
+ export let menuBorder = false;
5
7
  export let search = true;
6
8
  export let bilingual = true;
7
9
  export let lang = "en";
@@ -241,19 +243,7 @@
241
243
  });
242
244
  </script>
243
245
 
244
- <div class="ons-browser-banner" bind:this={el}>
245
- <div class="ons-container">
246
- <p class="ons-browser-banner__content">
247
- <span class="ons-browser-banner__lead">This website no longer supports your browser.</span
248
- ><span class="ons-browser-banner__cta">
249
- You can <a class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers"
250
- >upgrade your browser to the latest version</a
251
- >.</span
252
- >
253
- </p>
254
- </div>
255
- </div>
256
- <div class="ons-header__top">
246
+ <div class="ons-header__top" class:ons-header--border={headerBorder} bind:this={el}>
257
247
  <div class="ons-container">
258
248
  <div
259
249
  class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
@@ -480,6 +470,7 @@
480
470
  </div>
481
471
  <nav
482
472
  class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl ons-u-d-no"
473
+ class:ons-header-menu--border={menuBorder}
483
474
  id="menu-links"
484
475
  aria-label="Menu navigation"
485
476
  aria-hidden="true"
@@ -530,6 +521,7 @@
530
521
  {#if search}
531
522
  <nav
532
523
  class="ons-js-header-search ons-header-nav-search ons-u-d-no"
524
+ class:ons-header-menu--border={menuBorder}
533
525
  id="search"
534
526
  aria-label="Nav Search"
535
527
  aria-hidden="true"
@@ -608,6 +600,13 @@
608
600
  display: block;
609
601
  margin-top: 0.85em;
610
602
  }
603
+ .ons-header--border {
604
+ border-bottom: 1px solid var(--ons-color-borders);
605
+ }
606
+
607
+ .ons-header-menu--border {
608
+ border-bottom: 1px solid var(--ons-color-ocean-blue);
609
+ }
611
610
  :global(.dark-mode .ons-header-nav-menu, .dark-mode .ons-header-nav-search) {
612
611
  background-color: var(--ons-color-branded-secondary);
613
612
  }
package/dist/components/Header/HeaderNav.svelte.d.ts CHANGED
@@ -4,6 +4,8 @@
4
4
  export default class HeaderNav extends SvelteComponentTyped<{
5
5
  search?: boolean | undefined;
6
6
  path?: string | undefined;
7
+ headerBorder?: boolean | undefined;
8
+ menuBorder?: boolean | undefined;
7
9
  bilingual?: boolean | undefined;
8
10
  lang?: string | undefined;
9
11
  baseurl?: string | undefined;
@@ -21,6 +23,8 @@ declare const __propDef: {
21
23
  props: {
22
24
  search?: boolean | undefined;
23
25
  path?: string | undefined;
26
+ headerBorder?: boolean | undefined;
27
+ menuBorder?: boolean | undefined;
24
28
  bilingual?: boolean | undefined;
25
29
  lang?: string | undefined;
26
30
  baseurl?: string | undefined;
package/dist/components/Header/HeaderNavCompact.svelte CHANGED
@@ -1,21 +1,10 @@
1
1
  <script>
2
+ export let headerBorder = false;
2
3
  export let baseurl = "https://www.ons.gov.uk";
3
4
  export let i18n = (text) => text;
4
5
  </script>
5
6
 
6
- <div class="ons-browser-banner">
7
- <div class="ons-container">
8
- <p class="ons-browser-banner__content">
9
- <span class="ons-browser-banner__lead">This website no longer supports your browser.</span
10
- ><span class="ons-browser-banner__cta">
11
- You can <a class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers"
12
- >upgrade your browser to the latest version</a
13
- >.</span
14
- >
15
- </p>
16
- </div>
17
- </div>
18
- <div class="ons-header__top">
7
+ <div class="ons-header__top" class:ons-header--border={headerBorder}>
19
8
  <div class="ons-container">
20
9
  <div
21
10
  class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
@@ -178,4 +167,7 @@
178
167
  .ons-icon--logo__group--text {
179
168
  fill: var(--ons-color-text-link-hover);
180
169
  }
170
+ .ons-header--border {
171
+ border-bottom: 1px solid var(--ons-color-borders);
172
+ }
181
173
  </style>
package/dist/components/Header/HeaderNavCompact.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} HeaderNavCompactEvents */
3
3
  /** @typedef {typeof __propDef.slots} HeaderNavCompactSlots */
4
4
  export default class HeaderNavCompact extends SvelteComponentTyped<{
5
+ headerBorder?: boolean | undefined;
5
6
  baseurl?: string | undefined;
6
7
  i18n?: ((text: any) => any) | undefined;
7
8
  }, {
@@ -14,6 +15,7 @@ export type HeaderNavCompactSlots = typeof __propDef.slots;
14
15
  import { SvelteComponentTyped } from "svelte";
15
16
  declare const __propDef: {
16
17
  props: {
18
+ headerBorder?: boolean | undefined;
17
19
  baseurl?: string | undefined;
18
20
  i18n?: ((text: any) => any) | undefined;
19
21
  };