@eeacms/volto-eea-design-system 0.2.3 → 0.2.4

package/.github/workflows/auto-comment.yml

@@ -0,0 +1,20 @@
+name: Auto Comment
+on: [pull_request]
+jobs:
+  run:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          pullRequestOpened: |
+            👋 @{{ author }}
+            
+            To generate the Storybook and Docusaurus websites, write comment with:
+            > @eea-jenkins build all
+            
+            To generate only Storybook write comment with:
+            > @eea-jenkins build storybook            
+            
+            To generate only Docusaurus write comment with:
+            > @eea-jenkins build docusaurus  

package/CHANGELOG.md

@@ -4,8 +4,34 @@ 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).
 
+#### [0.2.4](https://github.com/eea/volto-eea-design-system/compare/0.2.3...0.2.4)
+
+- Autobuild of docusaurus docs [`18c8b77`](https://github.com/eea/volto-eea-design-system/commit/18c8b77b6d0677f304a83965ed4d6849f75bc179)
+- change(header): wrap header globalnav links useful for editing section [`10d4f56`](https://github.com/eea/volto-eea-design-system/commit/10d4f56624510eb63155ab330dcf0475b0728ed4)
+- Autobuild of docusaurus docs [`5f4c47c`](https://github.com/eea/volto-eea-design-system/commit/5f4c47c93bf102fb198efc97e9f2cc60c162d0e3)
+- change(container): restore maxWidth to 100% now that the last value is 1120px [`8b55c58`](https://github.com/eea/volto-eea-design-system/commit/8b55c58d3bbc8967b20de19a828aedd2f1473ee5)
+- Autobuild of docusaurus docs [`71d6cd9`](https://github.com/eea/volto-eea-design-system/commit/71d6cd90f911960211d227bfc51a0f87fb868a8c)
+- change(breadcrumb): removed padding from breadcrumb added by container [`c5df567`](https://github.com/eea/volto-eea-design-system/commit/c5df5675a519085badc030416e5bb784a9f73321)
+- Autobuild of docusaurus docs [`473b5ff`](https://github.com/eea/volto-eea-design-system/commit/473b5ff05980780a1b8606f70f7a380bd0a077cc)
+- prettier changes [`134da52`](https://github.com/eea/volto-eea-design-system/commit/134da52549b9d5eac5a12b7ad3005073500ac2c4)
+- change(grid-story): added container as grid width is influenced by container width [`459f481`](https://github.com/eea/volto-eea-design-system/commit/459f4813ee3c5325a3db22d417ac5f23063bd4d2)
+- change(container): modified all outputted widths to align to grid [`9f29cef`](https://github.com/eea/volto-eea-design-system/commit/9f29cefa4bfee1fe50844c8450de39ef4b0915d4)
+- Autobuild of docusaurus docs [`52245bb`](https://github.com/eea/volto-eea-design-system/commit/52245bb5f2cec22cb964f61ef556a8985eaa3a49)
+- change(breadcrumb): added vertical variant to the breadcrumbs like we do in Volto [`f405f84`](https://github.com/eea/volto-eea-design-system/commit/f405f8437be6be221b055a41c5d391f4cc94385d)
+- Autobuild of docusaurus docs [`1ea4dd3`](https://github.com/eea/volto-eea-design-system/commit/1ea4dd3dc780f564a2ea9ff92ca00dc083380eed)
+- change(segment): brought back overrides from pastanaga into our theme [`14efd02`](https://github.com/eea/volto-eea-design-system/commit/14efd021f81898bb0f2d3f1a2e8677445420591a)
+- change(container): removed padding from containers restoring thus the defaults [`c2ed813`](https://github.com/eea/volto-eea-design-system/commit/c2ed813cf2f7ce284e33f2e94e02ff16678c2d05)
+- Autobuild of docusaurus docs [`8652ed7`](https://github.com/eea/volto-eea-design-system/commit/8652ed7cbebd9508c620279c9f994aef6c5d952d)
+- change(breakpoints): added also contentBreakpoint for backward compatibility [`b6c9212`](https://github.com/eea/volto-eea-design-system/commit/b6c9212378a37639e6154d8d8e837169bcbac8b5)
+- Autobuild of docusaurus docs [`7928530`](https://github.com/eea/volto-eea-design-system/commit/792853064185f960f3f0a83a70b626b8bfc93d39)
+- change(breakpoints): restore Semantic UI breakpoints, adding extra needed values [`e7f5b1e`](https://github.com/eea/volto-eea-design-system/commit/e7f5b1e4fac6453458078bb02cdc66c328843b59)
+- Add storybook/docusaurus on PRs Refs #148775 [`0bab90a`](https://github.com/eea/volto-eea-design-system/commit/0bab90ad27d0ba27bd48399f1cab131a8bd88d58)
+
 #### [0.2.3](https://github.com/eea/volto-eea-design-system/compare/0.2.2...0.2.3)
 
+> 29 April 2022
+
+- Release [`#156`](https://github.com/eea/volto-eea-design-system/pull/156)
 - [R2] Button  [`#154`](https://github.com/eea/volto-eea-design-system/pull/154)
 - [R2] Tab [`#155`](https://github.com/eea/volto-eea-design-system/pull/155)
 - Autobuild of docusaurus docs [`4418144`](https://github.com/eea/volto-eea-design-system/commit/4418144c194c49cdeaf6928eabd781e01d0a391e)

package/package.json

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

package/src/ui/Breadcrumbs/Breadcrumb.stories.jsx

@@ -45,6 +45,9 @@ const Template = (args) => (
       <Breadcrumb.Section key="home" href={args.root}>
         <Image src={homeSVG} alt="home" />
       </Breadcrumb.Section>
+      <Breadcrumb.Divider>
+        <Icon className="ri-arrow-right-s-line"></Icon>
+      </Breadcrumb.Divider>
       {args.sections.map((section, index, sections) => [
         index !== 0 && (
           <Breadcrumb.Divider key={index}>

package/src/ui/Breadcrumbs/Breadcrumbs.jsx

@@ -22,6 +22,7 @@ const Breadcrumbs = ({
       aria-label={'breadcrumbs'}
       className="breadcrumbs"
       attached
+      vertical
     >
       <Container>
         <Breadcrumb size={size}>

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

@@ -5,25 +5,10 @@
 .ui.breadcrumb {
   display: flex;
   align-items: center;
-  padding-right: 1rem;
-  padding-left: 1rem;
-
-  //a.section {
-  //  color: #0074a3;
-  //}
-  //
-  //.section.active {
-  //  color: #4e7372;
-  //}
 
   .home.icon {
     margin-right: 0;
   }
-
-  @media only screen and (min-width: @tabletBreakpoint) {
-    padding-right: 0;
-    padding-left: 0;
-  }
 }
 /*******************************
         Theme Overrides
@@ -49,4 +34,3 @@
     font-size: @breadcrumbIconFontSize;
   }
 }
-

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

@@ -41,9 +41,9 @@
 .ui.form .ui.input input[type='url'],
 .ui.form textarea {
   height: 60px;
+  padding: @inputVerticalPadding 0;
   border-width: 0 0 @1px 0;
   border-radius: 0;
-  padding: @inputVerticalPadding 0;
 
   &:focus {
     border-radius: 0;

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

@@ -178,7 +178,6 @@ p.ui.button {
   opacity: @searchButtonIconOpacity;
 }
 
-
 /************* Inverted Buttons *************/
 // Override the light colors with the defaults
 
@@ -188,6 +187,7 @@ p.ui.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @primaryColor inset !important;
   color: @primaryColor;
 }
+
 .ui.inverted.primary.buttons .button:hover,
 .ui.inverted.primary.button:hover,
 .ui.inverted.primary.buttons .button:focus,
@@ -198,18 +198,22 @@ p.ui.button {
 .ui.inverted.primary.button:active {
   color: @invertedHoveredTextColor;
 }
+
 .ui.inverted.primary.buttons .button:hover,
 .ui.inverted.primary.button:hover {
   background-color: @primaryColorHover;
 }
+
 .ui.inverted.primary.buttons .button:focus,
 .ui.inverted.primary.button:focus {
   background-color: @primaryColorFocus;
 }
+
 .ui.inverted.primary.buttons .active.button,
 .ui.inverted.primary.active.button {
   background-color: @primaryColorActive;
 }
+
 .ui.inverted.primary.buttons .button:active,
 .ui.inverted.primary.button:active {
   background-color: @primaryColorDown;
@@ -221,6 +225,7 @@ p.ui.button {
   box-shadow: 0px 0px 0px @invertedBorderSize @secondaryColor inset !important;
   color: @secondaryColor;
 }
+
 .ui.inverted.secondary.buttons .button:hover,
 .ui.inverted.secondary.button:hover,
 .ui.inverted.secondary.buttons .button:focus,
@@ -231,19 +236,23 @@ p.ui.button {
 .ui.inverted.secondary.button:active {
   color: @invertedHoveredTextColor;
 }
+
 .ui.inverted.secondary.buttons .button:hover,
 .ui.inverted.secondary.button:hover {
   background-color: @secondaryColorHover;
 }
+
 .ui.inverted.secondary.buttons .button:focus,
 .ui.inverted.secondary.button:focus {
   background-color: @secondaryColorFocus;
 }
+
 .ui.inverted.secondary.buttons .active.button,
 .ui.inverted.secondary.active.button {
   background-color: @secondaryColorActive;
 }
+
 .ui.inverted.secondary.buttons .button:active,
 .ui.inverted.secondary.button:active {
   background-color: @secondaryColorDown;
-}
+}

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

@@ -4,31 +4,16 @@
 
 /* All Sizes */
 .ui.container {
-  width: 100%;
-  padding-right: @mobilePadding;
-  padding-left: @mobilePadding;
   transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
     margin-left 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
     margin-right 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
 }
 
-// TODO fix issue of large container padding and then remove this fix
-#toolbar .pastanaga-menu .ui.container {
-  padding: @profileSectionPadding;
-}
 
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-  .ui.container {
-    padding-right: @tabletPadding;
-    padding-left: @tabletPadding;
-  }
-}
-
-@media only screen and (min-width: @computerBreakpoint) {
-  .ui.container {
-    padding-right: @computerPadding;
-    padding-left: @computerPadding;
-  }
+// add padding to containers on edit section so that we display add and delete buttons
+.section-edit .container {
+  padding: 0 3rem;
+  width: auto !important;
 }
 
 .contentWidth(@offset) {

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

@@ -13,14 +13,16 @@
 
 /* Minimum Gutter is used to determine  the maximum container width for a given device */
 
-@maxWidth: 1400px;
+@maxWidth: 100%;
+@scrollbarWidth: 16px;
 
 /* Devices */
 @mobileMinimumGutter: 0em;
 @mobileWidth: auto;
-@mobileGutter: 1rem;
+@mobileGutter: 1.25rem;
 
-@tabletMinimumGutter: (@emSize  * 1);
+@tabletEmSize: 14px;
+@tabletMinimumGutter: (@tabletEmSize  * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
 @tabletGutter: auto;
 
@@ -63,4 +65,3 @@
 @textSize: @large;
 
 /* Section */
-@profileSectionPadding: 0px;

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

@@ -1,3 +1,80 @@
+/*******************************
+        Pastanaga Theme Overrides
+*******************************/
+
+.ui.basic.segment.content-area {
+  flex: 1 0 auto; /* IE11 fix, can't barely use  flex: 1; */
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.ui.primary.segment {
+  border-bottom: @4px solid @greyBorderColor;
+  font-size: @16px;
+  font-weight: @headerFontWeight;
+}
+
+.ui.secondary.segment {
+  font-size: @16px;
+}
+
+.ui.discreet.segment {
+  color: @lightGrey;
+  font-size: @14px;
+}
+
+.ui.form.segment {
+  padding: 0;
+
+  .ui.grid > .row {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.ui.actions.segment {
+  border-top: @1px solid @lightGreyBorderColor;
+}
+
+.inverted.segment a.item {
+  color: @white;
+  text-decoration: underline;
+}
+
+.pusher > .ui.basic.segment {
+  padding-bottom: 0;
+}
+
+.ui.secondary.attached.segment {
+  text-transform: uppercase;
+}
+
+.ui.segment.dashed {
+  border: 3px dashed #ccc;
+  box-shadow: none;
+}
+
+.users-control-panel .ui.clearing.segment.actions {
+  display: inline-block;
+  width: 100%;
+  text-transform: uppercase;
+}
+
+.users-control-panel table div.item::after {
+  display: none;
+}
+
+.ui.segment.imageborder {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.ui.segment.listing-item {
+  display: flex;
+  align-items: center;
+}
+
 /*******************************
          Theme Overrides
 *******************************/

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

@@ -22,7 +22,6 @@
       align-items: center;
       justify-content: space-between;
       z-index: @topSectionZindex;
-      width: 100% !important; // Semantic has auto
     }
     .item {
       display: flex;
@@ -392,6 +391,7 @@ Header Actions - Burger and Search Icons
         }
 
         .ui.text.menu {
+          flex-wrap: wrap;
           display: flex;
           width: 88%;
           max-height: 20px;

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

@@ -284,10 +284,15 @@
 --------------------*/
 
 @mobileBreakpoint            : 320px;
-@tabletBreakpoint            : 480px;
-@computerBreakpoint          : 835px;
-@largeMonitorBreakpoint      : 1025px;
-@widescreenMonitorBreakpoint : 1200px;
+@mobileLandscapeBreakpoint   : 480px;  // introduced for the design system
+@tabletBreakpoint            : 768px;
+@contentBreakpoint           : 835px; // introduced for the design system
+@computerBreakpoint          : 992px;
+@smallMonitorBreakpoint      : 1024px; // introduced for the design system
+@largeMonitorBreakpoint      : 1200px;
+@laptopMonitorBreakpoint     : 1280px; // introduced for the design system
+@siteBreakpoint              : 1400px; // introduced for the design system
+@widescreenMonitorBreakpoint : 1920px;
 
 /* Paddings for breakpoints */
 @mobilePadding  : 1.875rem;
@@ -664,7 +669,6 @@
 @largestTabletScreen : (@computerBreakpoint - @1px);
 @largestSmallMonitor : (@largeMonitorBreakpoint - @1px);
 @largestLargeMonitor : (@widescreenMonitorBreakpoint - @1px);
-@mobileWidth: 1279px;
 
 
 /*-------------------