feat(eu-header): apply new specs - INNO-1203

src/systems/eu/implementations/react/packages/site-header/SiteHeader.jsx

@@ -0,0 +1,96 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import Icon from '@ecl/eu-react-component-icon/Icon';
+import Logo from '@ecl/eu-react-component-logo/Logo';
+import SearchForm from '@ecl/eu-react-component-search-form/SearchForm';
+
+const SiteHeader = ({
+  logo,
+  languageSelector,
+  searchForm,
+  className,
+  ...props
+}) => {
+  const classNames = classnames(className, {
+    'ecl-site-header': true,
+  });
+
+  return (
+    <div className={classNames} {...props}>
+      <div className="ecl-site-header__container ecl-container">
+        <div className="ecl-site-header__banner">
+          <a
+            className="ecl-site-header__logo ecl-link ecl-link--standalone"
+            href={logo.href}
+          >
+            <Logo title={logo.title} alt={logo.alt} language={logo.language} />
+          </a>
+
+          <div className="ecl-site-header__selector">
+            <a
+              className="ecl-link ecl-link--standalone"
+              href={languageSelector.href}
+            >
+              {languageSelector.name}
+              <span className="ecl-site-header__language-icon">
+                <Icon icon="Icon_Language" size="m" />
+                <span className="ecl-site-header__language-code">
+                  {languageSelector.code}
+                </span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <SearchForm
+          className="ecl-site-header__search"
+          buttonLabel={searchForm.buttonLabel}
+          textInputId={searchForm.textInputId}
+        />
+      </div>
+    </div>
+  );
+};
+
+SiteHeader.propTypes = {
+  logo: PropTypes.shape({
+    title: PropTypes.string,
+    alt: PropTypes.string,
+    language: PropTypes.string,
+    href: PropTypes.string,
+  }),
+  languageSelector: PropTypes.shape({
+    href: PropTypes.string,
+    name: PropTypes.string,
+    code: PropTypes.string,
+  }),
+  searchForm: PropTypes.shape({
+    textInputId: PropTypes.string,
+    buttonLabel: PropTypes.string,
+  }),
+  className: PropTypes.string,
+};
+
+SiteHeader.defaultProps = {
+  logo: {
+    title: '',
+    alt: '',
+    language: '',
+    href: '#',
+  },
+  languageSelector: {
+    href: '#',
+    name: '',
+    code: '',
+  },
+  searchForm: {
+    textInputId: '',
+    buttonLabel: '',
+  },
+  className: '',
+};
+
+export default SiteHeader;

src/systems/eu/implementations/react/packages/site-header/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@ecl/eu-react-component-site-header",
+  "author": "European Commission",
+  "license": "EUPL-1.1",
+  "version": "2.0.0-alpha.0",
+  "description": "ECL EC React Site Header",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ec-europa/europa-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ec-europa/europa-component-library/issues"
+  },
+  "homepage": "https://github.com/ec-europa/europa-component-library",
+  "keywords": [
+    "ecl",
+    "europa-component-library",
+    "design-system",
+    "react"
+  ],
+  "dependencies": {
+    "@ecl/eu-layout-grid": "^2.0.0-alpha.0",
+    "@ecl/eu-react-component-icon": "^2.0.0-alpha.0",
+    "@ecl/eu-react-component-logo": "^2.0.0-alpha.0",
+    "@ecl/eu-react-component-search-form": "^2.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@ecl/eu-resources": "^2.0.0-alpha.0",
+    "@ecl/eu-specs-site-header": "^2.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "prop-types": "^15.6.2"
+  }
+}

src/systems/eu/implementations/react/packages/site-header/stories/index.jsx

@@ -0,0 +1,18 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs/react';
+
+import demoContent from '@ecl/eu-specs-site-header/demo/data';
+
+import SiteHeader from '../SiteHeader';
+
+storiesOf('SiteHeader', module)
+  .addDecorator(withKnobs)
+  .add('default', () => (
+    <SiteHeader
+      logo={demoContent.logo}
+      languageSelector={demoContent.languageSelector}
+      searchForm={demoContent.searchForm}
+    />
+  ));

src/systems/eu/implementations/vanilla/packages/eu-component-site-header/eu-component-site-header.scss

@@ -5,27 +5,88 @@
 
 // Import base and generic
 @import '@ecl/eu-base/eu-base';
-@import '@ecl/generic-component-site-header/generic-component-site-header';
 
 // Check if overridden dependencies are already loaded, if needed
 @include check-imports(
-  (
-    'eu-component-logo',
-    'eu-component-language-list',
-    'eu-component-search-form'
-  )
+  ('eu-style-icon', 'eu-component-logo', 'eu-component-search-form')
 );
 
-// Use generic mixin
 @include exports('eu-component-site-header') {
-  @include ecl-site-header();
+  .ecl-site-header {
+    background-color: $ecl-color-white-100;
+    margin: 0;
+    width: 100%;
+  }
+
+  .ecl-site-header__container {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: $ecl-spacing-m;
+    padding-top: $ecl-spacing-l;
+  }
 
   .ecl-site-header__banner {
-    justify-content: flex-start;
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+  }
+
+  .ecl-site-header__selector {
+    align-items: center;
+    display: flex;
+  }
+
+  .ecl-site-header__selector .ecl-link {
+    align-items: center;
+    display: flex;
+
+    &:visited {
+      color: $ecl-color-primary;
+    }
   }
 
-  .ecl-site-header__logo {
-    flex-grow: 0;
-    flex-shrink: 1;
+  .ecl-site-header__language-icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-left: $ecl-spacing-s;
+    position: relative;
+  }
+
+  .ecl-site-header__language-code {
+    color: $ecl-color-white-100;
+    font: $ecl-font-xs;
+    font-weight: $ecl-font-weight-bold;
+    left: 50%;
+    position: absolute;
+    text-transform: uppercase;
+    // position top and left has to be set like this because IE...
+    // also ugly magic numbers to center the text on the icon
+    top: 50%;
+    transform: translateX(-50%) translateX(-0.01rem) translateY(-50%)
+      translateY(-0.1rem);
+  }
+
+  .ecl-site-header__search {
+    margin-top: $ecl-spacing-m;
+  }
+
+  /* stylelint-disable-next-line order/order */
+  @include ecl-media-breakpoint-up('md') {
+    .ecl-site-header__container {
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+      padding-bottom: $ecl-spacing-xl;
+      padding-top: $ecl-spacing-xl;
+    }
+
+    .ecl-site-header__search {
+      margin-top: 0;
+    }
+
+    .ecl-site-header__banner {
+      padding-right: $ecl-spacing-xl;
+    }
   }
 }

src/systems/eu/implementations/vanilla/packages/eu-component-site-header/package.json

@@ -7,14 +7,9 @@
   "style": "eu-component-site-header.scss",
   "dependencies": {
     "@ecl/eu-base": "^2.0.0-alpha.0",
-    "@ecl/eu-component-language-list": "^2.0.0-alpha.0",
+    "@ecl/eu-style-icon": "^2.0.0-alpha.0",
     "@ecl/eu-component-logo": "^2.0.0-alpha.0",
-    "@ecl/eu-component-navigation-list": "^2.0.0-alpha.0",
-    "@ecl/eu-component-search-form": "^2.0.0-alpha.0",
-    "@ecl/eu-component-site-switcher": "^2.0.0-alpha.0",
-    "@ecl/eu-layout-grid": "^2.0.0-alpha.0",
-    "@ecl/eu-utility-float": "^2.0.0-alpha.0",
-    "@ecl/generic-component-site-header": "^2.0.0-alpha.0"
+    "@ecl/eu-component-search-form": "^2.0.0-alpha.0"
   },
   "publishConfig": {
     "access": "public"

src/systems/eu/specs/components/page-header/site-header/config.js → src/systems/eu/specs/components/site-header/config.js

@@ -1,10 +1,11 @@
 import style from './docs/style.md';
-import code from './docs/code.md';
+import code from './docs/code.mdx';
 import usage from './docs/usage.md';
 
 export default {
+  ready: true,
   url: '/eu/components/site-header',
-  title: 'Site Header',
+  title: 'Site header',
   section: 'Components',
   tabs: [
     {

src/systems/eu/specs/components/site-header/demo/data.js

@@ -0,0 +1,14 @@
+module.exports = {
+  logo: {
+    href: '/example',
+  },
+  languageSelector: {
+    href: '/example',
+    name: 'English',
+    code: 'en',
+  },
+  searchForm: {
+    textInputId: '',
+    buttonLabel: 'Search',
+  },
+};