@eeacms/volto-eea-design-system 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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.5.2](https://github.com/eea/volto-eea-design-system/compare/0.5.1...0.5.2)
+
+- [R3] Content box [`#125`](https://github.com/eea/volto-eea-design-system/pull/125)
+- Autobuild of docusaurus docs [`31bc68c`](https://github.com/eea/volto-eea-design-system/commit/31bc68cbfe7ba8b7fc5d02358e777f394e60c48d)
+- feat(ContentBox): Update storybook with available themes [`93b26b2`](https://github.com/eea/volto-eea-design-system/commit/93b26b2f5f1d627aa8049df61257499e4798dd79)
+- feat(ContentBox): Add primary, secondary, tertiary themes [`87cb2fe`](https://github.com/eea/volto-eea-design-system/commit/87cb2fe7e4cd5c2872299756f493e371abcbb05f)
+- Cleanup [`2b128df`](https://github.com/eea/volto-eea-design-system/commit/2b128dface95b560588a343f1ddf7bbaf3efb320)
+- perf(eol): change to lf [`78b2955`](https://github.com/eea/volto-eea-design-system/commit/78b2955ff73d9436134d1a6399040b2d7c7f5714)
+- refactor(contentBox): restructure the component to be more flexible [`f0d2de6`](https://github.com/eea/volto-eea-design-system/commit/f0d2de67e43fafa10052871f99ac841c83cf8157)
+- chore(contentBox) : add lint changes [`5aaf740`](https://github.com/eea/volto-eea-design-system/commit/5aaf740594f0001b1672bb6dc18d973f55c881f0)
+- feat(contentBox) : add new Content Box component [`2ebbb47`](https://github.com/eea/volto-eea-design-system/commit/2ebbb47fe685f9809aa3572263be376d9688371e)
+
 #### [0.5.1](https://github.com/eea/volto-eea-design-system/compare/0.5.0...0.5.1)
 
+> 13 June 2022
+
+- change(header): hero integration fixes [`#193`](https://github.com/eea/volto-eea-design-system/pull/193)
 - Autobuild of docusaurus docs [`ac5df8e`](https://github.com/eea/volto-eea-design-system/commit/ac5df8edab41d37e118d34c6a4b35a64428643d0)
 - change(hero): added styles for adding dark overlay to hero [`bf1d292`](https://github.com/eea/volto-eea-design-system/commit/bf1d292fecfa8a6b222558f0d93f48e19bf6b8ea)
 - Autobuild of docusaurus docs [`3192671`](https://github.com/eea/volto-eea-design-system/commit/31926711a83da6b7744249fd3c801e87ae6910d5)

package/package.json

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

package/src/semantic.less

@@ -257,6 +257,10 @@
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/relatedContent';
 }
 
+& {
+  @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/contentBox';
+}
+
 & {
   @import '@eeacms/volto-eea-design-system/../theme/themes/eea/extras/downloadLabeledIcon';
 }

package/src/ui/ContentBox/ContentBox.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+
+function ContentBox({ children, ...rest }) {
+  return (
+    <div className={`eea content-box ${rest.variant}`}>
+      {rest.container ? <Container>{children}</Container> : children}
+    </div>
+  );
+}
+
+export default ContentBox;

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

@@ -10,9 +10,11 @@
 }
 
 // add padding to containers on edit section so that we display add and delete buttons
-.section-edit .container {
-  width: auto !important;
-  padding: 0 3rem;
+.section-edit {
+  .container:not(.content-box-inner) {
+    width: auto !important;
+    padding: 0 3rem;
+  }
 }
 
 .contentWidth(@offset) {

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

@@ -0,0 +1,41 @@
+@type: 'extra';
+@element: 'contentBox';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      CONTENT BOX
+--------------------*/
+
+.content-box {
+  width: @contentBoxWidth;
+  background-color: @contentBoxBackgroundColor;
+  color: @contentBoxColorInverted;
+  margin-bottom: @mediumGap;
+
+  position: relative;
+  margin-right: -50vw;
+  margin-left: -50vw;
+  right: 50%;
+  left: 50%;
+  
+  .ui.container {
+    padding-top: @contentBoxContainerMarginTop;
+    padding-bottom: @contentBoxContainerMarginBottom;
+  }
+
+  &.primary {
+    background-color: @contentBoxBackgroundColorPrimary;
+    color: @contentBoxColor;
+  }
+
+  &.secondary {
+    background-color: @contentBoxBackgroundColorSecondary;
+    color: @contentBoxColor;
+  }
+
+  &.tertiary {
+    background-color: @contentBoxBackgroundColorTertiary;
+    color: @contentBoxColor;
+  }
+}

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

@@ -0,0 +1,19 @@
+/*******************************
+            Content Box
+*******************************/
+
+/* Content Box */
+@contentBoxWidth : 100vw;
+@contentBoxColor : @white;
+@contentBoxBackgroundColor: @grey-1;
+@contentBoxColorInverted : @black;
+
+/* Themes */
+@contentBoxBackgroundColorPrimary: @primaryColor;
+@contentBoxBackgroundColorSecondary: @secondaryColor;
+@contentBoxBackgroundColorTertiary: @tertiaryColor;
+
+
+/* Container */
+@contentBoxContainerMarginTop    : @bigGap;
+@contentBoxContainerMarginBottom : @bigGap;