feat(site-header-harmonised): Adding component - TWIG-80

src/ec/packages/ec-component-site-header-harmonised/.npmignore

@@ -0,0 +1,5 @@
+__snapshots__
+demo
+*.story.js
+*.test.js
+**/*.md

src/ec/packages/ec-component-site-header-harmonised/README.md

@@ -0,0 +1,116 @@
+# ECL Twig - EC Site Header Harmonised component
+
+npm package: `@ecl-twig/ec-component-site-header-harmonised`
+
+```shell
+npm install --save @ecl-twig/ec-component-site-header-harmonised
+```
+
+## Site Header Harmonised
+
+### Parameters
+
+- "logged" (boolean) (default: false): Whether the user is logged in or not
+- "menu" (boolean) (default: false): Whether the component includes a menu or not
+- "menu_label" (string) (default: false): The menu toggler label
+- "banner" (string): The site name
+- "banner_top" (string): Class name
+- "icon_file_path": (string) (default: ''): file containing the svg icons
+- "logo" (associative array) (default: predefined structure): Logo image settings. format:
+  - "title" (string) (default: ''): Logo title attribute.
+  - "alt" (string) (default: ''): Logo alt attribute.
+  - "href" (string) (default: ''): Logo URL.
+  - "src" (string) (default: ''): Logo image file path, eg. dist/images/logo--en.svg.
+- "login_box" (associative array) format:
+  - "id": (string): Id of the box
+  - "description": (string) Label for the logged in users
+  - "label": (string): Log out label
+  - "href": (string): Url of the link
+- "login_toggle" (associative array) format:
+  - "label_not_logged": (string) Label for the anonymous users
+  - "href_not_logged": (string) Link to the login form
+  - "label_logged": (string) Label for the logged in users
+  - "href_logged": (string) Link to the logout form
+- "language_selector" (associative array) (default: predefined structure): Language switcher settings. format:
+  - "href" (string) (default: ''): URL for switcher
+  - "name" (string) (default: ''): Switcher language label, eg. 'English', 'Français', etc.
+  - "code" (string) (default: ''): Switcher language code, eg. 'en', 'fr', etc.
+  - "overlay" (associative array) (default: predefined structure): Overlay language switcher settings. format:
+    - "close_label" (string) (default: ''): Close button label eg. 'Close'.
+    - "title" (string) (default: ''): Overlay title, eg. 'Select your language'.
+    - "items" (array) (default: []): (array) (default: []): format:
+      - "lang" (string) (default: '') Item language code, eg. 'en', 'fr', etc.
+      - "label" (string) (default: '') Item language label, eg. 'English', 'Français', etc.
+      - "path" (string) (default: '') Item language URL eg. '/example#language_en'.
+      - "active" (boolean) (default: false) define if item is the active language.
+- "search_toggle": (associative array) format:
+  - "label": (string) Label of the element
+  - "href": (string) Link of the element
+- "search_form" (associative array) (default: predefined structure): EC Search Form component structure
+- "extra_classes" (string) (default: '')
+- "extra_attributes" (array) (default: []): format:
+  - "name" (string) (default: '')
+  - "value" (string) (default: '')
+
+### Example :
+
+<!-- prettier-ignore -->
+```twig
+{% include '@ecl-twig/ec-component-site-header-harmonised/site-header-harmonised.html.twig' with { 
+  bannerTop: 'Class name', 
+  banner: 'Site name', 
+  menu: true, 
+  icon_file_path: '/path-to-the-icons-file', 
+  logo: { 
+    title: 'European Commission', 
+    alt: 'European Commission logo', 
+    href: '/example', 
+    src: 'dist/images/logo--en.svg', 
+  }, 
+  language_selector: { 
+    href: '/example', 
+    name: 'English', 
+    code: 'en', 
+    overlay: { 
+      close_label: 'Close', 
+      title: 'Select your language', 
+      items: [ 
+        { lang: 'bg', label: 'български', path: '/example#language_bg' }, 
+        { lang: 'es', label: 'español', path: '/example#language_es', active: true }, 
+        ... 
+      ], 
+    }, 
+  }, 
+  login_toggle: { 
+    label_not_logged: 'Log in', 
+    href_not_logged: '/example', 
+    label_logged: 'Logged in', 
+    href_logged: '/example', 
+  }, 
+  login_box: { 
+    id: 'login-box-id', 
+    description: 'Logged in as <last name>, <first name>', 
+    label: 'Log out', 
+    href: '/example', 
+  }, 
+  search_toggle: { 
+    label: 'Search', 
+    href: '#', 
+  }, 
+  search_form: { 
+    text_input: { 
+      id: 'input-search', 
+      name: 'search', 
+    }, 
+    button: { 
+      label: 'Search', 
+    }, 
+  }, 
+  extra_classes: 'my-extra-class-1 my-extra-class-2', 
+  extra_attributes: [ 
+    { name: 'data-test', value: 'data-test-value' }, 
+    { name: 'data-test-1', value: 'data-test-value-1' }, 
+    ... 
+  ], 
+} %} 
+```