@alma/widgets 4.0.7 → 4.0.8

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.
@@ -9,5 +9,6 @@ declare const STATIC_CUSTOMISATION_CLASSES: {
9
9
  notEligibleOption: string;
10
10
  paymentInfo: string;
11
11
  activeOption: string;
12
+ knowMoreAction: string;
12
13
  };
13
14
  export default STATIC_CUSTOMISATION_CLASSES;
@@ -1,5 +1,21 @@
1
- declare function CrossIcon({ color, className, }: {
1
+ import { default as React } from '../../preact/compat';
2
+ /**
3
+ * Cross/Close Icon Component
4
+ *
5
+ * ACCESSIBILITY NOTE (RGAA):
6
+ * This icon is marked as decorative (aria-hidden="true") because it should NOT provide
7
+ * semantic meaning on its own. When used in close buttons, the parent button element
8
+ * MUST provide proper accessible text via aria-label or visible text content.
9
+ *
10
+ * Example of correct usage:
11
+ * <button aria-label="Close modal"><CrossIcon /></button>
12
+ *
13
+ * This differs from informational icons (like payment cards) which need their own
14
+ * accessible labels since they convey meaningful information to users.
15
+ */
16
+ type Props = {
2
17
  color?: string;
3
18
  className?: string;
4
- }): JSX.Element;
19
+ };
20
+ declare function CrossIcon({ color, className }: Props): React.JSX.Element;
5
21
  export default CrossIcon;
@@ -1,6 +1,22 @@
1
1
  import { default as React, SVGAttributes } from '../../preact/compat';
2
+ /**
3
+ * Alma Logo Component
4
+ *
5
+ * ACCESSIBILITY NOTE (RGAA):
6
+ * This logo is marked as decorative (aria-hidden="true") because it typically serves
7
+ * as a visual brand identifier rather than conveying essential information.
8
+ * When used in contexts where the logo needs to be accessible (e.g., main navigation,
9
+ * payment method selection), the parent element MUST provide proper accessible text.
10
+ *
11
+ * Example of correct usage:
12
+ * <button aria-label="Pay with Alma"><AlmaLogo /></button>
13
+ * or
14
+ * <a href="/alma-info" aria-label="Learn more about Alma"><AlmaLogo /></a>
15
+ *
16
+ * This differs from informational icons which convey specific meaning to users.
17
+ */
2
18
  type Props = {
3
19
  color?: string;
4
20
  } & SVGAttributes<SVGElement>;
5
- export declare const AlmaLogo: ({ className, color }: Props) => React.JSX.Element;
21
+ export declare const AlmaLogo: ({ className, color, ...props }: Props) => React.JSX.Element;
6
22
  export {};
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Alma-Logo - Lösung für Ratenzahlung",
3
2
  "accessibility.amex-card.aria-label": "American Express-Karte akzeptiert",
4
3
  "accessibility.animation-control-instructions": "Automatische Animation der Zahlungspläne aktiv. Bewegen Sie den Mauszeiger über oder navigieren Sie mit den Pfeiltasten, um die Animation zu stoppen.",
5
4
  "accessibility.cb-card.aria-label": "Kreditkarte CB akzeptiert",
6
5
  "accessibility.close-button.aria-label": "Fenster schließen",
7
6
  "accessibility.mastercard.aria-label": "Mastercard akzeptiert",
8
- "accessibility.payment-options.radiogroup.aria-label": "Verfügbare Zahlungsoptionen",
7
+ "accessibility.payment-info.section-title": "Informationen über den ausgewählten Zahlungsplan",
8
+ "accessibility.payment-options.listbox.aria-label": "Verfügbare Zahlungsoptionen",
9
9
  "accessibility.payment-plan-button.aria-label": "Wählen Sie den Zahlungsplan {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Zahlungsoption {planDescription}",
11
11
  "accessibility.payment-plans-title": "Verfügbare Zahlungsoptionen",
12
+ "accessibility.payment-plans.section-title": "Verfügbare Zahlungsoptionen",
12
13
  "accessibility.payment-schedule-title": "Ratenplan für die Zahlung",
13
- "accessibility.payment-widget.animation-control-description": "Automatische Animation ist aktiv. Bewegen Sie den Mauszeiger darüber oder verwenden Sie die Pfeile, um die Animation zu stoppen.",
14
- "accessibility.payment-widget.open-button.aria-label": "Alma Zahlungsoptionen öffnen",
14
+ "accessibility.payment-widget.main.aria-label": "Auswahl der Zahlungsoptionen Alma",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Ausgewählter Plan: {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Schnelle Navigation",
17
18
  "accessibility.visa-card.aria-label": "Visa-Karte wird akzeptiert",
@@ -49,9 +50,9 @@ declare const _default: {
49
50
  "payment-plan-strings.pay-now": "Zahlen Sie jetzt {totalAmount}",
50
51
  "payment-plan-strings.pay.deferred.button": "Aufgeschobenes Bezahlen: {deferredTime}",
51
52
  "payment-plan-strings.pay.now.button": "Jetzt bezahlen",
52
- "skip-links.payment-info": "Gehen Sie zu den Zahlungsinformationen",
53
- "skip-links.payment-plans": "Gehen Sie zu den Zahlungsoptionen",
54
- "skip-links.payment-schedule": "Gehen Sie zum Zahlungskalender"
53
+ "skip-links.payment-info": "Zu den Zahlungsinformationen gehen",
54
+ "skip-links.payment-plans": "Zu den Zahlungsoptionen gehen",
55
+ "skip-links.payment-schedule": "Zum Zahlungskalender gehen"
55
56
  }
56
57
  ;
57
58
 
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Alma logo - Multi-installment payment solution",
3
2
  "accessibility.amex-card.aria-label": "American Express card accepted",
4
3
  "accessibility.animation-control-instructions": "Automatic animation of payment plans active. Hover or navigate with the arrows to stop animation.",
5
4
  "accessibility.cb-card.aria-label": "CB credit card accepted",
6
5
  "accessibility.close-button.aria-label": "Close window",
7
6
  "accessibility.mastercard.aria-label": "Mastercard accepted",
8
- "accessibility.payment-options.radiogroup.aria-label": "Available payment options",
7
+ "accessibility.payment-info.section-title": "Information on the selected payment plan",
8
+ "accessibility.payment-options.listbox.aria-label": "Available payment options",
9
9
  "accessibility.payment-plan-button.aria-label": "Select payment plan {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Payment option {planDescription}",
11
11
  "accessibility.payment-plans-title": "Available payment options",
12
+ "accessibility.payment-plans.section-title": "Available payment options",
12
13
  "accessibility.payment-schedule-title": "Payment schedule",
13
- "accessibility.payment-widget.animation-control-description": "Animation automatique active. Survolez ou utilisez les flèches pour arrêter l'animation.",
14
- "accessibility.payment-widget.open-button.aria-label": "Open Alma payment options",
14
+ "accessibility.payment-widget.main.aria-label": "Selecting Alma payment options",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Selected plan: {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Quick navigation",
17
18
  "accessibility.visa-card.aria-label": "Visa card accepted",
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Logotipo Alma - Solución de pago multipago",
3
2
  "accessibility.amex-card.aria-label": "Se acepta la tarjeta American Express",
4
3
  "accessibility.animation-control-instructions": "La animación automática de los planes de pago está activa. Pase el ratón por encima o desplácese con las flechas para detener la animación.",
5
4
  "accessibility.cb-card.aria-label": "Se acepta tarjeta de crédito CB",
6
5
  "accessibility.close-button.aria-label": "Cerrar ventana",
7
6
  "accessibility.mastercard.aria-label": "Se acepta Mastercard",
8
- "accessibility.payment-options.radiogroup.aria-label": "Formas de pago disponibles",
7
+ "accessibility.payment-info.section-title": "Información sobre el plan de pago seleccionado",
8
+ "accessibility.payment-options.listbox.aria-label": "Formas de pago disponibles",
9
9
  "accessibility.payment-plan-button.aria-label": "Seleccione el plan de pago {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Forma de pago {planDescription}",
11
11
  "accessibility.payment-plans-title": "Formas de pago disponibles",
12
+ "accessibility.payment-plans.section-title": "Formas de pago disponibles",
12
13
  "accessibility.payment-schedule-title": "Calendario de pagos",
13
- "accessibility.payment-widget.animation-control-description": "Animación automática activa. Pase el ratón por encima o utilice las flechas para detener la animación.",
14
- "accessibility.payment-widget.open-button.aria-label": "Opciones de pago Open Alma",
14
+ "accessibility.payment-widget.main.aria-label": "Selección de opciones de pago Alma",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Plan seleccionado: {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Navegación rápida",
17
18
  "accessibility.visa-card.aria-label": "Se acepta tarjeta Visa",
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Logo Alma - Solution de paiement en plusieurs fois",
3
2
  "accessibility.amex-card.aria-label": "Carte American Express acceptée",
4
3
  "accessibility.animation-control-instructions": "Animation automatique des plans de paiement active. Survolez ou naviguez avec les flèches pour arrêter l'animation.",
5
4
  "accessibility.cb-card.aria-label": "Carte Bancaire CB acceptée",
6
5
  "accessibility.close-button.aria-label": "Fermer la fenêtre",
7
6
  "accessibility.mastercard.aria-label": "Carte Mastercard acceptée",
8
- "accessibility.payment-options.radiogroup.aria-label": "Options de paiement disponibles",
7
+ "accessibility.payment-info.section-title": "Informations sur le plan de paiement sélectionné",
8
+ "accessibility.payment-options.listbox.aria-label": "Options de paiement disponibles",
9
9
  "accessibility.payment-plan-button.aria-label": "Sélectionner le plan de paiement {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Option de paiement {planDescription}",
11
11
  "accessibility.payment-plans-title": "Options de paiement disponibles",
12
+ "accessibility.payment-plans.section-title": "Options de paiement disponibles",
12
13
  "accessibility.payment-schedule-title": "Calendrier de paiement",
13
- "accessibility.payment-widget.animation-control-description": "Animation automatique active. Survolez ou utilisez les flèches pour arrêter l'animation.",
14
- "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma",
14
+ "accessibility.payment-widget.main.aria-label": "Sélection des options de paiement Alma",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Plan sélectionné : {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Navigation rapide",
17
18
  "accessibility.visa-card.aria-label": "Carte Visa acceptée",
@@ -49,9 +50,9 @@ declare const _default: {
49
50
  "payment-plan-strings.pay-now": "Payer maintenant {totalAmount}",
50
51
  "payment-plan-strings.pay.deferred.button": "Payer en différé : {deferredTime}",
51
52
  "payment-plan-strings.pay.now.button": "Payer maintenant",
52
- "skip-links.payment-info": "Allez aux informations de paiement",
53
- "skip-links.payment-plans": "Allez aux options de paiements",
54
- "skip-links.payment-schedule": "Allez au calendrier de paiements"
53
+ "skip-links.payment-info": "Aller aux informations de paiement",
54
+ "skip-links.payment-plans": "Aller aux options de paiement",
55
+ "skip-links.payment-schedule": "Aller au calendrier de paiement"
55
56
  }
56
57
  ;
57
58
 
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Logo Alma - Soluzione di pagamento multi-pagamento",
3
2
  "accessibility.amex-card.aria-label": "Carta American Express accettata",
4
3
  "accessibility.animation-control-instructions": "L'animazione automatica dei piani di pagamento è attiva. Passare il mouse sopra o navigare con le frecce per fermare l'animazione.",
5
4
  "accessibility.cb-card.aria-label": "Carta di credito CB accettata",
6
5
  "accessibility.close-button.aria-label": "Chiudere la finestra",
7
6
  "accessibility.mastercard.aria-label": "Mastercard accettata",
8
- "accessibility.payment-options.radiogroup.aria-label": "Opzioni di pagamento disponibili",
7
+ "accessibility.payment-info.section-title": "Informazioni sul piano di pagamento selezionato",
8
+ "accessibility.payment-options.listbox.aria-label": "Opzioni di pagamento disponibili",
9
9
  "accessibility.payment-plan-button.aria-label": "Selezionare il piano di pagamento {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Opzione di pagamento {planDescription}",
11
11
  "accessibility.payment-plans-title": "Opzioni di pagamento disponibili",
12
+ "accessibility.payment-plans.section-title": "Opzioni di pagamento disponibili",
12
13
  "accessibility.payment-schedule-title": "Piano di pagamento",
13
- "accessibility.payment-widget.animation-control-description": "Animazione automatica attiva. Passare il mouse sopra o usare le frecce per fermare l'animazione.",
14
- "accessibility.payment-widget.open-button.aria-label": "Opzioni di pagamento Alma aperte",
14
+ "accessibility.payment-widget.main.aria-label": "Selezione delle opzioni di pagamento Alma",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Piano selezionato: {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Navigazione rapida",
17
18
  "accessibility.visa-card.aria-label": "Carta Visa accettata",
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Alma-logo - Multi-betalingoplossing",
3
2
  "accessibility.amex-card.aria-label": "American Express kaart geaccepteerd",
4
3
  "accessibility.animation-control-instructions": "Automatische animatie van betalingsplannen is actief. Beweeg erover of navigeer met de pijltjes om de animatie te stoppen.",
5
4
  "accessibility.cb-card.aria-label": "CB creditcard geaccepteerd",
6
5
  "accessibility.close-button.aria-label": "Venster sluiten",
7
6
  "accessibility.mastercard.aria-label": "Mastercard geaccepteerd",
8
- "accessibility.payment-options.radiogroup.aria-label": "Betalingsopties beschikbaar",
7
+ "accessibility.payment-info.section-title": "Informatie over het geselecteerde betalingsplan",
8
+ "accessibility.payment-options.listbox.aria-label": "Betalingsopties beschikbaar",
9
9
  "accessibility.payment-plan-button.aria-label": "Selecteer betalingsplan {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Betalingsoptie {planDescription}",
11
11
  "accessibility.payment-plans-title": "Betalingsopties beschikbaar",
12
+ "accessibility.payment-plans.section-title": "Betalingsopties beschikbaar",
12
13
  "accessibility.payment-schedule-title": "Betalingsschema",
13
- "accessibility.payment-widget.animation-control-description": "Automatische animatie actief. Beweeg erover of gebruik de pijltjes om de animatie te stoppen.",
14
- "accessibility.payment-widget.open-button.aria-label": "Alma betalingsopties openen",
14
+ "accessibility.payment-widget.main.aria-label": "Alma betalingsopties selecteren",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Gekozen plan: {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Snelle navigatie",
17
18
  "accessibility.visa-card.aria-label": "Visa-kaart geaccepteerd",
@@ -1,17 +1,18 @@
1
1
  declare const _default: {
2
- "accessibility.alma-logo.aria-label": "Logótipo Alma - Solução de pagamento multi-instalação",
3
2
  "accessibility.amex-card.aria-label": "Aceita cartão American Express",
4
3
  "accessibility.animation-control-instructions": "A animação automática dos planos de pagamento está ativa. Passe o rato por cima ou navegue com as setas para parar a animação.",
5
4
  "accessibility.cb-card.aria-label": "Aceita-se cartão de crédito CB",
6
5
  "accessibility.close-button.aria-label": "Fechar a janela",
7
6
  "accessibility.mastercard.aria-label": "Aceita Mastercard",
8
- "accessibility.payment-options.radiogroup.aria-label": "Opções de pagamento disponíveis",
7
+ "accessibility.payment-info.section-title": "Informações sobre o plano de pagamento selecionado",
8
+ "accessibility.payment-options.listbox.aria-label": "Opções de pagamento disponíveis",
9
9
  "accessibility.payment-plan-button.aria-label": "Selecionar plano de pagamento {planName}",
10
10
  "accessibility.payment-plan.option.aria-label": "Opção de pagamento {planDescription}",
11
11
  "accessibility.payment-plans-title": "Opções de pagamento disponíveis",
12
+ "accessibility.payment-plans.section-title": "Opções de pagamento disponíveis",
12
13
  "accessibility.payment-schedule-title": "Calendário de pagamento",
13
- "accessibility.payment-widget.animation-control-description": "Animação automática ativa. Passe o rato por cima ou utilize as setas para parar a animação.",
14
- "accessibility.payment-widget.open-button.aria-label": "Opções de pagamento da Open Alma",
14
+ "accessibility.payment-widget.main.aria-label": "Seleção das opções de pagamento da Alma",
15
+ "accessibility.payment-widget.open-button.aria-label": "Ouvrir les options de paiement Alma pour en savoir plus",
15
16
  "accessibility.plan-selection-changed": "Plano selecionado: {planDescription}",
16
17
  "accessibility.skip-links.navigation.aria-label": "Navegação rápida",
17
18
  "accessibility.visa-card.aria-label": "Aceita cartão Visa",