@lilydesignsystem/nunjucks-picker-bar 0.5.1 → 0.6.0

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 (7) hide show
  1. package/LICENSE.md +8 -8
  2. package/README.md +2 -2
  3. package/dist/index.d.ts +110 -110
  4. package/dist/index.js +8 -6
  5. package/dist/picker-bar.njk +18 -13
  6. package/index.md +2 -2
  7. package/package.json +1 -1
package/LICENSE.md CHANGED
@@ -8,15 +8,15 @@ Lily Design System™ is free open source software.
8
8
 
9
9
  License is any of these, at your option, or contact us for custom license options.
10
10
 
11
- * [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
11
+ - [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
12
12
 
13
- * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
13
+ - [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
14
14
 
15
- * [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
15
+ - [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
16
16
 
17
- * [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
17
+ - [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
18
18
 
19
- * [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
19
+ - [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
20
20
 
21
21
  ## SPDX
22
22
 
@@ -31,9 +31,9 @@ single identifier from the list where the packaging format does not accept a
31
31
  disjunction. You do not need permission to pick one: choose whichever member of
32
32
  the list suits your project and comply with that one.
33
33
 
34
- This applies to the whole repository — the component catalog, the seven headless
35
- libraries, the seven example applications, the seven helper catalogs, the
36
- `themes/` stylesheets, the `bin/` tooling, and the documentation.
34
+ This applies to the whole repository — the component catalog, the headless
35
+ libraries, the example applications, the helper packages, the `themes/`
36
+ stylesheets, the `bin/` tooling, and the documentation.
37
37
 
38
38
  ## Scope note
39
39
 
package/README.md CHANGED
@@ -67,7 +67,7 @@ Then load `picker-bar.client.js` once and call `autoInit()`:
67
67
  ```
68
68
 
69
69
  That's a complete, working header row: a site search (a search for
70
- `foo` goes to `/?foo`), 45 themes, four locales, the
70
+ `foo` goes to `/?foo`), 63 themes, four locales, the
71
71
  seven-step text-size scale, and one share destination plus copy-to-URL
72
72
  if you add `shareProps: { copyLabel: "Copy link" }`.
73
73
 
@@ -77,7 +77,7 @@ function — a Nunjucks macro cannot call an arbitrary JS function.
77
77
 
78
78
  ## Defaults
79
79
 
80
- - **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
80
+ - **`themes`** defaults to `DEFAULT_THEMES` — all 63 Lily reference
81
81
  theme slugs, alphabetical, with the 8 United Kingdom / United States
82
82
  government themes moved to their own alphabetical group at the
83
83
  bottom. Pass your own `themes` array to override.
package/dist/index.d.ts CHANGED
@@ -28,7 +28,7 @@ export { autoInit as autoInitSharePicker } from '@lilydesignsystem/nunjucks-shar
28
28
 
29
29
 
30
30
  /**
31
- * All 57 Lily reference theme slugs, in the same order as
31
+ * All 63 Lily reference theme slugs, in the same order as
32
32
  * `DEFAULT_THEMES` in picker-bar.njk. A Nunjucks macro cannot import a
33
33
  * JS constant, so the two copies are held in agreement by a test
34
34
  * rather than by delegation — the same pattern this catalog already
@@ -36,74 +36,80 @@ export { autoInit as autoInitSharePicker } from '@lilydesignsystem/nunjucks-shar
36
36
  * function).
37
37
  */
38
38
  const DEFAULT_THEMES = [
39
- "abyss",
40
- "acid",
41
- "adobe-spectrum",
42
- "ant-design",
43
- "aqua",
44
- "atlassian",
45
- "autumn",
46
- "black",
47
- "bumblebee",
48
- "business",
49
- "cappuccino",
50
- "caramellatte",
51
- "cmyk",
52
- "coffee",
53
- "corporate",
54
- "cupcake",
55
- "cyberpunk",
56
- "dark",
57
- "dim",
58
- "dracula",
59
- "emerald",
60
- "excel",
61
- "fantasy",
62
- "fluent",
63
- "forest",
64
- "garden",
65
- "github-primer",
66
- "halloween",
67
- "ibm-carbon",
68
- "lemonade",
69
- "light",
70
- "linear",
71
- "lofi",
72
- "luxury",
73
- "mozilla-protocol",
74
- "night",
75
- "nord",
76
- "notion",
77
- "pastel",
78
- "retro",
79
- "salesforce",
80
- "sap-fiori",
81
- "silk",
82
- "sunset",
83
- "synthwave",
84
- "valentine",
85
- "vercel",
86
- "winter",
87
- "wireframe",
88
- "united-kingdom-government-digital-service",
89
- "united-kingdom-national-health-service-england-for-patients",
90
- "united-kingdom-national-health-service-england-for-practitioners",
91
- "united-kingdom-national-health-service-scotland-for-patients",
92
- "united-kingdom-national-health-service-scotland-for-practitioners",
93
- "united-kingdom-national-health-service-wales-for-patients",
94
- "united-kingdom-national-health-service-wales-for-practitioners",
95
- "united-states-web-design-system",
39
+ "abyss",
40
+ "acid",
41
+ "adobe-spectrum",
42
+ "ant-design",
43
+ "aqua",
44
+ "atlassian",
45
+ "australia-agriculture-design-system",
46
+ "autumn",
47
+ "black",
48
+ "brazil-padrao-digital-de-governo",
49
+ "bumblebee",
50
+ "business",
51
+ "canada-government-of-canada-design-system",
52
+ "cappuccino",
53
+ "caramellatte",
54
+ "cmyk",
55
+ "coffee",
56
+ "corporate",
57
+ "cupcake",
58
+ "cyberpunk",
59
+ "dark",
60
+ "dim",
61
+ "dracula",
62
+ "emerald",
63
+ "european-union-europa-component-library",
64
+ "excel",
65
+ "fantasy",
66
+ "fluent",
67
+ "forest",
68
+ "garden",
69
+ "github-primer",
70
+ "halloween",
71
+ "ibm-carbon",
72
+ "japan-digital-agency-design-system",
73
+ "lemonade",
74
+ "light",
75
+ "linear",
76
+ "lofi",
77
+ "luxury",
78
+ "mozilla-protocol",
79
+ "night",
80
+ "nord",
81
+ "notion",
82
+ "pastel",
83
+ "retro",
84
+ "salesforce",
85
+ "sap-fiori",
86
+ "silk",
87
+ "singapore-government-design-system",
88
+ "sunset",
89
+ "synthwave",
90
+ "valentine",
91
+ "vercel",
92
+ "winter",
93
+ "wireframe",
94
+ "united-kingdom-government-digital-service",
95
+ "united-kingdom-national-health-service-england-for-patients",
96
+ "united-kingdom-national-health-service-england-for-practitioners",
97
+ "united-kingdom-national-health-service-scotland-for-patients",
98
+ "united-kingdom-national-health-service-scotland-for-practitioners",
99
+ "united-kingdom-national-health-service-wales-for-patients",
100
+ "united-kingdom-national-health-service-wales-for-practitioners",
101
+ "united-states-web-design-system",
96
102
  ];
97
103
 
98
104
  /** The seven-step text-size scale, largest first. */
99
105
  const DEFAULT_SIZES = [
100
- "largest",
101
- "larger",
102
- "large",
103
- "normal",
104
- "small",
105
- "smaller",
106
- "smallest",
106
+ "largest",
107
+ "larger",
108
+ "large",
109
+ "normal",
110
+ "small",
111
+ "smaller",
112
+ "smallest",
107
113
  ];
108
114
 
109
115
  /**
@@ -119,48 +125,44 @@ const DEFAULT_SIZES = [
119
125
  * @param {{linkProps?: object, searchProps?: object, themeProps?: object, localeProps?: object, timeZoneProps?: object, textSizeProps?: object, shareProps?: object}=} opts
120
126
  */
121
127
  function initPickerBar(root, opts = {}) {
122
- if (!root) {
123
- return {
124
- link: null,
125
- search: null,
126
- theme: null,
127
- locale: null,
128
- timeZone: null,
129
- textSize: null,
130
- share: null,
131
- };
132
- }
133
- const {
134
- linkProps = {},
135
- searchProps = {},
136
- themeProps = {},
137
- localeProps = {},
138
- timeZoneProps = {},
139
- textSizeProps = {},
140
- shareProps = {},
141
- } = opts;
128
+ if (!root) {
129
+ return {
130
+ link: null,
131
+ search: null,
132
+ theme: null,
133
+ locale: null,
134
+ timeZone: null,
135
+ textSize: null,
136
+ share: null,
137
+ };
138
+ }
139
+ const {
140
+ linkProps = {},
141
+ searchProps = {},
142
+ themeProps = {},
143
+ localeProps = {},
144
+ timeZoneProps = {},
145
+ textSizeProps = {},
146
+ shareProps = {},
147
+ } = opts;
142
148
 
143
- const linkRoot = root.querySelector("[data-lily-link-picker-root]");
144
- const searchRoot = root.querySelector("[data-lily-search-picker-root]");
145
- const themeRoot = root.querySelector("[data-lily-theme-picker-root]");
146
- const localeRoot = root.querySelector("[data-lily-locale-picker-root]");
147
- const timeZoneRoot = root.querySelector("[data-lily-time-zone-picker-root]");
148
- const textSizeRoot = root.querySelector(
149
- "[data-lily-text-size-picker-root]",
150
- );
151
- const shareRoot = root.querySelector("[data-lily-share-picker-root]");
149
+ const linkRoot = root.querySelector("[data-lily-link-picker-root]");
150
+ const searchRoot = root.querySelector("[data-lily-search-picker-root]");
151
+ const themeRoot = root.querySelector("[data-lily-theme-picker-root]");
152
+ const localeRoot = root.querySelector("[data-lily-locale-picker-root]");
153
+ const timeZoneRoot = root.querySelector("[data-lily-time-zone-picker-root]");
154
+ const textSizeRoot = root.querySelector("[data-lily-text-size-picker-root]");
155
+ const shareRoot = root.querySelector("[data-lily-share-picker-root]");
152
156
 
153
- return {
154
- link: linkRoot ? initLinkPicker(linkRoot, linkProps) : null,
155
- search: searchRoot ? initSearchPicker(searchRoot, searchProps) : null,
156
- theme: themeRoot ? initThemePicker(themeRoot, themeProps) : null,
157
- locale: localeRoot ? initLocalePicker(localeRoot, localeProps) : null,
158
- timeZone: timeZoneRoot ? initTimeZonePicker(timeZoneRoot, timeZoneProps) : null,
159
- textSize: textSizeRoot
160
- ? initTextSizePicker(textSizeRoot, textSizeProps)
161
- : null,
162
- share: shareRoot ? initSharePicker(shareRoot, shareProps) : null,
163
- };
157
+ return {
158
+ link: linkRoot ? initLinkPicker(linkRoot, linkProps) : null,
159
+ search: searchRoot ? initSearchPicker(searchRoot, searchProps) : null,
160
+ theme: themeRoot ? initThemePicker(themeRoot, themeProps) : null,
161
+ locale: localeRoot ? initLocalePicker(localeRoot, localeProps) : null,
162
+ timeZone: timeZoneRoot ? initTimeZonePicker(timeZoneRoot, timeZoneProps) : null,
163
+ textSize: textSizeRoot ? initTextSizePicker(textSizeRoot, textSizeProps) : null,
164
+ share: shareRoot ? initSharePicker(shareRoot, shareProps) : null,
165
+ };
164
166
  }
165
167
 
166
168
  /**
@@ -170,11 +172,9 @@ function initPickerBar(root, opts = {}) {
170
172
  * @returns {Array<ReturnType<typeof initPickerBar>>}
171
173
  */
172
174
  function autoInit(opts = {}) {
173
- if (typeof document === "undefined") return [];
174
- const roots = Array.from(
175
- document.querySelectorAll("[data-lily-picker-bar-root]"),
176
- );
177
- return roots.map((root) => initPickerBar(root, opts));
175
+ if (typeof document === "undefined") return [];
176
+ const roots = Array.from(document.querySelectorAll("[data-lily-picker-bar-root]"));
177
+ return roots.map((root) => initPickerBar(root, opts));
178
178
  }
179
179
 
180
180
  export { DEFAULT_SIZES, DEFAULT_THEMES, autoInit, initPickerBar };
package/dist/index.js CHANGED
@@ -34,10 +34,13 @@ var DEFAULT_THEMES = [
34
34
  "ant-design",
35
35
  "aqua",
36
36
  "atlassian",
37
+ "australia-agriculture-design-system",
37
38
  "autumn",
38
39
  "black",
40
+ "brazil-padrao-digital-de-governo",
39
41
  "bumblebee",
40
42
  "business",
43
+ "canada-government-of-canada-design-system",
41
44
  "cappuccino",
42
45
  "caramellatte",
43
46
  "cmyk",
@@ -49,6 +52,7 @@ var DEFAULT_THEMES = [
49
52
  "dim",
50
53
  "dracula",
51
54
  "emerald",
55
+ "european-union-europa-component-library",
52
56
  "excel",
53
57
  "fantasy",
54
58
  "fluent",
@@ -57,6 +61,7 @@ var DEFAULT_THEMES = [
57
61
  "github-primer",
58
62
  "halloween",
59
63
  "ibm-carbon",
64
+ "japan-digital-agency-design-system",
60
65
  "lemonade",
61
66
  "light",
62
67
  "linear",
@@ -71,6 +76,7 @@ var DEFAULT_THEMES = [
71
76
  "salesforce",
72
77
  "sap-fiori",
73
78
  "silk",
79
+ "singapore-government-design-system",
74
80
  "sunset",
75
81
  "synthwave",
76
82
  "valentine",
@@ -121,9 +127,7 @@ function initPickerBar(root, opts = {}) {
121
127
  const themeRoot = root.querySelector("[data-lily-theme-picker-root]");
122
128
  const localeRoot = root.querySelector("[data-lily-locale-picker-root]");
123
129
  const timeZoneRoot = root.querySelector("[data-lily-time-zone-picker-root]");
124
- const textSizeRoot = root.querySelector(
125
- "[data-lily-text-size-picker-root]"
126
- );
130
+ const textSizeRoot = root.querySelector("[data-lily-text-size-picker-root]");
127
131
  const shareRoot = root.querySelector("[data-lily-share-picker-root]");
128
132
  return {
129
133
  link: linkRoot ? initLinkPicker(linkRoot, linkProps) : null,
@@ -137,9 +141,7 @@ function initPickerBar(root, opts = {}) {
137
141
  }
138
142
  function autoInit(opts = {}) {
139
143
  if (typeof document === "undefined") return [];
140
- const roots = Array.from(
141
- document.querySelectorAll("[data-lily-picker-bar-root]")
142
- );
144
+ const roots = Array.from(document.querySelectorAll("[data-lily-picker-bar-root]"));
143
145
  return roots.map((root) => initPickerBar(root, opts));
144
146
  }
145
147
  export {
package/dist/picker-bar.njk CHANGED
@@ -33,7 +33,7 @@
33
33
  {% from "lily-design-system-nunjucks-time-zone-picker/dist/time-zone-picker.njk" import timeZonePicker %}
34
34
  {% from "lily-design-system-nunjucks-share-picker/dist/share-picker.njk" import sharePicker %}
35
35
  {#
36
- All 57 Lily reference theme slugs (see `themes/` at the repo root),
36
+ All 63 Lily reference theme slugs (see `themes/` at the repo root),
37
37
  sorted alphabetically except the United Kingdom and United States
38
38
  government/public-sector themes, which sort last as one alphabetical
39
39
  group of their own. Mirrors `theme-picker`'s own title-casing of each
@@ -44,16 +44,19 @@
44
44
  held in sync by assertion rather than by delegation.
45
45
  #}
46
46
  {%- set DEFAULT_THEMES = [
47
- "abyss", "acid", "adobe-spectrum", "ant-design", "aqua",
48
- "atlassian", "autumn", "black", "bumblebee", "business",
49
- "cappuccino", "caramellatte", "cmyk", "coffee", "corporate",
50
- "cupcake", "cyberpunk", "dark", "dim", "dracula", "emerald",
51
- "excel", "fantasy", "fluent", "forest", "garden",
52
- "github-primer", "halloween", "ibm-carbon", "lemonade", "light",
53
- "linear", "lofi", "luxury", "mozilla-protocol", "night", "nord",
54
- "notion", "pastel", "retro", "salesforce", "sap-fiori", "silk",
55
- "sunset", "synthwave", "valentine", "vercel", "winter",
56
- "wireframe",
47
+ "abyss", "acid", "adobe-spectrum", "ant-design", "aqua", "atlassian",
48
+ "australia-agriculture-design-system", "autumn", "black",
49
+ "brazil-padrao-digital-de-governo", "bumblebee", "business",
50
+ "canada-government-of-canada-design-system", "cappuccino",
51
+ "caramellatte", "cmyk", "coffee", "corporate", "cupcake",
52
+ "cyberpunk", "dark", "dim", "dracula", "emerald",
53
+ "european-union-europa-component-library", "excel", "fantasy",
54
+ "fluent", "forest", "garden", "github-primer", "halloween",
55
+ "ibm-carbon", "japan-digital-agency-design-system", "lemonade",
56
+ "light", "linear", "lofi", "luxury", "mozilla-protocol", "night",
57
+ "nord", "notion", "pastel", "retro", "salesforce", "sap-fiori",
58
+ "silk", "singapore-government-design-system", "sunset", "synthwave",
59
+ "valentine", "vercel", "winter", "wireframe",
57
60
  "united-kingdom-government-digital-service",
58
61
  "united-kingdom-national-health-service-england-for-patients",
59
62
  "united-kingdom-national-health-service-england-for-practitioners",
@@ -73,8 +76,8 @@
73
76
  ] -%}
74
77
  {#
75
78
  Params (single `opts` object):
76
- labels — object, required: { link?, search, searchInput,
77
- searchSubmit, theme, locale, timeZone?, textSize, share }.
79
+ labels — object, required: { link?, search?, searchInput?,
80
+ searchSubmit?, theme, locale, timeZone?, textSize, share }.
78
81
  `link` names the link picker's button and list and is
79
82
  needed only when `links` is supplied.
80
83
  The seven accessible names: `search` names the
@@ -172,6 +175,7 @@
172
175
  attributes: linkProps.attributes
173
176
  }) }}
174
177
  {%- endif %}
178
+ {%- if opts.labels.search %}
175
179
  {{ searchPicker({
176
180
  label: opts.labels.search,
177
181
  inputLabel: opts.labels.searchInput,
@@ -184,6 +188,7 @@
184
188
  classes: searchProps.classes,
185
189
  attributes: searchProps.attributes
186
190
  }) }}
191
+ {%- endif %}
187
192
  {{ themePicker({
188
193
  label: opts.labels.theme,
189
194
  themesUrl: opts.themesUrl,
package/index.md CHANGED
@@ -67,7 +67,7 @@ Then load `picker-bar.client.js` once and call `autoInit()`:
67
67
  ```
68
68
 
69
69
  That's a complete, working header row: a site search (a search for
70
- `foo` goes to `/?foo`), 45 themes, four locales, the
70
+ `foo` goes to `/?foo`), 63 themes, four locales, the
71
71
  seven-step text-size scale, and one share destination plus copy-to-URL
72
72
  if you add `shareProps: { copyLabel: "Copy link" }`.
73
73
 
@@ -77,7 +77,7 @@ function — a Nunjucks macro cannot call an arbitrary JS function.
77
77
 
78
78
  ## Defaults
79
79
 
80
- - **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
80
+ - **`themes`** defaults to `DEFAULT_THEMES` — all 63 Lily reference
81
81
  theme slugs, alphabetical, with the 8 United Kingdom / United States
82
82
  government themes moved to their own alphabetical group at the
83
83
  bottom. Pass your own `themes` array to override.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lilydesignsystem/nunjucks-picker-bar",
3
- "version": "0.5.1",
3
+ "version": "0.6.0",
4
4
  "engines": {
5
5
  "node": ">=26"
6
6
  },