@eeacms/volto-eea-design-system 1.13.2 → 1.14.0

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

@@ -21,6 +21,15 @@ export default {
         defaultValue: { summary: 'null' },
       },
     },
+    titleMaxLines: {
+      name: 'Title max lines',
+      options: ['none', '1', '2', '3', '4', '5'],
+      control: { type: 'select' },
+      table: {
+        category: 'Content',
+        defaultValue: { summary: '2' },
+      },
+    },
     inverted: {
       description: 'Inverted card',
       table: {
@@ -43,7 +52,11 @@ const Template = (args) => (
     <Card
       className={`icon text-center ${
         args.variant === 'default' ? '' : args.variant
-      } ${args.inverted ? 'inverted' : ''}`}
+      } ${args.inverted ? 'inverted' : ''} ${
+        args.titleMaxLines === 'none'
+          ? 'title-max-0-lines'
+          : 'title-max-' + args.titleMaxLines + '-lines'
+      }`}
     >
       {args.hasLink ? (
         <a href={args.href} aria-label={args.title}>
@@ -70,6 +83,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   variant: 'default',
+  titleMaxLines: '2',
   inverted: false,
   title: 'Lorem Ipsum',
   icon: 'ri-leaf-line',
@@ -116,7 +130,11 @@ const GridTemplate = (args) => (
             <Card
               className={`icon text-center ${
                 args.variant === 'default' ? '' : args.variant
-              } ${args.inverted ? 'inverted' : ''}`}
+              } ${args.inverted ? 'inverted' : ''} ${
+                args.titleMaxLines === 'none'
+                  ? 'title-max-0-lines'
+                  : 'title-max-' + args.titleMaxLines + '-lines'
+              }`}
             >
               {args.hasLink ? (
                 <a href={args.href} aria-label={card.title}>
@@ -146,6 +164,7 @@ const GridTemplate = (args) => (
 export const GridIconCard = GridTemplate.bind({});
 GridIconCard.args = {
   variant: 'default',
+  titleMaxLines: '2',
   inverted: false,
   hasLink: true,
   href: '/#',
@@ -186,6 +205,7 @@ GridIconCard.argTypes = {
   cards: {
     description: 'array with cards data',
     table: {
+      category: 'Content',
       type: {
         summary: 'Object',
       },

package/src/ui/Header/Header.jsx

@@ -39,6 +39,14 @@ const TopItem = ({ children, className, id }) => (
   </div>
 );
 
+const onKeyDownHandler = (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    event.target.click();
+    //event.target.focus();
+  }
+};
+
 const TopDropdownMenu = ({
   children,
   className,
@@ -69,6 +77,8 @@ const TopDropdownMenu = ({
               closeOnChange={true}
               closeOnBlur={false}
               closeOnEscape={true}
+              openOnFocus={false}
+              onKeyDown={onKeyDownHandler}
             >
               <Dropdown.Menu role="option">{children}</Dropdown.Menu>
             </Dropdown>
@@ -85,6 +95,8 @@ const TopDropdownMenu = ({
             closeOnChange={true}
             closeOnBlur={false}
             closeOnEscape={true}
+            openOnFocus={false}
+            onKeyDown={onKeyDownHandler}
           >
             <Dropdown.Menu role="option">{children}</Dropdown.Menu>
           </Dropdown>

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

@@ -33,30 +33,34 @@
 
 /* Link */
 .ui.low.labels .label:hover,
-.ui.low.label:hover{
+.ui.low.label:hover {
   background-color: @lowImportanceHoverBackground;
   border-color: @lowImportanceHoverBackground;
 }
 
 .ui.medium.labels .label:hover,
-.ui.medium.label:hover{
+.ui.medium.label:hover {
   background-color: @mediumImportanceHoverBackground;
   border-color: @mediumImportanceHoverBackground;
 }
 
 .ui.high.labels .label:hover,
-.ui.high.label:hover{
+.ui.high.label:hover {
   background-color: @highImportanceHoverBackground;
   border-color: @highImportanceHoverBackground;
 }
 
 .ui.highlight.labels .label:hover,
-.ui.highlight.label:hover{
+.ui.highlight.label:hover {
   background-color: @highlightImportanceHoverBackground;
   border-color: @highlightImportanceHoverBackground;
 }
 
 /* Ribbon */
+.ui.ribbon.label {
+  z-index: @ribbonLabelZindex;
+}
+
 .ui.low.ribbon.label {
   border-color: @lowImportanceBackground;
 }
@@ -79,6 +83,7 @@
   color: @lowImportanceBasicTextColor;
   border-color: @lowImportanceBackground;
 }
+
 .ui.basic.low.labels a.label:hover,
 .ui.basic.low.label:hover {
   background-color: @white;
@@ -91,6 +96,7 @@
   color: @mediumImportanceBasicTextColor;
   border-color: @mediumImportanceBackground;
 }
+
 .ui.basic.medium.labels a.label:hover,
 .ui.basic.medium.label:hover {
   background-color: @white;
@@ -103,6 +109,7 @@
   color: @highImportanceBasicTextColor;
   border-color: @highImportanceBackground;
 }
+
 .ui.basic.high.labels a.label:hover,
 .ui.basic.high.label:hover {
   background-color: @white;
@@ -115,6 +122,7 @@
   color: @highlightImportanceBasicTextColor;
   border-color: @highlightImportanceBackground;
 }
+
 .ui.basic.highlight.labels a.label:hover,
 .ui.basic.highlight.label:hover {
   background-color: @white;

package/theme/themes/eea/elements/label.variables

@@ -136,19 +136,21 @@
 @ribbonTriangleSize: 1.2em;
 @ribbonShadowColor: rgba(0, 0, 0, 0.15);
 
+@ribbonLabelZindex: 1;
+
 @ribbonMargin: 1rem;
 @ribbonOffset: calc(-@ribbonMargin - @ribbonTriangleSize);
 @ribbonDistance: calc(@ribbonMargin + @ribbonTriangleSize);
-@rightRibbonOffset:  calc(100% + @ribbonMargin + @ribbonTriangleSize);
+@rightRibbonOffset: calc(100% + @ribbonMargin + @ribbonTriangleSize);
 
 @ribbonImageTopDistance: 1rem;
 @ribbonImageMargin: 0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: calc(-@ribbonImageMargin - @ribbonTriangleSize);
-@rightRibbonImageOffset:  calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
+@rightRibbonImageOffset: calc(100% + @ribbonImageMargin + @ribbonTriangleSize);
 
 @ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */
 @ribbonTableOffset: calc(-@ribbonTableMargin - @ribbonTriangleSize);
-@rightRibbonTableOffset:  calc(100% + @ribbonTableMargin + @ribbonTriangleSize);
+@rightRibbonTableOffset: calc(100% + @ribbonTableMargin + @ribbonTriangleSize);
 
 
 /* Colors */
@@ -159,10 +161,10 @@
 @highlightImportanceBackground: @secondaryColor;
 
 /* Hover Colors */
-@lowImportanceHoverBackground: darken(@deepBlue,5);
-@mediumImportanceHoverBackground: darken(#346F83,5);
-@highImportanceHoverBackground: darken(#005293,5);
-@highlightImportanceHoverBackground: darken(@secondaryColor,5);
+@lowImportanceHoverBackground: darken(@deepBlue, 5);
+@mediumImportanceHoverBackground: darken(#346F83, 5);
+@highImportanceHoverBackground: darken(#005293, 5);
+@highlightImportanceHoverBackground: darken(@secondaryColor, 5);
 
 @importanceHoverTextColor: @white;
 
@@ -271,11 +273,11 @@
 --------------------*/
 
 /* Sizing */
-@mini    : @9px;
-@tiny    : @10px;
-@small   : @11px;
-@medium  : @12px;
-@large   : @absoluteMedium;
-@big     : @absoluteBig;
-@huge    : @absoluteHuge;
-@massive : @absoluteMassive;
+@mini: @9px;
+@tiny: @10px;
+@small: @11px;
+@medium: @12px;
+@large: @absoluteMedium;
+@big: @absoluteBig;
+@huge: @absoluteHuge;
+@massive: @absoluteMassive;

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

@@ -16,6 +16,7 @@
   margin-right: -50vw;
   left: 50%;
   right: 50%;
+  z-index: @contentBoxBeforeZIndex;
 }
 
 .content-box {
@@ -28,7 +29,6 @@
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
     position: relative;
-    z-index: @contentBoxContainerZIndex;
   }
 
   &.primary {

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

@@ -8,6 +8,7 @@
 @contentBoxBackgroundColor: @grey-1;
 @contentBoxNoBackground: transparent;
 @contentBoxColorInverted : inherit;
+@contentBoxBeforeZIndex: -1;
 
 /* Themes */
 @contentBoxBackgroundColorPrimary: @primaryColor;

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

@@ -345,7 +345,7 @@
   display: flex;
   overflow: auto;
   width: 100%;
-  height: @mobilePopUpHeight;
+  min-height: @mobilePopUpHeight;
   align-items: @searchBoxAlignItems;
   background: @searchBoxBackgroundGradient;
 
@@ -582,7 +582,7 @@
 
   /* Search box */
   #search-box {
-    height: @tabletPopUpHeight;
+    min-height: @tabletPopUpHeight;
 
     .wrapper {
       margin: @searchBoxTabletPopupMarginTop 0;
@@ -693,7 +693,7 @@
 
   /* Search box */
   #search-box {
-    height: @computerPopUpHeight;
+    min-height: @computerPopUpHeight;
 
     .wrapper {
       margin: @searchBoxComputerPopupMarginTop 0;

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

@@ -241,9 +241,9 @@
 @searchBoxSuggestionsTextColor: @white;
 @searchBoxSuggestionsColumnGap: 2em;
 @searchBoxSuggestionsRowGap: 1em;
-@searchBoxMobilePopupMarginTop: 0.5em;
-@searchBoxTabletPopupMarginTop: 1em;
-@searchBoxComputerPopupMarginTop: 1.5em;
+@searchBoxMobilePopupMarginTop: @em-space-8;
+@searchBoxTabletPopupMarginTop: @em-space-8;
+@searchBoxComputerPopupMarginTop: @em-space-8;
 
 /* Custom shadows for dropdowns */
 @shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));

package/theme/themes/eea/globals/site.overrides

@@ -4,6 +4,10 @@
 
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
 
+html, body {
+  font-size: @baseFontSize;
+}
+
 // Accessibility outline on focus-visible for every component
 *:focus-visible {
   outline: @focusVisibleOutline;
@@ -11,6 +15,7 @@
 
 button:focus-visible,
 a.button:focus-visible,
+.ui.dropdown:focus-visible,
 .ui.checkbox input[type="checkbox"]:focus-visible,
 .ui.checkbox input[type="radio"]:focus-visible {
   outline: @focusVisibleOutline !important;
@@ -132,25 +137,19 @@ a {
   color: @black;
 }
 
-/* Add colors for paragraphs styles options in StyeMenu */
+/* Add colors for paragraphs styles options in StyleMenu */
 #style-menu.ui.dropdown .menu {
-  span:nth-of-type(1) {
+  .block-style-primary {
     color: @primaryColor;
-      span.text {
-        color: @primaryColor;
-      }
   }
-  span:nth-of-type(2) {
+  .block-style-secondary {
     color: @secondaryColor;
-      span.text {
-        color: @secondaryColor;
-      }
   }
-  span:nth-of-type(3) {
+  .block-style-tertiary {
     color: @tertiaryColor;
-      span.text {
-        color: @tertiaryColor;
-      }
+  }
+  .active {
+    background-color: @grey-2;
   }
 }
 
@@ -175,16 +174,16 @@ a {
     visibility: hidden;
   }
   .image {
-   page-break-inside: avoid;  
+   page-break-inside: avoid;
   }
   img {
-   page-break-inside: avoid;  
+   page-break-inside: avoid;
   }
-  .card { 
-  page-break-inside: avoid;  
+  .card {
+  page-break-inside: avoid;
 
   }
   .grid-block-teaser .card{
-    page-break-inside: auto;  
+    page-break-inside: auto;
   }
 }

package/theme/themes/eea/globals/site.variables

@@ -38,6 +38,9 @@
 /* The size of page text  */
 @fontSize : 16px;
 
+/* Overrides html & body default font-size to enable scaling from browser settings */
+@baseFontSize: 1rem;
+
 
 /*-------------------
     Border Radius

package/theme/themes/eea/views/card.overrides

@@ -140,7 +140,7 @@
   --card-image-height: @roundedImageHeight;
 }
 .ui.card.rounded {
-  padding-top: @iconCardPaddingTop;
+  padding: @roundedCardPadding;
   border: none;
 
   .image {
@@ -415,6 +415,7 @@
     border-top: none;
     .header {
       word-break: break-word;
+      font-size: @iconCardHeaderFontSize;
     }
   }
   .icon {
@@ -450,6 +451,12 @@
   padding: @headerPadding;
 }
 
+// when title is on image the extra padding that displays the
+// link outline reveals part of title from 3rd row
+.ui.card .gradient .header {
+  padding: @headerOnImagePadding;
+}
+
 .ui.card .header > a {
   .useTitleMaxLines();
 }
@@ -457,4 +464,13 @@
 // Meta align fix
 .ui.card.u-card .meta:after {
     content: none;
-}
+}
+
+/*******************************
+    Image Card items grid
+*******************************/
+.imageCard-items {
+  display: grid;
+  gap: @imageCardItemsGap;
+  grid-template-columns: repeat(auto-fit,minmax(@imageCardItemsGridMin, @imageCardItemsGridMax));
+}

package/theme/themes/eea/views/card.variables

@@ -18,7 +18,7 @@
 @fontFamily: @pageFont;
 @display: flex;
 @borderRadius: @defaultBorderRadius;
-@margin: 1em 0em;
+@margin: 0em;
 @minHeight: 0px;
 @padding: 0em;
 @width: 290px;
@@ -69,7 +69,7 @@
 @iconColor: @tertiaryColor;
 
 /* Content */
-@contentDivider: @borderWidth solid @internalBorderColor;
+@contentDivider: 0;
 @contentMargin: 0em;
 @contentBackground: none;
 @contentPadding: 1em 1em;
@@ -84,11 +84,13 @@
 @headerMargin: -@em-space-2 -@em-space-1 -@em-space-1 -@em-space-1;
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
+@iconCardHeaderFontSize: clamp(@font-size-1, @font-size-2, 18px);
 
 @headerColor: inherit;
 @headerLinkDisplay: block;
 
 @headerPadding: @em-space-1;
+@headerOnImagePadding: 0;
 @headerLineHeightOffset: -(@headerPadding * 2);
 
 /* Metadata */
@@ -270,8 +272,8 @@
         Image with title
 *******************************/
 @imageTitleColor: @white;
-@imageTitleFontSize: @h2;
-@imageTitleMobileFontSize: @mobileH1;
+@imageTitleFontSize: clamp(@font-size-3, @h2, 32px);
+@imageTitleMobileFontSize: clamp(@font-size-2, @mobileH1, 30px);
 @imageTitleFontWeight: @font-weight-7;
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;
@@ -281,6 +283,7 @@
           Rounded Card
 *******************************/
 /* Global */
+@roundedCardPadding              : @rem-space-4 0;
 @roundedImageBorderRadius        : @circularRadius;
 @roundedContentTitleMarginBottom : @rem-space-2;
 @roundedContentTitleTextAlign    : left;
@@ -341,7 +344,7 @@
 @carouselButtonIconFontSize: 3.125rem;
 @carouselButtonIconOpacity: 1;
 @carouselButtonDistance: -3.5rem;
-@carouselButtonPaddingTop: @rem-space-4;
+@carouselButtonPaddingTop: 0;
 
 /* Dots */
 @carouselDotsFontSize: 0.75rem;
@@ -366,3 +369,10 @@
 @tabletTeaserCardPaddingInline: @rem-space-2;
 @tabletTeaserCardMinWidth: 100%;
 
+
+/*******************************
+    Image Card items grid
+*******************************/
+@imageCardItemsGap: 1.5rem;
+@imageCardItemsGridMin: 275px;
+@imageCardItemsGridMax: auto;