feat(eu/templates): add campaign template - INNO-1258 (#888)

* fix(cards): remove max-width

* feat(campaign): bootstrap campaign template

* feat(campaign): make use of paragraph utility

* feat(campaign): make use of fragment

* add missing labels

src/systems/ec/implementations/vanilla/packages/ec-component-card/ec-component-card.scss

@@ -11,7 +11,6 @@
 );
 
 @mixin ecl-card(
-  $max-width: 21.75rem,
   $background-card: $ecl-color-grey-5,
   $border-color-card: $ecl-color-grey-10,
   $color-meta: $ecl-color-grey-75,
@@ -23,7 +22,6 @@
     border: 1px solid $border-color-card;
     box-sizing: border-box;
     margin: 0;
-    max-width: $max-width;
     padding-left: calc(#{$ecl-spacing-s} - 1px);
     padding-right: calc(#{$ecl-spacing-s} - 1px);
     width: 100%;

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

@@ -11,6 +11,7 @@ module.exports = {
   },
   searchForm: {
     textInputId: 'search-form',
+    inputLabel: 'Search',
     buttonLabel: 'Search',
   },
 };

src/systems/eu/implementations/react/packages/campaign-page/CampaignPage.jsx

@@ -0,0 +1,83 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import Blockquote from '@ecl/eu-react-component-blockquote/Blockquote';
+import Card from '@ecl/eu-react-component-card/Card';
+import Footer from '@ecl/eu-react-component-footer/Footer';
+import MediaContainer from '@ecl/eu-react-component-media-container/MediaContainer';
+import HeroBanner from '@ecl/eu-react-component-hero-banner/HeroBanner';
+import SiteHeader from '@ecl/eu-react-component-site-header/SiteHeader';
+
+const CampaignPage = ({
+  siteHeader,
+  heroBanner,
+  mediaContainer,
+  footer,
+  card,
+  blockquote,
+}) => (
+  <Fragment>
+    <SiteHeader {...siteHeader} />
+    <HeroBanner {...heroBanner} />
+    <main className="ecl-u-pv-xl">
+      <div className="ecl-container">
+        <div className="ecl-row">
+          <div className="ecl-col-sm-12 ecl-col-md-6">
+            <MediaContainer {...mediaContainer} />
+          </div>
+
+          <div className="ecl-col-sm-12 ecl-col-md-6">
+            <p className="ecl-u-type-paragraph">
+              The European Commission has put forward ambitious yet realistic
+              proposals for a modern EU budget. It is time for an EU budget that
+              reflects rapid developments in innovation, the economy, the
+              environment and geopolitics, amongst others. The Commission is
+              putting forward modern, clearer and simpler EU financial rules
+              that ensure the EU budget delivers on the issues that matter to
+              Europeans.
+            </p>
+          </div>
+        </div>
+
+        <div className="ecl-row ecl-u-mt-l">
+          <div className="ecl-col-sm-12 ecl-col-md-4">
+            <Card {...card} />
+          </div>
+          <div className="ecl-col-sm-12 ecl-col-md-4">
+            <Card {...card} />
+          </div>
+          <div className="ecl-col-sm-12 ecl-col-md-4">
+            <Card {...card} />
+          </div>
+        </div>
+        <div className="ecl-row ecl-u-mt-l">
+          <div className="ecl-col-sm-12 ecl-col-md-12">
+            <Blockquote {...blockquote} />
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <Footer {...footer} />
+  </Fragment>
+);
+
+CampaignPage.propTypes = {
+  siteHeader: PropTypes.shape(SiteHeader.propTypes),
+  heroBanner: PropTypes.shape(HeroBanner.propTypes),
+  mediaContainer: PropTypes.shape(MediaContainer.propTypes),
+  footer: PropTypes.shape(Footer.propTypes),
+  card: PropTypes.shape(Card.propTypes),
+  blockquote: PropTypes.shape(Blockquote.propTypes),
+};
+
+CampaignPage.defaultProps = {
+  siteHeader: {},
+  heroBanner: {},
+  mediaContainer: {},
+  footer: {},
+  card: {},
+  blockquote: {},
+};
+
+export default CampaignPage;

src/systems/eu/implementations/react/packages/campaign-page/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@ecl/eu-react-campaign-page",
+  "author": "European Commission",
+  "license": "EUPL-1.1",
+  "version": "2.0.0-alpha.2",
+  "description": "ECL EU React Campaign Page",
+  "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-react-component-blockquote": "^2.0.0-alpha.2",
+    "@ecl/eu-react-component-card": "^2.0.0-alpha.2",
+    "@ecl/eu-react-component-footer": "^2.0.0-alpha.2",
+    "@ecl/eu-react-component-media-container": "^2.0.0-alpha.2",
+    "@ecl/eu-react-component-hero-banner": "^2.0.0-alpha.2",
+    "@ecl/eu-react-component-site-header": "^2.0.0-alpha.2"
+  },
+  "devDependencies": {
+    "@ecl/eu-layout-grid": "^2.0.0-alpha.2",
+    "@ecl/eu-specs-campaign-page": "^2.0.0-alpha.2",
+    "@ecl/eu-utility-margin": "^2.0.0-alpha.2",
+    "@ecl/eu-utility-typography": "^2.0.0-alpha.2"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  }
+}

src/systems/eu/implementations/react/packages/campaign-page/stories/Index.jsx

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import siteHeaderContent from '@ecl/eu-specs-site-header/demo/data';
+import heroBannerContent from '@ecl/eu-specs-hero-banner/demo/data--image';
+import mediaContainerContent from '@ecl/ec-specs-media-container/demo/data--video';
+import cardContent from '@ecl/eu-specs-card/demo/data--card';
+import blockquoteContent from '@ecl/eu-specs-blockquote/demo/data';
+import footerContent from '@ecl/eu-specs-footer/demo/data';
+
+import CampaignPage from '../CampaignPage';
+
+storiesOf('Campaign page', module)
+  .addDecorator(withKnobs)
+  .add('default', () => (
+    <CampaignPage
+      siteHeader={siteHeaderContent}
+      heroBanner={heroBannerContent}
+      card={cardContent}
+      footer={footerContent}
+      mediaContainer={mediaContainerContent}
+      blockquote={blockquoteContent}
+    />
+  ));

src/systems/eu/implementations/vanilla/packages/eu-component-card/eu-component-card.scss

@@ -11,7 +11,6 @@
 );
 
 @mixin ecl-card(
-  $max-width: 21.75rem,
   $background-card: $ecl-color-grey-5,
   $border-color-card: $ecl-color-grey-10,
   $color-meta: $ecl-color-grey-75,
@@ -23,7 +22,6 @@
     border: 1px solid $border-color-card;
     box-sizing: border-box;
     margin: 0;
-    max-width: $max-width;
     padding-left: calc(#{$ecl-spacing-s} - 1px);
     padding-right: calc(#{$ecl-spacing-s} - 1px);
     width: 100%;

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

@@ -11,6 +11,7 @@ module.exports = {
   },
   searchForm: {
     textInputId: 'search-form',
+    inputLabel: 'Search',
     buttonLabel: 'Search',
   },
 };

src/systems/eu/specs/templates/campaign/config.js → src/systems/eu/specs/templates/campaign-page/config.js

@@ -1,11 +1,11 @@
-import code from './docs/code.md';
+import code from './docs/code.mdx';
 import usage from './docs/usage.md';
 
 export default {
-  order: 2,
-  title: 'Campaign',
+  order: 1,
+  title: 'Campaign template',
   section: 'Templates',
-  status: 'planned',
+  status: 'ready',
   tabs: [
     {
       name: 'Usage',

src/systems/eu/specs/templates/campaign-page/docs/code.mdx

@@ -0,0 +1,9 @@
+import Playground from '@ecl/website-components/Playground'
+
+<Playground
+  system="eu"
+  selectedKind="Campaign page"
+  selectedStory="default"
+>
+No preview available, use the Playground or Fullscreen links
+</Playground>

src/systems/eu/specs/templates/campaign-page/docs/usage.md

@@ -0,0 +1 @@
+Do's and don'ts

src/systems/eu/specs/templates/campaign-page/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ecl/eu-specs-campaign-page",
+  "author": "European Commission",
+  "license": "EUPL-1.1",
+  "version": "2.0.0-alpha.2",
+  "description": "ECL EU Campaign Page Specs",
+  "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"
+  ]
+}