@eeacms/volto-eea-design-system 0.4.5 → 0.5.2

package/src/ui/Header/HeaderSearchPopUp.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Input, Button, Icon } from 'semantic-ui-react';
+import { Container, Input } from 'semantic-ui-react';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
@@ -14,16 +14,16 @@ function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
         <div className="wrapper">
           <Input
             className="search"
-            icon="search"
+            icon={{ className: 'ri-search-line', link: true }}
             placeholder="Search..."
             fluid
           />
-          <div className="action">
+          {/* <div className="action">
             <Button icon labelPosition="left" className="search">
               <Icon name="search" />
               Advanced Search
             </Button>
-          </div>
+          </div> */}
         </div>
       </Container>
     </div>

package/src/ui/Hero/Hero.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Hero.propTypes = {
+  image: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  fullHeight: PropTypes.bool,
+  alignContent: PropTypes.string,
+  textAlign: PropTypes.string,
+  metaAlign: PropTypes.string,
+  backgroundVariant: PropTypes.string,
+  quoted: PropTypes.bool,
+  textVariant: PropTypes.string,
+};
+
+function Hero({
+  image_url,
+  image,
+  fullWidth,
+  fullHeight,
+  alignContent,
+  backgroundVariant,
+  children,
+}) {
+  return (
+    // full width prop
+    <div
+      className={`${
+        fullWidth ? 'eea hero-block full-width' : 'eea hero-block'
+      } ${fullHeight ? 'full-height' : ''} color-bg-${backgroundVariant}`}
+    >
+      <div
+        className="hero-block-image"
+        style={image ? { backgroundImage: `url(${image_url})` } : {}}
+      >
+        <div
+          className={`hero-block-inner-wrapper d-flex ui container flex-items-${alignContent}`}
+        >
+          <div className="hero-block-body">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Hero.Text = ({ quoted, textVariant, textAlign, children }) => (
+  <div className={`hero-block-text color-fg-${textVariant} text-${textAlign}`}>
+    <h2 className={`${quoted ? 'quoted' : ''}`}>{children}</h2>
+  </div>
+);
+Hero.Meta = ({ metaAlign, children }) => (
+  <div className={`hero-block-meta text-${metaAlign}`}>{children}</div>
+);
+
+export default Hero;

package/src/ui/Hero/Hero.stories.jsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import Hero from './Hero';
+import { Button } from 'semantic-ui-react';
+import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/forest.png';
+
+export default {
+  title: 'Components/Hero',
+  component: Hero,
+  argTypes: {
+    image: {
+      description: 'Set or unset hero image',
+      table: {
+        defaultValue: { summary: '"true"' },
+        type: { summary: 'boolean' },
+      },
+    },
+    text: {
+      description: 'Hero text',
+      table: {
+        category: 'Content Text',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    buttonLabel: {
+      description: 'Meta button label',
+      table: {
+        category: 'Meta Action',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    buttonVariant: {
+      options: ['', 'primary', 'secondary'],
+      description: 'button variant options',
+      control: {
+        type: 'select',
+        labels: {
+          '': 'default',
+        },
+      },
+      defaultValue: 'primary',
+      table: {
+        category: 'Meta Action',
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
+      },
+    },
+    inverted: {
+      description: 'inverted button option',
+      table: {
+        category: 'Meta Action',
+        defaultValue: { summary: '' },
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+const Metadata = (args) => (
+  <Button
+    className={args.buttonVariant}
+    inverted={args.inverted}
+    as="a"
+    href="/#"
+    target="_blank"
+  >
+    {args.buttonLabel}
+  </Button>
+);
+
+const Template = (args) => (
+  <Hero {...args} image_url={args.image ? imgUrl : null}>
+    <Hero.Text {...args}>{args.text}</Hero.Text>
+    <Hero.Meta {...args}>
+      <Metadata {...args} />
+    </Hero.Meta>
+  </Hero>
+);
+export const Default = Template.bind({});
+Default.args = {
+  fullWidth: true,
+  fullHeight: true,
+  image: true,
+  quoted: true,
+  text:
+    'Forests are a key part of the solution to combat climate change and biodiversity loss.',
+  textVariant: 'tertiary',
+  textAlign: 'left',
+  metaAlign: 'left',
+  buttonLabel: 'Button label',
+  buttonVariant: 'primary',
+  inverted: true,
+  alignContent: 'center',
+  backgroundVariant: 'grey',
+};
+Default.parameters = {
+  controls: {
+    exclude: [
+      'fullWidth',
+      'fullHeight',
+      'quoted',
+      'textVariant',
+      'textAlign',
+      'metaAlign',
+      'alignContent',
+      'backgroundVariant',
+    ],
+  },
+};
+
+export const Playground = Template.bind({});
+Playground.args = {
+  fullWidth: true,
+  fullHeight: true,
+  image: true,
+  quoted: false,
+  text:
+    'Forests are a key part of the solution to combat climate change and biodiversity loss.',
+  textVariant: 'tertiary',
+  textAlign: 'left',
+  metaAlign: 'left',
+  buttonLabel: 'Button label',
+  buttonVariant: 'primary',
+  inverted: true,
+  alignContent: 'center',
+  backgroundVariant: 'tertiary',
+};
+Playground.argTypes = {
+  fullWidth: {
+    description: 'Hero full width',
+    table: {
+      defaultValue: { summary: '"true"' },
+      type: { summary: 'boolean' },
+    },
+  },
+  fullHeight: {
+    description: 'Hero full height',
+    table: {
+      defaultValue: { summary: '"true"' },
+      type: { summary: 'boolean' },
+    },
+  },
+  quoted: {
+    description: 'Add quotes to hero text',
+    table: {
+      category: 'Content Text',
+      defaultValue: { summary: '"true"' },
+      type: { summary: 'boolean' },
+    },
+  },
+  textVariant: {
+    options: ['primary', 'secondary', 'tertiary', 'white'],
+    description: 'Updates the text color',
+    control: { type: 'select' },
+    defaultValue: 'tertiary',
+    table: {
+      category: 'Content Text',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+  textAlign: {
+    options: ['left', 'center', 'right'],
+    description: 'Align content text',
+    control: { type: 'select' },
+    defaultValue: 'left',
+    table: {
+      category: 'Content Text',
+      defaultValue: { summary: 'left' },
+      type: { summary: 'string' },
+    },
+  },
+  metaAlign: {
+    options: ['left', 'center', 'right'],
+    description: 'Align content text',
+    control: { type: 'select' },
+    defaultValue: 'left',
+    table: {
+      category: 'Meta Action',
+      defaultValue: { summary: 'left' },
+      type: { summary: 'string' },
+    },
+  },
+  alignContent: {
+    options: ['start', 'center', 'end'],
+    description: 'Align content',
+    control: { type: 'select' },
+    defaultValue: 'center',
+    table: {
+      defaultValue: { summary: 'center' },
+      type: { summary: 'string' },
+    },
+  },
+  backgroundVariant: {
+    options: ['primary', 'secondary', 'tertiary', 'grey'],
+    description: 'Updates the background color',
+    control: { type: 'select' },
+    defaultValue: 'tertiary',
+    table: {
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+};

package/src/ui/Logo/Logo.jsx

@@ -13,14 +13,13 @@ import { Image } from 'semantic-ui-react';
  * @param {Object} intl Intl object
  * @returns {string} Markup of the component.
  */
-const Logo = ({ src, id, url, alt, title }) => {
+const Logo = ({ src, invertedSrc, id, url, alt, title, inverted }) => {
   return (
     <Link to={url} title={title}>
       <Image
-        src={src}
+        src={inverted ? invertedSrc : src}
         alt={alt}
         title={title}
-        //height={64}
         className="eea-logo"
         id={id}
       />

package/src/ui/index.js

@@ -35,3 +35,5 @@ export LabeledIconGroup from './LabeledIconGroup/LabeledIconGroup';
 export LanguageLabeledIcon from './LanguageLabeledIcon/LanguageLabeledIcon';
 
 export RelatedContent from './Card/RelatedContent/RelatedContent';
+
+export Hero from './Hero/Hero';

package/theme/themes/eea/definitions/views/item.less

@@ -106,6 +106,7 @@
 }
 
 
+
 /*--------------
      Content
 ---------------*/
@@ -130,7 +131,8 @@
   visibility: hidden;
 }
 
-.ui.items > .item > .image + .content {
+.ui.items > .item > .image + .content,
+.ui.items > .item > .icon + .content {
   min-width: 0;
   width: @contentWidth;
   display: @contentDisplay;
@@ -344,7 +346,8 @@
   .ui.items > .item > .image:not(.ui) {
     width: @tabletImageWidth;
   }
-  .ui.items > .item > .image + .content {
+  .ui.items > .item > .image + .content,
+  .ui.items > .item > .icon + .content {
     display: block;
     padding: 0em 0em 0em @tabletContentImageDistance;
   }
@@ -368,7 +371,8 @@
     width: @mobileImageWidth !important;
     max-height: @mobileImageMaxHeight !important;
   }
-  .ui.items:not(.unstackable) > .item > .image + .content {
+  .ui.items:not(.unstackable) > .item > .image + .content,
+  .ui.items:not(.unstackable) > .item > .icon + .content {
     display: block;
     padding: @mobileContentImageDistance 0em 0em;
   }
@@ -384,13 +388,16 @@
        Aligned
 --------------------*/
 
-.ui.items > .item > .image + [class*="top aligned"].content {
+.ui.items > .item > .image + [class*="top aligned"].content,
+.ui.items > .item > .icon + [class*="top aligned"].content {
   align-self: flex-start;
 }
-.ui.items > .item > .image + [class*="middle aligned"].content {
+.ui.items > .item > .image + [class*="middle aligned"].content,
+.ui.items > .item > .icon + [class*="middle aligned"].content {
   align-self: center;
 }
-.ui.items > .item > .image + [class*="bottom aligned"].content {
+.ui.items > .item > .image + [class*="bottom aligned"].content,
+.ui.items > .item > .icon + [class*="bottom aligned"].content {
   align-self: flex-end;
 }
 

package/theme/themes/eea/elements/container.overrides

@@ -9,11 +9,12 @@
     margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
-
 // add padding to containers on edit section so that we display add and delete buttons
-.section-edit .container {
-  padding: 0 3rem;
-  width: auto !important;
+.section-edit {
+  .container:not(.content-box-inner) {
+    width: auto !important;
+    padding: 0 3rem;
+  }
 }
 
 .contentWidth(@offset) {

package/theme/themes/eea/elements/image.overrides

@@ -1,3 +1,42 @@
 /*******************************
          Theme Overrides
 *******************************/
+
+/*--------------
+     Sizes
+---------------*/
+
+// This override on .block .ui.image is needed as it
+// sets width: 100% by default
+
+.block .ui.mini.image {
+  width: @miniWidth;
+}
+
+.block .ui.tiny.image {
+  width: @tinyWidth;
+}
+
+.block .ui.small.image {
+  width: @smallWidth;
+}
+
+.block .ui.medium.image {
+  width: @mediumWidth;
+}
+
+.block .ui.large.image {
+  width: @largeWidth;
+}
+
+.block .ui.big.image {
+  width: @bigWidth;
+}
+
+.block .ui.huge.image {
+  width: @hugeWidth;
+}
+
+.block .ui.massive.image {
+  width: @massiveWidth;
+}

package/theme/themes/eea/elements/input.overrides

@@ -109,18 +109,17 @@ textarea.fluid {
 /* Search Input - to be updated */
 .ui.fluid.icon.input.search {
   input {
-    height: 70px !important;
-    padding: 18.5px;
-    border: none !important;
-    border-bottom: 2px solid !important;
+    padding: @rectangleMini;
+    border: none;
+    border-bottom: @2px solid;
     background: transparent;
-    color: @white !important;
-    font-size: 18px;
+    color: @white;
+    font-size: 16px;
   }
 
   i.icon {
     color: @white;
-    font-size: 18px;
+    font-size: 16px;
     opacity: 1;
   }
 }
@@ -137,10 +136,24 @@ textarea.fluid {
   color: rgba(255, 255, 255, 0.25);
 }
 
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.fluid.icon.input.search {
+    input {
+      padding: @rectangleTiny;
+      font-size: 18px;
+    }
+
+    i.icon {
+      font-size: 18px;
+    }
+  }
+}
+
 @media only screen and (min-width: @computerBreakpoint) {
   .ui.fluid.icon.input.search {
     input {
-      border-bottom: 3px solid !important;
+      padding: @rectangleMedium;
+      border-bottom: 3px solid;
       font-size: 40px;
     }
 

package/theme/themes/eea/extras/contentBox.less

@@ -0,0 +1,41 @@
+@type: 'extra';
+@element: 'contentBox';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      CONTENT BOX
+--------------------*/
+
+.content-box {
+  width: @contentBoxWidth;
+  background-color: @contentBoxBackgroundColor;
+  color: @contentBoxColorInverted;
+  margin-bottom: @mediumGap;
+
+  position: relative;
+  margin-right: -50vw;
+  margin-left: -50vw;
+  right: 50%;
+  left: 50%;
+  
+  .ui.container {
+    padding-top: @contentBoxContainerMarginTop;
+    padding-bottom: @contentBoxContainerMarginBottom;
+  }
+
+  &.primary {
+    background-color: @contentBoxBackgroundColorPrimary;
+    color: @contentBoxColor;
+  }
+
+  &.secondary {
+    background-color: @contentBoxBackgroundColorSecondary;
+    color: @contentBoxColor;
+  }
+
+  &.tertiary {
+    background-color: @contentBoxBackgroundColorTertiary;
+    color: @contentBoxColor;
+  }
+}

package/theme/themes/eea/extras/contentBox.variables

@@ -0,0 +1,19 @@
+/*******************************
+            Content Box
+*******************************/
+
+/* Content Box */
+@contentBoxWidth : 100vw;
+@contentBoxColor : @white;
+@contentBoxBackgroundColor: @grey-1;
+@contentBoxColorInverted : @black;
+
+/* Themes */
+@contentBoxBackgroundColorPrimary: @primaryColor;
+@contentBoxBackgroundColorSecondary: @secondaryColor;
+@contentBoxBackgroundColorTertiary: @tertiaryColor;
+
+
+/* Container */
+@contentBoxContainerMarginTop    : @bigGap;
+@contentBoxContainerMarginBottom : @bigGap;

package/theme/themes/eea/extras/custom.overrides

@@ -0,0 +1,4 @@
+// hide stagingBanner on homepage
+.homepage .stagingBanner {
+  display: none !important;
+}