@eeacms/volto-eea-design-system 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.5](https://github.com/eea/volto-eea-design-system/compare/1.0.4...1.0.5) - 28 March 2023
+
+#### :rocket: New Features
+
+- feat: improve full-width class [Miu Razvan - [`70bba7e`](https://github.com/eea/volto-eea-design-system/commit/70bba7e295dd237e7c579ef0446ff05e0c8529d8)]
+
+#### :bug: Bug Fixes
+
+- fix(banner): Add missing divider for time tag #327 from eea/banner-metadata [ichim-david - [`c46a583`](https://github.com/eea/volto-eea-design-system/commit/c46a58336ec9eb2ce75d2637f3197f417e8ca326)]
+- fix(banner): Add missing divider for time tag [kreafox - [`7d68c39`](https://github.com/eea/volto-eea-design-system/commit/7d68c395d368a267baef4422df6e72f63d099b75)]
+
+### [1.0.4](https://github.com/eea/volto-eea-design-system/compare/1.0.3...1.0.4) - 27 March 2023
+
+#### :rocket: New Features
+
+- feat(copyright): Add copyright prefix - Image - refs #250724 [Alin Voinea - [`6a72772`](https://github.com/eea/volto-eea-design-system/commit/6a727723c15aee499ed7cedc9f364c5e2c8014bb)]
+
+#### :house: Internal changes
+
+- style(copyright): Cleanup useless min-height - refs #250724 [Alin Voinea - [`f2457df`](https://github.com/eea/volto-eea-design-system/commit/f2457df6376ac1a4d00f87eee90e61f66f7ffebb)]
+
+#### :hammer_and_wrench: Others
+
+- Back to dev [Alin Voinea - [`cfd6eba`](https://github.com/eea/volto-eea-design-system/commit/cfd6eba8b01eceff4e28ab7ab51b2457672ac172)]
 ### [1.0.3](https://github.com/eea/volto-eea-design-system/compare/1.0.2...1.0.3) - 24 March 2023
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.stories.jsx

@@ -52,6 +52,13 @@ export default {
         type: { summary: 'string' },
       },
     },
+    copyrightPrefix: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '' },
+        type: { summary: 'string' },
+      },
+    },
     copyrightIcon: {
       table: {
         category: 'Copyright',
@@ -60,7 +67,6 @@ export default {
       },
     },
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -141,6 +147,7 @@ const Template = (args) => {
           </Banner.Metadata>
         )}
         <Copyright copyrightPosition={args.copyrightPosition}>
+          <Copyright.Prefix>{args.copyrightPrefix}</Copyright.Prefix>
           <Copyright.Icon>
             <Icon className={args.copyrightIcon} />
           </Copyright.Icon>
@@ -164,7 +171,8 @@ Default.args = {
   image: true,
   hideShareButton: false,
   hideDownloadButton: false,
+  copyrightPrefix: 'Image',
   copyrightPosition: 'left',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };

package/src/ui/Copyright/Copyright.jsx

@@ -13,6 +13,15 @@ function Copyright({ children, ...rest }) {
   );
 }
 
+Copyright.Prefix = ({ children, ...rest }) =>
+  children ? (
+    <span {...rest} className={'icon-prefix'}>
+      {children}
+    </span>
+  ) : (
+    ''
+  );
+
 Copyright.Icon = ({ children, ...rest }) => (
   <span {...rest} className={'icon-wrapper'}>
     {children}

package/src/ui/Copyright/Copyright.stories.jsx

@@ -7,7 +7,6 @@ export default {
   component: Copyright,
   argTypes: {
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -24,10 +23,11 @@ export const Default = (args) => (
   <Container>
     <Segment className={'inverted'}>
       <Copyright copyrightPosition={args.copyrightPosition}>
+        <Copyright.Prefix>{args.copyrightPrefix}</Copyright.Prefix>
         <Copyright.Icon>
-          <Icon className={args.icon} />
+          <Icon className={args.copyrightIcon} />
         </Copyright.Icon>
-        <Copyright.Text>{args.text}</Copyright.Text>
+        <Copyright.Text>{args.copyright}</Copyright.Text>
       </Copyright>
     </Segment>
   </Container>
@@ -35,6 +35,7 @@ export const Default = (args) => (
 
 Default.args = {
   copyrightPosition: 'left',
-  icon: 'ri-copyright-line',
-  text: 'Image copyright: Velit fusce sed sem ut.',
+  copyrightPrefix: 'Image',
+  copyrightIcon: 'ri-copyright-line',
+  copyright: 'John Smith, Well with Nature /EEA',
 };

package/src/ui/Hero/Hero.jsx

@@ -24,9 +24,9 @@ function Hero({
   alignContent,
   backgroundVariant,
   children,
-
   has_copyright,
   copyright,
+  copyrightPrefix,
   copyrightIcon,
   copyrightPosition,
 }) {
@@ -49,6 +49,7 @@ function Hero({
 
             {has_copyright && (
               <Copyright copyrightPosition={copyrightPosition}>
+                <Copyright.Prefix>{copyrightPrefix}</Copyright.Prefix>
                 <Copyright.Icon>
                   <Icon className={copyrightIcon} />
                 </Copyright.Icon>

package/src/ui/Hero/Hero.stories.jsx

@@ -63,7 +63,6 @@ export default {
       },
     },
     copyrightPosition: {
-      name: 'Position',
       control: {
         type: 'inline-radio',
         options: ['left', 'right'],
@@ -74,6 +73,13 @@ export default {
         defaultValue: { summary: '"left"' },
       },
     },
+    copyrightPrefix: {
+      table: {
+        category: 'Copyright',
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
     copyrightIcon: {
       table: {
         category: 'Copyright',
@@ -130,8 +136,9 @@ Default.args = {
 
   has_copyright: true,
   copyrightPosition: 'left',
+  copyrightPrefix: 'Image',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
 Default.parameters = {
   controls: {
@@ -167,8 +174,9 @@ Playground.args = {
 
   has_copyright: true,
   copyrightPosition: 'left',
+  copyrightPrefix: 'Image',
   copyrightIcon: 'ri-copyright-line',
-  copyright: 'Image copyright: Velit fusce sed sem ut.',
+  copyright: 'John Smith, Well with Nature /EEA',
 };
 Playground.argTypes = {
   fullWidth: {
@@ -253,6 +261,13 @@ Playground.argTypes = {
       type: { summary: 'string' },
     },
   },
+  copyrightPrefix: {
+    table: {
+      category: 'Copyright',
+      defaultValue: { summary: '""' },
+      type: { summary: 'string' },
+    },
+  },
   copyrightIcon: {
     table: {
       category: 'Copyright',

package/theme/theme.config

@@ -135,4 +135,5 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
+
 /* End Config */

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

@@ -2,6 +2,35 @@
          Theme Overrides
 *******************************/
 
+body {
+  .contentWidth(0);
+  --toolbar-width: 0px;
+  --sidebar-width: 0px;
+
+  &.has-toolbar {
+    --toolbar-width: @toolbarWidth;
+  }
+
+  &.has-toolbar-collapsed {
+    --toolbar-width: @collapsedWidth;
+  }
+
+  &.has-sidebar {
+    --sidebar-width: @sidebarWidth;
+  }
+
+  &.has-sidebar-collapsed {
+    --sidebar-width: @collapsedWidth;
+  }
+
+  @media screen and (max-width: calc(@tabletBreakpoint - 1px)) {
+    &.has-toolbar,
+    &.has-toolbar-collapsed {
+      --toolbar-width: 0px;
+    }
+  }
+}
+
 /* All Sizes */
 .ui.container {
   transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
@@ -88,10 +117,6 @@
   }
 }
 
-body {
-  .contentWidth(0);
-}
-
 // WIP container fixes for edit interface
 @media only screen and (max-width: 1600px) {
   .has-sidebar.section-add .container,
@@ -116,33 +141,16 @@ body {
 
 .has--size--full:not(.block-editor-columnsBlock),
 .full-width {
+  @toolbarWidthCSS: var(--toolbar-width, 0px);
+  @sidebarWidthCSS: var(--sidebar-width, 0px);
+  @scrollbarWidthCSS: var(--scrollbar-width, @scrollbarWidth);
   position: relative;
-  width: calc(100vw - var(--scrollbar-width, @scrollbarWidth)) !important;
+  width: calc(100vw - @toolbarWidthCSS - @sidebarWidthCSS - @scrollbarWidthCSS) !important;
   right: 50%;
   left: 50%;
   max-width: initial !important;
-  margin-left: calc(-50vw + var(--scrollbar-width, @scrollbarWidth) / 2) !important;
-  margin-right: calc(-50vw + var(--scrollbar-width, @scrollbarWidth) / 2) !important;
-}
-
-@media only screen and (min-width: @largestMobileScreen) {
-  body.has-toolbar {
-    .has--size--full:not(.block-editor-columnsBlock),
-    .full-width {
-      width: calc(100vw - @toolbarWidth - var(--scrollbar-width, @scrollbarWidth)) !important;
-      margin-left: calc(-50vw + (@toolbarWidth + var(--scrollbar-width, @scrollbarWidth)) / 2) !important;
-      margin-right: calc(-50vw + (@toolbarWidth + var(--scrollbar-width, @scrollbarWidth)) / 2) !important;
-    }
-  }
-
-  body.has-toolbar-collapsed {
-    .has--size--full:not(.block-editor-columnsBlock),
-    .full-width {
-      width: calc(100vw - @toolbarWidthMin - var(--scrollbar-width, @scrollbarWidth)) !important;
-      margin-left: calc(-50vw + (var(--scrollbar-width, @scrollbarWidth) + @toolbarWidthMin) / 2) !important;
-      margin-right: calc(-50vw + (var(--scrollbar-width, @scrollbarWidth) + @toolbarWidthMin) / 2) !important;
-    }
-  }
+  margin-left: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
+  margin-right: calc(-50vw + (@toolbarWidthCSS + @sidebarWidthCSS + @scrollbarWidthCSS) / 2) !important;
 }
 
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {

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

@@ -2,6 +2,10 @@
             Container
 *******************************/
 
+@toolbarWidth: 80px;
+@sidebarWidth: 375px;
+@collapsedWidth: 20px;
+
 /*-------------------
        Element
 --------------------*/

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

@@ -41,15 +41,15 @@
       }
 
       .metadata {
+        margin-bottom: @rem-space-3;
         font-size: @mobileMetadataFontSize;
         line-height: @mobileMetadataLineHeight;
-        margin-bottom: @rem-space-3;
 
         .field.type {
           font-weight: @metadataTypeFontWeight;
         }
 
-        span.field:not(:last-child)::after {
+        .field:not(:last-child)::after {
           content: @metadataFieldDividerContent;
         }
       }
@@ -110,10 +110,10 @@
 /*Share Popup*/
 
 .ui.popup.share-popup {
+  position: initial; // without position initial popper cannot correctly place popup
+  min-width: @sharePopupMinWidth;
   padding: @sharePopupPadding;
   filter: @sharePopupFilter;
-  min-width: @sharePopupMinWidth;
-  position: initial; // without position initial popper cannot correctly place popup
 
   p {
     font-size: @sharePopupFontSize;

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

@@ -14,7 +14,6 @@
         display: flex;
         color: @copyrightContentColor;
         font-size: @copyrightContentFontSize;
-        min-height: @copyrightMinHeight;
         align-items: @copyrightAlignItems;
         line-height: @copyrightLineHeight;
         gap: @copyrightContentPaddingRight;

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

@@ -12,8 +12,7 @@
 @copyrightWrapperPaddingLeft: @rem-space-3;
 @copyrightWrapperPaddingRight: @rem-space-3;
 @copyrightWrapperBottom: @rem-space-4;
-@copyrightMinHeight: @rem-space-8;
-@copyrightAlignItems: center;
+@copyrightAlignItems: start;
 
 /* Image block */
 @floatImageLeftMaxWidth: 50%;