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

package/CHANGELOG.md

@@ -4,6 +4,91 @@ 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
+
+- feat(Iconography): import and showcase remix icons [Antonis Tarantilis - [`777112f`](https://github.com/eea/volto-eea-design-system/commit/777112f7e77ce8c74c3fd4384bff6ec9694aba04)]
+
+#### :bug: Bug Fixes
+
+- fix(contentBox): avoid text decoration for header-link added on cards [David Ichim - [`3ccb592`](https://github.com/eea/volto-eea-design-system/commit/3ccb592db6f465cec59124b94fb6918b513bb761)]
+- fix(label): color for yellow variant as white isn't accessible on yellow color [David Ichim - [`91d8880`](https://github.com/eea/volto-eea-design-system/commit/91d8880a829d2728c49a1953f6d2d8c2c812990c)]
+- fix(label): margin value for ribbon image left and right margin [David Ichim - [`f8e1129`](https://github.com/eea/volto-eea-design-system/commit/f8e1129734709d6034539a6522105af9d43fef20)]
+- fix(lists): bullet position by using padding instead of margin [David Ichim - [`0ecae2e`](https://github.com/eea/volto-eea-design-system/commit/0ecae2e7fe61b98d8795f876a525fbbc873bf799)]
+- fix(docusaurus): right bar overflow fix [Manthos Matzios - [`197c763`](https://github.com/eea/volto-eea-design-system/commit/197c763624f70556c62379bc0751763725d0fed3)]
+
+#### :nail_care: Enhancements
+
+- change(tag): set gap on tags element for margin between tag elements [David Ichim - [`726bc6d`](https://github.com/eea/volto-eea-design-system/commit/726bc6da821a366a5afa03659e614cc73ed02c0b)]
+- refactor(docusaurus): move supplementary, state and link colors to partials [Giorgos Stamatis - [`2776be3`](https://github.com/eea/volto-eea-design-system/commit/2776be32615d7a6bdd8561a523fb9cfb1a85e38b)]
+- refactor(docusaurus): fix side menu / moved more content in palette partial [Giorgos Stamatis - [`f5b7077`](https://github.com/eea/volto-eea-design-system/commit/f5b70775471369ca8f3193784b9bc66caa8fb76f)]
+- refactor(docusaurus): eea color palette in separate file [Giorgos Stamatis - [`6c855df`](https://github.com/eea/volto-eea-design-system/commit/6c855df9c2238f8d21860ade4578aa969b68448e)]
+- refactor(docusaurus): classes for color boxes [Giorgos Stamatis - [`80219d5`](https://github.com/eea/volto-eea-design-system/commit/80219d52bc63842d8e6382dbbe7d43cdc8a29b9c)]
+- perf(docusaurus): added remixicon and roboto locally [Giorgos Stamatis - [`b67b1a7`](https://github.com/eea/volto-eea-design-system/commit/b67b1a72bc9cdc7c62a25967e81b430f8b62d558)]
+
+#### :house: Internal changes
+
+- chore(colours): fix wrong class name [Giorgos Stamatis - [`51ad0a8`](https://github.com/eea/volto-eea-design-system/commit/51ad0a8232f7f35cae05f5861d7822db852b3f8d)]
+
+#### :house: Documentation changes
+
+- docs(colors): switch FISE logo to png [Giorgos Stamatis - [`335471f`](https://github.com/eea/volto-eea-design-system/commit/335471fd95bbd78cd7bd80b960272baa0a32e1c5)]
+- docs(colours): adjust logos heights [Antonis Tarantilis - [`854d4fb`](https://github.com/eea/volto-eea-design-system/commit/854d4fb761be7307e83e5dd2eb0fe5a0117727c5)]
+- docs(colors): thematic pages integration [Dora Anastasiou - [`ea7a422`](https://github.com/eea/volto-eea-design-system/commit/ea7a4220a93d3fd2f437b51462f7f19d99f52595)]
+- docs(colors): fix swatches accessibility [Dora Anastasiou - [`306cb74`](https://github.com/eea/volto-eea-design-system/commit/306cb74d3e06390a9c15da9b8b29c9d3c8f0f6c5)]
+- docs(typography): merge designer and dev units [Giorgos Stamatis - [`65c240e`](https://github.com/eea/volto-eea-design-system/commit/65c240eddbf20b3fc870d301b96837f49ad9caca)]
+- docs(colors): updated visited [Dora Anastasiou - [`0248fd1`](https://github.com/eea/volto-eea-design-system/commit/0248fd164cbf85168945797244977c305c67608d)]
+- docs(FISE): replaced logo [Giorgos Stamatis - [`f7d8331`](https://github.com/eea/volto-eea-design-system/commit/f7d833127f769d79f099618b98789c6929b4ba08)]
+- docs(colors): blue-grey-6 adjustment [Giorgos Stamatis - [`e7ab2d1`](https://github.com/eea/volto-eea-design-system/commit/e7ab2d15d3a617bc5b3713897f3e3521d9e2720a)]
+- docs(docusaurus): typography and colors fixes according to comments on PR [Manthos Matzios - [`ae20a72`](https://github.com/eea/volto-eea-design-system/commit/ae20a7258cc88465fa0937895c2999952736f456)]
+- docs(typography): readded extra font sizes, fixed fluid [Manthos Matzios - [`a4a5d89`](https://github.com/eea/volto-eea-design-system/commit/a4a5d892538a9713d14ac718b1bf2c771be09810)]
+- docs(colors): minors updates and instructions [Manthos Matzios - [`84ac882`](https://github.com/eea/volto-eea-design-system/commit/84ac8828e430b4af2b461534b4e2f81189080145)]
+- docs(docusaurus): Iconography updates, thematic platforms [Dora Anastasiou - [`2a0e596`](https://github.com/eea/volto-eea-design-system/commit/2a0e596bd002290e0759d8c5e568da4d318f7d59)]
+- docs(colours): added active colour [Manthos Matzios - [`574f7a9`](https://github.com/eea/volto-eea-design-system/commit/574f7a95ea8a9510d03a104ad72fafafcae5d738)]
+- docs(typography): changed em to percentages [Manthos Matzios - [`d417600`](https://github.com/eea/volto-eea-design-system/commit/d4176007ff4b421bc988b618488e0ba6b550f9fe)]
+- docs(docusaurus): color updates [Manthos Matzios - [`cc13b54`](https://github.com/eea/volto-eea-design-system/commit/cc13b5499a9ae13bb45925a057f8ff4d6a2e4643)]
+
+#### :hammer_and_wrench: Others
+
+- 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)]
 ### [1.0.0-alpha.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...1.0.0-alpha.4) - 22 November 2022
 
 #### :bug: Bug Fixes
@@ -24,7 +109,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Release 1.0.0-alpha.4 [Alin Voinea - [`ec8938b`](https://github.com/eea/volto-eea-design-system/commit/ec8938b4847a2973c7a853896d609d2de0041019)]
 - Exclude mockups from npm package [Alin Voinea - [`634af8e`](https://github.com/eea/volto-eea-design-system/commit/634af8e3ddabec36a18597d8d7638888269875fc)]
 - Update eea.github.io on all commits in develop branch [Alin Voinea - [`3d0b8d7`](https://github.com/eea/volto-eea-design-system/commit/3d0b8d745138bd2e0219560c8c895ce2c56dbf04)]
 - Trigger re-build [Alin Voinea - [`3566dd2`](https://github.com/eea/volto-eea-design-system/commit/3566dd2b4d2cd12496e05b792c85a78de550dd50)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.4",
+  "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",
@@ -21,14 +21,14 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
-    "remixicon": "2.5.0",
+    "react-countup": "^6.3.0",
     "react-slick": "^0.28.1",
-    "slick-carousel": "^1.8.1",
-    "react-countup": "^6.3.0"
+    "remixicon": "2.5.0",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "@plone/scripts": "*",
     "@cypress/code-coverage": "^3.10.0",
+    "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "md5": "^2.3.0"
   },

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
@@ -134,4 +135,5 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
+
 /* End Config */

package/theme/themes/eea/elements/label.variables

@@ -9,8 +9,8 @@
 @labelFontSize: @fontSize;
 
 @verticalAlign: baseline;
-@verticalMargin: 0em;
-@horizontalMargin: @relative2px;
+@verticalMargin: 0;
+@horizontalMargin: 0;
 @backgroundColor: @grey;
 @color: @white;
 @backgroundImage: none;
@@ -142,7 +142,7 @@
 @rightRibbonOffset:  calc(100% + @ribbonMargin + @ribbonTriangleSize);
 
 @ribbonImageTopDistance: 1rem;
-@ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
+@ribbonImageMargin: 0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);
 @rightRibbonImageOffset:  calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
 
@@ -173,7 +173,7 @@
 
 @redTextColor: @white;
 @orangeTextColor: @white;
-@yellowTextColor: @white;
+@yellowTextColor: @textColor;
 @oliveTextColor: @white;
 @greenTextColor: @white;
 @tealTextColor: @white;
@@ -187,7 +187,7 @@
 
 @redHoverTextColor: @white;
 @orangeHoverTextColor: @white;
-@yellowHoverTextColor: @white;
+@yellowHoverTextColor: @textColor;
 @oliveHoverTextColor: @white;
 @greenHoverTextColor: @white;
 @tealHoverTextColor: @white;

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

@@ -19,6 +19,12 @@ dl dd {
 }
 
 /* Unordered list */
+
+// use padding instead
+ul.ui.list, .ui.bulleted.list {
+  padding-left: @bulletDistance;
+  margin-left: 0;
+}
 .ui.bulleted.list .list > .item:before,
 .ui.bulleted.list .list > a.item:before,
 .ui.bulleted.list > .item:before,

package/theme/themes/eea/elements/list.variables

@@ -165,7 +165,7 @@
 /* Bulleted */
 
 @bulletSize: 1.1rem;
-@bulletDistance: 1.25rem;
+@bulletDistance: @rem-space-5;
 @bulletOffset: -@bulletDistance;
 
 @bulletOpacity: 1;

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/contentBox.less

@@ -55,7 +55,7 @@
   --text-color-hover: @backgroundColorSupplementary;
 }
 // inherit link
-.content-box[class*="ary"] a:not(.ui, .item) {
+.content-box[class*="ary"] a:not(.ui, .item, .header-link) {
   color: inherit;
   text-decoration: underline;
 }
@@ -64,4 +64,4 @@
 .content-box .slate-editor-link {
   color: inherit;
   text-decoration: underline;
-}
+}

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();