feat(newTabLabeledIcon) : add new component

src/semantic.less

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

src/ui/NewTabLabeledIcon/NewTabLabeledIcon.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from 'semantic-ui-react';
+
+function NewTabLabeledIcon({ children, ...rest }) {
+    return <div className='eea new tab labeled icon'>
+        {children}
+    </div>
+}
+
+NewTabLabeledIcon.Label = ({ children, ...rest }) => {
+    return <div className='label' onClick={() => context.setHidden(!context.hidden)}>{children}</div>
+};
+
+NewTabLabeledIcon.Icon = ({ children, ...rest }) => {
+    return <div className='icon wrapper' onClick={() => context.setHidden(!context.hidden)}><Icon className={rest.icon} /></div>
+};
+
+export default NewTabLabeledIcon;

src/ui/NewTabLabeledIcon/NewTabLabeledIcon.stories.jsx

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

src/ui/index.js

@@ -29,3 +29,5 @@ export KeyContent from './KeyContent/KeyContent';
 export PublicationCard from './PublicationCard/PublicationCard';
 
 export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon';
+
+export NewTabLabeledIcon from './NewTabLabeledIcon/NewTabLabeledIcon';

theme/theme.config

@@ -92,6 +92,7 @@
 @keyContent  : 'eea';
 @publicationCard  : 'eea';
 @downloadLabeledIcon :'eea';
+@newTabLabeledIcon : 'eea';
 
 /*******************************
             Folders

theme/themes/eea/extras/newTabLabeledIcon.less

@@ -0,0 +1,74 @@
+@type: 'extra';
+@element: 'newTabLabeledIcon';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+        Download Labeled Icon
+*******************************/
+.eea.new.tab.labeled.icon {
+  width: @newTabLabeledIconWidth;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  .label {
+    width: @newTabLabeledIconLabelWidth;
+    font-size: @newTabLabeledIconLabelFontSize;
+    color: @newTabLabeledIconLabelColor;
+    cursor: pointer;
+  }
+  .icon.wrapper {
+    width: @newTabLabeledIconIconWrapperWidth;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    .icon {
+      cursor: pointer;
+      font-size: @newTabLabeledIconIconFontSize;
+      color: @mediumPersianBlue;
+      display: flex;
+      width: @newTabLabeledIconIconWidth;
+      height: @newTabLabeledIconWrapperIconHeight;
+      align-items: center;
+    }
+  }
+
+  .dropdown {
+    width: @newTabLabeledIconDropdownWIdth;
+
+    .link.wrapper {
+      position: absolute;
+      cursor: pointer;
+      background-color: @newTabLabeledIconLinkWrapperBackgroundColor;
+      z-index: @newTabLabeledIconLinkWrapperZIndex;
+      margin-right: @newTabLabeledIconLinkWrapperMarginRight;
+      width: @newTabLabeledIconLinkWrapperWidth;
+      padding-left: @newTabLabeledIconLinkWrapperPaddingLeft;
+      padding-top: @newTabLabeledIconLinkWrapperPaddingTop;
+      ul {
+        list-style-type: none;
+        margin-block-start: @newTabLabeledIconUlMarginBlockStart;
+        padding-inline-start: @newTabLabeledIconUlPaddingInlineStart;
+        a {
+          display: flex;
+          justify-content: space-around;
+          font-weight: @newTabLabeledIconALinkFontWeight;
+          font-size: @newTabLabeledIconLinkFontSize;
+          .icon {
+            font-size: @newTabLabeledIconLinkIconFontSize;
+            line-height: @newTabLabeledIconLinkIconLineHeight;
+          }
+        }
+        a:hover {
+          color: @newTabLabeledIconALinkColorHover;
+        }
+        li:hover {
+          background-color: @newTabLabeledIconLiHover;
+        }
+      }
+    }
+    .link.wrapper.hidden {
+      display: none;
+    }
+  }
+}

theme/themes/eea/extras/newTabLabeledIcon.variables

@@ -0,0 +1,48 @@
+/*******************************
+        Download Labeled Icon
+*******************************/
+
+/* Body */
+@newTabLabeledIconWidth: 103px;
+
+/* Label */
+@newTabLabeledIconLabelWidth: 100%;
+@newTabLabeledIconLabelFontSize: 14px;
+@newTabLabeledIconLabelColor: @deepBlue;
+
+/* Extra */
+@newTabLabeledIconWrapperWidth: 100%;
+@newTabLabeledIconWrapperBorderTop: 0px;
+@newTabLabeledIconWrapperColor: @white;
+@newTabLabeledIconWrapperFontSize: 14px;
+
+/* Icon Wrapper */
+@newTabLabeledIconIconWrapperWidth: 100%;
+
+/* Icon */
+@newTabLabeledIconIconFontSize: 25px;
+@newTabLabeledIconWrapperIconHeight: 20px;
+@newTabLabeledIconIconWidth: 19px;
+
+/* Link Wrapper */
+@newTabLabeledIconLinkWrapperBackgroundColor: #f9f9f9;
+@newTabLabeledIconLinkWrapperZIndex: 1;
+@newTabLabeledIconLinkWrapperMarginRight: 2.1em;
+@newTabLabeledIconLinkWrapperWidth: 4em;
+@newTabLabeledIconLinkWrapperPaddingLeft: 9px;
+@newTabLabeledIconLinkWrapperPaddingTop: 5px;
+
+/* Dropdown */
+@newTabLabeledIconDropdownWIdth: 100%;
+
+/* List */
+@newTabLabeledIconUlMarginBlockStart: 0;
+@newTabLabeledIconUlPaddingInlineStart: 0px;
+@newTabLabeledIconLiHover: @deepBlue;
+
+/* Link */
+@newTabLabeledIconALinkFontWeight: 700;
+@newTabLabeledIconLinkFontSize: 14px;
+@newTabLabeledIconLinkIconFontSize: 16px;
+@newTabLabeledIconLinkIconLineHeight: 20px;
+@newTabLabeledIconALinkColorHover: @white;