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

package/CHANGELOG.md

@@ -4,8 +4,43 @@ 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.1](https://github.com/eea/volto-eea-design-system/compare/0.4.0...0.4.1)
+
+- [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.1",
   "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/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;