OTTODesign System

Components

Focused dialog

The focused dialog maximizes the users' focus on a task. It is used within dialog siteframe.

Configurator

LiveFocused dialog: header buttons, action bar, background and app mode

Wohin dürfen wir deine Bestellung liefern?

ZurückWeiter
HTML
<div class="oc-background-color-frame" style="width:100%;max-width:600px;margin:0 auto;padding-top:16px"><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen" style="--content-background-color:initial"><p class="oc-copy-100">Wohin dürfen wir deine Bestellung liefern?</p><div slot="actions" style="display:flex;flex-direction:row;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1></div>

Usage

Anatomy

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

LiveAnatomy
HTML
<div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div>

Variants

Action bar

The action bar is optional for the focused dialog. You can customize its content freely. It is most common to put buttons in the action bar. You can use one button or multiple buttons. If you use multiple buttons, you can arrange them side by side or vertically.

The action bar only becomes sticky when the content is larger than the viewport. When there is less content than the viewport, the action bar appears below the content.

No action bar

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Side by side

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Stacked

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

WeiterZurück
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Liveno action bar, action bar arranged side by side and action bar arranged vertical
HTML
<div class="group"><p class="demo-label">No action bar</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div><div class="group"><p class="demo-label">Side by side</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div><div class="group"><p class="demo-label">Stacked</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;flex-direction:column;gap:8px"><oc-button-v1 variant="primary">Weiter</oc-button-v1><oc-button-v1 variant="secondary">Zurück</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div></div>

Little content

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

WeiterZurück
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Much content

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

Du bist nicht zu Hause? Dann gibt der Paketdienst deine Sendung bei einem Nachbarn ab oder hinterlegt sie in der nächsten Filiale.

Große Artikel liefern wir per Spedition. Den Termin stimmen wir vorher telefonisch mit dir ab.

Du kannst deine Lieferadresse bis zum Versand jederzeit in deinem Kundenkonto ändern.

Möchtest du lieber an eine Packstation liefern lassen? Wähle dazu im nächsten Schritt eine andere Adresse.

WeiterZurück
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Livelittle content and much content
HTML
<div class="group"><p class="demo-label">Little content</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;flex-direction:column;gap:8px"><oc-button-v1 variant="primary">Weiter</oc-button-v1><oc-button-v1 variant="secondary">Zurück</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div><div class="group"><p class="demo-label">Much content</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><p class="oc-copy-100 oc-mt-100">Du bist nicht zu Hause? Dann gibt der Paketdienst deine Sendung bei einem Nachbarn ab oder hinterlegt sie in der nächsten Filiale.</p><p class="oc-copy-100 oc-mt-100">Große Artikel liefern wir per Spedition. Den Termin stimmen wir vorher telefonisch mit dir ab.</p><p class="oc-copy-100 oc-mt-100">Du kannst deine Lieferadresse bis zum Versand jederzeit in deinem Kundenkonto ändern.</p><p class="oc-copy-100 oc-mt-100">Möchtest du lieber an eine Packstation liefern lassen? Wähle dazu im nächsten Schritt eine andere Adresse.</p><div slot="actions" style="display:flex;flex-direction:column;gap:8px"><oc-button-v1 variant="primary">Weiter</oc-button-v1><oc-button-v1 variant="secondary">Zurück</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div></div>

Background color

Change the background color of the content to make it look like canvas or frame. Keep in mind that it might look fragmented especially on larger breakpoints.

Canvas background

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

WeiterZurück
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Frame background

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

WeiterZurück
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Liveframe and canvas background
HTML
<div class="group"><p class="demo-label">Canvas background</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;flex-direction:column;gap:8px"><oc-button-v1 variant="primary">Weiter</oc-button-v1><oc-button-v1 variant="secondary">Zurück</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div><div class="group"><p class="demo-label">Frame background</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen" style="--content-background-color:var(--oc-semantic-color-background-frame)"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;flex-direction:column;gap:8px"><oc-button-v1 variant="primary">Weiter</oc-button-v1><oc-button-v1 variant="secondary">Zurück</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div></div>

Behavior

Interaction

Use the back button, whenever a process is visualized using several consecutive focused dialogs.
It leads back to the previous focused dialog using browser-back. On the first focused dialog within a process, no back button is shown.

The close button is always visible to give users an exit option. It leads back to the last page before the focused dialog process started.

The logo always provides an interactive way back to the storefront.

Usually, the main actions are placed inside the action bar. Place primary actions, such as "Weiter," on the right or bottom of the action bar. Place secondary actions, such as "Zurück", on the left or top. You can also place actions within the content if you have no need for sticky actions.

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

123
  1. Logo: jumps to the storefront
  2. Back: previous focused dialog (browser back)
  3. Close: leaves the focused dialog process
Liveinteraction
HTML
<div class="anatomy" style="display:block;margin:0 auto;max-width:360px"><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Schritt 2" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div><span class="anatomy-pin" style="left:20%;top:6%">1</span><span class="anatomy-pin" style="left:4%;top:19.5%">2</span><span class="anatomy-pin" style="left:96%;top:19.5%">3</span></div><ol class="anatomy-key" style="justify-content:center"><li data-n="1">Logo: jumps to the storefront</li><li data-n="2">Back: previous focused dialog (browser back)</li><li data-n="3">Close: leaves the focused dialog process</li></ol>

Fitting

By default, the content uses fill-parent for its width.

The content uses fit-content for its height. If the content in the focused dialog is not large enough to fill the height of the viewport, space will be added between the action bar and the footer.

Width fill-parent, content height fit-content; space is added below the action bar

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Livefit-content height and added space below action bar
HTML
<p class="demo-label" style="text-align:center">Width fill-parent, content height fit-content; space is added below the action bar</p><div class="oc-background-color-frame" style="width:100%;max-width:360px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div>

Placement

Only use the focused dialog as fill-parent within a dialog siteframe.

Responsiveness

Due to the dialog siteframe, the focused dialog has a maximum width of 600px.

That ensures that the frame background is also visible on breakpoint L.
On breakpoint S the headline is left-aligned. From breakpoint M onwards, all headlines are centered.

On larger breakpoints you can also use the grid system to center the layout by only using the middle columns.

fill-parent up to 600px; from breakpoint M logo and headline are centred (narrow the window to see the left-aligned S layout)

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Liveheadline alignment and maximum width
HTML
<p class="demo-label" style="text-align:center">fill-parent up to 600px; from breakpoint M logo and headline are centred (narrow the window to see the left-aligned S layout)</p><div class="oc-background-color-frame" style="width:100%;max-width:600px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;justify-content:center"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p><div slot="actions" style="display:flex;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div>

Breakpoint M and up: content centred on the middle grid columns

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Livecenter-content
HTML
<p class="demo-label" style="text-align:center">Breakpoint M and up: content centred on the middle grid columns</p><div class="oc-background-color-frame" style="width:100%;max-width:600px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;justify-content:center"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Lieferadresse" headline-level="2" show-back-button close-url="#fokus-dialog-geschlossen"><div style="max-width:22rem;margin:0 auto"><p class="oc-copy-100">Wir liefern deine Bestellung an diese Adresse:</p><p class="oc-copy-100 oc-mt-100"><b>Lena Schmidt</b><br>Werner-Otto-Straße 1–7<br>22179 Hamburg</p></div><div slot="actions" style="display:flex;gap:8px;max-width:22rem;margin:0 auto"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div></div>

When a focused dialog is used inside the app, the dialog siteframe header and footer are hidden.
The back button is also automatically hidden, as it would otherwise be redundant with the native back button.

However, if the native top bar is hidden, the back button becomes visible again.

responsiveness_app
focused dialog inside app with and without native bars

Focused dialog vs. sheet

The focused dialogue removes the header and minimizes the footer, taking the user out of the initial context and starting a new phase of their journey. In contrast, the sheet is a small breakout that keeps you within your current context.

Best practices

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

DoUse back buttons for consecutive focused dialogs.

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

CautionBack buttons are not necessary on the first focused dialog in a process.

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

DoAlways show the close button.

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Don'tHide the close button.

Wir liefern deine Bestellung an diese Adresse:

Lena Schmidt
Werner-Otto-Straße 1–7
22179 Hamburg

ZurückWeiter
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

Don'tCall it focussed dialogue 🇬🇧

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Live demo

Schritt 2 von 3

Zahle bequem innerhalb von 30 Tagen nach Lieferung.Du wirst nach der Bestellung zu PayPal weitergeleitet.Visa und MastercardAb 9,90 € im Monat, flexibel anpassbar.
Gesamtsumme729,98 €
ZurückWeiter zur Übersicht
Cookie-EinstellungenAGBDatenschutzImpressumInformation zur BarrierefreiheitProduktsicherheitsrückrufe

Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten

LiveReal OTTO components, rendered by the OTTO component runtime
HTML
<div class="oc-background-color-frame" style="width:100%;max-width:600px;margin:0 auto;border-radius:8px;overflow:hidden;"><div style="padding:16px;display:flex;justify-content:center"><oc-logo-v1 logo="otto" oc-aria-label="OTTO"></oc-logo-v1></div><oc-focused-dialog-v1 headline="Wie möchtest du bezahlen?" headline-level="1" close-url="#fokus-dialog-geschlossen"><div class="demo-stack" style="gap:16px"><p class="oc-copy-75 oc-text-color-secondary">Schritt 2 von 3</p><oc-form-group-v1 orientation="vertical" gap="var(--oc-base-dimension-16)" oc-aria-label="Zahlungsart"><oc-radio-button-v2><input type="radio" name="fd-pay" checked aria-label="oc-auto"><label slot="label">Rechnung</label><span slot="hint">Zahle bequem innerhalb von 30 Tagen nach Lieferung.</span></oc-radio-button-v2><oc-radio-button-v2><input type="radio" name="fd-pay" aria-label="oc-auto"><label slot="label">PayPal</label><span slot="hint">Du wirst nach der Bestellung zu PayPal weitergeleitet.</span></oc-radio-button-v2><oc-radio-button-v2><input type="radio" name="fd-pay" aria-label="oc-auto"><label slot="label">Kreditkarte</label><span slot="hint">Visa und Mastercard</span></oc-radio-button-v2><oc-radio-button-v2><input type="radio" name="fd-pay" aria-label="oc-auto"><label slot="label">Ratenzahlung</label><span slot="hint">Ab 9,90 € im Monat, flexibel anpassbar.</span></oc-radio-button-v2></oc-form-group-v1><oc-divider-v1></oc-divider-v1><div class="demo-row" style="justify-content:space-between"><span class="oc-copy-100">Gesamtsumme</span><span class="oc-headline-100">729,98 €</span></div></div><div slot="actions" style="display:flex;gap:8px"><oc-button-v1 variant="secondary" style="flex:1">Zurück</oc-button-v1><oc-button-v1 variant="primary" style="flex:1">Weiter zur Übersicht</oc-button-v1></div></oc-focused-dialog-v1><div class="demo-stack" style="gap:12px;padding:16px 16px 24px;align-items:center;text-align:center"><div class="demo-row" style="gap:4px 12px;justify-content:center"><oc-link-v2 variant="secondary" size="75" as-button>Cookie-Einstellungen</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>AGB</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Datenschutz</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Impressum</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Information zur Barrierefreiheit</oc-link-v2><oc-link-v2 variant="secondary" size="75" as-button>Produktsicherheitsrückrufe</oc-link-v2></div><p class="oc-copy-50 oc-text-color-secondary">Preisangaben inkl. gesetzl. MwSt. und zzgl. Service- und Versandkosten</p></div></div>

Code

Version Tag Status API
v1 <oc-focused-dialog-v1> Stable, allowed for generation FocusedDialogV1

Overview (v1)

Focused dialog

The Focused dialog component is a customizable dialog box designed for focused user interactions. It allows you to set a headline, define navigation URLs for closing and previous actions, and include custom content and buttons. The appearance of the dialog can be tailored with options for background color and padding.

Default variation
Abbrechen OK, weiter
HTML
<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
<oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>
Configuration

The focused dialog component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the focused dialog component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Focused dialog UX documentation for detailed user experience guidelines.

The focused dialog needs the dialog siteframe.

Special app behavior

When the component is shown in the OTTO app, the title is not sticky. When the feature toggle oc_focused_dialog_v1_hide_prev_in_app is set to true, the "previous" button is hidden in the app. To test this behavior locally, set the app cookie in your browser document.cookie="app=true"; and ensure the feature toggle is set to true. If not, create a local overwrite in the UI.

If you add the <meta>element to the <head> with name apps-focused-layout-top-bar-visibility and content hidden to your markup, the top bar in the OTTO app will be hidden and the dialog's title is always shown with a sticky behavior.

### Advanced URL handling The focused dialog component allows you to define navigation URLs for the
"close" and "previous" actions via its attributes `close-url` and `prev-url`. These URLs are used to
navigate the user to the specified location when the dialog is closed or when the user clicks the
"previous" button. ### Use the current URL for the close or previous action To use the current URL
as the close or previous URL in a dialog, use the data attribute `data-oc-focused-dialog-v1` with
the suffixes `.add-close-url` for the close URL and `.add-prev-url` for the previous URL on the link
element that opens the dialog. > **Note** <br />
> The data attributes work with all components with the `href` attribute. #### Example Let's assume
your `window.location.href` is `https://www.otto.de/service/impressum/` and you have the following
link element with the data attribute `data-oc-focused-dialog-v1.add-close-url`: ```html
<!-- source code -->
<a
  href="https://www.otto.de/customer-identity/login?entryPoint=loginArea"
  data-oc-focused-dialog-v1.add-close-url
  >Open dialog</a
>

When this link is rendered on otto.de, the URL is extended with the GET parameter oc-focused-dialog-v1.close-url and the encoded value of the current URL https://www.otto.de/service/impressum/ resulting in:

<!-- rendered code -->
<a
  href="https://www.otto.de/customer-identity/login?entryPoint=loginArea&oc-focused-dialog-v1.close-url=https%3A%2F%2Fwww.otto.de%2Fservice%2Fimpressum%2F"
  >Open dialog</a
>

Once the link is clicked, the user is navigated to the specified URL with the open dialog. The dialog recognizes the GET parameter and automatically sets the URL of the close and cancel button to https://www.otto.de/service/impressum/. URLs passed in this way override the respective URLs of the next dialog that are set via attributes.

Pass URLs from one dialog to another

In advanced use cases, when for example one dialog opens another, the values of both attributes close-url and prev-url are not automatically transferred to the second dialog.

Let's assume you have two dialogs, dialog1.html and dialog2.html, and you want to pass the close URL of dialog1.html to dialog2.html.

The primary button in dialog1.html that opens dialog2.html:

Open dialog 2
HTML
<oc-button-v1 href="dialog2.html">Open dialog 2</oc-button-v1>

To pass the current close or previous URL of dialog1.html to dialog2.html, add the data attribute data-oc-focused-dialog-v1 with the suffixes .use-close-url for the close URL and .use-prev-url for the previous URL to the primary button in dialog1.html:

<!-- source code -->
<oc-button-v1 data-oc-focused-dialog-v1.use-close-url href="dialog2.html"
  >Open dialog 2</oc-button-v1
>

When the user clicks the button in dialog1.html, the close URL of dialog1.html is passed to dialog2.html and sets the close URL for the close and cancel button in dialog2.html. URLs passed in this way override the respective URL of the next dialog that's set via an attribute.

Pass URLs as query string

In scenarios where you need to pass URLs to the focused dialog component using a query string, use the GET parameters oc-focused-dialog-v1.close-url and oc-focused-dialog-v1.prev-url.

The following URL passes the close URL foo.html to the dialog's close action via the GET parameter oc-focused-dialog-v1.close-url, resulting in the dialog navigating the user to foo.html when closed:

https://www.otto.de/assets-static/components/demo/dialog.html?oc-focused-dialog-v1.close-url=foo.html

URLs passed via HTTP GET parameters override the respective URLs of the new dialog that are set via attributes.

Note

The deprecated URL parameters focussedDialogPrevUrl and focussedDialogCloseUrl are still supported for backward compatibility.

Accessibility

The focused dialog component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Configuration (v1)

Focused dialog configuration

Configure the focused dialog component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Abbrechen OK, weiter
HTML
<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
<oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Focused Dialog v1 API

API: <oc-focused-dialog-v1> (FocusedDialogV1)

The Focused dialog component is a customizable dialog box designed for focused user interactions. It allows you to set a headline, define navigation URLs for closing and previous actions, and include custom content and buttons. The appearance of the dialog can be tailored with options for background color and padding.

Attributes / properties
Attribute Type Default Required Description
headline string "" no Sets the title of the dialog.
headline-level 1 | 2 | 3 | 4 | 5 | 6 undefined no If set, renders the headline content inside a heading tag with the specified level. This has no effect if an external markup is used as headline.

The heading level has no visual effect but provides semantic structure for screen readers. If not set, renders a div instead of a heading tag.
in-app boolean false no Changes the sticky behavior of the dialog's title.
show-back-button boolean false no If set to true, a back button is displayed in the dialog header. This button navigates according to history.back().
close-url string undefined no Sets the URL to navigate to when the dialog is closed. The GET parameter oc-focused-dialog-v1-close-url overrides this URL. Refer to the Advanced URL handling documentation for more information.
prev-url string undefined no Deprecated: The back button should use history.back() instead of navigating to a specific URL to keep user expectations intact. Use the showBackButton prop to enable the back button.

Sets the URL of the previous button. The GET parameter oc-focused-dialog-v1-prev-url overrides this URL. Refer to the Advanced URL handling documentation for more information.
Slots
Slot Required Description
headline yes Overrides the headline set via the headline attribute. Use this slot to pass in a headline with custom markup.
Example:
<div slot='headline'><code>My headline</code></div>
default yes Sets the main content of the dialog.
actions yes Holds the button components to provide interactions to the user.
Example:
<oc-button-v1 slot='actions'>Bestätigen</oc-button-v1>
Events
Event Detail type Description
oc-focused-dialog-close CustomEvent<{ destination: string; }> Closing a focused-dialog via oc-icon-button triggers the oc-focused-dialog-close event.
oc-property-change OcFocusedDialogV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.
CSS custom properties
Custom property Default Description
--component-background-color --oc-semantic-color-frame-background Sets a custom background color for the component through a CSS variable. Note: The preferred way of using colors is via Design Tokens instead of hex values.
--content-background-color white Sets a custom background color for the content area through a CSS variable. Note: The preferred way of using colors is via Design Tokens instead of hex values.
--content-padding 16px Sets padding for the content area.

Variations (v1)

Variations

Listed below are the most common variations of the focused dialog component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Custom headline style

Story: components-focused-dialog-variations--custom-headline-style · tags: components

Variation that uses custom markup within the headline slot to display a headline with custom styling.

Args: close-url=/close.html, headlineSlot=<code slot='headline'>headline with custom markup</code>, defaultSlot=<oc-placeholder-v1></oc-placeholder-v1>

headline with custom markup
HTML
<oc-focused-dialog-v1 close-url="/close.html">
<code slot='headline'>headline with custom markup</code>
<oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>
Default

Story: components-focused-dialog-variations--default · tags: components

The default configuration uses a placeholder in the default slot, two oc-button components in the actions slot and the headline attribute.

Args: close-url=/close.html, headline=Headline, defaultSlot=<oc-placeholder-v1></oc-placeholder-v1>, actionsSlot=(see snippet)

Abbrechen OK, weiter
HTML
<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
<oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Default",
  args: {
    "close-url": "/close.html",
    headline: "Headline",
    defaultSlot: "<oc-placeholder-v1></oc-placeholder-v1>",
    actionsSlot: `<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.prev-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
      </div>`
  }
}
Automatic Close URL

Story: components-focused-dialog-variations--auto-close-url · tags: components

The default configuration uses a placeholder in the default slot, two oc-button components in the actions slot and the headline attribute.

Args: close-url=/close.html, headline=Headline, defaultSlot=<oc-placeholder-v1></oc-placeholder-v1>, actionsSlot=(see snippet)

Abbrechen OK, weiter
HTML
<oc-focused-dialog-v1 close-url="/close.html" headline="Headline">
<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.close-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
<oc-placeholder-v1></oc-placeholder-v1>
</oc-focused-dialog-v1>
Story source (TypeScript, verbatim from Storybook)
{
  name: "Automatic Close URL",
  args: {
    "close-url": "/close.html",
    headline: "Headline",
    defaultSlot: "<oc-placeholder-v1></oc-placeholder-v1>",
    actionsSlot: `<div slot="actions">
        <oc-button-v1 variant="secondary" data-oc-focused-dialog-v1.close-url href="cancel">Abbrechen</oc-button-v1>
        <oc-button-v1 data-oc-focused-dialog-v1.add-close-url href="next-dialog.html">OK, weiter</oc-button-v1>
        <style>
            /* example styles for buttons in actions slot */
            [slot="actions"] {
                display: flex;
                flex-wrap: wrap-reverse;
                gap: 8px;
                > oc-button-v1 {
                    flex: 1;
                    min-width: fit-content;
                }
            }
        </style>
      </div>`
  }
}

Interaction tests (FocusedDialogV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Sticky

Story: components-focused-dialog-interaction-tests--sticky · tags: play-fn

Story source (TypeScript, verbatim from Storybook)
{
  args: {},
  play: async ({
    canvasElement
  }) => {
    const ocFocusedDialogElement = canvasElement.getElementsByTagName("oc-focused-dialog-v1").item(0)!;
    await waitFor("Prev url to be applied", async () => {
      await expect(ocFocusedDialogElement.querySelector("a[href]")!.getAttribute("href")).toBe("foo.html");
    });
  }
}