diff --git a/app/components/icon.gjs b/app/components/icon.gjs index 2c53914..32589f0 100644 --- a/app/components/icon.gjs +++ b/app/components/icon.gjs @@ -2,6 +2,16 @@ import Component from '@glimmer/component'; import { htmlSafe } from '@ember/template'; import { getIcon, isIconFilled } from '../utils/icons'; +function formatDimension(dim) { + if (typeof dim === 'number') { + return `${dim}px`; + } + if (typeof dim === 'string' && /^\d+(\.\d+)?$/.test(dim.trim())) { + return `${dim.trim()}px`; + } + return dim; +} + export default class IconComponent extends Component { get svg() { return getIcon(this.args.name); @@ -11,13 +21,21 @@ export default class IconComponent extends Component { return this.args.size || 16; } + get width() { + return this.args.width !== undefined ? this.args.width : this.size; + } + + get height() { + return this.args.height !== undefined ? this.args.height : this.size; + } + get color() { return this.args.color || '#898989'; } get style() { return htmlSafe( - `width:${this.size}px;height:${this.size}px;color:${this.color}` + `width:${formatDimension(this.width)};height:${formatDimension(this.height)};color:${this.color}` ); } @@ -35,6 +53,7 @@ export default class IconComponent extends Component { class="icon {{if this.isFilled 'icon-filled'}}" style={{this.style}} title={{this.title}} + ...attributes > {{htmlSafe this.svg}} diff --git a/app/components/place-payment-methods.gjs b/app/components/place-payment-methods.gjs index b873aea..dc0ddd2 100644 --- a/app/components/place-payment-methods.gjs +++ b/app/components/place-payment-methods.gjs @@ -1,90 +1,92 @@ import Component from '@glimmer/component'; import Icon from './icon'; import { parsePaymentMethods } from '../utils/payment'; -import { eq } from 'ember-truth-helpers'; +import tooltip from '../modifiers/tooltip'; export default class PlacePaymentMethods extends Component { get payment() { return parsePaymentMethods(this.args.tags); } - get showCash() { - return this.payment.cash !== null; - } - - get showCards() { - return this.payment.cards !== null; - } - - get showBitcoin() { - return this.payment.bitcoin.status !== null; - } - - get cashTitle() { - return this.payment.cash === 'accepted' ? 'Cash accepted' : 'No cash'; - } - - get cardsTitle() { - return this.payment.cards === 'accepted' ? 'Cards accepted' : 'No cards'; - } - - get bitcoinTitle() { - if (this.payment.bitcoin.status === 'denied') { - return 'No Bitcoin'; + get methods() { + const list = []; + if (this.payment.cash !== null) { + const isDenied = this.payment.cash === 'denied'; + list.push({ + id: 'cash', + isDenied, + icon: 'banknote', + color: 'currentColor', + description: isDenied ? 'No cash' : 'Cash accepted', + hasBadge: false, + }); } - if (this.payment.bitcoin.lightning) { - return 'Bitcoin (Lightning)'; + + if (this.payment.cards !== null) { + const isDenied = this.payment.cards === 'denied'; + list.push({ + id: 'cards', + isDenied, + icon: 'payment-card', + color: 'currentColor', + description: isDenied ? 'No cards' : 'Cards accepted', + hasBadge: false, + }); } - return 'Bitcoin (On-chain)'; + + if (this.payment.bitcoin.status !== null) { + const isDenied = this.payment.bitcoin.status === 'denied'; + let description = 'No Bitcoin'; + if (!isDenied) { + description = this.payment.bitcoin.lightning + ? 'Bitcoin (Lightning)' + : 'Bitcoin (On-chain)'; + } + list.push({ + id: 'bitcoin', + isDenied, + icon: 'bitcoin', + width: 17, + height: 22, + color: 'currentColor', + description, + hasBadge: !isDenied && this.payment.bitcoin.lightning, + }); + } + + return list; } diff --git a/app/icons/bitcoin.svg b/app/icons/bitcoin.svg index 4fa6f13..f3bfc86 100644 --- a/app/icons/bitcoin.svg +++ b/app/icons/bitcoin.svg @@ -1,3 +1,3 @@ - - + + diff --git a/app/styles/app.css b/app/styles/app.css index 28b2077..6de37d3 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -1190,8 +1190,9 @@ abbr[title] { display: inline-flex; align-items: center; justify-content: center; - width: 24px; height: 24px; + border-radius: 4px; + outline-offset: 2px; color: var(--secondary-text-color); } @@ -1203,27 +1204,40 @@ abbr[title] { content: ''; position: absolute; top: 50%; - left: -2px; - right: -2px; + left: 50%; + width: 28px; height: 2px; background-color: var(--danger-color); - transform: rotate(-45deg); + transform: translate(-50%, -50%) rotate(-45deg); pointer-events: none; border-radius: 1px; } .payment-method-badge { position: absolute; - bottom: -3px; - right: -5px; - display: inline-flex; + bottom: -2px; + right: -6px; + display: flex; align-items: center; justify-content: center; - background: var(--primary-background-color); + width: 13px; + height: 13px; border-radius: 50%; - width: 14px; - height: 14px; - box-shadow: 0 1px 2px rgb(0 0 0 / 15%); + background: var(--default-list-color); + overflow: hidden; + pointer-events: none; + font-size: 0; + line-height: 0; +} + +.payment-method-badge .icon { + display: flex; + align-items: center; + justify-content: center; +} + +.payment-method-badge .icon svg { + display: block; } .btn { diff --git a/tests/integration/components/icon-test.gjs b/tests/integration/components/icon-test.gjs new file mode 100644 index 0000000..6ba39cb --- /dev/null +++ b/tests/integration/components/icon-test.gjs @@ -0,0 +1,61 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'marco/tests/helpers'; +import { render } from '@ember/test-helpers'; +import Icon from 'marco/components/icon'; + +module('Integration | Component | icon', function (hooks) { + setupRenderingTest(hooks); + + test('it renders default 16px square dimensions', async function (assert) { + await render(); + + assert.dom('.icon').exists(); + assert.dom('.icon').hasAttribute('style', /width:16px;height:16px;/); + }); + + test('it renders custom square size with @size', async function (assert) { + await render(); + + assert.dom('.icon').hasAttribute('style', /width:24px;height:24px;/); + }); + + test('it supports custom @width and @height', async function (assert) { + await render( + + ); + + assert.dom('.icon').hasAttribute('style', /width:17px;height:22px;/); + }); + + test('it allows @width to override while @height falls back to @size', async function (assert) { + await render( + + ); + + assert.dom('.icon').hasAttribute('style', /width:17px;height:22px;/); + }); + + test('it allows @height to override while @width falls back to @size', async function (assert) { + await render( + + ); + + assert.dom('.icon').hasAttribute('style', /width:18px;height:22px;/); + }); + + test('it supports explicit string units for width and height', async function (assert) { + await render( + + ); + + assert.dom('.icon').hasAttribute('style', /width:100%;height:2rem;/); + }); + + test('it splats HTML attributes to the icon element', async function (assert) { + await render( + + ); + + assert.dom('[data-test-custom-icon="true"]').exists(); + }); +}); diff --git a/tests/integration/components/place-details-test.gjs b/tests/integration/components/place-details-test.gjs index e047ca9..5b28284 100644 --- a/tests/integration/components/place-details-test.gjs +++ b/tests/integration/components/place-details-test.gjs @@ -432,6 +432,15 @@ module('Integration | Component | place-details', function (hooks) { assert.dom('[data-test-payment-method="cards"]').hasClass('is-denied'); assert.dom('[data-test-payment-method="bitcoin"]').exists(); assert.dom('[data-test-payment-badge="lightning"]').exists(); + + const methodNames = Array.from( + this.element.querySelectorAll('[data-test-payment-method]') + ).map((el) => el.getAttribute('data-test-payment-method')); + assert.deepEqual( + methodNames, + ['cash', 'cards', 'bitcoin'], + 'renders in stable order: cash, cards, bitcoin' + ); }); test('it does not render payment methods when no payment tags are present on place', async function (assert) { diff --git a/tests/integration/components/place-payment-methods-test.gjs b/tests/integration/components/place-payment-methods-test.gjs index d224cb0..913b96d 100644 --- a/tests/integration/components/place-payment-methods-test.gjs +++ b/tests/integration/components/place-payment-methods-test.gjs @@ -17,7 +17,7 @@ module('Integration | Component | place-payment-methods', function (hooks) { assert.dom('.place-payment-methods').doesNotExist(); }); - test('it renders cash and card icons when accepted', async function (assert) { + test('it renders cash and card icons when accepted with aria-description and no title attribute', async function (assert) { const tags = { 'payment:cash': 'yes', 'payment:cards': 'yes', @@ -30,10 +30,28 @@ module('Integration | Component | place-payment-methods', function (hooks) { assert .dom('[data-test-payment-method="cash"]') .doesNotHaveClass('is-denied'); + assert + .dom('[data-test-payment-method="cash"]') + .doesNotHaveAttribute('title'); + assert + .dom('[data-test-payment-method="cash"]') + .hasAttribute('aria-description', 'Cash accepted'); + assert + .dom('[data-test-payment-method="cash"] > .icon') + .hasAttribute('style', /width:22px;height:22px;color:currentColor/); assert.dom('[data-test-payment-method="cards"]').exists(); assert .dom('[data-test-payment-method="cards"]') .doesNotHaveClass('is-denied'); + assert + .dom('[data-test-payment-method="cards"]') + .doesNotHaveAttribute('title'); + assert + .dom('[data-test-payment-method="cards"]') + .hasAttribute('aria-description', 'Cards accepted'); + assert + .dom('[data-test-payment-method="cards"] > .icon') + .hasAttribute('style', /width:22px;height:22px;color:currentColor/); assert.dom('[data-test-payment-method="bitcoin"]').doesNotExist(); }); @@ -95,7 +113,28 @@ module('Integration | Component | place-payment-methods', function (hooks) { assert .dom('[data-test-payment-method="bitcoin"]') .doesNotHaveClass('is-denied'); + assert + .dom('[data-test-payment-method="bitcoin"]') + .doesNotHaveAttribute('title'); + assert + .dom('[data-test-payment-method="bitcoin"]') + .hasAttribute('aria-description', 'Bitcoin (Lightning)'); + assert + .dom('[data-test-payment-method="bitcoin"] > .icon') + .hasAttribute('style', /width:17px;height:22px;color:currentColor/); assert.dom('[data-test-payment-badge="lightning"]').exists(); + assert + .dom('[data-test-payment-badge="lightning"] .icon') + .hasClass('icon-filled'); + assert + .dom('[data-test-payment-badge="lightning"] .icon') + .hasAttribute('style', /width:13px/); + assert + .dom('[data-test-payment-badge="lightning"] .icon') + .hasAttribute('style', /color:#fff/); + assert + .dom('[data-test-payment-badge="lightning"]') + .doesNotHaveAttribute('title'); }); test('it renders bitcoin with strike-through when explicitly denied', async function (assert) { @@ -107,5 +146,32 @@ module('Integration | Component | place-payment-methods', function (hooks) { assert.dom('[data-test-payment-method="bitcoin"]').exists(); assert.dom('[data-test-payment-method="bitcoin"]').hasClass('is-denied'); + assert + .dom('[data-test-payment-method="bitcoin"]') + .doesNotHaveAttribute('title'); + assert + .dom('[data-test-payment-method="bitcoin"]') + .hasAttribute('aria-description', 'No Bitcoin'); + }); + + test('it preserves stable order (cash, cards, bitcoin) regardless of whether denied or accepted', async function (assert) { + const tags = { + 'payment:cash': 'no', + 'payment:cards': 'yes', + 'currency:XBT': 'yes', + 'payment:lightning': 'yes', + }; + + await render(); + + const methods = Array.from( + this.element.querySelectorAll('[data-test-payment-method]') + ).map((el) => el.getAttribute('data-test-payment-method')); + + assert.deepEqual( + methods, + ['cash', 'cards', 'bitcoin'], + 'icons stay in fixed positions: cash, cards, bitcoin' + ); }); });