@eeacms/volto-eea-design-system 1.19.0 → 1.20.0

package/src/ui/Tab/Tab.stories.js

@@ -10,6 +10,16 @@ export default {
     },
   },
   argTypes: {
+    variant: {
+      name: 'Variation',
+      defaultValue: 'secondary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: 'secondary' },
+        type: { summary: 'string' },
+      },
+    },
     panes: {
       description: 'tab names and content array',
       table: {
@@ -26,11 +36,11 @@ export default {
 
 function TabContent({
   panes,
+  variant,
   renderActive,
-  text,
-  attached,
-  borderless,
+  inverted,
   vertical,
+  pointing,
   fluid,
   grid,
 }) {
@@ -39,10 +49,11 @@ function TabContent({
       panes={panes}
       renderActiveOnly={renderActive}
       menu={{
-        secondary: true,
-        pointing: true,
         vertical: vertical,
+        inverted: inverted,
+        pointing: pointing,
         fluid: fluid,
+        className: variant,
         tabIndex: 0,
       }}
       grid={grid}
@@ -59,6 +70,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   renderActive: false,
+  inverted: false,
   panes: [
     {
       menuItem: 'Tab 1',
@@ -81,8 +93,10 @@ Default.args = {
 
 export const Vertical = Template.bind({});
 Vertical.args = {
+  variant: 'secondary',
   renderActive: true,
   vertical: true,
+  pointing: false,
   fluid: true,
   grid: { paneWidth: 7, tabWidth: 5 },
   panes: [
@@ -165,6 +179,8 @@ Vertical.args = {
 };
 
 Vertical.argTypes = {
+  variant: 'secondary',
+  inverted: false,
   vertical: {
     description: 'vertical tab',
     table: {

package/src/ui/Tab/Tab.stories.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Default } from './Tab.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('It renderes corectly', () => {
+  it('renders corectly', () => {
+    render(<Default {...Default.args} />);
+  });
+});

package/theme/themes/eea/collections/breadcrumb.overrides

@@ -12,10 +12,11 @@
 }
 
 .ui.breadcrumb ol {
-  list-style: none;
+  padding-top: @space-025;
   padding-left: 0;
   margin: 0;
-  padding-top: @space-025;
+  list-style: none;
+
   li {
     display: inline-block;
   }
@@ -28,10 +29,10 @@
 .ui.breadcrumb {
   .section {
     overflow: hidden;
+    max-width: @breadcrumbItemMaxWidth;
 
     /* Max breadcrumb length */
     min-height: @breadcrumbItemMinHeight;
-    max-width: @breadcrumbItemMaxWidth;
     padding: @mobileBreadcrumbPadding;
     text-overflow: ellipsis;
     white-space: nowrap;

package/theme/themes/eea/collections/menu.overrides

@@ -203,7 +203,6 @@
   }
 }
 
-
 /*************/
 /* EEA Theme */
 /*************/
@@ -280,33 +279,220 @@
     Tabs
 ***********/
 
+.vertical.border-left {
+  --vertical-menu-border: @verticalMenuBorderOnLeftSide;
+  --vertical-item-border: @verticalItemBorderOnLeftSide;
+  --vertical-item-border-style: @verticalItemBorderStyleOnLeft;
+  --vertical-item-margin: @verticalItemMarginOnLeft;
+}
+
+.ui.menu.vertical {
+  border-width: @verticalMenuBorderWidth !important;
+  border-style: @verticalItemBorderStyle !important;
+  border-color: @verticalMenuBorderColor !important;
+  margin: 0;
+  box-shadow: none;
+}
+
+.ui.secondary.vertical.menu > .item,
+.ui.vertical.menu .item {
+  padding: @verticalItemPadding;
+  border-width: @verticalItemBorder;
+  border-style: @verticalItemBorderStyle;
+  border-color: transparent;
+  margin: @verticalItemMargin;
+  word-break: break-word;
+}
+
+.ui.vertical.menu .item.active {
+  border-right: @verticalItemActiveBorder;
+}
+
 /* Tab active item custom border design */
-.ui.secondary.pointing.menu:not(.vertical):not(.pagination) .active.item,
-.ui.secondary.pointing.menu:not(.vertical):not(.pagination) .item:active {
-  padding: (@secondaryPointingItemVerticalPadding - @1px)
-    @secondaryPointingItemHorizontalPadding;
-  border-bottom: @secondaryPointingActiveBorderWidth solid @secondaryColor;
-  margin-bottom: -@secondaryPointingctiveItemMarginBottom;
+.ui.menu[class*='ary']:not(.vertical, .inverted):not(.pagination) .item.active,
+.ui.menu[class*='ary']:not(.vertical, .inverted):not(.pagination) .item:active {
+  border-bottom: @secondaryPointingActiveBorderWidth solid
+    var(--text-color, transparent);
+  margin-bottom: -@secondaryPointingActiveItemMarginBottom;
+}
+
+.block-editor-tabs_block .ui.menu a.active.item,
+.block-editor-tabs_block .ui.menu a.item:hover {
+  background-color: transparent !important;
+}
+
+.block-editor-tabs_block .ui.inverted.menu .item:not(a):hover {
+  background-color: @strongTransparentBlack;
+}
+
+.tabs-block .ui.pointing.menu .item::after {
+  display: none;
+}
+
+.ui.menu[class*='ary']:not(.inverted) .ui.item:active {
   color: var(--text-color, @secondaryPointingActiveTextColor);
 }
 
 /* Menu items custom border for responsive issues */
-.ui.secondary.pointing.menu:not(.vertical) {
+.ui.menu[class*='ary']:not(.vertical) {
   position: relative;
-  overflow: auto; // Horizontal scolling of links
+  overflow: auto; // Horizontal scrolling of links
   height: auto; //  height ensures that scrollable region has keyboard access
   padding-bottom: @2px; // Leave room for the active border item
   border-bottom: none; // Border comes from before pseudo-element
-  margin-right: 0em;
-  margin-left: 0em;
+  margin-right: 0;
+  margin-left: 0;
 
-  a.item {
+  .item {
     max-width: @secondaryPointingItemMaxWidth;
+    padding: @secondaryItemVerticalPadding @secondaryItemHorizontalPadding;
     border-bottom: @secondaryPointingItemBorderBottom;
+    margin: @secondaryPointingItemMargin;
   }
 }
 
-.ui.pointing.secondary.menu:not(.vertical):before {
+.ui.menu:not(.inverted) .active.item:hover {
+  background-color: transparent;
+}
+
+.ui.menu .item:hover {
+  cursor: pointer;
+}
+
+.ui.menu[class*='ary']:not(.inverted, .vertical) {
+  border: none;
+  box-shadow: none;
+}
+
+.ui.menu.vertical .item:before,
+.ui.menu[class*='ary'] .item:before {
+  display: none;
+}
+
+.primary.menu {
+  --text-color: @primaryColorCSSVar;
+}
+
+.primary.secondary.menu {
+  --text-color-secondary: @primaryColorCSSVar;
+}
+
+.primary.inverted.menu {
+  --bg-color: @primaryColorCSSVar;
+}
+
+.secondary.menu {
+  --text-color: @secondaryColorCSSVar;
+}
+
+// color options from semantic tabs
+.red.inverted.menu {
+  --bg-color: @red;
+  --text-color: @red;
+}
+
+.orange.inverted.menu {
+  --bg-color: @orange;
+  --text-color: @orange;
+}
+
+.yellow.inverted.menu {
+  --bg-color: @yellow;
+  --text-color: @yellow;
+}
+
+.olive.inverted.menu {
+  --bg-color: @olive;
+  --text-color: @olive;
+}
+
+.green.inverted.menu {
+  --bg-color: @green;
+  --text-color: @green;
+}
+
+.teal.inverted.menu {
+  --bg-color: @teal;
+  --text-color: @teal;
+}
+
+.blue.inverted.menu {
+  --bg-color: @blue;
+  --text-color: @blue;
+}
+
+.violet.inverted.menu {
+  --bg-color: @violet;
+  --text-color: @violet;
+}
+
+.purple.inverted.menu {
+  --bg-color: @purple;
+  --text-color: @purple;
+}
+
+.pink.inverted.menu {
+  --bg-color: @pink;
+  --text-color: @pink;
+}
+
+.grey.inverted.menu {
+  --bg-color: @grey;
+  --text-color: @grey;
+}
+
+.brown.inverted.menu {
+  --bg-color: @brown;
+  --text-color: @brown;
+}
+
+.black.menu,
+.black.inverted.menu {
+  --bg-color: @black;
+  --text-color: @black;
+}
+
+.ui.inverted.menu {
+  --tab-inverted-text-color: @invertedItemTextColor;
+  --tab-inverted-active-text-color: @white;
+  --tab-inverted-hover-text-color: @white;
+  --tab-inverted-bg-color: var(--bg-color, @secondaryColorCSSVar);
+  --tab-inverted-secondary-active-border-color: @secondaryPointingInvertedBorderColor;
+}
+
+.ui.secondary.pointing.menu {
+  background-color: var(--tab-inverted-bg-color);
+}
+
+.tertiary.menu {
+  --text-color: @tertiaryColorCSSVar;
+}
+
+.tertiary.secondary.menu {
+  --text-color-secondary: @tertiaryColorCSSVar;
+}
+
+.menu.inverted {
+  --text-active-color: @white;
+}
+
+.menu.inverted input {
+  --text-color: @white;
+}
+
+.tertiary.inverted.menu {
+  --bg-color: @tertiaryColorCSSVar;
+}
+
+.ui.pointing.menu.inverted .active.title {
+  background-color: @invertedColoredActiveBackground;
+}
+
+.ui.inverted.menu .ui.item.active:hover {
+  background-color: @invertedActiveBackground;
+}
+
+.ui.menu[class*='ary']:not(.vertical):before {
   position: absolute;
   z-index: 0;
   right: 0;
@@ -318,7 +504,7 @@
 }
 
 // edit page, normalize font size of tab headers from the sidebar
-.section-edit .ui.pointing.secondary.menu .item,
-.tabs-wrapper .ui.pointing.secondary.menu .item {
+.section-edit .menu[class*='ary'] .item,
+.tabs-wrapper .menu[class*='ary'] .item {
   font-size: 1.25rem;
 }

package/theme/themes/eea/collections/menu.variables

@@ -30,7 +30,7 @@
   color @defaultDuration @defaultEasing
 ;
 @itemFontWeight: @normal;
-@itemTextColor: var(--text-color, @deepBlue);
+@itemTextColor: @textColor;
 
 /* Divider */
 @dividerSize: 1px;
@@ -159,7 +159,7 @@
 
 /* Hovered Item */
 @hoverItemBackground: none;
-@hoverItemTextColor: @selectedTextColor;
+@hoverItemTextColor: @activeItemTextColor;
 
 /* Pressed Item */
 @pressedItemBackground: none;
@@ -168,14 +168,14 @@
 
 /* Active Item */
 @activeItemBackground: none;
-@activeItemTextColor: @selectedTextColor;
+@activeItemTextColor: var(--text-color, @textColor);
 @activeItemFontWeight: @normal;
 @activeIconOpacity: 1;
 @activeItemBoxShadow: none;
 
 /* Active Hovered Item */
 @activeHoverItemBackground: @transparentBlack;
-@activeHoverItemColor: @selectedTextColor;
+@activeHoverItemColor: @activeItemTextColor;
 
 /* Selected Dropdown */
 @dropdownSelectedItemBackground: @transparentBlack;
@@ -200,8 +200,22 @@
 @verticalBoxShadow: @boxShadow;
 @verticalPointerWidth: 2px;
 @verticalBackground: #FFFFFF;
-@verticalItemBackground: none;
 @verticalDividerBackground: @dividerBackground;
+@verticalBorderWidth: @1px;
+@verticalMenuBorder: @1px  solid @grey-3;
+@verticalMenuBorderWidth: var(--vertical-menu-border, 0 @verticalBorderWidth 0 0) !important;
+@verticalMenuBorderOnLeftSide: 0 0 0 @verticalBorderWidth;
+@verticalMenuBorderColor: @grey-3;
+@verticalItemBackground: none;
+@verticalItemBorderWidth: @3px;
+@verticalItemBorder: var(--vertical-item-border, 0 @verticalItemBorderWidth 0 0) !important;
+@verticalItemBorderStyle: var(--vertical-item-border-style, none solid none none);
+@verticalItemBorderStyleOnLeft: none none none solid;
+@verticalItemBorderOnLeftSide:  0 0 0 @verticalItemBorderWidth;
+@verticalItemMargin: @secondaryVerticalPointingItemMargin;
+@verticalItemMarginOnLeft: 0 0 0 -@secondaryPointingBorderWidth;
+@verticalItemPadding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;
+@verticalItemActiveBorder: @3px solid @activeItemTextColor;
 
 @verticalActiveBoxShadow: none;
 
@@ -219,13 +233,13 @@
 @secondaryItemTransition: none;
 @secondaryItemColor: @unselectedTextColor;
 
-@secondaryHoverItemBackground: @transparentBlack;
-@secondaryHoverItemColor: @selectedTextColor;
+@secondaryHoverItemBackground: transparent;
+@secondaryHoverItemColor: @activeItemTextColor;
 
-@secondaryActiveItemBackground: @transparentBlack;
-@secondaryActiveItemColor: @selectedTextColor;
-@secondaryActiveHoverItemBackground: @transparentBlack;
-@secondaryActiveHoverItemColor: @selectedTextColor;
+@secondaryActiveItemBackground: var(--bg-color, @white);
+@secondaryActiveItemColor: @activeItemTextColor;
+@secondaryActiveHoverItemBackground: @secondaryActiveItemBackground;
+@secondaryActiveHoverItemColor: @secondaryActiveItemColor;
 
 @secondaryActiveHoveredItemBackground: @transparentBlack;
 @secondaryActiveHoveredItemColor: @selectedTextColor;
@@ -234,7 +248,7 @@
 @secondaryHeaderBorder: none;
 
 @secondaryItemVerticalSpacing: @secondaryItemSpacing;
-@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
+@secondaryVerticalItemMargin: @secondaryVerticalPointingItemMargin;
 @secondaryVerticalItemBorderRadius: @defaultBorderRadius;
 
 @secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding;
@@ -245,7 +259,7 @@
 /* Pointing */
 @secondaryPointingBorderWidth: @1px;
 @secondaryPointingActiveBorderWidth: @3px;
-@secondaryPointingBorderColor: @midGray;
+@secondaryPointingBorderColor: transparent;
 @secondaryPointingItemMargin: 0 1.25rem;
 @secondaryPointingItemVerticalPadding: @tinyGap;
 @secondaryPointingItemActiveVerticalPadding: unit((@relativeTiny - @3px), rem);
@@ -256,8 +270,8 @@
 
 @secondaryPointingHoverTextColor: var(--text-color-hover, @textColor);
 
-@secondaryPointingActiveBorderColor: @secondaryColor;
-@secondaryPointingActiveTextColor: @secondaryColor;
+@secondaryPointingActiveBorderColor: var(--text-color, @secondaryColor);
+@secondaryPointingActiveTextColor: var(--text-color, @secondaryColor);
 @secondaryPointingActiveFontWeight: @normal;
 
 @secondaryPointingActiveDropdownBorderColor: transparent;
@@ -266,19 +280,20 @@
 @secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
 
 @secondaryPointingHeaderColor: @darkTextColor;
-@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
+@secondaryVerticalPointingItemMargin: var(--vertical-item-margin, 0em -@secondaryPointingBorderWidth 0em 0em);
 
 
-@secondaryPointingItemBorderBottom: @1px solid @midGray;
-@secondaryPointingItemMaxWidth: 15.625rem; 
+@secondaryPointingItemBorderBottom: @3px solid transparent;
+@secondaryPointingItemMargin: 0 0 -@1px 0;
+@secondaryPointingItemMaxWidth: 15.625rem;
 
 /* Inverted Secondary */
-@secondaryInvertedColor: @invertedLightTextColor;
+@secondaryInvertedColor: @invertedTextColor;
 
-@secondaryInvertedHoverBackground: @transparentWhite;
+@secondaryInvertedHoverBackground: @strongTransparentBlack;
 @secondaryInvertedHoverColor: @invertedSelectedTextColor;
 
-@secondaryInvertedActiveBackground: @strongTransparentWhite;
+@secondaryInvertedActiveBackground: @invertedActiveBackground;
 @secondaryInvertedActiveColor: @invertedSelectedTextColor;
 
 /* Inverted Pointing */
@@ -286,7 +301,7 @@
 @secondaryPointingInvertedItemTextColor: @invertedTextColor;
 @secondaryPointingInvertedItemHeaderColor: @white;
 @secondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
-@secondaryPointingInvertedActiveBorderColor: @white;
+@secondaryPointingInvertedActiveBorderColor: @strongTransparentBlack;
 @secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
 
 
@@ -369,7 +384,7 @@
 
 @textMenuActiveItemFontWeight: @normal;
 @textMenuActiveItemColor: @selectedTextColor;
-@secondaryPointingctiveItemMarginBottom: @2px;
+@secondaryPointingActiveItemMarginBottom: @1px;
 
 @textMenuHeaderSize: @relativeSmall;
 @textMenuHeaderColor: @darkTextColor;
@@ -389,7 +404,7 @@
 ---------------*/
 
 /* Inverted */
-@invertedBackground: @black;
+@invertedBackground: var(--bg-color, @textColor);
 @invertedBoxShadow: none;
 @invertedBorder: 0px solid transparent;
 @invertedHeaderBackground: transparent;
@@ -402,23 +417,23 @@
 @invertedSubMenuColor: @invertedUnselectedTextColor;
 
 /* Inverted Hover */
-@invertedHoverBackground: @transparentWhite;
+@invertedHoverBackground: @strongTransparentBlack;
 @invertedHoverColor: @invertedSelectedTextColor;
 
 @invertedSubMenuHoverBackground: transparent;
 @invertedSubMenuHoverColor: @invertedSelectedTextColor;
 
 /* Pressed */
-@invertedMenuPressedBackground: @transparentWhite;
+@invertedMenuPressedBackground: transparent;
 @invertedMenuPressedColor: @invertedSelectedTextColor;
 
 /* Inverted Active */
-@invertedActiveBackground: @strongTransparentWhite;
+@invertedActiveBackground: @strongTransparentBlack;
 @invertedActiveColor: @invertedSelectedTextColor;
 @invertedArrowActiveColor: #3D3E3F;
 
 /* Inverted Active Hover  */
-@invertedActiveHoverBackground: @invertedActiveBackground;
+@invertedActiveHoverBackground: @strongTransparentBlack;
 @invertedActiveHoverColor: @white;
 @invertedArrowActiveHoverColor: @invertedArrowActiveColor;
 

package/theme/themes/eea/collections/message.overrides

@@ -30,4 +30,4 @@
 .field-wrapper .ui.negative.message {
   background: transparent;
   box-shadow: none;
-}
+}

package/theme/themes/eea/collections/table.overrides

@@ -27,7 +27,6 @@
     text-transform: @headerTextTransform;
     vertical-align: @headerVerticalAlign;
   }
-
 }
 
 // fix hiding of table header on mobile resolutions, by default whitespace is no wrap from table.less
@@ -36,30 +35,29 @@
 }
 
 @media only screen and (max-width: @tabletBreakpoint) {
-
   .ui.table.responsive {
-
     &:not(.unstackable) td:first-child {
       font-weight: @responsiveMobileCellHeaderFontWeight;
     }
 
     thead {
-      border: none;
-      clip: @responsiveMobileCellHeaderClip;
-      height: @responsiveMobileHeaderHeight;
-      margin: @responsiveMobileHeaderMargin;
-      overflow: hidden;
-      padding: @responsiveMobileHeaderPadding;
       position: absolute;
+      overflow: hidden;
       width: @responsiveMobileHeaderWidth;
+      height: @responsiveMobileHeaderHeight;
+      padding: @responsiveMobileHeaderPadding;
+      border: none;
+      margin: @responsiveMobileHeaderMargin;
+      clip: @responsiveMobileCellHeaderClip;
     }
 
     td {
       display: block;
-      text-align: @responsiveMobileCellTextAlign;
       clear: both;
-  
+      text-align: @responsiveMobileCellTextAlign;
+
       &::before {
+        max-width: @responsiveMobileCellDataLabelMaxSize;
         /*
         * aria-label has no advantage, it won't be read inside a table
         content: attr(aria-label);
@@ -68,11 +66,7 @@
         float: @responsiveMobileCellDataLabelFloat;
         font-weight: @responsiveMobileCellDataLabelFontWeigth;
         text-align: @responsiveMobileCellDataLabelTextAlign;
-        max-width: @responsiveMobileCellDataLabelMaxSize;
       }
-      
     }
-
   }
-
 }

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

@@ -116,10 +116,10 @@ button.ui.button.text,
 button.ui.buttons.text,
 a.ui.button.text,
 p.ui.button {
+  padding: @textButtonPadding;
   background-color: @textButtonBackground;
   color: @primaryColor;
   text-decoration: underline;
-  padding: @textButtonPadding;
 
   &:hover,
   &:active,
@@ -320,4 +320,4 @@ p.ui.button {
 .ui.tertiary.buttons .button:active,
 .ui.tertiary.button:active {
   background-color: @tertiaryColorDown;
-}
+}