feat(styling): added divider spacing options #19 from eea/divider-spa…

…cing-sizes
eea · Mar 28, 2024 · 8999247 · 8999247
2 parents 9755be2 + dfef06d
commit 8999247
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 22 deletions.
diff --git a/Makefile b/Makefile
@@ -98,15 +98,15 @@ test-update:	## Update jest tests snapshots
 
 .PHONY: stylelint
 stylelint:		## Stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}'
 
 .PHONY: stylelint-overrides
 stylelint-overrides:
 	$(NODE_MODULES)/.bin/stylelint --custom-syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'
 
 .PHONY: stylelint-fix
 stylelint-fix:	## Fix stylelint
-	$(NODE_MODULES)/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}' --fix
+	$(NODE_MODULES)/.bin/stylelint --allow-empty-input 'src/**/*.{css,less}' --fix
 	$(NODE_MODULES)/.bin/stylelint --custom-syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides' --fix
 
 .PHONY: prettier
@@ -119,11 +119,11 @@ prettier-fix:	## Fix prettier
 
 .PHONY: lint
 lint:			## ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --max-warnings=0 'src/**/*.{js,jsx}'
 
 .PHONY: lint-fix
 lint-fix:		## Fix ES Lint
-	$(NODE_MODULES)/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'
+	$(NODE_MODULES)/.bin/eslint --fix 'src/**/*.{js,jsx}'
 
 .PHONY: i18n
 i18n:			## i18n

diff --git a/cypress/e2e/02-dexterity-controlpanel-layout.cy.js b/cypress/e2e/02-dexterity-controlpanel-layout.cy.js
@@ -6,10 +6,6 @@ describe('ControlPanel: Dexterity Content-Types Layout', () => {
 
   it('Edit Blocks Layout for Book', () => {
     cy.visit('/controlpanel/dexterity-types');
-    cy.waitForResourceToLoad('@navigation');
-    cy.waitForResourceToLoad('@breadcrumbs');
-    cy.waitForResourceToLoad('@actions');
-    cy.waitForResourceToLoad('@types');
 
     cy.get('a[href="/controlpanel/dexterity-types/book"]').should(
       'have.text',
@@ -40,10 +36,6 @@ describe('ControlPanel: Dexterity Content-Types Layout', () => {
     cy.get('#toolbar-save').click();
 
     cy.visit('/cypress');
-    cy.waitForResourceToLoad('@navigation');
-    cy.waitForResourceToLoad('@breadcrumbs');
-    cy.waitForResourceToLoad('@actions');
-    cy.waitForResourceToLoad('@types');
 
     cy.get('button[class="add"]').click();
     cy.get('#toolbar-add-book').click();

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -447,10 +447,6 @@ Cypress.Commands.add('toolbarSave', () => {
 
   // Save
   cy.get('#toolbar-save').click();
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
   cy.waitForResourceToLoad('my-page');
   cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
 });

diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
@@ -35,10 +35,6 @@ export const slateBeforeEach = (contentType = 'Document') => {
     path: 'cypress',
   });
   cy.visit('/cypress/my-page');
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
   cy.waitForResourceToLoad('my-page');
   cy.navigate('/cypress/my-page/edit');
 };

diff --git a/package.json b/package.json
@@ -23,6 +23,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
+    "postcss-less": "6.0.0",
+    "razzle-plugin-scss": "4.2.18",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",

diff --git a/src/components/Divider/Schema.js b/src/components/Divider/Schema.js
@@ -86,6 +86,15 @@ const messages = defineMessages({
     id: 'A divider can have its colors inverted.',
     defaultMessage: 'A divider can have its colors inverted.',
   },
+  Spacing: {
+    id: 'Spacing',
+    defaultMessage: 'Spacing',
+  },
+  SpacingHelp: {
+    id: 'spacing-help',
+    defaultMessage:
+      'Use this option with the Hidden option to add spacing between blocks.',
+  },
 });
 
 export const DividerEditSchema = ({ intl }) => ({
@@ -95,7 +104,15 @@ export const DividerEditSchema = ({ intl }) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['title', 'text', 'hidden', 'section', 'fitted', 'short'],
+      fields: [
+        'title',
+        'text',
+        'hidden',
+        'section',
+        'fitted',
+        'short',
+        'spacing',
+      ],
     },
   ],
 
@@ -128,6 +145,12 @@ export const DividerEditSchema = ({ intl }) => ({
       description: intl.formatMessage(messages.ShortHelp),
       type: 'boolean',
     },
+    spacing: {
+      title: intl.formatMessage(messages.Spacing),
+      description: intl.formatMessage(messages.SpacingHelp),
+      widget: 'image_size',
+      default: 's',
+    },
   },
   required: [],
 });

diff --git a/src/components/Divider/View.jsx b/src/components/Divider/View.jsx
@@ -9,7 +9,11 @@ export default function ViewBlockDivider({ data }) {
       hidden={data.hidden}
       section={data.section}
       fitted={data.fitted}
-      className={cx(data.styles?.theme, data.short ? 'short' : '')}
+      className={cx(
+        data.styles?.theme,
+        data.short ? 'short' : '',
+        data?.spacing ? `divider-spacing-${data?.spacing}` : '',
+      )}
       horizontal={!!data.text}
       inverted={data.styles?.inverted}
     >

diff --git a/src/components/Divider/divider.less b/src/components/Divider/divider.less
@@ -31,3 +31,17 @@
   width: 50%;
   margin-inline: auto;
 }
+
+.ui.divider {
+  &.divider-spacing-s {
+    margin-block: var(--spacing-block-sm, 1rem);
+  }
+
+  &.divider-spacing-m {
+    margin-block: var(--spacing-block-md, 1.5rem);
+  }
+
+  &.divider-spacing-l {
+    margin-block: var(--spacing-block-lg, 2rem);
+  }
+}