@lilydesignsystem/angular-picker-bar 0.1.0 → 0.2.0

package/README.md

@@ -1,9 +1,10 @@
 # Lily Design System™ — Angular PickerBar
 
-A single page-header row that composes four of the Lily
-[`*-picker` helpers](../index.md) — theme, locale, text size, and
-share — with two catalog-wide defaults pre-wired, so you can drop one
-component into a header instead of assembling and configuring four.
+A single page-header row that composes five of the Lily
+[`*-picker` helpers](../index.md) — search, theme, locale, text size,
+and share, in that order — with two catalog-wide defaults pre-wired, so
+you can drop one component into a header instead of assembling and
+configuring five.
 
 `motion-picker` and `date-time-picker` are not part of the bar: motion
 has no natural spot next to the other three header preferences, and
@@ -15,8 +16,9 @@ has no natural spot next to the other three header preferences, and
 npm install @lilydesignsystem/angular-picker-bar
 ```
 
-`@lilydesignsystem/angular-theme-picker`, `-locale-picker`,
-`-text-size-picker`, and `-share-picker` install automatically as
+`@lilydesignsystem/angular-search-picker`, `-theme-picker`,
+`-locale-picker`, `-text-size-picker`, and `-share-picker` install
+automatically as
 regular dependencies — `PickerBar` is a thin wrapper around them, not
 a reimplementation.
 
@@ -32,7 +34,15 @@ import { PickerBar } from "@lilydesignsystem/angular-picker-bar";
   imports: [PickerBar],
   template: `
     <lily-picker-bar
-      [labels]="{ theme: 'Theme', locale: 'Language', textSize: 'Text size', share: 'Share' }"
+      [labels]="{
+        search: 'Search this site',
+        searchInput: 'Search terms',
+        searchSubmit: 'Search',
+        theme: 'Theme',
+        locale: 'Language',
+        textSize: 'Text size',
+        share: 'Share',
+      }"
       themesUrl="/assets/themes/"
       [locales]="['en', 'cy', 'gd', 'ga']"
       [shareTargets]="[{ id: 'email', label: 'Email', href: (url, title) => 'mailto:?subject=' + title + '&body=' + url }]"
@@ -42,7 +52,8 @@ import { PickerBar } from "@lilydesignsystem/angular-picker-bar";
 export class HeaderComponent {}
 ```
 
-That's a complete, working header row: 45 themes, four locales, the
+That's a complete, working header row: site search (a search for
+`foo` goes to `/?foo`), 45 themes, four locales, the
 seven-step text-size scale, and one share destination plus copy-to-URL
 if you add `[copyLabel]="'Copy link'"`.
 
@@ -81,11 +92,17 @@ extras onto its own inputs, prefixed by which picker they belong to:
   localeStorageKey="lily-locale"
   [localeDetectFromNavigator]="true"
   textSizeStorageKey="lily-text-size"
+  searchAction="/search"
+  searchPlaceholder="Search…"
   copyLabel="Copy link"
   copiedLabel="Copied"
 />
 ```
 
+In a single-page app, pass `[searchNavigate]="(href) => router.navigateByUrl(href)"`
+(as a component field) to keep searches client-side; `(searched)`
+re-emits the search picker's `{ query, href }` before navigating.
+
 Two-way bind a picker's current value with the matching `model()`
 input:
 
@@ -94,14 +111,15 @@ input:
 ```
 
 For anything not flattened here (a custom icon template, for
-instance), compose the four wrapped pickers directly instead of using
+instance), compose the five wrapped pickers directly instead of using
 `PickerBar` — see each picker's own `index.md`.
 
 ## Styling
 
 `PickerBar` renders no CSS of its own beyond the `picker-bar` root
 wrapper — style each child through its own package's class hooks
-(`theme-picker`, `locale-picker`, `text-size-picker`, `share-picker`;
+(`search-picker`, `theme-picker`, `locale-picker`, `text-size-picker`,
+`share-picker`;
 see each package's own `index.md`). A typical header layout:
 
 ```css
@@ -114,8 +132,10 @@ see each package's own `index.md`). A typical header layout:
 
 ## Accessibility
 
-Every accessible name comes from `labels` — there is no English
-default, because a set of names this catalog invented is exactly the
+Every accessible name comes from `labels` — seven names, three of them
+for the search picker (`search` for its button and search landmark,
+`searchInput` for the field, `searchSubmit` for the `⏎` button). There
+is no English default, because a set of names this catalog invented is exactly the
 case the rest of Lily's i18n rule exists for. Each wrapped picker keeps
 its own WAI-ARIA APG contract unchanged; see that picker's own `index.md`.