@eeacms/volto-eea-design-system 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/semantic.less

@@ -284,3 +284,7 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/hero';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/copyright';
+}

package/src/ui/Banner/Banner.stories.jsx

@@ -2,7 +2,8 @@ import React from 'react';
 import Banner from './Banner';
 // eslint-disable-next-line import/no-unresolved
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
-import { Popup } from 'semantic-ui-react';
+import { Popup, Icon } from 'semantic-ui-react';
+import Copyright from '../Copyright/Copyright';
 
 export default {
   title: 'Components/Page Header',
@@ -43,6 +44,32 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '"left"' },
+      },
+    },
+    copyrightIcon: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    copyrightText: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
   },
 };
 
@@ -100,6 +127,12 @@ const Template = (args) => (
           </>
         </Banner.Metadata>
       )}
+      <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Icon>
+          <Icon className={args.copyrightIcon} />
+        </Copyright.Icon>
+        <Copyright.Text>{args.copyrightText}</Copyright.Text>
+      </Copyright>
     </Banner.Content>
   </Banner>
 );
@@ -117,4 +150,7 @@ Default.args = {
   image: true,
   hideShareButton: false,
   hideDownloadButton: false,
+  copyrightPosition: 'left',
+  copyrightIcon: 'ri-copyright-line',
+  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
 };

package/src/ui/Copyright/Copyright.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Copyright.propTypes = {
+  copyrightPosition: PropTypes.oneOf(['left', 'right']),
+};
+
+function Copyright({ children, ...rest }) {
+  return (
+    <div className={`eea copyright ${rest.copyrightPosition}`}>
+      <div className={'wrapper'}>{children}</div>
+    </div>
+  );
+}
+
+Copyright.Icon = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-wrapper'}>
+    {children}
+  </span>
+);
+
+Copyright.Text = ({ children, ...rest }) => (
+  <span {...rest} className={'icon-content'}>
+    {children}
+  </span>
+);
+export default Copyright;

package/src/ui/Copyright/Copyright.stories.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Copyright from './Copyright';
+import { Container, Icon, Segment } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Copyright',
+  component: Copyright,
+  argTypes: {
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
+      table: {
+        defaultValue: { summary: '"left"' },
+      },
+    },
+  },
+};
+
+export const Default = (args) => (
+  <Container>
+    <Segment className={'inverted'}>
+      <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Icon>
+          <Icon className={args.icon} />
+        </Copyright.Icon>
+        <Copyright.Text>{args.text}</Copyright.Text>
+      </Copyright>
+    </Segment>
+  </Container>
+);
+
+Default.args = {
+  copyrightPosition: 'left',
+  icon: 'ri-copyright-line',
+  text: 'Image copyright: Velit fusce sed sem ut.',
+};

package/src/ui/Hero/Hero.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon } from 'semantic-ui-react';
+import Copyright from '../Copyright/Copyright';
+
 Hero.propTypes = {
   image: PropTypes.bool,
   fullWidth: PropTypes.bool,
@@ -21,6 +24,11 @@ function Hero({
   alignContent,
   backgroundVariant,
   children,
+
+  has_copyright,
+  copyrightPosition,
+  copyrightIcon,
+  copyrightText,
 }) {
   return (
     // full width prop
@@ -36,7 +44,18 @@ function Hero({
         <div
           className={`hero-block-inner-wrapper d-flex ui container flex-items-${alignContent}`}
         >
-          <div className="hero-block-body">{children}</div>
+          <div className="hero-block-body">
+            {children}
+
+            {has_copyright && (
+              <Copyright copyrightPosition={copyrightPosition}>
+                <Copyright.Icon>
+                  <Icon className={copyrightIcon} />
+                </Copyright.Icon>
+                <Copyright.Text>{copyrightText}</Copyright.Text>
+              </Copyright>
+            )}
+          </div>
         </div>
       </div>
     </div>

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

@@ -54,6 +54,40 @@ export default {
         type: { summary: 'boolean' },
       },
     },
+    has_copyright: {
+      name: 'Copyright',
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '' },
+        type: { summary: 'boolean' },
+      },
+    },
+    copyrightPosition: {
+      name: 'Position',
+      control: {
+        type: 'inline-radio',
+        options: ['left', 'right'],
+      },
+      type: { name: 'string' },
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '"left"' },
+      },
+    },
+    copyrightIcon: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    copyrightText: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
   },
 };
 
@@ -93,6 +127,11 @@ Default.args = {
   inverted: true,
   alignContent: 'center',
   backgroundVariant: 'grey',
+
+  has_copyright: true,
+  copyrightPosition: 'left',
+  copyrightIcon: 'ri-copyright-line',
+  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
 };
 Default.parameters = {
   controls: {
@@ -125,6 +164,11 @@ Playground.args = {
   inverted: true,
   alignContent: 'center',
   backgroundVariant: 'tertiary',
+
+  has_copyright: true,
+  copyrightPosition: 'left',
+  copyrightIcon: 'ri-copyright-line',
+  copyrightText: 'Image copyright: Velit fusce sed sem ut.',
 };
 Playground.argTypes = {
   fullWidth: {
@@ -202,4 +246,30 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
+  copyrightPosition: {
+    name: 'Position',
+    control: {
+      type: 'inline-radio',
+      options: ['left', 'right'],
+    },
+    type: { name: 'string' },
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '"left"' },
+    },
+  },
+  copyrightIcon: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
+  copyrightText: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
 };

package/src/ui/index.js

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

package/theme/theme.config

@@ -109,6 +109,7 @@
 @callout : 'eea';
 @quote   : 'eea';
 @hero    : 'eea';
+@copyright : 'eea';
 
 /*******************************
             Folders

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

@@ -43,6 +43,7 @@
       .metadata {
         font-size: @mobileMetadataFontSize;
         line-height: @mobileMetadataLineHeight;
+        margin-bottom: @rem-space-3;
 
         .field.type {
           font-weight: @metadataTypeFontWeight;
@@ -129,7 +130,7 @@
   }
 }
 
-@media only screen and (max-width: @tabletBreakpoint - 1) {
+@media only screen and (max-width: @largestMobileScreen) {
   .actions .action {
     margin-bottom: @mobileActionsActionMarginBottom;
   }

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

@@ -0,0 +1,29 @@
+@type: 'extra';
+@element: 'copyright';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      Copyright
+--------------------*/
+
+.eea.copyright {
+    width: @copyrightWidth;
+
+    .wrapper {
+        display: flex;
+        color: @copyrightContentColor;
+        font-size: @copyrightContentFontSize;
+        line-height: @copyrightLineHeight;
+        gap: @copyrightContentPaddingRight;
+    }
+    &.left .wrapper {
+      justify-content: flex-start;
+    }
+  &.right .wrapper {
+    justify-content: flex-end;
+  }
+  .icon {
+    margin: 0; // override default
+  }
+}

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

@@ -0,0 +1,11 @@
+/*******************************
+          Copyright
+*******************************/
+
+@copyrightWidth: 100%;
+
+/* Content */
+@copyrightContentColor: var(--text-color, @grey-1);
+@copyrightContentFontSize: @font-size-00;
+@copyrightLineHeight: @font-lineheight-0;
+@copyrightContentPaddingRight: @rem-space-1;

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

@@ -46,6 +46,10 @@
   height: 100%;
 }
 
+.hero-block-body .eea.copyright {
+  position: absolute;
+  bottom: @mobileCopyrightBottom;
+}
 
 .hero-block-text .quoted > * {
   display: inline-block;
@@ -91,4 +95,7 @@
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }
+  .hero-block-body .eea.copyright {
+    bottom: @desktopCopyrightBottom;
+  }
 }

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

@@ -30,4 +30,8 @@
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;
 @tabletHeroBlockBodyGap  : @rem-space-8;
-@desktopHeroBlockBodyGap : @rem-space-10;
+@desktopHeroBlockBodyGap : @rem-space-10;
+
+/* Copyright */
+@mobileCopyrightBottom: @rem-space-4;
+@desktopCopyrightBottom: @rem-space-7-50;

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

@@ -7,6 +7,8 @@
             Tag
 *******************************/
 
+@tagsGap: 0 1rem;
+
 .tags {
   display: flex;
   flex-direction: row;

package/theme/themes/eea/views/statistic.overrides

@@ -34,6 +34,7 @@
   }
 }
 
+.ui.statistics.inverted .slate,
 .ui.statistics.inverted > a {
   color: @white;
 }

package/theme/themes/eea/views/statistic.variables

@@ -79,8 +79,8 @@
 @invertedBackground: transparent;
 
 /* Item Width */
-@itemGroupMargin: 0em 0em -@rowSpacing;
-@itemMargin: 0em 0em @rowSpacing;
+@itemGroupMargin: 2rem 0;
+@itemMargin: 2rem 0;
 
 /* Size */
 @miniTextValueSize: 1rem;