change(columns): implement narrow, container and wide width classes

- we can apply any of the defined widths this way starting from the
  layout view until we have extra classes

src/components/theme/Views/NarrowView.jsx

@@ -21,7 +21,7 @@ import { hasBlocksData } from '@plone/volto/helpers';
 const NarrowView = ({ content }) => {
   return hasBlocksData(content) ? (
     <>
-      <BodyClass className="narrow_view" />
+      <BodyClass className="narrow-view" />
       <DefaultView content={content} className={'page-area'} />
     </>
   ) : null;

src/components/theme/Views/WideView.jsx

@@ -0,0 +1,60 @@
+/**
+ * Document view component.
+ * @module components/theme/View/WideView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DefaultView } from '@plone/volto/components/';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+import { hasBlocksData } from '@plone/volto/helpers';
+
+/**
+ * Component to display the default view.
+ * @function WideView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const WideView = ({ content }) => {
+  return hasBlocksData(content) ? (
+    <>
+      <BodyClass className="wide-view" />
+      <DefaultView content={content} />
+    </>
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+WideView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default WideView;

theme/themes/eea/globals/site.overrides

@@ -17,12 +17,23 @@ h2, h3, h4, h5, h6 {
   color: @contentAreaColor;
 }
 
-.narrow_view [id="page-document"] > * {
+[class*="narrow-view"] [id="page-document"] > *,
+.content-area .narrow_width
+{
   max-width: @narrowWidth;
   margin: 0 auto;
 }
 
-.wide_view [id="page-document"] > * {
+[class="view-defaultview"] [id="page-document"] > *,
+.content-area .container-width
+{
+  max-width: @containerWidth;
+  margin: 0 auto;
+}
+
+[class="wide-view"] [id="page-document"] > *,
+.content-area .wide-width
+{
   max-width: @wideWidth;
   margin: 0 auto;
 }

theme/themes/eea/globals/site.variables

@@ -280,6 +280,7 @@
 --------------------*/
 @textWidth: 800px;
 @narrowWidth: var(--narrow-text-width, 900px);
+@containerWidth: var(--content-text-width, 1120px);
 @wideWidth: var(--wide-text-width, 1200px);