@eeacms/volto-eea-design-system 1.0.0-alpha.5 → 1.0.0-alpha.6

package/CHANGELOG.md

@@ -4,6 +4,41 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-alpha.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.5...1.0.0-alpha.6) - 7 December 2022
+
+#### :rocket: New Features
+
+- feat(Header): add hideSearch prop [Miu Razvan - [`13ddfe5`](https://github.com/eea/volto-eea-design-system/commit/13ddfe59a6bd7fe2050b70ac4524a6f6c5c169ea)]
+- feat(Docusaurus):  Image copyright information #257 from eea/image-copyright-info [ichim-david - [`2119515`](https://github.com/eea/volto-eea-design-system/commit/21195153240da052acb7171f7904449ed7854cb3)]
+- feat(copyright): create copyright component and import it in banner [Antonis Tarantilis - [`8fcde9d`](https://github.com/eea/volto-eea-design-system/commit/8fcde9df2915585e2336024436cef76642820d75)]
+
+#### :bug: Bug Fixes
+
+- fix(tags): content gap when using tags-content wrapper [David Ichim - [`c4eb9b8`](https://github.com/eea/volto-eea-design-system/commit/c4eb9b89d4ea09f936b7fcdc22a84105fd8639af)]
+
+#### :nail_care: Enhancements
+
+- change(copyright): removed copyrightVariant from Banner and Hero stories [David Ichim - [`ac62e07`](https://github.com/eea/volto-eea-design-system/commit/ac62e079d4eafb818f9cae25880a04d9e069d107)]
+- change(copyright): now uses text color css variable with fallback to white [David Ichim - [`ee7268b`](https://github.com/eea/volto-eea-design-system/commit/ee7268ba359f079dfce45fd0fe91f75ae5c37e94)]
+- change(copyright): removed color variant [David Ichim - [`747b8a2`](https://github.com/eea/volto-eea-design-system/commit/747b8a27155569247d4975837587e3320327fce9)]
+- change(copyright): line height to match page header implementation [David Ichim - [`a56254e`](https://github.com/eea/volto-eea-design-system/commit/a56254e7588cfc6aca999f550084d79dca6e9a6c)]
+- change(copyright): implementation to add classes on content sections [David Ichim - [`e10bde6`](https://github.com/eea/volto-eea-design-system/commit/e10bde674f2b1f722ec6c70734e4a72c018f4afe)]
+- change(tagList): modified implementation to align to volto-tags-block [David Ichim - [`7a57a3d`](https://github.com/eea/volto-eea-design-system/commit/7a57a3d4bf7ede4b5ab5f3ef045d664aaaf67f2c)]
+- refactor(hero): add copyright component to hero [Antonis Tarantilis - [`0fa88fa`](https://github.com/eea/volto-eea-design-system/commit/0fa88fad3e7b48789dc6d0462b9f78dd359b8949)]
+- refactor(copyright): remove data section [Antonis Tarantilis - [`52cb09d`](https://github.com/eea/volto-eea-design-system/commit/52cb09dc363bb0a2e363ec86dcefb4c57e07a14d)]
+
+#### :house: Documentation changes
+
+- docs(copyright): copyright documentation [Dora Anastasiou - [`a90ed76`](https://github.com/eea/volto-eea-design-system/commit/a90ed766e60b5eb5b027beb36d2b1967d2c41fa3)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.6 [Alin Voinea - [`6ca32f0`](https://github.com/eea/volto-eea-design-system/commit/6ca32f03c1860781d3c1c4ff9558713ad8acac95)]
+- feature(copyright): image information #250 from eea/feature-copyright [ichim-david - [`a8618c7`](https://github.com/eea/volto-eea-design-system/commit/a8618c7f0230a19b6c973aa2c9646463de9eeffb)]
+- lint fix by introducing local variable tagsGap [David Ichim - [`7b6c0ae`](https://github.com/eea/volto-eea-design-system/commit/7b6c0ae2ebfed06221700faf9a0d0c2bdeb60d99)]
+- grammar fixes [ichim-david - [`cb2a5a5`](https://github.com/eea/volto-eea-design-system/commit/cb2a5a5fd9dfc01eccc179721b06988742f5b2e2)]
+- Update usage_markdown.md [ichim-david - [`f76d4a2`](https://github.com/eea/volto-eea-design-system/commit/f76d4a242f795451d64ef2d192d0006a0ed5eac1)]
+- Update 3-images.md [ichim-david - [`1b0ef03`](https://github.com/eea/volto-eea-design-system/commit/1b0ef033f9c8a36aaa739f268263f24a6d0fb473)]
 ### [1.0.0-alpha.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.4...1.0.0-alpha.5) - 29 November 2022
 
 #### :rocket: New Features
@@ -51,7 +86,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Release 1.0.0-alpha.5 [Alin Voinea - [`dcd60c9`](https://github.com/eea/volto-eea-design-system/commit/dcd60c9285caf60b23ed97a9ca5daed0a943bc24)]
 - feature(Docusaurus): Updates on color palette information including thematic websites #231 from eea/refactor-docusaurus [ichim-david - [`ec7843d`](https://github.com/eea/volto-eea-design-system/commit/ec7843dea07f626dc1c71ae1baa8bb5b0caa52f3)]
 - Back to dev [Alin Voinea - [`563fbc5`](https://github.com/eea/volto-eea-design-system/commit/563fbc5fac0d4b0295690d0a3a4e04271753f18a)]
 - perf(docusaurus): added remixicon and roboto locally [Giorgos Stamatis - [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.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/Header/Header.jsx

@@ -107,6 +107,7 @@ const Main = ({
   pathname,
   transparency,
   inverted,
+  hideSearch,
 }) => {
   const history = useHistory();
   const [activeItem, setActiveItem] = React.useState(pathname);
@@ -231,18 +232,20 @@ const Main = ({
                   ))}
                 </div>
               )}
-              <div
-                className="search-action"
-                onClick={searchOnClick}
-                role="none"
-                ref={searchButtonRef}
-              >
-                {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
-                <Image
-                  src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
-                  alt="search button open/close"
-                />
-              </div>
+              {!hideSearch && (
+                <div
+                  className="search-action"
+                  onClick={searchOnClick}
+                  role="none"
+                  ref={searchButtonRef}
+                >
+                  {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
+                  <Image
+                    src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
+                    alt="search button open/close"
+                  />
+                </div>
+              )}
               <Header.BurgerAction
                 className={`mobile ${burger}`}
                 onClick={mobileBurgerOnClick}

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/TagList/TagList.jsx

@@ -14,4 +14,8 @@ TagList.Title = ({ children, ...rest }) => (
   </span>
 );
 
+TagList.Content = ({ children }) => (
+  <div className="tags-content">{children}</div>
+);
+
 export default TagList;

package/src/ui/TagList/TagList.stories.jsx

@@ -43,11 +43,13 @@ export const List = (args) => (
   <Container>
     <TagList className={args.direction}>
       <TagList.Title>{args.title}</TagList.Title>
-      {args.tags.map((tag, index) => [
-        <Tag className={tag.class} href={tag.href} key={index}>
-          {tag.category}
-        </Tag>,
-      ])}
+      <TagList.Content>
+        {args.tags.map((tag, index) => [
+          <Tag className={tag.class} href={tag.href} key={index}>
+            {tag.category}
+          </Tag>,
+        ])}
+      </TagList.Content>
     </TagList>
   </Container>
 );

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,6 +95,9 @@
   .hero-block-body {
     gap: @desktopHeroBlockBodyGap;
   }
+  .hero-block-body .eea.copyright {
+    bottom: @desktopCopyrightBottom;
+  }
 }
 
 .loadUIOverrides();

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;
@@ -30,6 +32,12 @@
   gap: @tagsLabelsGap;
 }
 
+.tags-content {
+  gap: @tagsContentGap;
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .tags.left {
   justify-content: left;
 }

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

@@ -5,7 +5,8 @@
 /* Body */
 @tagsBodyWidth             : 100%;
 @tagsLabelsGap             : 0.5rem;
-@tagsGap                   : 1rem;
+@tagsGap                   : 0 1rem;
+@tagsContentGap            : 0.5rem 1rem;
 
 /* Tags Title */
 @tagsTitleFontColor        : @textColorCSSVar;

package/website/docs/2-whatsnew.md

@@ -38,7 +38,43 @@ Below is a non-exhaustive list of the work-in-progress which is planned for futu
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.4...HEAD) - 2022-11-29T18:30:49.777Z
+### [Unreleased](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.5...HEAD) - 2022-12-07T11:06:35.697Z
+
+#### :rocket: New Features
+
+- feat(copyright): create copyright component and import it in banner [`8fcde9d`](https://github.com/eea/volto-eea-design-system/commit/8fcde9df2915585e2336024436cef76642820d75)
+- feat(Header): add hideSearch prop [`13ddfe5`](https://github.com/eea/volto-eea-design-system/commit/13ddfe59a6bd7fe2050b70ac4524a6f6c5c169ea)
+- feat(Docusaurus):  Image copyright information #257 from eea/image-copyright-info [`2119515`](https://github.com/eea/volto-eea-design-system/commit/21195153240da052acb7171f7904449ed7854cb3)
+
+#### :bug: Bug Fixes
+
+- fix(tags): content gap when using tags-content wrapper [`c4eb9b8`](https://github.com/eea/volto-eea-design-system/commit/c4eb9b89d4ea09f936b7fcdc22a84105fd8639af)
+
+#### :nail_care: Enhancements
+
+- refactor(hero): add copyright component to hero [`0fa88fa`](https://github.com/eea/volto-eea-design-system/commit/0fa88fad3e7b48789dc6d0462b9f78dd359b8949)
+- change(copyright): implementation to add classes on content sections [`e10bde6`](https://github.com/eea/volto-eea-design-system/commit/e10bde674f2b1f722ec6c70734e4a72c018f4afe)
+- change(copyright): removed color variant [`747b8a2`](https://github.com/eea/volto-eea-design-system/commit/747b8a27155569247d4975837587e3320327fce9)
+- change(copyright): removed copyrightVariant from Banner and Hero stories [`ac62e07`](https://github.com/eea/volto-eea-design-system/commit/ac62e079d4eafb818f9cae25880a04d9e069d107)
+- change(tagList): modified implementation to align to volto-tags-block [`7a57a3d`](https://github.com/eea/volto-eea-design-system/commit/7a57a3d4bf7ede4b5ab5f3ef045d664aaaf67f2c)
+- refactor(copyright): remove data section [`52cb09d`](https://github.com/eea/volto-eea-design-system/commit/52cb09dc363bb0a2e363ec86dcefb4c57e07a14d)
+- change(copyright): line height to match page header implementation [`a56254e`](https://github.com/eea/volto-eea-design-system/commit/a56254e7588cfc6aca999f550084d79dca6e9a6c)
+- change(copyright): now uses text color css variable with fallback to white [`ee7268b`](https://github.com/eea/volto-eea-design-system/commit/ee7268ba359f079dfce45fd0fe91f75ae5c37e94)
+
+#### :house: Documentation changes
+
+- docs(copyright): copyright documentation [`a90ed76`](https://github.com/eea/volto-eea-design-system/commit/a90ed766e60b5eb5b027beb36d2b1967d2c41fa3)
+
+#### :hammer_and_wrench: Others
+
+- Update usage_markdown.md [`f76d4a2`](https://github.com/eea/volto-eea-design-system/commit/f76d4a242f795451d64ef2d192d0006a0ed5eac1)
+- grammar fixes [`cb2a5a5`](https://github.com/eea/volto-eea-design-system/commit/cb2a5a5fd9dfc01eccc179721b06988742f5b2e2)
+- Release 1.0.0-alpha.6 [`6ca32f0`](https://github.com/eea/volto-eea-design-system/commit/6ca32f03c1860781d3c1c4ff9558713ad8acac95)
+- feature(copyright): image information #250 from eea/feature-copyright [`a8618c7`](https://github.com/eea/volto-eea-design-system/commit/a8618c7f0230a19b6c973aa2c9646463de9eeffb)
+- Update 3-images.md [`1b0ef03`](https://github.com/eea/volto-eea-design-system/commit/1b0ef033f9c8a36aaa739f268263f24a6d0fb473)
+- lint fix by introducing local variable tagsGap [`7b6c0ae`](https://github.com/eea/volto-eea-design-system/commit/7b6c0ae2ebfed06221700faf9a0d0c2bdeb60d99)
+
+### [1.0.0-alpha.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.4...1.0.0-alpha.5) - 2022-11-29
 
 #### :rocket: New Features
 
@@ -71,11 +107,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - docs(docusaurus): color updates [`cc13b54`](https://github.com/eea/volto-eea-design-system/commit/cc13b5499a9ae13bb45925a057f8ff4d6a2e4643)
 - docs(colors): fix swatches accessibility [`306cb74`](https://github.com/eea/volto-eea-design-system/commit/306cb74d3e06390a9c15da9b8b29c9d3c8f0f6c5)
 - docs(docusaurus): typography and colors fixes according to comments on PR [`ae20a72`](https://github.com/eea/volto-eea-design-system/commit/ae20a7258cc88465fa0937895c2999952736f456)
+- docs(colours): adjust logos heights [`854d4fb`](https://github.com/eea/volto-eea-design-system/commit/854d4fb761be7307e83e5dd2eb0fe5a0117727c5)
 - docs(typography): merge designer and dev units [`65c240e`](https://github.com/eea/volto-eea-design-system/commit/65c240eddbf20b3fc870d301b96837f49ad9caca)
 - docs(typography): readded extra font sizes, fixed fluid [`a4a5d89`](https://github.com/eea/volto-eea-design-system/commit/a4a5d892538a9713d14ac718b1bf2c771be09810)
 - docs(typography): changed em to percentages [`d417600`](https://github.com/eea/volto-eea-design-system/commit/d4176007ff4b421bc988b618488e0ba6b550f9fe)
 - docs(colors): minors updates and instructions [`84ac882`](https://github.com/eea/volto-eea-design-system/commit/84ac8828e430b4af2b461534b4e2f81189080145)
-- docs(colours): adjust logos heights [`854d4fb`](https://github.com/eea/volto-eea-design-system/commit/854d4fb761be7307e83e5dd2eb0fe5a0117727c5)
 - docs(colors): blue-grey-6 adjustment [`e7ab2d1`](https://github.com/eea/volto-eea-design-system/commit/e7ab2d15d3a617bc5b3713897f3e3521d9e2720a)
 - docs(colours): added active colour [`574f7a9`](https://github.com/eea/volto-eea-design-system/commit/574f7a95ea8a9510d03a104ad72fafafcae5d738)
 - docs(colors): switch FISE logo to png [`335471f`](https://github.com/eea/volto-eea-design-system/commit/335471fd95bbd78cd7bd80b960272baa0a32e1c5)
@@ -85,9 +121,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - perf(docusaurus): added remixicon and roboto locally [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)
-- Upgrade Jenkinsfile storybook to yarn 3 [`d20de8d`](https://github.com/eea/volto-eea-design-system/commit/d20de8d6e21a14660b7b5125a80218a8a6f19e62)
-- Release 1.0.0-alpha.5 [`dcd60c9`](https://github.com/eea/volto-eea-design-system/commit/dcd60c9285caf60b23ed97a9ca5daed0a943bc24)
 - feature(Docusaurus): Updates on color palette information including thematic websites #231 from eea/refactor-docusaurus [`ec7843d`](https://github.com/eea/volto-eea-design-system/commit/ec7843dea07f626dc1c71ae1baa8bb5b0caa52f3)
+- Upgrade Jenkinsfile storybook to yarn 3 [`d20de8d`](https://github.com/eea/volto-eea-design-system/commit/d20de8d6e21a14660b7b5125a80218a8a6f19e62)
 - Back to dev [`563fbc5`](https://github.com/eea/volto-eea-design-system/commit/563fbc5fac0d4b0295690d0a3a4e04271753f18a)
 
 ### [1.0.0-alpha.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...1.0.0-alpha.4) - 2022-11-22

package/website/docs/webdev/3-Guidelines/3-images.md

@@ -16,6 +16,12 @@ _Illustrations_: For static content that is transformable into something visual,
 
 _Infographics_: Use these for visual storytelling to make complex information easier to understand. For example, an infographic could describe a workflow, how an investment plan works or the law-making process.
 
+## Image copyrights
+
+Photographs, illustrations, and other images will generally be protected by copyrights as artistic works. This means that a user will usually need the permission of the copyright owner if they want to use it.
+To acknowledge a copyrighted work add three things to the image, the copyright symbol,  the year of the copyright, and the name of the copyright holder.
+
+
 ## Best practices
 
 - your visual content is relevant to the topic of the webpage

package/website/docs/webdev/md_components/media_container_image_components/usage_markdown.md

@@ -3,8 +3,9 @@
 ### Do’s
 -	use stylistic tools such as light, perspective, color, focus and composition to tell stories that are authentic and believable.
 -	the content of the photographs should be positive, optimistic, natural, realistic, warm, and welcoming. Framing should be playful and feel spontaneous
+-   use image copyrights to be respectful of the author’s ownership rights
 ### Don’ts
 -	do not use images that are too dark or do not have enough contrast
 -	do not use overlaying gradients
 -	images that are too static or that appear too symmetrical should not be used
--	do not Use images that are over exposed or over saturated
+-	do not use images that are over exposed or over saturated

package/website/docs/webdev/md_components/page_header_components/usage_markdown.md

@@ -1,24 +1,27 @@
-The page header component provides users the context of the page. It is always placed just below the site header. 
+The page header component provides the users with the context of the page. It is always placed just below the site header. 
 
 ### Anatomy
 
 | **Components**                                                                                                                                                                                                             | **Mandatory** | **Optional** |
 | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------ |
 | **Page title**                                                                                                                                                                                                                   | yes           | no         |
-| **Meta( content type, published date, modified date, reading time )**                                                                                                                                                                                                             | no           | yes          |
+| **Meta (content type, published date, modified date, reading time)**                                                                                                                                                                                                             | no           | yes          |
 | **Download - Bookmark actions**                                                                                                                                                                                                           | no            | yes          |
-| **Breadcrumb**<br />Breadcrumb component provides information on the page and its relationship to the site's hierarchy and structure.<br />It is optional if your website's navigational structure has less than 3 levels. | no            | yes          |
+| **Breadcrumb**<br />The breadcrumb component provides information on the page and its relationship to the site's hierarchy and structure.<br />It is optional if your website's navigational structure has less than 3 levels. | no            | yes          |
+| **Image copyrights** ***(only if there is a header image)*** <br />Image copyright is the legal ownership of an image.                                                                                                                                                                                                            |yes            | no          |
+
 
 
 ### Do's
 
 - ensure the pages contain all the components and elements in the anatomy table above
 - always use a page header when building your internal pages
-- when choosing a background image, make sure it highlights the main object related to the content, and it is meaningful
+- when choosing a background image, make sure it highlights the main object related to the content and it is meaningful
+- choose image copyright text color according to the image, use light font color on darker images and darker font color on lighter ones
 
 ### Don'ts
 
-- don't use more than one page header per page
+- don't use more than one-page header per page
 - do not use a background image unless there is a communication need, as it might be a distraction
 
 ### When to use
@@ -27,4 +30,4 @@ The page header component provides users the context of the page. It is always p
 
 ### When not to use
 
-- page header is not used for homepage of the website
+- the page header is not used for the homepage of the website