@eeacms/volto-eea-design-system 0.4.0 → 0.4.3

package/CHANGELOG.md

@@ -4,8 +4,82 @@ 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).
 
+#### [0.4.3](https://github.com/eea/volto-eea-design-system/compare/0.4.2...0.4.3)
+
+- Autobuild of docusaurus docs [`adc7b64`](https://github.com/eea/volto-eea-design-system/commit/adc7b64312b98a56a893bc99571149353a8c0f00)
+- fix(edit): Fix columns/accordion inner toolbar padding [`fafbb52`](https://github.com/eea/volto-eea-design-system/commit/fafbb525baa60c339906dc6a33d2f9418d050be6)
+- Autobuild of docusaurus docs [`12f9a51`](https://github.com/eea/volto-eea-design-system/commit/12f9a51906a6b444857c2b2c988436eeab412064)
+- change(docusaurus): completed removal of description from guides [`42424b9`](https://github.com/eea/volto-eea-design-system/commit/42424b9213ece8d8df84d40f1b73e142cb0ffc6b)
+
+#### [0.4.2](https://github.com/eea/volto-eea-design-system/compare/0.4.1...0.4.2)
+
+> 2 June 2022
+
+- Release [`#179`](https://github.com/eea/volto-eea-design-system/pull/179)
+- Autobuild of docusaurus docs [`bc17743`](https://github.com/eea/volto-eea-design-system/commit/bc177436897f80d6ae37fe4856099733831b2c8a)
+- change(docusaurus): color guideline updates and spacing tokens documentation  #148 [`c1154ba`](https://github.com/eea/volto-eea-design-system/commit/c1154ba172c3b3b40b565c2bcb590f1a5e6b25a4)
+- change(docusaurus): moved color swatches around in the color guide [`8a395fc`](https://github.com/eea/volto-eea-design-system/commit/8a395fce52a32cf92449a24d3d4cce5abf25a284)
+- change(docusaurus): added category yml for all sections [`1740572`](https://github.com/eea/volto-eea-design-system/commit/17405728e3f44828da50890b9fc0f4e8a07f8bf2)
+- change(docusaurus): rename gap to space and added em spaces [`f5b042d`](https://github.com/eea/volto-eea-design-system/commit/f5b042d311518ec3fb32c7f259c39ff62d4547f8)
+- change(docusaurus): modified story links to avoid broken usage tabs [`78dc8d8`](https://github.com/eea/volto-eea-design-system/commit/78dc8d8f4e7cade3ab0e911e6dc002eefc1e7986)
+- change(docusaurus): removed description from components and introduced category listing [`f220bf0`](https://github.com/eea/volto-eea-design-system/commit/f220bf0785f5aaede8c25c4164120b09de67b018)
+- change(docusaurus): moved md_components files into webdev/md_components [`73c1c08`](https://github.com/eea/volto-eea-design-system/commit/73c1c08a270d504fa6f2ba2579bcb3e6e25fb112)
+- change(docusaurus): renamed several file id's so that they match the incremental naming sequence [`11299c9`](https://github.com/eea/volto-eea-design-system/commit/11299c9a4c41ca901926f852227dbca0bc1aee17)
+- change(docusaurus): moved extra docs to webdev section [`1ce0797`](https://github.com/eea/volto-eea-design-system/commit/1ce0797b91418272e4e405467cd1468292620005)
+- merge changes from develop into docusaurus token documentation [`a940138`](https://github.com/eea/volto-eea-design-system/commit/a9401384ddf5fcfbf29e50d34f3d7851be85f19a)
+- perf(docs): restructuring order [`8f4134d`](https://github.com/eea/volto-eea-design-system/commit/8f4134d81d1cc59b8ba0d8669415b5eb31c0513d)
+- docs(Docusaurus): timeline, testimonial, quote and tags [`aaa54ec`](https://github.com/eea/volto-eea-design-system/commit/aaa54ecbe182872ffc7fff275d5065ebe790d348)
+- docs(spacing): add relative gap tokens [`92abc8f`](https://github.com/eea/volto-eea-design-system/commit/92abc8fff2c7006e2c64684048e7783216a230bb)
+- docs(Docusaurus): labeled icons [`f6a0f61`](https://github.com/eea/volto-eea-design-system/commit/f6a0f61ede3a36c7d66d9b3091b93b0b5ff9a445)
+- docs(spacing): aligned images [`e946fe5`](https://github.com/eea/volto-eea-design-system/commit/e946fe59457b861a31939e99adf4b380777e01e0)
+- docs(spacing): new image [`fcd3294`](https://github.com/eea/volto-eea-design-system/commit/fcd3294d53db76580b8bffc9678a09fd65b33113)
+- docs(spacing): add missing gaps [`442db46`](https://github.com/eea/volto-eea-design-system/commit/442db468830150c8e4ad5f91775fc5b3c47dd655)
+- docs(colors): updated colors [`a28c99e`](https://github.com/eea/volto-eea-design-system/commit/a28c99e60867c1eaa1b7b68d4154ccaa8c9ef958)
+- docs(spacing): add spacing gap tokens [`2d53727`](https://github.com/eea/volto-eea-design-system/commit/2d53727f8e817588421efea464e849c9f9e16dce)
+- docs(typography): add font size and line height tokens [`2ff65e4`](https://github.com/eea/volto-eea-design-system/commit/2ff65e47cfe56eb3efe976300b764ba13f8685ce)
+- docs(docusaurus): minor fix [`6e66513`](https://github.com/eea/volto-eea-design-system/commit/6e66513f08cff598881ce1051b482ddadf8e0593)
+- docs(tags/content): new page about tags and content [`60be402`](https://github.com/eea/volto-eea-design-system/commit/60be40268a77606c53fc45641bc22166b50b75e7)
+
+#### [0.4.1](https://github.com/eea/volto-eea-design-system/compare/0.4.0...0.4.1)
+
+> 2 June 2022
+
+- Release [`#178`](https://github.com/eea/volto-eea-design-system/pull/178)
+- [R3] Labeled icons [`#137`](https://github.com/eea/volto-eea-design-system/pull/137)
+- Autobuild of docusaurus docs [`724be48`](https://github.com/eea/volto-eea-design-system/commit/724be48bebb5421663969b694fca79181f007977)
+- refactor(LanguageLabeledIcons):minor storybook change [`78f5544`](https://github.com/eea/volto-eea-design-system/commit/78f55442a80cbc2f716ba81274ed08204e3c502a)
+- refactor(LanguageLabeledIcon): set language code to uppercase and minor storybook change [`ac28693`](https://github.com/eea/volto-eea-design-system/commit/ac286931282c0a69bc6d7803e96cbe302db8994f)
+- refactor(labeledIcon): adjust paddings [`9c1ecdd`](https://github.com/eea/volto-eea-design-system/commit/9c1ecddc52c81be1d952d0af67862a284eba9eec)
+- refactor(labeledIcon): add group wrapper in labeled icon stories [`4b7dd31`](https://github.com/eea/volto-eea-design-system/commit/4b7dd314230145b6239fd800d41f546ab5d9eebb)
+- fix(LabeledIconGroup):fix based on Langauge & Download Labeled icon components changes [`3015864`](https://github.com/eea/volto-eea-design-system/commit/3015864ce740f534aa204402f85a9f392e342513)
+- refactor(LanguageLabeledIcon):implement with pop up [`0f3dd8f`](https://github.com/eea/volto-eea-design-system/commit/0f3dd8f0388484f94351a0ab0798ab53e84c9229)
+- refactor(DownloadLabeledIcon):implement with pop up [`aa61f9b`](https://github.com/eea/volto-eea-design-system/commit/aa61f9b7d449c08c08bc4c004da6a0458598c828)
+- refactor(labeledIcons): update margins for group labeled icons [`5fa5ca9`](https://github.com/eea/volto-eea-design-system/commit/5fa5ca9103a5d8ad1510c90cc8c46d0c82abcc63)
+- refactor(labeledIcons): update colors on download links [`c042642`](https://github.com/eea/volto-eea-design-system/commit/c04264229c91bfdea927fd22f4ee1e8ddbcebd5c)
+- refactor(labeledIcons): adjust language labeled icon to figma [`5741e3d`](https://github.com/eea/volto-eea-design-system/commit/5741e3d2e95665ef12670335b12d29cfbf998fdc)
+- refactor(labeledIcons): adjust new tab labeled icon to figma and replace px with rems [`904615d`](https://github.com/eea/volto-eea-design-system/commit/904615d789ea711678f43ce9f9d02a450289031f)
+- refactor(labeledIcons): add variable for icon color [`9f9d3cb`](https://github.com/eea/volto-eea-design-system/commit/9f9d3cba5115c5c91aaaca49c1f834950400673a)
+- refactor(labeledIcons): adjust download icon to figma and replace px with rems [`4ae8530`](https://github.com/eea/volto-eea-design-system/commit/4ae85307a62526fed75ef0b1d37ad59076370b5a)
+- fix(LanguageLabeledIcon):bug fix & languages change [`1436e2b`](https://github.com/eea/volto-eea-design-system/commit/1436e2bc270f8f079f07b7909254bd2e6e087084)
+- fix(Labeled Icons):minor bug fix [`00f3022`](https://github.com/eea/volto-eea-design-system/commit/00f3022cdc2bfad634707f0d6d05768868f599be)
+- feat(languageLabeledIcon) : add new component [`110558e`](https://github.com/eea/volto-eea-design-system/commit/110558eeec37d5b5f616a95298a313ba230dd6f4)
+- chore(LabeledIconGroup) : lint changes [`ab36476`](https://github.com/eea/volto-eea-design-system/commit/ab364763bb2526adbbb7fc3c656a16b497568940)
+- fix(LabeledIconGroup) : fix links for tests [`daa1065`](https://github.com/eea/volto-eea-design-system/commit/daa10653ca37f3e83302e2ebcc566b5f5ec4c4d9)
+- chore(labeledIconGroup) : lint changes [`535cee4`](https://github.com/eea/volto-eea-design-system/commit/535cee4795dff75b35856cb4406a9bd33ee07ca4)
+- feat(LanguageLabeledIcon):add new component [`d00200c`](https://github.com/eea/volto-eea-design-system/commit/d00200c278e1dab02b449b460a325e0f2e7b8ccd)
+- feat(labeledIconGroup) : add new component [`787d648`](https://github.com/eea/volto-eea-design-system/commit/787d648342d78c4f9d28fde9d08e83089ef7b08f)
+- fix(LabeledIcon) : fix lint errors [`91b042f`](https://github.com/eea/volto-eea-design-system/commit/91b042f8c16bd3e99659c1c24a5f2a946c72b03f)
+- fix(newTabLabeledIcon) : add link item [`b1a9ada`](https://github.com/eea/volto-eea-design-system/commit/b1a9ada3dd7dae9e1841cfde5319a6ab37b15de2)
+- feat(newTabLabeledIcon) : add new component [`8f5cd31`](https://github.com/eea/volto-eea-design-system/commit/8f5cd31257a306a58c1d9cdbf7cb428701412369)
+- style(downloadLabeledIcon) : fix alignment [`4558017`](https://github.com/eea/volto-eea-design-system/commit/455801701d2958515885ba2c398312f0c56057b0)
+- style(downloadLabeledIcon) : fix styling [`6d8e3ac`](https://github.com/eea/volto-eea-design-system/commit/6d8e3acb3bac1a4174d4bb526d6188cb5e5f8faa)
+- feat(DownLoadLabeledIcon) : add new component [`6ea2fa1`](https://github.com/eea/volto-eea-design-system/commit/6ea2fa1ec17ce235401a8ac741afa8fede920d26)
+
 #### [0.4.0](https://github.com/eea/volto-eea-design-system/compare/0.3.1...0.4.0)
 
+> 1 June 2022
+
+- Release [`#177`](https://github.com/eea/volto-eea-design-system/pull/177)
 - [Homepage] Carousel [`#161`](https://github.com/eea/volto-eea-design-system/pull/161)
 - [R2] Label [`#160`](https://github.com/eea/volto-eea-design-system/pull/160)
 - docs(homepage): adding homepage with links for upcoming sections [`#166`](https://github.com/eea/volto-eea-design-system/pull/166)

package/package.json

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

package/src/semantic.less

@@ -260,3 +260,19 @@
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/relatedContent';
 }
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/downloadLabeledIcon';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/newTabLabeledIcon';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/labeledIconGroup';
+}
+
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/languageLabeledIcon';
+}

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Icon, Popup } from 'semantic-ui-react';
+
+function DownloadLabeledIcon({ children, ...rest }) {
+  return (
+    <div className="eea download labeled icon">
+      <Popup
+        className="download-popup"
+        trigger={rest.trigger}
+        content={children}
+        basic
+        on="click"
+        position="bottom center"
+      />
+    </div>
+  );
+}
+
+const Label = ({ children, ...rest }) => {
+  return <div className="label">{children}</div>;
+};
+
+const IconItem = ({ children, ...rest }) => {
+  return (
+    <div className="icon wrapper">
+      <Icon className={rest.icon} />
+    </div>
+  );
+};
+
+const Dropdown = ({ children, ...rest }) => {
+  return (
+    <div className="dropdown">
+      <div className="link wrapper">
+        <ul>
+          {rest.links !== null &&
+            rest.links.map((item, index) => (
+              <li key={index}>
+                <a href={item.href}>
+                  {item.linkName} <Icon className={rest.downloadIcon} />
+                </a>
+              </li>
+            ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+DownloadLabeledIcon.Label = Label;
+DownloadLabeledIcon.Icon = IconItem;
+DownloadLabeledIcon.Dropdown = Dropdown;
+
+export default DownloadLabeledIcon;

package/src/ui/DownloadLabeledIcon/DownloadLabeledIcon.stories.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import DownloadLabeledIcon from './DownloadLabeledIcon';
+import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+
+export default {
+  title: 'Components/Labeled Icons/Download',
+  component: DownloadLabeledIcon,
+  argTypes: {
+    label: {
+      description: 'Download Label',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      description: 'Download Icon',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    downloadIcon: {
+      description: 'Download option Icon',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    links: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <LabeledIconGroup>
+    <DownloadLabeledIcon
+      {...args}
+      trigger={
+        <div>
+          <DownloadLabeledIcon.Icon {...args}>
+            {args.icon}
+          </DownloadLabeledIcon.Icon>
+          <DownloadLabeledIcon.Label>{args.label}</DownloadLabeledIcon.Label>
+        </div>
+      }
+    >
+      <DownloadLabeledIcon.Dropdown {...args}></DownloadLabeledIcon.Dropdown>
+    </DownloadLabeledIcon>
+  </LabeledIconGroup>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  label: 'Download',
+  icon: 'ri-download-2-fill',
+  downloadIcon: 'ri-download-2-fill',
+  links: [
+    { linkName: 'PDF', href: '/#' },
+    { linkName: 'SVG', href: '/#' },
+    { linkName: 'PNG', href: '/#' },
+  ],
+};

package/src/ui/LabeledIconGroup/LabeledIconGroup.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import NewTabLabeledIcon from '../NewTabLabeledIcon/NewTabLabeledIcon';
+import DownloadLabeledIcon from '../DownloadLabeledIcon/DownloadLabeledIcon';
+import LanguageLabeledIcon from '../LanguageLabeledIcon/LanguageLabeledIcon';
+
+function LabeledIconGroup({ children, ...rest }) {
+  return (
+    <div className="eea labeled icon group" {...rest}>
+      {children}
+    </div>
+  );
+}
+
+LabeledIconGroup.Download = ({ children, ...rest }) => {
+  return (
+    <div className="group wrapper">
+      <DownloadLabeledIcon
+        {...rest}
+        trigger={
+          <div>
+            <DownloadLabeledIcon.Icon {...rest}>
+              {rest.icon}
+            </DownloadLabeledIcon.Icon>
+            <DownloadLabeledIcon.Label>{rest.label}</DownloadLabeledIcon.Label>
+          </div>
+        }
+      >
+        <DownloadLabeledIcon.Dropdown {...rest}></DownloadLabeledIcon.Dropdown>
+      </DownloadLabeledIcon>
+    </div>
+  );
+};
+
+LabeledIconGroup.NewTab = ({ children, ...rest }) => {
+  return (
+    <div className="group wrapper">
+      <NewTabLabeledIcon {...rest}>
+        <NewTabLabeledIcon.Icon {...rest}>{rest.icon}</NewTabLabeledIcon.Icon>
+        <NewTabLabeledIcon.Label>{rest.label}</NewTabLabeledIcon.Label>
+      </NewTabLabeledIcon>
+    </div>
+  );
+};
+
+LabeledIconGroup.Language = ({ children, ...rest }) => {
+  return (
+    <div className="group wrapper">
+      <LanguageLabeledIcon
+        {...rest}
+        trigger={
+          <div>
+            <LanguageLabeledIcon.Icon
+              icon={rest.icon}
+            ></LanguageLabeledIcon.Icon>
+            <LanguageLabeledIcon.Label>{rest.label}</LanguageLabeledIcon.Label>
+          </div>
+        }
+      >
+        <LanguageLabeledIcon.Dropdown
+          items={rest.items}
+        ></LanguageLabeledIcon.Dropdown>
+      </LanguageLabeledIcon>
+    </div>
+  );
+};
+
+export default LabeledIconGroup;

package/src/ui/LabeledIconGroup/LabeledIconGroup.stories.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import LabeledIconGroup from './LabeledIconGroup';
+// eslint-disable-next-line import/no-unresolved
+
+export default {
+  title: 'Components/Labeled Icons/Group',
+  component: LabeledIconGroup,
+  argTypes: {
+    tab: {
+      description: 'NewTabLabeledIcon Component Contents',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    download: {
+      description: 'DownloadLabeledIcon Component Contents',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    language: {
+      description: 'LanguageLabeledIcon Component Contents',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <div>
+    <LabeledIconGroup {...args}>
+      <LabeledIconGroup.Download {...args.download}></LabeledIconGroup.Download>
+      <LabeledIconGroup.NewTab {...args.tab}>
+        {args.tab.label}
+      </LabeledIconGroup.NewTab>
+      <LabeledIconGroup.Language {...args.language}></LabeledIconGroup.Language>
+    </LabeledIconGroup>
+  </div>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  tab: {
+    label: 'Open in new Tab',
+    link: '/#',
+    icon: 'ri-share-box-fill',
+  },
+  download: {
+    label: 'Download',
+    icon: 'ri-download-2-fill',
+    downloadIcon: 'ri-download-2-fill',
+    links: [
+      { linkName: 'PDF', href: '/#' },
+      { linkName: 'SVG', href: '/#' },
+      { linkName: 'PNG', href: '/#' },
+    ],
+  },
+  language: {
+    label: 'Language',
+    icon: <i className="ri-global-line"></i>,
+    items: [
+      { name: 'English', code: 'en' },
+      { name: 'Eesti', code: 'et' },
+      { name: 'Suomi', code: 'fi' },
+      { name: 'Français', code: 'fr' },
+      { name: 'Deutsch', code: 'de' },
+      { name: 'Magyar', code: 'hu' },
+    ],
+  },
+};

package/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.jsx

@@ -0,0 +1,92 @@
+import React, { useState, useContext, createContext } from 'react';
+import { Popup } from 'semantic-ui-react';
+
+const LanguageContext = createContext();
+
+function LanguageLabeledIcon({ children, ...rest }) {
+  const [language, setLanguage] = useState('EN');
+  return (
+    <LanguageContext.Provider
+      value={{
+        language: language,
+        setLanguage: setLanguage,
+      }}
+    >
+      <div className="eea language labeled icon">
+        <Popup
+          className="language-popup"
+          trigger={rest.trigger}
+          content={children}
+          basic
+          on="click"
+          position="bottom center"
+        />
+      </div>
+    </LanguageContext.Provider>
+  );
+}
+
+const Label = ({ children, ...rest }) => {
+  return <div className="label">{children}</div>;
+};
+
+LanguageLabeledIcon.Label = Label;
+
+const Icon = ({ children, ...rest }) => {
+  const context = useContext(LanguageContext);
+  return (
+    <div className="icon wrapper">
+      {rest.icon}
+      <span>{context.language}</span>
+    </div>
+  );
+};
+
+LanguageLabeledIcon.Icon = Icon;
+
+const Dropdown = ({ children, ...rest }) => {
+  const context = useContext(LanguageContext);
+
+  var length = rest.items.length;
+  var first = rest.items.slice(0, length / 2);
+  var second = rest.items.slice(length / 2);
+
+  return (
+    <div className="dropdown">
+      <div className={`link wrapper`}>
+        <ul>
+          {first.map((item, index) => (
+            <li key={index}>
+              <div
+                onClick={() => context.setLanguage(item.code.toUpperCase())}
+                onKeyDown={() => context.setHidden(!context.hidden)}
+                role="button"
+                tabIndex={0}
+              >
+                {item.name} <span>{item.code.toUpperCase()}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <ul>
+          {second.map((item, index) => (
+            <li key={index}>
+              <div
+                onClick={() => context.setLanguage(item.code.toUpperCase())}
+                onKeyDown={() => context.setHidden(!context.hidden)}
+                role="button"
+                tabIndex={0}
+              >
+                {item.name} <span>{item.code.toUpperCase()}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+LanguageLabeledIcon.Dropdown = Dropdown;
+
+export default LanguageLabeledIcon;

package/src/ui/LanguageLabeledIcon/LanguageLabeledIcon.stories.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import LanguageLabeledIcon from './LanguageLabeledIcon';
+import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+
+export default {
+  title: 'Components/Labeled Icons/Language',
+  component: LanguageLabeledIcon,
+  argTypes: {
+    label: {
+      description: 'Download Label',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      description: 'Language Icon',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    items: {
+      description: 'array of language list',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <LabeledIconGroup>
+    <LanguageLabeledIcon
+      {...args}
+      trigger={
+        <div>
+          <LanguageLabeledIcon.Icon icon={args.icon}></LanguageLabeledIcon.Icon>
+          <LanguageLabeledIcon.Label>{args.label}</LanguageLabeledIcon.Label>
+        </div>
+      }
+    >
+      <LanguageLabeledIcon.Dropdown
+        items={args.items}
+      ></LanguageLabeledIcon.Dropdown>
+    </LanguageLabeledIcon>
+  </LabeledIconGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Language',
+  icon: <i className="ri-global-line"></i>,
+  items: [
+    { name: 'English', code: 'en' },
+    { name: 'Eesti', code: 'et' },
+    { name: 'Suomi', code: 'fi' },
+    { name: 'Français', code: 'fr' },
+    { name: 'Deutsch', code: 'de' },
+    { name: 'Magyar', code: 'hu' },
+  ],
+};

package/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+
+function NewTabLabeledIcon({ children, ...rest }) {
+  return (
+    <div className="eea new tab labeled icon">
+      <a target="_blank" rel="noreferrer" href={rest.link}>
+        {children}
+      </a>
+    </div>
+  );
+}
+
+NewTabLabeledIcon.Label = ({ children, ...rest }) => {
+  return <div className="label">{children}</div>;
+};
+
+NewTabLabeledIcon.Icon = ({ children, ...rest }) => {
+  return (
+    <div className="icon wrapper">
+      <Icon className={rest.icon} />
+    </div>
+  );
+};
+
+export default NewTabLabeledIcon;

package/src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import NewTabLabeledIcon from './NewTabLabeledIcon';
+import LabeledIconGroup from '../LabeledIconGroup/LabeledIconGroup';
+
+export default {
+  title: 'Components/Labeled Icons/New Tab',
+  component: NewTabLabeledIcon,
+  argTypes: {
+    label: {
+      description: 'New Tab Label',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    link: {
+      description: 'New Tab Link',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    icon: {
+      description: 'New Tab Icon',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <LabeledIconGroup>
+    <NewTabLabeledIcon {...args}>
+      <NewTabLabeledIcon.Icon {...args} e>
+        {args.icon}
+      </NewTabLabeledIcon.Icon>
+      <NewTabLabeledIcon.Label>{args.label}</NewTabLabeledIcon.Label>
+    </NewTabLabeledIcon>
+  </LabeledIconGroup>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  label: 'Open in new Tab',
+  link: '/#',
+  icon: 'ri-share-box-fill',
+};

package/src/ui/index.js

@@ -26,4 +26,12 @@ export AvatarGrid from './Card/AvatarGrid/AvatarGrid';
 
 export KeyContent from './KeyContent/KeyContent';
 
+export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon';
+
+export NewTabLabeledIcon from './NewTabLabeledIcon/NewTabLabeledIcon';
+
+export LabeledIconGroup from './LabeledIconGroup/LabeledIconGroup';
+
+export LanguageLabeledIcon from './LanguageLabeledIcon/LanguageLabeledIcon';
+
 export RelatedContent from './Card/RelatedContent/RelatedContent';

package/theme/theme.config

@@ -90,6 +90,10 @@
 @avatarGrid  : 'eea';
 @keyContent  : 'eea';
 @publicationCard  : 'eea';
+@downloadLabeledIcon :'eea';
+@newTabLabeledIcon : 'eea';
+@labeledIconGroup : 'eea';
+@languageLabeledIcon  : 'eea';
 @relatedContent  : 'eea';
 
 /*******************************

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

@@ -94,7 +94,7 @@
 
 // Maps, Video and Image blocks use buttons without
 // icons, fix them in css for now
-#page-edit .basic.button {
+.toolbar-inner .ui.buttons .basic.button {
   padding: 0;
   background-color: transparent !important;
   box-shadow: none !important;

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

@@ -0,0 +1,87 @@
+@type: 'extra';
+@element: 'downloadLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+        Download Labeled Icon
+*******************************/
+.eea.download.labeled.icon {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: @downloadLabeledIconWidth;
+  min-width: @downloadLabeledIconMinWidth;
+  text-align: @downloadLabeledIconTextAlign;
+
+  .label {
+    width: @downloadLabeledIconLabelWidth;
+    font-size: @downloadLabeledIconLabelFontSize;
+    color: @downloadLabeledIconLabelColor;
+    cursor: pointer;
+  }
+  .icon.wrapper {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    width: @downloadLabeledIconWrapperWidth;
+    padding: @downloadLabeledIconWrapperPadding;
+
+    .icon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: @downloadLabeledIconIconFontSize;
+      color: @downloadLabeledIconColor;
+      width: @downloadLabeledIconIconWidth;
+      height: @downloadLabeledIconWrapperIconHeight;
+    }
+  }
+}
+
+.ui.popup.download-popup {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  .dropdown {
+    position: relative;
+    width: @downloadLabeledIconDropdownWIdth;
+
+    .link.wrapper {
+      cursor: pointer;
+      background-color: @downloadLabeledIconLinkWrapperBackgroundColor;
+      z-index: @downloadLabeledIconLinkWrapperZIndex;
+      width: @downloadLabeledIconLinkWrapperWidth;
+
+      ul {
+        list-style-type: none;
+        margin: @downloadLabeledIconUlMargin;
+        padding: @downloadLabeledIconUlPaddingInlineStart;
+
+        a {
+          display: flex;
+          justify-content: center;
+          font-weight: @downloadLabeledIconALinkFontWeight;
+          font-size: @downloadLabeledIconLinkFontSize;
+          padding: @downloadLabeledIconLinkIconPadding;
+          color: @downloadLabeledIconALinkColor;
+          
+          .icon {
+            font-size: @downloadLabeledIconLinkIconFontSize;
+            line-height: @downloadLabeledIconLinkIconLineHeight;
+          }
+        }
+        a:hover {
+          color: @downloadLabeledIconALinkColorHover;
+        }
+        li:hover {
+          background-color: @downloadLabeledIconLiHover;
+        }
+      }
+    }
+    .link.wrapper.hidden {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+/*******************************
+        Download Labeled Icon
+*******************************/
+
+/* Body */
+@downloadLabeledIconWidth: min-content;
+@downloadLabeledIconMinWidth: 5rem;
+@downloadLabeledIconTextAlign: center;
+
+/* Label */
+@downloadLabeledIconLabelWidth: 100%;
+@downloadLabeledIconLabelFontSize: 0.875rem;
+@downloadLabeledIconLabelColor: @deepBlue;
+
+/* Wrapper */
+@downloadLabeledIconWrapperWidth: 100%;
+@downloadLabeledIconWrapperPadding: 0.5rem;
+
+/* Icon */
+@downloadLabeledIconIconFontSize: 1.563rem;
+@downloadLabeledIconWrapperIconHeight: 1.25rem;
+@downloadLabeledIconIconWidth: 1.25rem;
+@downloadLabeledIconColor: @mediumPersianBlue;
+
+/* Link Wrapper */
+@downloadLabeledIconLinkWrapperBackgroundColor: #f9f9f9;
+@downloadLabeledIconLinkWrapperZIndex: 1;
+@downloadLabeledIconLinkWrapperWidth: 100%;
+
+/* Dropdown */
+@downloadLabeledIconDropdownWIdth: 100%;
+
+/* List */
+@downloadLabeledIconUlMargin: 0.25rem 0;
+@downloadLabeledIconUlPaddingInlineStart: 0.25rem 0px;
+@downloadLabeledIconLiHover: @japaneseIndigo;
+
+/* Link */
+@downloadLabeledIconALinkFontWeight: 700;
+@downloadLabeledIconLinkFontSize: 0.875rem;
+@downloadLabeledIconLinkIconFontSize: 1rem;
+@downloadLabeledIconLinkIconPadding: 0.125rem 0.875rem;
+@downloadLabeledIconLinkIconLineHeight: 1.25rem;
+@downloadLabeledIconALinkColor: @japaneseIndigo;
+@downloadLabeledIconALinkColorHover: @white;

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

@@ -0,0 +1,20 @@
+@type: 'extra';
+@element: 'labeledIconGroup';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+        Labeled Icon Group
+*******************************/
+.eea.labeled.icon.group {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: @labeledIconGroupWidth;
+  padding: @labeledIconGroupPadding;
+
+  .group.wrapper {
+    margin-left: @labeledIconGroupWrapperMarginLeft;
+    margin-right: @labeledIconGroupWrapperMarginRight;
+  }
+}

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

@@ -0,0 +1,10 @@
+
+/*******************************
+        Labeled Icon Group
+*******************************/
+
+@labeledIconGroupWidth : 100%;
+@labeledIconGroupPadding : 0 2rem;
+
+@labeledIconGroupWrapperMarginLeft: 0.25rem;
+@labeledIconGroupWrapperMarginRight: 0.25rem;

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

@@ -0,0 +1,81 @@
+@type: 'extra';
+@element: 'languageLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+      Language Labeled Icon
+*******************************/
+
+.eea.language.labeled.icon {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: @languageLabeledIconWidth;
+  min-width: @languageLabeledIconMinWidth;
+  text-align: @languageLabeledIconTextAlign;
+
+  .icon.wrapper {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: @languageLabeledIconIconWrapperFontSize;
+    font-weight: @languageLabeledIconIconWrapperFontWeight;
+    color: @languageLabeledIconIconWrapperColor;
+
+    i {
+      color: @languageLabeledIconIconWrapperIconColor;
+      margin-right: @languageLabeledIconIconWrapperIconMarginRight;
+      font-size: @languageLabeledIconIconWrapperIconFontSize;
+    }
+  }
+
+  .label {
+    color: @languageLabeledIconLabelColor;
+    font-size: @languageLabeledIconLabelFontSize;
+    font-weight: @languageLabeledIconLabelFontWeight;
+    cursor: pointer;
+  }
+}
+
+.ui.popup.language-popup {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  .dropdown {
+
+    .link.wrapper {
+      display: flex;  
+      width: @languageLabeledIconDropdowLinkWrapperWidth;
+      background-color: @languageLabeledIconDropdownBackgroundColor;
+      z-index: 1;
+
+      &.hidden {
+        display: none;
+      }
+
+      ul {
+        list-style-type: none;
+        margin: 0;
+        color: @languageLabeledIconLabelUlColor;
+        padding: @languageLabeledIconLabelUlPadding;
+
+        li {
+          cursor: pointer;
+          padding: @languageLabeledIconLabelUlLiPadding;
+        }
+
+        li:hover {
+          color: @languageLabeledIconLabelUlLiColor;
+          background-color: @languageLabeledIconLabelUlLiBackgroundColor;
+        }
+
+        li span {
+          font-weight: @languageLabeledIconLabelUlLiSpanFontWeight;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+/*******************************
+      Language Labeled Icon
+*******************************/
+
+/* Body  */
+@languageLabeledIconWidth : min-content;
+@languageLabeledIconMinWidth: 7rem;
+@languageLabeledIconTextAlign: center;
+
+/* Icon Wrapper  */
+@languageLabeledIconIconWrapperFontSize : 0.875rem;
+@languageLabeledIconIconWrapperFontWeight : 400;
+@languageLabeledIconIconWrapperColor : @deepBlue;
+
+/* Icon  */
+@languageLabeledIconIconWrapperIconColor: @mediumPersianBlue;
+@languageLabeledIconIconWrapperIconMarginRight: 0.25rem;
+@languageLabeledIconIconWrapperIconFontSize: 1.5rem;
+
+/* Label  */
+@languageLabeledIconLabelColor: @deepBlue;
+@languageLabeledIconLabelFontSize: 0.875rem;
+@languageLabeledIconLabelFontWeight: 400;
+
+/* Dropdown  */
+@languageLabeledIconDropdownBackgroundColor: #f9f9f9;
+
+/* Link  */
+@languageLabeledIconDropdowLinkWrapperWidth: max-content;
+
+
+/* List  */
+@languageLabeledIconLabelUlMargin:0;
+@languageLabeledIconLabelUlColor: @japaneseIndigo;
+@languageLabeledIconLabelUlPadding: 0.25rem;
+
+/* List Item  */
+@languageLabeledIconLabelUlLiPadding: 0.125rem 0.313rem;
+@languageLabeledIconLabelUlLiColor: @white;
+@languageLabeledIconLabelUlLiBackgroundColor: @japaneseIndigo;
+@languageLabeledIconLabelUlLiSpanFontWeight: 700;

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

@@ -0,0 +1,41 @@
+@type: 'extra';
+@element: 'newTabLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+      New Tab Labeled Icon
+*******************************/
+.eea.new.tab.labeled.icon {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: @newTabLabeledIconWidth;
+  min-width: @newTabLabeledIconMinWidth;
+  text-align: @newTabLabeledIconTextAlign;
+
+  .label {
+    width: @newTabLabeledIconLabelWidth;
+    font-size: @newTabLabeledIconLabelFontSize;
+    color: @newTabLabeledIconLabelColor;
+    cursor: pointer;
+  }
+
+  .icon.wrapper {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    width: @newTabLabeledIconIconWrapperWidth;
+    padding: @newTabLabeledIconWrapperPadding;
+
+    .icon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: @newTabLabeledIconIconFontSize;
+      color: @newTabLabeledIconColor;
+      width: @newTabLabeledIconIconWidth;
+      height: @newTabLabeledIconWrapperIconHeight;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+/*******************************
+        New Tab Labeled Icon
+*******************************/
+
+/* Body */
+@newTabLabeledIconWidth: min-content;
+@newTabLabeledIconMinWidth: 7rem;
+@newTabLabeledIconTextAlign: center;
+
+/* Label */
+@newTabLabeledIconLabelWidth: 100%;
+@newTabLabeledIconLabelFontSize: 0.875rem;
+@newTabLabeledIconLabelColor: @deepBlue;
+@newTabLabeledIconColor: @mediumPersianBlue;
+
+/* Icon Wrapper */
+@newTabLabeledIconIconWrapperWidth: 100%;
+@newTabLabeledIconWrapperPadding: 0.5rem;
+
+/* Icon */
+@newTabLabeledIconIconFontSize: 1.563rem;
+@newTabLabeledIconWrapperIconHeight: 1.25rem;
+@newTabLabeledIconIconWidth: 1.25rem;