diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md index f3a992e48..874b40636 100644 --- a/packages/ui/PROJEKT.md +++ b/packages/ui/PROJEKT.md @@ -81,10 +81,10 @@ Phase 0: ██████████ 100% (6/6 Aufgaben) ✅ Phase 1: ██████████ 100% (6/6 Aufgaben) ✅ Phase 2: ██████████ 100% (26/26 Aufgaben) ✅ Phase 3: ██████████ 100% (24/24 Aufgaben) ✅ - Webapp-Integration komplett -Phase 4: ██░░░░░░░░ 18% (3/17 Aufgaben) - OsButton ✅, OsIcon ✅, System-Icons ✅ +Phase 4: ██░░░░░░░░ 24% (4/17 Aufgaben) - OsButton ✅, OsIcon ✅, System-Icons ✅, BaseIcon→OsIcon Migration ✅ Phase 5: ░░░░░░░░░░ 0% (0/7 Aufgaben) ─────────────────────────────────────── -Gesamt: ████████░░ 76% (65/86 Aufgaben) +Gesamt: ████████░░ 77% (66/86 Aufgaben) ``` ### Katalogisierung (Details in KATALOG.md) @@ -131,31 +131,53 @@ System-Icons: └─ plus.svg (Plus/Add) Ocelot-Icons (separates Entry-Point): -└─ angle-down.svg (Dropdown-Pfeil) +└─ 82 Icons (Feature-Icons + Kategorie-Icons aus Webapp migriert) + +BaseIcon → OsIcon Webapp-Migration: ✅ +├─ 131 in 70+ Dateien → +├─ 82 SVGs in ocelot/icons/svgs/ (inkl. 17 Kategorie-Icons) +├─ vite-svg-icon Plugin erweitert (rect, circle, polygon, polyline, ellipse, line) +├─ Kategorie-Icons: DB-String → toCamelCase() → ocelotIcons Lookup +├─ Jest Mocks: @ocelot-social/ui/ocelot für ocelotIcons in Tests +├─ Tests aktualisiert: 911/939 Tests bestanden (3 pre-existing failures) +└─ 0 base-icon/BaseIcon Referenzen verbleibend ``` --- ## Aktueller Stand -**Letzte Aktualisierung:** 2026-02-15 (Session 21) +**Letzte Aktualisierung:** 2026-02-15 (Session 22) -**Aktuelle Phase:** Phase 4 - OsIcon ✅ implementiert, System-Icons eingerichtet +**Aktuelle Phase:** Phase 4 - OsIcon ✅, BaseIcon → OsIcon Webapp-Migration ✅ -**Zuletzt abgeschlossen (Session 21 - OsIcon Komponente, System-Icons, Ocelot-Umbenennung):** +**Zuletzt abgeschlossen (Session 22 - BaseIcon → OsIcon Webapp-Migration):** +- [x] 131 `` Nutzungen in 70+ Dateien → `` migriert +- [x] 82 Ocelot-Icons in `packages/ui/src/ocelot/icons/svgs/` (von 1 auf 82) +- [x] 17 Kategorie-Icons aus Webapp kopiert (networking, energy, psyche, movement, finance, child, mobility, shopping-cart, peace, politics, nature, science, health, media, spirituality, culture, miscellaneous) +- [x] vite-svg-icon Plugin erweitert: unterstützt ``, ``, ``, ``, ``, `` (war path-only) +- [x] Alle neuen SVGs auf Single-Line minifiziert (Multiline brach JS-String-Literale) +- [x] Kategorie-Icons: DB-String → `toCamelCase()` → `ocelotIcons[key]` Lookup (Category/index.vue, CategoriesFilter.vue, CategoriesSelect.vue, admin/categories.vue) +- [x] `created() { this.icons = ocelotIcons }` Pattern in allen Komponenten (non-reactive) +- [x] MenuLegend.vue: `legendItems` von `data()` → `computed` (data() läuft vor created(), this.icons undefined) +- [x] HeaderMenu.vue: Map-Button Icon-Größe korrigiert (`size="xl"` + negative Margin) +- [x] ShowPassword.vue: `:data-test="iconName"` entfernt (Icon ist jetzt Render-Function, kein String) +- [x] Jest-Tests aktualisiert: OsIcon + ocelotIcons statt BaseIcon + String-Namen + - Category/index.spec.js, ProfileAvatar.spec.js, CounterIcon.spec.js, ReportRow.spec.js + - ActionButton.spec.js, ComponentSlider.spec.js, ShowPassword.spec.js, LoginForm.spec.js +- [x] 8 stale Snapshot-Dateien gelöscht +- [x] Jest Mock: `test/__mocks__/@ocelot-social/ui/ocelot.js` für ocelotIcons in Tests +- [x] CSS: `.base-icon` → `.os-icon` in main.scss und Category/index.vue +- [x] 0 `base-icon`/`BaseIcon` Referenzen verbleibend in gesamter Webapp +- [x] 911/939 Tests bestanden (3 pre-existing Jest worker crashes) + +**Zuvor abgeschlossen (Session 21 - OsIcon Komponente, System-Icons, Ocelot-Umbenennung):** - [x] OsIcon Komponente implementiert (name, icon, size Props; Vue 2/3 via vue-demi h()) - [x] System-Icons: check, close, plus (SVG, viewBox 0 0 32 32, stroke-basiert) - [x] Custom vite-svg-icon Plugin: SVG → Vue Render-Function via `?icon` Query -- [x] Icon-Größen: xs(0.75em), sm(0.875em), md(1.2em), lg(1.5em), xl(2em), 2xl(2.5em) -- [x] A11y: decorative (aria-hidden, default) / semantic (role="img" + aria-label) -- [x] fill-current für Farbvererbung vom Parent -- [x] OsButton nutzt OsIcon statt inline SVG für Icon-Rendering - [x] Ocelot-Icons: separates Entry-Point (ocelot.mjs) mit dynamischem Loading via import.meta.glob - [x] `src/webapp/` → `src/ocelot/` umbenannt (konsistentes Naming) -- [x] check-completeness erweitert: unterstützt ocelot/ Verzeichnis -- [x] OsIcon: 211 Zeilen Unit-Tests, Visual Tests mit checkA11y(), Keyboard A11y - [x] 100% Test-Coverage für OsIcon -- [x] OsButton Stories bereinigt (OsIcon statt Inline-SVGs) **Zuvor abgeschlossen (Session 20 - `as`-Prop + nuxt-link Migration):** - [x] OsButton: `as` Prop implementiert (polymorphe Komponente: `button`, `a`, `nuxt-link`, `router-link`, Custom-Komponenten) @@ -200,8 +222,7 @@ Ocelot-Icons (separates Entry-Point): - [ ] OsSpinner Komponente (vereint DsSpinner + LoadingSpinner) - [ ] OsCard Komponente (vereint DsCard + BaseCard) - [ ] Weitere Tier 1 Komponenten -- [ ] BaseIcon → OsIcon Webapp-Migration (131 Nutzungen) -- [ ] Snapshots/Tests aktualisieren +- [ ] Browser-Fehler untersuchen: `TypeError: Cannot read properties of undefined (reading 'heartO')` (ocelotIcons undefined im Browser trotz korrekter Webpack-Aliase) **Manuelle Setup-Aufgaben (außerhalb Code):** - [ ] `NPM_TOKEN` als GitHub Secret einrichten (für npm publish in ui-release.yml) @@ -475,6 +496,7 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ **Infrastruktur** - [x] System-Icons einrichten ✅ vite-svg-icon Plugin, 3 System-Icons, Ocelot-Icons Entry-Point +- [x] BaseIcon → OsIcon Webapp-Migration ✅ 131 Nutzungen, 82 Ocelot-Icons, 0 BaseIcon verbleibend - [ ] CI docs-check Workflow (JSDoc-Coverage, README-Aktualität) ### Phase 5: Finalisierung @@ -768,7 +790,7 @@ import { ocelotIcons } from '@ocelot-social/ui/ocelot' | Styleguide (_all) | 616 | Nicht übernehmen (FontAwesome 4 komplett) | | Webapp (svgs) | 238 | Feature-Icons, bleiben in Webapp | | **Library (system)** | **3** | ✅ check, close, plus | -| **Ocelot-Icons** | **1** | ✅ angle-down (separates Entry-Point) | +| **Ocelot-Icons** | **82** | ✅ Feature-Icons + Kategorie-Icons (separates Entry-Point) | --- @@ -1543,6 +1565,18 @@ Bei der Migration werden: | 2026-02-15 | **OsButton Stories** | Bereinigt: Inline-SVG-Komponenten durch OsIcon ersetzt; WithAriaLabel-Story entfernt; InheritColor-Story vereinfacht | | 2026-02-15 | **check-completeness** | Erweitert für ocelot/ Verzeichnis; unterstützt OsIcon-Patterns | | 2026-02-15 | **svg-icon.d.ts** | TypeScript-Deklaration für `?icon` Import-Query (Component-Typ) | +| 2026-02-15 | **BaseIcon → OsIcon Migration** | 131 `` in 70+ Dateien → ``, 0 BaseIcon verbleibend | +| 2026-02-15 | **82 Ocelot-Icons** | Von 1 auf 82 Icons: Feature-Icons + 17 Kategorie-Icons aus Webapp kopiert | +| 2026-02-15 | **vite-svg-icon erweitert** | Unterstützt jetzt ``, ``, ``, ``, ``, `` (war path-only) | +| 2026-02-15 | **SVG-Minifizierung** | Alle 21 neuen SVGs auf Single-Line minifiziert (Multiline brach JS-String-Literale im Plugin) | +| 2026-02-15 | **Kategorie-Icons** | DB-String → `toCamelCase()` → `ocelotIcons[key]` Lookup in Category, CategoriesFilter, CategoriesSelect, admin/categories | +| 2026-02-15 | **MenuLegend.vue Fix** | `legendItems` von `data()` → `computed` (`data()` läuft vor `created()`, `this.icons` undefined) | +| 2026-02-15 | **HeaderMenu.vue Fix** | Map-Button Icon-Größe: `size="xl"` + negative Margin (OsIcon md=1.2em vs BaseIcon --large=2.2em) | +| 2026-02-15 | **ShowPassword.vue Fix** | `:data-test="iconName"` entfernt (Icon ist jetzt Render-Function statt String) | +| 2026-02-15 | **Test-Updates (8 Specs)** | Category, ProfileAvatar, CounterIcon, ReportRow, ActionButton, ComponentSlider, ShowPassword, LoginForm: BaseIcon → OsIcon + ocelotIcons | +| 2026-02-15 | **8 Snapshots gelöscht** | Stale Snapshot-Dateien entfernt nach BaseIcon → OsIcon Migration | +| 2026-02-15 | **CSS Migration** | `.base-icon` → `.os-icon` in main.scss und Category/index.vue | +| 2026-02-15 | **Jest Mock ocelot** | `test/__mocks__/@ocelot-social/ui/ocelot.js` für ocelotIcons in Jest-Umgebung | --- diff --git a/packages/ui/package.json b/packages/ui/package.json index 452861fa6..140724e9f 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -144,21 +144,23 @@ "size-limit": [ { "path": "dist/index.mjs", - "limit": "16 kB", + "limit": "15 kB", "brotli": true }, { "path": "dist/tailwind.preset.mjs", - "limit": "2 kB" + "limit": "1 kB", + "brotli": true }, { "path": "dist/ocelot.mjs", - "limit": "5 kB", + "limit": "45 kB", "brotli": true }, { "path": "dist/style.css", - "limit": "10 kB" + "limit": "5 kB", + "brotli": true } ] } diff --git a/packages/ui/src/components/OsButton/OsButton.spec.ts b/packages/ui/src/components/OsButton/OsButton.spec.ts index f4f4fe335..d8e983241 100644 --- a/packages/ui/src/components/OsButton/OsButton.spec.ts +++ b/packages/ui/src/components/OsButton/OsButton.spec.ts @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' import { describe, expect, it } from 'vitest' -import { defineComponent, h } from 'vue-demi' +import { defineComponent, h, markRaw } from 'vue-demi' import OsButton from './OsButton.vue' @@ -570,16 +570,18 @@ describe('osButton', () => { }) it('renders a component passed as as', () => { - const FakeLink = defineComponent({ - props: { to: { type: String, default: undefined } }, - setup(props, { slots }) { - return () => h('a', { href: props.to }, slots.default?.()) - }, - }) + const FakeLink = markRaw( + defineComponent({ + props: { to: { type: String, default: undefined } }, + setup(props, { slots }) { + return () => h('a', { href: props.to }, slots.default?.()) + }, + }), + ) const wrapper = mount(OsButton, { props: { as: FakeLink }, attrs: { to: '/groups' }, - slots: { default: 'Groups' }, + slots: { default: () => 'Groups' }, }) expect((wrapper.element as HTMLElement).tagName).toBe('A') diff --git a/packages/ui/src/components/OsButton/OsButton.vue b/packages/ui/src/components/OsButton/OsButton.vue index f552d03bc..8a47072a5 100644 --- a/packages/ui/src/components/OsButton/OsButton.vue +++ b/packages/ui/src/components/OsButton/OsButton.vue @@ -237,15 +237,15 @@ /* v8 ignore stop */ const { class: attrClass, ...restAttrs } = attrs as Record - return h( - tag, - { - ...buttonData, - class: cn(buttonClass, attrClass || ''), - ...restAttrs, - }, - children, - ) + const nodeProps = { + ...buttonData, + class: cn(buttonClass, attrClass || ''), + ...restAttrs, + } + // Components expect slot functions; HTML elements accept VNode arrays + return typeof tag === 'string' + ? h(tag, nodeProps, children) + : h(tag, nodeProps, { default: () => children }) } }, }) diff --git a/packages/ui/src/components/OsIcon/OsIcon.stories.ts b/packages/ui/src/components/OsIcon/OsIcon.stories.ts index 30e3a0051..962dcdcf6 100644 --- a/packages/ui/src/components/OsIcon/OsIcon.stories.ts +++ b/packages/ui/src/components/OsIcon/OsIcon.stories.ts @@ -62,7 +62,7 @@ export const Playground: StoryObj = { }), } -export const AllSystemIcons: Story = { +export const AllIcons: Story = { render: () => ({ components: { OsIcon }, setup() { diff --git a/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts b/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts index 54727b8ea..f1d141a23 100644 --- a/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts +++ b/packages/ui/src/components/OsIcon/OsIcon.visual.spec.ts @@ -32,7 +32,7 @@ async function checkA11y(page: Page) { test.describe('OsIcon keyboard accessibility', () => { test('decorative icons are not focusable', async ({ page }) => { - await page.goto(`${STORY_URL}--all-system-icons&viewMode=story`) + await page.goto(`${STORY_URL}--all-icons&viewMode=story`) const root = page.locator(STORY_ROOT) await root.waitFor() @@ -50,13 +50,13 @@ test.describe('OsIcon keyboard accessibility', () => { }) test.describe('OsIcon visual regression', () => { - test('all system icons', async ({ page }) => { - await page.goto(`${STORY_URL}--all-system-icons&viewMode=story`) + test('all icons', async ({ page }) => { + await page.goto(`${STORY_URL}--all-icons&viewMode=story`) const root = page.locator(STORY_ROOT) await root.waitFor() await waitForFonts(page) - await expect(root.locator('.grid')).toHaveScreenshot('all-system-icons.png') + await expect(root.locator('.grid')).toHaveScreenshot('all-icons.png') await checkA11y(page) }) diff --git a/packages/ui/src/components/OsIcon/OsIcon.vue b/packages/ui/src/components/OsIcon/OsIcon.vue index ba39b3074..9fe02c059 100644 --- a/packages/ui/src/components/OsIcon/OsIcon.vue +++ b/packages/ui/src/components/OsIcon/OsIcon.vue @@ -49,12 +49,19 @@ const sizeClass = ICON_SIZES[props.size] // Vue 2's h() cannot handle plain arrow functions as components (only - // constructor functions or option objects). SYSTEM_ICONS entries are - // arrow functions that return VNodes, so call them directly. + // constructor functions or option objects). Icon render functions are + // arrow functions that accept optional (h, isVue2) and return VNodes. // eslint-disable-next-line @typescript-eslint/no-explicit-any const isRenderFn = typeof iconComponent === 'function' && !(iconComponent as any).cid + // In Vue 2, pass $createElement (bound to this instance) so icons avoid + // the globally-imported h() which requires currentInstance in Vue 2.7. + const createElement = /* v8 ignore next -- Vue 2 only */ isVue2 + ? // eslint-disable-next-line @typescript-eslint/no-explicit-any + (instance?.proxy as any)?.$createElement + : h + const iconVNode = isRenderFn - ? (iconComponent as () => ReturnType)() + ? (iconComponent as (...args: unknown[]) => ReturnType)(createElement, isVue2) : h(iconComponent) /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */ @@ -75,7 +82,7 @@ { class: [ cn( - 'os-icon inline-flex items-center shrink-0', + 'os-icon inline-flex items-center align-bottom shrink-0', sizeClass, '[&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current', ), @@ -103,7 +110,7 @@ 'span', { class: cn( - 'os-icon inline-flex items-center shrink-0', + 'os-icon inline-flex items-center align-bottom shrink-0', sizeClass, '[&>svg]:h-full [&>svg]:w-auto [&>svg]:fill-current', attrClass as ClassValue, diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/all-system-icons.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/all-icons.png similarity index 100% rename from packages/ui/src/components/OsIcon/__screenshots__/chromium/all-system-icons.png rename to packages/ui/src/components/OsIcon/__screenshots__/chromium/all-icons.png diff --git a/packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png b/packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png index 4058719bf..6c480e7b4 100644 Binary files a/packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png and b/packages/ui/src/components/OsIcon/__screenshots__/chromium/inherit-color.png differ diff --git a/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts b/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts index 2dbfc5fe3..cf95754e1 100644 --- a/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts +++ b/packages/ui/src/ocelot/icons/OcelotIcons.stories.ts @@ -1,4 +1,4 @@ -import { OsIcon, SYSTEM_ICONS } from '#src/components/OsIcon' +import { OsIcon } from '#src/components/OsIcon' import { ocelotIcons } from './index' @@ -11,33 +11,20 @@ const meta: Meta = { export default meta -const systemEntries = Object.entries(SYSTEM_ICONS) -const ocelotEntries = Object.entries(ocelotIcons) +const allEntries = Object.entries(ocelotIcons) export const AllIcons: StoryObj = { render: () => ({ components: { OsIcon }, setup() { - return { systemEntries, ocelotEntries } + return { allEntries } }, template: ` -
-
-

Library Icons

-
-
- - {{ name }} -
-
-
-
-

Ocelot Icons

-
-
- - {{ name }} -
+
+
+
+ + {{ name }}
diff --git a/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png b/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png index 976455790..a751e0d95 100644 Binary files a/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png and b/packages/ui/src/ocelot/icons/__screenshots__/chromium/all-icons.png differ diff --git a/packages/ui/src/ocelot/icons/index.spec.ts b/packages/ui/src/ocelot/icons/index.spec.ts index 167aec430..36febfc11 100644 --- a/packages/ui/src/ocelot/icons/index.spec.ts +++ b/packages/ui/src/ocelot/icons/index.spec.ts @@ -1,13 +1,12 @@ import { mount } from '@vue/test-utils' import { describe, expect, expectTypeOf, it } from 'vitest' -import { h } from 'vue' import OsIcon from '#src/components/OsIcon/OsIcon.vue' import { ocelotIcons } from './index' describe('ocelot icons', () => { - const IconAngleDown = ocelotIcons.IconAngleDown + const angleDown = ocelotIcons.angleDown describe('exports', () => { it('exports ocelotIcons as a record of functions', () => { @@ -17,20 +16,21 @@ describe('ocelot icons', () => { }) it('auto-discovers all SVGs in svgs/ directory', () => { - expect(ocelotIcons).toHaveProperty('IconAngleDown') + expect(ocelotIcons).toHaveProperty('angleDown') + expect(angleDown).toBeTypeOf('function') + }) - expectTypeOf(IconAngleDown).toBeFunction() + it('includes system icons (check, close, plus)', () => { + expect(ocelotIcons).toHaveProperty('check') + expect(ocelotIcons).toHaveProperty('close') + expect(ocelotIcons).toHaveProperty('plus') }) }) - describe('iconAngleDown', () => { + describe('angleDown', () => { it('renders an SVG with correct viewBox', () => { - const vnode = IconAngleDown() - - expect(vnode).toBeDefined() - - const wrapper = mount({ - render: () => h('div', [IconAngleDown()]), + const wrapper = mount(OsIcon, { + props: { icon: angleDown }, }) const svg = wrapper.find('svg') @@ -40,7 +40,7 @@ describe('ocelot icons', () => { it('works with OsIcon :icon prop', () => { const wrapper = mount(OsIcon, { - props: { icon: IconAngleDown }, + props: { icon: angleDown }, }) expect(wrapper.find('.os-icon').exists()).toBe(true) @@ -52,7 +52,7 @@ describe('ocelot icons', () => { describe('keyboard accessibility', () => { it('icon via :icon prop is not focusable (decorative element)', () => { const wrapper = mount(OsIcon, { - props: { icon: IconAngleDown }, + props: { icon: angleDown }, }) expect(wrapper.attributes('tabindex')).toBeUndefined() diff --git a/packages/ui/src/ocelot/icons/index.ts b/packages/ui/src/ocelot/icons/index.ts index cfaaf16e9..d484848be 100644 --- a/packages/ui/src/ocelot/icons/index.ts +++ b/packages/ui/src/ocelot/icons/index.ts @@ -1,24 +1,19 @@ -import type { VNode } from 'vue-demi' +import { SYSTEM_ICONS } from '#src/components/OsIcon/icons' -const modules = import.meta.glob<() => VNode>('./svgs/*.svg', { +import type { Component } from 'vue-demi' + +const modules = import.meta.glob('./svgs/*.svg', { query: '?icon', eager: true, import: 'default', }) function toName(path: string): string { - return ( - 'Icon' + - path - .replace('./svgs/', '') - .replace('.svg', '') - .split('-') - .filter(Boolean) - .map((s) => s[0].toUpperCase() + s.slice(1)) - .join('') - ) + const parts = path.replace('./svgs/', '').replace('.svg', '').split('-').filter(Boolean) + return parts.map((s, i) => (i === 0 ? s : s[0].toUpperCase() + s.slice(1))).join('') } -export const ocelotIcons: Record VNode> = Object.fromEntries( - Object.entries(modules).map(([path, icon]) => [toName(path), icon]), -) +export const ocelotIcons: Record = { + ...SYSTEM_ICONS, + ...Object.fromEntries(Object.entries(modules).map(([path, icon]) => [toName(path), icon])), +} diff --git a/webapp/assets/_new/icons/svgs/angle-up.svg b/packages/ui/src/ocelot/icons/svgs/angle-up.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/angle-up.svg rename to packages/ui/src/ocelot/icons/svgs/angle-up.svg diff --git a/webapp/assets/_new/icons/svgs/arrow-down.svg b/packages/ui/src/ocelot/icons/svgs/arrow-down.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/arrow-down.svg rename to packages/ui/src/ocelot/icons/svgs/arrow-down.svg diff --git a/webapp/assets/_new/icons/svgs/arrow-left.svg b/packages/ui/src/ocelot/icons/svgs/arrow-left.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/arrow-left.svg rename to packages/ui/src/ocelot/icons/svgs/arrow-left.svg diff --git a/webapp/assets/_new/icons/svgs/arrow-right.svg b/packages/ui/src/ocelot/icons/svgs/arrow-right.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/arrow-right.svg rename to packages/ui/src/ocelot/icons/svgs/arrow-right.svg diff --git a/webapp/assets/_new/icons/svgs/balance-scale.svg b/packages/ui/src/ocelot/icons/svgs/balance-scale.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/balance-scale.svg rename to packages/ui/src/ocelot/icons/svgs/balance-scale.svg diff --git a/webapp/assets/_new/icons/svgs/ban.svg b/packages/ui/src/ocelot/icons/svgs/ban.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/ban.svg rename to packages/ui/src/ocelot/icons/svgs/ban.svg diff --git a/webapp/assets/_new/icons/svgs/bars.svg b/packages/ui/src/ocelot/icons/svgs/bars.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/bars.svg rename to packages/ui/src/ocelot/icons/svgs/bars.svg diff --git a/packages/ui/src/ocelot/icons/svgs/bell-slashed.svg b/packages/ui/src/ocelot/icons/svgs/bell-slashed.svg new file mode 100644 index 000000000..532779bae --- /dev/null +++ b/packages/ui/src/ocelot/icons/svgs/bell-slashed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/webapp/assets/_new/icons/svgs/bell.svg b/packages/ui/src/ocelot/icons/svgs/bell.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/bell.svg rename to packages/ui/src/ocelot/icons/svgs/bell.svg diff --git a/webapp/assets/_new/icons/svgs/bold.svg b/packages/ui/src/ocelot/icons/svgs/bold.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/bold.svg rename to packages/ui/src/ocelot/icons/svgs/bold.svg diff --git a/packages/ui/src/ocelot/icons/svgs/book.svg b/packages/ui/src/ocelot/icons/svgs/book.svg new file mode 100644 index 000000000..7527fa203 --- /dev/null +++ b/packages/ui/src/ocelot/icons/svgs/book.svg @@ -0,0 +1 @@ +book diff --git a/webapp/assets/_new/icons/svgs/bookmark.svg b/packages/ui/src/ocelot/icons/svgs/bookmark.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/bookmark.svg rename to packages/ui/src/ocelot/icons/svgs/bookmark.svg diff --git a/webapp/assets/_new/icons/svgs/calendar.svg b/packages/ui/src/ocelot/icons/svgs/calendar.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/calendar.svg rename to packages/ui/src/ocelot/icons/svgs/calendar.svg diff --git a/webapp/assets/_new/icons/svgs/chat-bubble.svg b/packages/ui/src/ocelot/icons/svgs/chat-bubble.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/chat-bubble.svg rename to packages/ui/src/ocelot/icons/svgs/chat-bubble.svg diff --git a/webapp/assets/_new/icons/svgs/clock.svg b/packages/ui/src/ocelot/icons/svgs/clock.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/clock.svg rename to packages/ui/src/ocelot/icons/svgs/clock.svg diff --git a/webapp/assets/_new/icons/svgs/cogs.svg b/packages/ui/src/ocelot/icons/svgs/cogs.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/cogs.svg rename to packages/ui/src/ocelot/icons/svgs/cogs.svg diff --git a/webapp/assets/_new/icons/svgs/comment.svg b/packages/ui/src/ocelot/icons/svgs/comment.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/comment.svg rename to packages/ui/src/ocelot/icons/svgs/comment.svg diff --git a/packages/ui/src/ocelot/icons/svgs/comments.svg b/packages/ui/src/ocelot/icons/svgs/comments.svg new file mode 100755 index 000000000..cb332ae26 --- /dev/null +++ b/packages/ui/src/ocelot/icons/svgs/comments.svg @@ -0,0 +1 @@ +comments diff --git a/webapp/assets/_new/icons/svgs/copy.svg b/packages/ui/src/ocelot/icons/svgs/copy.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/copy.svg rename to packages/ui/src/ocelot/icons/svgs/copy.svg diff --git a/webapp/assets/_new/icons/svgs/download.svg b/packages/ui/src/ocelot/icons/svgs/download.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/download.svg rename to packages/ui/src/ocelot/icons/svgs/download.svg diff --git a/webapp/assets/_new/icons/svgs/edit.svg b/packages/ui/src/ocelot/icons/svgs/edit.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/edit.svg rename to packages/ui/src/ocelot/icons/svgs/edit.svg diff --git a/webapp/assets/_new/icons/svgs/ellipsis-v.svg b/packages/ui/src/ocelot/icons/svgs/ellipsis-v.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/ellipsis-v.svg rename to packages/ui/src/ocelot/icons/svgs/ellipsis-v.svg diff --git a/webapp/assets/_new/icons/svgs/exclamation-circle.svg b/packages/ui/src/ocelot/icons/svgs/exclamation-circle.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/exclamation-circle.svg rename to packages/ui/src/ocelot/icons/svgs/exclamation-circle.svg diff --git a/webapp/assets/_new/icons/svgs/expand.svg b/packages/ui/src/ocelot/icons/svgs/expand.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/expand.svg rename to packages/ui/src/ocelot/icons/svgs/expand.svg diff --git a/webapp/assets/_new/icons/svgs/eye-slash.svg b/packages/ui/src/ocelot/icons/svgs/eye-slash.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/eye-slash.svg rename to packages/ui/src/ocelot/icons/svgs/eye-slash.svg diff --git a/webapp/assets/_new/icons/svgs/eye.svg b/packages/ui/src/ocelot/icons/svgs/eye.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/eye.svg rename to packages/ui/src/ocelot/icons/svgs/eye.svg diff --git a/webapp/assets/_new/icons/svgs/filter.svg b/packages/ui/src/ocelot/icons/svgs/filter.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/filter.svg rename to packages/ui/src/ocelot/icons/svgs/filter.svg diff --git a/webapp/assets/_new/icons/svgs/flag.svg b/packages/ui/src/ocelot/icons/svgs/flag.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/flag.svg rename to packages/ui/src/ocelot/icons/svgs/flag.svg diff --git a/webapp/assets/_new/icons/svgs/globe-detailed.svg b/packages/ui/src/ocelot/icons/svgs/globe-detailed.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/globe-detailed.svg rename to packages/ui/src/ocelot/icons/svgs/globe-detailed.svg diff --git a/webapp/assets/_new/icons/svgs/globe.svg b/packages/ui/src/ocelot/icons/svgs/globe.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/globe.svg rename to packages/ui/src/ocelot/icons/svgs/globe.svg diff --git a/packages/ui/src/ocelot/icons/svgs/hand-pointer.svg b/packages/ui/src/ocelot/icons/svgs/hand-pointer.svg new file mode 100644 index 000000000..c3191558e --- /dev/null +++ b/packages/ui/src/ocelot/icons/svgs/hand-pointer.svg @@ -0,0 +1 @@ +hand-pointer-o diff --git a/packages/ui/src/ocelot/icons/svgs/heart-o.svg b/packages/ui/src/ocelot/icons/svgs/heart-o.svg new file mode 100755 index 000000000..e505b625e --- /dev/null +++ b/packages/ui/src/ocelot/icons/svgs/heart-o.svg @@ -0,0 +1 @@ +heart-o diff --git a/webapp/assets/_new/icons/svgs/home.svg b/packages/ui/src/ocelot/icons/svgs/home.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/home.svg rename to packages/ui/src/ocelot/icons/svgs/home.svg diff --git a/webapp/assets/_new/icons/svgs/image.svg b/packages/ui/src/ocelot/icons/svgs/image.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/image.svg rename to packages/ui/src/ocelot/icons/svgs/image.svg diff --git a/webapp/assets/_new/icons/svgs/italic.svg b/packages/ui/src/ocelot/icons/svgs/italic.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/italic.svg rename to packages/ui/src/ocelot/icons/svgs/italic.svg diff --git a/webapp/assets/_new/icons/svgs/level-down.svg b/packages/ui/src/ocelot/icons/svgs/level-down.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/level-down.svg rename to packages/ui/src/ocelot/icons/svgs/level-down.svg diff --git a/webapp/assets/_new/icons/svgs/link.svg b/packages/ui/src/ocelot/icons/svgs/link.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/link.svg rename to packages/ui/src/ocelot/icons/svgs/link.svg diff --git a/webapp/assets/_new/icons/svgs/list-ol.svg b/packages/ui/src/ocelot/icons/svgs/list-ol.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/list-ol.svg rename to packages/ui/src/ocelot/icons/svgs/list-ol.svg diff --git a/webapp/assets/_new/icons/svgs/list-ul.svg b/packages/ui/src/ocelot/icons/svgs/list-ul.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/list-ul.svg rename to packages/ui/src/ocelot/icons/svgs/list-ul.svg diff --git a/webapp/assets/_new/icons/svgs/map-marker.svg b/packages/ui/src/ocelot/icons/svgs/map-marker.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/map-marker.svg rename to packages/ui/src/ocelot/icons/svgs/map-marker.svg diff --git a/webapp/assets/_new/icons/svgs/microphone-slash.svg b/packages/ui/src/ocelot/icons/svgs/microphone-slash.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/microphone-slash.svg rename to packages/ui/src/ocelot/icons/svgs/microphone-slash.svg diff --git a/webapp/assets/_new/icons/svgs/microphone.svg b/packages/ui/src/ocelot/icons/svgs/microphone.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/microphone.svg rename to packages/ui/src/ocelot/icons/svgs/microphone.svg diff --git a/webapp/assets/_new/icons/svgs/minus.svg b/packages/ui/src/ocelot/icons/svgs/minus.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/minus.svg rename to packages/ui/src/ocelot/icons/svgs/minus.svg diff --git a/webapp/assets/_new/icons/svgs/paragraph.svg b/packages/ui/src/ocelot/icons/svgs/paragraph.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/paragraph.svg rename to packages/ui/src/ocelot/icons/svgs/paragraph.svg diff --git a/webapp/assets/_new/icons/svgs/pencil.svg b/packages/ui/src/ocelot/icons/svgs/pencil.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/pencil.svg rename to packages/ui/src/ocelot/icons/svgs/pencil.svg diff --git a/webapp/assets/_new/icons/svgs/question-circle.svg b/packages/ui/src/ocelot/icons/svgs/question-circle.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/question-circle.svg rename to packages/ui/src/ocelot/icons/svgs/question-circle.svg diff --git a/webapp/assets/_new/icons/svgs/quote-right.svg b/packages/ui/src/ocelot/icons/svgs/quote-right.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/quote-right.svg rename to packages/ui/src/ocelot/icons/svgs/quote-right.svg diff --git a/webapp/assets/_new/icons/svgs/save.svg b/packages/ui/src/ocelot/icons/svgs/save.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/save.svg rename to packages/ui/src/ocelot/icons/svgs/save.svg diff --git a/webapp/assets/_new/icons/svgs/search.svg b/packages/ui/src/ocelot/icons/svgs/search.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/search.svg rename to packages/ui/src/ocelot/icons/svgs/search.svg diff --git a/webapp/assets/_new/icons/svgs/shield.svg b/packages/ui/src/ocelot/icons/svgs/shield.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/shield.svg rename to packages/ui/src/ocelot/icons/svgs/shield.svg diff --git a/packages/ui/src/ocelot/icons/svgs/shopping-cart.svg b/packages/ui/src/ocelot/icons/svgs/shopping-cart.svg new file mode 100755 index 000000000..27275aa77 --- /dev/null +++ b/packages/ui/src/ocelot/icons/svgs/shopping-cart.svg @@ -0,0 +1 @@ +shopping-cart diff --git a/webapp/assets/_new/icons/svgs/sign-in.svg b/packages/ui/src/ocelot/icons/svgs/sign-in.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/sign-in.svg rename to packages/ui/src/ocelot/icons/svgs/sign-in.svg diff --git a/webapp/assets/_new/icons/svgs/sign-out.svg b/packages/ui/src/ocelot/icons/svgs/sign-out.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/sign-out.svg rename to packages/ui/src/ocelot/icons/svgs/sign-out.svg diff --git a/webapp/assets/_new/icons/svgs/sort-amount-asc.svg b/packages/ui/src/ocelot/icons/svgs/sort-amount-asc.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/sort-amount-asc.svg rename to packages/ui/src/ocelot/icons/svgs/sort-amount-asc.svg diff --git a/webapp/assets/_new/icons/svgs/sort-amount-desc.svg b/packages/ui/src/ocelot/icons/svgs/sort-amount-desc.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/sort-amount-desc.svg rename to packages/ui/src/ocelot/icons/svgs/sort-amount-desc.svg diff --git a/webapp/assets/_new/icons/svgs/trash.svg b/packages/ui/src/ocelot/icons/svgs/trash.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/trash.svg rename to packages/ui/src/ocelot/icons/svgs/trash.svg diff --git a/webapp/assets/_new/icons/svgs/underline.svg b/packages/ui/src/ocelot/icons/svgs/underline.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/underline.svg rename to packages/ui/src/ocelot/icons/svgs/underline.svg diff --git a/webapp/assets/_new/icons/svgs/unlink.svg b/packages/ui/src/ocelot/icons/svgs/unlink.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/unlink.svg rename to packages/ui/src/ocelot/icons/svgs/unlink.svg diff --git a/webapp/assets/_new/icons/svgs/user-plus.svg b/packages/ui/src/ocelot/icons/svgs/user-plus.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/user-plus.svg rename to packages/ui/src/ocelot/icons/svgs/user-plus.svg diff --git a/webapp/assets/_new/icons/svgs/user-times.svg b/packages/ui/src/ocelot/icons/svgs/user-times.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/user-times.svg rename to packages/ui/src/ocelot/icons/svgs/user-times.svg diff --git a/webapp/assets/_new/icons/svgs/user.svg b/packages/ui/src/ocelot/icons/svgs/user.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/user.svg rename to packages/ui/src/ocelot/icons/svgs/user.svg diff --git a/webapp/assets/_new/icons/svgs/users.svg b/packages/ui/src/ocelot/icons/svgs/users.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/users.svg rename to packages/ui/src/ocelot/icons/svgs/users.svg diff --git a/webapp/assets/_new/icons/svgs/volume-off.svg b/packages/ui/src/ocelot/icons/svgs/volume-off.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/volume-off.svg rename to packages/ui/src/ocelot/icons/svgs/volume-off.svg diff --git a/webapp/assets/_new/icons/svgs/volume-up.svg b/packages/ui/src/ocelot/icons/svgs/volume-up.svg similarity index 100% rename from webapp/assets/_new/icons/svgs/volume-up.svg rename to packages/ui/src/ocelot/icons/svgs/volume-up.svg diff --git a/webapp/assets/_new/icons/svgs/warning.svg b/packages/ui/src/ocelot/icons/svgs/warning.svg old mode 100755 new mode 100644 similarity index 100% rename from webapp/assets/_new/icons/svgs/warning.svg rename to packages/ui/src/ocelot/icons/svgs/warning.svg diff --git a/packages/ui/src/plugins/vite-svg-icon.ts b/packages/ui/src/plugins/vite-svg-icon.ts index 38730d400..0bbfd0941 100644 --- a/packages/ui/src/plugins/vite-svg-icon.ts +++ b/packages/ui/src/plugins/vite-svg-icon.ts @@ -7,9 +7,28 @@ const SUFFIX = '?icon' /** Escape a string for safe embedding in a single-quoted JS literal */ function escapeJS(str: string): string { - return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'") + return str + .replace(/\\/g, '\\\\') + .replace(/'/g, "\\'") + .replace(/\n/g, '\\n') + .replace(/\r/g, '\\r') + .replace(/\u2028/g, '\\u2028') + .replace(/\u2029/g, '\\u2029') } +const SUPPORTED_ELEMENTS = ['path', 'circle', 'rect', 'polygon', 'polyline', 'ellipse', 'line'] +const ELEM_PATTERN = SUPPORTED_ELEMENTS.join('|') +// Built from constant array above — safe to use in RegExp +// eslint-disable-next-line security/detect-non-literal-regexp +const ELEM_REGEX = new RegExp(`<(${ELEM_PATTERN})(?:\\s([^>]*?))?\\/?>`, 'g') + +// Elements silently ignored (container without visual effect) +const IGNORED_ELEMENTS = ['g', 'title'] +const KNOWN_ELEMENTS = ['svg', ...SUPPORTED_ELEMENTS, ...IGNORED_ELEMENTS] +// Built from constant arrays above — safe to use in RegExp +// eslint-disable-next-line security/detect-non-literal-regexp +const UNSUPPORTED_REGEX = new RegExp(`<(?!\\/|(?:${KNOWN_ELEMENTS.join('|')})\\b)(\\w+)[\\s>]`, 'g') + export default function svgIcon(): Plugin { return { name: 'svg-icon', @@ -32,32 +51,43 @@ export default function svgIcon(): Plugin { const viewBoxMatch = viewBoxRegex.exec(svg) const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 32 32' - const unsupported = svg.match(/<(?:circle|rect|polygon|polyline|ellipse|line)\s/g) + const unsupported = svg.match(UNSUPPORTED_REGEX) if (unsupported) { this.warn( `${filePath}: unsupported SVG elements will be ignored: ${[...new Set(unsupported.map((s) => s.trim()))].join(', ')}`, ) } - const paths: string[] = [] - const pathRegex = /]*?\bd="([^"]+)"/g + const children: string[] = [] + ELEM_REGEX.lastIndex = 0 let match: RegExpExecArray | null - while ((match = pathRegex.exec(svg)) !== null) { - paths.push(match[1]) + while ((match = ELEM_REGEX.exec(svg)) !== null) { + const tag = match[1] + const attrString = match[2] || '' + const attrs: Record = {} + const attrRegex = /(\w[\w-]*)=(["'])([^"']*)\2/g + let attrMatch: RegExpExecArray | null + while ((attrMatch = attrRegex.exec(attrString)) !== null) { + attrs[attrMatch[1]] = attrMatch[3] + } + const attrEntries = Object.entries(attrs) + .map(([k, v]) => `'${escapeJS(k)}': '${escapeJS(v)}'`) + .join(', ') + children.push(`_h('${tag}', _v2 ? { attrs: { ${attrEntries} } } : { ${attrEntries} })`) } - const pathElements = paths - .map((d) => { - const escaped = escapeJS(d) - return `h('path', isVue2 ? { attrs: { d: '${escaped}' } } : { d: '${escaped}' })` - }) - .join(', ') + const pathElements = children.join(', ') const safeViewBox = escapeJS(viewBox) - return `import { h, isVue2 } from 'vue-demi' + // Icon functions accept optional (h, v2) from OsIcon. When OsIcon passes + // Vue 2's $createElement, we use it directly — avoiding the globally-imported + // h() which requires currentInstance in Vue 2.7. + // When used as a standalone Vue 3 component (e.g. in Storybook), h/v2 are not + // functions/booleans, so we fall back to the imported _hImport / _v2Import. + return `import { h as _hImport, isVue2 as _v2Import } from 'vue-demi' const svgAttrs = { xmlns: 'http://www.w3.org/2000/svg', viewBox: '${safeViewBox}', fill: 'currentColor' } -export default () => h('svg', isVue2 ? { attrs: svgAttrs } : svgAttrs, [${pathElements}]) +export default (h, v2) => { const _h = typeof h === 'function' ? h : _hImport; const _v2 = typeof v2 === 'boolean' ? v2 : _v2Import; return _h('svg', _v2 ? { attrs: svgAttrs } : svgAttrs, [${pathElements}]) } ` }, } diff --git a/packages/ui/src/test/setup.ts b/packages/ui/src/test/setup.ts new file mode 100644 index 000000000..c0d826cc3 --- /dev/null +++ b/packages/ui/src/test/setup.ts @@ -0,0 +1,9 @@ +import { config } from '@vue/test-utils' + +config.global.config.warnHandler = (msg) => { + throw new Error(`[Vue warn]: ${msg}`) +} + +config.global.config.errorHandler = (err) => { + throw err instanceof Error ? err : new Error(`[Vue error]: ${String(err)}`) +} diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index 8d37025c8..14d0610cc 100644 --- a/packages/ui/vite.config.ts +++ b/packages/ui/vite.config.ts @@ -68,6 +68,7 @@ export default defineConfig({ test: { globals: true, environment: 'jsdom', + setupFiles: ['src/test/setup.ts'], include: ['src/**/*.{test,spec}.{js,ts}'], exclude: ['src/**/*.visual.spec.ts', 'src/plugins/**'], coverage: { diff --git a/webapp/assets/_new/icons/svgs/.gitkeep b/webapp/assets/_new/icons/svgs/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/webapp/assets/_new/icons/svgs/angle-down.svg b/webapp/assets/_new/icons/svgs/angle-down.svg deleted file mode 100755 index aa6f763c8..000000000 --- a/webapp/assets/_new/icons/svgs/angle-down.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -angle-down - - diff --git a/webapp/assets/_new/icons/svgs/bell-slashed.svg b/webapp/assets/_new/icons/svgs/bell-slashed.svg deleted file mode 100644 index 0aae3ff97..000000000 --- a/webapp/assets/_new/icons/svgs/bell-slashed.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/webapp/assets/_new/icons/svgs/book.svg b/webapp/assets/_new/icons/svgs/book.svg deleted file mode 100644 index 305e367ac..000000000 --- a/webapp/assets/_new/icons/svgs/book.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -book - - diff --git a/webapp/assets/_new/icons/svgs/bullhorn.svg b/webapp/assets/_new/icons/svgs/bullhorn.svg index 95e0d21d3..1cdc6b452 100755 --- a/webapp/assets/_new/icons/svgs/bullhorn.svg +++ b/webapp/assets/_new/icons/svgs/bullhorn.svg @@ -1,5 +1 @@ - - -bullhorn - - +bullhorn diff --git a/webapp/assets/_new/icons/svgs/camera.svg b/webapp/assets/_new/icons/svgs/camera.svg index 793620544..59a02f655 100755 --- a/webapp/assets/_new/icons/svgs/camera.svg +++ b/webapp/assets/_new/icons/svgs/camera.svg @@ -1,5 +1 @@ - - -camera - - +camera diff --git a/webapp/assets/_new/icons/svgs/child.svg b/webapp/assets/_new/icons/svgs/child.svg index fcb5651f0..353c8cbe1 100644 --- a/webapp/assets/_new/icons/svgs/child.svg +++ b/webapp/assets/_new/icons/svgs/child.svg @@ -1,5 +1 @@ - - -child - - +child diff --git a/webapp/assets/_new/icons/svgs/comments.svg b/webapp/assets/_new/icons/svgs/comments.svg deleted file mode 100755 index 551f10e4e..000000000 --- a/webapp/assets/_new/icons/svgs/comments.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -comments - - diff --git a/webapp/assets/_new/icons/svgs/credit-card.svg b/webapp/assets/_new/icons/svgs/credit-card.svg index 29c1fb96f..3dc714732 100755 --- a/webapp/assets/_new/icons/svgs/credit-card.svg +++ b/webapp/assets/_new/icons/svgs/credit-card.svg @@ -1,5 +1 @@ - - -credit-card - - +credit-card diff --git a/webapp/assets/_new/icons/svgs/cubes.svg b/webapp/assets/_new/icons/svgs/cubes.svg index aeb3d66d1..09b320bc3 100755 --- a/webapp/assets/_new/icons/svgs/cubes.svg +++ b/webapp/assets/_new/icons/svgs/cubes.svg @@ -1,5 +1 @@ - - -cubes - - +cubes diff --git a/webapp/assets/_new/icons/svgs/culture.svg b/webapp/assets/_new/icons/svgs/culture.svg index d63e38cb4..54aeb6f87 100644 --- a/webapp/assets/_new/icons/svgs/culture.svg +++ b/webapp/assets/_new/icons/svgs/culture.svg @@ -1,20 +1 @@ - - - - - - - - + diff --git a/webapp/assets/_new/icons/svgs/energy.svg b/webapp/assets/_new/icons/svgs/energy.svg index 5035a5586..324563323 100644 --- a/webapp/assets/_new/icons/svgs/energy.svg +++ b/webapp/assets/_new/icons/svgs/energy.svg @@ -1,14 +1 @@ - - - + diff --git a/webapp/assets/_new/icons/svgs/finance.svg b/webapp/assets/_new/icons/svgs/finance.svg index 74081bc6a..4273ae836 100644 --- a/webapp/assets/_new/icons/svgs/finance.svg +++ b/webapp/assets/_new/icons/svgs/finance.svg @@ -1,13 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/graduation-cap.svg b/webapp/assets/_new/icons/svgs/graduation-cap.svg index 5d35226d3..a3fad9224 100755 --- a/webapp/assets/_new/icons/svgs/graduation-cap.svg +++ b/webapp/assets/_new/icons/svgs/graduation-cap.svg @@ -1,5 +1 @@ - - -graduation-cap - - +graduation-cap diff --git a/webapp/assets/_new/icons/svgs/hand-pointer.svg b/webapp/assets/_new/icons/svgs/hand-pointer.svg deleted file mode 100644 index e74339724..000000000 --- a/webapp/assets/_new/icons/svgs/hand-pointer.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -hand-pointer-o - - diff --git a/webapp/assets/_new/icons/svgs/health.svg b/webapp/assets/_new/icons/svgs/health.svg index acf50d7c1..4567b74d9 100644 --- a/webapp/assets/_new/icons/svgs/health.svg +++ b/webapp/assets/_new/icons/svgs/health.svg @@ -1,7 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/heart-o.svg b/webapp/assets/_new/icons/svgs/heart-o.svg deleted file mode 100755 index 6605b96ac..000000000 --- a/webapp/assets/_new/icons/svgs/heart-o.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -heart-o - - diff --git a/webapp/assets/_new/icons/svgs/location-arrow.svg b/webapp/assets/_new/icons/svgs/location-arrow.svg index 942a37fa5..bf2fe7b0e 100755 --- a/webapp/assets/_new/icons/svgs/location-arrow.svg +++ b/webapp/assets/_new/icons/svgs/location-arrow.svg @@ -1,5 +1 @@ - - -location-arrow - - +location-arrow diff --git a/webapp/assets/_new/icons/svgs/media.svg b/webapp/assets/_new/icons/svgs/media.svg index d63c98610..8257ffff8 100644 --- a/webapp/assets/_new/icons/svgs/media.svg +++ b/webapp/assets/_new/icons/svgs/media.svg @@ -1,7 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/miscellaneous.svg b/webapp/assets/_new/icons/svgs/miscellaneous.svg index 07f8dbe3f..e180aafb0 100644 --- a/webapp/assets/_new/icons/svgs/miscellaneous.svg +++ b/webapp/assets/_new/icons/svgs/miscellaneous.svg @@ -1,13 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/mobility.svg b/webapp/assets/_new/icons/svgs/mobility.svg index 9e36ec21e..a6236957b 100644 --- a/webapp/assets/_new/icons/svgs/mobility.svg +++ b/webapp/assets/_new/icons/svgs/mobility.svg @@ -1,11 +1 @@ - - - + diff --git a/webapp/assets/_new/icons/svgs/movement.svg b/webapp/assets/_new/icons/svgs/movement.svg index 81052875d..93dd83411 100644 --- a/webapp/assets/_new/icons/svgs/movement.svg +++ b/webapp/assets/_new/icons/svgs/movement.svg @@ -1,19 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/music.svg b/webapp/assets/_new/icons/svgs/music.svg index b84b87800..cdba78fac 100644 --- a/webapp/assets/_new/icons/svgs/music.svg +++ b/webapp/assets/_new/icons/svgs/music.svg @@ -1,5 +1 @@ - - -music - - +music diff --git a/webapp/assets/_new/icons/svgs/nature.svg b/webapp/assets/_new/icons/svgs/nature.svg index d40250af4..1075be693 100644 --- a/webapp/assets/_new/icons/svgs/nature.svg +++ b/webapp/assets/_new/icons/svgs/nature.svg @@ -1,18 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/networking.svg b/webapp/assets/_new/icons/svgs/networking.svg index b8d35da69..57049a7e4 100644 --- a/webapp/assets/_new/icons/svgs/networking.svg +++ b/webapp/assets/_new/icons/svgs/networking.svg @@ -1,22 +1 @@ - - - - - + diff --git a/webapp/assets/_new/icons/svgs/peace.svg b/webapp/assets/_new/icons/svgs/peace.svg index 408601cae..5b055461c 100644 --- a/webapp/assets/_new/icons/svgs/peace.svg +++ b/webapp/assets/_new/icons/svgs/peace.svg @@ -1,8 +1 @@ - - - + diff --git a/webapp/assets/_new/icons/svgs/pie-chart.svg b/webapp/assets/_new/icons/svgs/pie-chart.svg index 1d942226e..6b6eb90a9 100755 --- a/webapp/assets/_new/icons/svgs/pie-chart.svg +++ b/webapp/assets/_new/icons/svgs/pie-chart.svg @@ -1,5 +1 @@ - - -pie-chart - - +pie-chart diff --git a/webapp/assets/_new/icons/svgs/politics.svg b/webapp/assets/_new/icons/svgs/politics.svg index 35322097d..ef439c074 100644 --- a/webapp/assets/_new/icons/svgs/politics.svg +++ b/webapp/assets/_new/icons/svgs/politics.svg @@ -1,12 +1 @@ - - - - - + diff --git a/webapp/assets/_new/icons/svgs/psyche.svg b/webapp/assets/_new/icons/svgs/psyche.svg index 8c285d5ca..64334602d 100644 --- a/webapp/assets/_new/icons/svgs/psyche.svg +++ b/webapp/assets/_new/icons/svgs/psyche.svg @@ -1,8 +1 @@ - - - + diff --git a/webapp/assets/_new/icons/svgs/recycle.svg b/webapp/assets/_new/icons/svgs/recycle.svg index 9bbdb3ad3..adf0deb05 100755 --- a/webapp/assets/_new/icons/svgs/recycle.svg +++ b/webapp/assets/_new/icons/svgs/recycle.svg @@ -1,5 +1 @@ - - -recycle - - +recycle diff --git a/webapp/assets/_new/icons/svgs/rocket.svg b/webapp/assets/_new/icons/svgs/rocket.svg index f83674f15..fd9f12049 100755 --- a/webapp/assets/_new/icons/svgs/rocket.svg +++ b/webapp/assets/_new/icons/svgs/rocket.svg @@ -1,5 +1 @@ - - -rocket - - +rocket diff --git a/webapp/assets/_new/icons/svgs/science.svg b/webapp/assets/_new/icons/svgs/science.svg index 9d3211223..b444fa897 100644 --- a/webapp/assets/_new/icons/svgs/science.svg +++ b/webapp/assets/_new/icons/svgs/science.svg @@ -1,25 +1 @@ - - - - + diff --git a/webapp/assets/_new/icons/svgs/share.svg b/webapp/assets/_new/icons/svgs/share.svg index b2fee7622..b1b4c98bb 100755 --- a/webapp/assets/_new/icons/svgs/share.svg +++ b/webapp/assets/_new/icons/svgs/share.svg @@ -1,5 +1 @@ - - -share - - +share diff --git a/webapp/assets/_new/icons/svgs/shopping-cart.svg b/webapp/assets/_new/icons/svgs/shopping-cart.svg deleted file mode 100755 index 9ca3c5e13..000000000 --- a/webapp/assets/_new/icons/svgs/shopping-cart.svg +++ /dev/null @@ -1,5 +0,0 @@ - - -shopping-cart - - diff --git a/webapp/assets/_new/icons/svgs/spirituality.svg b/webapp/assets/_new/icons/svgs/spirituality.svg index 0c2757071..ec6e36e50 100644 --- a/webapp/assets/_new/icons/svgs/spirituality.svg +++ b/webapp/assets/_new/icons/svgs/spirituality.svg @@ -1,13 +1 @@ - - - - - - - - - + diff --git a/webapp/assets/_new/icons/svgs/video-camera.svg b/webapp/assets/_new/icons/svgs/video-camera.svg index b6a9cc0df..27e1634ad 100755 --- a/webapp/assets/_new/icons/svgs/video-camera.svg +++ b/webapp/assets/_new/icons/svgs/video-camera.svg @@ -1,5 +1 @@ - - -video-camera - - +video-camera diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss index fdf5c4240..9c43a3e65 100644 --- a/webapp/assets/styles/main.scss +++ b/webapp/assets/styles/main.scss @@ -168,7 +168,7 @@ body.dropdown-open { align-content: center; align-items: center; - .base-icon { + .os-icon { padding-right: $space-xx-small; } } diff --git a/webapp/components/ActionButton.spec.js b/webapp/components/ActionButton.spec.js index 3889d26db..9da1ae6ea 100644 --- a/webapp/components/ActionButton.spec.js +++ b/webapp/components/ActionButton.spec.js @@ -1,6 +1,7 @@ import { render, screen, fireEvent } from '@testing-library/vue' import '@testing-library/jest-dom' import ActionButton from './ActionButton.vue' +import { ocelotIcons } from '@ocelot-social/ui/ocelot' const localVue = global.localVue @@ -19,7 +20,7 @@ describe('ActionButton.vue', () => { mocks, localVue, propsData: { - icon: 'heart', + icon: ocelotIcons.heartO, text: 'Click me', count: 7, disabled: isDisabled, @@ -27,13 +28,12 @@ describe('ActionButton.vue', () => { }) } - beforeEach(() => { - wrapper = Wrapper() - }) - describe('when not disabled', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + it('renders', () => { - const wrapper = Wrapper() expect(wrapper.container).toMatchSnapshot() }) @@ -50,15 +50,17 @@ describe('ActionButton.vue', () => { }) describe('when disabled', () => { + beforeEach(() => { + wrapper = Wrapper({ isDisabled: true }) + }) + it('renders', () => { - const wrapper = Wrapper({ isDisabled: true }) expect(wrapper.container).toMatchSnapshot() }) - it('button does not emit click event', async () => { + it('button is disabled', () => { const button = screen.getByRole('button') - await fireEvent.click(button) - expect(wrapper.emitted().click).toEqual([[]]) + expect(button).toBeDisabled() }) }) }) diff --git a/webapp/components/ActionButton.vue b/webapp/components/ActionButton.vue index 20eb021a4..827538cf5 100644 --- a/webapp/components/ActionButton.vue +++ b/webapp/components/ActionButton.vue @@ -10,7 +10,7 @@ @click="click" >
{{ count }}
@@ -18,14 +18,14 @@ diff --git a/webapp/components/Category/index.spec.js b/webapp/components/Category/index.spec.js index 22a85f6f1..3f11bebac 100644 --- a/webapp/components/Category/index.spec.js +++ b/webapp/components/Category/index.spec.js @@ -1,4 +1,6 @@ import { mount } from '@vue/test-utils' +import { OsIcon } from '@ocelot-social/ui' +import { resolveIcon } from '~/utils/iconRegistry' import Category from './index' @@ -20,7 +22,7 @@ describe('Category', () => { describe('given Strings for Icon and Name', () => { beforeEach(() => { - icon = 'mouse-pointer' + icon = 'home' name = 'Peter' }) @@ -28,8 +30,10 @@ describe('Category', () => { expect(Wrapper().text()).toContain('Peter') }) - it('shows base icon', () => { - expect(Wrapper().find('.base-icon').exists()).toBe(true) + it('shows icon', () => { + const wrapper = Wrapper() + expect(wrapper.findComponent(OsIcon).exists()).toBe(true) + expect(wrapper.findComponent(OsIcon).props().icon).toBe(resolveIcon('home')) }) }) }) diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue index ebbaae584..48006370b 100644 --- a/webapp/components/Category/index.vue +++ b/webapp/components/Category/index.vue @@ -1,18 +1,27 @@ @@ -24,7 +33,7 @@ export default { float: right; } - > .base-icon { + > .os-icon { margin-right: $space-xx-small; font-size: $font-size-base; } diff --git a/webapp/components/Chat/AddChatRoomByUserSearch.vue b/webapp/components/Chat/AddChatRoomByUserSearch.vue index 8e71dad13..e59587852 100644 --- a/webapp/components/Chat/AddChatRoomByUserSearch.vue +++ b/webapp/components/Chat/AddChatRoomByUserSearch.vue @@ -12,7 +12,7 @@ @click="closeUserSearch" > @@ -25,6 +25,7 @@ diff --git a/webapp/components/DeleteData/DeleteData.vue b/webapp/components/DeleteData/DeleteData.vue index f77a056df..fb6c83515 100644 --- a/webapp/components/DeleteData/DeleteData.vue +++ b/webapp/components/DeleteData/DeleteData.vue @@ -1,7 +1,7 @@ diff --git a/webapp/components/Editor/MenuLegend.vue b/webapp/components/Editor/MenuLegend.vue index 786b24eb2..e7561aace 100644 --- a/webapp/components/Editor/MenuLegend.vue +++ b/webapp/components/Editor/MenuLegend.vue @@ -11,7 +11,7 @@ @click="toggleMenu" > @@ -28,7 +28,7 @@
{{ item.label }} @@ -42,33 +42,38 @@ diff --git a/webapp/components/Embed/EmbedComponent.vue b/webapp/components/Embed/EmbedComponent.vue index 5e4f7b286..38e7b4a26 100644 --- a/webapp/components/Embed/EmbedComponent.vue +++ b/webapp/components/Embed/EmbedComponent.vue @@ -57,7 +57,7 @@ @click.prevent="removeEmbed()" > @@ -65,6 +65,7 @@ diff --git a/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap b/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap index 8e8a61916..135fd1229 100644 --- a/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap +++ b/webapp/components/Empty/CallToAction/__snapshots__/CtaJoinLeaveGroup.spec.js.snap @@ -11,7 +11,7 @@ exports[`CtaJoinLeaveGroup.vue mount renders 1`] = `

contribution.comment.commenting-disabled.no-group-member.call-to-action -

diff --git a/webapp/components/FilterMenu/CategoriesFilter.vue b/webapp/components/FilterMenu/CategoriesFilter.vue index 9e3e4d0ee..57468f478 100644 --- a/webapp/components/FilterMenu/CategoriesFilter.vue +++ b/webapp/components/FilterMenu/CategoriesFilter.vue @@ -9,7 +9,7 @@ @click="setResetCategories" > {{ $t('filter-menu.all') }} @@ -29,7 +29,7 @@ }" > {{ $t(`contribution.category.name.${category.slug}`) }} @@ -40,6 +40,7 @@ diff --git a/webapp/components/FilterMenu/EventsByFilter.vue b/webapp/components/FilterMenu/EventsByFilter.vue index 5f1309d50..033a9657b 100644 --- a/webapp/components/FilterMenu/EventsByFilter.vue +++ b/webapp/components/FilterMenu/EventsByFilter.vue @@ -11,7 +11,7 @@ data-test="all-button" > {{ $t('filter-menu.ended.all.label') }} @@ -26,7 +26,7 @@ data-test="not-ended-button" > {{ $t('filter-menu.ended.onlyEnded.label') }} @@ -37,6 +37,7 @@ diff --git a/webapp/components/FilterMenu/FilterMenuComponent.vue b/webapp/components/FilterMenu/FilterMenuComponent.vue index 012a87fe4..db2909d49 100644 --- a/webapp/components/FilterMenu/FilterMenuComponent.vue +++ b/webapp/components/FilterMenu/FilterMenuComponent.vue @@ -7,7 +7,7 @@
@@ -28,6 +28,7 @@ diff --git a/webapp/components/InviteButton/InviteButton.vue b/webapp/components/InviteButton/InviteButton.vue index 4633c1c02..2a7f07be2 100644 --- a/webapp/components/InviteButton/InviteButton.vue +++ b/webapp/components/InviteButton/InviteButton.vue @@ -13,7 +13,7 @@ @click.prevent="toggleMenu" > @@ -36,7 +36,8 @@ diff --git a/webapp/components/LocationInfo/__snapshots__/LocationInfo.spec.js.snap b/webapp/components/LocationInfo/__snapshots__/LocationInfo.spec.js.snap index ef5030b3b..1c25e01ff 100644 --- a/webapp/components/LocationInfo/__snapshots__/LocationInfo.spec.js.snap +++ b/webapp/components/LocationInfo/__snapshots__/LocationInfo.spec.js.snap @@ -9,9 +9,18 @@ exports[`LocationInfo distance renders with distance 1`] = ` class="location" > Paris @@ -38,9 +47,18 @@ exports[`LocationInfo distance renders without distance 1`] = ` class="location" > Paris @@ -61,9 +79,18 @@ exports[`LocationInfo size renders in base size 1`] = ` class="location" > Paris @@ -84,9 +111,18 @@ exports[`LocationInfo size renders in small size 1`] = ` class="location" > Paris diff --git a/webapp/components/LocationTeaser/LocationTeaser.vue b/webapp/components/LocationTeaser/LocationTeaser.vue index ede0457ab..a6e64e60a 100644 --- a/webapp/components/LocationTeaser/LocationTeaser.vue +++ b/webapp/components/LocationTeaser/LocationTeaser.vue @@ -1,6 +1,6 @@ diff --git a/webapp/components/LoginButton/LoginButton.vue b/webapp/components/LoginButton/LoginButton.vue index b73a71fa1..5c6c7451d 100644 --- a/webapp/components/LoginButton/LoginButton.vue +++ b/webapp/components/LoginButton/LoginButton.vue @@ -10,14 +10,14 @@ @click.prevent="toggleMenu" > diff --git a/webapp/components/LoginForm/LoginForm.spec.js b/webapp/components/LoginForm/LoginForm.spec.js index e2e2d4530..451dc5e04 100644 --- a/webapp/components/LoginForm/LoginForm.spec.js +++ b/webapp/components/LoginForm/LoginForm.spec.js @@ -1,8 +1,10 @@ import Vue from 'vue' import LoginForm from './LoginForm.vue' +import ShowPassword from '../ShowPassword/ShowPassword.vue' import Styleguide from '@@/' import Vuex from 'vuex' import { mount, createLocalVue } from '@vue/test-utils' +import { ocelotIcons } from '@ocelot-social/ui/ocelot' const localVue = createLocalVue() localVue.use(Vuex) @@ -131,13 +133,13 @@ describe('LoginForm', () => { describe('Click on show password icon, icon change', () => { const wrapper = Wrapper() it('shows eye icon by default', () => { - expect(wrapper.find('span.icon-wrapper').attributes('data-test')).toEqual('eye') + expect(wrapper.findComponent(ShowPassword).props().icon).toBe(ocelotIcons.eye) }) it('shows the slash-eye icon after click', async () => { wrapper.find('span.click-wrapper').trigger('click') await Vue.nextTick() - await expect(wrapper.find('span.icon-wrapper').attributes('data-test')).toEqual('eye-slash') + expect(wrapper.findComponent(ShowPassword).props().icon).toBe(ocelotIcons.eyeSlash) }) }) diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue index 957c17c16..32065aa2c 100644 --- a/webapp/components/LoginForm/LoginForm.vue +++ b/webapp/components/LoginForm/LoginForm.vue @@ -31,7 +31,7 @@ ref="password" :type="showPassword ? 'text' : 'password'" /> - +
{{ $t('login.forgotPassword') }} @@ -44,7 +44,7 @@ name="submit" type="submit" > - + {{ $t('login.login') }}

@@ -66,7 +66,8 @@ import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParams import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch' import Logo from '~/components/Logo/Logo' import ShowPassword from '../ShowPassword/ShowPassword.vue' -import { OsButton } from '@ocelot-social/ui' +import { OsButton, OsIcon } from '@ocelot-social/ui' +import { ocelotIcons } from '@ocelot-social/ui/ocelot' import { mapGetters, mapMutations } from 'vuex' export default { @@ -74,6 +75,7 @@ export default { LocaleSwitch, Logo, OsButton, + OsIcon, PageParamsLink, ShowPassword, }, @@ -92,14 +94,17 @@ export default { pending() { return this.$store.getters['auth/pending'] }, - iconName() { - return this.showPassword ? 'eye-slash' : 'eye' + passwordIcon() { + return this.showPassword ? this.icons.eyeSlash : this.icons.eye }, ...mapGetters({ currentUser: 'auth/user', categories: 'categories/categories', }), }, + created() { + this.icons = ocelotIcons + }, methods: { ...mapMutations({ toggleCategory: 'posts/TOGGLE_CATEGORY', diff --git a/webapp/components/Modal/ConfirmModal.vue b/webapp/components/Modal/ConfirmModal.vue index 13032532b..affc1a516 100644 --- a/webapp/components/Modal/ConfirmModal.vue +++ b/webapp/components/Modal/ConfirmModal.vue @@ -18,7 +18,7 @@ data-test="cancel-button" > {{ $t(modalData.buttons.cancel.textIdent) }} @@ -32,7 +32,7 @@ data-test="confirm-button" > {{ $t(modalData.buttons.confirm.textIdent) }} @@ -41,13 +41,14 @@ - - diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js index 584a971c4..001c9f1cf 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js @@ -1,6 +1,7 @@ import { mount } from '@vue/test-utils' import CounterIcon from './CounterIcon' -import BaseIcon from '../BaseIcon/BaseIcon' +import { OsIcon } from '@ocelot-social/ui' +import { ocelotIcons } from '@ocelot-social/ui/ocelot' const localVue = global.localVue @@ -11,15 +12,15 @@ describe('CounterIcon.vue', () => { return mount(CounterIcon, { propsData, localVue }) } - describe('given a valid icon name and count below 100', () => { + describe('given a valid icon and count below 100', () => { beforeEach(() => { - propsData = { icon: 'comments', count: 42 } + propsData = { icon: ocelotIcons.comments, count: 42 } wrapper = Wrapper() count = wrapper.find('.count') }) it('renders the icon', () => { - expect(wrapper.findComponent(BaseIcon).exists()).toBe(true) + expect(wrapper.findComponent(OsIcon).exists()).toBe(true) }) it('renders the count', () => { @@ -27,15 +28,15 @@ describe('CounterIcon.vue', () => { }) }) - describe('given a valid icon name and count above 100', () => { + describe('given a valid icon and count above 100', () => { beforeEach(() => { - propsData = { icon: 'comments', count: 750 } + propsData = { icon: ocelotIcons.comments, count: 750 } wrapper = Wrapper() count = wrapper.find('.count') }) it('renders the icon', () => { - expect(wrapper.findComponent(BaseIcon).exists()).toBe(true) + expect(wrapper.findComponent(OsIcon).exists()).toBe(true) }) it('renders the capped count with a plus', () => { diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue index 221f0b599..9c3ced1fe 100644 --- a/webapp/components/_new/generic/CounterIcon/CounterIcon.vue +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.vue @@ -1,14 +1,17 @@ diff --git a/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js index 10af4663d..8d94ffab5 100644 --- a/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js +++ b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' import ProfileAvatar from './ProfileAvatar' -import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon' +import { OsIcon } from '@ocelot-social/ui' const localVue = global.localVue @@ -20,7 +20,7 @@ describe('ProfileAvatar', () => { }) it('renders an icon', () => { - expect(wrapper.findComponent(BaseIcon).exists()).toBe(true) + expect(wrapper.findComponent(OsIcon).exists()).toBe(true) }) describe('given a profile', () => { @@ -38,7 +38,7 @@ describe('ProfileAvatar', () => { it('renders an icon', () => { propsData = { profile: { name: null } } wrapper = Wrapper() - expect(wrapper.findComponent(BaseIcon).exists()).toBe(true) + expect(wrapper.findComponent(OsIcon).exists()).toBe(true) }) }) @@ -46,7 +46,7 @@ describe('ProfileAvatar', () => { it('renders an icon', () => { propsData = { profile: { name: 'Anonymous' } } wrapper = Wrapper() - expect(wrapper.findComponent(BaseIcon).exists()).toBe(true) + expect(wrapper.findComponent(OsIcon).exists()).toBe(true) }) }) diff --git a/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue index 67cd6824d..27f6fa8b4 100644 --- a/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue +++ b/webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue @@ -1,8 +1,8 @@