@eeacms/volto-eea-design-system 1.0.7 → 1.12.0

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

@@ -281,10 +281,6 @@
   }
 }
 
-#main .main-menu .item:first-child {
-  display: none; // hide home nav item
-}
-
 .main-menu.inverted {
   .item a {
     color: @mainMenuItemInvertedColor;
@@ -825,8 +821,6 @@
     padding: @megaMenuAccordionTitlePadding;
     border-bottom: @megaMenuAccordionTitleBorderBottom;
     color: @megaMenuTextColor;
-    color: @megaMenuTextColor;
-    font-size: @megaMenuAccordionTitleFontSize;
     font-size: @megaMenuAccordionTitleFontSize;
     font-weight: @megaMenuAccordionTitleFontWeight;
 
@@ -876,11 +870,6 @@
   }
 }
 
-// hide home link and accordion content from mobile menu
-#main #mega-menu .mobile > .ui.accordion > .title:first-child {
-  display: none;
-}
-
 // hide content of accordion titles that are not active
 #main #mega-menu .ui.accordion .title:first-child + .content:not(.active) {
   display: none;

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

@@ -100,4 +100,37 @@
   }
 }
 
+@media print {
+  .eea.hero-block.full-height,
+  .eea.hero-block.full-height .hero-block-image-wrapper,
+  .eea.hero-block.full-height .hero-block-inner-wrapper {
+    min-height: unset;
+  }
+
+  .hero-block-inner-wrapper {
+    padding-top: @heroBlockPrintPadding;
+    padding-bottom: @heroBlockPrintPadding;
+  }
+
+  .hero-block-image-wrapper {
+    left: 0 !important;
+    right: 0 !important;
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    padding-right: 0% !important;
+    width: 100% !important;
+    break-inside: avoid-page;
+  }
+
+  .hero-block {
+    break-inside: avoid-page;
+  }
+
+  .hero-block-body .eea.copyright {
+    display: none;
+    visibility: hidden;
+  }
+}
+
 .loadUIOverrides();

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

@@ -26,6 +26,7 @@
 @heroBlockWrapperPadding : 5rem;
 @tableHeroBlockWrapperPadding: 6rem;
 @desktopHeroBlockWrapperPadding: 194px 96px;
+@heroBlockPrintPadding: 20px;
 
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;

package/theme/themes/eea/globals/mixins.less

@@ -14,3 +14,11 @@
 .image-overlay-gradient() {
   .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg)
 }
+
+.useTitleMaxLines(@value: 2) {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--title-max-lines, @value);
+}

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

@@ -29,7 +29,9 @@ h2, h3, h4, h5, h6 {
   color: @contentAreaColor;
 }
 
-[id="page-document"] > * {
+[id="page-document"] > *,
+.view-wrapper > *
+{
   margin-left: auto !important;
   margin-right: auto !important;
 }
@@ -37,7 +39,8 @@ h2, h3, h4, h5, h6 {
 [class~="view-defaultview"] [id="page-document"] > *,
 [class~="view-viewview"] [id="page-document"] > *,
 #main .container_width,
-#main .has--size--container_width
+#main .has--size--container_width,
+.view-wrapper > *
 {
   max-width: @containerWidth !important;
 }
@@ -150,3 +153,38 @@ a {
       }
   }
 }
+
+@media print {
+  .skiplinks-wrapper,
+  .top.bar,
+  .main.bar.transparency,
+  .main-menu,
+  .eea .header .action,
+  .slider-arrow,
+  #footer,
+  #page-header .action,
+  #inpage-navigation {
+    display: none;
+    visibility: hidden;
+  }
+  .logo {
+    margin-left: 0;
+  }
+  .static-banner {
+    display: none;
+    visibility: hidden;
+  }
+  .image {
+   page-break-inside: avoid;  
+  }
+  img {
+   page-break-inside: avoid;  
+  }
+  .card { 
+  page-break-inside: avoid;  
+
+  }
+  .grid-block-teaser .card{
+    page-break-inside: auto;  
+  }
+}

package/theme/themes/eea/globals/utilities.less

@@ -37,15 +37,19 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-left,
 .has--text--left,
 .has--textAlign--left { text-align: left !important; }
+
 .text-center,
 .has--text--center,
 .has--textAlign--center { text-align: center !important;}
+
 .text-right,
 .has--text--right,
 .has--textAlign--right { text-align: right !important; }
+
 .text-justify,
 .has--text--justify,
 .has--textAlign--justify { text-align: justify !important; }
+
 .bold { font-weight: bold !important; }
 
 .has--text--left {
@@ -57,6 +61,49 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   --justify-content: space-evenly;
 }
 
+/*******************************
+   Image properties utilities
+*******************************/
+
+// image object fit
+.has--object-fit--contain {
+  --image-object-fit: contain;
+}
+
+.has--object-fit--cover {
+  --image-object-fit: cover;
+}
+
+.has--object-fit--fill {
+  --image-object-fit: fill;
+}
+
+.has--object-fit--scale-down {
+  --image-object-fit: scale-down;
+}
+
+// image object position
+.has--object-position--top {
+  --image-object-position: top;
+}
+
+.has--object-position--bottom {
+  --image-object-position: bottom;
+}
+
+.has--object-position--left {
+  --image-object-position: left;
+}
+
+.has--object-position--right {
+  --image-object-position: right;
+}
+
+.has--object-position--center {
+  --image-object-position: center;
+}
+
+
 // background position utilities
 .has--bg--top {
   background-position: top !important;

package/theme/themes/eea/modules/accordion.overrides

@@ -158,3 +158,10 @@
 .ui.accordion.tertiary .title:not(.active):focus-visible i {
   color: @tertiaryColorCSSVar;
 }
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .accordion-block h1 * { font-size: @mobileH1; }
+  .accordion-block h2 * { font-size: @mobileH2; }
+  .accordion-block h3 * { font-size: @mobileH3; }
+  .accordion-block h4 * { font-size: @mobileH4; }
+}

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

@@ -32,11 +32,14 @@
   img {
     width: var(--card-image-width, @imageWidth);
     height: var(--card-image-width, @imageHeight);
-    object-fit: @imageObjectFit;
-    object-position: @imageObjectPosition;
   }
 }
 
+.ui.card img, img.ui.image {
+  object-fit: var(--image-object-fit, @imageObjectFit);
+  object-position: var(--image-object-position, @imageObjectPosition);
+}
+
 
 .ui.cards > .card > .content > *:not(:last-child),
 .ui.card > .content > *:not(:last-child) {
@@ -150,6 +153,8 @@
     width: @roundedImageWidth;
     height: @roundedImageHeight;
     border-radius: @roundedImageBorderRadius !important;
+    object-fit: var(--image-object-fit, @imageObjectFit);
+    object-position: var(--image-object-position, @imageObjectPosition);
   }
 
   .content {
@@ -434,24 +439,22 @@
     padding-left: @tabletTeaserCardPaddingInline;
     padding-right: @tabletTeaserCardPaddingInline;
   }
+
   .grid-block-teaser .ui.card {
     min-width: @tabletTeaserCardMinWidth;
   }
 }
 
-// Added from listing-cards.less
-.grid-block-teaser .ui.card.u-card .header {
-  display: -webkit-box !important;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--title-max-lines, 3);
-}
-
 // Spacing adjustment to display outline with overflow hidden
 .ui.card .header {
   padding: @headerPadding;
 }
+
 .ui.card .header > a {
-  display: @headerLinkDisplay;
+  .useTitleMaxLines();
 }
 
+// Meta align fix
+.ui.card.u-card .meta:after {
+    content: none;
+}

package/src/ui/Card/AvatarGrid/AvatarGrid.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Grid, Card, Image } from 'semantic-ui-react';
-
-function AvatarGrid({ children, ...rest }) {
-  return (
-    <div className="eea avatar-grid" {...rest}>
-      <div className="wrapper">{children}</div>
-    </div>
-  );
-}
-
-AvatarGrid.Content = ({ children }) => {
-  return <div className="content">{children}</div>;
-};
-
-AvatarGrid.Group = ({ children, ...rest }) => {
-  let avatars = rest.avatars;
-
-  return (
-    <div className="avatar group">
-      <Grid>
-        {avatars.map((avatar, index) => (
-          <Grid.Column key={index} mobile={12} tablet={4} computer={4}>
-            <div className="avatar-wrapper">
-              <Card
-                className={`eea rounded ${
-                  rest.variant === 'default' ? '' : rest.variant
-                } ${rest.inverted ? 'inverted' : ''}`}
-                fluid={rest.fluid}
-              >
-                {rest.hasLink ? (
-                  <Image
-                    as="a"
-                    href={rest.href}
-                    src={avatar.src}
-                    wrapped
-                    ui={false}
-                    alt="card image"
-                  />
-                ) : (
-                  <Image src={avatar.src} wrapped ui={false} alt="card image" />
-                )}
-                <Card.Content>
-                  {rest.hasLink ? (
-                    <Card.Header>
-                      <a href={rest.href}>{avatar.title}</a>
-                    </Card.Header>
-                  ) : (
-                    <Card.Header>{avatar.title}</Card.Header>
-                  )}
-                  <Card.Description>{avatar.description}</Card.Description>
-                </Card.Content>
-              </Card>
-            </div>
-          </Grid.Column>
-        ))}
-      </Grid>
-    </div>
-  );
-};
-export default AvatarGrid;

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

@@ -1,89 +0,0 @@
-import React from 'react';
-// eslint-disable-next-line import/no-unresolved
-import AvatarGrid from './AvatarGrid';
-import { Container } from 'semantic-ui-react';
-import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
-
-export default {
-  title: 'Components/Card/Rounded Card',
-  component: AvatarGrid,
-  argTypes: {
-    variant: {
-      options: ['default', 'primary', 'secondary', 'tertiary'],
-      control: { type: 'select' },
-      description: 'card variation class',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'default' },
-      },
-    },
-    inverted: {
-      description: 'Inverted card',
-      table: {
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    fluid: {
-      description: 'take up the width of its container',
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: { summary: false },
-      },
-    },
-    hasLink: {
-      description: 'Clickable card',
-      table: {
-        defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' },
-      },
-    },
-    avatars: {
-      description: 'avatar data',
-      table: {
-        type: { summary: 'Object' },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-  },
-};
-
-const GridTemplate = (args) => (
-  <Container>
-    <AvatarGrid>
-      <AvatarGrid.Content>
-        <AvatarGrid.Group avatars={args.avatars} {...args}></AvatarGrid.Group>
-      </AvatarGrid.Content>
-    </AvatarGrid>
-  </Container>
-);
-
-export const RoundedGrid = GridTemplate.bind({});
-RoundedGrid.args = {
-  variant: 'default',
-  inverted: false,
-  fluid: false,
-  hasLink: true,
-  href: '/#',
-  avatars: [
-    {
-      src: imgUrl,
-      title: 'Lorem Ipsum',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      src: imgUrl,
-      title: 'Lorem Ipsum',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-    {
-      src: imgUrl,
-      title: 'Lorem Ipsum',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    },
-  ],
-};

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

@@ -1,122 +0,0 @@
-import React from 'react';
-import { Card, Image, Container } from 'semantic-ui-react';
-import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/avatar.png';
-
-export default {
-  title: 'Components/Card/Rounded Card',
-  component: Card,
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
-  argTypes: {
-    variant: {
-      options: ['default', 'primary', 'secondary', 'tertiary'],
-      control: { type: 'select' },
-      description: 'card variation class',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'null' },
-      },
-    },
-    inverted: {
-      description: 'Inverted card',
-      table: {
-        defaultValue: { summary: 'false' },
-        type: { summary: 'boolean' },
-      },
-    },
-    title: {
-      description: 'card header',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-    description: {
-      description: 'card main content',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-    fluid: {
-      description: 'take up the width of its container',
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: { summary: false },
-      },
-    },
-    src: {
-      description: 'rounded card image url',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: ' "" ' },
-      },
-    },
-    hasLink: {
-      description: 'Clickable card',
-      table: {
-        defaultValue: { summary: 'true' },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-};
-
-const AvatarTemplate = (args) => (
-  <Container>
-    <Card
-      className={`rounded ${args.variant === 'default' ? '' : args.variant} ${
-        args.inverted ? 'inverted' : ''
-      }`}
-      fluid={args.fluid}
-    >
-      {args.hasLink ? (
-        <Image
-          as="a"
-          href={args.href}
-          src={args.src}
-          wrapped
-          ui={false}
-          alt="card image"
-        />
-      ) : (
-        <Image src={args.src} wrapped ui={false} alt="card image" />
-      )}
-      <Card.Content>
-        {args.hasLink ? (
-          <Card.Header>
-            <a href={args.href}>{args.title}</a>
-          </Card.Header>
-        ) : (
-          <Card.Header>{args.title}</Card.Header>
-        )}
-        <Card.Description>{args.description}</Card.Description>
-      </Card.Content>
-    </Card>
-  </Container>
-);
-
-export const Default = AvatarTemplate.bind({});
-Default.args = {
-  variant: 'default',
-  inverted: false,
-  src: imgUrl,
-  title: 'Lorem Ipsum',
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  fluid: false,
-  hasLink: true,
-  href: '/#',
-};

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

@@ -1,28 +0,0 @@
-/*******************************
-            Avatar
-*******************************/
-
-/* Global */
-@avatarWidth                    : 100%;
-@avatarWrapperWidth             : 100%;
-@avatarWrapperGap               : @largeGap;
-@avatarContentWrapperWidth      : 100%;
-@avatarImageBorderRadius        : 50%;
-@avatarContentTitleMarginBottom : 0;
-@avatarImageWrapperWidth        : 100%;
-@avatarImageBackgroundSize      : cover;
-@avatarContentTitleFontWeight   : @bold;
-@avatarContentTitleFontSize     : 1.25rem;
-
-/* Big */
-@avatarBigImageHeight           : 173px;
-@avatarBigImageWidth            : 173px;
-@avatarBigMetadataFontSize      : 1.25rem;
-@avatarBigMetadataFontWeight    : @normal;
-
-/* Small */
-@avatarSmallImageHeight         : 135px;
-@avatarSmallImageWidth          : 135px;
-@avatarSmallTitleColor          : @secondaryColor;
-@avatarSmallMetadataFontSize    : 1rem;
-@avatarSmallMetadataFontWeight  : 300;

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

@@ -1,43 +0,0 @@
-@type: 'extra';
-@element: 'avatarGrid';
-
-@import (multiple) '../../theme.config';
-
-/*-------------------
-      AVATAR GRID
---------------------*/
-
-.eea.avatar-grid {
-  width: @avatarGridWidth;
-
-  .wrapper {
-    width: @avatarGridWrapperWidth;
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      width: @avatarGridContentWidth;
-    }
-  }
-}
-
-.eea.avatar-grid {
-  .grid-title {
-    text-align: @avatarGridContentTitleTextAlign;
-    width: @avatarGridContentTitleWidth;
-    margin: @avatarGroupMargin;
-  }
-
-  .grid-title.hidden {
-    display: none;
-  }
-}
-
-.eea.avatar-grid .avatar.group {
-  display: flex;
-  justify-content: center;
-  width: @avatarGroupWidth;
-  margin: @avatarGroupMargin;
-}
-
-.loadUIOverrides();

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

@@ -1,16 +0,0 @@
-/*******************************
-            Avatar Grid
-*******************************/
-
-@avatarGridWidth                    : 100%;
-@avatarGridWrapperWidth             : 100%;
-@avatarGridContentWidth             : 100%;
-
-/* Grid Title */
-@avatarGridContentTitleTextAlign    : center;
-@avatarGridContentTitleWidth        : 100%;
-@avatarGridContentTitleFontWeight   : @bold;
-
-/* Avatar Group */
-@avatarGroupWidth                   : 100%;
-@avatarGroupMargin                  : @largeGap 0;