@onsvisual/svelte-components 0.1.49 → 0.1.51

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 (5) hide show
  1. package/dist/@types/layout/Titleblock/Titleblock.svelte.d.ts +4 -0
  2. package/dist/css/main.css +2 -2
  3. package/dist/inputs/Checkbox/Checkbox.svelte +1 -0
  4. package/dist/layout/Titleblock/{Titleblock.svelte → TitleBlock.svelte} +33 -4
  5. package/package.json +2 -2
package/dist/inputs/Checkbox/Checkbox.svelte CHANGED
@@ -132,6 +132,7 @@
132
132
  }
133
133
  .ons-checkboxes__item input::after {
134
134
  border-color: currentColor;
135
+ border-width: 0 0 3px 3px !important;
135
136
  }
136
137
 
137
138
  .ons-checkboxes__item--no-border .ons-checkbox__input:focus {
package/dist/layout/Titleblock/{Titleblock.svelte → TitleBlock.svelte} RENAMED
@@ -42,6 +42,16 @@
42
42
  * @type {boolean}
43
43
  */
44
44
  export let allowClientOverrides = false;
45
+ /**
46
+ * Optional badge to show next to the title
47
+ * @type {string}
48
+ */
49
+ export let titleBadge = null;
50
+ /**
51
+ * Aria-label for the optional badge to show next to the title
52
+ * @type {string}
53
+ */
54
+ export let titleBadgeAriaLabel = null;
45
55
  </script>
46
56
 
47
57
  <Container
@@ -54,9 +64,18 @@
54
64
  <slot name="before" />
55
65
  <div class="ons-grid">
56
66
  <div class="ons-grid__col ons-col-10@m">
57
- <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
58
- {@html title}
59
- </h1>
67
+ <div class="title-container">
68
+ <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
69
+ {#if titleBadge}
70
+ <span style="margin-right: 6px">{@html title}</span>
71
+ <span class="title-badge" aria-label="{titleBadgeAriaLabel ?? titleBadge}"
72
+ >{titleBadge}</span
73
+ >
74
+ {:else}
75
+ {@html title}
76
+ {/if}
77
+ </h1>
78
+ </div>
60
79
  </div>
61
80
  {#if natStatBadge}
62
81
  <div class="ons-grid__col ons-col-2@m">
@@ -87,7 +106,6 @@
87
106
  title="Census 2021"
88
107
  alt="Census 2021"
89
108
  class="header__svg-logo margin-right--1"
90
- focusable="false"
91
109
  width="167"
92
110
  height="32"
93
111
  />
@@ -105,4 +123,15 @@
105
123
  } */
106
124
  .ons-grid__col {
107
125
  vertical-align: bottom;
126
+ }
127
+
128
+ .title-badge {
129
+ vertical-align: 6px;
130
+ white-space: nowrap;
131
+ font-size: 40%;
132
+ font-weight: bold;
133
+ color: white;
134
+ background-color: #003c57;
135
+ padding: 2px 8px 4px 8px;
136
+ border-radius: 4px;
108
137
  }</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "0.1.49",
3
+ "version": "0.1.51",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "homepage": "https://onsvisual.github.io/svelte-components",
@@ -173,7 +173,7 @@
173
173
  "./layout/Tabs/Tab.svelte": "./dist/layout/Tabs/Tab.svelte",
174
174
  "./layout/Tabs/Tabs.svelte": "./dist/layout/Tabs/Tabs.svelte",
175
175
  "./layout/Titleblock/Meta.svelte": "./dist/layout/Titleblock/Meta.svelte",
176
- "./layout/Titleblock/Titleblock.svelte": "./dist/layout/Titleblock/Titleblock.svelte",
176
+ "./layout/Titleblock/TitleBlock.svelte": "./dist/layout/Titleblock/TitleBlock.svelte",
177
177
  "./layout/Twisty/Twisty.svelte": "./dist/layout/Twisty/Twisty.svelte",
178
178
  "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
179
179
  "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",