Skip to content

Commit

Permalink
feat(site-header): add optional CTA - FRONT-2514 (#2196)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emeryro
emeryro authored Sep 21, 2021
1 parent 4aff742 commit 02f9097
Show file tree
Hide file tree
Showing 17 changed files with 1,316 additions and 77 deletions.
108 changes: 100 additions & 8 deletions src/implementations/twig/components/menu/__snapshots__/menu.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,32 @@ exports[`Menu Default renders correctly 1`] = `
Menu
</a>
<div
class="ecl-menu__site-name"
class="ecl-menu__banner"
>
Site name
<div
class="ecl-menu__site-name"
>
Site name
</div>
<a
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-menu__cta"
href=""
>
<span
class="ecl-link__label"
>
CTA link
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</a>
</div>
<section
class="ecl-menu__inner"
Expand Down Expand Up @@ -937,9 +960,32 @@ exports[`Menu Default renders correctly with extra attributes 1`] = `
Menu
</a>
<div
class="ecl-menu__site-name"
class="ecl-menu__banner"
>
Site name
<div
class="ecl-menu__site-name"
>
Site name
</div>
<a
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-menu__cta"
href=""
>
<span
class="ecl-link__label"
>
CTA link
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</a>
</div>
<section
class="ecl-menu__inner"
Expand Down Expand Up @@ -1840,9 +1886,32 @@ exports[`Menu Default renders correctly with extra class names 1`] = `
Menu
</a>
<div
class="ecl-menu__site-name"
class="ecl-menu__banner"
>
Site name
<div
class="ecl-menu__site-name"
>
Site name
</div>
<a
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-menu__cta"
href=""
>
<span
class="ecl-link__label"
>
CTA link
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</a>
</div>
<section
class="ecl-menu__inner"
Expand Down Expand Up @@ -2743,9 +2812,32 @@ exports[`Menu Translated renders correctly 1`] = `
Menu
</a>
<div
class="ecl-menu__site-name"
class="ecl-menu__banner"
>
Nom du site
<div
class="ecl-menu__site-name"
>
Nom du site
</div>
<a
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-menu__cta"
href=""
>
<span
class="ecl-link__label"
>
Lien CTA
</span>
<svg
aria-hidden="true"
class="ecl-icon ecl-icon--fluid ecl-icon--rotate-90 ecl-link__icon"
focusable="false"
>
<use
xlink:href="/icons.svg#corner-arrow"
/>
</svg>
</a>
</div>
<section
class="ecl-menu__inner"
Expand Down
24 changes: 19 additions & 5 deletions src/implementations/twig/components/menu/menu.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

{#
Parameters:
- title: (string) (default: ''): Title
- close: (string) (default: ''): Close button label
- back: (string): (default: ''): Back button label
- "title": (string) (default: ''): Title
- "close": (string) (default: ''): Close button label
- "back": (string): (default: ''): Back button label
- "group": (string) (default: 'group1'): 'group1' or 'group2'
- "icon_path": (string) (default: ''): Path to the icon sprite
- "items": (associative array) (default: {}): The menu items - format: [
Expand All @@ -30,6 +30,7 @@
},
}],
- "site_name": (string) (default: ''): Name of the website (used only on mobile)
- "cta_link": (optional) (default: {}): Call to action link compatible with ECL Link component structure (used only on mobile)
- "menu_link": (string) (default: ''): Href attribute of the menu toggler
- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the nav element
- "extra_attributes" (optional) (array) (default: []) Extra attributes for the nav element
Expand All @@ -48,6 +49,7 @@
{% set _css_class = _css_class ~ ' ' ~ _css_class ~ '--' ~ _group %}
{% set _extra_attributes = '' %}
{% set _site_name = site_name|default('') %}
{% set _cta_link = cta_link|default({}) %}
{% set _icon_path = icon_path|default('') %}

{% if extra_classes is defined and extra_classes is not empty %}
Expand Down Expand Up @@ -87,8 +89,20 @@
} only %}
{{- _title -}}
</a>
{% if _site_name is not empty %}
<div class="ecl-menu__site-name">{{ _site_name }}</div>
{% if _site_name is not empty or _cta_link is not empty %}
<div class="ecl-menu__banner">
{% if _site_name is not empty %}
<div class="ecl-menu__site-name">{{ _site_name }}</div>
{% endif %}
{% if _cta_link is not empty and _cta_link.link is not empty %}
{% include '@ecl/link/link.html.twig' with _cta_link|merge({
link: _cta_link.link|merge({
type: 'cta',
}),
extra_classes: 'ecl-menu__cta',
}) only %}
{% endif %}
</div>
{% endif %}
<section class="ecl-menu__inner" data-ecl-menu-inner>
<header class="ecl-menu__inner-header">
Expand Down
35 changes: 30 additions & 5 deletions src/implementations/twig/components/menu/menu.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import withCode from '@ecl/storybook-addon-code';
import { correctSvgPath } from '@ecl/story-utils';
import getSystem from '@ecl/builder/utils/getSystem';

import enData from '@ecl/specs-component-menu/demo/data--en';
import frData from '@ecl/specs-component-menu/demo/data--fr';
import enSpecs from '@ecl/specs-component-menu/demo/data--en';
import frSpecs from '@ecl/specs-component-menu/demo/data--fr';
import menu from './menu.html.twig';
import notes from './README.md';

const enData = { ...enSpecs };
const frData = { ...frSpecs };
const enCtaLinkClone = { ...enData.cta_link };
const frCtaLinkClone = { ...frData.cta_link };

if (getSystem() === 'eu') {
enData.site_name = '';
frData.site_name = '';
Expand All @@ -16,6 +21,7 @@ if (getSystem() === 'eu') {
const getArgs = (data) => {
return {
site_name: data.site_name,
cta_link: false,
};
};

Expand All @@ -34,12 +40,30 @@ const getArgTypes = () => {
type: 'text',
},
},
cta_link: {
name: 'call to action',
type: { name: 'boolean' },
description: 'Call to action link (optional)',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
category: 'Content',
},
control: {
type: 'boolean',
},
},
};
};

const prepareData = (data, args) => {
const prepareData = (data, demo, args) => {
correctSvgPath(data);
data.site_name = args.site_name;
if (!args.cta_link) {
delete data.cta_link;
} else {
data.cta_link = demo !== 'translated' ? enCtaLinkClone : frCtaLinkClone;
}

return data;
};
Expand All @@ -50,14 +74,15 @@ export default {
parameters: { layout: 'fullscreen' },
};

export const Default = (args) => menu(prepareData(enData, args));
export const Default = (args) => menu(prepareData(enData, 'default', args));

Default.storyName = 'default';
Default.parameters = { notes: { markdown: notes, json: enData } };
Default.args = getArgs(enData);
Default.argTypes = getArgTypes();

export const Translated = (args) => menu(prepareData(frData, args));
export const Translated = (args) =>
menu(prepareData(frData, 'translated', args));

Translated.storyName = 'translated';
Translated.parameters = { notes: { markdown: notes, json: frData } };
Expand Down
3 changes: 2 additions & 1 deletion src/implementations/twig/components/menu/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"access": "public"
},
"dependencies": {
"@ecl/twig-component-icon": "^3.0.3"
"@ecl/twig-component-icon": "^3.0.3",
"@ecl/twig-component-link": "^3.0.3"
},
"devDependencies": {
"@ecl/specs-component-menu": "^3.0.3",
Expand Down
Loading

1 comment on commit 02f9097

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v3--europa-component-library.netlify.app

Please sign in to comment.