Skip to content

Commit

Permalink
feat(site-header): add message box - FRONT-3760 (#2715)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emeryro
emeryro committed Feb 1, 2023
1 parent 6af9323 commit 789a21d
Show file tree
Hide file tree
Showing 10 changed files with 431 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/implementations/twig/components/site-header/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ npm install --save @ecl/twig-component-site-header
- "label" (string) Label of the element
- "href" (string) Link of the element
- **"search_form"** (associative array) (default: predefined structure): ECL Search Form component structure
- **"message"** (object) (default: {}): Optional message compatible with ECL Message component structure
- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
- "name" (string) Attribute name, eg. 'data-test'
Expand Down
320 changes: 320 additions & 0 deletions src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -974,6 +974,70 @@ exports[`Site Header EC renders correctly 1`] = `
</div>
</div>
</div>
<div
class="ecl-site-header__message"
>
<div
class="ecl-container"
>
<div
class="ecl-message ecl-message--info"
data-ecl-auto-init="Message"
data-ecl-message=""
role="alert"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-message__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#information"
/>
</svg>
<div
class="ecl-message__content"
>
<button
class="ecl-button ecl-button--ghost ecl-message__close"
data-ecl-message-close=""
type="button"
>
<span
class="ecl-button__container"
>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Close
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#close-filled"
/>
</svg>
</span>
</button>
<div
class="ecl-message__title"
>
Information message
</div>
<div
class="ecl-message__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
</div>
</div>
</div>
</div>
<div
class="ecl-site-header__banner-top"
>
Expand Down Expand Up @@ -2030,6 +2094,70 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
</div>
</div>
</div>
<div
class="ecl-site-header__message"
>
<div
class="ecl-container"
>
<div
class="ecl-message ecl-message--info"
data-ecl-auto-init="Message"
data-ecl-message=""
role="alert"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-message__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#information"
/>
</svg>
<div
class="ecl-message__content"
>
<button
class="ecl-button ecl-button--ghost ecl-message__close"
data-ecl-message-close=""
type="button"
>
<span
class="ecl-button__container"
>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Close
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#close-filled"
/>
</svg>
</span>
</button>
<div
class="ecl-message__title"
>
Information message
</div>
<div
class="ecl-message__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
</div>
</div>
</div>
</div>
<div
class="ecl-site-header__banner-top"
>
Expand Down Expand Up @@ -3056,6 +3184,70 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
</div>
</div>
</div>
<div
class="ecl-site-header__message"
>
<div
class="ecl-container"
>
<div
class="ecl-message ecl-message--info"
data-ecl-auto-init="Message"
data-ecl-message=""
role="alert"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-message__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#information"
/>
</svg>
<div
class="ecl-message__content"
>
<button
class="ecl-button ecl-button--ghost ecl-message__close"
data-ecl-message-close=""
type="button"
>
<span
class="ecl-button__container"
>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Close
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#close-filled"
/>
</svg>
</span>
</button>
<div
class="ecl-message__title"
>
Information message
</div>
<div
class="ecl-message__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
</div>
</div>
</div>
</div>
<div
class="ecl-site-header__banner-top"
>
Expand Down Expand Up @@ -4080,6 +4272,70 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
</div>
</div>
</div>
<div
class="ecl-site-header__message"
>
<div
class="ecl-container"
>
<div
class="ecl-message ecl-message--info"
data-ecl-auto-init="Message"
data-ecl-message=""
role="alert"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-message__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#information"
/>
</svg>
<div
class="ecl-message__content"
>
<button
class="ecl-button ecl-button--ghost ecl-message__close"
data-ecl-message-close=""
type="button"
>
<span
class="ecl-button__container"
>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Close
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#close-filled"
/>
</svg>
</span>
</button>
<div
class="ecl-message__title"
>
Information message
</div>
<div
class="ecl-message__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
</div>
</div>
</div>
</div>
<div
class="ecl-site-header__banner-top"
>
Expand Down Expand Up @@ -5110,6 +5366,70 @@ exports[`Site Header EU renders correctly 1`] = `
</div>
</div>
</div>
<div
class="ecl-site-header__message"
>
<div
class="ecl-container"
>
<div
class="ecl-message ecl-message--info"
data-ecl-auto-init="Message"
data-ecl-message=""
role="alert"
>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--l ecl-message__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#information"
/>
</svg>
<div
class="ecl-message__content"
>
<button
class="ecl-button ecl-button--ghost ecl-message__close"
data-ecl-message-close=""
type="button"
>
<span
class="ecl-button__container"
>
<span
class="ecl-button__label"
data-ecl-label="true"
>
Close
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
data-ecl-icon=""
focusable="false"
>
<use
xlink:href="/icons.svg#close-filled"
/>
</svg>
</span>
</button>
<div
class="ecl-message__title"
>
Information message
</div>
<div
class="ecl-message__description"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
</div>
</div>
</div>
</div>
</div>
<div
class="ecl-site-header__banner"
>
Expand Down
Loading

0 comments on commit 789a21d

Please sign in to comment.