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

package/src/ui/Card/Card.stories.test.jsx

@@ -1,14 +1,48 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import {
   TeaserCardGrid,
   CarouselCards,
   FluidGrid,
   CardGrid,
+  ImageGrid,
   Default,
 } from './Card.stories';
 
 describe('TeaserCardGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<TeaserCardGrid {...TeaserCardGrid.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${TeaserCardGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${TeaserCardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${TeaserCardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${TeaserCardGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${TeaserCardGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the teaser card grid with correct number of cards', () => {
     const { container } = render(<TeaserCardGrid {...TeaserCardGrid.args} />);
     const teaserCards = container.querySelectorAll('.column.grid-block-teaser');
@@ -26,6 +60,39 @@ describe('TeaserCardGrid component', () => {
 });
 
 describe('CarouselCards component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<CarouselCards {...CarouselCards.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${CarouselCards.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${CarouselCards.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${CarouselCards.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${CarouselCards.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${CarouselCards.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the carousel with correct number of cards', () => {
     const { container } = render(<CarouselCards {...CarouselCards.args} />);
     const carouselCards = container.querySelectorAll(
@@ -47,6 +114,39 @@ describe('CarouselCards component', () => {
 });
 
 describe('FluidGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<FluidGrid {...FluidGrid.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${FluidGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${FluidGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${FluidGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${FluidGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${FluidGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders fluid grid with correct number of cards', () => {
     const { container } = render(<FluidGrid {...FluidGrid.args} />);
     const fluidGridCards = container.querySelectorAll(
@@ -58,6 +158,39 @@ describe('FluidGrid component', () => {
 });
 
 describe('CardGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<CardGrid {...CardGrid.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${CardGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${CardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${CardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${CardGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${CardGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the card grid with correct number of cards', () => {
     const { container } = render(<CardGrid {...CardGrid.args} />);
     const cardGridCards = container.querySelectorAll(
@@ -67,7 +200,70 @@ describe('CardGrid component', () => {
   });
 });
 
+describe('ImageGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<ImageGrid {...ImageGrid.args} />);
+
+    expect(container.querySelector('.ui.image')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${ImageGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${ImageGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${ImageGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the image grid with correct number of cards', () => {
+    const { container } = render(<ImageGrid {...ImageGrid.args} />);
+    const imageGridCards = container.querySelectorAll(
+      '.ui.card.u-card.default .ui.image',
+    );
+    expect(imageGridCards.length).toBe(5);
+  });
+});
+
 describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${Default.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${Default.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${Default.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${Default.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${Default.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the default with correct number of cards', () => {
     const { container } = render(<Default {...Default.args} />);
     const defaultCards = container.querySelectorAll(

package/src/ui/Footer/FooterSites.jsx

@@ -12,7 +12,7 @@ const Sites = (props) => {
       const nextItem = logos[i + 1];
       column.push(
         <Grid.Column className="logo" key={i}>
-          <a className="logo" href={item.url}>
+          <a className="logo" href={item.url} aria-label={item.alt}>
             <LazyLoadComponent>
               <Image
                 className={item.className}
@@ -21,7 +21,7 @@ const Sites = (props) => {
               ></Image>
             </LazyLoadComponent>
           </a>
-          <a className="logo" href={nextItem.url}>
+          <a className="logo" href={nextItem.url} aria-label={item.alt}>
             <LazyLoadComponent>
               <Image
                 className={nextItem.className}

package/src/ui/Header/Header.stories.js

@@ -58,16 +58,20 @@ const logoProps = {
 };
 
 const links = [
-  { title: 'EEA Main Portal', href: '/#' },
-  { title: 'Biodiversity Information System for Europe', href: '/#' },
-  { title: 'Climate Adaptation Platform', href: '/#' },
-  { title: 'Copernicus in situ component', href: '/#' },
-  { title: 'Copernicus land monitoring', href: '/#' },
+  { title: 'European Environment Agency website', href: '/#' },
+  { title: 'WISE marine - Marine information system for Europe', href: '/#' },
+  {
+    title: 'WISE freshwater - Freshwater information system for Europe',
+    href: '/#',
+  },
+  { title: 'BISE - Biodiversity information system for Europe', href: '/#' },
+  { title: 'FISE - Forest information system for Europe', href: '/#' },
+  { title: 'European Climate and health observatory', href: '/#' },
+  { title: 'ClimateADAPT', href: '/#' },
   { title: 'European Industrial Emissions Portal', href: '/#' },
-  { title: 'Forest Information System for Europe', href: '/#' },
-  { title: 'Information Platform for Chemical Monitoring', href: '/#' },
-  { title: 'Marine Water Information System for Europe', href: '/#' },
-  { title: 'Fresh Water Information System for Europe', href: '/#' },
+  { title: 'Climate and Energy in the EU', href: '/#' },
+  { title: 'Copernicus Land Monitoring Service', href: '/#' },
+  { title: 'Copernicus InSitu', href: '/#' },
 ];
 
 const languages = [
@@ -1234,7 +1238,7 @@ const Template = (args) => {
       <Header>
         <Header.TopHeader>
           <Header.TopItem className="official-union">
-            <Image src={eeaFlag} alt="eea flag"></Image>
+            <Image src={eeaFlag} alt="European Union flag"></Image>
             <Header.TopDropdownMenu
               text="An official website of the European Union | How do you know?"
               tabletText="An official website of the European Union"

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;
 }