Add hidden toggle

eea · May 24, 2021 · 3b8ed26 · 3b8ed26
1 parent 4bdf803
commit 3b8ed26
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -4,12 +4,27 @@ import cx from 'classnames';
 import config from '@plone/volto/registry';
 import { withCachedImages } from '@eeacms/volto-block-style/hocs';
 
+const getLineHeight = (fontSize) => {
+  switch (fontSize) {
+    case 'large':
+      return '110%';
+    case 'x-large':
+      return '130%';
+    default:
+      return;
+  }
+};
+
 export function getInlineStyles(data, props = {}) {
+  // console.log('props', props);
   return {
+    ...(data.hidden && props.mode !== 'edit' ? { display: 'none' } : {}),
     ...(data.backgroundColor ? { backgroundColor: data.backgroundColor } : {}),
     ...(data.textColor ? { color: data.textColor } : {}),
     ...(data.textAlign ? { textAlign: data.textAlign } : {}),
-    ...(data.fontSize ? { fontSize: data.fontSize } : {}),
+    ...(data.fontSize
+      ? { fontSize: data.fontSize, lineHeight: getLineHeight(data.fontSize) }
+      : {}),
     ...(data.isScreenHeight && props.screen.screenHeight
       ? {
           minHeight: (
@@ -36,6 +51,7 @@ const StyleWrapperView = (props) => {
     customId,
     isDropCap,
     isScreenHeight,
+    hidden = false,
   } = styleData;
   const containerType = data['@type'];
   const backgroundImage = styleData.backgroundImage;
@@ -51,6 +67,7 @@ const StyleWrapperView = (props) => {
     size ||
     customClass ||
     isDropCap ||
+    hidden ||
     customId;
 
   const attrs = {

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
@@ -11,7 +11,7 @@ export const StyleSchema = () => ({
     {
       id: 'standard',
       title: 'Standard',
-      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap'],
+      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap', 'hidden'],
     },
     {
       id: 'advanced',
@@ -91,6 +91,11 @@ export const StyleSchema = () => ({
       description: 'First letter is styled as a drop cop',
       type: 'boolean',
     },
+    hidden: {
+      title: 'Hidden',
+      description: 'Hide this block',
+      type: 'boolean',
+    },
   },
   required: [],
 });