diff --git a/README.md b/README.md index ec1242e6..f6b34759 100644 --- a/README.md +++ b/README.md @@ -351,6 +351,8 @@ Outside lit, use the raw file at `@internetarchive/elements/icons/search.svg`. The offshoot assets were ported from offshoot commit `a6199f5db22d3908d856033da8bfa8777867d86c`. +The collection-browser icons were ported from `@internetarchive/collection-browser@4.8.0`. + - **Decorative by default.** The root `` has `aria-hidden="true"` and `focusable="false"`. If an icon is the only content of a control, label the control (`aria-label`), or wrap the icon in an element with `role="img"` and an `aria-label`. - **Color and size.** Icons are filled with `currentColor` and sized `1em` by `width`/`height` on the root, so they follow the surrounding text. Set `font-size` or override `width`/`height` in CSS to resize. - **Used by.** `ia-item-navigator`, `ia-status-indicator`, `ia-combo-box`, `ia-dropdown-search-bar` and `ia-scrubber-bar` draw their icons from this folder. Recolor one with `color`, since the glyph paints with `currentColor`. diff --git a/icons/.multicolor b/icons/.multicolor index a2ebd82d..50bc1e25 100644 --- a/icons/.multicolor +++ b/icons/.multicolor @@ -25,3 +25,8 @@ license-sampling license-sampling-plus license-share license-zero + +# Ported from collection-browser: two-tone sort arrows, one arrow lit. +sort-toggle-up +sort-toggle-down +sort-toggle-disabled diff --git a/icons/arrow-left.svg b/icons/arrow-left.svg new file mode 100644 index 00000000..daae10c6 --- /dev/null +++ b/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg new file mode 100644 index 00000000..fc3ceb24 --- /dev/null +++ b/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/check-rounded.svg b/icons/check-rounded.svg new file mode 100644 index 00000000..9885b0e6 --- /dev/null +++ b/icons/check-rounded.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/compact.svg b/icons/compact.svg new file mode 100644 index 00000000..83e7364a --- /dev/null +++ b/icons/compact.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/contract.svg b/icons/contract.svg new file mode 100644 index 00000000..7afd9333 --- /dev/null +++ b/icons/contract.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/expand.svg b/icons/expand.svg new file mode 100644 index 00000000..c727a1b2 --- /dev/null +++ b/icons/expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/eye.svg b/icons/eye.svg new file mode 100644 index 00000000..d6cbbe8a --- /dev/null +++ b/icons/eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/filter-outline.svg b/icons/filter-outline.svg new file mode 100644 index 00000000..24eb4428 --- /dev/null +++ b/icons/filter-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/list-view.svg b/icons/list-view.svg new file mode 100644 index 00000000..846a80f5 --- /dev/null +++ b/icons/list-view.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/icons/login-required.svg b/icons/login-required.svg new file mode 100644 index 00000000..4e044709 --- /dev/null +++ b/icons/login-required.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/mediatype-account.svg b/icons/mediatype-account.svg new file mode 100644 index 00000000..a2936ad1 --- /dev/null +++ b/icons/mediatype-account.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/mediatype-data.svg b/icons/mediatype-data.svg new file mode 100644 index 00000000..98adeb83 --- /dev/null +++ b/icons/mediatype-data.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/mediatype-radio.svg b/icons/mediatype-radio.svg new file mode 100644 index 00000000..3faff6ef --- /dev/null +++ b/icons/mediatype-radio.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icons/mediatype-tv-commercial.svg b/icons/mediatype-tv-commercial.svg new file mode 100644 index 00000000..71084966 --- /dev/null +++ b/icons/mediatype-tv-commercial.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/mediatype-tv-fact-check.svg b/icons/mediatype-tv-fact-check.svg new file mode 100644 index 00000000..1adbf535 --- /dev/null +++ b/icons/mediatype-tv-fact-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/quote.svg b/icons/quote.svg new file mode 100644 index 00000000..e0262448 --- /dev/null +++ b/icons/quote.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/sort-toggle-disabled.svg b/icons/sort-toggle-disabled.svg new file mode 100644 index 00000000..1ea2cad2 --- /dev/null +++ b/icons/sort-toggle-disabled.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/sort-toggle-down.svg b/icons/sort-toggle-down.svg new file mode 100644 index 00000000..cd8e5732 --- /dev/null +++ b/icons/sort-toggle-down.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/sort-toggle-up.svg b/icons/sort-toggle-up.svg new file mode 100644 index 00000000..0c59d01c --- /dev/null +++ b/icons/sort-toggle-up.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/sort-triangle.svg b/icons/sort-triangle.svg new file mode 100644 index 00000000..bda6daa1 --- /dev/null +++ b/icons/sort-triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tile.svg b/icons/tile.svg new file mode 100644 index 00000000..4d11289e --- /dev/null +++ b/icons/tile.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/elements/ia-status-indicator/icons.test.ts b/src/elements/ia-status-indicator/icons.test.ts index d70f7df8..3c4c191b 100644 --- a/src/elements/ia-status-indicator/icons.test.ts +++ b/src/elements/ia-status-indicator/icons.test.ts @@ -8,12 +8,19 @@ import { describe, expect, test } from 'vitest'; * its box, not the ink. A glyph whose ink sits against one edge of its viewBox * renders off-centre no matter what the component does. */ +// The glyphs the status indicator draws. Other icons in the folder share the +// `mediatype-` prefix, so the list is explicit. const sources = import.meta.glob( [ - '../../../icons/mediatype-*.svg', - // The unpadded variants are a different crop of the same artwork and - // aren't drawn by the status indicator. - '!../../../icons/mediatype-*-unpadded.svg', + '../../../icons/mediatype-audio.svg', + '../../../icons/mediatype-collection.svg', + '../../../icons/mediatype-etree.svg', + '../../../icons/mediatype-images.svg', + '../../../icons/mediatype-software.svg', + '../../../icons/mediatype-texts.svg', + '../../../icons/mediatype-tv.svg', + '../../../icons/mediatype-video.svg', + '../../../icons/mediatype-web.svg', // The `search` mediatype shares the glyph the dropdown search bar uses. '../../../icons/search.svg', ], diff --git a/src/util/icons-set.node.test.ts b/src/util/icons-set.node.test.ts index 9ea5bf8a..0b3c6917 100644 --- a/src/util/icons-set.node.test.ts +++ b/src/util/icons-set.node.test.ts @@ -17,7 +17,8 @@ import { afterAll, beforeAll, describe, expect, it } from 'vitest'; const repoRoot = join(dirname(fileURLToPath(import.meta.url)), '..', '..'); -// A few of the icons that came from the iaux-icons set and from offshoot. +// A few of the icons that came from the iaux-icons set, offshoot and +// collection-browser. const SAMPLE = [ 'close', 'calendar-blank', @@ -27,6 +28,9 @@ const SAMPLE = [ 'external-link', 'license-by', 'mediatype-web-unpadded', + 'sort-toggle-up', + 'mediatype-tv-commercial', + 'list-view', ]; /** Everything inside the root ``, with whitespace between tags dropped. */