From 2361683e0b25dbb5ff250028335396434237b261 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 10:02:02 +0200 Subject: [PATCH 01/74] update gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 25a69f14b..595148829 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ node_modules vendor composer.lock package-lock.json +bun.lockb /docs # Used for tests. From fcf20a38585963aa95e582d96a2cba957fc4368d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 10:39:16 +0200 Subject: [PATCH 02/74] remove deprecated and moved helpers --- scripts/helpers/camelize.js | 17 -- scripts/helpers/classnames.js | 11 - scripts/helpers/debounce.js | 21 -- scripts/helpers/devices.js | 28 -- scripts/helpers/element-children-height.js | 29 --- scripts/helpers/es-dash.js | 284 --------------------- scripts/helpers/escape-string.js | 22 -- scripts/helpers/index.js | 33 +-- scripts/helpers/navigator.js | 20 -- scripts/helpers/text-helpers.js | 97 ------- scripts/helpers/throttle.js | 14 - scripts/index.js | 27 -- 12 files changed, 1 insertion(+), 602 deletions(-) delete mode 100644 scripts/helpers/camelize.js delete mode 100644 scripts/helpers/classnames.js delete mode 100644 scripts/helpers/debounce.js delete mode 100644 scripts/helpers/devices.js delete mode 100644 scripts/helpers/element-children-height.js delete mode 100644 scripts/helpers/es-dash.js delete mode 100644 scripts/helpers/escape-string.js delete mode 100644 scripts/helpers/navigator.js delete mode 100644 scripts/helpers/text-helpers.js delete mode 100644 scripts/helpers/throttle.js diff --git a/scripts/helpers/camelize.js b/scripts/helpers/camelize.js deleted file mode 100644 index 521402dd9..000000000 --- a/scripts/helpers/camelize.js +++ /dev/null @@ -1,17 +0,0 @@ -import { camelCase } from './es-dash'; - -/** - * Returns a camelCase-formatted string. - * - * @param {string} string - String to convert. - * - * @access public - * - * @return {string} *camelCase*-formatted string. - * - * Usage: - * ```js - * camelize('New super Test-title') // => 'newSuperTestTitle' - * ``` - */ -export const camelize = (input) => camelCase(input); diff --git a/scripts/helpers/classnames.js b/scripts/helpers/classnames.js deleted file mode 100644 index 58af978d9..000000000 --- a/scripts/helpers/classnames.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Filters out falsy items and returns everything joined with a string. - * @since 8.0.0 - * - * @param {...string} args - Classnames to process. - * - * @returns Filtered classnames separated with a space. - */ -export const classnames = (...args) => { - return args.filter(Boolean).join(' '); -}; diff --git a/scripts/helpers/debounce.js b/scripts/helpers/debounce.js deleted file mode 100644 index 46deb48db..000000000 --- a/scripts/helpers/debounce.js +++ /dev/null @@ -1,21 +0,0 @@ -import justDebounceIt from 'just-debounce-it'; - -/** - * Debounces the provided function. - * For more information, check [this blog post](https://davidwalsh.name/javascript-debounce-function). - * - * @param {function} func - Callback to apply. - * @param {number} wait - Number of milliseconds for the delay of the callback function. Default is 200ms. - * - * @access public - * - * @return {function} Debounced callback. - * - * Usage: - * ```js - * debounce(() => { - * // callback function. - * }, 250); - * ``` - */ -export const debounce = (func, wait = 250) => justDebounceIt(func, wait); diff --git a/scripts/helpers/devices.js b/scripts/helpers/devices.js deleted file mode 100644 index 551645eb3..000000000 --- a/scripts/helpers/devices.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Device check helper - * - * Detect a certain device, so specific functionality can be implemented for it. - * - * @access public - * - * Usage: - * ```js - * device.iPhone(); - * ``` - */ -export const device = { - /** - * Detect iPhone - * - * @returns {boolean} - */ - iPhone() { - let checkIphone = false; - - if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { - checkIphone = true; - } - - return checkIphone; - }, -}; diff --git a/scripts/helpers/element-children-height.js b/scripts/helpers/element-children-height.js deleted file mode 100644 index fc56f4705..000000000 --- a/scripts/helpers/element-children-height.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Returns height of the element measured by height of its children. - * - * @param {object} element - DOM element - * - * @access public - * - * @return {number} Combined height of the children elements - * - * Usage: - * ```js - * elementChildrenHeight('.js-item'); - * ``` - * - * Output: - * ```js - *
- *
- *
- * ``` - */ -export function elementChildrenHeight(element) { - let height = 0; - [...element.children].forEach((child) => { - height += child.offsetHeight; - }); - - return height; -} diff --git a/scripts/helpers/es-dash.js b/scripts/helpers/es-dash.js deleted file mode 100644 index 17ccabbfd..000000000 --- a/scripts/helpers/es-dash.js +++ /dev/null @@ -1,284 +0,0 @@ -// Very lightweight Lodash replacements - from https://github.com/angus-c/just. -import justKebabCase from 'just-kebab-case'; -import justCamelCase from 'just-camel-case'; - -import justIsEmpty from 'just-is-empty'; -import justHas from 'just-has'; - -/** - * Returns a camelCase-formatted string. - * - * @param {string} input - String to convert. - * - * @access public - * - * @return {string} *camelCase*-formatted string. - * - * Usage: - * ```js - * camelCase('New super Test-title') // => 'newSuperTestTitle' - * camelCase(null) // => '' - * ``` - */ -export const camelCase = (input) => lowerFirst(justCamelCase(input ?? '')); - -/** - * Returns a PascalCase-formatted string. - * - * @param {string} input - String to convert. - * - * @access public - * - * @return {string} *PascalCase*-formatted string. - * - * Usage: - * ```js - * pascalCase('New super Test-title') // => 'NewSuperTestTitle' - * pascalCase(null) // => '' - * ``` - */ -export const pascalCase = (input) => upperFirst(justCamelCase(input ?? '')); - -/** - * Returns a snake_case-formatted string. - * - * @param {string} input - String to convert. - * - * @access public - * - * @return {string} *snake_case*-formatted string. - * - * Usage: - * ```js - * snakeCase('New super Test-title') // => 'new_super_test_title' - * snakeCase(null) // => '' - * ``` - */ -export const snakeCase = (input) => kebabCase(input ?? '').replaceAll('-', '_'); - -/** - * Returns a kebab-case-formatted string. - * - * @param {string} input - String to convert. - * - * @access public - * - * @return {string} *kebab-case*-formatted string. - * - * Usage: - * ```js - * kebabCase('New super Test-title') // => 'new-super-test-title' - * kebabCase(null) // => '' - * ``` - */ -export const kebabCase = (input) => justKebabCase(input ?? ''); - -/** - * Checks if value is an empty object or collection. - * - * @param {*} input - Value to check. - * - * @returns true if the object is empty, false otherwise. - * - * Usage: - * ```js - * isEmpty({}) // => true - * isEmpty([]) // => true - * isEmpty('') // => true - * isEmpty({ a: 1 }) // => false - * isEmpty([1, 2, 3]) // => false - * ``` - */ -export const isEmpty = (input) => justIsEmpty(input); - -/** - * Returns the string with its first character converted to lowercase. - * - * @param {string} string - String to convert. - * - * @return {string} string with its first character converted to lowercase. - * - * Usage: - * ```js - * lowerFirst('New super Test-title') // => 'new super Test-title' - * ``` - */ -export const lowerFirst = (string) => string ? string.charAt(0).toLowerCase() + string.slice(1) : ''; - -/** - * Returns the string with its first character converted to uppercase. - * - * @param {string} string - String to convert. - * - * @return {string} string with its first character converted to uppercase. - * - * Usage: - * ```js - * upperFirst('new super Test-title') // => 'New super Test-title' - * ``` - */ -export const upperFirst = (string) => string ? string.charAt(0).toUpperCase() + string.slice(1) : ''; - -/** - * Checks if `key` is a direct property of `object`. Key may be a path of a value separated by `.` - * - * @param {object} obj - Object to check. - * @param {string} key - Key to check. - * - * @return {boolean} true if key is a direct property, false otherwise. - * - * Usage: - * ```js - * has({ a: 1 }, 'a') // => true - * has({ a: 1 }, 'b') // => false - * has({ a: { b: 2 } }, 'a.b') // => true - * has({ a: { b: 3 } }, 'a.c') // => false - * ``` - * - */ -export const has = (obj, key) => justHas(obj, key); - -/* - * Checks if value is a plain object, that is, an object created by the Object constructor or one with a `[[Prototype]]` of `null`. - * - * @param {*} value - Value to check. - * @returns {boolean} true if value is a plain object, false otherwise. - * - * Usage: - * ```js - * isPlainObject({ a: 2 }) // => true - * isPlainObject('Lorem') // => false - * isPlainObject([]) // => false - * isPlainObject(new Boolean()) // => false - * ``` - */ -export const isPlainObject = (value) => { - if (typeof value !== 'object' || value === null) { - return false; - } - - if (Object.prototype.toString.call(value) !== '[object Object]') { - return false; - } - - const proto = Object.getPrototypeOf(value); - if (proto === null) { - return true; - } - - const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor; - - return ( - typeof Ctor === 'function' && - Ctor instanceof Ctor && Function.prototype.call(Ctor) === Function.prototype.call(value) - ); -}; - -// Source: https://youmightnotneed.com/lodash - -/** - * Checks if value is the language type of `Object`. (e.g. arrays, functions, objects, regexes, new Number(0), and new String(’’)) - * - * @param {*} input - Value to check. - * - * @returns {boolean} true if value is an array, false otherwise. - * - * Usage: - * ```js - * isObject({}) // => true - * isObject([1, 2, 3]) // => true - * isObject(() => {}) // => true - * isObject(null) // => false - * ``` - */ -export const isObject = (input) => input instanceof Object; - -// Basic implementation, should cover most usual cases. -// Source: https://gist.github.com/jsjain/a2ba5d40f20e19f734a53c0aad937fbb - -/** - * Performs a deep comparison between two values to determine if they are equivalent. - * - * **Note**: works for simple types, arrays, and objects. Might not work for all the types the lodash version supports. - * - * @param {*} first First value to compare. - * @param {*} second Second value to compare. - * - * @returns true if the values are equivalent, false otherwise. - * - * Usage: - * ```js - * isEqual({ a: 1 }, { a: 1 }) // => true - * isEqual({ a: 1 }, { a: 2 }) // => false - * isEqual({ a: 1 }, 'b') // => false - * ``` - */ -export const isEqual = (first, second) => { - if (first === second) { - return true; - } - - if ((first === undefined || second === undefined || first === null || second === null) - && (first || second)) { - return false; - } - - const firstType = first?.constructor.name; - const secondType = second?.constructor.name; - - if (firstType !== secondType) { - return false; - } - - if (firstType === 'Array') { - if (first.length !== second.length) { - return false; - } - - let equal = true; - - for (let i = 0; i < first.length; i++) { - if (!isEqual(first[i], second[i])) { - equal = false; - break; - } - } - - return equal; - } - - if (firstType === 'Object') { - let equal = true; - const fKeys = Object.keys(first); - const sKeys = Object.keys(second); - - if (fKeys.length !== sKeys.length) { - return false; - } - - for (let i = 0; i < fKeys.length; i++) { - if (first[fKeys[i]] && second[fKeys[i]]) { - if (first[fKeys[i]] === second[fKeys[i]]) { - continue; - } - - if (first[fKeys[i]] && (first[fKeys[i]].constructor.name === 'Array' - || first[fKeys[i]].constructor.name === 'Object')) { - equal = isEqual(first[fKeys[i]], second[fKeys[i]]); - if (!equal) { - break; - } - } else if (first[fKeys[i]] !== second[fKeys[i]]) { - equal = false; - break; - } - } else if ((first[fKeys[i]] && !second[fKeys[i]]) || (!first[fKeys[i]] && second[fKeys[i]])) { - equal = false; - break; - } - } - return equal; - } - - return first === second; -}; diff --git a/scripts/helpers/escape-string.js b/scripts/helpers/escape-string.js deleted file mode 100644 index 90a95b86f..000000000 --- a/scripts/helpers/escape-string.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Escapes a string - * - * Takes the provided string and removes special characters. Characters that will be removed: `([;&,.+*~':"!^#$%@[\]()=>|]`. - * - * @param {string} string - String to escape. - * - * @access public - * - * @return {string} Escaped string. - * - * Usage: - * ```js - * escapeString.escapeString('Speci^al stri&n$g'); - * ``` - * - * Output: - * ```js - * Special string - * ``` - */ -export const escapeString = (string) => string.replace(/([;&,.+*~':"!^#$%@[\]()=>|])/g, '\\$1'); diff --git a/scripts/helpers/index.js b/scripts/helpers/index.js index 51f1dc2f7..eb1c915f2 100644 --- a/scripts/helpers/index.js +++ b/scripts/helpers/index.js @@ -1,37 +1,6 @@ // All exports are sorted in alphabetical order. export { getDefaultBreakpointNames } from './breakpoints'; -export { camelize } from './camelize'; -export { classnames } from './classnames'; export { cookies } from './cookies'; -export { debounce } from './debounce'; -export { throttle } from './throttle'; -export { device } from './devices'; export { dynamicImport } from './dynamic-import'; -export { elementChildrenHeight } from './element-children-height'; -export { - camelCase, - pascalCase, - snakeCase, - kebabCase, - isEmpty, - lowerFirst, - upperFirst, - has, - isPlainObject, - isObject, - isEqual, -} from './es-dash'; -export { escapeString } from './escape-string'; -export { getNavigatorVibrate } from './navigator'; - -export { - truncate, - truncateMiddle, - unescapeHTML, -} from './text-helpers'; - -export { - luminanceFromHex, - luminanceFromRgb, -} from './color-helpers'; +export { luminanceFromHex, luminanceFromRgb } from './color-helpers'; diff --git a/scripts/helpers/navigator.js b/scripts/helpers/navigator.js deleted file mode 100644 index db62377ff..000000000 --- a/scripts/helpers/navigator.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * The `Navigator.vibrate()` method pulses the vibration hardware on the device, if such hardware exists. - * - * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate - * - * @access public - * - * @returns {string} - * - * Usage: - * ```js - * getNavigatorVibrate(); - * ``` - */ -export const getNavigatorVibrate = () => { - return navigator.vibrate || - navigator.webkitVibrate || - navigator.mozVibrate || - navigator.msVibrate; -}; diff --git a/scripts/helpers/text-helpers.js b/scripts/helpers/text-helpers.js deleted file mode 100644 index 7b5b716af..000000000 --- a/scripts/helpers/text-helpers.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Slices the string in the middle and inputs the provided separator so that the string is maxLength characters long. - * - * @param {string} input - String to slice. - * @param {number} maxLength - Maximum allowed string length. - * @param {string} [separator='...'] - Separator to insert. - * - * @access public - * - * @returns {string|Error} Truncated string or error if separator length exceeds maxLength. - * - * Usage: - * ```js - * truncateMiddle('https://eightshift.com/contact/', 22); - * ``` - * - * Output: - * ```js - * "https://ei.../contact/" - */ -export const truncateMiddle = (input, maxLength, separator = '...') => { - // If the string is shorter than maxLength, just return it. - if (input?.length <= maxLength) { - return input; - } - - // Return error if separator would prevent any characters from the word showing. - if (separator.length + 1 > maxLength) { - throw new Error('Separator length exceeds the passed maximum length, string wouldn\'t be visible.'); - } - - // Smartly split up the string. - const maxStringLength = maxLength - separator.length; - - const leftPartLength = Math.ceil(maxStringLength / 2); - const rightPartLength = Math.floor(maxStringLength / 2); - - const leftPart = input.slice(0, leftPartLength).trim(); - const rightPart = rightPartLength > 0 ? input.slice(-1 * rightPartLength).trim() : ''; - - return `${leftPart}${separator}${rightPart}`; -}; - -/** -* Un-escapes HTML entities. -* -* @param {string} input - Input string. -* -* @access public -* -* @returns {string} String with HTML entities unescaped. -* -* Usage: -* ```js -* unescapeHTML('Test&Up'); -* ``` -* -* Output: -* ```js -* Test&Up -* ``` -*/ -export const unescapeHTML = (input = '') => (new DOMParser().parseFromString(input, 'text/html')).documentElement.textContent; - -/** - * Limits the string to the maximum length and adds the provided separator in case the string is longer. - * - * @param {string} input - String to slice. - * @param {number} maxLength - Maximum allowed string length. - * @param {string} [separator='...'] - Separator to insert. - * - * @access public - * - * @returns {string|Error} Truncated string or error if separator length exceeds maxLength. - * - * Usage: - * ```js - * truncate('Hello this is a string', 13); // => "Hello this..." - * ``` - */ -export const truncate = (input, maxLength, separator = '...') => { - // If the string is shorter than maxLength, just return it. - if (input?.length <= maxLength) { - return input; - } - - // Return error if separator would prevent any characters from the word showing. - if (separator.length + 1 > maxLength) { - throw new Error('Separator length exceeds the passed maximum length, string wouldn\'t be visible.'); - } - - // Split the string. - const maxStringLength = maxLength - separator.length; - const leftPart = input.slice(0, maxStringLength).trim(); - - return `${leftPart}${separator}`; -}; diff --git a/scripts/helpers/throttle.js b/scripts/helpers/throttle.js deleted file mode 100644 index a49607b91..000000000 --- a/scripts/helpers/throttle.js +++ /dev/null @@ -1,14 +0,0 @@ -import justThrottle from 'just-throttle'; - -/** - * Separated implementation of throttle functionality due to additional parameter in implementation. - * - * @param {function} func - Callback to apply. - * @param {number} wait - Number of milliseconds of the callback function lock. Default is 250ms. - * @param {number} after - If function is needed to be launched before or after throttling. - * - * @access public - * - * @return {function} Throttled callback. - */ -export const throttle = (func, wait = 250, after = false) => justThrottle(func, wait, { leading: !after, trailing: after }); diff --git a/scripts/index.js b/scripts/index.js index 651c9374f..ac57251bc 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -154,35 +154,8 @@ export { ucfirst } from './editor/utility'; // Helpers export { getDefaultBreakpointNames } from './helpers/breakpoints'; -export { camelize } from './helpers/camelize'; -export { classnames } from './helpers/classnames'; export { cookies } from './helpers/cookies'; -export { debounce } from './helpers/debounce'; -export { throttle } from './helpers/throttle'; -export { device } from './helpers/devices'; export { dynamicImport } from './helpers/dynamic-import'; -export { elementChildrenHeight } from './helpers/element-children-height'; -export { - camelCase, - pascalCase, - snakeCase, - kebabCase, - isEmpty, - lowerFirst, - upperFirst, - has, - isPlainObject, - isObject, - isEqual, -} from './helpers/es-dash'; -export { escapeString } from './helpers/escape-string'; -export { getNavigatorVibrate } from './helpers/navigator'; -export { - truncate, - truncateMiddle, - unescapeHTML -} from './helpers/text-helpers'; - export { luminanceFromHex, luminanceFromRgb, From 5e8e35bf66f0f2c83e2b625bc13640b72f517385 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 11:34:36 +0200 Subject: [PATCH 03/74] remove icons --- scripts/editor/icons/icons.js | 990 ---------------------------------- 1 file changed, 990 deletions(-) delete mode 100644 scripts/editor/icons/icons.js diff --git a/scripts/editor/icons/icons.js b/scripts/editor/icons/icons.js deleted file mode 100644 index 0a592fa7c..000000000 --- a/scripts/editor/icons/icons.js +++ /dev/null @@ -1,990 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -/** - * A component that displays a block icon. - * - * Usage: - * - * ```jsx - * import { BlockIcon } from '@eightshift/frontend-libs/scripts'; - * - * - * ``` - * - * Output: - * - * Selected block icon displayed inline. - * ```html - * ... - * ``` - * - * @param {object} props - BlockIcon options. - * @param {string} props.iconName - Name of the block icon to display. - * - * @access public - * - * @returns {string} - */ -export const BlockIcon = (props) => { - const { iconName } = props; - - return ( - - ); -}; - -//--------------------------------------------------------------- -// Private methods - -// Generic color swatch icon - separated because a random ID needs to be generated every time to ensure clip path works properly. -const GenericColorSwatch = ({ style }) => { - const clipId = Math.random().toString(36).slice(-10); - - return ( - - - - - - - - - - - - - - - - - - ); -}; - -/** - * UI icons. - */ -export const icons = { - width: , - offset: , - containerWidth: , - containerHeight: , - containerSpacing: , - spacingTop: , - spacingBottom: , - color: , - id: , - anchor: , - verticalAlign: , - horizontalAlign: , - dividerTop: , - dividerBottom: , - hide: , - order: , - wrapper: , - wrapperSimple: , - link: , - size: , - newTab: , - loopMode: , - gutter: , - verticalSpacing: , - textSize: , - spacingTopIn: , - spacingBottomIn: , - verticalAlignTop: , - verticalAlignCenter: , - verticalAlignBottom: , - verticalAlignStretch: , - backgroundImage: , - itemsPerRow: , - totalItems: , - textAlignLeft: , - textAlignCenter: , - textAlignRight: , - textAlignJustify: , - fontFamily: , - height: , - horizontalAlignLeft: , - horizontalAlignCenter: , - horizontalAlignRight: , - horizontalAlignStretch: , - image: , - video: , - animation: , - autoplay: , - videoControls: , - volume: , - mute: , - muteCentered: , - solidColor: , - gradient: , - paletteColor: , - none: , - embed: , - play: , - pause: , - stop: , - hoverZoom: , - hoverRotate: , - rotateLeft: , - rotateRight: , - small: , - medium: , - large: , - responsiveOverrides: , - screenLarge: , - screenDesktop: , - screenTablet: , - screenMobile: , - altText: , - help: , - clipboard: , - lock: , - accelerometer: , - gyroscope: , - pictureInPicture: , - textStrikethrough: , - shield: , - trash: , - add: , - gridManual: , - gridAutoRows: , - gridAutoCols: , - gridRow: , - gridCol: , - gridWidth: , - gridHeight: , - aspectRatioAuto: , - aspectRatioSixteenNine: , - aspectRatioThreeTwo: , - aspectRatioSquare: , - aspectRatioTwentyOneNine: , - mouseWheel: , - speed: , - fastForward: , - fastReverse: , - playReverse: , - arrowLeft: , - arrowRight: , - arrowUp: , - arrowDown: , - multiItemLeftInset: , - multiItemRightInset: , - singleItemLeftInset: , - singleItemRightInset: , - multiItemLeftInsetMobile: , - multiItemRightInsetMobile: , - singleItemLeftInsetMobile: , - singleItemRightInsetMobile: , - hoverInvertText: , - hoverInvertObject: , - fullWidthImage: , - wideRight: , - wideLeft: , - backgroundType: , - hoverBackgroundType: , - edit: , - editOptions: , - options: , - warning: , - warningCircle: , - errorCircle: , - warningFill: , - warningCircleFill: , - errorCircleFill: , - infoCircle: , - buttonFilled: , - buttonOutline: , - textColorSwatch: , - textHighlightColorSwatch: , - backgroundColorSwatch: , - textUppercase: , - checkCircle: , - check: , - textHighlightColorSwatchAlt: , - colorSelect: , - chevronDown: , - chevronUp: , - chevronLeft: , - chevronRight: , - arrowsHorizontal: , - arrowsVertical: , - arrowsLeftDiagonal: , - arrowsRightDiagonal: , - videoPosterImage: , - videoFile: , - imageFile: , - file: , - visible: , - backgroundTypeAlt: , - filter: , - filterAlt: , - pointerHand: , - h1: , - h2: , - h3: , - h4: , - h5: , - h6: , - roundedCorners: , - wrapperOverflow: , - buttonDisabled: , - inlineGradientFormat: , - backgroundRepeat: , - imageOpacity: , - imageBlur: , - listOrdered: , - listUnordered: , - screenTabletLarge: , - descriptionLink: , - copy: , - paste: , - wrapperConfig: , - pointerHandDisabled: , - fieldType: , - fieldDisabled: , - fieldRequired: , - fieldReadonly: , - fieldLabel: , - fieldWidth: , - fieldName: , - fieldValue: , - fieldPlaceholder: , - code: , - email: , - regex: , - rangeMin: , - rangeMid: , - rangeMax: , - step: , - checkSquare: , - multiple: , - files: , - fileType: , - fileSize: , - fileSizeMin: , - fileSizeMax: , - fieldHelp: , - fieldBeforeText: , - fieldAfterText: , - data: , - dropdown: , - dropdownOpen: , - dropdownClose: , - positioningGuide: , - gridAlt: , - positioningGuideAlt: , - layout: , - location: , - locationSettings: , - mapPin: , - locationAllow: , - locationDeny: , - locationAdd: , - plusCircle: , - plusCircleFill: , - wrench: , - tools: , - save: , - notebook: , - leftPanel: , - rightPanel: , - closedCaptions: , - videoChapters: , - videoSubtitle: , - videoSubtitleAlt: , - genericColorSwatch: , - search: , - searchEmpty: , - reset: , - imageRemove: , - infoCircleFill: , - a11y: , - alert: , - browser: , - archive: , - expand: , - sortAsc: , - sortDesc: , - attachment: , - experiment: , - bookmark: , - calendar: , - photoCamera: , - highlightedCheckmark: , - caretDown: , - caretUp: , - caretLeft: , - caretRight: , - caretDownFill: , - caretUpFill: , - caretLeftFill: , - caretRightFill: , - clipboardPlain: , - currency: , - moneyPaper: , - design: , - positionArrows: , - positionArrowsH: , - positionArrowsV: , - flipH: , - flipV: , - clock: , - globe: , - history: , - moreH: , - moreV: , - moreHCircle: , - moreVCircle: , - reorderGrabberH: , - reorderGrabberV: , - latestPosts: , - textAbc: , - titleGeneric: , - reduceHeightBottom: , - reduceHeightTop: , - num0Circle: , - num1Circle: , - num2Circle: , - num3Circle: , - num4Circle: , - num5Circle: , - num6Circle: , - num7Circle: , - num8Circle: , - num9Circle: , - bold: , - italic: , - underline: , - responsiveOverridesAlt: , - inherit: , - columns: , - rows: , - clear: , - dropdownCaret: , - checkCircleFill: , - componentGeneric: , - toggleOff: , - toggleOn: , - toggleOnAlt: , - hyphenate: , - hyphenateAlt: , - hyphenateAlt2: , - lineBreak: , - lineBreakOff: , - lineBreakOffAlt: , - lineBreakAlt: , - lineBreakAltOff: , - sizeAlt: , - genericShapes: , - iconGeneric: , - imageCaption: , - aspectRatio: , - stagger: , - lineBreaksHyphenation: , - backgroundTypeAlt2: , - columnGuttersLR: , - divider: , - layoutAlt: , - layoutAlt2: , - layoutAlt3: , - layoutAlt4: , - module: , - clearAlt: , - visibility: , - visibilityAlt: , - visibilityAlt2: , - separatorH: , - separatorV: , - typography: , - typographyOptions: , - animationGeneric: , - animationSettingsGeneric: , - animationListGeneric: , - dummySpacer: , - shuffle: , - twoColumns: , - fourColumns: , - highlightedExclamationMark: , - star: , - globeHash: , - globeAnchor: , - ariaLabel: , - automatic: , - automaticAlt: , - fileMetadata: , - optionList: , - optionListAlt: , - externalLink: , - flag: , - flagAlt: , - textAlignGeneric: , - swap: , - colorAlt: , - headingLevel: , - headingLevelAlt: , - excludeItem: , - dice: , - itemSelect: , - itemLimit: , - expandXl: , - helpFill: , - aspectRatioNineSixteen: , - defer: , - scrollbars: , - scrollbarH: , - scrollbarV: , - backgroundBlur: , - spacingLeftIn: , - spacingRightIn: , - buttonGhost: , - dropdownCaretAlt: , - layoutMasonry: , - playbackOptions: , - autoplayAlt: , - progressbar: , - progressbarIntermittent: , - preload: , - offsetAuto: , - navigationButtons: , - pagination: , - troubleshootAlt: , - calendarDownload: , - calendarAdd: , - calendarRemove: , - download: , - person: , - people: , - peopleGroup: , - position3x3TopLeft: , - position3x3TopCenter: , - position3x3TopRight: , - position3x3CenterLeft: , - position3x3CenterCenter: , - position3x3CenterRight: , - position3x3BottomLeft: , - position3x3BottomCenter: , - position3x3BottomRight: , - position2x2BottomRight: , - position2x2BottomLeft: , - position2x2TopLeft: , - position2x2TopRight: , - gridListToggle: , - itemsPerPage: , - migration: , - migrationAlt: , - imageLazyLoad: , - paragraph: , - textAbove: , - textBelow: , - leftPanelAlt: , - rightPanelAlt: , - plusCircleFillAlt: , - linkAdd: , - linkRemove: , - emptyCircle: , - emptyRect: , - linkNav: , - rowEmpty: , - row: , - rowAdd: , - twoCardsLeft: , - twoCardsRight: , - cardFeatured: , - hardDrive: , - imageOverlay: , - imageOverlayAlt: , - imageOverlayAlt2: , - wrapperSimpleAlt: , - wrapperAlt: , - alignHorizontalVertical: , - positioningWidthGuide: , - matrixAlignControlDotActive: , - matrixAlignControlDotInactive: , - position3x3Empty: , - position2x2Empty: , - autoPause: , - autoPauseScroll: , - zap: , - zapFill: , - anchorPage: , - tag: , - trashAlt: , - remove: , - sliders: , - textBoxEdit: , - solidCircle: , - solidRect: , - solidCircleFilled: , - solidRectFilled: , - solidCircleFillTransparent: , - solidRectFillTransparent: , - warningFillTransparent: , - warningCircleFillTransparent: , - errorCircleFillTransparent: , - infoCircleFillTransparent: , - checkCircleFillTransparent: , - alignHorizontalVerticalAlt: , - exclude: , - excludeItemAlt: , - resetToZero: , - genericShapesAlt: , - brain: , - gears: , - gearsFill: , - ruler: , - containerSpacingH: , - dividerStatus: , // Mind the extra variables when updating/replacing icon. - dividerSide: , // Mind the extra variables when updating/replacing icon. - wrapperOffAlt: , - autoClose: , - a11yWarning: , - magic: , - magicAlt: , - contentBottomLeft: , - contentBottomRight: , - contentCenter: , - contentTopLeft: , - contentTopRight: , - altTextGeneric: , - altTextGenericAlt: , - arrowsDown: , - arrowsUp: , - arrowsLeft: , - arrowsRight: , - positionLeft: , - positionRight: , - equals: , - equalColumns: , - animationFile: , - contrast: , - contrastAlt: , - migrationAltV: , - emailRemove: , - form: , - formAlt: , - bot: , - botDeny: , - readOnly: , - conditionH: , - conditionV: , - route: , - codeVariable: , - branch: , - branchFork: , - calculator: , - required: , - checks: , - checksCircle: , - lightBulb: , - lightBulbAlt: , - textWrite: , - conditionalVisibility: , - chat: , - chatBubble: , - chatBubbleAlt: , - idCard: , - range: , - textLength: , - googleTagManager: , - inputField: , - requiredAlt: , - upload: , - cursorDisabled: , - fileDownload: , - fileUpload: , - columns3366: , - columns6633: , - spacingLeft: , - spacingRight: , - keyboard: , - focus: , - cursorMove: , - mouseCursor: , - layers: , - layer: , - mapLayerJson: , - mapLayerVector: , - mapLayerRaster: , - mapLayer: , - layerOff: , - key: , - share: , - solidCircleGradient: , - solidRectGradient: , - shrink: , - shrinkXl: , - positionArrowsInverted: , - positionArrowsInvertedH: , - positionArrowsInvertedV: , - shrinkDiagonalLeft: , - shrinkDiagonalLeftXl: , - shrinkDiagonalRight: , - shrinkDiagonalRightXl: , - fullMaxText: , - fullMaxShield: , - shieldPlus: , - shieldPlusAlt: , - wideTop: , - wideBottom: , - narrowRight: , - narrowLeft: , - narrowTop: , - narrowBottom: , - colorFillSwatch: , - eyedropper: , - positionHStart: , - positionHCenter: , - positionHEnd: , - positionVStart: , - positionVCenter: , - positionVEnd: , - booleanUnion: , - booleanSubtract: , - booleanIntersect: , - booleanExclude: , - vennDiagram: , - vennDiagramAlt: , - vennDiagramAlt2: , - vennDiagramAlt3: , - vennDiagramAlt4: , - vennDiagramAlt5: , - vennDiagramAlt6: , - vennDiagramAlt7: , - border: , - borderColor: , - shadow: , - itemWrap: , - fillColor: , - cookie: , - cookieAlt: , - autoplayAlt2: , - limitWidth: , - thumbsUp: , - thumbsDown: , - heart: , - heartFill: , - heartFillTransparent: , - num0CircleAlt: , - num1CircleAlt: , - num2CircleAlt: , - num3CircleAlt: , - num4CircleAlt: , - num5CircleAlt: , - num6CircleAlt: , - num7CircleAlt: , - num8CircleAlt: , - num9CircleAlt: , - num0Square: , - num1Square: , - num2Square: , - num3Square: , - num4Square: , - num5Square: , - num6Square: , - num7Square: , - num8Square: , - num9Square: , - num0SquareAlt: , - num1SquareAlt: , - num2SquareAlt: , - num3SquareAlt: , - num4SquareAlt: , - num5SquareAlt: , - num6SquareAlt: , - num7SquareAlt: , - num8SquareAlt: , - num9SquareAlt: , - award: , - arrowDownCircle: , - arrowLeftCircle: , - arrowRightCircle: , - arrowUpCircle: , - arrowDownCircleAlt: , - arrowLeftCircleAlt: , - arrowRightCircleAlt: , - arrowUpCircleAlt: , - arrowDownSquare: , - arrowLeftSquare: , - arrowRightSquare: , - arrowUpSquare: , - arrowDownSquareAlt: , - arrowLeftSquareAlt: , - arrowRightSquareAlt: , - arrowUpSquareAlt: , - heading: , - frame: , - dateTime: , - currentPage: , - textSizeAlt: , - textLarger: , - textSmaller: , - extract: , - extractAlt: , - tree: , - treeAlt: , - treeAlt2: , - equalRows: , - sidebar: , - sidebarFlip: , - magicFill: , - magicAltFill: , - magicFillTransparent: , - magicAltFillTransparent: , - group: , - ungroup: , - briefcase: , - book: , - microphone: , - newspaper: , - officeBuilding: , - officeBuildings: , - box: , - hoverBackgroundGlow: , - hamburgerMenu: , -}; - -/** - * Illustrations for helper modals. - */ -export const illustrations = { - gutter: , - verticalSpacing: , - width: , - offset: , - order: , - hide: , - verticalAlign: , - useWrapper: , - simpleWrapper: , - spacingTop: , - spacingBottom: , - spacingTopIn: , - spacingBottomIn: , - topDivider: , - bottomDivider: , - bgColor: , - anchorId: , - blockId: , -}; - -/** - * Block icons, primarily used in block manifests. - * - * - `es-` prefixed icons are Eightshift blocks. - * - `esf-` prefixed icons are Eightshift forms blocks. - */ -export const blockIcons = { - // Eightshift blocks. - "es-button": "", - "es-card": "", - "es-columns": "", - "es-group": "", - "es-heading": "", - "es-image": "", - "es-link": "", - "es-lists": "", - "es-paragraph": "", - "es-accordion": "", - "es-column": "", - "es-carousel": "", - "es-featured-categories": "", - "es-featured-posts": "", - "es-video": "", - "es-button-block": "", - "es-card-simple": "", - "es-jumbotron": "", - "es-modal": "", - "es-map": "", - "es-tabs": "", - "es-audio": "", - "es-image-text": "", - "es-gallery": "", - "es-example": "", - "es-card-list": "", - "es-counter-card": "", - "es-video-text": "", - "es-team-member": "", - "es-timeline-item": "", - "es-simple-cta": "", - "es-video-button": "", - "es-featured-categories-posts": "", - "es-shortcode": "", - "es-email": "", - "es-card-buttons": "", - "es-card-person": "", - "es-card-bottom-image": "", - "es-card-number": "", - "es-card-comparison": "", - "es-card-featured": "", - "es-card-review": "", - "es-grid": "", - "es-grid-item": "", - "es-social-share": "", - "es-language-switcher": "", - "es-card-teaser": "", - "es-tab": "", - "es-tab-content": "", - "es-person-profile": "", - "es-footnotes": "", - "es-media": "", - "es-list-item": "", - "es-code": "", - "es-prev-next": "", - "es-accordion-item": "", - "es-price-card": "", - "es-toggle": "", - "es-card-vertical-image": "", - "es-accented-info": "", - "es-hero-special-1": "", - "es-stats": "", - "es-stats-with-image": "", - "es-lottie": "", - "es-fifty-fifty-text": "", - "es-fifty-fifty-img-text": "", - "es-fifty-fifty-list": "", - "es-fifty-fifty-img-text-alt": "", - "es-blog-content": "", - "es-divider": "", - "es-table": "", - "es-column-chart": "", - "es-highlighted-text": "", - "es-job-locations": "", - "es-marquee": "", - "es-masonry": "", - "es-multicolumn-list": "", - "es-card-side-image": "", - "es-button-scroll": "", - "es-horizontal-carousel": "", - "es-vertical-carousel": "", - "es-horizontal-carousel-auto": "", - "es-vertical-carousel-auto": "", - "es-side-scroll": "", - "es-list-container": "", - "es-text-on-image": "", - "es-hero-special-2": "", - "es-gallery-menu": "", - "es-filter-list": "", - "es-highlighted-columns": "", - "es-row": "", - "es-fifty-fifty-cards": "", - "es-fifty-fifty-item-list": "", - "es-event-list": "", - "es-iframe": "", - "es-iframe-modal": "", - "es-iframe-modal-trigger": "", - "es-simple-info": "", - "es-fifty-fifty-with-cta": "", - "es-fifty-fifty-with-cta-alt": "", - "es-fifty-fifty-item-list-star": "", - "es-navbar": "", - "es-multicolumn-list-alt": "", - "es-card-teaser-alt": "", - "es-fifty-fifty-three-rows": "", - "es-six-row-info": "", - "es-link-list": "", - "es-two-cards": "", - "es-link-banner": "", - "es-card-vertical-image-alt": "", - "es-card-vertical-image-alt-2": "", - "es-text-with-big-image": "", - "es-list-with-filters": "", - "es-blog-content-alt": "", - "es-two-items-with-images": "", - "es-card-bottom-image-alt": "", - "es-event-recording": "", - "es-four-image-masonry": "", - "es-text-on-image-alt": "", - "es-h-card-with-image": "", - "es-hero-special-3": "", - "es-blog-content-alt-2": "", - "es-card-teaser-alt-1": "", - "es-card-teaser-alt-2": "", - "es-podcast": "", - "es-fifty-fifty-item-list-alt": "", - "es-two-items-generic": "", - "es-card-teaser-alt-3": "", - "es-card-teaser-alt-4": "", - "es-multi-items-with-images": "", - "es-multi-h-cards": "", - "es-auto-scroll-h-cards": "", - "es-fifty-fifty-img-text-alt-2": "", - "es-card-teaser-alt-5": "", - "es-four-items-w-text-generic": "", - "es-overflow-image": "", - "es-text-l-with-two-cards": "", - "es-text-l-with-two-cards-alt": "", - "es-card-teaser-alt-6": "", - "es-two-cards-w-nav-and-filters": "", - "es-two-cards-featured": "", - "es-circular-progress": "", - "es-infinum": "", - "es-table-of-contents": "", - "es-locations": "", - "es-tiktok": "", - "es-search-field": "", - "es-special-header-1": "", - - // Eightshift Forms blocks. - "esf-captcha-basic": "", - "esf-checkbox": "", - "esf-form": "", - "esf-form-picker": "", - "esf-input": "", - "esf-radio": "", - "esf-select": "", - "esf-select-option": "", - "esf-submit": "", - "esf-textarea": "", - "esf-checkboxes": "", - "esf-radios": "", - "esf-custom-data": "", - "esf-file": "", - "esf-sender-email": "", - "esf-form-custom": "", - "esf-form-mailchimp": "", - "esf-form-greenhouse": "", - "esf-form-goodbits": "", - "esf-form-mailerlite": "", - "esf-form-hubspot": "", - "esf-form-salesforce": "", - "esf-form-zapier": "", - "esf-form-talentify": "", - "esf-form-airtable": "", - "esf-form-productive": "", - "esf-form-active-campaign": "", - "esf-form-campaign-monitor": "", - "esf-form-pardot": "", - "esf-form-clearbit": "", - "esf-google-optimize": "", - "esf-infobip": "", - "esf-workable": "", - "esf-country": "", - "esf-date": "", - "esf-time": "", - "esf-phone": "", - "esf-jira": "", - "esf-steps": "", - "esf-form-chilli-piper": "", - "esf-form-pipedrive": "", - "esf-form-cloudflare": "", - "esf-form-wp-rocket": "", - "esf-form-wpml": "", - "esf-star-rating": "", - "esf-store-entries": "", - "esf-calculate": "", - "esf-compute": "", - "esf-slider" : "", - "esf-calculate-output" : "", - "esf-calculate-field" : "", - "esf-result-output" : "", - "esf-success-output" : "", - "esf-form-output" : "", - "esf-variable-output" : "", - "esf-block-filter" : "", -}; From 2ab3628f60febda9e9d4a2d4a7ac1b1780be5dc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 12:22:48 +0200 Subject: [PATCH 04/74] update css reset --- styles/scss/_normalize.scss | 308 +++++++++++++++++++++++------------- 1 file changed, 197 insertions(+), 111 deletions(-) diff --git a/styles/scss/_normalize.scss b/styles/scss/_normalize.scss index 96997a496..0f4a42a3b 100644 --- a/styles/scss/_normalize.scss +++ b/styles/scss/_normalize.scss @@ -1,91 +1,92 @@ -// stylelint-disable -// This file was taken from https://github.com/sindresorhus/modern-normalize with permission by the MIT license. -// @link https://github.com/sindresorhus/modern-normalize/blob/main/license +// TailwindCSS 3.4.6 - Preflight (CSS reset) +// Includes slight modifications to replace the 'theme()' function calls, as this should be pure CSS. /* -Document -======== -*/ - -/** -Use a better box model (opinionated). +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { - box-sizing: border-box; + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #E5E7EB; /* 2 */ } -/** -1. Correct the line height in all browsers. +/* +1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size (opinionated). +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Disable tap highlights on iOS */ -html { - line-height: 1.15; /* 1 */ +html, +:host { + line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ tab-size: 4; /* 3 */ - padding: 0; - margin: 0; + font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */ + -webkit-tap-highlight-color: transparent; /* 5 */ } /* -Sections -======== -*/ - -/** 1. Remove the margin in all browsers. -2. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ - padding: 0; - font-family: - system-ui, - -apple-system, /* Firefox supports this but not yet `system-ui` */ - 'Segoe UI', - Roboto, - Helvetica, - Arial, - sans-serif, - 'Apple Color Emoji', - 'Segoe UI Emoji'; /* 2 */ + line-height: inherit; /* 2 */ } /* -Grouping content -================ -*/ - -/** 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ } /* -Text-level semantics -==================== -*/ - -/** Add the correct text decoration in Chrome, Edge, and Safari. */ -abbr[title] { +abbr:where([title]) { text-decoration: underline dotted; } -/** +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* Add the correct font weight in Edge and Safari. */ @@ -94,26 +95,20 @@ strong { font-weight: bolder; } -/** -1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) -2. Correct the odd 'em' font sizing in all browsers. +/* +1. Use the user's configured `mono` font-family by default. +2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { - font-family: - ui-monospace, - SFMono-Regular, - Consolas, - 'Liberation Mono', - Menlo, - monospace; /* 1 */ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */ font-size: 1em; /* 2 */ } -/** +/* Add the correct font size in all browsers. */ @@ -121,8 +116,8 @@ small { font-size: 80%; } -/** -Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, @@ -142,28 +137,21 @@ sup { } /* -Tabular data -============ -*/ - -/** 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ } /* -Forms -===== -*/ - -/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. */ button, @@ -172,12 +160,18 @@ optgroup, select, textarea { font-family: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ + font-weight: inherit; /* 1 */ + line-height: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ margin: 0; /* 2 */ + padding: 0; /* 3 */ } -/** +/* Remove the inheritance of text transform in Edge and Firefox. */ @@ -186,52 +180,37 @@ select { text-transform: none; } -/** -Correct the inability to style clickable types in iOS and Safari. +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. */ button, -[type='button'], -[type='reset'], -[type='submit'] { - -webkit-appearance: button; -} - -/** -Remove the inner border and padding in Firefox. -*/ - -::-moz-focus-inner { - border-style: none; - padding: 0; +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ } -/** -Restore the focus styles unset by the previous rule. +/* +Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { - outline: 1px dotted ButtonText; + outline: auto; } -/** -Remove the additional ':invalid' styles in Firefox. -See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } -/** -Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. -*/ - -legend { - padding: 0; -} - -/** +/* Add the correct vertical alignment in Chrome and Firefox. */ @@ -239,7 +218,7 @@ progress { vertical-align: baseline; } -/** +/* Correct the cursor style of increment and decrement buttons in Safari. */ @@ -248,7 +227,7 @@ Correct the cursor style of increment and decrement buttons in Safari. height: auto; } -/** +/* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ @@ -258,7 +237,7 @@ Correct the cursor style of increment and decrement buttons in Safari. outline-offset: -2px; /* 2 */ } -/** +/* Remove the inner padding in Chrome and Safari on macOS. */ @@ -266,9 +245,9 @@ Remove the inner padding in Chrome and Safari on macOS. -webkit-appearance: none; } -/** +/* 1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to 'inherit' in Safari. +2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { @@ -276,11 +255,6 @@ Remove the inner padding in Chrome and Safari on macOS. font: inherit; /* 2 */ } -/* -Interactive -=========== -*/ - /* Add the correct display in Chrome and Safari. */ @@ -288,3 +262,115 @@ Add the correct display in Chrome and Safari. summary { display: list-item; } + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::placeholder, +textarea::placeholder { + opacity: 1; /* 1 */ + color: #9CA3AF; /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role='button'] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ +[hidden] { + display: none; +} From be62f79942cb22b53cdc59b9e2bf18757137c833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 12:52:34 +0200 Subject: [PATCH 05/74] remove some placeholders --- .../scss/placeholders/_absolute-center.scss | 29 ------------------- styles/scss/placeholders/_all.scss | 9 ------ styles/scss/placeholders/_bg-image.scss | 26 ----------------- styles/scss/placeholders/_clearfix.scss | 27 ----------------- styles/scss/placeholders/_dl.scss | 21 -------------- styles/scss/placeholders/_heading.scss | 21 -------------- .../scss/placeholders/_link-transition.scss | 19 ------------ styles/scss/placeholders/_paragraph.scss | 21 -------------- .../_site-padding-correction.scss | 22 -------------- styles/scss/placeholders/_site-padding.scss | 21 -------------- 10 files changed, 216 deletions(-) delete mode 100644 styles/scss/placeholders/_absolute-center.scss delete mode 100644 styles/scss/placeholders/_bg-image.scss delete mode 100644 styles/scss/placeholders/_clearfix.scss delete mode 100644 styles/scss/placeholders/_dl.scss delete mode 100644 styles/scss/placeholders/_heading.scss delete mode 100644 styles/scss/placeholders/_link-transition.scss delete mode 100644 styles/scss/placeholders/_paragraph.scss delete mode 100644 styles/scss/placeholders/_site-padding-correction.scss delete mode 100644 styles/scss/placeholders/_site-padding.scss diff --git a/styles/scss/placeholders/_absolute-center.scss b/styles/scss/placeholders/_absolute-center.scss deleted file mode 100644 index bfd745e90..000000000 --- a/styles/scss/placeholders/_absolute-center.scss +++ /dev/null @@ -1,29 +0,0 @@ -/// Absolutely positions an element and centers it. -/// -/// ### Output -/// ```scss -/// .test { -/// position: absolute; -/// top: 0; -/// bottom: 0; -/// right: 0; -/// left: 0; -/// margin: auto; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Grginov -/// @example -/// .test { -/// @extend %absolute-center; -/// } - -%absolute-center { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - margin: auto; -} diff --git a/styles/scss/placeholders/_all.scss b/styles/scss/placeholders/_all.scss index e7248d09b..ff5d45a68 100644 --- a/styles/scss/placeholders/_all.scss +++ b/styles/scss/placeholders/_all.scss @@ -1,15 +1,6 @@ // Init all Placeholders. -@import 'absolute-center'; -@import 'bg-image'; @import 'button'; -@import 'clearfix'; -@import 'dl'; -@import 'heading'; @import 'input'; @import 'link'; -@import 'link-transition'; @import 'list'; -@import 'paragraph'; -@import 'site-padding-correction'; -@import 'site-padding'; @import 'visually-hidden'; diff --git a/styles/scss/placeholders/_bg-image.scss b/styles/scss/placeholders/_bg-image.scss deleted file mode 100644 index 4b0c3ef3c..000000000 --- a/styles/scss/placeholders/_bg-image.scss +++ /dev/null @@ -1,26 +0,0 @@ -/// Placeholder that is used to set size of element background image to cover. -/// -/// ### Output -/// ```scss -/// .test { -/// background: { -/// size: cover; -/// position: center; -/// repeat: no-repeat; -/// } -/// } -/// ``` -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %bg-image; -/// } - -%bg-image { - background: { - size: cover; - position: center; - repeat: no-repeat; - } -} diff --git a/styles/scss/placeholders/_clearfix.scss b/styles/scss/placeholders/_clearfix.scss deleted file mode 100644 index 4910b26e2..000000000 --- a/styles/scss/placeholders/_clearfix.scss +++ /dev/null @@ -1,27 +0,0 @@ -/// Placeholder that is used to add clearfix after floating divs. -/// -/// ### Output -/// ```scss -/// .test { -/// &::after { -/// content: ''; -/// display: table; -/// clear: both; -/// } -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %clearfix; -/// } - -%clearfix { - &::after { - content: ''; - display: table; - clear: both; - } -} diff --git a/styles/scss/placeholders/_dl.scss b/styles/scss/placeholders/_dl.scss deleted file mode 100644 index 5a792b18a..000000000 --- a/styles/scss/placeholders/_dl.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// Placeholder that is used to reset browser default styles for dl. -/// -/// ### Output -/// ```scss -/// .test { -/// padding: 0; -/// margin: 0; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %dl-reset; -/// } - -%dl-reset { - margin: 0; - padding: 0; -} diff --git a/styles/scss/placeholders/_heading.scss b/styles/scss/placeholders/_heading.scss deleted file mode 100644 index 0cd41b194..000000000 --- a/styles/scss/placeholders/_heading.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// Placeholder that is used to reset browser default styles for heading. -/// -/// ### Output -/// ```scss -/// .test { -/// padding: 0; -/// margin: 0; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %heading-reset; -/// } - -%heading-reset { - margin: 0; - padding: 0; -} diff --git a/styles/scss/placeholders/_link-transition.scss b/styles/scss/placeholders/_link-transition.scss deleted file mode 100644 index b27981929..000000000 --- a/styles/scss/placeholders/_link-transition.scss +++ /dev/null @@ -1,19 +0,0 @@ -/// Placeholder that is used to add default transition to links. -/// -/// ### Output -/// ```scss -/// .test { -/// transition: color 0.2s ease-in; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %link-transition; -/// } - -%link-transition { - transition: color 0.2s ease-in; -} diff --git a/styles/scss/placeholders/_paragraph.scss b/styles/scss/placeholders/_paragraph.scss deleted file mode 100644 index 145f35b1f..000000000 --- a/styles/scss/placeholders/_paragraph.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// Placeholder that is used to reset browser default styles for paragraph. -/// -/// ### Output -/// ```scss -/// .test { -/// padding: 0; -/// margin: 0; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %paragraph-reset; -/// } - -%paragraph-reset { - padding: 0; - margin: 0; -} diff --git a/styles/scss/placeholders/_site-padding-correction.scss b/styles/scss/placeholders/_site-padding-correction.scss deleted file mode 100644 index edfddb71d..000000000 --- a/styles/scss/placeholders/_site-padding-correction.scss +++ /dev/null @@ -1,22 +0,0 @@ -/// Placeholder that is used to add default negative margin on containers. -/// Used to move grid containers back to right place. -/// -/// ### Output -/// ```scss -/// .test { -/// margin-left: -25px; -/// margin-right: -25px; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %site-padding-correction; -/// } - -%site-padding-correction { - margin-left: (-$base-gutter-size); - margin-right: (-$base-gutter-size); -} diff --git a/styles/scss/placeholders/_site-padding.scss b/styles/scss/placeholders/_site-padding.scss deleted file mode 100644 index 1f45fd0cc..000000000 --- a/styles/scss/placeholders/_site-padding.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// Placeholder that is used to add default padding on containers. -/// -/// ### Output -/// ```scss -/// .test { -/// padding-left: 25px; -/// padding-right: 25px; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @example -/// .test { -/// @extend %site-padding; -/// } - -%site-padding { - padding-left: $base-gutter-size; - padding-right: $base-gutter-size; -} From 8cffc668456c7ee512626e6bb9650369844f4950 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 13:08:52 +0200 Subject: [PATCH 06/74] remove keyframes --- styles/scss/keyframes/_all.scss | 2 -- styles/scss/keyframes/_spin.scss | 5 ----- 2 files changed, 7 deletions(-) delete mode 100644 styles/scss/keyframes/_all.scss delete mode 100644 styles/scss/keyframes/_spin.scss diff --git a/styles/scss/keyframes/_all.scss b/styles/scss/keyframes/_all.scss deleted file mode 100644 index 9242a54cb..000000000 --- a/styles/scss/keyframes/_all.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Init all Keyframes. -@import 'spin'; diff --git a/styles/scss/keyframes/_spin.scss b/styles/scss/keyframes/_spin.scss deleted file mode 100644 index 5c802a1ed..000000000 --- a/styles/scss/keyframes/_spin.scss +++ /dev/null @@ -1,5 +0,0 @@ -@keyframes spin { - 100% { - transform: rotate(360deg); - } -} From 13b4df5ec606b775250fcaf435eb4c9eceedc834 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 13:09:08 +0200 Subject: [PATCH 07/74] remove some scss functions --- styles/scss/functions/_all.scss | 5 -- styles/scss/functions/_calc-column-width.scss | 28 ----------- styles/scss/functions/_calc-dynamic-size.scss | 38 -------------- styles/scss/functions/_calc-grid-width.scss | 28 ----------- styles/scss/functions/_em.scss | 43 ---------------- styles/scss/functions/_line-height.scss | 50 ------------------- 6 files changed, 192 deletions(-) delete mode 100644 styles/scss/functions/_calc-column-width.scss delete mode 100644 styles/scss/functions/_calc-dynamic-size.scss delete mode 100644 styles/scss/functions/_calc-grid-width.scss delete mode 100644 styles/scss/functions/_em.scss delete mode 100644 styles/scss/functions/_line-height.scss diff --git a/styles/scss/functions/_all.scss b/styles/scss/functions/_all.scss index eaf8c2e25..e9b21f408 100644 --- a/styles/scss/functions/_all.scss +++ b/styles/scss/functions/_all.scss @@ -1,12 +1,7 @@ // Init all Functions. -@import 'calc-column-width'; -@import 'calc-dynamic-size'; -@import 'calc-grid-width'; @import 'global-settings'; @import 'global-config'; @import 'map-get-deep'; @import 'map-get-strict'; @import 'map-reverse'; @import 'strip-unit'; -@import 'em'; -@import 'line-height'; diff --git a/styles/scss/functions/_calc-column-width.scss b/styles/scss/functions/_calc-column-width.scss deleted file mode 100644 index 76d3a356f..000000000 --- a/styles/scss/functions/_calc-column-width.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use 'sass:math'; - -/// Calculates column width from base columns number and then outputs percentage. -/// -/// ### Output -/// ```scss -/// .test { -/// width: 10%; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @param {Number} $cols [$base-col-number] - Total number of columns. -/// -/// @example -/// .test { -/// width: calc-column-width(10); -/// } - -@function calc-column-width($cols: $base-col-number) { - @return math.div(100, $cols) + 0%; -} - -// Short alias. -@function calcCW($cols: $base-col-number) { - @return calc-column-width($cols: $base-col-number); -} diff --git a/styles/scss/functions/_calc-dynamic-size.scss b/styles/scss/functions/_calc-dynamic-size.scss deleted file mode 100644 index 144cd0fa2..000000000 --- a/styles/scss/functions/_calc-dynamic-size.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use 'sass:math'; - -/// Calculate dynamic sizes using linear function for calculations. -/// -/// ### Output -/// ```scss -/// .test { -/// font-size: calc(0.1374 * 100vw + -64.74809px); -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @param {Size} $min-size - Minimal size after after responsiveness. -/// @param {Size} $max-size - Maximal size after after responsiveness. -/// @param {Size} $min-width - Minimal breakpoint to stop corrections. -/// @param {Size} $max-width - Max breakpoint to stop corrections. -/// -/// @example -/// .test { -/// font-size: calc-dynamic-size(10px, 100px, mobile, desktop); -/// } - -@function calc-dynamic-size($min-size, $max-size, $min-width: tablet, $max-width: desktop) { - - $min-width: nth(map-get-strict($media-breakpoints, $min-width), 1) * 1px; - $max-width: nth(map-get-strict($media-breakpoints, $max-width), 2) * 1px; - - $ratio: math.div(($max-size - $min-size), ($max-width - $min-width)); - $factor: $min-size - ($ratio * $min-width); - - @return calc(#{$ratio} * 100vw + #{$factor}); -} - -// Short alias. -@function calcDS($min-size, $max-size, $min-width: tablet, $max-width: desktop) { - @return calc-dynamic-size($min-size, $max-size, $min-width: tablet, $max-width: desktop); -} diff --git a/styles/scss/functions/_calc-grid-width.scss b/styles/scss/functions/_calc-grid-width.scss deleted file mode 100644 index 34a4dd9c5..000000000 --- a/styles/scss/functions/_calc-grid-width.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use 'sass:math'; - -/// Calculates grid width from base columns number and then outputs percentage. -/// -/// ### Output -/// ```scss -/// .test { -/// width: 83.33333%; -/// } -/// ``` -/// -/// @access public -/// @author Ivan Ruzevic -/// @param {Number} $cols [$base-col-number] - Total number of columns. -/// -/// @example -/// .test { -/// width: calc-grid-width(10); -/// } - -@function calc-grid-width($cols: $base-col-number) { - @return percentage(math.div($cols, $base-col-number)); -} - -// Short alias. -@function calcGW($cols: $base-col-number) { - @return calc-grid-width($cols: $base-col-number); -} diff --git a/styles/scss/functions/_em.scss b/styles/scss/functions/_em.scss deleted file mode 100644 index eac7c1223..000000000 --- a/styles/scss/functions/_em.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use 'sass:math'; - -/// Transforms the pixel value to em value. -/// -/// If context is not provided, it will be pulled from the $base-font-size. -/// -/// ### Output -/// ```scss -/// .test { -/// font-size: 20px; -/// -/// &__subelement { -/// font-size: 0.5em; -/// } -/// -/// &__second-subelement { -/// font-size: 0.25em; -/// } -/// } -/// ``` -/// -/// @access public -/// @author Denis Zoljom -/// @param {Number} $pixels The pixel value that should be converted to em. -/// @param {Number} $context The relative context. Defaults to relative element with font-size defined. -/// -/// @example -/// .test { -/// font-size: 20px; -/// -/// &__subelement { -/// font-size: em(10px); // Will be 0.5em. -/// } -/// -/// &__second-subelement { -/// font-size: em(10, 40); // Will be 0.25em. -/// } -/// } -/// - -@function em($pixels, $context: $base-font-size) { - @return math.div(strip-unit($pixels), strip-unit($context)) * 1em; -} diff --git a/styles/scss/functions/_line-height.scss b/styles/scss/functions/_line-height.scss deleted file mode 100644 index d608e8397..000000000 --- a/styles/scss/functions/_line-height.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use 'sass:math'; - -/// Transforms the line-height to relative value. -/// -/// If context is not provided, it will be pulled from the $base-font-size. -/// Line height will be specified without any unit. -/// -/// ### Output -/// ```scss -/// -/// // $base-font-size = 20. -/// -/// .test { -/// &__subelement { -/// line-height: 1; -/// } -/// -/// &__second-subelement { -/// line-height: 1.19; -/// } -/// } -/// ``` -/// -/// @access public -/// @author Denis Zoljom -/// @param {Number} $pixels The pixel value that should be converted to relative value. -/// @param {Number} $context The relative context. Defaults to $base-font-size. -/// -/// @example -/// .test { -/// font-size: 20px; -/// -/// &__subelement { -/// font-size: line-height(20); -/// } -/// -/// &__second-subelement { -/// font-size: line-height(38, 32); -/// } -/// } -/// - -@function line-height($pixels, $context: $base-font-size) { - @return #{math.div(strip-unit($pixels), strip-unit($context))}; -} - -// Short alias. -@function lh($pixels, $context: $base-font-size) { - @return line-height($pixels, $context: $base-font-size); -} From 85f88b04b61623357b411776dfd1645f1d67b86e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 13:31:40 +0200 Subject: [PATCH 08/74] removed some mixins --- styles/es-component-styles.scss | 28 ++++- styles/scss/mixins/_all.scss | 27 ----- styles/scss/mixins/_box-sizing.scss | 19 ---- .../scss/mixins/_column-offset-modifiers.scss | 47 -------- styles/scss/mixins/_es-eases.scss | 29 ----- .../mixins/_flex-column-width-modifiers.scss | 50 --------- styles/scss/mixins/_flex-column-width.scss | 21 ---- .../mixins/_flex-grid-width-modifiers.scss | 50 --------- styles/scss/mixins/_flex-grid-width.scss | 21 ---- .../_flex-horizontal-align-modifiers.scss | 33 ------ .../_flex-vertical-align-modifiers.scss | 33 ------ styles/scss/mixins/_flex.scss | 86 --------------- styles/scss/mixins/_font-smoothing.scss | 27 ----- styles/scss/mixins/_for-each-attribute.scss | 49 --------- .../scss/mixins/_grid-offset-modifiers.scss | 47 -------- styles/scss/mixins/_inline-font-colors.scss | 36 ------ styles/scss/mixins/_link-modifiers.scss | 85 --------------- styles/scss/mixins/_link.scss | 78 ------------- styles/scss/mixins/_list.scss | 47 -------- styles/scss/mixins/_modifiers-deep.scss | 49 --------- styles/scss/mixins/_modifiers-range.scss | 52 --------- styles/scss/mixins/_modifiers.scss | 47 -------- styles/scss/mixins/_placeholder.scss | 42 ------- styles/scss/mixins/_responsive-modifiers.scss | 103 ------------------ .../_responsive-selectors-visibility.scss | 82 -------------- styles/scss/mixins/_responsive-selectors.scss | 70 ------------ styles/scss/mixins/_responsive.scss | 69 ------------ styles/scss/mixins/_stretch.scss | 31 ------ styles/scss/mixins/_text-align-modifiers.scss | 33 ------ styles/scss/mixins/_underline-text.scss | 6 + 30 files changed, 33 insertions(+), 1364 deletions(-) delete mode 100644 styles/scss/mixins/_box-sizing.scss delete mode 100644 styles/scss/mixins/_column-offset-modifiers.scss delete mode 100644 styles/scss/mixins/_es-eases.scss delete mode 100644 styles/scss/mixins/_flex-column-width-modifiers.scss delete mode 100644 styles/scss/mixins/_flex-column-width.scss delete mode 100644 styles/scss/mixins/_flex-grid-width-modifiers.scss delete mode 100644 styles/scss/mixins/_flex-grid-width.scss delete mode 100644 styles/scss/mixins/_flex-horizontal-align-modifiers.scss delete mode 100644 styles/scss/mixins/_flex-vertical-align-modifiers.scss delete mode 100644 styles/scss/mixins/_flex.scss delete mode 100644 styles/scss/mixins/_font-smoothing.scss delete mode 100644 styles/scss/mixins/_for-each-attribute.scss delete mode 100644 styles/scss/mixins/_grid-offset-modifiers.scss delete mode 100644 styles/scss/mixins/_inline-font-colors.scss delete mode 100644 styles/scss/mixins/_link-modifiers.scss delete mode 100644 styles/scss/mixins/_link.scss delete mode 100644 styles/scss/mixins/_list.scss delete mode 100644 styles/scss/mixins/_modifiers-deep.scss delete mode 100644 styles/scss/mixins/_modifiers-range.scss delete mode 100644 styles/scss/mixins/_modifiers.scss delete mode 100644 styles/scss/mixins/_placeholder.scss delete mode 100644 styles/scss/mixins/_responsive-modifiers.scss delete mode 100644 styles/scss/mixins/_responsive-selectors-visibility.scss delete mode 100644 styles/scss/mixins/_responsive-selectors.scss delete mode 100644 styles/scss/mixins/_responsive.scss delete mode 100644 styles/scss/mixins/_stretch.scss delete mode 100644 styles/scss/mixins/_text-align-modifiers.scss diff --git a/styles/es-component-styles.scss b/styles/es-component-styles.scss index 6477e1714..abf948def 100644 --- a/styles/es-component-styles.scss +++ b/styles/es-component-styles.scss @@ -65,7 +65,33 @@ --es-component-border-radius-xl: 9px; --es-component-border-radius-full: 100rem; - @include es-eases; + // Eases + // Source: https://easings.net/ + --es-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); + --es-ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); + --es-ease-in-out-expo: cubic-bezier(1, 0, 0, 1); + --es-ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); + --es-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); + --es-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); + --es-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); + --es-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); + --es-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --es-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); + --es-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); + --es-ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); + --es-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); + --es-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); + --es-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); + --es-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --es-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); + --es-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); + --es-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); + --es-ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); + --es-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --es-ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); + --es-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --es-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); + --es-admin-ease-out-cubic: var(--es-ease-out-cubic); } body { diff --git a/styles/scss/mixins/_all.scss b/styles/scss/mixins/_all.scss index cc0be6f63..77dafdeb0 100644 --- a/styles/scss/mixins/_all.scss +++ b/styles/scss/mixins/_all.scss @@ -1,32 +1,5 @@ // Init all Mixins. -@import 'box-sizing'; -@import 'column-offset-modifiers'; -@import 'es-eases'; -@import 'flex-column-width-modifiers'; -@import 'flex-column-width'; -@import 'flex-grid-width-modifiers'; -@import 'flex-grid-width'; -@import 'flex-horizontal-align-modifiers'; -@import 'flex-vertical-align-modifiers'; -@import 'flex'; @import 'font-face'; -@import 'font-smoothing'; -@import 'grid-offset-modifiers'; @import 'gutenberg-button-active-state-v2'; -@import 'link-modifiers'; -@import 'link'; -@import 'list'; -@import 'modifiers-deep'; -@import 'modifiers-range'; -@import 'modifiers'; -@import 'placeholder'; -@import 'responsive-modifiers'; -@import 'responsive-selectors-visibility'; -@import 'responsive-selectors'; -@import 'responsive'; -@import 'stretch'; -@import 'text-align-modifiers'; -@import 'for-each-attribute'; @import 'underline-text'; @import 'underline'; -@import 'inline-font-colors'; diff --git a/styles/scss/mixins/_box-sizing.scss b/styles/scss/mixins/_box-sizing.scss deleted file mode 100644 index 10f75e6af..000000000 --- a/styles/scss/mixins/_box-sizing.scss +++ /dev/null @@ -1,19 +0,0 @@ -/// Outputs box sizing value. -/// -/// @access public -/// @author Ivan Ruzevic -/// @param {string} $border-box [border-box] - Value to apply to box-sizing -/// @example -/// .test { -/// @include box-sizing; -/// } -/// @output -/// ```scss -/// .test { -/// box-sizing: border-box; -/// } -/// ``` -/// -@mixin box-sizing($box-model: border-box) { - box-sizing: $box-model; -} diff --git a/styles/scss/mixins/_column-offset-modifiers.scss b/styles/scss/mixins/_column-offset-modifiers.scss deleted file mode 100644 index 4a2e3be4a..000000000 --- a/styles/scss/mixins/_column-offset-modifiers.scss +++ /dev/null @@ -1,47 +0,0 @@ -/// Mixin that takes calc-column-width mixin and creates modifier classes from it. Used by flex grid. -/// -/// @access public -/// @author Ivan Ruzevic -/// @param {string} $cols [$base-col-number] - Total number of columns. -/// @param {string} $wrapper - Wrap output item with additional markup. -/// @param {string} $selector [margin-left] - HTML valid selector. Define offset type used. Default: . -/// @example -/// .test { -/// @include column-offset-modifiers; -/// } -/// @example -/// .test { -/// @include column-offset-modifiers($wrapper: '.item'); -/// } -/// @output -/// ```scss -/// .test--1 { -/// margin-left: 100%; -/// } -/// -/// .test--2 { -/// margin-left: 50%; -/// } -/// ``` -/// ```scss -/// .test--1 .item { -/// margin-left: 100%; -/// } -/// .test--2 .item { -/// margin-left: 50%; -/// } -/// ``` -@mixin column-offset-modifiers($cols: $base-col-number, $wrapper: false, $selector: 'margin-left') { - @for $i from 1 through $cols { - &--#{$i} { - @if $wrapper { - #{$wrapper} { - #{$selector}: calc-column-width($i); - } - } - @else { - #{$selector}: calc-column-width($i); - } - } - } -} diff --git a/styles/scss/mixins/_es-eases.scss b/styles/scss/mixins/_es-eases.scss deleted file mode 100644 index fb75be440..000000000 --- a/styles/scss/mixins/_es-eases.scss +++ /dev/null @@ -1,29 +0,0 @@ -@mixin es-eases { - // Eases - // Source: https://easings.net/ - --es-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); - --es-ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); - --es-ease-in-out-expo: cubic-bezier(1, 0, 0, 1); - --es-ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); - --es-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); - --es-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); - --es-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); - --es-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); - --es-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); - --es-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); - --es-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); - --es-ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); - --es-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); - --es-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); - --es-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); - --es-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); - --es-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); - --es-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); - --es-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); - --es-ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); - --es-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); - --es-ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); - --es-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); - --es-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); - --es-admin-ease-out-cubic: var(--es-ease-out-cubic); -} diff --git a/styles/scss/mixins/_flex-column-width-modifiers.scss b/styles/scss/mixins/_flex-column-width-modifiers.scss deleted file mode 100644 index f6c714cfe..000000000 --- a/styles/scss/mixins/_flex-column-width-modifiers.scss +++ /dev/null @@ -1,50 +0,0 @@ -/// Mixin that takes flex-column-width mixin and creates modifier classes from it. Used for flex grid with columns. -/// -/// @param {string} $cols [$base-col-number] - Total number of columns -/// @param {string} $wrapper - Wrap output item with additional markup -/// -/// @example -/// .test { -/// @include column-width-modifiers; -/// } -/// @example -/// .test { -/// @include column-width-modifiers($wrapper: '.item'); -/// } -/// -/// @output -/// ```scss -/// .test--1 { -/// flex: 0 0 100%; -/// max-width: 100%; -/// } -/// .test--2 { -/// flex: 0 0 50%; -/// max-width: 50%; -/// } -/// ``` -/// ```scss -/// .test--1 .item { -/// flex: 0 0 100%; -/// max-width: 100%; -/// } -/// .test--2. item { -/// flex: 0 0 50%; -/// max-width: 50%; -/// } -/// ``` - -@mixin flex-column-width-modifiers($cols: $base-col-number, $wrapper: false) { - @for $i from 1 through $cols { - &--#{$i} { - @if $wrapper { - #{$wrapper} { - @include flex-column-width($i); - } - } - @else { - @include flex-column-width($i); - } - } - } -} diff --git a/styles/scss/mixins/_flex-column-width.scss b/styles/scss/mixins/_flex-column-width.scss deleted file mode 100644 index ebb7915c6..000000000 --- a/styles/scss/mixins/_flex-column-width.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// Mixin that creates flex width for column. -/// -/// @param {string} $cols [$base-col-number] - Total number of columns -/// -/// @example -/// .test { -/// @include flex-column-width; -/// } -/// -/// @output -/// ```scss -/// .test { -/// flex: 0 0 100%; -/// max-width: 100%; -/// } -/// ``` - -@mixin flex-column-width($cols: $base-col-number) { - flex: 0 0 calc-column-width($cols); - max-width: calc-column-width($cols); -} diff --git a/styles/scss/mixins/_flex-grid-width-modifiers.scss b/styles/scss/mixins/_flex-grid-width-modifiers.scss deleted file mode 100644 index 29f2aeeaa..000000000 --- a/styles/scss/mixins/_flex-grid-width-modifiers.scss +++ /dev/null @@ -1,50 +0,0 @@ -/// Mixin that takes flex-grid-width mixing and creates modifier classes from it. Used for flex grid. -/// -/// @param {string} $cols [$base-col-number] - Total number of columns. -/// @param {string} $wrapper - Wrap output item with additional markup. -/// -/// @example -/// .test { -/// @include flex-grid-width-modifiers; -/// } -/// @example -/// .test { -/// @include flex-grid-width-modifiers($wrapper: '.item'); -/// } -/// -/// @output -/// ```scss -/// .test--1 { -/// flex: 0 0 8.33333%; -/// max-width: 8.33333%; -/// } -/// .test--2 { -/// flex: 0 0 16.66667%; -/// max-width: 16.66667%; -/// } -/// ``` -/// ```scss -/// .test--1 .item { -/// flex: 0 0 8.33333%; -/// max-width: 8.33333%; -/// } -/// .test--2 .item { -/// flex: 0 0 16.66667%; -/// max-width: 16.66667%; -/// } -/// ``` - -@mixin flex-grid-width-modifiers($cols: $base-col-number, $wrapper: false) { - @for $i from 1 through $cols { - &--#{$i} { - @if $wrapper { - #{$wrapper} { - @include flex-grid-width($i); - } - } - @else { - @include flex-grid-width($i); - } - } - } -} diff --git a/styles/scss/mixins/_flex-grid-width.scss b/styles/scss/mixins/_flex-grid-width.scss deleted file mode 100644 index ada36846b..000000000 --- a/styles/scss/mixins/_flex-grid-width.scss +++ /dev/null @@ -1,21 +0,0 @@ -/// Mixin that creates flex width of one column based on the column number. -/// -/// @param {string} $cols [$base-col-number] - Total number of columns -/// -/// @example -/// .test { -/// @include flex-grid-width; -/// } -/// -/// @output -/// ```scss -/// .test { -/// flex: 0 0 100%; -/// max-width: 100%; -/// } -/// ``` - -@mixin flex-grid-width($cols: $base-col-number) { - flex: 0 0 calc-grid-width($cols); - max-width: calc-grid-width($cols); -} diff --git a/styles/scss/mixins/_flex-horizontal-align-modifiers.scss b/styles/scss/mixins/_flex-horizontal-align-modifiers.scss deleted file mode 100644 index 56a219a89..000000000 --- a/styles/scss/mixins/_flex-horizontal-align-modifiers.scss +++ /dev/null @@ -1,33 +0,0 @@ -/// Mixin that creates flex horizontal align modifiers. -/// -/// @example -/// .test { -/// @include flex-horizontal-align-modifiers; -/// } -/// -/// @output -/// ```scss -/// .test--left { -/// justify-content: flex-start; -/// } -/// .test--center { -/// justify-content: center; -/// } -/// .test--right { -/// justify-content: flex-end; -/// } -/// ``` - -@mixin flex-horizontal-align-modifiers() { - &--left { - justify-content: flex-start; - } - - &--center { - justify-content: center; - } - - &--right { - justify-content: flex-end; - } -} diff --git a/styles/scss/mixins/_flex-vertical-align-modifiers.scss b/styles/scss/mixins/_flex-vertical-align-modifiers.scss deleted file mode 100644 index 4347a2a2e..000000000 --- a/styles/scss/mixins/_flex-vertical-align-modifiers.scss +++ /dev/null @@ -1,33 +0,0 @@ -/// Mixin that creates flex vertical align modifiers. -/// -/// @example -/// .test { -/// @include flex-vertical-align-modifiers; -/// } -/// -/// @output -/// ```scss -/// .test--top { -/// align-self: flex-start; -/// } -/// .test--center { -/// align-self: center; -/// } -/// .test--bottom { -/// align-self: flex-end; -/// } -/// ``` - -@mixin flex-vertical-align-modifiers() { - &--top { - align-self: flex-start; - } - - &--center { - align-self: center; - } - - &--bottom { - align-self: flex-end; - } -} diff --git a/styles/scss/mixins/_flex.scss b/styles/scss/mixins/_flex.scss deleted file mode 100644 index a2a7f97ce..000000000 --- a/styles/scss/mixins/_flex.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use 'sass:math'; - -/// Mixin that creates flex grid. -/// It should be applied to the container element that will act as grid row. -/// All of the child elements will act as grid columns. -/// -/// Parameters to configure: -/// -/// @param {string} $layout - Column width relative to the number of columns. If defined as a number, all columns will be the same width, and if set as a list, width will be set sequentially for each item. -/// @param {string} $gutter - Spacing between each item. -/// @param {string} $col-count - Max number of columns. -/// @param {string} $horizontal - Horizontal alignment of the items. Uses values for justify-content property. -/// @param {string} $vertical - Vertical alignment of the items. Uses values for align-items property. -/// @param {string} $order - List of item order overrides. - -@mixin flex-container( - $layout: (), - $gutter: $base-gutter-size, - $col-count: $base-col-number, - $horizontal: flex-start, - $vertical: stretch, - $order: 0 -) { - display: flex; - flex-wrap: wrap; - justify-content: $horizontal; - align-items: $vertical; - margin: 0 -#{$gutter}; - - & > * { - padding: 0 #{$gutter}; - } - - // Logic for defining layout of the columns. - @if length($layout) > 0 { - @if type-of($layout) == list { - // Looping over each item in $layout list and grabbing their index. - @for $index from 1 through length($layout) { - // Value of current item from the list. - $item: nth($layout, $index); - - // Child element selector for current index. - & > :nth-child( #{$index} ) { - // Setting the width of the column as a relation between max column number and width of the column. - flex: 0 0 #{math.div(100%, (math.div($col-count, $item)))}; - max-width: #{math.div(100%, (math.div($col-count, $item)))}; - } - } - } - - // Setting the width of all columns as a relation between max column number and width of the columns. - @if type-of($layout) == number { - & > * { - flex: 0 0 #{math.div(100%, (math.div($col-count, $layout)))}; - max-width: #{math.div(100%, (math.div($col-count, $layout)))}; - } - } - } - - // Fallback for undefined layout - @else { - & > * { - flex: 1 0 0; - max-width: 100%; - } - } - - // Logic for defining order of the columns. - @if length($order) > 0 { - @if type-of($order) == list { - @for $index from 1 through length($order) { - $item: nth($order, $index); - - & > :nth-child( #{$index} ) { - order: $item; - } - } - } - - @if type-of($order) == number { - & > * { - order: $order; - } - } - } -} diff --git a/styles/scss/mixins/_font-smoothing.scss b/styles/scss/mixins/_font-smoothing.scss deleted file mode 100644 index df3048d43..000000000 --- a/styles/scss/mixins/_font-smoothing.scss +++ /dev/null @@ -1,27 +0,0 @@ -/// Mixin that creates font smoothing options. -/// -/// @param {string} $type - Type of font smoothing. Default: antialiased. -/// -/// @example -/// .test { -/// @include font-smoothing; -/// } -/// -/// @output -/// ```scss -/// .test { -/// -webkit-font-smoothing: antialiased; -/// -moz-osx-font-smoothing: grayscale; -/// } -/// ``` - -@mixin font-smoothing($type: antialiased) { - @if $type == antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - @else { - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - } -} diff --git a/styles/scss/mixins/_for-each-attribute.scss b/styles/scss/mixins/_for-each-attribute.scss deleted file mode 100644 index 0b0417534..000000000 --- a/styles/scss/mixins/_for-each-attribute.scss +++ /dev/null @@ -1,49 +0,0 @@ -/// This mixin is meant to be used mostly as a helper in other mixins. -/// -/// It can be used as separating commonly used attributes and their values -/// in a map that you can later reuse by simply calling this mixin with $map -/// as a parameter. -/// -/// @access public -/// @author Karlo Volf -/// -/// @param {map} $map [] - Map that you want to spread. -/// -/// @example -/// $map: ( -/// display: inline-block, -/// margin-left: 10px, -/// transform: scale(3), -/// padding: 300px, -/// ); -/// -/// .first-class { -/// @include for-each-attribute($map); -/// } -/// -/// .second-class { -/// @include for-each-attribute($map); -/// } -/// -/// @output -/// ```scss -/// .first-class { -/// display: inline-block; -/// margin-left: 10px; -/// transform: scale(3); -/// padding: 300px; -/// } -/// -/// .second-class { -/// display: inline-block; -/// margin-left: 10px; -/// transform: scale(3); -/// padding: 300px; -/// } -/// ``` - -@mixin for-each-attribute($map) { - @each $key, $value in $map { - #{$key}: #{$value}; - } -} diff --git a/styles/scss/mixins/_grid-offset-modifiers.scss b/styles/scss/mixins/_grid-offset-modifiers.scss deleted file mode 100644 index bd3e774b9..000000000 --- a/styles/scss/mixins/_grid-offset-modifiers.scss +++ /dev/null @@ -1,47 +0,0 @@ -/// Mixin that takes calc-grid-width mixin and creates modifier classes from it. Used by flex grid. -/// -/// @param {string} $cols - Total number of columns. Default: $base-col-number. -/// @param {string} $wrapper - Wrap output item with additional markup. -/// @param {string} $selector - HTML valid selector. Define offset type used. Default: margin-left. -/// -/// @example -/// .test { -/// @include grid-offset-modifiers; -/// } -/// @example -/// .test { -/// @include grid-offset-modifiers($wrapper: '.item'); -/// } -/// -/// @output -/// ```scss -/// .test--1 { -/// margin-left: 8.33333%; -/// } -/// .test--2 { -/// margin-left: 16.66667%; -/// } -/// ``` -/// ```scss -/// .test--1 .item { -/// margin-left: 8.33333%; -/// } -/// .test--2 .item { -/// margin-left: 16.66667%; -/// } -/// ``` - -@mixin grid-offset-modifiers($cols: $base-col-number, $wrapper: false, $selector: 'margin-left') { - @for $i from 0 through $cols { - &--#{$i} { - @if $wrapper { - #{$wrapper} { - #{$selector}: calc-grid-width($i); - } - } - @else { - #{$selector}: calc-grid-width($i); - } - } - } -} diff --git a/styles/scss/mixins/_inline-font-colors.scss b/styles/scss/mixins/_inline-font-colors.scss deleted file mode 100644 index e6a180bce..000000000 --- a/styles/scss/mixins/_inline-font-colors.scss +++ /dev/null @@ -1,36 +0,0 @@ -/// Mixin that will create a Gutenberg specific inline color class. This enables coloring parts of the words. -/// -/// @access public -/// @author Denis Žoljom -/// -/// @param {map} $colors [] Map of the colors that need to be passed. -/// -/// @example -/// $heading: ( -/// colors: ( -/// primary: global-settings(colors, primary), -/// gulf: global-settings(colors, gulf), -/// ) -/// ); -/// -/// .heading { -/// @include inline-font-colors(map-get-strict($heading, colors)); -/// } -/// -/// @output -/// ```scss -/// .heading .has-primary-color { -/// color: #011751; -/// } -/// .heading .has-gulf-color { -/// color: #FFC660; -/// } -/// ``` - -@mixin inline-font-colors($colors) { - @each $colorName, $colorValue in $colors { - .has-#{$colorName}-color { - color: $colorValue; - } - } -} diff --git a/styles/scss/mixins/_link-modifiers.scss b/styles/scss/mixins/_link-modifiers.scss deleted file mode 100644 index 0205bec50..000000000 --- a/styles/scss/mixins/_link-modifiers.scss +++ /dev/null @@ -1,85 +0,0 @@ -/// Mixin that creates output modifiers for any valid html state, :hover, :focus, :active but only the default state has to be in normal key. -/// All selectors must be valid html selectors. -/// Also supports multiple nested maps as a key. -/// -/// @param {string} $map - Map to search. -/// @param {string} $key - Map key to find. -/// -/// Map: -/// $test: ( -/// test: ( -/// default: ( -/// normal: ( -/// background-color: $base-black-color, -/// color: $base-white-color, -/// ), -/// hover: ( -/// background-color: $base-white-color, -/// color: $base-black-color, -/// ), -/// focus: ( -/// background-color: $base-white-color, -/// color: $base-black-color, -/// ), -/// active: ( -/// background-color: $base-white-color, -/// color: $base-black-color, -/// ), -/// ), -/// ), -/// ); -/// -/// @example -/// .test { -/// @include link-modifiers($test, test); -/// } -/// -/// @output -/// ```scss -/// .test--default { -/// background-color: #000000; -/// color: #FFFFFF; -/// } -/// .test--default:hover { -/// background-color: #FFFFFF; -/// color: #000000; -/// } -/// .test--default:focus { -/// background-color: #FFFFFF; -/// color: #000000; -/// } -/// .test--default:active { -/// background-color: #FFFFFF; -/// color: #000000; -/// } -/// ``` - -@mixin link-modifiers($map, $keys...) { // stylelint-disable max-nesting-depth - @each $modifier, $modifierMap in map-get-deep($map, $keys...) { - &--#{"" + $modifier} { - @if type-of($modifierMap) == 'map' { - @each $state, $stateMap in $modifierMap { - @if $state == 'normal' { - @if type-of($stateMap) == 'map' { - @each $cssSelector, $cssValue in $stateMap { - #{$cssSelector}: $cssValue; - } - } - } - @else { - &:#{$state} { - @if type-of($stateMap) == 'map' { - @each $cssSelector, $cssValue in $stateMap { - #{$cssSelector}: $cssValue; - } - } - } - } - } - } - @else { - @error 'ERROR: Responsive Map breakpointMap items are not map please check: #{$map} with key: #{modifierMap}'; - } - } - } -} diff --git a/styles/scss/mixins/_link.scss b/styles/scss/mixins/_link.scss deleted file mode 100644 index d5b662b11..000000000 --- a/styles/scss/mixins/_link.scss +++ /dev/null @@ -1,78 +0,0 @@ -/// Mixin that creates output for any valid html state, :hover, :focus, :active but only the default state has to be in normal key. -/// All selectors must be valid html selectors. -/// -/// @param {string} $map - Map to search. -/// @param {string} $key - Map key to find. -/// -/// Map: -/// $test: ( -/// test: ( -/// normal: ( -/// background-color: $base-black-color, -/// color: $base-white-color, -/// ), -/// hover: ( -/// background-color: $base-white-color, -/// color: $base-black-color, -/// ), -/// focus: ( -/// background-color: $base-white-color, -/// color: $base-black-color, -/// ), -/// active: ( -/// background-color: $base-white-color, -/// color: $base-black-color, -/// ), -/// ), -/// ); -/// -/// @example -/// .test { -/// @include link($test, test); -/// } -/// -/// @output -/// ```scss -/// .test { -/// background-color: #000000; -/// color: #FFFFFF; -/// } -/// .test:hover { -/// background-color: #FFFFFF; -/// color: #000000; -/// } -/// .test:focus { -/// background-color: #FFFFFF; -/// color: #000000; -/// } -/// .test:active { -/// background-color: #FFFFFF; -/// color: #000000; -/// } -/// ``` - -@mixin link($map, $key) { // stylelint-disable max-nesting-depth - @if type-of($map) == 'map' { - @each $state, $stateMap in map-get-strict($map, $key) { - @if $state == 'normal' { - @if type-of($stateMap) == 'map' { - @each $cssSelector, $cssValue in $stateMap { - #{$cssSelector}: $cssValue; - } - } - } - @else { - &:#{$state} { - @if type-of($stateMap) == 'map' { - @each $cssSelector, $cssValue in $stateMap { - #{$cssSelector}: $cssValue; - } - } - } - } - } - } - @else { - @error 'ERROR: Responsive Map breakpointMap items are not map please check: #{$map} with key: #{modifierMap}'; - } -} diff --git a/styles/scss/mixins/_list.scss b/styles/scss/mixins/_list.scss deleted file mode 100644 index 28d3dfb70..000000000 --- a/styles/scss/mixins/_list.scss +++ /dev/null @@ -1,47 +0,0 @@ -/// Mixin that creates custom bullet list style. -/// -/// @param {string} $bullet-color - Set bullet custom color. Default: $base-primary-color. -/// @param {string} $bullet-size - Set bullet custom size. Default: 10px. -/// @param {string} $bullet-spacing - Set bullet custom spacing. Default: 25px. -/// -/// @example -/// .test { -/// @include custom-bullets; -/// } -/// -/// @output -/// ```scss -/// .test { -/// list-style: none; -/// position: relative; -/// padding-left: 25px; -/// } -/// .test::before { -/// content: ''; -/// position: absolute; -/// left: 0; -/// top: 50%; -/// background-color: #D8262C; -/// width: 10px; -/// height: 10px; -/// transform: translateY(-50%); -/// } -/// ``` - -@mixin custom-bullets( $bullet-color: $base-primary-color, $bullet-size: 10px, $bullet-spacing: 25px) { - - list-style: none; - position: relative; - padding-left: $bullet-spacing; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 50%; - background-color: $bullet-color; - width: $bullet-size; - height: $bullet-size; - transform: translateY(-50%); - } -} diff --git a/styles/scss/mixins/_modifiers-deep.scss b/styles/scss/mixins/_modifiers-deep.scss deleted file mode 100644 index 0a0df5949..000000000 --- a/styles/scss/mixins/_modifiers-deep.scss +++ /dev/null @@ -1,49 +0,0 @@ -/// Mixin that will output modifier classes for specific selector from map key. -/// -/// @param {string} $map - Map to search for. -/// @param {string} $selector - HTML valid selector. -/// @param {string} $wrapper - Wrap output item with additional markup -/// -/// Map: -/// $test: ( -/// test: ( -/// black: $base-black-color, -/// white: $base-white-color, -/// primary: $base-primary-color, -/// ) -/// ); -/// -/// @example -/// .test { -/// @include modifiers-deep($test, test, color); -/// } -/// -/// @output -/// ```scss -/// .test--black { -/// color: #000000; -/// } -/// .test--white { -/// color: #FFFFFF; -/// } -/// .test--primary { -/// color: #D8262C; -/// } -/// ``` - -@mixin modifiers-deep($map, $key, $selector, $wrapper: false) { - @each $modifier, $value in map-get-strict($map, $key) { - @if $wrapper { - &--#{"" + $modifier} { - #{$wrapper} { - #{$selector}: $value; - } - } - } - @else { - &--#{"" + $modifier} { - #{$selector}: $value; - } - } - } -} diff --git a/styles/scss/mixins/_modifiers-range.scss b/styles/scss/mixins/_modifiers-range.scss deleted file mode 100644 index 20c32c84b..000000000 --- a/styles/scss/mixins/_modifiers-range.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use 'sass:math'; - -/// Mixin that will output modifier classes for specific number range from map key. -/// -/// @param {string} $map - Map to search for. -/// @param {string} $selector - HTML valid selector. -/// -/// Map: -/// $test: ( -/// test: ( -/// min: 0, -/// max: 300, -/// step: 10, -/// ), -/// ); -/// -/// @example -/// .test { -/// @include modifiers-range($test, test, padding-top); -/// } -/// -/// @output -/// ```scss -/// .test--0 { -/// padding-top: 0px; -/// } -/// .test--10 { -/// padding-top: 10px; -/// } -/// .test--20 { -/// padding-top: 20px; -/// } -/// .test--30 { -/// padding-top: 30px; -/// } -/// ``` - -@mixin modifiers-range($map, $key, $selector) { - $min: map-get-deep($map, $key, min); - $max: map-get-deep($map, $key, max); - $step: map-get-deep($map, $key, step); - - $final-range: math.div($max + $step, $step); - - @for $i from $min to $final-range { - $i: #{$i * $step}; - - &--#{$i} { - #{$selector}: #{$i}px; - } - } -} diff --git a/styles/scss/mixins/_modifiers.scss b/styles/scss/mixins/_modifiers.scss deleted file mode 100644 index 968e5522c..000000000 --- a/styles/scss/mixins/_modifiers.scss +++ /dev/null @@ -1,47 +0,0 @@ -/// Mixin will output modifiers classes for specific selector. -/// -/// @param {string} $map - Map to search for. -/// @param {string} $selector - a valid HTML selector. -/// @param {string} $wrapper - Wrap output item with additional markup -/// -/// Map: -/// $test: ( -/// black: $base-black-color, -/// white: $base-white-color, -/// primary: $base-primary-color, -/// ); -/// -/// @example -/// .test { -/// @include modifiers($test, color); -/// } -/// -/// @output -/// ```scss -/// .test--black { -/// color: #000000; -/// } -/// .test--white { -/// color: #FFFFFF; -/// } -/// .test--primary { -/// color: #D8262C; -/// } -/// ``` - -@mixin modifiers($map, $selector, $wrapper: false) { - @each $key, $value in $map { - @if $wrapper { - &--#{$key} { - #{$wrapper} { - #{$selector}: $value; - } - } - } - @else { - &--#{$key} { - #{$selector}: $value; - } - } - } -} diff --git a/styles/scss/mixins/_placeholder.scss b/styles/scss/mixins/_placeholder.scss deleted file mode 100644 index 609a618f4..000000000 --- a/styles/scss/mixins/_placeholder.scss +++ /dev/null @@ -1,42 +0,0 @@ -/// Mixin that creates input specific selectors. Used to customise placeholders in different browsers. -/// -/// @example -/// .test { -/// @include placeholder { -/// color: $base-black-color; -/// }; -/// } -/// -/// @output -/// ```scss -/// .test::-webkit-input-placeholder { -/// color: #000000; -/// } -/// .test:-moz-placeholder { -/// color: #000000; -/// } -/// .test::-moz-placeholder { -/// color: #000000; -/// } -/// .test:-ms-input-placeholder { -/// color: #000000; -/// } -/// ``` - -@mixin placeholder { // stylelint-disable selector-no-vendor-prefix - &::-webkit-input-placeholder { - @content; - } - - &:-moz-placeholder { - @content; - } - - &::-moz-placeholder { - @content; - } - - &:-ms-input-placeholder { - @content; - } -} diff --git a/styles/scss/mixins/_responsive-modifiers.scss b/styles/scss/mixins/_responsive-modifiers.scss deleted file mode 100644 index 13b206ef7..000000000 --- a/styles/scss/mixins/_responsive-modifiers.scss +++ /dev/null @@ -1,103 +0,0 @@ -/// Mixin that creates output modifiers for specific map key, with provided media breakpoints. -/// Selectors must be valid html selectors. -/// It operates the same way as "responsive" mixin, except it will output modifier classes. -/// Also supports multiple nested maps as a key. -/// -/// @param {string} $map - Map to search for. -/// @param {string} $key - Map key to find. -/// -/// Map: -/// $test: ( -/// sizes: ( -/// mobile: ( -/// default: ( -/// font-size: 64px, -/// line-height: 0.92, -/// ), -/// big: ( -/// font-size: 42px, -/// line-height: 1.12, -/// ), -/// ), -/// tablet: ( -/// default: ( -/// font-size: 115px, -/// line-height: 0.92, -/// ), -/// big: ( -/// font-size: 90px, -/// line-height: 1, -/// ), -/// ), -/// ) -/// ); -/// -/// @example -/// .test { -/// @include responsive-modifiers($test, sizes); -/// } -/// -/// @output -/// ```scss -/// .test--default { -/// font-size: 64px; -/// line-height: 0.92; -/// } -/// .test--big { -/// font-size: 42px; -/// line-height: 1.12; -/// } -/// \@media (min-width: 768px) { -/// .test--default { -/// font-size: 115px; -/// line-height: 0.92; -/// } -/// .test--big { -/// font-size: 90px; -/// line-height: 1; -/// } -/// } -/// ``` - -@mixin responsive-modifiers($map, $keys...) { // stylelint-disable max-nesting-depth - $i: 0; - - @each $breakpoint, $breakpointMap in map-get-deep($map, $keys...) { - @if type-of($breakpointMap) == 'map' { - @if $i == 0 { - @each $modifier, $modifierMap in $breakpointMap { - @if type-of($modifierMap) == 'map' { - &--#{$modifier} { - @each $cssSelector, $cssValue in $modifierMap { - #{$cssSelector}: $cssValue; - } - } - } - @else { - @error 'ERROR: Responsive Map modifierMap items are not map please check: #{$map} with key: #{modifierMap}'; - } - } - } - @else { - @include media(#{$breakpoint} up) { - @each $modifier, $modifierMap in $breakpointMap { - @if type-of($modifierMap) == 'map' { - &--#{$modifier} { - @each $cssSelector, $cssValue in $modifierMap { - #{$cssSelector}: $cssValue; - } - } - } - @else { - @error 'ERROR: Responsive Map modifierMap items are not map please check: #{$map} with key: #{modifierMap}'; - } - } - } - } - } - @else { - @error 'ERROR: Responsive Map breakpointMap items are not map please check: #{$map} with key: #{breakpointMap}'; - } - $i: $i + 1; - } -} diff --git a/styles/scss/mixins/_responsive-selectors-visibility.scss b/styles/scss/mixins/_responsive-selectors-visibility.scss deleted file mode 100644 index 9784f3c03..000000000 --- a/styles/scss/mixins/_responsive-selectors-visibility.scss +++ /dev/null @@ -1,82 +0,0 @@ -/// Mixin that will output provided contend wrapped in responsive selectors from $media-blender breakpoints map. -/// Unlike responsive-selectors mixing this one will wrap first and last item in a separate breakpoint. -/// Responsive configuration is Desktop First!!! -/// Used for setting up responsiveness visibility for a selector. -/// -/// @param {string} $breakpoints - Map from media-blender breakpoints. -/// -/// Map: -/// $media-breakpoints: ( -/// small: 0 543, -/// mobile: 544 767, -/// tablet: 768 991, -/// desktop: 992 1199, -/// large: 1200 -/// ) !default; -/// -/// @example -/// .test { -/// @include responsive-selectors-visibility { -/// width: 10%; -/// } -/// } -/// -/// @output -/// ```scss -/// \@media (min-width: 1200px) { -/// .test-large { -/// display: none; -/// } -/// } -/// \@media (min-width: 992px) and (max-width: 1199px) { -/// .test-desktop { -/// display: none; -/// } -/// } -/// \@media (min-width: 768px) and (max-width: 991px) { -/// .test-tablet { -/// display: none; -/// } -/// } -/// \@media (min-width: 544px) and (max-width: 767px) { -/// .test-mobile { -/// display: none; -/// } -/// } -/// \@media (max-width: 543px) { -/// .test-small { -/// display: none; -/// } -/// } -/// ``` - -@mixin responsive-visibility-selectors($breakpoints: $media-breakpoints) { - $i: 1; - - @each $breakpoint in map-reverse($breakpoints) { - $point: nth($breakpoint, 1); - - @if $i == 1 { - @include media(#{$point} up) { - &-#{$point} { - @content; - } - } - } - @else if $i == length($breakpoints) { - @include media(#{$point} down) { - &-#{$point} { - @content; - } - } - } - @else { - @include media(#{$point}) { - &-#{$point} { - @content; - } - } - } - $i: $i + 1; - } -} diff --git a/styles/scss/mixins/_responsive-selectors.scss b/styles/scss/mixins/_responsive-selectors.scss deleted file mode 100644 index c4f42c4fb..000000000 --- a/styles/scss/mixins/_responsive-selectors.scss +++ /dev/null @@ -1,70 +0,0 @@ -/// Mixin that will output provided contend wrapped in responsive selectors from $media-blender breakpoints map. -/// Responsive configuration is Desktop First!!! -/// -/// @param {string} $breakpoints - Map from media-blender breakpoints. -/// -/// Map: -/// $media-breakpoints: ( -/// small: 0 543, -/// mobile: 544 767, -/// tablet: 768 991, -/// desktop: 992 1199, -/// large: 1200 -/// ) !default; -/// -/// @example -/// .test { -/// @include responsive-selectors { -/// width: 10%; -/// } -/// } -/// -/// @output -/// ```scss -/// .test-large { -/// width: 10%; -/// } -/// \@media (max-width: 1199px) { -/// .test-desktop { -/// width: 10%; -/// } -/// } -/// \@media (max-width: 991px) { -/// .test-tablet { -/// width: 10%; -/// } -/// } -/// \@media (max-width: 767px) { -/// .test-mobile { -/// width: 10%; -/// } -/// } -/// \@media (max-width: 543px) { -/// .test-small { -/// width: 10%; -/// } -/// } -/// ``` - -@mixin responsive-selectors($breakpoints: $media-breakpoints) { - $i: 1; - - @each $breakpoint in map-reverse($breakpoints) { - $point: nth($breakpoint, 1); - - @if $i == 1 { - &-#{$point} { - @content; - } - } - @else { - @include media(#{$point} down) { - &-#{$point} { - @content; - } - } - } - - $i: $i + 1; - } -} diff --git a/styles/scss/mixins/_responsive.scss b/styles/scss/mixins/_responsive.scss deleted file mode 100644 index 623386e9b..000000000 --- a/styles/scss/mixins/_responsive.scss +++ /dev/null @@ -1,69 +0,0 @@ -/// Mixin that creates output for specific map key or from map that is nested multiple times, with provided media breakpoints. -/// Selectors must be valid html selectors. -/// Also supports multiple nested maps as a key. -/// -/// ### Map -/// ```scss -/// $test: ( -/// test: ( -/// mobile: ( -/// font-size: 64px, -/// line-height: 0.92, -/// ), -/// tablet: ( -/// font-size: 42px, -/// line-height: 1.12, -/// ), -/// ) -/// ); -/// ``` -/// @param {string} $map - Map to search for. -/// @param {string} $key - Map key to find. -/// -/// @example -/// .test { -/// @include responsive($test, test); -/// } -/// @example -/// .test { -/// @include responsive($test, test2, test1); -/// } -/// -/// @output -/// ```scss -/// .test { -/// font-size: 64px; -/// line-height: 0.92; -/// } -/// \@media (min-width: 768px) { -/// .test { -/// font-size: 42px; -/// line-height: 1.12; -/// } -/// } -/// ``` - -@mixin responsive($map, $keys...) { - $i: 0; - - @each $breakpoint, $breakpointMap in map-get-deep($map, $keys...) { - @if type-of($breakpointMap) == 'map' { - @if $i == 0 { - @each $cssSelector, $cssValue in $breakpointMap { - #{$cssSelector}: $cssValue; - } - } - @else { - @include media(#{$breakpoint} up) { - @each $cssSelector, $cssValue in $breakpointMap { // stylelint-disable-line max-nesting-depth - #{$cssSelector}: $cssValue; - } - } - } - } - @else { - @error 'ERROR: Responsive Map breakpointMap items are not map please check: #{$map} with key: #{breakpointMap}'; - } - $i: $i + 1; - } -} diff --git a/styles/scss/mixins/_stretch.scss b/styles/scss/mixins/_stretch.scss deleted file mode 100644 index a1d501448..000000000 --- a/styles/scss/mixins/_stretch.scss +++ /dev/null @@ -1,31 +0,0 @@ -/// Mixin that creates output used for definition of positions. -/// -/// @param {string} $top - Top Position. Default: 0. -/// @param {string} $right - Right Position. Default: 0. -/// @param {string} $bottom - Bottom Position. Default: 0. -/// @param {string} $left - Left Position. Default: 0. -/// @param {string} $position - Position type. Default: absolute. -/// -/// @example -/// .test { -/// @include stretch(20px, 30px, 40px, 30%, fixed); -/// } -/// -/// @output -/// ```scss -/// .test { -/// position: fixed; -/// top: 20px; -/// right: 30px; -/// bottom: 40px; -/// left: 30%; -/// } -/// ``` - -@mixin stretch($top: 0, $right: 0, $bottom: 0, $left: 0, $position: absolute) { - position: $position; - top: $top; - right: $right; - bottom: $bottom; - left: $left; -} diff --git a/styles/scss/mixins/_text-align-modifiers.scss b/styles/scss/mixins/_text-align-modifiers.scss deleted file mode 100644 index 60fa68f53..000000000 --- a/styles/scss/mixins/_text-align-modifiers.scss +++ /dev/null @@ -1,33 +0,0 @@ -/// Mixin that create text align modifiers. -/// -/// @example -/// .test { -/// @include text-align-modifiers; -/// } -/// -/// @output -/// ```scss -/// .test--left { -/// text-align: left; -/// } -/// .test--center { -/// text-align: center; -/// } -/// .test--right { -/// text-align: right; -/// } -/// ``` - -@mixin text-align-modifiers() { - &--left { - text-align: left; - } - - &--center { - text-align: center; - } - - &--right { - text-align: right; - } -} diff --git a/styles/scss/mixins/_underline-text.scss b/styles/scss/mixins/_underline-text.scss index d8c7ee4ca..84c51f8e6 100644 --- a/styles/scss/mixins/_underline-text.scss +++ b/styles/scss/mixins/_underline-text.scss @@ -98,6 +98,12 @@ /// } /// ``` +@mixin for-each-attribute($map) { + @each $key, $value in $map { + #{$key}: #{$value}; + } +} + @mixin underline-text($thickness: 10%, $duration: 0.5s, $timing-function: cubic-bezier(0.79, 0.01, 0.22, 0.99), $color: currentColor, $wrapper: false, $element: '.underline-text', $state: 'hover') { $thickness: 100% - $thickness; From 4a90e0d2910ae7a9e81255f942191f4885460d23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 15:12:59 +0200 Subject: [PATCH 09/74] clean up built-in styles --- .../server-side-render.scss | 39 -- styles/es-animated-icons.scss | 29 -- styles/es-component-styles.scss | 45 ++- .../es-gutenberg-component-style-updates.scss | 193 --------- .../es-gutenberg-editor-ui-enhancements.scss | 159 -------- styles/es-keyframes.scss | 29 -- styles/es-shared/_es-nested-collapsable.scss | 114 ------ styles/index.scss | 6 - styles/override-editor.scss | 117 ------ styles/sassdocs/main.css | 365 ------------------ styles/scss/_colors.scss | 17 - styles/scss/_core.scss | 17 - styles/wp-version-specific/_wp-6-3.scss | 116 ------ styles/wp-version-specific/_wp-6-4.scss | 117 ------ styles/wp-version-specific/_wp-6-5.scss | 134 ------- 15 files changed, 31 insertions(+), 1466 deletions(-) delete mode 100644 scripts/components/server-side-render/server-side-render.scss delete mode 100644 styles/es-animated-icons.scss delete mode 100644 styles/es-gutenberg-component-style-updates.scss delete mode 100644 styles/es-gutenberg-editor-ui-enhancements.scss delete mode 100644 styles/es-keyframes.scss delete mode 100644 styles/es-shared/_es-nested-collapsable.scss delete mode 100644 styles/sassdocs/main.css delete mode 100644 styles/scss/_colors.scss delete mode 100644 styles/scss/_core.scss delete mode 100644 styles/wp-version-specific/_wp-6-3.scss delete mode 100644 styles/wp-version-specific/_wp-6-4.scss delete mode 100644 styles/wp-version-specific/_wp-6-5.scss diff --git a/scripts/components/server-side-render/server-side-render.scss b/scripts/components/server-side-render/server-side-render.scss deleted file mode 100644 index 5042a0a1a..000000000 --- a/scripts/components/server-side-render/server-side-render.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Spinner animations. -.es-ssr-spinner-overlay { - position: absolute; - inset: 0; - - width: 100%; - height: 100%; - min-height: 4rem; - min-width: 4rem; - - display: flex; - align-items: center; - justify-content: center; - - &__spinner { - z-index: 2; - width: 3rem; - height: 3rem; - - // stylelint-disable-next-line no-unknown-animations - animation: es-rotate 2s linear infinite; // (animation is defined in es-keyframes.scss) - } - - &__spinner-path, - &__spinner-path-2 { - stroke-linecap: round; - - // stylelint-disable-next-line no-unknown-animations - animation: es-dash 1.5s ease-in-out infinite; // (animation is defined in es-keyframes.scss) - } - - &__spinner-path { - stroke: var(--es-admin-eightshift-50); - } - - &__spinner-path-2 { - stroke: var(--es-admin-eightshift-500); - } -} diff --git a/styles/es-animated-icons.scss b/styles/es-animated-icons.scss deleted file mode 100644 index d05f2fae9..000000000 --- a/styles/es-animated-icons.scss +++ /dev/null @@ -1,29 +0,0 @@ -// Animated icons - -// Use the icon with the name written here and on a parent element add a class of 'es-has-animated-icon'. -// The animation will happen on hover, focus (focus-visible), -// or when an 'is-es-icon-animated' class is applied on the parent with the 'es-has-animated-icon' class. - -// icons.trashAlt -.es-has-animated-icon { - .es-animated-trash-alt-lid, - .es-animated-trash-alt-base { - transition: { - property: transform; - timing-function: var(--es-ease-out-cubic); - duration: 0.3s; - } - } - - &.is-es-icon-animated .es-animated-trash-alt-lid, - &:focus-visible .es-animated-trash-alt-lid, - &:hover .es-animated-trash-alt-lid { - transform: rotate(15deg) translate(1.125px, -1.75px); - } - - &.is-es-icon-animated .es-animated-trash-alt-base, - &:focus-visible .es-animated-trash-alt-base, - &:hover .es-animated-trash-alt-base { - transform: translate(0, -2.25px); - } -} diff --git a/styles/es-component-styles.scss b/styles/es-component-styles.scss index abf948def..c5c4f64e7 100644 --- a/styles/es-component-styles.scss +++ b/styles/es-component-styles.scss @@ -1,19 +1,5 @@ // stylelint-disable number-max-precision, selector-max-specificity, declaration-no-important, max-nesting-depth -@import './es-keyframes'; -@import '../scripts/components/advanced-color-picker/advanced-color-picker'; -@import '../scripts/components/custom-slider/custom-slider'; -@import '../scripts//components/menu/es-menu.scss'; -@import '../scripts//components/number-picker/number-picker.scss'; -@import '../scripts/components/help-modal/help-modal'; -@import '../scripts/components/custom-select/custom-select'; -@import '../scripts/components/server-side-render/server-side-render'; -@import '../scripts/components/color-palette-custom/color-palette-custom'; -@import './es-shared/es-nested-collapsable'; - -// Animated icons. -@import './es-animated-icons.scss'; - :root { // Colors --es-admin-accent-color-default: #3858E9; @@ -427,4 +413,35 @@ body { } } +// Animated icons + +// Use the icon with the name written here and on a parent element add a class of 'es-has-animated-icon'. +// The animation will happen on hover, focus (focus-visible), +// or when an 'is-es-icon-animated' class is applied on the parent with the 'es-has-animated-icon' class. + +// icons.trashAlt +.es-has-animated-icon { + .es-animated-trash-alt-lid, + .es-animated-trash-alt-base { + transition: { + property: transform; + timing-function: var(--es-ease-out-cubic); + duration: 0.3s; + } + } + + &.is-es-icon-animated .es-animated-trash-alt-lid, + &:focus-visible .es-animated-trash-alt-lid, + &:hover .es-animated-trash-alt-lid { + transform: rotate(15deg) translate(1.125px, -1.75px); + } + + &.is-es-icon-animated .es-animated-trash-alt-base, + &:focus-visible .es-animated-trash-alt-base, + &:hover .es-animated-trash-alt-base { + transform: translate(0, -2.25px); + } +} + + // stylelint-enable number-max-precision, selector-max-specificity, declaration-no-important, max-nesting-depth diff --git a/styles/es-gutenberg-component-style-updates.scss b/styles/es-gutenberg-component-style-updates.scss deleted file mode 100644 index 827cbc266..000000000 --- a/styles/es-gutenberg-component-style-updates.scss +++ /dev/null @@ -1,193 +0,0 @@ -// stylelint-disable - -// Make Gutenberg ToggleControl toggle better match libs. -.components-form-toggle { - &__input { - @supports selector(:focus-visible) { - &:focus + .components-form-toggle__track { - box-shadow: none !important; - } - - &:focus:focus-visible + .components-form-toggle__track { - box-shadow: 0 0 0 0.275rem rgb(255 255 255 / 0.7), 0 0 0 0.25rem var(--wp-admin-theme-color) !important; // 3px - border-color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; - } - } - - @supports not selector(:focus-visible) { - &:focus + .components-form-toggle__track { - box-shadow: 0 0 0 0.275rem rgb(var(--es-admin-pure-white-values) / 0.7), 0 0 0 0.25rem var(--wp-admin-theme-color) !important; // 3px - border-color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; - } - } - } - - &__track { - background-color: rgb(var(--es-admin-cool-gray-500-values) / 0) !important; - border: 0.09375rem solid var(--es-admin-cool-gray-500) !important; // 1.5px - border-radius: var(--es-component-border-radius-full) !important; - - width: 2.21875rem !important; // 35.5px - height: 1.25rem !important; // 20px; - - transition: { - property: background-color, color, border-color, box-shadow !important; - timing-function: ease-out, ease-out, ease-out, var(--es-ease-out-back) !important; - duration: 0.3s !important; - } - } - - &__thumb { - width: 0.75rem !important; // 12px - height: 0.75rem !important; // 12px - - top: 0.25rem !important; // 5px - left: 0.25rem !important; // 5px - - background-color: var(--es-admin-cool-gray-600) !important; - - border: none !important; - - transition: { - property: background-color, transform !important; - timing-function: ease-out, var(--es-ease-out-back) !important; - duration: 0.3s, 0.25s !important; - } - } - - &:hover { - .components-form-toggle__track { - border-color: var(--es-admin-cool-gray-600) !important; - } - } - - &.is-checked { - .components-form-toggle__track { - background-color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; - border-color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; - } - - .components-form-toggle__thumb { - transform: translateX(0.96875rem) !important; // 15.5px - background-color: var(--es-admin-pure-white) !important; - } - } -} - -// Tweak NumberControl to better fit in. -.components-number-control:not(.es-number-picker .components-number-control) { - .components-input-control__input { - padding: 0 0.5rem !important; - font-size: 0.78125rem !important; - - &::placeholder { - color: var(--es-admin-cool-gray-400); - } - } - - .components-input-control__backdrop { - border-radius: var(--es-component-border-radius-md) !important; - border-color: var(--es-admin-cool-gray-400) !important; - - } - - &:hover { - .components-input-control__backdrop { - border-color: var(--es-admin-gray-500) !important; - } - } -} - -// Tweak default text input border radius to better fit in. -.components-text-control__input { - border-radius: var(--es-component-border-radius-md) !important; -} - -// Updated Placeholder component styles. -.components-placeholder { - -} -.components-placeholder { - &__label { - i { - margin-right: 0.4rem; - } - } - - &.is-large { - box-shadow: inset 0 0 0 1px var(--es-admin-components-placeholder-large-shadow, var(--es-admin-gray-250)); - border-radius: var(--es-component-border-radius-md); - min-height: 0; - - .components-placeholder__label { - svg { - height: 1.5rem; - width: 1.5rem; - } - } - - .components-placeholder__fieldset { - width: 100%; - } - } - - &.is-medium, - &.is-small { - padding: 1rem; - box-shadow: inset 0 0 0 1px var(--es-admin-components-placeholder-large-shadow, var(--es-admin-gray-250)); - min-height: 0 !important; - border-radius: var(--es-component-border-radius-md); - - .components-placeholder__label { - svg { - height: 1.25rem; - width: 1.25rem; - } - } - - .components-placeholder__fieldset { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 0.75rem; - } - - .block-editor-media-placeholder__upload-button { - margin-bottom: 0 !important; - } - } - - .es-placeholder-input-flex { - display: flex; - flex-wrap: nowrap; - gap: 0.5rem; - width: 100%; - - .components-input-control { - max-width: 19rem; - } - } -} - -// Nicer-looking tooltip. -.components-tooltip { - color: rgb(240 240 240); - background: rgb(4 8 12 / 0.65); - backdrop-filter: blur(1.5rem) brightness(101%) saturate(175%); - - padding: 0.25rem 0.5rem; - - box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 0.125rem 0.25rem rgb(0 0 0 / 0.25); - border-radius: 0.375rem; - - &:has(> :first-child) { - padding: 0.625rem; - - color: rgb(82 87 93); - background: rgb(248 250 252 / 0.6); - - box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0.125rem 0.5rem rgb(0 0 0 / 0.2); - } -} - -// stylelint-enable diff --git a/styles/es-gutenberg-editor-ui-enhancements.scss b/styles/es-gutenberg-editor-ui-enhancements.scss deleted file mode 100644 index 0ef302b80..000000000 --- a/styles/es-gutenberg-editor-ui-enhancements.scss +++ /dev/null @@ -1,159 +0,0 @@ -// stylelint-disable - -// Rounded corners in some transient UI pieces to make them look a bit nicer. -.components-popover__content { - border-radius: var(--es-component-border-radius-lg) !important; -} - -.block-editor-inserter__quick-inserter .block-editor-inserter__search { - border-top-left-radius: var(--es-component-border-radius-lg) !important; - border-top-right-radius: var(--es-component-border-radius-lg) !important; -} - -// Enlarge icon in component menu. -.components-menu-item__item .block-editor-block-icon { - height: 1.75rem !important; - width: 1.75rem !important; - border-radius: var(--es-component-border-radius-md); - aspect-ratio: 1; -} - -// Enlarge the icons in the toolbar a bit. -button[disabled] .block-editor-block-icon.has-colors, -.components-button.components-toolbar-button.block-editor-block-parent-selector__button.has-icon .block-editor-block-icon, -.block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon { - height: 1.75rem !important; - width: 1.75rem !important; - border-radius: var(--es-component-border-radius-md); - aspect-ratio: 1; -} - -.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon svg { - min-width: unset !important; -} - - -// Enlarge the icons in the Options panel a bit. -.block-editor-block-card .block-editor-block-icon { - height: 2.5rem !important; - min-height: 2.5rem !important; - max-height: 2.5rem !important; - width: 2.5rem !important; - min-width: 2.5rem !important; - max-width: 2.5rem !important; - border-radius: var(--es-component-border-radius-md); - flex-shrink: 0; - flex-grow: 1; -} - -// Align WP panels with our arrows. -.components-panel__body .components-panel__arrow { - margin-right: 0.25rem !important; - width: 24px; -} - -// Remove margin from placeholder. -.es-placeholder-no-label-margin .components-placeholder__label { - margin: 0; -} - -// Remove Gutenberg button icon spacing. -.es-button-no-icon-spacing > svg { - margin-right: 0 !important; -} - -// Tweak inserter block tiles style (a bit larger icon and a bit rounder backdrop). -.block-editor-block-types-list__item-icon { - border-radius: var(--es-component-border-radius-md); -} - -// Make Gutenberg button focus state only on :focus-visible (if supported). -@supports selector(:focus-visible) { - .components-button:focus:not(:disabled) { - box-shadow: none; - } - - .components-button:focus-visible:not(:disabled) { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - outline: 3px solid transparent; - } -} - -// Enhance Gutenberg default input control to make it match more with other inputs. -.components-text-control__input { - border-radius: 0.25rem !important; - height: 2.25rem !important; - padding: 0.5rem; -} - -// Round off the [+] button in-between the blocks a bit. -.block-editor-inserter__toggle { - border-radius: 0.325rem !important; -} - -// Round the snackbars. -.components-snackbar { - border-radius: 0.5rem !important; -} - -// Enlarge inserter block icons. -.block-editor-block-types-list__list-item .components-button.block-editor-block-types-list__item { - .block-editor-block-types-list__item-icon { - line-height: 0; - - span { - line-height: 0; - } - - .block-editor-block-icon { - svg { - height: 1.9rem !important; - width: 1.9rem !important; - - max-width: 1.9rem !important; - max-height: 1.9rem !important; - } - } - - } -} - -// Make top and side Gutenberg controls look a bit nicer and more consistent. -.edit-post-header, -.edit-post-post-status, -.edit-post-post-status ~ div { - .components-button:not(.edit-post-fullscreen-mode-close) { - border-radius: 0.275rem !important; - } - - .components-select-control, - .components-combobox-control__suggestions-container, - .components-checkbox-control__input, - .components-textarea-control__input, - .components-form-token-field__input-container { - border-radius: 0.25rem !important; - } - - .components-input-control__label, - .components-form-token-field__label { - text-transform: none !important; - font-weight: 400 !important; - font-size: 0.8125rem !important; - } - - .components-input-control__label { - margin-block-end: 0 !important; - } -} - -// Remove color from List view block icons and fix offset. -.edit-post-editor__list-view-container .block-editor-list-view-leaf .block-editor-block-icon { - color: currentColor !important; - background-color: transparent !important; - - > span { - line-height: 0 !important; - } -} - -// stylelint-enable diff --git a/styles/es-keyframes.scss b/styles/es-keyframes.scss deleted file mode 100644 index c35bcb13c..000000000 --- a/styles/es-keyframes.scss +++ /dev/null @@ -1,29 +0,0 @@ -@keyframes es-rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes es-dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -} - -// Gutenberg 'Animate' component 'slide-in' animation top/bottom direction polyfill. -@keyframes components-animate__slide-in-y-animation { - 100% { - transform: translateY(0); - } -} diff --git a/styles/es-shared/_es-nested-collapsable.scss b/styles/es-shared/_es-nested-collapsable.scss deleted file mode 100644 index 76606ec35..000000000 --- a/styles/es-shared/_es-nested-collapsable.scss +++ /dev/null @@ -1,114 +0,0 @@ -// stylelint-disable declaration-no-important, number-max-precision, selector-max-specificity - -@mixin es-nested-collapsable-shadow($size, $color, $bgColor: 'var(--es-admin-pure-white)') { - box-shadow: 0 0 0 calc(#{$size} - 1px) #{$bgColor}, 0 0 0 #{$size} #{$color}; -} - -.es-nested-collapsable { - $this: &; - - border-radius: 0.125rem; - - box-shadow: 0 0 0 0.05rem var(--es-admin-pure-white), 0 0 0 0.05rem var(--es-admin-pure-white); - - transition: { - property: border-radius, box-shadow; - timing-function: var(--es-ease-out-cubic); - duration: 0.3s; - } - - &.is-open { - @include es-nested-collapsable-shadow(0.4rem, var(--wp-admin-theme-color, var(--es-admin-accent-color-default))); - } - - &:has(#{$this}.is-open) { - border-radius: 0.175rem; - - @include es-nested-collapsable-shadow(0.7rem, var(--es-admin-cool-gray-100)); - - --wp-admin-theme-color: var(--es-admin-cool-gray-500); - - #{$this}.is-open { - // stylelint-disable-next-line custom-property-pattern - --wp-admin-theme-color: rgb(var(--wp-admin-theme-color--rgb, var(--es-admin-accent-color-default))); - - @include es-nested-collapsable-shadow(0.4rem, var(--wp-admin-theme-color, var(--es-admin-accent-color-default))); - } - } - - &:has(#{$this}.is-open #{$this}.is-open) { - border-radius: 0.25rem; - - @include es-nested-collapsable-shadow(0.75rem, var(--es-admin-cool-gray-100)); - - --wp-admin-theme-color: var(--es-admin-cool-gray-400); - - #{$this}.is-open { - --wp-admin-theme-color: var(--es-admin-cool-gray-500); - - @include es-nested-collapsable-shadow(0.55rem, var(--es-admin-cool-gray-200)); - - #{$this}.is-open { - // stylelint-disable-next-line custom-property-pattern - --wp-admin-theme-color: rgb(var(--wp-admin-theme-color--rgb, var(--es-admin-accent-color-default))); - - @include es-nested-collapsable-shadow(0.35rem, var(--wp-admin-theme-color, var(--es-admin-accent-color-default))); - } - } - } - - // Auto-indenting when when no toggle in chain of nested items is present. - > :first-child { - transition: { - property: padding-left; - timing-function: var(--es-ease-out-cubic); - duration: 0.3s; - } - } - - // If the element: - // 1) has a immediate sibling of the same class - // 2) doesn't have an .es-full-color-toggle inside the toggle div - // 3) has an element following it that has a .es-full-color-toggle and .es-has-animated-y-flip-icon inside the toggle div - &:has(+ #{$this}):not(:has(> div > .es-full-color-toggle)):has(~ #{$this} > div > .es-full-color-toggle):has(~ #{$this} > div > .es-has-animated-y-flip-icon), - // If the element: - // 1) has a immediate sibling of the same class - // 2) has an .es-full-color-toggle and .es-has-animated-y-flip-icon inside the toggle div - // and is followed by an element of the same class that doesn't have a .es-full-color-toggle inside the toggle div - &:has(+ #{$this}):has(> div > .es-full-color-toggle):has(> div > .es-has-animated-y-flip-icon) ~ #{$this}:not(:has(> div > .es-full-color-toggle)) { - &:not(:has(> .es-full-color-toggle)):not(.is-open) > :first-child { - padding-left: 2rem; - } - } - - // Full-color toggle, specific to the collapsable components. - .es-full-color-toggle { - .es-toggle-icon-thumb, - .es-toggle-icon-container { - --es-toggle-icon-thumb-stroke: var(--es-admin-pure-white); - --es-toggle-icon-thumb-fill: var(--es-admin-pure-white); - --es-toggle-icon-thumb-fill-opacity: 1; - --es-toggle-icon-container-fill: var(--es-admin-cool-gray-650); - --es-toggle-icon-container-fill-opacity: 1; - --es-toggle-icon-container-stroke: var(--es-admin-cool-gray-650); - } - - &.is-active { - .es-toggle-icon-thumb { - // This should always be white. - --es-toggle-icon-thumb-stroke: var(--es-admin-pure-white); - --es-toggle-icon-thumb-fill: var(--es-admin-pure-white); - --es-toggle-icon-thumb-fill-opacity: 1; - transform: translateX(0.5rem); - } - - .es-toggle-icon-container { - --es-toggle-icon-container-stroke: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)); - --es-toggle-icon-container-fill: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)); - --es-toggle-icon-container-fill-opacity: 1; - } - } - } -} - -// stylelint-enable declaration-no-important, number-max-precision, selector-max-specificity diff --git a/styles/index.scss b/styles/index.scss index 1dba42ef2..43c33c7ef 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,9 +1,3 @@ -// Config. -@import 'scss/colors'; - -// Config. -@import 'scss/core'; - // Functions all. @import 'scss/functions/all'; diff --git a/styles/override-editor.scss b/styles/override-editor.scss index af1033d85..2d1c53e8e 100644 --- a/styles/override-editor.scss +++ b/styles/override-editor.scss @@ -2,13 +2,6 @@ // stylelint-disable body { - .editor-styles-wrapper { - font-family: inherit; - line-height: inherit; - font-size: inherit; - color: inherit; - } - // Moving border around the block to the actual block line. .block-editor-block-list__layout { .#{global-settings(customBlocksName)} { @@ -51,69 +44,6 @@ body { z-index: 2 !important; } - // Fix for disabled button icon foregrounds and backgrounds. - button[disabled] .block-editor-block-icon.has-colors, - .components-button.components-toolbar-button.block-editor-block-parent-selector__button.has-icon - .block-editor-block-icon { - background-color: var(--es-admin-block-icon-background, transparent) !important; - color: var(--es-admin-block-icon-foreground, var(--es-admin-pure-black)) !important; - opacity: 1 !important; - aspect-ratio: 1; - line-height: 0; - } - - .components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors { - color: var(--es-admin-block-icon-foreground, var(--es-admin-pure-black)) !important; - } - - // Fix some toolbar icons not having the right styling. - button[disabled].components-button.components-toolbar__control.block-editor-block-switcher__no-switcher-icon.has-icon { - .block-editor-block-icon { - height: 1.75rem !important; - width: 1.75rem !important; - border-radius: var(--es-component-border-radius-md); - line-height: 0; - - svg { - width: 1.25rem; - height: 1.25rem; - transform: translateX(2px); - } - } - } - - button.components-button.components-toolbar__control.block-editor-block-parent-selector__button.has-icon { - .block-editor-block-icon { - height: 1.75rem !important; - width: 1.75rem !important; - border-radius: var(--es-component-border-radius-md); - background-color: var(--es-admin-block-icon-background, transparent) !important; - color: var(--es-admin-block-icon-foreground, var(--es-admin-gray-850)) !important; - line-height: 0; - - svg { - width: 1.25rem; - height: 1.25rem; - } - } - } - - // Make sure toolbar icon size matches regardless of icon source. - .block-editor-block-toolbar__slot { - .components-toolbar-group { - .components-toolbar-button.has-icon { - i { - line-height: 0; - } - - svg { - height: 1.4rem; - width: 1.4rem; - } - } - } - } - // Fix for scrollbar overflow. @supports (scrollbar-gutter: stable) { .interface-interface-skeleton__sidebar { @@ -126,51 +56,4 @@ body { overflow-x: hidden; } } - - // Fix disabled button showing hover state. - .components-button[disabled]:hover { - color: currentColor !important; - } - - // Gutenberg 'Animate' component 'slide-in' animation top/bottom direction polyfill. - .components-animate__slide-in.is-from-top { - animation: components-animate__slide-in-y-animation 0.1s cubic-bezier(0, 0, 0.2, 1); - animation-fill-mode: forwards; - - transform: translateY(+1rem); - } - - .components-animate__slide-in.is-from-bottom { - animation: components-animate__slide-in-y-animation 0.1s cubic-bezier(0, 0, 0.2, 1); - animation-fill-mode: forwards; - - transform: translateY(-1rem); - } - - @media (prefers-reduced-motion) { - .components-animate__slide-in.is-from-top, - .components-animate__slide-in.is-from-bottom { - animation-duration: 1ms; - } - } - - // Slightly widen the sidebar. - // Breakpoint is the exact one from Gutenberg. - @media (min-width: 782px) { - .interface-complementary-area { - width: 19rem; - } - } } - -// ES enhancements and Gutenberg component tweaks. -@import './es-gutenberg-editor-ui-enhancements.scss'; -@import './es-gutenberg-component-style-updates.scss'; - -// WP-version-specific fixes -@import './wp-version-specific/wp-6-3'; -@import './wp-version-specific/wp-6-4'; -@import './wp-version-specific/wp-6-5'; - -@import './es-utility-classes.scss'; -@import './es-component-styles.scss'; diff --git a/styles/sassdocs/main.css b/styles/sassdocs/main.css deleted file mode 100644 index d7039248c..000000000 --- a/styles/sassdocs/main.css +++ /dev/null @@ -1,365 +0,0 @@ -@import url('https://use.typekit.net/baz1roy.css'); - -:root { - --global-font-family: 'neue-haas-grotesk-text', 'Inter', system-ui, sans-serif; - --global-code-family: 'ibm-plex-mono', monospace; - --global-gutter: 1rem; - --global-colors-gray-100: #F5F9FF; - --global-colors-gray-200: #E4EBF5; - --global-colors-gray-300: #C4CEDE; - --global-colors-gray-400: #929EB2; - --global-colors-gray-500: #525E6C; - --global-colors-olive-30: #5A8772; - --global-colors-sand-30: #D9A866; - --global-colors-sand-70: #9E7956; - --global-colors-black: #111111; - --global-colors-white: #FFFFFF; - --global-colors-infinum: #D8262C; - --global-border-radius: 0.5rem; - --global-sidebar-width: 20rem; -} - -*, -*::after, -*::before { - box-sizing: border-box; -} - -body { - background-color: var(--global-colors-white); - color: var(--global-colors-black); - - margin: 0; - padding: 0; - - font-family: var(--global-font-family); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - scroll-behavior: smooth; -} - -@media (min-width: 992px) { - body { - display: grid; - grid-template-columns: 20rem 1fr; - grid-template-areas: 'sidebar content'; - column-gap: 2rem; - } -} - -a { - color: var(--global-colors-infinum); - text-decoration: none; -} - -a:hover, -.sidebar a:hover { - color: var(--global-colors-infinum); - transition-property: color; - transition-timing-function: ease-out; - transition-duration: 0.3s; -} - -.sidebar { - display: block; - - grid-area: sidebar; - - overflow-x: hidden; - padding: 2rem; - - background-color: var(--global-colors-gray-100); - border-right: 1px solid var(--global-colors-gray-200); - - height: 100vh; - - /* Falls back to 100vh if not supported. Ensures the height follows any dynamic browser chrome. */ - height: 100dvh; - - align-self: start; - - position: sticky; - top: 0; - - overscroll-behavior: contain; -} - -@media (max-width: 996px) { - .sidebar { - display: none; - } -} - -.sidebar__header, -.btn-toggle, -.sidebar__item--heading, -.header, -.main__heading, -.main__heading--secondary, -.footer { - display: none; -} - -.sidebar__item--sub-heading { - margin: 0; - padding: 0; - margin-bottom: 0.25rem; -} - -.sidebar__item--sub-heading a { - color: var(--global-colors-black); - font-size: 1.25rem; - font-weight: 500; - text-transform: capitalize; -} - -.sidebar .list-unstyled { - list-style: none; - margin: 0; - padding: 0; -} - -.sidebar .list-unstyled:not(:last-child) { - margin-bottom: 1.5rem; -} - -.sassdoc__item a { - padding: 0.25rem 0; - display: inline-block; - - color: var(--global-colors-black); - - line-height: 1.5; - font-size: 0.8rem; - font-family: var(--global-code-family); -} - -.main { - padding: 0 2rem 2rem; - scroll-behavior: smooth; -} - -.main__section, -.main__sub-section { - display: flex; - flex-direction: column; - gap: 2rem; -} - -@media (min-width: 992px) { - .main { - grid-area: content; - } - - .main__section { - gap: 8rem; - max-width: 60rem; - } - - .main__sub-section { - gap: 4rem; - } -} - -.item__heading { - font-size: 1.5rem; - line-height: 1.25; - font-family: var(--global-code-family); - color: var(--global-colors-black); - - margin: 0; - padding-block: 2rem 0.5rem; -} - -@media (min-width: 768px) { - .item__heading { - font-size: 1.75rem; - } -} - -.item__heading a { - color: var(--global-colors-black); - cursor: pointer; -} - -.item__sub-heading, -#output, -#map { - font-weight: 500; - line-height: 1.2; - font-size: 1.25rem; - font-family: var(--global-font-family); - - color: var(--global-colors-elephant); - - margin-block: 1.5rem 0.5rem; -} - -.item__example { - margin-bottom: 20px; -} - -pre, -code { - color: var(--global-colors-black); - font-family: var(--global-code-family); - font-size: 0.875rem; - line-height: 1.5; -} - -pre { - color: var(--global-colors-black); - background-color: var(--global-colors-gray-100); - overflow: auto; - margin: 0; - border-radius: var(--global-border-radius); - padding: 25px; - margin-bottom: 15px; -} - -code:not(pre code) { - font-weight: 500; -} - -.token.selector, -.token.keyword { - color: var(--global-colors-olive-30); -} - -.token.function { - color: var(--global-colors-sand-70); -} - -.token.variable { - color: var(--global-colors-sand-30); -} - -.token.comment { - color: var(--global-colors-gray-500); -} - -pre code { - padding: 0; -} - -p { - line-height: 1.5; - margin-block: 0; - font-size: 0.875rem; -} - -code { - padding: 2px 5px; -} - -.main .list-unstyled { - margin: 0; - padding: 0; -} - -.main .list-unstyled li { - margin-bottom: 10px; -} - -.list-unstyled { - list-style: none; -} - -table { - width: 100%; - font-size: 1rem; -} - -thead { - display: none; -} - -@media (min-width: 1200px) { - thead { - display: table-row-group; - } -} - -th, -td { - text-align: left; - padding: 5px; - font-weight: normal; - display: block; -} - -@media (min-width: 1200px) { - th, - td { - display: table-cell; - border-bottom: 1px solid var(--global-colors-gray-200); - } -} - -th { - font-size: 0.875rem; - font-weight: 600; -} - -@media (min-width: 1200px) { - th { - padding-top: 5px; - } -} - -th::before, -td::before { - padding-right: 10px; -} - -th:nth-child(1)::before { - content: 'Name:'; -} - -td:nth-child(2)::before { - content: 'Desc:'; -} - -td:nth-child(3)::before { - content: 'Type:'; -} - -td:nth-child(4)::before { - content: 'Default:'; -} - -td:last-child { - border-bottom: 1px solid var(--global-colors-gray-200); - padding-bottom: 15px; -} - -@media (min-width: 1200px) { - th::before, - td::before { - display: none; - } -} - -@media (min-width: 1200px) { - td:last-child { - padding-bottom: 5px; - } -} - -@media (min-width: 1200px) { - th code, - td code { - white-space: nowrap; - } -} - -table p, -table code { - margin: 0; - font-size: 0.875rem; -} - -.visually-hidden { - display: none; -} diff --git a/styles/scss/_colors.scss b/styles/scss/_colors.scss deleted file mode 100644 index d01cb5266..000000000 --- a/styles/scss/_colors.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Define Base Text Color; -$base-text-color: #333333 !default; - -// Define Base Background Color. -$base-background-color: #FFFFFF !default; - -// Define Base Black Color. -$base-black-color: #000000 !default; - -// Define Base White Color. -$base-white-color: #FFFFFF !default; - -// Define Base Primary Color. -$base-primary-color: #C3151B !default; - -// Define Base Light Color. -$base-light-color: #CCCCCC !default; diff --git a/styles/scss/_core.scss b/styles/scss/_core.scss deleted file mode 100644 index 4ff17ab83..000000000 --- a/styles/scss/_core.scss +++ /dev/null @@ -1,17 +0,0 @@ -// Define Base Columns Number. -$base-col-number: 12 !default; - -// Define Base Gutter Size. -$base-gutter-size: 25px !default; - -// Define Base Font Size. -$base-font-size: 18px !default; - -// Define Base Font Family. -$base-font-family: 'Open Sans', Arial, sans-serif !default; - -// Default Container Width. -$base-container-size: 1330px !default; - -// Default header height - used for setting both header & logo sizes. -$base-header-height: 50px; diff --git a/styles/wp-version-specific/_wp-6-3.scss b/styles/wp-version-specific/_wp-6-3.scss deleted file mode 100644 index 9878b2fb3..000000000 --- a/styles/wp-version-specific/_wp-6-3.scss +++ /dev/null @@ -1,116 +0,0 @@ -// stylelint-disable - -// WP 6.3 fixes -body.branch-6-3 { - // Fix label casing. - .components-base-control__label { - text-transform: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - } - - // Fix label styling and stylize SVGs - .components-base-control__label, - .components-input-control__label { - display: flex; - align-items: center; - gap: var(--es-gutenberg-base-control-label-gap, 0.5rem); - - margin: var(--es-gutenberg-base-control-label-margin, 0 0 0.5rem); - width: 100%; - - svg { - height: 1.5rem; - width: 1.5rem; - margin: 0; - - flex-shrink: 0; - - &:not(button svg) { - color: var(--es-admin-components-base-control-svg, var(--es-admin-cool-gray-500)); - } - } - - button { - margin-left: auto !important; - } - } - - // Fix ToggleControl flex. - .components-toggle-control { - .components-h-stack { - flex-direction: row-reverse !important; - align-items: center !important; - justify-content: space-between !important; - } - } - - // Fix block icons being misaligned. - .block-editor-block-icon.has-colors svg, - .components-button.components-toolbar-button.block-editor-block-parent-selector__button.has-icon .block-editor-block-icon svg, - .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon svg { - width: 1.25rem !important; - height: 1.25rem !important; - } - - // Improve block inserter display and positioning. - .components-dropdown.block-editor-inserter { - display: flex !important; - align-items: center; - justify-self: center; - } - - .block-editor-block-list__block .block-list-appender { - position: static !important; - margin: 0.75rem 0.25rem 0 !important; - - display: flex !important; - justify-content: center !important; - align-items: center !important; - - max-width: 100% !important; - - pointer-events: none !important; - - > * { - pointer-events: all; - } - } - - // Fix NumberPicker margin. - .components-base-control.components-input-control.components-number-control { - margin-bottom: 0 !important; - } - - // Fix inserter block icons on hover. - .components-button.block-editor-block-types-list__item:not(:disabled):hover svg { - color:currentColor !important; - } - - // Improve sidebar block icon. - .block-editor-inserter__preview-container .block-editor-block-card, - .block-editor-block-inspector .block-editor-block-card { - span { - line-height: 0; - } - - svg { - width: 1.875rem !important; - height: 1.875rem !important; - max-width: 1.875rem; - max-height: 1.875rem; - } - } - - // Fix buttons with icon & text having extra padding. - .components-button.has-icon.has-text { - padding-right: 6px; // Default WP value. - } - - // Add some line height to the post title. - .wp-block-post-title.editor-post-title.editor-post-title__input { - line-height: 1.1 !important; - } -} - -// stylelint-enable diff --git a/styles/wp-version-specific/_wp-6-4.scss b/styles/wp-version-specific/_wp-6-4.scss deleted file mode 100644 index 72847eccc..000000000 --- a/styles/wp-version-specific/_wp-6-4.scss +++ /dev/null @@ -1,117 +0,0 @@ -// stylelint-disable - -// WP 6.4 fixes -body.branch-6-4, -body.sb-main-padded { - // Fix label casing. - .components-base-control__label { - text-transform: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - } - - // Fix label styling and stylize SVGs - .components-base-control__label, - .components-input-control__label { - display: flex; - align-items: center; - gap: var(--es-gutenberg-base-control-label-gap, 0.5rem); - - margin: var(--es-gutenberg-base-control-label-margin, 0 0 0.5rem); - width: 100%; - - svg { - height: 1.5rem; - width: 1.5rem; - margin: 0; - - flex-shrink: 0; - - &:not(button svg) { - color: var(--es-admin-components-base-control-svg, var(--es-admin-cool-gray-500)); - } - } - - button { - margin-left: auto !important; - } - } - - // Fix ToggleControl flex. - .components-toggle-control { - .components-h-stack { - flex-direction: row-reverse !important; - align-items: center !important; - justify-content: space-between !important; - } - } - - // Fix block icons being misaligned. - .block-editor-block-icon.has-colors svg, - .components-button.components-toolbar-button.block-editor-block-parent-selector__button.has-icon .block-editor-block-icon svg, - .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon svg { - width: 1.25rem !important; - height: 1.25rem !important; - } - - // Improve block inserter display and positioning. - .components-dropdown.block-editor-inserter { - display: flex !important; - align-items: center; - justify-self: center; - } - - .block-editor-block-list__block .block-list-appender { - position: static !important; - margin: 0.75rem 0.25rem 0 !important; - - display: flex !important; - justify-content: center !important; - align-items: center !important; - - max-width: 100% !important; - - pointer-events: none !important; - - > * { - pointer-events: all; - } - } - - // Fix NumberPicker margin. - .components-base-control.components-input-control.components-number-control { - margin-bottom: 0 !important; - } - - // Fix inserter block icons on hover. - .components-button.block-editor-block-types-list__item:not(:disabled):hover svg { - color:currentColor !important; - } - - // Improve sidebar block icon. - .block-editor-inserter__preview-container .block-editor-block-card, - .block-editor-block-inspector .block-editor-block-card { - span { - line-height: 0; - } - - svg { - width: 1.875rem !important; - height: 1.875rem !important; - max-width: 1.875rem; - max-height: 1.875rem; - } - } - - // Fix buttons with icon & text having extra padding. - .components-button.has-icon.has-text { - padding-right: 6px; // Default WP value. - } - - // Add some line height to the post title. - .wp-block-post-title.editor-post-title.editor-post-title__input { - line-height: 1.1 !important; - } -} - -// stylelint-enable diff --git a/styles/wp-version-specific/_wp-6-5.scss b/styles/wp-version-specific/_wp-6-5.scss deleted file mode 100644 index cb140637a..000000000 --- a/styles/wp-version-specific/_wp-6-5.scss +++ /dev/null @@ -1,134 +0,0 @@ -// stylelint-disable - -// WP 6.5 fixes -body.branch-6-5, -body.sb-main-padded { - // Fix label casing. - .components-base-control__label { - text-transform: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - } - - // Fix label styling and stylize SVGs - .components-base-control__label, - .components-input-control__label { - display: flex; - align-items: center; - gap: var(--es-gutenberg-base-control-label-gap, 0.5rem); - - margin: var(--es-gutenberg-base-control-label-margin, 0 0 0.5rem); - width: 100%; - - svg { - height: 1.5rem; - width: 1.5rem; - margin: 0; - - flex-shrink: 0; - - &:not(button svg) { - color: var(--es-admin-components-base-control-svg, var(--es-admin-cool-gray-500)); - } - } - - button { - margin-left: auto !important; - } - } - - // Fix ToggleControl flex. - .components-toggle-control { - .components-h-stack { - flex-direction: row-reverse !important; - align-items: center !important; - justify-content: space-between !important; - } - } - - // Fix block icons being misaligned. - .block-editor-block-icon.has-colors svg, - .components-button.components-toolbar-button.block-editor-block-parent-selector__button.has-icon .block-editor-block-icon svg, - .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon svg { - width: 1.25rem !important; - height: 1.25rem !important; - } - - // Improve block inserter display and positioning. - .components-dropdown.block-editor-inserter { - display: flex !important; - align-items: center; - justify-self: center; - } - - .block-editor-block-list__block .block-list-appender { - position: static !important; - margin: 0.75rem 0.25rem 0 !important; - - display: flex !important; - justify-content: center !important; - align-items: center !important; - - max-width: 100% !important; - - pointer-events: none !important; - - > * { - pointer-events: all; - } - } - - // Fix NumberPicker margin. - .components-base-control.components-input-control.components-number-control { - margin-bottom: 0 !important; - } - - // Fix inserter block icons on hover. - .components-button.block-editor-block-types-list__item:not(:disabled):hover svg { - color:currentColor !important; - } - - // Improve sidebar block icon. - .block-editor-inserter__preview-container .block-editor-block-card, - .block-editor-block-inspector .block-editor-block-card { - align-items: center; - - &__content { - display: flex; - flex-direction: column; - gap: 0.25rem; - } - - &__title { - padding: 0 !important; - } - - &__description { - margin-top: 0 !important; - } - - // Align icon properly. - .block-editor-block-icon > span { - line-height: 0; - } - - svg { - width: 1.875rem !important; - height: 1.875rem !important; - max-width: 1.875rem; - max-height: 1.875rem; - } - } - - // Fix buttons with icon & text having extra padding. - .components-button.has-icon.has-text { - padding-right: 6px; // Default WP value. - } - - // Add some line height to the post title. - .wp-block-post-title.editor-post-title.editor-post-title__input { - line-height: 1.1 !important; - } -} - -// stylelint-enable From 362df6809e455f4ace59fcd52e9805d1e21792f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 15:43:23 +0200 Subject: [PATCH 10/74] remove icon exports --- scripts/editor/index.js | 6 ------ scripts/index.js | 6 ------ 2 files changed, 12 deletions(-) diff --git a/scripts/editor/index.js b/scripts/editor/index.js index 081bafc41..23eb6e1aa 100644 --- a/scripts/editor/index.js +++ b/scripts/editor/index.js @@ -1,11 +1,5 @@ // All exports are sorted in alphabetical order. -export { - icons, - illustrations, - blockIcons, - BlockIcon -} from './icons/icons'; export { getActions } from './actions'; export { overrideInnerBlockAttributes, diff --git a/scripts/index.js b/scripts/index.js index ac57251bc..d7f86753a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -94,12 +94,6 @@ export { } from './components/deprecations'; // Editor -export { - icons, - illustrations, - blockIcons, - BlockIcon -} from './editor/icons/icons'; export { getActions } from './editor/actions'; export { overrideInnerBlockAttributes, From 70e6a69a41da3b098ea5666e355c5ebff4975ee8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 17 Jul 2024 15:48:18 +0200 Subject: [PATCH 11/74] remove unneeded scss import --- styles/index.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/styles/index.scss b/styles/index.scss index 43c33c7ef..953b1ba6f 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -1,9 +1,6 @@ // Functions all. @import 'scss/functions/all'; -// Keyframes all. -@import 'scss/keyframes/all'; - // Placeholders all. @import 'scss/placeholders/all'; From 351ffe30b46f16add48644126368c4c16e01b888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 09:42:03 +0200 Subject: [PATCH 12/74] remove deprecated class --- styles/es-utility-classes.scss | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/styles/es-utility-classes.scss b/styles/es-utility-classes.scss index 98211c075..497c12bd5 100644 --- a/styles/es-utility-classes.scss +++ b/styles/es-utility-classes.scss @@ -1866,23 +1866,6 @@ $es-utility-props: ( flex-wrap: wrap-reverse; } -// New style for default Gutenberg buttons pressed state. -.es-has-v2-gutenberg-button-active-state-inside > .components-button, -.es-has-v2-gutenberg-button-active-state { - @include es-v2-gutenberg-button-active-state; -} - -.es-has-v2-gutenberg-button-inside > .components-button, -.es-is-v2-gutenberg-button { - @include es-v2-gutenberg-button-active-state(true); -} - -.es-has-v2-gutenberg-input-matched-button-inside > .components-button, -.es-is-v2-gutenberg-input-matched-button { - @include es-v2-gutenberg-button-active-state(matchInput); - border-radius: var(--es-component-border-radius-md) !important; -} - // Button group. .es-button-group { display: flex; From 59422cb96c382867032320ccb9e89968a5bcc08d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 10:03:22 +0200 Subject: [PATCH 13/74] update version (temp) --- package.json | 49 ++++++++++++++++--------------------------------- 1 file changed, 16 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 68c8e2b98..4d9d07729 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@eightshift/frontend-libs", - "version": "12.1.5", + "version": "12.99.0", "description": "A collection of useful frontend utility modules. powered by Eightshift", "author": { "name": "Eightshift team", @@ -36,68 +36,51 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", + "@eightshift/ui-components": "^1.2.2", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", - "@swc/core": "^1.5.25", - "@uidotdev/usehooks": "^2.4.1", - "@wordpress/api-fetch": "^6.55.0", - "@wordpress/block-editor": "^12.26.0", + "@swc/core": "^1.6.13", + "@wordpress/api-fetch": "^7.3.0", + "@wordpress/block-editor": "^13.3.0", "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0", - "@wordpress/dom-ready": "^4.0.0", + "@wordpress/dom-ready": "^4.3.0", "autoprefixer": "^10.4.19", - "babel-loader": "^9.1.3", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.37.1", "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", - "eslint": "^9.6.0", + "eslint": "^9.7.0", "file-loader": "^6.2.0", - "framer-motion": "^11.2.10", "globals": "^15.8.0", "husky": "^9.0.11", "import-glob": "^1.5.0", - "just-camel-case": "^6.2.0", - "just-debounce-it": "^3.2.0", - "just-has": "^2.3.0", - "just-is-empty": "^3.4.1", - "just-kebab-case": "^4.2.0", - "just-throttle": "^4.2.0", "media-blender": "^2.1.0", "mini-css-extract-plugin": "^2.9.0", - "postcss": "^8.4.38", + "postcss": "^8.4.39", "postcss-loader": "^8.1.1", "postcss-scss": "^4.0.9", "promisify-child-process": "^4.1.2", "raw-loader": "^4.0.2", - "rc-slider": "^10.6.2", - "rc-tooltip": "^6.2.0", - "react-colorful": "^5.6.1", - "react-gcolor-picker": "^1.3.3", - "react-select": "^5.8.0", "regenerator-runtime": "^0.14.1", - "sass": "^1.77.4", + "sass": "^1.77.8", "sass-loader": "^14.2.1", "style-loader": "^4.0.0", - "stylelint": "^16.6.1", - "stylelint-config-standard": "^36.0.0", + "stylelint": "^16.7.0", + "stylelint-config-standard": "^36.0.1", "stylelint-config-standard-scss": "^13.1.0", "swc-loader": "^0.2.6", "terser-webpack-plugin": "^5.3.10", - "webpack": "^5.91.0", + "webpack": "^5.93.0", "webpack-cli": "^5.1.4", "webpack-manifest-plugin": "^5.0.0", - "webpack-merge": "^5.10.0" + "webpack-merge": "^6.0.1" }, "devDependencies": { - "chalk": "^5.3.0", - "gh-pages": "^6.1.1", - "lint-staged": "^15.2.5", + "lint-staged": "^15.2.7", "micromodal": "^0.4.10", "ol": "^9.2.4", - "ol-mapbox-style": "^12.3.3", - "react-test-renderer": "^18.3.1", - "replace-in-file": "^7.2.0", - "swiper": "^11.1.4" + "ol-mapbox-style": "^12.3.4", + "swiper": "^11.1.5" }, "sideEffects": false, "lint-staged": { From f074b237079eaef895a4bd6f5c36edddeb488d86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:00:11 +0200 Subject: [PATCH 14/74] temporarily gitignore blocks --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 595148829..1757c2e11 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,5 @@ bun.lockb # Tests /coverage + +/blocks From 1f158b8195ca675a295c9c22685ffc414126198f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:17:01 +0200 Subject: [PATCH 15/74] replace icons and classnames with ES UIC versions --- .../advanced-color-picker.js | 6 ++++-- .../block-inserter/block-inserter.js | 6 +++--- scripts/components/collapsable/collapsable.js | 12 +++++++----- .../color-palette-custom.js | 10 +++++----- .../color-picker-component.js | 8 +++++--- .../custom-select-default-components.js | 5 +++-- .../custom-slider/custom-range-slider.js | 6 +++--- .../responsive-number-picker.js | 3 ++- .../responsive-slider/responsive-slider.js | 7 ++++--- .../responsive-toggle-button.js | 8 ++++---- .../server-side-render/server-side-render.js | 2 +- .../toolbar-option-picker.js | 2 +- scripts/components/use-toggle/use-toggle.js | 18 ++++++++++-------- .../width-offset-range-slider.js | 3 ++- scripts/editor/registration.js | 2 +- 15 files changed, 55 insertions(+), 43 deletions(-) diff --git a/scripts/components/advanced-color-picker/advanced-color-picker.js b/scripts/components/advanced-color-picker/advanced-color-picker.js index f8a2204f3..66c253543 100644 --- a/scripts/components/advanced-color-picker/advanced-color-picker.js +++ b/scripts/components/advanced-color-picker/advanced-color-picker.js @@ -1,9 +1,11 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { ColorPalette, icons, OptionSelector, ColorSwatch, Control, PopoverWithTrigger, TileButton, classnames } from '../../../scripts'; +import { ColorPalette, OptionSelector, ColorSwatch, Control, PopoverWithTrigger, TileButton } from '../../../scripts'; +import { icons } from '@eightshift/ui-components/icons'; import { HexColorPicker, HexColorInput } from 'react-colorful'; import ReactGPicker from 'react-gcolor-picker'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A flexible color picker that allows choice between project colors, custom solid colors or gradients. @@ -141,7 +143,7 @@ export const AdvancedColorPicker = (props) => { /> -
diff --git a/scripts/components/block-inserter/block-inserter.js b/scripts/components/block-inserter/block-inserter.js index 052bcddff..ee64050ce 100644 --- a/scripts/components/block-inserter/block-inserter.js +++ b/scripts/components/block-inserter/block-inserter.js @@ -2,8 +2,8 @@ import React from 'react'; import { __, sprintf } from '@wordpress/i18n'; import { Inserter } from '@wordpress/block-editor'; import { Button } from '@wordpress/components'; -import { icons } from '../../editor'; -import { classnames } from '../../helpers'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * @since 8.0.0 @@ -54,7 +54,7 @@ export const BlockInserter = (props) => { disabled={disabled} label={!hasLabel && labelText} icon={icons.add} - className={classnames( + className={clsx( // eslint-disable-next-line max-len 'es-slight-button-border-cool-gray-400 es-hover-slight-button-border-admin-accent es-active-slight-button-border-admin-accent es-focus-slight-button-border-admin-accent', 'es-nested-m-0! es-gap-1.25! es-bg-pure-white! es-mx-auto es-text-3.25! es-color-cool-gray-650 es-rounded-1.5! es-flex-shrink-0', diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index 8bd131cf7..7bfe9162b 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -1,7 +1,9 @@ import React, { useState } from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { icons, AnimatedContentVisibility, Control, classnames } from '@eightshift/frontend-libs/scripts'; +import { AnimatedContentVisibility, Control } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A collapsable container for options. @@ -48,11 +50,11 @@ export const Collapsable = ({ subtitle={subtitle} noBottomSpacing={!isOpen && noBottomSpacing} reducedBottomSpacing={!isOpen && reducedBottomSpacing} - additionalClasses={classnames('es-nested-collapsable', isOpen && 'is-open', additionalClasses)} - additionalLabelClasses={classnames(noBottomSpacing && !isOpen && 'es-mb-0!')} + additionalClasses={clsx('es-nested-collapsable', isOpen && 'is-open', additionalClasses)} + additionalLabelClasses={clsx(noBottomSpacing && !isOpen && 'es-mb-0!')} actions={
-
@@ -61,7 +63,7 @@ export const Collapsable = ({
-
+
{ return ( {React.cloneElement(icons.dropdownCaretAlt, { - className: classnames('es-animated-y-flip-icon -es-mr-1', props.selectProps.menuIsOpen && 'is-active'), + className: clsx('es-animated-y-flip-icon -es-mr-1', props.selectProps.menuIsOpen && 'is-active'), })} ); diff --git a/scripts/components/custom-slider/custom-range-slider.js b/scripts/components/custom-slider/custom-range-slider.js index 776a83edf..ea31d959d 100644 --- a/scripts/components/custom-slider/custom-range-slider.js +++ b/scripts/components/custom-slider/custom-range-slider.js @@ -2,13 +2,13 @@ import React, { useRef, useLayoutEffect, useState } from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { Control } from '../base-control/base-control'; -import { classnames } from '../../helpers'; import { renderHandle } from './tooltip-handle'; import { generateMarkers, styleProps } from './shared'; -import { icons } from '../../editor/icons/icons'; +import { icons } from '@eightshift/ui-components/icons'; import { AnimatedContentVisibility } from '../animated-content-visibility/animated-content-visibility'; import Slider from 'rc-slider'; import { NumberPicker } from '../number-picker/number-picker'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A modern and customizable custom range slider. @@ -180,7 +180,7 @@ export const RangeSlider = (props) => {
} > -
+
{leftAddition}
diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index b4739bcef..7bcb9ac52 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Responsive, icons, NumberPicker } from '@eightshift/frontend-libs/scripts'; +import { Responsive, NumberPicker } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { classnames } from '../../helpers'; diff --git a/scripts/components/responsive-slider/responsive-slider.js b/scripts/components/responsive-slider/responsive-slider.js index 9665afd4f..221a4795a 100644 --- a/scripts/components/responsive-slider/responsive-slider.js +++ b/scripts/components/responsive-slider/responsive-slider.js @@ -1,8 +1,9 @@ import React from 'react'; -import { Responsive, icons, Slider } from '@eightshift/frontend-libs/scripts'; +import { Responsive, Slider } from '@eightshift/frontend-libs/scripts'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { classnames } from '../../helpers'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A `Slider` that allows changing values between breakpoints. @@ -152,7 +153,7 @@ export const ResponsiveSlider = (props) => { }); }} disabled={parsedValue === resetButton || isInherited} - className={classnames( + className={clsx( // eslint-disable-next-line max-len 'es-button-square-32 es-button-icon-24 es-slight-button-border-cool-gray-400 es-hover-slight-button-border-cool-gray-500 es-rounded-1! es-flex-shrink-0!', (parsedValue === resetButton || isInherited) && 'es-pointer-events-none es-nested-color-cool-gray-400!' diff --git a/scripts/components/responsive-toggle-button/responsive-toggle-button.js b/scripts/components/responsive-toggle-button/responsive-toggle-button.js index f685ed2ce..606119077 100644 --- a/scripts/components/responsive-toggle-button/responsive-toggle-button.js +++ b/scripts/components/responsive-toggle-button/responsive-toggle-button.js @@ -1,8 +1,8 @@ import React from 'react'; import { Responsive } from '@eightshift/frontend-libs/scripts'; import { Button } from '@wordpress/components'; -import { classnames } from '../../helpers'; -import { icons } from '../../editor'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A simple toggle button that allows changing values between breakpoints. @@ -119,10 +119,10 @@ export const ResponsiveToggleButton = (props) => { }); }} icon={buttonIcon ?? React.cloneElement(icons.toggleOff, { - className: classnames('es-animated-toggle-icon', isActive && 'is-checked') + className: clsx('es-animated-toggle-icon', isActive && 'is-checked') })} isPressed={buttonToggleEffect && isActive} - className={classnames( + className={clsx( 'es-button-square-32 es-rounded-1! es-h-8! es-px-2!', // eslint-disable-next-line max-len buttonToggleEffect ? 'es-is-v2-gutenberg-button es-button-icon-24' : 'es-has-v2-gutenberg-button-active-state es-button-icon-30', diff --git a/scripts/components/server-side-render/server-side-render.js b/scripts/components/server-side-render/server-side-render.js index 702759bed..036156ad6 100644 --- a/scripts/components/server-side-render/server-side-render.js +++ b/scripts/components/server-side-render/server-side-render.js @@ -4,7 +4,7 @@ * External dependencies */ import React from 'react'; -import { icons } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; /** * WordPress dependencies diff --git a/scripts/components/toolbar-option-picker/toolbar-option-picker.js b/scripts/components/toolbar-option-picker/toolbar-option-picker.js index e75e4676c..f3e65a0ec 100644 --- a/scripts/components/toolbar-option-picker/toolbar-option-picker.js +++ b/scripts/components/toolbar-option-picker/toolbar-option-picker.js @@ -1,7 +1,7 @@ import React from 'react'; import { DropdownMenu, ToolbarGroup } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { icons } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; /** * A flexible picker of mutually exclusive options. diff --git a/scripts/components/use-toggle/use-toggle.js b/scripts/components/use-toggle/use-toggle.js index 388fd2f9a..67357447a 100644 --- a/scripts/components/use-toggle/use-toggle.js +++ b/scripts/components/use-toggle/use-toggle.js @@ -1,7 +1,9 @@ import React, { useState } from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { icons, checkAttr, getAttrKey, classnames, AnimatedContentVisibility, Control } from '@eightshift/frontend-libs/scripts'; +import { checkAttr, getAttrKey, AnimatedContentVisibility, Control } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; export const generateUseToggleConfig = (attributes, manifest, attributeName) => { const { @@ -101,12 +103,12 @@ export const UseToggle = ({ return ( setIsOpen(!isOpen)} - className={classnames( + className={clsx( 'es-transition-colors es-button-square-28 es-button-icon-24 es-rounded-1.5 es-has-animated-y-flip-icon', isOpen && 'is-active es-nested-color-pure-white es-bg-admin-accent' )} @@ -130,8 +132,8 @@ export const UseToggle = ({ return ( setIsOpen(!isOpen)} - className={classnames( + className={clsx( 'es-transition-colors es-button-square-28 es-button-icon-24 es-rounded-1.5 es-has-animated-y-flip-icon', isOpen && 'is-active es-nested-color-pure-white es-bg-admin-accent' )} diff --git a/scripts/components/width-offset-range-slider/width-offset-range-slider.js b/scripts/components/width-offset-range-slider/width-offset-range-slider.js index 705730557..49219911c 100644 --- a/scripts/components/width-offset-range-slider/width-offset-range-slider.js +++ b/scripts/components/width-offset-range-slider/width-offset-range-slider.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Responsive, IconLabel, icons } from '@eightshift/frontend-libs/scripts'; +import { Responsive, IconLabel } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { ColumnConfigSlider } from '../custom-slider/column-config-slider'; diff --git a/scripts/editor/registration.js b/scripts/editor/registration.js index 8ee5c85b2..724d5d8a0 100644 --- a/scripts/editor/registration.js +++ b/scripts/editor/registration.js @@ -6,7 +6,7 @@ import { dispatch, select } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; import { createElement } from '@wordpress/element'; import { getUnique } from './css-variables'; -import { blockIcons } from './icons/icons'; +import { blockIcons } from '@eightshift/ui-components/icons'; import { STORE_NAME, setStoreGlobalWindow, setStore, setConfigFlags } from './store'; import { camelCase, kebabCase, lowerFirst, upperFirst } from '../helpers'; /** From f6819d52d258475354f4b0448d0322ce75e87d36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:20:10 +0200 Subject: [PATCH 16/74] replace classnames in selector helper --- scripts/editor/selectors.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/editor/selectors.js b/scripts/editor/selectors.js index 553459bf3..2e1888ffa 100644 --- a/scripts/editor/selectors.js +++ b/scripts/editor/selectors.js @@ -1,4 +1,4 @@ -import { classnames } from '../helpers/classnames'; +import { clsx } from "@eightshift/ui-components/utilities"; /** * Returns BEM selector for html class and check if Condition part is set. @@ -92,7 +92,7 @@ export const responsiveSelectors = (items, selector, parent, useModifier = true) } } - return classnames(output); + return clsx(output); }; /** From 55833325dde59bb9cd6e962996283a3dd680d314 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:29:45 +0200 Subject: [PATCH 17/74] update helpers imports --- scripts/editor/attributes.js | 2 +- scripts/editor/css-variables.js | 2 +- scripts/editor/fetch.js | 2 +- scripts/editor/options.js | 2 +- scripts/editor/registration.js | 2 +- scripts/plugins/yoast-seo.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/scripts/editor/attributes.js b/scripts/editor/attributes.js index d3424f472..425dd8339 100644 --- a/scripts/editor/attributes.js +++ b/scripts/editor/attributes.js @@ -1,4 +1,4 @@ -import { camelCase, has, isEmpty, lowerFirst, upperFirst } from '../helpers'; +import { camelCase, has, isEmpty, lowerFirst, upperFirst } from '@eightshift/ui-components/utilities'; /** * Sets attributes on all `innerBlocks`. This value will be stored in the Block editor store and set to a block. diff --git a/scripts/editor/css-variables.js b/scripts/editor/css-variables.js index 17dd10fbb..cfa0e475a 100644 --- a/scripts/editor/css-variables.js +++ b/scripts/editor/css-variables.js @@ -2,7 +2,7 @@ import React from 'react'; import { subscribe, select, dispatch } from '@wordpress/data'; import { getAttrKey } from './attributes'; import { STORE_NAME } from './store'; -import { debounce, isEmpty, isObject, isPlainObject, kebabCase } from '../helpers'; +import { debounce, isEmpty, isObject, isPlainObject, kebabCase } from '@eightshift/ui-components/utilities'; /** * Get Global manifest.json and return global variables as CSS variables. diff --git a/scripts/editor/fetch.js b/scripts/editor/fetch.js index 6c757448b..da620ef11 100644 --- a/scripts/editor/fetch.js +++ b/scripts/editor/fetch.js @@ -1,4 +1,4 @@ -import { unescapeHTML } from '../helpers/text-helpers'; +import { unescapeHTML } from '@eightshift/ui-components/utilities'; import apiFetch from '@wordpress/api-fetch'; /** diff --git a/scripts/editor/options.js b/scripts/editor/options.js index 3417818ba..1d67541d9 100644 --- a/scripts/editor/options.js +++ b/scripts/editor/options.js @@ -1,6 +1,6 @@ import { getPaletteColors } from './colors'; import { getAttrKey } from './attributes'; -import { lowerFirst, camelCase } from '../helpers'; +import { lowerFirst, camelCase } from '@eightshift/ui-components/utilities'; /** * Provides the ability to override component options from the parent block/component. diff --git a/scripts/editor/registration.js b/scripts/editor/registration.js index 724d5d8a0..10b69c7a5 100644 --- a/scripts/editor/registration.js +++ b/scripts/editor/registration.js @@ -8,7 +8,7 @@ import { createElement } from '@wordpress/element'; import { getUnique } from './css-variables'; import { blockIcons } from '@eightshift/ui-components/icons'; import { STORE_NAME, setStoreGlobalWindow, setStore, setConfigFlags } from './store'; -import { camelCase, kebabCase, lowerFirst, upperFirst } from '../helpers'; +import { camelCase, kebabCase, lowerFirst, upperFirst } from '@eightshift/ui-components/utilities'; /** * Register all Block Editor blocks using WP `registerBlockType` method. * Due to restrictions in dynamic import using dynamic names all blocks are registered using `require.context`. diff --git a/scripts/plugins/yoast-seo.js b/scripts/plugins/yoast-seo.js index b2edd72f1..2f332ef2d 100644 --- a/scripts/plugins/yoast-seo.js +++ b/scripts/plugins/yoast-seo.js @@ -1,7 +1,7 @@ import domReady from '@wordpress/dom-ready'; import apiFetch from '@wordpress/api-fetch'; import { subscribe, select } from '@wordpress/data'; -import { debounce, isEmpty } from '../helpers'; +import { debounce, isEmpty } from '@eightshift/ui-components/utilities'; /* global YoastSEO */ From 9cadb5dcc0e5b4ab8036c4f1eabdc85fe20a4554 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:29:51 +0200 Subject: [PATCH 18/74] remove deprecated actions --- scripts/editor/actions.js | 200 -------------------------------------- 1 file changed, 200 deletions(-) delete mode 100644 scripts/editor/actions.js diff --git a/scripts/editor/actions.js b/scripts/editor/actions.js deleted file mode 100644 index a983fef63..000000000 --- a/scripts/editor/actions.js +++ /dev/null @@ -1,200 +0,0 @@ -import { ucfirst } from './utility'; - -// This file is deprecated. - -/** - * This method is used when attributes have property type `object` with any number of values, eg. `content`, `url`, `type` etc. - * This function generates callback for each of the values from attribute. Generate callback with name onChange${attribute_name}${property_name} - * - * Example: - * ```json - * "attributes": { - * "heading": { - * "type": "object", - * "default": { - * "content": "", - * "color": "default", - * "size": "default", - * "type": "default", - * "weight": "normal", - * "family": "a1-serif" - * } - * } - * } - * ``` - * Inside actions there will be `onChangeHeadingColor` where attribute name is `heading` and object property is `color` - * - * @param {function} setAttributes - Method for saving attribute. - * @param {object} attributes - All attribute from manifest.json - * @param {string} key - Key from the manifest. - * @param {object} propsAttributes - Current attribute when this function executes. - * - * @returns {object} - * - * @deprecated This method is deprecated. Please update to the latest version. - */ -const multiplePropsActions = (setAttributes, attributes, key, propsAttributes) => { - const output = {}; - - // Set output as a object key with anonymous function callback. - for (const propType in attributes[key]) { - if (Object.prototype.hasOwnProperty.call(attributes[key], propType)) { - - // Create functions for default values. - if (propType === 'default') { - - for (const propName in attributes[key][propType]) { - if (Object.prototype.hasOwnProperty.call(attributes[key][propType], propName)) { - - output[`onChange${ucfirst(key)}${ucfirst(propName)}`] = function (value) { - setAttributes({ - [key]: { - ...propsAttributes[key], - [propName]: value, - }, - }); - }; - - } - } - } - } - } - - return output; -}; - -/** - * This method is used to set attributes with single property. - * This function generates callback for that property value. - * - * @param {function} setAttributes - Method for saving attributes. - * @param {string} key - Came of the property in manifest. - * - * @returns {object} - * - * @deprecated This method is deprecated. Please update to the latest version. - */ -const singlePropsAction = (setAttributes, key) => { - const output = {}; - - // Set output as a object key with anonymous function callback. - // Keys name must be written in uppercase. - output[`onChange${ucfirst(key)}`] = function (value) { - setAttributes({ - [key]: value, - }); - }; - - return output; -}; - -/** - * This method is used for setting media attributes. It is property type `object` with default values of `id`, `url`. - * This function generates callback that saves `id`, `url` of attribute. - * - * Example: - * ```json - * "attributes": { - * "media": { - * "type": "object", - * "default": { - * "id": 0, - * "url": "", - * }, - * "mediaAction": true - * } - * } - * ``` - * - * Inside actions there will be `onChangeMedia` function that will update `id` and `url` expect that a given object have those properties - * - * @param {function} setAttributes - Method for saving attributes. - * @param {string} key - Key from the manifest. - * - * @returns {object} - * - * @deprecated This method is deprecated. Please update to the latest version. - */ -const mediaPropsAction = (setAttributes, key) => { - const output = {}; - - // Set output as an object key with anonymous function callback. - // Keys name must be written in uppercase. - output[`onChange${ucfirst(key)}`] = function(value) { - setAttributes({ - [key]: { - id: value.id, - url: value.url, - }, - }); - }; - - return output; -}; - - -/** - * Create attributes actions from blocks manifest.json. - * _This helper is deprecated and should not be used anymore._ - * - * Actions are passed in child components in order to update props on event. - * Default function output is `onChange` + attribute name. - * Example `onChangeContent`. - * Depending on prop - * - * @param {object} props - Block props so we can get `setAttributes` method. - * @param {object} manifest - Block manifest.json so we can get all attributes. - * - * @deprecated This helper is not used anymore. Use `setAttributes` instead. - * - * @returns {object} - * - * @deprecated This method is deprecated. Please update to the latest version. - */ -export const getActions = (props, manifest) => { - - // Get data, if not available set to default. - const { setAttributes, attributes: propsAttributes } = props || {}; - const { attributes } = manifest || {}; - - // Prepare output variable. - let actionsOutput = {}; - - // Iterate all object keys. This is the fastest way. - for (const key in attributes) { - - // If key doesn't exists skip this iteration. - if (Object.prototype.hasOwnProperty.call(attributes, key)) { - - // If useManual key is set to true skip this attribute from actions output. - if (Object.prototype.hasOwnProperty.call(attributes[key], 'manualAction')) { - continue; - } - - // Switch between property types default action, multiple props actions and media actions. - if (Object.prototype.hasOwnProperty.call(attributes[key], 'type') && attributes[key].type === 'object') { - - actionsOutput = { - ...actionsOutput, - ...multiplePropsActions(setAttributes, attributes, key, propsAttributes), - ...singlePropsAction(setAttributes, key), - }; - - if (Object.prototype.hasOwnProperty.call(attributes[key], 'mediaAction')) { - actionsOutput = { - ...actionsOutput, - ...mediaPropsAction(setAttributes, key), - }; - } - } else { - actionsOutput = { - ...actionsOutput, - ...singlePropsAction(setAttributes, key), - }; - } - } - } - - return actionsOutput; -}; From 51b91b311f65ff51f8714627824719dbe2e168e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:32:31 +0200 Subject: [PATCH 19/74] replace helper import --- scripts/editor/inserter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/editor/inserter.js b/scripts/editor/inserter.js index 4428286e0..ec210af09 100644 --- a/scripts/editor/inserter.js +++ b/scripts/editor/inserter.js @@ -1,6 +1,6 @@ import { dispatch, select } from '@wordpress/data'; import { createBlock } from '@wordpress/blocks'; -import { isEmpty } from '../helpers'; +import { isEmpty } from '@eightshift/ui-components/utilities'; /** * Development inserter made to insert one or multiple blocks in the dom using console. From b9ce6496695befa09a080cf02244c12cf60c2f2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:34:01 +0200 Subject: [PATCH 20/74] remove legacy exports --- scripts/editor/index.js | 1 - scripts/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/scripts/editor/index.js b/scripts/editor/index.js index 23eb6e1aa..12cc57d77 100644 --- a/scripts/editor/index.js +++ b/scripts/editor/index.js @@ -1,6 +1,5 @@ // All exports are sorted in alphabetical order. -export { getActions } from './actions'; export { overrideInnerBlockAttributes, overrideInnerBlockSimpleWrapperAttributes, diff --git a/scripts/index.js b/scripts/index.js index d7f86753a..009239a80 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -94,7 +94,6 @@ export { } from './components/deprecations'; // Editor -export { getActions } from './editor/actions'; export { overrideInnerBlockAttributes, overrideInnerBlockSimpleWrapperAttributes, From 79569e54bf25d06cbfb183dcfdf6911a7dd4f6c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:38:37 +0200 Subject: [PATCH 21/74] fix imports --- scripts/components/base-control/base-control.js | 10 +++++----- .../components/custom-slider/custom-slider.js | 6 +++--- scripts/components/icon-label/icon-label.js | 10 +++++----- scripts/components/menu/menu-item.js | 4 ++-- scripts/components/menu/menu.js | 8 ++++---- .../components/number-picker/number-picker.js | 16 ++++++++-------- scripts/components/re-orderable/re-orderable.js | 4 ++-- scripts/components/repeater/repeater.js | 6 +++--- .../responsive-number-picker.js | 4 ++-- scripts/components/tile-button/tile-button.js | 7 +++++-- 10 files changed, 39 insertions(+), 36 deletions(-) diff --git a/scripts/components/base-control/base-control.js b/scripts/components/base-control/base-control.js index af13b767a..990b85c45 100644 --- a/scripts/components/base-control/base-control.js +++ b/scripts/components/base-control/base-control.js @@ -1,6 +1,6 @@ import React from 'react'; -import { classnames } from '../../helpers'; import { IconLabel } from '@eightshift/frontend-libs/scripts'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * @since 8.0.0 @@ -52,9 +52,9 @@ export const Control = (props) => { if (inlineLabel) { return ( -
+
{label && -
+
{children} @@ -78,9 +78,9 @@ export const Control = (props) => { } return ( -
+
{(label || actions) && -
diff --git a/scripts/components/custom-slider/custom-slider.js b/scripts/components/custom-slider/custom-slider.js index 9180e0859..65721f49e 100644 --- a/scripts/components/custom-slider/custom-slider.js +++ b/scripts/components/custom-slider/custom-slider.js @@ -1,10 +1,10 @@ import React, { useRef, useLayoutEffect, useState } from 'react'; import { Control } from '../base-control/base-control'; -import { classnames } from '../../helpers'; import { renderHandle } from './tooltip-handle'; import { generateMarkers, styleProps } from './shared'; import { NumberPicker } from '../number-picker/number-picker'; import RcSlider from 'rc-slider'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A modern and customizable custom slider. @@ -150,7 +150,7 @@ export const Slider = (props) => {
} > -
+
{leftAddition}
@@ -212,7 +212,7 @@ export const Slider = (props) => { {...styleProps(props, sliderHeight)} - className={classnames(additionalSliderClass)} + className={clsx(additionalSliderClass)} />
diff --git a/scripts/components/icon-label/icon-label.js b/scripts/components/icon-label/icon-label.js index f1f1d9655..23ffac069 100644 --- a/scripts/components/icon-label/icon-label.js +++ b/scripts/components/icon-label/icon-label.js @@ -1,5 +1,5 @@ +import { clsx } from '@eightshift/ui-components/utilities'; import React from 'react'; -import { classnames } from '../../helpers'; /** * A simple icon-label combo for streamlined components. @@ -17,9 +17,9 @@ export const IconLabel = (props) => { if (subtitle && standalone) { return ( -
+
{icon} -
+
{label && {label}} {subtitle && {subtitle}}
@@ -31,7 +31,7 @@ export const IconLabel = (props) => { return ( <> {icon} -
+
{label && {label}} {subtitle && {subtitle}}
@@ -41,7 +41,7 @@ export const IconLabel = (props) => { if (standalone) { return ( -
+
{icon} {label}
diff --git a/scripts/components/menu/menu-item.js b/scripts/components/menu/menu-item.js index 6b65f89f4..0a98b285c 100644 --- a/scripts/components/menu/menu-item.js +++ b/scripts/components/menu/menu-item.js @@ -1,6 +1,6 @@ import React from 'react'; import { Button } from '@wordpress/components'; -import { classnames } from '../../helpers'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * @since 8.5.0 @@ -31,7 +31,7 @@ export const MenuItem = (props) => { )} - contentClass={classnames('es-p-1 es-v-spaced es-gap-2px! es-min-w-48', popoverAdditionalClass)} + contentClass={clsx('es-p-1 es-v-spaced es-gap-2px! es-min-w-48', popoverAdditionalClass)} position='bottom right' noArrow additionalPopoverProps={isSubmenu && { offset: { mainAxis: -36 } }} diff --git a/scripts/components/number-picker/number-picker.js b/scripts/components/number-picker/number-picker.js index 4aa320977..8f7b7a9f7 100644 --- a/scripts/components/number-picker/number-picker.js +++ b/scripts/components/number-picker/number-picker.js @@ -2,8 +2,8 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { Button, __experimentalNumberControl as NumberControl } from '@wordpress/components'; import { Control } from '../base-control/base-control'; -import { icons } from '../../editor/icons/icons'; -import { classnames } from '../../helpers'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; const round = (value, decimals) => { return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals); @@ -94,17 +94,17 @@ export const NumberPicker = (props) => { inlineLabel={inlineLabel} noBottomSpacing={noBottomSpacing} reducedBottomSpacing={reducedBottomSpacing} - additionalClasses={classnames('es-number-picker', additionalClasses)} + additionalClasses={clsx('es-number-picker', additionalClasses)} >
- {prefix && {prefix}} + {prefix && {prefix}} { __nextHasNoMarginBottom /> - {suffix && {suffix}} + {suffix && {suffix}}
diff --git a/scripts/components/re-orderable/re-orderable.js b/scripts/components/re-orderable/re-orderable.js index ea56099c8..3929799da 100644 --- a/scripts/components/re-orderable/re-orderable.js +++ b/scripts/components/re-orderable/re-orderable.js @@ -3,7 +3,6 @@ import { __ } from '@wordpress/i18n'; import { SortableItem } from './sortable-item'; import { Control } from '../base-control/base-control'; import { restrictToVerticalAxis, restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers'; -import { classnames } from '../../helpers'; import { DndContext, @@ -22,6 +21,7 @@ import { horizontalListSortingStrategy, rectSortingStrategy, } from '@dnd-kit/sortable'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A simple re-orderable list. @@ -141,7 +141,7 @@ export const ReOrderable = (props) => { noBottomSpacing={noBottomSpacing} reducedBottomSpacing={reducedBottomSpacing} additionalClasses={additionalClasses} - additionalLabelClasses={classnames(additionalLabelClasses, items?.length < 1 && 'es-mb-0!')} + additionalLabelClasses={clsx(additionalLabelClasses, items?.length < 1 && 'es-mb-0!')} actions={actions} wrapChildren={wrapChildren} > diff --git a/scripts/components/repeater/repeater.js b/scripts/components/repeater/repeater.js index e9d451cd1..54a06ae63 100644 --- a/scripts/components/repeater/repeater.js +++ b/scripts/components/repeater/repeater.js @@ -1,11 +1,10 @@ import React, { useState } from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { icons } from '@eightshift/frontend-libs/scripts'; +import { icons } from '@eightshift/ui-components/icons'; import { SortableItem } from './sortable-item'; import { Control } from '../base-control/base-control'; import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers'; -import { classnames } from '../../helpers'; import { DndContext, @@ -22,6 +21,7 @@ import { sortableKeyboardCoordinates, verticalListSortingStrategy, } from '@dnd-kit/sortable'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A simple repeater. @@ -126,7 +126,7 @@ export const Repeater = (props) => { noBottomSpacing={noBottomSpacing} reducedBottomSpacing={reducedBottomSpacing} additionalClasses={additionalClasses} - additionalLabelClasses={classnames(additionalLabelClasses, items?.length < 1 && 'es-mb-0!')} + additionalLabelClasses={clsx(additionalLabelClasses, items?.length < 1 && 'es-mb-0!')} actions={
{actions} diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index 7bcb9ac52..ee97b8f7b 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -3,7 +3,7 @@ import { Responsive, NumberPicker } from '@eightshift/frontend-libs/scripts'; import { icons } from '@eightshift/ui-components/icons'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { classnames } from '../../helpers'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A simple `NumberPicker` that allows changing values between breakpoints. @@ -150,7 +150,7 @@ export const ResponsiveNumberPicker = (props) => { }); }} disabled={(modifyInput ? modifyInput(parsedValue) : parsedValue) === resetButton || isInherited} - className={classnames( + className={clsx( // eslint-disable-next-line max-len 'es-size-7! es-min-size-0! es-p-0! es-button-icon-20 es-rounded-1! es-hover-bg-cool-gray-100 es-transition', (parsedValue === resetButton || isInherited) && 'es-pointer-events-none es-nested-color-cool-gray-400!' diff --git a/scripts/components/tile-button/tile-button.js b/scripts/components/tile-button/tile-button.js index 047a94f1f..175186a00 100644 --- a/scripts/components/tile-button/tile-button.js +++ b/scripts/components/tile-button/tile-button.js @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react'; -import { classnames } from '../../helpers'; import { Button } from '@wordpress/components'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * Button with an icon and text below it. @@ -31,7 +31,10 @@ export const TileButton = forwardRef((props, ref) => { onClick={onClick} isPressed={isPressed} // eslint-disable-next-line max-len - className={classnames('es-button-icon-24 es-flex-grow-0 es-flex-shrink-0 es-rounded-1! es-is-v2-gutenberg-button es-flex-col es-gap-1.25! es-w-17! es-h-17! es-button-no-icon-spacing es-content-center! es-text-3! es-line-h-0.95 es-p-0.75! es-nested-flex-shrink-0', additionalClasses)} + className={clsx( + 'es-button-icon-24 es-flex-grow-0 es-flex-shrink-0 es-rounded-1! es-is-v2-gutenberg-button es-flex-col es-gap-1.25! es-w-17! es-h-17! es-button-no-icon-spacing es-content-center! es-text-3! es-line-h-0.95 es-p-0.75! es-nested-flex-shrink-0', + additionalClasses + )} > {label} From 097a21805b154a4cacb0ea15196d2d443f524b46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:39:17 +0200 Subject: [PATCH 22/74] change gitignore --- .gitignore | 2 -- 1 file changed, 2 deletions(-) diff --git a/.gitignore b/.gitignore index 1757c2e11..595148829 100644 --- a/.gitignore +++ b/.gitignore @@ -15,5 +15,3 @@ bun.lockb # Tests /coverage - -/blocks From 6bb08fa236cfc0fec07a44340860a48d74265f85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 13:48:00 +0200 Subject: [PATCH 23/74] remove more deprecated helpers --- .../components/color-swatch/color-swatch.js | 13 ++++++----- .../custom-slider/custom-range-slider.js | 2 +- .../components/fancy-divider/fancy-divider.js | 17 ++++++++------ .../inline-notification.js | 7 +++--- .../matrix-align-control.js | 10 ++++---- scripts/components/menu/menu.js | 3 ++- .../option-selector/option-selector.js | 10 ++++---- .../components/preset-picker/preset-picker.js | 2 +- .../components/re-orderable/sortable-item.js | 12 ++++++---- scripts/components/repeater/sortable-item.js | 14 ++++++----- .../responsive-number-picker/auto-config.js | 5 ++-- .../responsive-slider/auto-config.js | 5 ++-- .../responsive-toggle-button/auto-config.js | 5 ++-- scripts/components/responsive/responsive.js | 23 ++++++++++--------- scripts/components/section/section.js | 7 +++--- scripts/components/toggle/toggle.js | 7 +++--- .../width-offset-range-slider/auto-config.js | 9 ++++---- scripts/editor/index.js | 1 - scripts/editor/utility.js | 22 ------------------ scripts/index.js | 2 +- 20 files changed, 86 insertions(+), 90 deletions(-) delete mode 100644 scripts/editor/utility.js diff --git a/scripts/components/color-swatch/color-swatch.js b/scripts/components/color-swatch/color-swatch.js index 9adadf30f..1f6f7dd1f 100644 --- a/scripts/components/color-swatch/color-swatch.js +++ b/scripts/components/color-swatch/color-swatch.js @@ -1,5 +1,6 @@ import React, { useState, useRef, useEffect } from 'react'; -import { classnames, luminanceFromRgb } from '../../helpers'; +import { luminanceFromRgb } from '../../helpers'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * @since 8.0.0 @@ -23,7 +24,7 @@ export const ColorSwatch = (props) => { if (color === 'es-undefined') { return (
{ if (!color || color?.length < 1) { return (
{ const activeIndicator = (
{ if (color === 'transparent') { return (
{ return (
{ onBeforeChange={onBeforeChange} onAfterChange={onAfterChange} - className={classnames(additionalSliderClass)} + className={clsx(additionalSliderClass)} />
diff --git a/scripts/components/fancy-divider/fancy-divider.js b/scripts/components/fancy-divider/fancy-divider.js index 5b64bf6c7..fd343b27f 100644 --- a/scripts/components/fancy-divider/fancy-divider.js +++ b/scripts/components/fancy-divider/fancy-divider.js @@ -1,5 +1,6 @@ import React from 'react'; -import { IconLabel, classnames } from '@eightshift/frontend-libs/scripts'; +import { IconLabel } from '@eightshift/frontend-libs/scripts'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A simple
replacement that draws text and an optional icon. @@ -25,12 +26,14 @@ export const FancyDivider = (props) => { } = props; return ( -
+
diff --git a/scripts/components/matrix-align-control/matrix-align-control.js b/scripts/components/matrix-align-control/matrix-align-control.js index de06334e6..934e01697 100644 --- a/scripts/components/matrix-align-control/matrix-align-control.js +++ b/scripts/components/matrix-align-control/matrix-align-control.js @@ -1,9 +1,9 @@ import React, { useState } from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; -import { Control, icons, OptionSelector, PopoverWithTrigger, TileButton } from '../../../scripts'; -import { camelize } from '../../../scripts/helpers'; -import { ucfirst } from '../../../scripts/editor'; +import { Control, OptionSelector, PopoverWithTrigger, TileButton } from '../../../scripts'; +import { icons } from '@eightshift/ui-components/icons'; +import { camelCase, upperFirst } from '@eightshift/ui-components/utilities'; /** * A component that can provide a 3x3 or a 2x2 grid of positions to pick from. @@ -112,7 +112,7 @@ export const MatrixAlignControl = (props) => { onClick={() => setIsOpen(!isOpen)} ref={ref} label={label} - icon={icons[`position${size}${ucfirst(camelize(currentValue))}`]} + icon={icons[`position${size}${upperFirst(camelCase(currentValue))}`]} /> ); } @@ -122,7 +122,7 @@ export const MatrixAlignControl = (props) => { ref={ref} label={label} onClick={() => setIsOpen(!isOpen)} - icon={icons[`position${size}${ucfirst(camelize(currentValue))}`]} + icon={icons[`position${size}${upperFirst(camelCase(currentValue))}`]} additionalClasses={additionalTriggerClasses} /> ); diff --git a/scripts/components/menu/menu.js b/scripts/components/menu/menu.js index 4309d1922..52cda8a3e 100644 --- a/scripts/components/menu/menu.js +++ b/scripts/components/menu/menu.js @@ -1,7 +1,8 @@ import React from 'react'; import { Button } from '@wordpress/components'; -import { PopoverWithTrigger, icons } from '../../../scripts'; +import { PopoverWithTrigger } from '../../../scripts'; import { clsx } from '@eightshift/ui-components/utilities'; +import { icons } from '@eightshift/ui-components/icons'; /** * @since 8.5.0 diff --git a/scripts/components/option-selector/option-selector.js b/scripts/components/option-selector/option-selector.js index 4dfc4c17b..9434f6f0a 100644 --- a/scripts/components/option-selector/option-selector.js +++ b/scripts/components/option-selector/option-selector.js @@ -1,6 +1,8 @@ import React from 'react'; -import { icons, classnames, Control, IconLabel } from '@eightshift/frontend-libs/scripts'; +import { Control, IconLabel } from '@eightshift/frontend-libs/scripts'; import { Button } from '@wordpress/components'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * Button-based option selector, inspired by WP 5.9. @@ -64,7 +66,7 @@ export const OptionSelector = (props) => { additionalContainerClass, } = props; - const buttonClasses = classnames( + const buttonClasses = clsx( iconOnly && 'es-button-square-36', largerIcons && 'es-button-icon-24', border === 'offset' && 'es-rounded-0.75! es-p-1.5!', @@ -90,7 +92,7 @@ export const OptionSelector = (props) => { const control = (
{ additionalClasses={additionalContainerClass} actions={actions} subtitle={subtitle} - additionalLabelClasses={classnames(!inlineLabel && 'es-mb-1!')} + additionalLabelClasses={clsx(!inlineLabel && 'es-mb-1!')} > {control} diff --git a/scripts/components/preset-picker/preset-picker.js b/scripts/components/preset-picker/preset-picker.js index 3c0d4236a..e0ce884fb 100644 --- a/scripts/components/preset-picker/preset-picker.js +++ b/scripts/components/preset-picker/preset-picker.js @@ -2,7 +2,7 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; import { Collapsable, Control } from '../../components'; -import { icons } from '../../editor'; +import { icons } from '@eightshift/ui-components/icons'; /** * A picker for presets defined in the manifest, with additional configurable options. diff --git a/scripts/components/re-orderable/sortable-item.js b/scripts/components/re-orderable/sortable-item.js index 53aeb9ab0..70287cb21 100644 --- a/scripts/components/re-orderable/sortable-item.js +++ b/scripts/components/re-orderable/sortable-item.js @@ -1,7 +1,9 @@ import React from 'react'; -import { IconLabel, icons, classnames } from '@eightshift/frontend-libs/scripts'; +import { IconLabel } from '@eightshift/frontend-libs/scripts'; import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; +import { icons } from '@eightshift/ui-components/icons'; +import { clsx } from '@eightshift/ui-components/utilities'; export const SortableItem = (props) => { const { @@ -50,18 +52,18 @@ export const SortableItem = (props) => { ); return ( -
-
+
+
{preIcon} {noReordering && itemLabel} {!noReordering && -
+
{itemLabel}
} - additionalLabelClasses={classnames(!isOpen && inline && 'es-mb-0!')} + additionalLabelClasses={clsx(!isOpen && inline && 'es-mb-0!')} > {children.map((child, index) => { const breakpointLabel = breakpointLabels?.at(index) ?? fallbackBreakpointLabels.at(index); const previousBreakpointLabel = index === 0 ? '' : breakpointLabels?.at(index - 1) ?? fallbackBreakpointLabels.at(index - 1); - const breakpointIcon = icons[`screen${ucfirst(breakpoints[index])}`]; + const breakpointIcon = icons[`screen${upperFirst(breakpoints[index])}`]; const currentInheritButton = inheritButton?.at(index); @@ -98,7 +99,7 @@ export const Responsive = (props) => { - - {isOpen && ( - setIsOpen(false)} - > - <> - {helperMessages[type] && helperMessages[type].map((item, index) => { - return ( item.show && - - - - ); - })} - - - )} - - ); -}; diff --git a/scripts/components/help-modal/help-modal.scss b/scripts/components/help-modal/help-modal.scss deleted file mode 100644 index 178406dbe..000000000 --- a/scripts/components/help-modal/help-modal.scss +++ /dev/null @@ -1,31 +0,0 @@ -.es-help-button { - gap: 0.4rem; -} - -// Help item flex. -.help-item-flex { - display: flex; - align-items: center; - padding: 0.5rem 0; - - svg { - min-width: 3.5rem; - color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)); - } -} - -// Help item flex col. -.help-item-flex-col { - display: flex; - flex-direction: column; - margin-left: 1rem; - - h4, - p { - margin: 0; - } - - h4 { - margin-bottom: 0.2rem; - } -} From 41cf84c29add213c738f702313c05f13b3599d42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 14:04:27 +0200 Subject: [PATCH 26/74] remove help modal export --- scripts/components/index.js | 1 - scripts/index.js | 1 - 2 files changed, 2 deletions(-) diff --git a/scripts/components/index.js b/scripts/components/index.js index 5923ca9e5..5d8b4bf7c 100644 --- a/scripts/components/index.js +++ b/scripts/components/index.js @@ -24,7 +24,6 @@ export { ColumnConfigSlider } from './custom-slider/column-config-slider'; export { Slider } from './custom-slider/custom-slider'; export { RangeSlider } from './custom-slider/custom-range-slider'; export { FancyDivider } from './fancy-divider/fancy-divider'; -export { HelpModal } from './help-modal/help-modal'; export { IconLabel } from './icon-label/icon-label'; export { Toggle, IconToggle } from './toggle/toggle'; export { Notification } from './inline-notification/inline-notification'; diff --git a/scripts/index.js b/scripts/index.js index 771005037..24031704e 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -25,7 +25,6 @@ export { ColumnConfigSlider } from './components/custom-slider/column-config-sli export { Slider } from './components/custom-slider/custom-slider'; export { RangeSlider } from './components/custom-slider/custom-range-slider'; export { FancyDivider } from './components/fancy-divider/fancy-divider'; -export { HelpModal } from './components/help-modal/help-modal'; export { IconLabel } from './components/icon-label/icon-label'; export { Toggle, IconToggle } from './components/toggle/toggle'; export { Notification } from './components/inline-notification/inline-notification'; From e801b6539ccf8ec4fcd87fae90a53189562f9897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 14:08:25 +0200 Subject: [PATCH 27/74] temporarily re-add deps --- package.json | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2cb8a969e..571208195 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", "@swc/core": "^1.6.13", - "@uidotdev/usehooks": "^2.4.1", "@wordpress/api-fetch": "^7.3.0", "@wordpress/block-editor": "^13.3.0", "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0", @@ -74,7 +73,13 @@ "webpack": "^5.93.0", "webpack-cli": "^5.1.4", "webpack-manifest-plugin": "^5.0.0", - "webpack-merge": "^6.0.1" + "webpack-merge": "^6.0.1", + "@uidotdev/usehooks": "^2.4.1", + "rc-slider": "^10.6.2", + "rc-tooltip": "^6.2.0", + "react-colorful": "^5.6.1", + "react-gcolor-picker": "^1.3.3", + "react-select": "^5.8.0" }, "devDependencies": { "lint-staged": "^15.2.7", From 55a0cbe3bb71299344d52ca2713d6f245d2ce6b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 14:15:45 +0200 Subject: [PATCH 28/74] update SSR --- package.json | 1 + .../server-side-render/server-side-render.js | 220 +++--------------- 2 files changed, 29 insertions(+), 192 deletions(-) diff --git a/package.json b/package.json index 571208195..168ebeb09 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@wordpress/block-editor": "^13.3.0", "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0", "@wordpress/dom-ready": "^4.3.0", + "@wordpress/server-side-render": "^5.2.0", "autoprefixer": "^10.4.19", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.37.1", diff --git a/scripts/components/server-side-render/server-side-render.js b/scripts/components/server-side-render/server-side-render.js index 036156ad6..6e58ce849 100644 --- a/scripts/components/server-side-render/server-side-render.js +++ b/scripts/components/server-side-render/server-side-render.js @@ -1,199 +1,35 @@ -// Created by David Gwyer -// https://github.com/dgwyer/server-side-render-x -/** - * External dependencies - */ -import React from 'react'; -import { icons } from '@eightshift/ui-components/icons'; +import GutenbergSsr from '@wordpress/server-side-render'; +import { clsx } from '@eightshift/ui-components/utilities'; /** - * WordPress dependencies + * Wraps Gutenberg's ServerSideRender component with a bit of extra styles. + * + * @component + * @param {Object} props - Component props. + * @param {string} props.block - Fully qualified block name. + * @param {Object} props.attributes - Block attributes. + * @param {string} props.className - Classes to pass to the rendered content wrapper. + * + * @returns {JSX.Element} The ServerSideRender component. + * + * @example + * + * */ -import { Component, RawHTML } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; -import apiFetch from '@wordpress/api-fetch'; -import { addQueryArgs } from '@wordpress/url'; -import { Placeholder } from '@wordpress/components'; -import { select } from '@wordpress/data'; -import { STORE_NAME } from '../../editor/store'; -import { debounce, isEqual } from '../../helpers'; - -export function rendererPath(block, attributes = null, urlQueryArgs = {}) { - return addQueryArgs(`/wp/v2/block-renderer/${block}`, { - context: 'edit', - ...(null !== attributes ? { attributes } : {}), - ...urlQueryArgs, - }); -} +export const ServerSideRender = (props) => { + const { block, attributes, className, ...rest } = props; -const Loader = () => { return ( -
- - - - -
+ ); }; - -/** - * An update of the built-in ServerSideRender that keeps the current state when loading the new one. - * - * @param {object} props - ServerSideRender options. - * @param {string} props.block - Name of the block to render (should include the namespace!). - * @param {array} props.attributes - Attributes to pass to the rendered item. - */ -export class ServerSideRender extends Component { - constructor(props) { - super(props); - this.state = { - response: null, - prevResponse: null, - }; - } - - componentDidMount() { - this.isStillMounted = true; - this.fetch(this.props); - // Only debounce once the initial fetch occurs to ensure that the first - // renders show data as soon as possible. - this.fetch = debounce(this.fetch, 500); - } - - componentWillUnmount() { - this.isStillMounted = false; - } - - componentDidUpdate(prevProps) { - if (!isEqual(prevProps, this.props)) { - this.fetch(this.props); - } - } - - fetch(props) { - if (!this.isStillMounted) { - return; - } - if (null !== this.state.response) { - //this.setState({ response: null, prevResponse: this.state.response }); - this.setState(state => ( - { - response: null, - prevResponse: state.response - } - )); - } - const { block, attributes = null, urlQueryArgs = {} } = props; - - const path = rendererPath(block, attributes, urlQueryArgs); - // Store the latest fetch request so that when we process it, we can - // check if it is the current request, to avoid race conditions on slow networks. - const fetchRequest = (this.currentFetchRequest = apiFetch({ path }) - .then((response) => { - if ( - this.isStillMounted && - fetchRequest === this.currentFetchRequest && - response - ) { - this.setState({ response: response.rendered }); - } - }) - .catch((error) => { - if ( - this.isStillMounted && - fetchRequest === this.currentFetchRequest - ) { - this.setState({ - response: { - error: true, - errorMsg: error.message, - }, - }); - } - })); - return; - } - - render() { - const spinner = ` - - `; - - const response = this.state.response; - const prevResponse = this.state.prevResponse; - let prevResponseHTML = spinner; - if (prevResponse !== null) { - prevResponseHTML = `
${prevResponse}
${spinner}`; - } - - const { - className, - EmptyResponsePlaceholder, - ErrorResponsePlaceholder, - } = this.props; - - if (response === '') { - return ( - - ); - } else if (!response) { - return ( - - {prevResponseHTML} - - ); - } else if (response.error) { - return ( - - ); - } - - const remRegex = /([0-9.-]+rem)/g; - const remReplacement = 'calc($1 * var(--base-font-size, 1))'; - - return ( - - {select(STORE_NAME).getConfigUseRemBaseSize() ? response.replaceAll(remRegex, remReplacement) : response} - - ); - } -} - -ServerSideRender.defaultProps = { - EmptyResponsePlaceholder: ({ className }) => ( - - {__('Block rendered as empty.')} - - ), - ErrorResponsePlaceholder: ({ response, className }) => { - const errorMessage = sprintf( - // translators: %s: error message describing the problem - __('Error loading block: %s'), - response.errorMsg - ); - return ( - {errorMessage} - ); - }, - LoadingResponsePlaceholder: ({ className }) => { - return ( - - - - ); - }, -}; - -export default ServerSideRender; From 150a323a986742a98bd4db0907f0b2cb69bb4d21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 18 Jul 2024 14:25:09 +0200 Subject: [PATCH 29/74] add missing import --- scripts/components/responsive/responsive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/components/responsive/responsive.js b/scripts/components/responsive/responsive.js index b6b1758d3..0200ea123 100644 --- a/scripts/components/responsive/responsive.js +++ b/scripts/components/responsive/responsive.js @@ -6,7 +6,7 @@ import { IconLabel } from '../icon-label/icon-label'; import { Control } from '../base-control/base-control'; import { AnimatedContentVisibility } from '../animated-content-visibility/animated-content-visibility'; import { icons } from '@eightshift/ui-components/icons'; -import { upperFirst } from '@eightshift/ui-components/utilities'; +import { clsx, upperFirst } from '@eightshift/ui-components/utilities'; /** * A component that displays options adjustable across screen sizes. From 7f808d48e04fabb7cedc7f28b5035744ca2b5b57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 19 Jul 2024 12:40:12 +0200 Subject: [PATCH 30/74] update ES UIC version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 168ebeb09..7063c7c0c 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@eightshift/ui-components": "^1.2.2", + "@eightshift/ui-components": "^1.3.0", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", "@swc/core": "^1.6.13", From cc84e94538ba9495910bf4b521e4235c65af22a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:28:20 +0200 Subject: [PATCH 31/74] update ES UIC --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7063c7c0c..e34736261 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@eightshift/ui-components": "^1.3.0", + "@eightshift/ui-components": "^1.3.1", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", "@swc/core": "^1.6.13", From 44fa7644709ef924da40665d527c78b6d8121dca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 19 Jul 2024 13:43:13 +0200 Subject: [PATCH 32/74] rework advanced color picker --- .../advanced-color-picker.js | 326 ++++++------------ .../advanced-color-picker.scss | 116 ------- 2 files changed, 106 insertions(+), 336 deletions(-) delete mode 100644 scripts/components/advanced-color-picker/advanced-color-picker.scss diff --git a/scripts/components/advanced-color-picker/advanced-color-picker.js b/scripts/components/advanced-color-picker/advanced-color-picker.js index 66c253543..9d597d443 100644 --- a/scripts/components/advanced-color-picker/advanced-color-picker.js +++ b/scripts/components/advanced-color-picker/advanced-color-picker.js @@ -1,43 +1,42 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { ColorPalette, OptionSelector, ColorSwatch, Control, PopoverWithTrigger, TileButton } from '../../../scripts'; import { icons } from '@eightshift/ui-components/icons'; -import { HexColorPicker, HexColorInput } from 'react-colorful'; -import ReactGPicker from 'react-gcolor-picker'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { + SolidColorPicker, + GradientEditor, + TriggeredPopover, + OptionSelect, + ButtonGroup, + ColorSwatch, + HStack, + Button, + Spacer, +} from '@eightshift/ui-components'; +import { BaseControl } from '@eightshift/ui-components'; +import { ColorPicker } from '@eightshift/ui-components'; /** * A flexible color picker that allows choice between project colors, custom solid colors or gradients. * - * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin - * - * @param {object} props - AdvancedColorPicker options. - * @param {string?} props.colorProject - Currently selected project color. - * @param {string?} props.colorSolid - Currently selected solid color. - * @param {string?} props.colorGradient - Currently selected gradient. - * @param {string?} props.type - Currently selected color type. - * @param {function} props.onChangeProject - Function called when the project color is changed. - * @param {function} props.onChangeSolid - Function called when the solid color is changed. - * @param {function} props.onChangeGradient - Function called when the gradient is changed. - * @param {function} props.onChangeType - Function called when the color type is changed. - * @param {object} props.globalManifest - Project's `globalManifest`. - * @param {Array} [props.types] - Types of choices to show. The array should have objects in `{label: '', value: ''}` format. Defaults provide 'nothing', 'solid color', 'project color' and 'gradient' options. - * @param {string?} [props.label] - Label displayed above the control. - * @param {string?} [props.help] - Help text displayed below the control. - * @param {boolean} [props.disabled=false] - If `true`, control is disabled. - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {string?} [props.additionalClasses] - If passed, the classes are added to the component's `BaseControl`. - * @param {boolean} [props.isTileButton=false] - If `true`, the component is rendered as a tile button. - * @param {AppearOrigin} [props.popoverPosition='top center'] - Position where the popover appears. + * @param {object} props - AdvancedColorPicker options. + * @param {string?} props.colorProject - Currently selected project color. + * @param {string?} props.colorSolid - Currently selected solid color. + * @param {string?} props.colorGradient - Currently selected gradient. + * @param {string?} props.type - Currently selected color type. + * @param {function} props.onChangeProject - Function called when the project color is changed. + * @param {function} props.onChangeSolid - Function called when the solid color is changed. + * @param {function} props.onChangeGradient - Function called when the gradient is changed. + * @param {function} props.onChangeType - Function called when the color type is changed. + * @param {object} props.globalManifest - Project's `globalManifest`. + * @param {Array} [props.types] - Types of choices to show. The array should have objects in `{label: '', value: ''}` format. Defaults provide 'nothing', 'solid color', 'project color' and 'gradient' options. + * @param {string?} [props.label] - Label displayed above the control. + * @param {string?} [props.help] - Help text displayed below the control. + * @param {boolean} [props.disabled=false] - If `true`, control is disabled. + * @param {string?} [props.className] - If passed, the classes are added to the component's `BaseControl`. */ export const AdvancedColorPicker = (props) => { const { - globalVariables: { - colors: globalColors, - gradients: globalGradients, - }, + globalVariables: { colors: globalColors, gradients: globalGradients }, } = props.globalManifest; const { @@ -56,231 +55,118 @@ export const AdvancedColorPicker = (props) => { icon = icons.imageOverlayAlt2, label = __('Background', 'eightshift-frontend-libs'), - noBottomSpacing, - reducedBottomSpacing, help, types = [ { label: __('None', 'eightshift-frontend-libs'), value: '', - icon: icons.emptyCircle, + endIcon: icons.emptyCircle, + separator: 'below', }, { label: __('Project color', 'eightshift-frontend-libs'), value: 'project', - icon: icons.paletteColor, + endIcon: icons.paletteColor, }, { label: __('Color', 'eightshift-frontend-libs'), value: 'solid', - icon: icons.color, + endIcon: icons.color, }, { label: __('Gradient', 'eightshift-frontend-libs'), value: 'gradient', - icon: icons.gradient, - } + endIcon: icons.gradient, + }, ], disabled = false, - additionalClasses, - - isTileButton = false, - - popoverPosition, + className, } = props; - const showNone = types.find(({ value }) => value === ''); - const showProjectColor = types.find(({ value }) => value === 'project') !== undefined; - const showSolidColor = types.find(({ value }) => value === 'solid') !== undefined; - const showGradient = types.find(({ value }) => value === 'gradient') !== undefined; - - const currentColor = colorsProject?.find(({ slug }) => slug === colorProject); - - let color; - - if (type?.length > 0) { - color = 'transparent'; - - if (type === 'project' && colorProject !== 'transparent') { - color = `var(--global-colors-${colorProject})`; - } else if (type === 'solid') { - color = colorSolid; - } else if (type === 'gradient') { - color = colorGradient; - } - } - - const popoverContent = ( -
-
-

- {label} - {type !== '' && - – {types?.find(({ value }) => value === type)?.label} - } -

- -
+ const showProjectColor = + types.find(({ value }) => value === 'project') !== undefined; + const showSolidColor = + types.find(({ value }) => value === 'solid') !== undefined; + const showGradient = + types.find(({ value }) => value === 'gradient') !== undefined; -
- + + value?.length > 0)} - onChange={((value) => onChangeType(value))} + options={types} + onChange={(value) => onChangeType(value)} disabled={disabled} - border='none' - additionalButtonClass='es-rounded-1.5!' - noBottomSpacing - iconOnly + type='menu' /> -
- -
- {type === '' && - <> - {icons.emptyRect} - {__('No background', 'eightshift-frontend-libs')} - - } - - {type === 'project' && showProjectColor && !disabled && - <> -
- - -
- - {currentColor?.name ?? __('Select a color', 'eightshift-frontend-libs')} - - - {currentColor?.color && - {currentColor?.color} - } -
-
- - - - } - - {type === 'solid' && showSolidColor && !disabled && -
- onChangeSolid(value)} - /> - - + )} + + {type === 'solid' && showSolidColor && !disabled && ( + } + > + onChangeSolid(value)} - className='es-solid-color-picker-hex-input es-w-20 es-p-2 es-rounded-1.5 es-border-cool-gray-300 es-text-3 es-uppercase' - /> -
- } - - {type === 'gradient' && showGradient && !disabled && -
- onChangeGradient(value)} - gradient - solid={false} - showAlpha={false} - defaultActiveTab='gradient' - defaultColors={gradients?.map(({ gradient }) => gradient).filter(Boolean) ?? []} /> -
- } -
+ + )} - {showNone && -
- -
- } -
- ); - - if (isTileButton) { - return ( - ( - setIsOpen(!isOpen)} - icon={} - label={label} - className='es-button-square-30 es-button-icon-24' + onChangeGradient(value)} /> - ) - } - allowCloseFromChildren - noArrow - > - {popoverContent} - - ); - } - return ( - - ( - ); }} diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index 7bfe9162b..80020492f 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -1,13 +1,12 @@ import React, { useState } from 'react'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { AnimatedContentVisibility, Control } from '@eightshift/frontend-libs/scripts'; -import { icons } from '@eightshift/ui-components/icons'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { Expandable } from '@eightshift/ui-components'; /** * A collapsable container for options. * + * @deprecated Use `Expandable` from `@eightshift/ui-components` instead. + * * @param {object} props - Collapsable options. * @param {React.Component?} [props.icon] - Icon to show next to the label * @param {string} props.label - Trigger label. @@ -25,9 +24,6 @@ export const Collapsable = ({ label, subtitle, - noBottomSpacing, - reducedBottomSpacing, - children, additionalClasses, @@ -44,40 +40,16 @@ export const Collapsable = ({ } return ( - -
- {actions} -
- -
- } + className={additionalClasses} + actions={actions} + keepActionsOnExpand={keepActionsOnExpand} + disabled={disabled} > - - {children} - - + {children} + ); }; diff --git a/scripts/components/color-palette-custom/color-palette-custom.js b/scripts/components/color-palette-custom/color-palette-custom.js index d40432166..025597dae 100644 --- a/scripts/components/color-palette-custom/color-palette-custom.js +++ b/scripts/components/color-palette-custom/color-palette-custom.js @@ -1,35 +1,31 @@ -import React, { useState } from 'react'; +import React from 'react'; import { __ } from '@wordpress/i18n'; -import { Button, TextControl, Tooltip } from '@wordpress/components'; -import { icons } from '@eightshift/ui-components/icons'; import { select } from '@wordpress/data'; import { STORE_NAME } from './../../editor/store'; -import { Control } from '../base-control/base-control'; -import { ColorSwatch } from '../color-swatch/color-swatch'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { ColorPicker } from '@eightshift/ui-components'; /** * Modified version of WordPress's `ColorPalette` which saves values as color names/slugs instead of hex codes. * - * @typedef {'tiles'|'list'|'listTwoCol'} ColorPaletteLayout + * @deprecated Use `ColorPicker` from `@eightshift/ui-components` instead. * - * @param {object} props - ColorPalette options. - * @param {array} props.colors - Colors to display. - * @param {object} props.value - Current value. - * @param {function} props.onChange - Function called when the value is modified. - * @param {boolean} [props.clearable=false] - If `true`, the color palette will have a *Clear* button. - * @param {string?} [props.label] - Label displayed above the picker. - * @param {string?} [props.help] - Help text displayed below the picker. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. + * @param {object} props - ColorPalette options. + * @param {array} props.colors - Colors to display. + * @param {object} props.value - Current value. + * @param {function} props.onChange - Function called when the value is modified. + * @param {boolean} [props.clearable=false] - If `true`, the color palette will have a *Clear* button. + * @param {string?} [props.label] - Label displayed above the picker. + * @param {string?} [props.help] - Help text displayed below the picker. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. + * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. + * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. * @param {ColorPaletteLayout} [props.layout='tiles'] - Determines the layout of the control. - * @param {boolean} [props.searchable=false] - If `true`, the list of color can be searched through. - * @param {boolean} [props.disabled] - If `true`, the component can't be interacted with. - * @param {boolean} [props.noShadeGrouping=false] - If `false`, color swatches will be grouped if there are 2 or more colors with the same beginning of the name, but different ending (-50, -100, ..., -900 or -10, -20, ..., -90). - * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. + * @param {boolean} [props.searchable=false] - If `true`, the list of color can be searched through. + * @param {boolean} [props.disabled] - If `true`, the component can't be interacted with. + * @param {boolean} [props.noShadeGrouping=false] - If `false`, color swatches will be grouped if there are 2 or more colors with the same beginning of the name, but different ending (-50, -100, ..., -900 or -10, -20, ..., -90). + * @param {React.Component?} [props.subtitle] - Subtitle below the label. + * @param {React.Component?} [props.actions] - Actions to show to the right of the label. */ export const ColorPalette = (props) => { const { @@ -40,216 +36,24 @@ export const ColorPalette = (props) => { label, help, icon, - reducedBottomSpacing, - noBottomSpacing, - inlineLabel, - layout = 'tiles', - searchable = false, disabled, noShadeGrouping = false, subtitle, - actions, } = props; - const colorSuffixRegex = /(?!^.+)(-?(?:50|100|200|300|400|500|600|700|800|900|10|20|30|40|50|60|70|80|90){1})$/gi; - - let groupedColors = { generic: colors }; - - if (!noShadeGrouping) { - groupedColors = colors.reduce((output, current) => { - // Bailout if a color is invalid. - if (current === undefined || current?.name === undefined || current?.slug === undefined) { - return output; - } - - if (current.slug.match(colorSuffixRegex)?.length) { - const newSlug = current.name.replace(colorSuffixRegex, '').trim(); - - if (!output[newSlug]) { - output[newSlug] = []; - } - - output[newSlug] = [ - ...output[newSlug], - { - ...current, - shade: current.slug.match(colorSuffixRegex)[0].replace('-', ''), - }, - ]; - } else { - output.generic = [ - ...output.generic, - current, - ]; - } - - return output; - }, { generic: [] }); - - // Don't show color groups if only one color would end up in the group. - for (let [colorName, colors] of Object.entries(groupedColors)) { - if (colors.length === 1 && colorName !== 'generic') { - groupedColors.generic.push(colors[0]); - - delete groupedColors[colorName]; - } - } - } - - const [filteredColors, setFilteredColors] = useState(groupedColors); - const [searchTerm, setSearchTerm] = useState(''); - - const detailView = layout === 'list' || layout === 'listTwoCol'; - - const searchEmptyIcon = React.cloneElement(icons.searchEmpty, { className: 'es-w-8 es-h-8 es-has-wp-admin-theme-color' }); - - let layoutClasses = 'es-h-spaced-wrap es-gap-0!'; - - if (layout === 'list') { - layoutClasses = 'es-v-spaced es-gap-0!'; - } - - if (layout === 'listTwoCol') { - layoutClasses = 'es-fifty-fifty-h-wrap es-gap-0!'; - } - return ( - - {searchable && - { - setSearchTerm(v); - - if (v.trim().length === 0) { - setFilteredColors(groupedColors); - return; - } - - const filtered = Object.entries(groupedColors).reduce((output, [groupName, groupColors]) => { - const filteredColors = groupColors.filter(({ name }) => name.trim().toLowerCase().includes(v.toLowerCase())); - - if (filteredColors.length > 0) { - output[groupName] = filteredColors; - } - - return output; - }, {}); - - setFilteredColors(filtered); - }} - /> - } - - {Object.values(filteredColors).every((colors) => colors.length < 1) && searchTerm?.length > 0 && -
- {searchEmptyIcon} - {__('No matches for', 'eightshift-frontend-libs')} {searchTerm} -
- } - - {Object.entries(filteredColors).map(([groupName, groupColors], i) => { - const isOtherColors = groupName === 'generic'; - - if (groupColors?.length === 0 || isOtherColors) { - return null; - } - - return ( - -
- {groupColors.map(({ name, slug, color }, j) => { - return ( - - - - ); - })} -
- - ); - })} - - {filteredColors?.generic?.length > 0 && - 1 && __('Other colors', 'eightshift-frontend-libs')} - additionalLabelClasses='es-mb-1.5!' - noBottomSpacing - > -
- {filteredColors.generic.map(({ name, slug, color }, i) => { - return ( - - - - ); - })} -
- - } - - {clearable && -
- -
- } - + triggerProps={{ disabled: disabled }} + showColorCode + /> ); }; diff --git a/scripts/components/color-palette-custom/color-palette-custom.scss b/scripts/components/color-palette-custom/color-palette-custom.scss deleted file mode 100644 index 8f8fee27a..000000000 --- a/scripts/components/color-palette-custom/color-palette-custom.scss +++ /dev/null @@ -1,70 +0,0 @@ -.es-color-theme-container { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 0.125rem; -} - -.es-color-palette-custom { - &--list, - &--list-two-col { - display: grid; - grid-auto-rows: auto; - } - - &--list { - grid-template-columns: 1fr; - } - - &--list-two-col { - grid-template-columns: 1fr 1fr; - } - - &--inline { - display: flex; - flex-wrap: wrap; - gap: 0.25rem; - } -} - -.generic-swatch-icon-checkerboard-group { - transition: { - property: opacity; - timing-function: ease-out; - duration: 0.3s; - } -} - -.generic-swatch-icon-color-mask, -.generic-swatch-icon-color { - transition: { - property: rx, fill; - timing-function: ease-out; - duration: 0.3s; - } - - rx: 2; - - &:hover { - rx: 3; - } - - & ~ circle { - transition: { - property: opacity; - timing-function: ease-out; - duration: 0.3s; - } - } -} - -.is-generic-swatch-active { - .generic-swatch-icon-color-mask, - .generic-swatch-icon-color { - rx: 9; - - &:hover { - rx: 8; - } - } -} diff --git a/scripts/components/color-picker-component/color-picker-component.js b/scripts/components/color-picker-component/color-picker-component.js index a1e9f6b1d..a67699c7a 100644 --- a/scripts/components/color-picker-component/color-picker-component.js +++ b/scripts/components/color-picker-component/color-picker-component.js @@ -1,45 +1,27 @@ import React from 'react'; -import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { ColorSwatch, Control, PopoverWithTrigger } from '../../../scripts'; -import { icons } from '@eightshift/ui-components/icons'; -import { ColorPalette } from '../color-palette-custom/color-palette-custom'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { ColorPicker as EsUicColorPicker } from '@eightshift/ui-components'; /** * Component that allows simple inline color picking while taking up not much space. * + * @deprecated Use `ColorPicker` from `@eightshift/ui-components` instead. + * * @typedef {'generic'|'textColor'|'textHighlightColor'|'backgroundColor'} PickerType - * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin - * @typedef {'tiles'|'list'|'listTwoCol'} ColorPaletteLayout * - * @param {object} props - ColorPicker options. - * @param {string} props.value - Current value (color slug). - * @param {array?} props.colors - List of options to display. If not set, all global manifest colors are used. - * @param {function} props.onChange - Callback that applies the changes. - * @param {PickerType} [props.type='generic'] - Color picker type (determines the visual style of the picker). - * @param {string} [props.pickerPopupTitle] - Color picker popup title. - * @param {boolean} [props.noShadeGrouping=false] - If `false`, color swatches will be grouped if there are 2 or more colors with the same beginning of the name, but different ending (-50, -100, ..., -900). - * @param {boolean} [props.disabled=false] - If `true`, control is disabled. - * @param {boolean} [props.searchable=false] - If `true`, the list of color can be searched through. - * @param {boolean} [props.canReset=false] - If `true`, a clear/reset button is shown. - * @param {ColorPaletteLayout} [props.colorPaletteLayout='listTwoCol'] - If provided, sets the layout of the popup color list. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.label] - Label to represent the control - * @param {React.Component?} [props.help] - Help text displayed below the control. - * @param {string} [props.tooltip] - Tooltip of the picker button (if label not provided). - * @param {boolean} [props.expanded=false] - If `true`, the control is rendered in an expanded form. - * @param {boolean} [props.border=false] - If `true`, the control is rendered with a border. - * @param {boolean?} [props.inlineLabel=false] - If `true`, the control is rendered inline. - * @param {boolean?} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {string?} [props.additionalClasses] - If provided, the classes are appended to the control container. - * @param {string?} [props.additionalTriggerClasses] - If provided, the classes are passed to the component's trigger button. - * @param {AppearOrigin} [props.popoverPosition='top center'] - Position where the popover appears. - * @param {React.Component?} [props.buttonIconOverride] - If provided, overrides the default trigger button icon. - * @param {object?} [props.additionalButtonArgs] - Allows passing additional arguments to the trigger button. - * @param {object?} [props.additionalColorPaletteArgs] - Allows passing additional arguments to the color palette component. - * @param {React.Component?} [props.additionalControls] - Allows passing custom controls to the bottom of ColorPicker's popover. + * @param {object} props - ColorPicker options. + * @param {string} props.value - Current value (color slug). + * @param {array?} props.colors - List of options to display. If not set, all global manifest colors are used. + * @param {function} props.onChange - Callback that applies the changes. + * @param {PickerType} [props.type='generic'] - Color picker type (determines the visual style of the picker). + * @param {boolean} [props.noShadeGrouping=false] - If `false`, color swatches will be grouped if there are 2 or more colors with the same beginning of the name, but different ending (-50, -100, ..., -900). + * @param {boolean} [props.disabled=false] - If `true`, control is disabled. + * @param {boolean} [props.canReset=false] - If `true`, a clear/reset button is shown. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.label] - Label to represent the control + * @param {React.Component?} [props.help] - Help text displayed below the control. + * @param {string} [props.tooltip] - Tooltip of the picker button (if label not provided). + * @param {React.Component?} [props.additionalControls] - Allows passing custom controls to the bottom of ColorPicker's popover. */ export const ColorPicker = (props) => { const { @@ -48,203 +30,37 @@ export const ColorPicker = (props) => { onChange, type = 'generic', - pickerPopupTitle, noShadeGrouping, disabled = false, - searchable = false, - canReset = false, - colorPaletteLayout = 'tiles', + + canReset, icon, help, label, tooltip, - expanded = false, - border = false, - inlineLabel = false, - - noBottomSpacing, - reducedBottomSpacing, - - additionalClasses, - additionalTriggerClasses, - - popoverPosition, - - buttonIconOverride, - additionalButtonArgs, - additionalColorPaletteArgs, additionalControls, } = props; - let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs'); - - switch (type) { - case 'backgroundColor': - defaultPopupTitle = __('Background color', 'eightshift-frontend-libs'); - break; - case 'textColor': - defaultPopupTitle = __('Text color', 'eightshift-frontend-libs'); - break; - case 'textHighlightColor': - defaultPopupTitle = __('Text highlight color', 'eightshift-frontend-libs'); - break; - } - - const getTooltipText = () => { - if (tooltip) { - return tooltip; - } - - switch (type) { - case 'backgroundColor': - return __('Background color', 'eightshift-frontend-libs'); - case 'textColor': - return __('Text color', 'eightshift-frontend-libs'); - case 'textHighlightColor': - return __('Text highlight color', 'eightshift-frontend-libs'); - default: - return __('Color', 'eightshift-frontend-libs'); - } - }; - - const getButtonIcon = () => { - let style = {}; - - if (!value) { - style = { - '--selected-color': 'transparent', - '--selected-opacity': '1', - }; - } else { - style = { - '--checkerboard-opacity': value === 'transparent' ? 1 : 0, - '--selected-color': value === 'transparent' ? 'transparent' : `var(--global-colors-${value})`, - }; - } - - let icon = ; - - switch (type) { - case 'textColor': - icon = React.cloneElement(icons.textColorSwatch, { style }); - break; - case 'textHighlightColor': - icon = React.cloneElement(icons.textHighlightColorSwatch, { style }); - break; - case 'backgroundColor': - icon = React.cloneElement(icons.colorFillSwatch, { style }); - break; - } - - return icon; - }; - - const currentColor = colors?.find(({ slug }) => slug === value); - return ( - - ( - - - ) - } - allowCloseFromChildren - noArrow - > -
-
-

{pickerPopupTitle ?? defaultPopupTitle}

- -
- -
- - -
- - {currentColor?.name ?? __('Select a color', 'eightshift-frontend-libs')} - - - {currentColor?.color && currentColor?.color?.startsWith('#') && - {currentColor?.color} - } -
-
- -
- -
- - {additionalControls && -
- {additionalControls} -
- } - - {canReset && -
- -
- } -
- - + <> + + {additionalControls} + ); }; diff --git a/scripts/components/color-swatch/color-swatch.js b/scripts/components/color-swatch/color-swatch.js index 1f6f7dd1f..e16285b25 100644 --- a/scripts/components/color-swatch/color-swatch.js +++ b/scripts/components/color-swatch/color-swatch.js @@ -1,122 +1,19 @@ import React, { useState, useRef, useEffect } from 'react'; -import { luminanceFromRgb } from '../../helpers'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { ColorSwatch as EsUicColorSwatch } from '@eightshift/ui-components'; /** * @since 8.0.0 * + * @deprecated Use `ColorSwatch` from `@eightshift/ui-components` instead. + * * A simple color swatch to show a color, gradient, transparent (checkerboard) or none. * - * @param {object} props - ColorSwatch options. - * @param {string?} [props.color] - Color to show. Can be either `null`/empty for "nothing" icon, `transparent` to show a checkerboard, or anything that can be sent to the css `background` property. - * @param {boolean} [props.selected=false] - If `true`, the color is selected. - * @param {boolean} [props.larger=false] - If `true`, the swatch is rendered a bit larger. + * @param {object} props - ColorSwatch options. + * @param {string?} [props.color] - Color to show. Can be either `null`/empty for "nothing" icon, `transparent` to show a checkerboard, or anything that can be sent to the css `background` property. * @param {boolean} [props.additionalClasses] - Additional classes to pass through to the swatch. */ export const ColorSwatch = (props) => { - const { - color, - selected = false, - larger = false, - additionalClasses, - } = props; - - if (color === 'es-undefined') { - return ( -
- ); - } - - if (!color || color?.length < 1) { - return ( -
- ); - } - - const ref = useRef(); - const [hasInvertedIndicator, setHasInvertedIndicator] = useState(false); - - useEffect(() => { - if (!ref?.current) { - return; - } - - const background = getComputedStyle(ref?.current).backgroundColor; - - if (!background || background?.length < 1 || !background.includes(',')) { - return; - } - - const parsedBackground = background.replace('rgb(', '').replace(')', '').replace(' ', '').split(',').map((n) => parseInt(n)); - - setHasInvertedIndicator(luminanceFromRgb(...parsedBackground) > 0.5); - }, [ref]); - - const activeIndicator = ( -
- ); - - if (color === 'transparent') { - return ( -
- {activeIndicator} -
- ); - } + const { color, additionalClasses } = props; - return ( -
- {activeIndicator} -
- ); + return ; }; diff --git a/scripts/components/custom-select/async-multi-select.js b/scripts/components/custom-select/async-multi-select.js index 01705d23d..a95c50a92 100644 --- a/scripts/components/custom-select/async-multi-select.js +++ b/scripts/components/custom-select/async-multi-select.js @@ -1,50 +1,37 @@ import React from 'react'; -import { components } from 'react-select'; -import AsyncSelect from 'react-select/async'; -import { DndContext } from '@dnd-kit/core'; -import { restrictToParentElement } from '@dnd-kit/modifiers'; -import { SortableContext } from '@dnd-kit/sortable'; -import { defaultEightshiftColorScheme, defaultEightshiftStyles } from './custom-select-style'; -import { - CustomSelectDefaultClearIndicator, - CustomSelectDefaultDropdownIndicator, - CustomSelectDefaultMultiValueRemove -} from './custom-select-default-components'; -import { getDragEndHandler, getMultiValue, getMultiValueContainer, getMultiValueRemove } from './multi-select-components'; -import { Control } from '../base-control/base-control'; +import { AsyncMultiSelect as EsUicAsyncMultiSelect } from '@eightshift/ui-components'; /** * Multi-select, asynchronously-loading, re-orderable select menu. * - * @param {object} props - AsyncMultiSelect options. - * @param {string?} [props.label] - Label displayed above the control. - * @param {string?} [props.help] - Help text displayed below the control. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. - * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. + * @deprecated Use `MultiSelect` from `@eightshift/ui-components` instead. + * + * @param {object} props - AsyncMultiSelect options. + * @param {string?} [props.label] - Label displayed above the control. + * @param {string?} [props.help] - Help text displayed below the control. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.subtitle] - Subtitle below the label. + * @param {React.Component?} [props.actions] - Actions to show to the right of the label. + * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. * @param {boolean|array<{string,string}>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, until you type to search. - * @param {callback>?} props.loadOptions - An async callback that fetches an array of `{label: '', value: ''}`-formatted items. - * @param {object} props.value - Current value - * @param {function} props.onChange - Function called when the selection is changed. - * @param {boolean} [props.clearable=false] - If `true`, a button to remove all items is shown. - * @param {boolean} [props.noSearch=false] - If `true`, the search functionality is disabled. - * @param {boolean} [props.noOptionCaching=false] - If `true`, react-select option caching functionality is disabled. - * @param {boolean} [props.disabled=false] - If set `true`, the component is disabled. - * @param {boolean} [props.keepMenuOpenAfterSelect=false] - If set `true`, the dropdown is not closed immediately after selecting an option. - * @param {string?} [props.placeholder] - Placeholder text when nothing is selected. - * @param {React.Component?} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator. - * @param {React.Component?} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button. - * @param {React.Component?} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`). - * @param {React.Component?} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`). - * @param {React.Component?} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`). - * @param {React.Component?} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`. - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Please make sure to include `label`, `value` keys and `id` keys, additional fields can be added as required. - * @param {string?} [props.additionalClasses=''] - If provided, the classes are added to the component container. - * @param {string?} [props.additionalSelectClasses=''] - If provided, the classes are added to the Select element itself. - * @param {object?} [props.additionalProps={}] - If provided, the provided props will be passed to the Select control. + * @param {callback>?} props.loadOptions - An async callback that fetches an array of `{label: '', value: ''}`-formatted items. + * @param {object} props.value - Current value + * @param {function} props.onChange - Function called when the selection is changed. + * @param {boolean} [props.clearable=false] - If `true`, a button to remove all items is shown. + * @param {boolean} [props.noSearch=false] - If `true`, the search functionality is disabled. + * @param {boolean} [props.disabled=false] - If set `true`, the component is disabled. + * @param {boolean} [props.keepMenuOpenAfterSelect=false] - If set `true`, the dropdown is not closed immediately after selecting an option. + * @param {string?} [props.placeholder] - Placeholder text when nothing is selected. + * @param {React.Component?} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator. + * @param {React.Component?} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button. + * @param {React.Component?} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`). + * @param {React.Component?} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`). + * @param {React.Component?} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`). + * @param {React.Component?} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`. + * @param {function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Please make sure to include `label`, `value` keys and `id` keys, additional fields can be added as required. + * @param {string?} [props.additionalClasses=''] - If provided, the classes are added to the component container. + * @param {string?} [props.additionalSelectClasses=''] - If provided, the classes are added to the Select element itself. + * @param {object?} [props.additionalProps={}] - If provided, the provided props will be passed to the Select control. */ export const AsyncMultiSelect = (props) => { const { @@ -63,7 +50,6 @@ export const AsyncMultiSelect = (props) => { clearable = false, noSearch = false, - noOptionCaching = false, disabled = false, @@ -79,67 +65,38 @@ export const AsyncMultiSelect = (props) => { customValueRemove, customValueContainer, - noBottomSpacing, - reducedBottomSpacing, - processLoadedOptions = (options) => options, - additionalClasses, additionalSelectClasses, additionalProps, } = props; - const customLoadOptions = async (searchText) => { - const results = await loadOptions(searchText); - return processLoadedOptions(results?.map((item) => ({ id: item.value, ...item })) ?? []); - }; - return ( - - - id)}> - - - - + inline={inlineLabel} + preloadOptions={preloadOptions} + loadOptions={loadOptions} + value={value} + onChange={onChange} + clearable={clearable} + noSearch={noSearch} + disabled={disabled} + keepMenuOpenAfterSelect={keepMenuOpenAfterSelect} + placeholder={placeholder} + customClearIndicator={customClearIndicator} + customDropdownArrow={customDropdownArrow} + customMenuOption={customMenuOption} + customValueDisplay={customValueDisplay} + customValueRemove={customValueRemove} + customValueContainer={customValueContainer} + processLoadedOptions={processLoadedOptions} + className={additionalSelectClasses} + {...additionalProps} + /> ); }; diff --git a/scripts/components/custom-select/async-single-select.js b/scripts/components/custom-select/async-single-select.js index 83dc40467..afd596c40 100644 --- a/scripts/components/custom-select/async-single-select.js +++ b/scripts/components/custom-select/async-single-select.js @@ -1,40 +1,34 @@ import React from 'react'; -import { components } from 'react-select'; -import RSAsyncSelect from 'react-select/async'; -import { defaultEightshiftColorScheme, defaultEightshiftStyles } from './custom-select-style'; -import { CustomSelectDefaultClearIndicator, CustomSelectDefaultDropdownIndicator } from './custom-select-default-components'; -import { Control } from '../base-control/base-control'; +import { AsyncSelect as EsUicAsyncSelect } from '@eightshift/ui-components'; /** * A simple, asynchronously-loading, customizable select menu. * - * @param {object} props - AsyncSelect options. - * @param {string?} [props.label] - Label displayed above the control. - * @param {string?} [props.help] - Help text displayed below the control. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. - * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. + * @deprecated Use `AsyncSelect` from `@eightshift/ui-components` instead. + * + * @param {object} props - AsyncSelect options. + * @param {string?} [props.label] - Label displayed above the control. + * @param {string?} [props.help] - Help text displayed below the control. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.subtitle] - Subtitle below the label. + * @param {React.Component?} [props.actions] - Actions to show to the right of the label. + * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. * @param {boolean|array<{string,string}>} [props.preloadOptions=true] - If `true`, the initial loading is done as soon as the component is loaded. If an array of `{label: '', value: ''}` option is provided, that is loaded immediately, dynamic fetching only happens in search. If `false`, nothing is loaded immediately, until you type to search. - * @param {callback>?} props.loadOptions - An async callback that fetches an array of `{label: '', value: ''}`-formatted items. - * @param {object} props.value - Current value - * @param {function} props.onChange - Function called when the selection is changed. - * @param {boolean} [props.clearable=false] - If `true`, a button to remove the value is shown. - * @param {boolean} [props.noSearch=false] - If `true`, the search functionality is disabled. - * @param {boolean} [props.noOptionCaching=false] - If `true`, react-select option caching functionality is disabled. - * @param {boolean} [props.disabled=false] - If set `true`, the component is disabled. - * @param {boolean} [props.closeMenuAfterSelect=false] - If set `true`, the dropdown is closed immediately after selecting an option. - * @param {string?} [props.placeholder] - Placeholder text when nothing is selected. - * @param {React.Component?} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator. - * @param {React.Component?} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button. - * @param {React.Component?} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`). - * @param {React.Component?} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.SingleValue`). - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Please make sure to include `label`, `value` keys and `id` keys, additional fields can be added as required. - * @param {string?} [props.additionalClasses=''] - If provided, the classes are added to the component container. - * @param {string?} [props.additionalSelectClasses=''] - If provided, the classes are added to the Select element itself. - * @param {object?} [props.additionalProps={}] - If provided, the provided props will be passed to the Select control. + * @param {callback>?} props.loadOptions - An async callback that fetches an array of `{label: '', value: ''}`-formatted items. + * @param {object} props.value - Current value + * @param {function} props.onChange - Function called when the selection is changed. + * @param {boolean} [props.clearable=false] - If `true`, a button to remove the value is shown. + * @param {boolean} [props.noSearch=false] - If `true`, the search functionality is disabled. + * @param {boolean} [props.disabled=false] - If set `true`, the component is disabled. + * @param {boolean} [props.closeMenuAfterSelect=false] - If set `true`, the dropdown is closed immediately after selecting an option. + * @param {string?} [props.placeholder] - Placeholder text when nothing is selected. + * @param {React.Component?} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator. + * @param {React.Component?} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button. + * @param {React.Component?} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`). + * @param {React.Component?} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.SingleValue`). + * @param {function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Please make sure to include `label`, `value` keys and `id` keys, additional fields can be added as required. + * @param {string?} [props.additionalSelectClasses=''] - If provided, the classes are added to the Select element itself. + * @param {object?} [props.additionalProps={}] - If provided, the provided props will be passed to the Select control. */ export const AsyncSelect = (props) => { const { @@ -53,7 +47,6 @@ export const AsyncSelect = (props) => { clearable = false, noSearch = false, - noOptionCaching = false, disabled = false, @@ -66,58 +59,36 @@ export const AsyncSelect = (props) => { customMenuOption, customValueDisplay, - noBottomSpacing, - reducedBottomSpacing, - processLoadedOptions = (options) => options, - additionalClasses, additionalSelectClasses, additionalProps, } = props; - const customLoadOptions = async (searchText) => { - const results = await loadOptions(searchText); - return processLoadedOptions(results?.map((item) => ({ id: item.value, ...item })) ?? []); - }; - return ( - - - + inline={inlineLabel} + preloadOptions={preloadOptions} + loadOptions={loadOptions} + value={value} + onChange={onChange} + clearable={clearable} + noSearch={noSearch} + disabled={disabled} + keepMenuOpenAfterSelect={!closeMenuAfterSelect} + placeholder={placeholder} + customClearIndicator={customClearIndicator} + customDropdownIndicator={customDropdownArrow} + customMenuOption={customMenuOption} + customValueDisplay={customValueDisplay} + processLoadedOptions={processLoadedOptions} + className={additionalSelectClasses} + {...additionalProps} + /> ); }; diff --git a/scripts/components/custom-select/custom-select-default-components.js b/scripts/components/custom-select/custom-select-default-components.js deleted file mode 100644 index 4c45545d3..000000000 --- a/scripts/components/custom-select/custom-select-default-components.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { components } from 'react-select'; -import { icons } from '@eightshift/ui-components/icons'; -import { clsx } from '@eightshift/ui-components/utilities'; - -/** - * Default dropdown indicator for CustomSelect. - * - * @param {object} props - components.DropdownIndicator props. -*/ -export const CustomSelectDefaultDropdownIndicator = (props) => { - return ( - - {React.cloneElement(icons.dropdownCaretAlt, { - className: clsx('es-animated-y-flip-icon -es-mr-1', props.selectProps.menuIsOpen && 'is-active'), - })} - - ); -}; - -/** - * Default clear indicator for CustomSelect. - * - * @param {object} props - components.DropdownIndicator props. -*/ -export const CustomSelectDefaultClearIndicator = (props) => ( - - {icons.clear} - -); - -/** - * Default multiple value remove element for CustomSelect. - * - * @param {object} props - components.MultiValueRemove props. -*/ -export const CustomSelectDefaultMultiValueRemove = (props) => ( - - {React.cloneElement(icons.clear, {className: 'es-w-4 es-h-4'})} - -); diff --git a/scripts/components/custom-select/custom-select-style.js b/scripts/components/custom-select/custom-select-style.js deleted file mode 100644 index ad4ab649e..000000000 --- a/scripts/components/custom-select/custom-select-style.js +++ /dev/null @@ -1,155 +0,0 @@ -/** - * Default styles shared by all Select components. - */ - -// Shared default color scheme. -export const defaultEightshiftColorScheme = (theme) => { - return ({ - ...theme, - borderRadius: 4, - colors: { - ...theme.colors, - primary25: 'var(--es-admin-cool-gray-100)', - primary50: 'var(--es-admin-cool-gray-200)', - primary75: 'var(--es-admin-cool-gray-600)', - primary: 'var(--wp-admin-theme-color, var(--es-admin-accent-color-default))', - danger: 'var(--es-admin-red-500)', - neutral0: 'var(--es-admin-pure-white)', - neutral5: 'var(--es-admin-cool-gray-50)', - neutral10: 'var(--es-admin-cool-gray-100)', - neutral20: 'var(--es-admin-cool-gray-200)', - neutral30: 'var(--es-admin-cool-gray-300)', - neutral40: 'var(--es-admin-cool-gray-400)', - neutral50: 'var(--es-admin-cool-gray-500)', - neutral60: 'var(--es-admin-cool-gray-600)', - neutral70: 'var(--es-admin-cool-gray-700)', - neutral80: 'var(--es-admin-cool-gray-800)', - neutral90: 'var(--es-admin-cool-gray-900)' - }, - }); -}; - -// Shared default styles. -export const defaultEightshiftStyles = { - // Dropdown menu. - menu: (provided, state) => { - let marginStyle = { - marginTop: 4, - }; - - if (state?.placement === 'top') { - marginStyle = { - marginBottom: 4, - }; - } - - return { - ...provided, - ...marginStyle, - zIndex: 9999, - }; - }, - - menuPortal: (provided) => ({ ...provided, zIndex: 9999 }), - - // Main control. - control: (provided, state) => { - return { - ...provided, - '&:hover': { - ...provided['&:hover'], - borderColor: state.theme.colors.neutral50, - }, - borderColor: state.theme.colors.neutral40, - height: state.isMulti ? provided.height : 36, - minHeight: state.isMulti ? provided.minHeight : 36, - }; - }, - - // Option in the dropdown menu. - option: (provided) => ({ - ...provided, - margin: '0.125rem 0.375rem', - width: 'calc(100% - 0.75rem)', - borderRadius: 3, - }), - - // Input TextBox. - input: (provided) => { - return { - ...provided, - padding: 0, - margin: 0, - }; - }, - - // Main container in the dropdown. - valueContainer: (provided, state) => ({ - ...provided, - padding: state.isMulti && state.hasValue ? '0.125rem' : '0.125rem 0.25rem', - }), - - // Multi-item 'chip' - single inner item. - multiValue: (provided, state) => ({ - ...provided, - '&:hover': { - ...provided['&:hover'], - borderColor: state.theme.colors.neutral20, - }, - borderRadius: 3, - border: `1px solid ${state.theme.colors.neutral10}`, - backgroundColor: state.theme.colors.neutral10, - cursor: state.isDisabled ? 'none' : 'pointer', - maxWidth: '24ch', - }), - - // Multi-select value label and remove button. - multiValueLabel: (provided) => ({ - ...provided, - fontSize: '90%', - padding: '0.2rem 0.25rem', - paddingLeft: '0.25rem', // To override the default. - display: 'flex', - alignItems: 'center', - }), - - multiValueRemove: (provided) => ({ - ...provided, - paddingLeft: '0.25rem', - paddingRight: '0.25rem', - paddingTop: '0.25rem', - paddingBottom: '0.25rem', - borderRadius: '0 0.125rem 0.125rem 0', - }), - - // Indicators (dropdown arrow, clear all button, ...). - dropdownIndicator: (provided, state) => ({ - ...provided, - '&:hover': { - ...provided['&:hover'], - color: state.theme.colors.neutral50, - }, - color: state.theme.colors.neutral40, - padding: 0, - margin: 0, - width: '1.5rem', - }), - clearIndicator: (provided, state) => ({ - ...provided, - '&:hover': { - ...provided['&:hover'], - color: state.theme.colors.neutral50, - }, - color: state.theme.colors.neutral40, - padding: 0, - margin: 0, - width: '1.5rem', - }), - loadingIndicator: (provided, state) => ({ - ...provided, - color: state.theme.colors.neutral40, - padding: 0, - margin: 0, - width: '1.5rem', - }), -}; diff --git a/scripts/components/custom-select/custom-select.scss b/scripts/components/custom-select/custom-select.scss deleted file mode 100644 index d25f60d73..000000000 --- a/scripts/components/custom-select/custom-select.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Item with icon on the left. -.es-custom-select-flex { - display: flex; - align-items: center; - - svg { - height: 1.25rem; - width: 1.25rem; - margin-right: 0.4rem; - color: currentColor; - } -} - -// Icon-text option row. -.icon-option-row { - display: grid; - align-items: center; - grid-template-columns: 0.6rem 1fr; - grid-gap: 1rem; - - i { - margin: 0; - padding: 0; - - svg { - width: 1.2rem; - height: 1.2rem; - } - } - - &--color { - i { - color: var(--wp-admin-theme-color, var(--es-admin-accent-color-default)); - } - } -} diff --git a/scripts/components/custom-select/multi-select-components.js b/scripts/components/custom-select/multi-select-components.js deleted file mode 100644 index ea8d047ef..000000000 --- a/scripts/components/custom-select/multi-select-components.js +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { arrayMove } from '@dnd-kit/sortable'; -import { useSortable } from '@dnd-kit/sortable'; -import { useDroppable } from '@dnd-kit/core'; -import { CSS } from '@dnd-kit/utilities'; - -export const getDragEndHandler = (onChange, items) => { - return (event) => { - const { active, over } = event; - - if (active.id !== over.id && items) { - const mappedItems = items.map(({ id }) => id); - const oldIndex = mappedItems?.indexOf(active.id) ?? -1; - const newIndex = mappedItems?.indexOf(over.id) ?? -1; - - onChange(arrayMove([...items], oldIndex, newIndex)); - } - - }; -}; - -export const getMultiValue = (ComponentToRender) => { - return (props) => { - const onMouseDown = (e) => { - e.preventDefault(); - e.stopPropagation(); - }; - - const innerProps = { ...props.innerProps, onMouseDown }; - - const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.data.id }); - - const style = { - transform: CSS.Transform.toString(transform), - transition, - }; - - return ( -
- -
- ); - }; -}; - -export const getMultiValueContainer = (ComponentToRender) => { - return (props) => { - const { setNodeRef } = useDroppable({ id: 'droppable' }); - - return ( -
- -
- ); - }; -}; - -export const getMultiValueRemove = (ComponentToRender) => { - return (props) => ( - e.stopPropagation(), - ...props.innerProps, - }} - /> - ); -}; diff --git a/scripts/components/custom-select/multi-select.js b/scripts/components/custom-select/multi-select.js index 44741891b..ac508f309 100644 --- a/scripts/components/custom-select/multi-select.js +++ b/scripts/components/custom-select/multi-select.js @@ -1,48 +1,35 @@ import React from 'react'; -import Select, { components } from 'react-select'; -import { DndContext } from '@dnd-kit/core'; -import { restrictToParentElement } from '@dnd-kit/modifiers'; -import { SortableContext } from '@dnd-kit/sortable'; -import { defaultEightshiftColorScheme, defaultEightshiftStyles } from './custom-select-style'; -import { - CustomSelectDefaultClearIndicator, - CustomSelectDefaultDropdownIndicator, - CustomSelectDefaultMultiValueRemove, -} from './custom-select-default-components'; -import { getDragEndHandler, getMultiValue, getMultiValueContainer, getMultiValueRemove } from './multi-select-components'; -import { customOnChange, getValue } from './shared'; -import { Control } from '../base-control/base-control'; +import { MultiSelect as EsUicMultiSelect } from '@eightshift/ui-components'; /** * Multi-select, re-orderable select menu. * - * @param {object} props - MultiSelect options. - * @param {string?} [props.label] - Label displayed above the control. - * @param {string?} [props.help] - Help text displayed below the control. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. - * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. - * @param {array<{string, string}>?} props.options - Options to choose from. Option should be in `{label: '', value: ''}` format. - * @param {object} props.value - Current value - * @param {function} props.onChange - Function called when the selection is changed. - * @param {boolean} [props.simpleValue=false] - If `true`, instead of passing (and getting) a `{label: '', value: ''}` object from the component, only the value is returned. - * @param {boolean} [props.clearable=false] - If `true`, a button to remove all items is shown. - * @param {boolean} [props.noSearch=false] - If `true`, the search functionality is disabled. - * @param {boolean} [props.disabled=false] - If set `true`, the component is disabled. - * @param {boolean} [props.keepMenuOpenAfterSelect=false] - If set `true`, the dropdown is not closed immediately after selecting an option. - * @param {string?} [props.placeholder] - Placeholder text when nothing is selected. + * @deprecated Use `MultiSelect` from `@eightshift/ui-components` instead. + * + * @param {object} props - MultiSelect options. + * @param {string?} [props.label] - Label displayed above the control. + * @param {string?} [props.help] - Help text displayed below the control. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.subtitle] - Subtitle below the label. + * @param {React.Component?} [props.actions] - Actions to show to the right of the label. + * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. + * @param {array<{string, string}>?} props.options - Options to choose from. Option should be in `{label: '', value: ''}` format. + * @param {object} props.value - Current value + * @param {function} props.onChange - Function called when the selection is changed. + * @param {boolean} [props.simpleValue=false] - If `true`, instead of passing (and getting) a `{label: '', value: ''}` object from the component, only the value is returned. + * @param {boolean} [props.clearable=false] - If `true`, a button to remove all items is shown. + * @param {boolean} [props.noSearch=false] - If `true`, the search functionality is disabled. + * @param {boolean} [props.disabled=false] - If set `true`, the component is disabled. + * @param {boolean} [props.keepMenuOpenAfterSelect=false] - If set `true`, the dropdown is not closed immediately after selecting an option. + * @param {string?} [props.placeholder] - Placeholder text when nothing is selected. * @param {React.Component?} [props.customDropdownIndicator] - If provided, replaces the default dropdown arrow indicator. - * @param {React.Component?} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button. - * @param {React.Component?} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`). - * @param {React.Component?} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`). - * @param {React.Component?} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`). - * @param {React.Component?} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`. - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {string?} [props.additionalClasses=''] - If provided, the classes are added to the component container. - * @param {string?} [props.additionalSelectClasses=''] - If provided, the classes are added to the Select element itself. - * @param {object?} [props.additionalProps={}] - If provided, the provided props will be passed to the Select control. + * @param {React.Component?} [props.customClearIndicator] - If provided and `noClear` is `false`, replaces the default 'Clear all' button. + * @param {React.Component?} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`). + * @param {React.Component?} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`). + * @param {React.Component?} [props.customValueContainer] - If provided, replaces the default items container component (react-select's `components.MultiValueContainer`). + * @param {React.Component?} [props.customValueRemove] - If provided, replaces the default item remove button (react-select's `components.MultiValueRemove`. + * @param {string?} [props.additionalSelectClasses=''] - If provided, the classes are added to the Select element itself. + * @param {object?} [props.additionalProps={}] - If provided, the provided props will be passed to the Select control. */ export const MultiSelect = (props) => { const { @@ -77,58 +64,35 @@ export const MultiSelect = (props) => { customValueRemove, customValueContainer, - noBottomSpacing, - reducedBottomSpacing, - - additionalClasses, additionalSelectClasses, additionalProps, } = props; return ( - - - id)}> - handleChange(e?.target?.value)} - value={inputValue} - disabled={disabled} - placeholder={__('Search or enter URL', 'eightshift-frontend-libs')} - onKeyDown={(e) => { - if (e.key === 'Enter') { - handleCommitUrl(e?.target?.value, true); - } - - if (suggestionsVisible && ['ArrowDown', 'Tab'].includes(e.key)) { - e.preventDefault(); - setSuggestionFocusMessageVisible(false); - suggestionPopoverRef?.current?.querySelector('.components-button')?.focus(); - } - }} - onBlur={(e) => handleCommitUrl(e?.target?.value)} - className='es-w-full es-m-0! es-py-0! es-pl-1! es-pr-0! es-h-7! es-border-transparent! es-focus-border-admin-accent!' - ref={inputRef} - /> - - - }> -
- {anchorIcon} -
- - - - -
- - {inputValue?.length > 0 && suggestionsVisible && - closeSuggestionPanel()} - onFocusOutside={() => closeSuggestionPanel()} - ref={suggestionPopoverRef} - focusOnMount={suggestionFocusMessageVisible ? false : 'firstElement'} - constrainTabbing - > -
- {isLoadingSuggestions && -
- } - label={__('Fetching suggestions', 'eightshift-frontend-libs')} - additionalClasses='es-text-align-left es-gap-1.5! es-w-full es-h-10' - standalone - /> -
- } - - {!isLoadingSuggestions && shownSuggestions.length < 1 && -
- -
- } - - {!isLoadingSuggestions && shownSuggestions?.length > 0 && -
- {shownSuggestions.map((suggestion, i) => { - const { label: title, value: url, metadata: { subtype } } = suggestion; - - let typeIcon = icons.file; - - if (subtype.toLowerCase() === 'url') { - typeIcon = icons.externalLink; - } else if (subtype.toLowerCase() === 'attachment') { - typeIcon = icons.file; - } else if (subtype.toLowerCase() === 'category') { - typeIcon = icons.layoutAlt; - } else if (subtype.toLowerCase() === 'internal') { - typeIcon = icons.anchor; - } else if (subtype.toLowerCase() === 'eightshift-forms') { - typeIcon = icons.formAlt; - } - - if (linkInputCptIconOverrides) { - const overrideIcon = linkInputCptIconOverrides?.[subtype]; - - if (overrideIcon && overrideIcon in icons) { - typeIcon = icons?.[overrideIcon]; - } - } - - if (suggestionTypeIconOverride) { - const overrideIcon = suggestionTypeIconOverride(subtype); - - if (overrideIcon) { - typeIcon = overrideIcon; - } - } - - return ( - - ); - })} -
- } - - -
- -
- -
- - <> -
- -
- {suggestionFocusMessageVisible && - Tab} - label={__('Focus on suggestions', 'eightshift-frontend-libs')} - additionalClasses='es-mb-1' - standalone - /> - } - Esc} - label={__('Close suggestions panel', 'eightshift-frontend-libs')} - standalone - /> -
- -
- + actions={ + <> + {actions} + + {(additionalOptions || additionalOptionTiles) && ( + + {additionalOptions} + {additionalOptionTiles} + + )} + } - - - {!hideOpensInNewTab && - + {!hideOpensInNewTab && ( + onChange({ url: url, newTab: value, isAnchor: isAnchor })} + onChange={(value) => + onChange({ url: url, newTab: value, isAnchor: url?.includes('#') }) + } disabled={disabled} - noBottomSpacing={noBottomSpacing && !(additionalOptions || additionalOptionTiles)} - reducedBottomSpacing={reducedBottomSpacing && !(additionalOptions || additionalOptionTiles)} /> - } - - {hasUrl && (additionalOptions || additionalOptionTiles) && - - {additionalOptionTiles && !disabled && -
- {additionalOptionTiles} -
- } - - {additionalOptions && -
- {additionalOptions} -
- } - - } + )} ); }; diff --git a/scripts/components/matrix-align-control/matrix-align-control.js b/scripts/components/matrix-align-control/matrix-align-control.js index 934e01697..45030005c 100644 --- a/scripts/components/matrix-align-control/matrix-align-control.js +++ b/scripts/components/matrix-align-control/matrix-align-control.js @@ -1,165 +1,46 @@ -import React, { useState } from 'react'; -import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { Control, OptionSelector, PopoverWithTrigger, TileButton } from '../../../scripts'; -import { icons } from '@eightshift/ui-components/icons'; -import { camelCase, upperFirst } from '@eightshift/ui-components/utilities'; +import React from 'react'; +import { MatrixAlign } from '@eightshift/ui-components'; /** + * @deprecated Use `MatrixAlign` from `@eightshift/ui-components` instead. + * * A component that can provide a 3x3 or a 2x2 grid of positions to pick from. * Replaces the default Gutenberg `AlignmentMatrixControl`/`BlockAlignmentMatrixControl`/`BlockAlignmentMatrixToolbar`. * - * @typedef {'wp'|'tileButton'|'inline'} MatrixAlignControlType * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin * * @param {object} props - MatrixAlignControl options. - * @param {MatrixAlignControlType} [props.type='wp'] - Style of the option trigger. `wp` replicates the default Gutenberg control, `tileButton` shows a regular button that fits with a `tileButton` IconToggle well. * @param {'3x3'|'2x2'} [props.size='3x3'] - Defines the matrix size to show. Can be either `3x3` or `2x2`. * @param {React.Component?} [props.label] - Label displayed on the trigger button. (tooltip when style is `wp`, text label below icon when style is `tileButton`) * @param {string} props.value - Current value. * @param {function} [props.onChange] - Function that is called on every value change. - * @param {string?} [props.additionalTriggerClasses] - If provided, the classes are appended to the trigger button. * @param {React.Component?} [props.icon] - Icon to show next to the label * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. * @param {AppearOrigin} [props.popoverPosition='top center'] - Position where the popover appears. */ export const MatrixAlignControl = (props) => { const { - type = 'wp', size = '3x3', label = __('Position', 'eightshift-frontend-libs'), value, onChange, - additionalTriggerClasses, icon, subtitle, - noBottomSpacing, - reducedBottomSpacing, popoverPosition, } = props; - const [currentValue, setCurrentValue] = useState(value); - - const allSizeOptions = [ - { - value: 'top left', - label: __('Top-left', 'eightshift-frontend-libs'), - availableOn: ['3x3', '2x2'] - }, - { - value: 'top center', - label: __('Top-center', 'eightshift-frontend-libs'), - availableOn: ['3x3'] - }, - { - value: 'top right', - label: __('Top-right', 'eightshift-frontend-libs'), - availableOn: ['3x3', '2x2'] - }, - { - value: 'center left', - label: __('Center-left', 'eightshift-frontend-libs'), - availableOn: ['3x3'] - }, - { - value: 'center center', - label: __('Center', 'eightshift-frontend-libs'), - availableOn: ['3x3'] - }, - { - value: 'center right', - label: __('Center-right', 'eightshift-frontend-libs'), - availableOn: ['3x3'] - }, - { - value: 'bottom left', - label: __('Bottom-left', 'eightshift-frontend-libs'), - availableOn: ['3x3', '2x2'] - }, - { - value: 'bottom center', - label: __('Bottom-center', 'eightshift-frontend-libs'), - availableOn: ['3x3'] - }, - { - value: 'bottom right', - label: __('Bottom-right', 'eightshift-frontend-libs'), - availableOn: ['3x3', '2x2'] - }, - ]; - - // Set icons for (in)active options. - const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size)).map((item) => ({ - ...item, - icon: item.value === currentValue ? icons.matrixAlignControlDotActive : icons.matrixAlignControlDotInactive, - })); - const mainControl = ( - onChange(currentValue)} - contentClass='es-p-1' - position={popoverPosition ?? (type === 'inline' ? 'middle right' : 'bottom right')} - trigger={ - ({ ref, setIsOpen, isOpen }) => { - if (type === 'wp' || type === 'inline') { - return ( - + ); }; diff --git a/scripts/components/menu/menu-separator.js b/scripts/components/menu/menu-separator.js index a3dbd5f10..1e96f0d70 100644 --- a/scripts/components/menu/menu-separator.js +++ b/scripts/components/menu/menu-separator.js @@ -1,10 +1,13 @@ import React from 'react'; +import { MenuSeparator as EsUicMenuSeparator } from '@eightshift/ui-components'; /** * @since 8.5.0 * + * @deprecated Use `MenuSeparator` from `@eightshift/ui-components` instead. + * * A simple menu separator. */ export const MenuSeparator = () => ( -
+ ); diff --git a/scripts/components/menu/menu.js b/scripts/components/menu/menu.js index 52cda8a3e..a58e7c8c5 100644 --- a/scripts/components/menu/menu.js +++ b/scripts/components/menu/menu.js @@ -1,25 +1,22 @@ import React from 'react'; -import { Button } from '@wordpress/components'; -import { PopoverWithTrigger } from '../../../scripts'; -import { clsx } from '@eightshift/ui-components/utilities'; -import { icons } from '@eightshift/ui-components/icons'; +import { Menu as EsUicMenu } from '@eightshift/ui-components'; /** * @since 8.5.0 * + * @deprecated Use `Menu` from `@eightshift/ui-components` instead. + * * A simple dropdown menu. * - * @param {object} props - Menu options. - * @param {React.Component?} [props.icon] - Icon to show within the menu open button. - * @param {(string|React.Component)?} [props.label] - Label to show inside the menu open button. + * @param {object} props - Menu options. + * @param {React.Component?} [props.icon] - Icon to show within the menu open button. + * @param {(string|React.Component)?} [props.label] - Label to show inside the menu open button. * @param {(string|React.Component)?} [props.tooltip] - Tooltip to show on the menu open button. - * @param {boolean?} [props.disabled=false] - If `true`, the menu open button is disabled. - * @param {string?} [props.buttonClass] - Replace the menu open default class. - * @param {string?} [props.additionalClass] - Pass custom class(es) to the menu open button. - * @param {object?} [props.buttonProps] - Pass custom props to the menu open button. - * @param {boolean?} [props.isSubmenu=false] - If `true`, the styling of the menu toggle matches the styling of `MenuItem`s. - * @param {object?} [props.popoverProps] - Pass custom props to the popover that contains the menu items. - * @param {string?} [props.popoverAdditionalClass] - Pass custom class(es) to the popover that contains the menu items. + * @param {boolean?} [props.disabled=false] - If `true`, the menu open button is disabled. + * @param {string?} [props.buttonClass] - Replace the menu open default class. + * @param {string?} [props.additionalClass] - Pass custom class(es) to the menu open button. + * @param {object?} [props.buttonProps] - Pass custom props to the menu open button. + * @param {object?} [props.popoverProps] - Pass custom props to the popover that contains the menu items. */ export const Menu = (props) => { const { @@ -30,72 +27,27 @@ export const Menu = (props) => { disabled = false, buttonClass, - additionalClass, buttonProps, - isSubmenu = false, - popoverProps, - popoverAdditionalClass, children, } = props; - let buttonClassname = clsx( - // eslint-disable-next-line max-len - 'es-slight-button-border-cool-gray-400 es-hover-slight-button-border-admin-accent es-active-slight-button-border-admin-accent es-focus-slight-button-border-admin-accent es-nested-size-5', - // eslint-disable-next-line max-len - 'es-nested-m-0! es-gap-1.25! es-bg-pure-white es-text-3.25! es-color-cool-gray-650 es-rounded-1.5! es-flex-shrink-0 es-min-w-auto!', - !label && 'es-size-9', - label && 'es-px-2.5!', - additionalClass, - ); - - if (isSubmenu) { - buttonClassname = clsx( - 'es-rounded-1.5 es-gap-1.5! es-transition-colors es-min-w-max! es-nested-m-0!', - !disabled && 'es-hover-color-current! es-hover-bg-cool-gray-50 es-nested-color-cool-gray-450', - disabled && 'es-nested-color-cool-gray-200', - additionalClass - ); - } - - let innerContent = label; - - if (isSubmenu) { - innerContent = ( -
- {label} - - {icons.chevronRight} -
- ); - } - return ( - ( - - )} - contentClass={clsx('es-p-1 es-v-spaced es-gap-2px! es-min-w-48', popoverAdditionalClass)} - position='bottom right' - noArrow - additionalPopoverProps={isSubmenu && { offset: { mainAxis: -36 } }} - {...popoverProps} + {children} - + ); }; diff --git a/scripts/components/number-picker/number-picker.js b/scripts/components/number-picker/number-picker.js index 8f7b7a9f7..521e4e30d 100644 --- a/scripts/components/number-picker/number-picker.js +++ b/scripts/components/number-picker/number-picker.js @@ -1,15 +1,11 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; -import { Button, __experimentalNumberControl as NumberControl } from '@wordpress/components'; -import { Control } from '../base-control/base-control'; -import { icons } from '@eightshift/ui-components/icons'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { NumberPicker as EsUicNumberPicker } from '@eightshift/ui-components'; -const round = (value, decimals) => { - return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals); -}; /** + * @deprecated Use `NumberControl` from `@eightshift/ui-components` instead. + * * A simple number picker, built on the Gutenberg `NumberControl`. * * @param {object} props - `NumberPicker` options. @@ -19,27 +15,18 @@ const round = (value, decimals) => { * @param {Number} props.value - Current value. * @param {function} [props.onChange] - Function called when the value changes. * @param {boolean} [props.disabled=false] - If `true`, the component is disabled. - * @param {boolean} [props.noDragToChange=false] - If `true`, the up/down drag to change value is disabled. * @param {React.Component?} [props.icon] - Icon to show next to the label * @param {React.Component?} [props.label] - Label to show above component. * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. * @param {React.Component?} [props.help] - Help to show below the control. * @param {React.Component?} [props.children] - Content to show. - * @param {string?} [props.additionalClasses] - Classes to add to the control base. * @param {boolean?} [props.inlineLabel] - If `true`, the label is displayed inline with the control. In that case `actions` are shown below the control. - * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {object?} [props.inputField] - Allows passing raw config data to the `NumberPicker`, e.g. `shiftStep`. * @param {string?} [props.placeholder] - Placeholder to show inside the NumberPicker. * @param {Number?} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values. * @param {string|React.Component} [props.prefix] - If passed, displayed before input field. * @param {string|React.Component} [props.suffix] - If passed, displayed after the input field. - * @param {string} [props.prefixClass] - If passed, replaces the prefix default class. - * @param {string} [props.suffixClass] - If passed, replaces the suffix default class. * @param {React.Component?} [props.extraButton] - If passed, the control is displayed to the right of the spinner buttons. * @param {boolean?} [props.noExtraButtonSeparator=false] - If passed, and the `extraButton` is added, the separator between the spinner buttons and the extra button is hidden. - * @param {int?} [props.roundToDecimals=2] - If passed the number of decimals numbers are rounded to is changed. */ export const NumberPicker = (props) => { const { @@ -50,20 +37,11 @@ export const NumberPicker = (props) => { onChange, disabled = false, - noDragToChange = false, - icon, help, label, - actions, subtitle, inlineLabel, - noBottomSpacing, - reducedBottomSpacing, - - additionalClasses, - - inputField, placeholder, @@ -72,102 +50,28 @@ export const NumberPicker = (props) => { prefix, suffix, - prefixClass, - suffixClass, - extraButton, - noExtraButtonSeparator = false, - - roundToDecimals = 2, } = props; - const spinnerButtonClass = 'es-w-4! es-h-3! es-min-w-4! es-rounded-1! es-button-icon-12 es-p-0! es-hover-bg-cool-gray-100! es-transition'; - const prefixSuffixDefaultClass = 'es-user-select-none es-color-cool-gray-450'; - return ( - -
- {prefix && {prefix}} - - onChange(Number.isInteger(step) ? parseInt(value) : round(value, roundToDecimals))} - disabled={disabled} - isDragEnabled={!noDragToChange} - dragThreshold='20' - shiftStep={(typeof inputField === 'object' && inputField?.shiftStep > 0) ? inputField.shiftStep : 10} - isShiftStepEnabled - spinControls='none' - className='es-number-picker-input es-m-0-bcf! es-p-0-bcf! es-m-0! es-p-0! es-border-none!' - placeholder={placeholder} - __nextHasNoMarginBottom - /> - - {suffix && {suffix}} - -
-
- - {extraButton && !noExtraButtonSeparator && -
- } - - {extraButton && -
- {extraButton} -
- } -
- + {extraButton} + ); }; diff --git a/scripts/components/number-picker/number-picker.scss b/scripts/components/number-picker/number-picker.scss deleted file mode 100644 index 697858135..000000000 --- a/scripts/components/number-picker/number-picker.scss +++ /dev/null @@ -1,44 +0,0 @@ -// stylelint-disable declaration-no-important -.es-number-picker { - .es-number-picker-container { - &:has(.components-input-control__input:focus-visible) { - box-shadow: 0 0 0 2px var(--wp-admin-theme-color, var(--es-admin-accent-color-default)) !important; - } - } - - .es-number-picker-input { - .components-input-control { - &__backdrop { - display: none !important; - } - - &__container { - border: none !important; - box-shadow: none !important; - background: none !important; - - min-height: auto !important; - } - - &__input { - appearance: none; - - margin: 0 !important; - padding: 0 !important; - min-height: auto !important; - - border: none !important; - box-shadow: none !important; - - width: var(--es-number-input-width) !important; - - // Special case for Firefox, as it keeps ignoring appearance none on input[type=number] - // stylelint-disable-next-line max-nesting-depth - @supports (-moz-appearance: textfield) { - // stylelint-disable-next-line property-no-vendor-prefix - -moz-appearance: textfield; - } - } - } - } -} diff --git a/scripts/index.js b/scripts/index.js index 24031704e..ca0042c52 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -11,16 +11,6 @@ export { ColorPalette } from './components/color-palette-custom/color-palette-cu export { ColorPicker } from './components/color-picker-component/color-picker-component'; export { Collapsable } from './components/collapsable/collapsable'; export { Control } from './components/base-control/base-control'; -export { - RSOption, - RSDropdownIndicator, - RSSingleValue, - RSMultiValueRemove, - RSMultiValueContainer, - RSMultiValueLabel, - RSClearIndicator, - RSMultiValue, -} from './components/custom-select/react-select-component-wrappers'; export { ColumnConfigSlider } from './components/custom-slider/column-config-slider'; export { Slider } from './components/custom-slider/custom-slider'; export { RangeSlider } from './components/custom-slider/custom-range-slider'; From ea1990c1575a9c9a5eb2f248c9174d9f07dc20cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 19 Jul 2024 17:09:33 +0200 Subject: [PATCH 34/74] replace more components --- .../option-selector/option-selector.js | 207 +++--------------- .../popover-with-trigger.js | 118 ++-------- 2 files changed, 49 insertions(+), 276 deletions(-) diff --git a/scripts/components/option-selector/option-selector.js b/scripts/components/option-selector/option-selector.js index 9434f6f0a..624d30b51 100644 --- a/scripts/components/option-selector/option-selector.js +++ b/scripts/components/option-selector/option-selector.js @@ -1,36 +1,28 @@ import React from 'react'; -import { Control, IconLabel } from '@eightshift/frontend-libs/scripts'; -import { Button } from '@wordpress/components'; -import { icons } from '@eightshift/ui-components/icons'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { OptionSelect } from '@eightshift/ui-components'; /** + * @deprecated Use `OptionSelect` from `@eightshift/ui-components` instead. + * * Button-based option selector, inspired by WP 5.9. * - * @param {object} props - OptionSelector options. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.help] - Help text displayed below the control. - * @param {React.Component?} [props.label] - Label displayed above the control. - * @param {boolean?} [props.inlineLabel] - Label displayed inline with the control. - * @param {React.Component?} [props.actions] - Actions to show to the right of the label. - * @param {React.Component?} [props.subtitle] - Subtitle below the label. - * @param {any} [props.value] - Current value. - * @param {function} [props.onChange] - Function that is called on every value change. - * @param {boolean} [props.disabled=false] - If `true`, the component will be disabled. - * @param {array} [props.options] - Options to show, either values or objects with {label?, value, icon?, subtitle?} - * @param {array<{label, value}>?} [props.optionLabels] - If passed, these labels/icons will be used instead the ones provided with `options`. Must be passed when `options` contain just values. - * @param {'none'|'offset'} [props.border='offset'] - Sets the appearance of a border around the buttons. - * @param {boolean} [props.noWrap=false] - If `false` and there is more options then can fit, the buttons will wrap to the row below. - * @param {'default'|'stretch'|'left'|'center'|'right'|'vertical'} [props.alignment='default'] - If `true` and there is more options then can fit, the buttons will wrap to the row below. - * @param {boolean} [props.iconOnly=false] - If `true`, the buttons will only contain icons. If a label is also passed, it will be used for the button tooltip. - * @param {boolean} [props.largerIcons=false] - If `true`, the icons inside of buttons are rendered larger. - * @param {boolean} [props.compactButtons=false] - If `true`, the buttons are rendered smaller - * @param {boolean} [props.labelOnlyOnActive=false] - If `true`, the label is shown only on the active item. - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. - * @param {string?} [props.additionalClass] - If provided, the classes are appended to the button container. - * @param {string?} [props.additionalButtonClass] - If provided, the classes are appended to the selection buttons. - * @param {string?} [props.additionalContainerClass] - If provided, the classes are appended to the container. + * @param {object} props - OptionSelector options. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.help] - Help text displayed below the control. + * @param {React.Component?} [props.label] - Label displayed above the control. + * @param {boolean?} [props.inlineLabel] - Label displayed inline with the control. + * @param {React.Component?} [props.actions] - Actions to show to the right of the label. + * @param {React.Component?} [props.subtitle] - Subtitle below the label. + * @param {any} [props.value] - Current value. + * @param {function} [props.onChange] - Function that is called on every value change. + * @param {boolean} [props.disabled=false] - If `true`, the component will be disabled. + * @param {array} [props.options] - Options to show, either values or objects with {label?, value, icon?, subtitle?} + * @param {'default'|'stretch'|'left'|'center'|'right'|'vertical'} [props.alignment='default'] - Option alignment. + * @param {boolean} [props.iconOnly=false] - If `true`, the buttons will only contain icons. If a label is also passed, it will be used for the button tooltip. + * @param {boolean} [props.compactButtons=false] - If `true`, the buttons are rendered smaller + * @param {string?} [props.additionalClass] - If provided, the classes are appended to the button container. + * @param {string?} [props.additionalButtonClass] - If provided, the classes are appended to the selection buttons. + * @param {string?} [props.additionalContainerClass] - If provided, the classes are appended to the container. */ export const OptionSelector = (props) => { const { @@ -47,166 +39,33 @@ export const OptionSelector = (props) => { disabled = false, options, - optionLabels, - border = 'offset', - noWrap = false, alignment = 'default', iconOnly = false, - largerIcons = false, compactButtons = false, - labelOnlyOnActive = false, - - noBottomSpacing, - reducedBottomSpacing, - additionalClass, additionalButtonClass, additionalContainerClass, } = props; - const buttonClasses = clsx( - iconOnly && 'es-button-square-36', - largerIcons && 'es-button-icon-24', - border === 'offset' && 'es-rounded-0.75! es-p-1.5!', - additionalButtonClass - ); - - const getSpacingConfig = (alignment) => { - switch (alignment) { - case 'left': - return 'es-mr-auto es-content-start es-w-max'; - case 'center': - return 'es-mx-auto es-content-center es-w-max'; - case 'right': - return 'es-ml-auto es-content-center es-w-max'; - case 'stretch': - return 'es-content-between es-w-full'; - case 'vertical': - return 'es-flex-col es-w-full'; - default: - return 'es-w-max'; - } - }; - - const control = ( -
- {options.map((item, i) => { - const iconData = icons?.[item?.icon] ?? item?.icon ?? optionLabels?.[i]?.icon; - - let icon = iconData; - - if (iconData && typeof iconData === 'string' && (iconData?.startsWith(' - ); - } - - const label = item?.label ?? optionLabels?.[i]?.label; - const current = optionLabels ? item : item?.value; - const tooltip = item?.tooltip ?? optionLabels?.[i]?.tooltip ?? item?.label ?? optionLabels?.[i]?.label; - const subtitle = item?.subtitle ?? optionLabels?.[i]?.subtitle; - - if (icon && !label && !subtitle) { - return ( - - ); - } else if (icon && label && subtitle) { - return ( - - ); - } - - return ( - - ); - })} -
- ); - return ( - - {control} - + value={value} + onChange={onChange} + disabled={disabled} + options={options} + vertical={alignment === 'vertical'} + noItemLabel={iconOnly} + itemProps={{ size: compactButtons ? 'small' : 'default' }} + className={additionalContainerClass} + itemClassName={additionalButtonClass} + /> ); }; diff --git a/scripts/components/popover-with-trigger/popover-with-trigger.js b/scripts/components/popover-with-trigger/popover-with-trigger.js index 924a01fca..cc95aaba2 100644 --- a/scripts/components/popover-with-trigger/popover-with-trigger.js +++ b/scripts/components/popover-with-trigger/popover-with-trigger.js @@ -1,129 +1,43 @@ -import React, { useState, useRef } from 'react'; -import { Popover } from '@wordpress/components'; +import React from 'react'; +import { TriggeredPopover } from '@eightshift/ui-components'; /** + * @deprecated Use `TriggeredPopover` from `@eightshift/ui-components` instead. + * * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin * * @param {object} props - PopoverWithTrigger options. * @param {string?} [props.popoverClass] - Class applied to the main (outer) popover. - * @param {string?} [props.contentClass='es-popover-content'] - Class applied to inner popover content. * @param {AppearOrigin} [props.position='top center'] - Position where the popover appears. - * @param {boolean?} [props.noArrow=false] - If `true`, the popover doesn't render an arrow pointing to the trigger element. - * @param {React.Component} props.trigger - Trigger element. *Needs to return a React component!* `{ ref, setIsOpen, isOpen }` is passed as props. Use `setIsOpen(true)` to open the modal. Attach the `ref` to some place inside the trigger to make sure the positioning is correct. * @param {React.Component?} props.children - Popover contents. * @param {function?} [props.additionalCloseActions] - If provided, will be run before the popover closes. - * @param {boolean} [props.allowCloseFromChildren=false] - If `true`, child items are injected with a `popoverClose` prop that closes the popover when called. * @param {object?} [props.additionalPopoverProps] - If passed, the props are passed to the Popover component. * @returns */ export const PopoverWithTrigger = (props) => { const { popoverClass, - contentClass = 'es-popover-content', position = 'top center', - noArrow = false, - - trigger, children, additionalCloseActions, - allowCloseFromChildren = false, - additionalPopoverProps, } = props; - const ref = useRef(); - - const [isOpen, setIsOpen] = useState(false); - - // Recursively processes child items to inject the closing prop or onClick handler. - const processChildItems = (rawItems) => { - let items = rawItems; - - // If it's a single child, place it in array, so the processing is unified. - if (!Array.isArray(rawItems)) { - items = [rawItems]; - } - - const processed = items.filter(Boolean).map((child) => { - // If current child is not an object, bailout. - if (typeof child !== 'object') { - return child; - } - - // If current child doesn't have 'props', bailout. - if (!('props' in child)) { - return child; - } - - const processedChildren = processChildItems(child?.props?.children); - - // If 'esClosesModalOnClick' or 'data-es-popover-close' is set, override the onClick listener. - if (Object.keys(child.props).includes('esClosesModalOnClick') || Object.keys(child.props).includes('data-es-popover-close')) { - return ({ - ...child, - props: { - ...child.props, - children: processedChildren, - onClick: (e) => { - setIsOpen(false); - - if ('props' in child) { - if ('onClick' in child.props) { - child.props.onClick(e); - } - } - } - } - }); - } - - // Otherwise, inject the 'popoverClose' function. - return ({ - ...child, - props: { - ...child.props, - children: processedChildren, - popoverClose: () => setIsOpen(false) - } - }); - }); - - if (!Array.isArray(rawItems)) { - return processed[0]; - } - - return processed; - }; - return ( - <> - {isOpen && - { - if (additionalCloseActions) { - additionalCloseActions(); - } - - setIsOpen(false); - }} - anchor={ref?.current} - noArrow={noArrow} - position={position} - className={popoverClass} - {...additionalPopoverProps} - > -
- {!allowCloseFromChildren && children} - - {allowCloseFromChildren && processChildItems(children)} -
- - } - - {trigger({ ref, setIsOpen, isOpen })} - + { + if (closed) { + additionalCloseActions(); + } + }} + {...additionalPopoverProps} + > + {children} + ); }; From ad15eb8d5584bc236fb7c359961a9652bd669b55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 19 Jul 2024 17:13:19 +0200 Subject: [PATCH 35/74] add missing import --- scripts/components/link-input/link-input.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/components/link-input/link-input.js b/scripts/components/link-input/link-input.js index 5adac0758..66285a39b 100644 --- a/scripts/components/link-input/link-input.js +++ b/scripts/components/link-input/link-input.js @@ -4,6 +4,7 @@ import { Toggle, TriggeredPopover, } from '@eightshift/ui-components'; +import { __ } from '@wordpress/i18n'; import { icons } from '@eightshift/ui-components/icons'; /** From d343307e81c9e2b3dae336e738999cce3e927f9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Mon, 22 Jul 2024 10:18:09 +0200 Subject: [PATCH 36/74] rework built-in components - part 2 --- scripts/components/link-input/link-input.js | 2 + .../components/preset-picker/preset-picker.js | 5 +- scripts/components/section/section.js | 54 +++---- scripts/components/tile-button/tile-button.js | 25 ++-- scripts/components/toggle/toggle.js | 67 ++++----- .../toolbar-option-picker.js | 117 ---------------- scripts/components/use-toggle/use-toggle.js | 132 ++++-------------- 7 files changed, 86 insertions(+), 316 deletions(-) delete mode 100644 scripts/components/toolbar-option-picker/toolbar-option-picker.js diff --git a/scripts/components/link-input/link-input.js b/scripts/components/link-input/link-input.js index 66285a39b..dff89cc1d 100644 --- a/scripts/components/link-input/link-input.js +++ b/scripts/components/link-input/link-input.js @@ -95,6 +95,8 @@ export const LinkInput = ({ /> {!hideOpensInNewTab && ( onChange({ url: url, newTab: value, isAnchor: url?.includes('#') }) diff --git a/scripts/components/preset-picker/preset-picker.js b/scripts/components/preset-picker/preset-picker.js index e0ce884fb..83178b497 100644 --- a/scripts/components/preset-picker/preset-picker.js +++ b/scripts/components/preset-picker/preset-picker.js @@ -1,8 +1,7 @@ import React from 'react'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { Collapsable, Control } from '../../components'; import { icons } from '@eightshift/ui-components/icons'; +import { Menu } from '@eightshift/ui-components'; /** * A picker for presets defined in the manifest, with additional configurable options. @@ -19,8 +18,6 @@ import { icons } from '@eightshift/ui-components/icons'; * @param {React.Component?} [props.label='Presets'] - Label of the component. * @param {React.Component?} [props.help] - Help text to explain that presets will override the current settings. Can be disabled by setting it to `false`. * @param {boolean?} [props.defaultButton=false] - If `true`, the "Default" button is shown. It pulls the defaults from manifest, but can be customized by sending an object (`{label?, icon?, attributes}`) instead of `true`. - * @param {boolean?} [props.noBottomSpacing=false] - If `true`, space below the control is removed. - * @param {boolean?} [props.reducedBottomSpacing=false] - If `true`, space below the control is reduced. */ export const PresetPicker = (props) => { const { diff --git a/scripts/components/section/section.js b/scripts/components/section/section.js index b612466c7..764995fe8 100644 --- a/scripts/components/section/section.js +++ b/scripts/components/section/section.js @@ -1,6 +1,5 @@ import React from 'react'; -import { Collapsable, FancyDivider, Control } from '@eightshift/frontend-libs/scripts'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { Expandable, Spacer } from '@eightshift/ui-components'; /** * Simple section with FancyDivider header. @@ -11,8 +10,6 @@ import { clsx } from '@eightshift/ui-components/utilities'; * @param {React.Component?} [props.subtitle] - If provided, a subtitle is added to the label. * @param {boolean?} [props.showIf] - If provided, the section is only shown if the condition is `true`. * @param {boolean} [props.collapsable=false] - If `true`, the section is render as a `Collapsable`. - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. * @param {string?} [props.additionalClasses] - Allows passing through extra classes. * @param {string?} [props.additionalLabelClasses] - Allows passing through extra classes to the label. * @param {React.Component} props.children - Child items that are shown when expanded. @@ -26,8 +23,6 @@ export const Section = (props) => { showIf, collapsable = false, - noBottomSpacing, - reducedBottomSpacing, additionalClasses, additionalLabelClasses, @@ -41,40 +36,29 @@ export const Section = (props) => { if (collapsable) { return ( - - } - noBottomSpacing={noBottomSpacing} - reducedBottomSpacing={reducedBottomSpacing} + {children} - + ); } return ( - - } - noBottomSpacing={noBottomSpacing} - reducedBottomSpacing={reducedBottomSpacing} - additionalLabelClasses='es-mb-0!' - > -
- {children} -
- + <> + +
{children}
+ ); }; diff --git a/scripts/components/tile-button/tile-button.js b/scripts/components/tile-button/tile-button.js index 175186a00..3e7bb1665 100644 --- a/scripts/components/tile-button/tile-button.js +++ b/scripts/components/tile-button/tile-button.js @@ -1,6 +1,5 @@ -import React, { forwardRef } from 'react'; -import { Button } from '@wordpress/components'; -import { clsx } from '@eightshift/ui-components/utilities'; +import React from 'react'; +import { Button } from '@eightshift/ui-components'; /** * Button with an icon and text below it. @@ -12,7 +11,7 @@ import { clsx } from '@eightshift/ui-components/utilities'; * @param {boolean} [props.isPressed=false] - If `true`, the button renders as pressed. * @param {string} [props.additionalClasses] - Classes passed to the button. */ -export const TileButton = forwardRef((props, ref) => { +export const TileButton = (props) => { const { icon, label, @@ -20,23 +19,21 @@ export const TileButton = forwardRef((props, ref) => { onClick, isPressed = false, + ref, + additionalClasses, } = props; return ( ); -}); +}; diff --git a/scripts/components/toggle/toggle.js b/scripts/components/toggle/toggle.js index 35d15a85a..7dfbc1cfd 100644 --- a/scripts/components/toggle/toggle.js +++ b/scripts/components/toggle/toggle.js @@ -1,7 +1,9 @@ import React from 'react'; -import { ToggleControl, CheckboxControl, Button } from '@wordpress/components'; -import { IconLabel, TileButton } from '../..'; -import { clsx } from '@eightshift/ui-components/utilities'; +import { + Checkbox, + ToggleButton, + Toggle as EsUicToggle, +} from '@eightshift/ui-components'; /** * Custom toggle control. @@ -15,8 +17,6 @@ import { clsx } from '@eightshift/ui-components/utilities'; * @param {boolean} props.checked - Is the component currently in use. * @param {function} props.onChange - `onChange` handler from the `ToggleSwitch`/`CheckboxControl`. * @param {boolean} [props.disabled=false] - If `true`, control is disabled. - * @param {boolean} [props.noBottomSpacing=false] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. * @param {string?} [props.additionalClasses] - If provided, classes are passed to the underlying component. */ export const Toggle = ({ @@ -33,56 +33,47 @@ export const Toggle = ({ disabled = false, - noBottomSpacing = false, - reducedBottomSpacing = false, - additionalClasses, }) => { - if (type === 'tileButton') { + if (type === 'button' || type === 'iconButton' || type === 'tileButton') { return ( - onChange(!checked)} - isPressed={checked} - label={label} + onChange={onChange} + selected={checked} disabled={disabled} - additionalClasses={additionalClasses} - /> + tooltip={type === 'iconButton' && label} + aria-label={type === 'iconButton' && label} + className={additionalClasses} + > + {(type === 'button' || type === 'tileButton') && label} + ); } - if (type === 'button' || type === 'iconButton') { + if (type === 'checkbox') { return ( - + subtitle={help} + label={label} + icon={icon} + className={additionalClasses} + /> ); } - const ComponentToRender = (type === 'checkbox') ? CheckboxControl : ToggleControl; - - const bottomSpacingClass = reducedBottomSpacing ? 'es-mb-2!' : 'es-mb-5!'; - return ( - {help}} - label={(icon && type !== 'checkbox') ? () : label} - className={clsx(noBottomSpacing ? 'es-mb-0!' : bottomSpacingClass, additionalClasses)} + subtitle={help} + label={label} + icon={icon} + className={additionalClasses} /> ); }; diff --git a/scripts/components/toolbar-option-picker/toolbar-option-picker.js b/scripts/components/toolbar-option-picker/toolbar-option-picker.js deleted file mode 100644 index f3e65a0ec..000000000 --- a/scripts/components/toolbar-option-picker/toolbar-option-picker.js +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; -import { DropdownMenu, ToolbarGroup } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { icons } from '@eightshift/ui-components/icons'; - -/** - * A flexible picker of mutually exclusive options. - * - * @deprecated since 8.0.0 - Use `OptionSelector` inside the block options instead. - * @see OptionSelector - * - * @param {object} props - ToolbarOptionPicker options. - * @param {object} props.value - Current value - * @param {function} props.onChange - Function called when the selection is changed. - * @param {array} props.options - Options to choose. Option should be in `{title: '', value: '', icon: ''}` format - `title` and `value` are strings, `icon` is a JSX SVG component. - * @param {string?} props.label - Label describing the component (doesn't apply if in *inline* mode). - * @param {string} [props.screenReaderDescription] - How the component is described by a screen reader, default format is *Change
+ } > { items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy} > -
+
{children.map((item, i) => ( {
- + ); }; diff --git a/scripts/components/repeater/sortable-item.js b/scripts/components/repeater/sortable-item.js index a435b78bd..287801005 100644 --- a/scripts/components/repeater/sortable-item.js +++ b/scripts/components/repeater/sortable-item.js @@ -1,9 +1,9 @@ -import React, { useState } from 'react'; +import React from 'react'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; -import { IconLabel, AnimatedContentVisibility, Menu, MenuItem } from '@eightshift/frontend-libs/scripts'; +import { Button as GutenbergButton } from '@wordpress/components'; import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; +import { RichLabel, Menu, MenuItem, Expandable } from '@eightshift/ui-components'; import { icons } from '@eightshift/ui-components/icons'; import { clsx } from '@eightshift/ui-components/utilities'; @@ -21,28 +21,20 @@ export const SortableItem = (props) => { title, subtitle, onRemove, - isActive, isOnly, - additionalLabelClass, noReordering, hideRemove, additionalMenuOptions, preIcon, - additionalItemContainerClass, additionalLabelContainerClass, - noLeftInset = false, } = props; - const [showChildren, setShowChildren] = useState(false); - - const otherTransitions = 'border-radius 0.5s var(--es-ease-out-back), margin 0.35s var(--es-ease-out-back), border-color 0.3s var(--es-ease-out-cubic)'; - const style = { transform: CSS.Transform.toString(transform), - transition: transition ? `${transition}, ${otherTransitions}` : otherTransitions, + transition: transition, }; - const additionalTriggerProps = (showChildren || noReordering) ? { + const additionalTriggerProps = noReordering ? { disabled: 'disabled', } : { ...attributes, @@ -50,80 +42,53 @@ export const SortableItem = (props) => { }; const itemLabel = ( - ); const expandDisabled = Array.isArray(props?.children) ? props?.children?.filter(Boolean)?.length < 1 : !props?.children; return ( -
-
- {preIcon} - - {itemLabel} - -
- - {!expandDisabled && -
- - {(Array.isArray(props?.children) ? props?.children?.filter(Boolean)?.length > 0 : props?.children) && - -
- {props.children} +
+ + svg]:es-uic-size-5 es-uic-min-w-5 es-uic-w-5', + isOnly ? 'es-uic-hidden' : 'es-uic-opacity-50', + )} + size='small' + icon={icons.reorderGrabberV} + disabled={noReordering} + /> + +
- - } + } + > + {props.children} +
); }; From 78a51c7d122478af2e45165c4bb9b696592feda1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Tue, 23 Jul 2024 16:33:57 +0200 Subject: [PATCH 52/74] tweak responsive --- scripts/components/responsive/responsive.js | 219 +++++++++++--------- 1 file changed, 123 insertions(+), 96 deletions(-) diff --git a/scripts/components/responsive/responsive.js b/scripts/components/responsive/responsive.js index 0200ea123..6986a510d 100644 --- a/scripts/components/responsive/responsive.js +++ b/scripts/components/responsive/responsive.js @@ -1,12 +1,15 @@ import React, { useState, Fragment } from 'react'; import { __, sprintf } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; import { getDefaultBreakpointNames } from '../../helpers'; -import { IconLabel } from '../icon-label/icon-label'; -import { Control } from '../base-control/base-control'; -import { AnimatedContentVisibility } from '../animated-content-visibility/animated-content-visibility'; import { icons } from '@eightshift/ui-components/icons'; import { clsx, upperFirst } from '@eightshift/ui-components/utilities'; +import { + AnimatedVisibility, + BaseControl, + Button, + RichLabel, + ToggleButton, +} from '@eightshift/ui-components'; /** * A component that displays options adjustable across screen sizes. @@ -21,8 +24,6 @@ import { clsx, upperFirst } from '@eightshift/ui-components/utilities'; * @param {array} [props.breakpointLabels] - If provided, labels for breakpoints will use the provided names instead of using the breakpoint name itself. * @param {string?} [props.additionalClasses] - If provided, passes additional classes through to the component. * @param {boolean} [props.inline=false] - If `true`, the control is rendered inline and the options are more compact. Having label, subtitle, icon or help on the child component is not advised. - * @param {boolean} [props.noBottomSpacing] - If `true`, the default bottom spacing is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. * @param {array<{callback: function, isActive: boolean}>} [props.inheritButton] - If provided, an 'Inherit' button is shown on each breakpoint except the first one. For each breakpoint a `callback` function (function that sets/unsets the "inherit" value, usually `undefined`) and a `isActive` flag (`true` if inheriting from parent) need to be provided. */ export const Responsive = (props) => { @@ -41,9 +42,6 @@ export const Responsive = (props) => { additionalClasses, inline = false, - - noBottomSpacing, - reducedBottomSpacing, } = props; const fallbackBreakpointLabels = breakpoints.map((v) => upperFirst(v)); @@ -51,46 +49,45 @@ export const Responsive = (props) => { const [isOpen, setIsOpen] = useState(false); return ( - - {inline && -
+ <> + {inline && ( + {children[0]} -
- } - - -
+ + )} + + + } - additionalLabelClasses={clsx(!isOpen && inline && 'es-mb-0!')} > {children.map((child, index) => { - const breakpointLabel = breakpointLabels?.at(index) ?? fallbackBreakpointLabels.at(index); - const previousBreakpointLabel = index === 0 ? '' : breakpointLabels?.at(index - 1) ?? fallbackBreakpointLabels.at(index - 1); + const breakpointLabel = + breakpointLabels?.at(index) ?? fallbackBreakpointLabels.at(index); + const previousBreakpointLabel = + index === 0 + ? '' + : breakpointLabels?.at(index - 1) ?? + fallbackBreakpointLabels.at(index - 1); const breakpointIcon = icons[`screen${upperFirst(breakpoints[index])}`]; const currentInheritButton = inheritButton?.at(index); @@ -98,34 +95,42 @@ export const Responsive = (props) => { const inheritButtonComponent = ( ); @@ -135,61 +140,83 @@ export const Responsive = (props) => { } return ( - - 0 && -
- + label={ + index === 0 + ? sprintf( + __('%s (default)', 'eightshift-frontend-libs'), + breakpointLabel + ) + : breakpointLabel + } + actions={ + index > 0 && ( + {child} - -
+ + ) } inlineLabel={index === 0} > {index === 0 && child} {index > 0 && currentInheritButton && inheritButtonComponent} - - + + ); } return ( - - + {index > 0 && currentInheritButton && inheritButtonComponent} - + {index === 0 && !isOpen && child} - {index === 0 && isOpen && -
- {child} -
- } - - 0 && isOpen && (currentInheritButton ? !currentInheritButton.isActive : true)} - additionalContainerClasses={clsx(isOpen && index !== children.length - 1 && 'es-mb-3')} + {index === 0 && isOpen &&
{child}
} + + 0 && + isOpen && + (currentInheritButton ? !currentInheritButton.isActive : true) + } + className={clsx( + isOpen && index !== children.length - 1 && 'es-uic-mb-2' + )} > {child} - + ); })} - + ); }; From c12fcf18a240aaeab41d029eda1f7f2f0a446248 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Tue, 23 Jul 2024 16:34:25 +0200 Subject: [PATCH 53/74] tweak widthoffsetrangelisder --- .../width-offset-range-slider.js | 263 ++++++++++-------- 1 file changed, 146 insertions(+), 117 deletions(-) diff --git a/scripts/components/width-offset-range-slider/width-offset-range-slider.js b/scripts/components/width-offset-range-slider/width-offset-range-slider.js index 49219911c..64927553e 100644 --- a/scripts/components/width-offset-range-slider/width-offset-range-slider.js +++ b/scripts/components/width-offset-range-slider/width-offset-range-slider.js @@ -2,8 +2,9 @@ import React from 'react'; import { Responsive, IconLabel } from '@eightshift/frontend-libs/scripts'; import { icons } from '@eightshift/ui-components/icons'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; import { ColumnConfigSlider } from '../custom-slider/column-config-slider'; +import { BaseControl, HStack, ToggleButton } from '@eightshift/ui-components'; +import { clsx } from '@eightshift/ui-components/utilities'; /** * A modern and customizable custom slider. @@ -21,8 +22,6 @@ import { ColumnConfigSlider } from '../custom-slider/column-config-slider'; * @param {boolean} [props.fullWidthToggle=false] - If `true`, the "Fullwidth" toggle is shown. * @param {boolean} [props.autoOffsetToggle=false] - If `true`, the "Automatic offset" toggle is shown. * @param {any} [props.autoOffsetValue] - Value that marks automatic offset. - * @param {boolean?} [props.noBottomSpacing] - If `true`, space below the control is removed. - * @param {boolean?} [props.reducedBottomSpacing] - If `true`, space below the control is reduced. * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the base control. * @param {boolean?} [props.numericValues=false] - If `true`, numeric values are returned instead of strings. Not compatible with `autoOffsetToggle`. * @param {Number} [props.totalNumberOfColumns=12] - Available number of columns to show. @@ -46,9 +45,6 @@ export const WidthOffsetRangeSlider = (props) => { autoOffsetToggle = false, autoOffsetValue = 'auto', - noBottomSpacing, - reducedBottomSpacing, - additionalClasses, numericValues = false, @@ -65,32 +61,34 @@ export const WidthOffsetRangeSlider = (props) => { const breakpointNames = Object.keys(value); - const rawWidths = Object.entries(value).reduce((all, [breakpointName, { width }]) => ({ - ...all, - [breakpointName]: width, - }), {}); - - const rawOffsets = Object.entries(value).reduce((all, [breakpointName, { offset }]) => ({ - ...all, - [breakpointName]: offset, - }), {}); + const rawWidths = Object.entries(value).reduce( + (all, [breakpointName, { width }]) => ({ + ...all, + [breakpointName]: width, + }), + {} + ); - const rawFullWidths = fullWidthToggle && Object.entries(value).reduce((all, [breakpointName, { fullWidth }]) => ({ - ...all, - [breakpointName]: fullWidth, - }), {}); + const rawOffsets = Object.entries(value).reduce( + (all, [breakpointName, { offset }]) => ({ + ...all, + [breakpointName]: offset, + }), + {} + ); - // eslint-disable-next-line max-len - const buttonClass = 'es-has-v2-gutenberg-button-active-state es-slight-button-border es-button-icon-18 es-button-no-icon-spacing es-gap-1.5! es-rounded-1! es-h-8! es-px-2!'; + const rawFullWidths = + fullWidthToggle && + Object.entries(value).reduce( + (all, [breakpointName, { fullWidth }]) => ({ + ...all, + [breakpointName]: fullWidth, + }), + {} + ); return ( - + {breakpointNames.map((breakpoint, index) => { const width = rawWidths[breakpoint]; const offset = rawOffsets[breakpoint]; @@ -124,19 +122,26 @@ export const WidthOffsetRangeSlider = (props) => { const nearestValidWidth = getNearest('width'); const offsetValue = inheritCheck(offset) ? nearestValidOffset : offset; - const parsedOffset = (autoOffsetToggle && offsetValue === autoOffsetValue) ? autoStartOffset : parseInt(offsetValue); + const parsedOffset = + autoOffsetToggle && offsetValue === autoOffsetValue + ? autoStartOffset + : parseInt(offsetValue); - const parsedWidth = parseInt(inheritCheck(width) ? nearestValidWidth : width); - const parsedFullWidth = inheritCheck(fullWidth) ? nearestValidFullWidth : fullWidth; + const parsedWidth = parseInt( + inheritCheck(width) ? nearestValidWidth : width + ); + const parsedFullWidth = inheritCheck(fullWidth) + ? nearestValidFullWidth + : fullWidth; const displayedWidth = parsedWidth + parsedOffset; - const totalNumberOfColumns = rawTotalColumns + (parsedFullWidth === true ? 2 : 0); + const totalNumberOfColumns = + rawTotalColumns + (parsedFullWidth === true ? 2 : 0); return ( { @@ -145,14 +150,15 @@ export const WidthOffsetRangeSlider = (props) => { if (isWidthInherited && !isOffsetInherited) { newValues.offset = stringValues ? String(o) : o; } else if (!isWidthInherited && isOffsetInherited) { - newValues.width = stringValues ? String(w - nearestValidOffset) : w - nearestValidOffset; + newValues.width = stringValues + ? String(w - nearestValidOffset) + : w - nearestValidOffset; } else if (!isWidthInherited && offset === autoOffsetValue) { const newWidth = w - autoStartOffset; if (newWidth > 0) { newValues.width = stringValues ? String(newWidth) : newWidth; } - } else if (!isWidthInherited && !isOffsetInherited) { newValues.width = stringValues ? String(w - o) : w - o; newValues.offset = stringValues ? String(o) : o; @@ -163,118 +169,141 @@ export const WidthOffsetRangeSlider = (props) => { [breakpoint]: { ...value[breakpoint], ...newValues, - } + }, }); }} noWidthHandle={inheritCheck(width)} - noOffsetHandle={inheritCheck(offset) || (index === 0 && offset === autoOffsetValue)} - // eslint-disable-next-line max-len - additionalControlsAbove={!((fullWidthToggle && (index === 0 || !inheritCheck(fullWidth))) || (autoOffsetToggle && index === 0)) ? null : - <> - {fullWidthToggle && (index === 0 || !inheritCheck(fullWidth)) && - - } - - {autoOffsetToggle && index === 0 && - - } - + noOffsetHandle={ + inheritCheck(offset) || + (index === 0 && offset === autoOffsetValue) } - additionalControlsBelow={index === 0 ? null : - + + + } - onBeforeChange={onBeforeChange} onAfterChange={onAfterChange} /> From 8b801d94469cbd6992da11085bab6d4fbff70a4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 24 Jul 2024 09:18:47 +0200 Subject: [PATCH 54/74] fix wrong var name in responsive --- scripts/components/responsive/responsive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/components/responsive/responsive.js b/scripts/components/responsive/responsive.js index 6986a510d..021bd3989 100644 --- a/scripts/components/responsive/responsive.js +++ b/scripts/components/responsive/responsive.js @@ -58,7 +58,7 @@ export const Responsive = (props) => { actions={ <> {inline && ( - + {children[0]} )} From 356003cf1d12b0f5c7e0b7a8ee0f1cf4e48163ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 24 Jul 2024 09:22:42 +0200 Subject: [PATCH 55/74] add new picker components --- .../components/file-pickers/file-picker.js | 246 ++++++++++++++++++ .../components/file-pickers/media-picker.js | 86 ++++++ scripts/components/index.js | 3 + .../picker-placeholder/picker-placeholder.js | 109 ++++++++ scripts/index.js | 34 +-- 5 files changed, 461 insertions(+), 17 deletions(-) create mode 100644 scripts/components/file-pickers/file-picker.js create mode 100644 scripts/components/file-pickers/media-picker.js create mode 100644 scripts/components/picker-placeholder/picker-placeholder.js diff --git a/scripts/components/file-pickers/file-picker.js b/scripts/components/file-pickers/file-picker.js new file mode 100644 index 000000000..8cc28f433 --- /dev/null +++ b/scripts/components/file-pickers/file-picker.js @@ -0,0 +1,246 @@ +import React from 'react'; +import { __ } from '@wordpress/i18n'; +import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { Button, HStack, VStack, FilePlaceholder, AnimatedVisibility } from '@eightshift/ui-components'; +import { icons } from '@eightshift/ui-components/icons'; + +/** + * A customizable button for managing files from the Media library. + * + * @component + * @param {Object} props - Component props. + * @property {ManageFileButtonType} [props.type] - The type of the button (browse, upload, replace). + * @property {Function} props.onChange - Function that handles the change event. + * @property {string} [props.currentId] - ID of the currently selected item. Used for the 'replace' type, to mark the currently selected item. + * @property {boolean} [props.compact] - Whether the button is compact (icon-only). + * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded. + * @property {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons. + * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`. + * + * @returns {JSX.Element} The ManageFileButton component. + * + * @typedef {'browse' | 'upload' | 'replace'} ManageFileButtonType + * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'custom'} ManageFileButtonKind + * + * @example + * + * + */ +export const ManageFileButton = (props) => { + const { + type = 'browse', + onChange, + currentId, + + labels, + allowedTypes, + + kind = 'file', + + compact = false, + } = props; + + const strings = { + file: { + buttonTooltip: { + browse: __('Select a file from Media library', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a file', 'eightshift-frontend-libs-tailwind'), + replace: __('Replace file', 'eightshift-frontend-libs-tailwind'), + }, + buttonLabel: { + browse: __('Select', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload', 'eightshift-frontend-libs-tailwind'), + replace: __('Replace', 'eightshift-frontend-libs-tailwind'), + }, + modalTitle: { + browse: __('Select a file', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a file', 'eightshift-frontend-libs-tailwind'), + replace: __('Select a new file', 'eightshift-frontend-libs-tailwind'), + }, + buttonIcon: { + browse: icons.itemSelect, + upload: icons.upload, + replace: icons.swap, + }, + }, + video: { + buttonTooltip: { + browse: __('Select a video from Media library', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'), + replace: __('Replace video', 'eightshift-frontend-libs-tailwind'), + }, + modalTitle: { + browse: __('Select a video', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a video', 'eightshift-frontend-libs-tailwind'), + replace: __('Select a new video', 'eightshift-frontend-libs-tailwind'), + }, + }, + image: { + buttonTooltip: { + browse: __('Select an image from Media library', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'), + replace: __('Replace image', 'eightshift-frontend-libs-tailwind'), + }, + modalTitle: { + browse: __('Select an image', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload an image', 'eightshift-frontend-libs-tailwind'), + replace: __('Select a new image', 'eightshift-frontend-libs-tailwind'), + }, + }, + subtitle: { + buttonTooltip: { + browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'), + replace: __('Replace subtitle file', 'eightshift-frontend-libs-tailwind'), + }, + modalTitle: { + browse: __('Select a subtitle file', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a subtitle file', 'eightshift-frontend-libs-tailwind'), + replace: __('Select a new subtitle file', 'eightshift-frontend-libs-tailwind'), + }, + }, + geoJson: { + buttonTooltip: { + browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'), + replace: __('Replace GeoJSON file', 'eightshift-frontend-libs-tailwind'), + }, + modalTitle: { + browse: __('Select a GeoJSON file', 'eightshift-frontend-libs-tailwind'), + upload: __('Upload a GeoJSON file', 'eightshift-frontend-libs-tailwind'), + replace: __('Select a new GeoJSON file', 'eightshift-frontend-libs-tailwind'), + }, + }, + custom: { + buttonTooltip: labels?.buttonTooltip, + buttonLabel: labels?.buttonLabel, + modalTitle: labels?.modalTitle, + buttonIcon: labels?.buttonIcon, + }, + }; + + const buttonTooltip = strings?.[kind]?.buttonTooltip?.[type] ?? strings.file.buttonTooltip?.[type]; + const buttonLabel = strings?.[kind]?.buttonLabel?.[type] ?? strings.file.buttonLabel?.[type]; + const buttonIcon = strings?.[kind]?.buttonIcon?.[type] ?? strings.file.buttonIcon?.[type]; + const modalTitle = strings?.[kind]?.modalTitle?.[type] ?? strings.file.modalTitle?.[type]; + + return ( + + onChange({ id, url, ...rest })} + allowedTypes={allowedTypes} + value={type === 'replace' && currentId} + title={modalTitle} + mode={type === 'upload' ? 'upload' : 'browse'} + render={({ open }) => ( + + )} + /> + + ); +}; + +/** + * Renders a component for managing a media file + * + * @component + * @param {Object} props - Component props. + * @property {Function} props.onChange - The function that handles the change event. + * @property {string} props.fileId - ID of the currently selected file. Used to mark the currently selected item when replacing the file. + * @property {string} props.fileName - URL of the currently selected image. + * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden. + * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden. + * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded. + * @property {FileKind} [props.kind] - The kind of file to manage. + * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`. + * + * @returns {JSX.Element} The FileSelector component. + * + * @typedef {'file' | 'image' | 'video' | 'subtitle' | 'geoJson' | 'custom'} FileKind + * + * @example + * + * + */ +export const FileSelector = (props) => { + const { onChange, fileId, fileName, noDelete, noUpload, labels, allowedTypes, kind = 'file' } = props; + + const commonManageFileButtonProps = { + onChange, + allowedTypes, + kind, + labels, + }; + + const removeTooltips = { + file: __('Remove file', 'eightshift-frontend-libs-tailwind'), + image: __('Remove image', 'eightshift-frontend-libs-tailwind'), + video: __('Remove video', 'eightshift-frontend-libs-tailwind'), + subtitle: __('Remove subtitle file', 'eightshift-frontend-libs-tailwind'), + geoJson: __('Remove GeoJSON file', 'eightshift-frontend-libs-tailwind'), + custom: labels?.removeTooltip, + }; + + const fileIcons = { + image: icons.imageFile, + video: icons.videoFile, + subtitle: icons.closedCaptions, + geoJson: icons.fileMetadata, + custom: labels?.removeIcon, + }; + + return ( + + + + + {!noUpload && ( + + )} + + + + + + + {!noDelete && ( + + ); + })} + + {inserter && ( + <> + {__('or', 'fe-libs-tailwind')} + +
+ {inserter} + + {inserter === true && ( + + )} +
+ + )} +
+ ); +}; diff --git a/scripts/index.js b/scripts/index.js index 1f4adaec6..e26c92915 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -15,10 +15,18 @@ export { ColumnConfigSlider } from './components/custom-slider/column-config-sli export { Slider } from './components/custom-slider/custom-slider'; export { RangeSlider } from './components/custom-slider/custom-range-slider'; export { FancyDivider } from './components/fancy-divider/fancy-divider'; +export { + FileSelector, + ManageFileButton, +} from './components/file-pickers/file-picker'; +export { MediaPicker } from './components/file-pickers/media-picker'; export { IconLabel } from './components/icon-label/icon-label'; export { Toggle, IconToggle } from './components/toggle/toggle'; export { Notification } from './components/inline-notification/inline-notification'; -export { LinkInput, LinkEditComponent } from './components/link-input/link-input'; +export { + LinkInput, + LinkEditComponent, +} from './components/link-input/link-input'; export { MatrixAlignControl } from './components/matrix-align-control/matrix-align-control'; export { Menu } from './components/menu/menu'; export { MenuItem } from './components/menu/menu-item'; @@ -26,6 +34,7 @@ export { MenuSeparator } from './components/menu/menu-separator'; export { MultiSelect } from './components/custom-select/multi-select'; export { NumberPicker } from './components/number-picker/number-picker'; export { OptionSelector } from './components/option-selector/option-selector'; +export { PickerPlaceholder } from './components/picker-placeholder/picker-placeholder'; export { PopoverWithTrigger } from './components/popover-with-trigger/popover-with-trigger'; export { PresetPicker } from './components/preset-picker/preset-picker'; export { ReOrderable } from './components/re-orderable/re-orderable'; @@ -43,7 +52,10 @@ export { ServerSideRender } from './components/server-side-render/server-side-re export { Repeater } from './components/repeater/repeater'; export { RepeaterItem } from './components/repeater/repeater-item'; export { TileButton } from './components/tile-button/tile-button'; -export { UseToggle, generateUseToggleConfig } from './components/use-toggle/use-toggle'; +export { + UseToggle, + generateUseToggleConfig, +} from './components/use-toggle/use-toggle'; export { WidthOffsetRangeSlider } from './components/width-offset-range-slider/width-offset-range-slider'; export { generateWidthOffsetRangeSliderConfig } from './components/width-offset-range-slider/auto-config'; @@ -107,11 +119,7 @@ export { } from './editor/editor'; export { getFetchWpApi, fetchFromWpRest, wpSearchRoute } from './editor/fetch'; export { inserter } from './editor/inserter'; -export { - getOption, - getOptionColors, - getOptions -} from './editor/options'; +export { getOption, getOptionColors, getOptions } from './editor/options'; export { pasteInto } from './editor/paste-handler'; export { getAttributes, @@ -121,11 +129,7 @@ export { registerBlocks, registerVariations, } from './editor/registration'; -export { - bem, - selector, - responsiveSelectors, -} from './editor/selectors'; +export { bem, selector, responsiveSelectors } from './editor/selectors'; export { STORE_NAME, BUILD_VERSION, @@ -134,12 +138,8 @@ export { setConfigFlags, } from './editor/store'; - // Helpers export { getDefaultBreakpointNames } from './helpers/breakpoints'; export { cookies } from './helpers/cookies'; export { dynamicImport } from './helpers/dynamic-import'; -export { - luminanceFromHex, - luminanceFromRgb, -} from './helpers/color-helpers'; +export { luminanceFromHex, luminanceFromRgb } from './helpers/color-helpers'; From 51dfebefa8a79d392ce2207c078dabbecfb787e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 24 Jul 2024 11:31:49 +0200 Subject: [PATCH 56/74] add new props to mediapicker --- .../components/file-pickers/media-picker.js | 38 +++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/scripts/components/file-pickers/media-picker.js b/scripts/components/file-pickers/media-picker.js index 5f1e91bcd..512f5ecf6 100644 --- a/scripts/components/file-pickers/media-picker.js +++ b/scripts/components/file-pickers/media-picker.js @@ -5,13 +5,7 @@ import { icons } from '@eightshift/ui-components/icons'; import { ManageFileButton } from './file-picker'; const MediaButton = (props) => { - return ( - - ); + return ; }; /** @@ -25,7 +19,9 @@ const MediaButton = (props) => { * @property {string} props.imageUrl - URL of the currently selected image. * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden. * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden. - * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode. + * @property {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode. + * @property {boolean} [props.hidden] - If `true`, the component will be hidden. + * @property {string[]} [props.allowedTypes=['image']] - Determines types of files which are allowed to be uploaded. * * @returns {JSX.Element} The MediaPicker component. * @@ -41,23 +37,34 @@ const MediaButton = (props) => { * */ export const MediaPicker = (props) => { - const { onChange, imageId, imageAlt, imageUrl, noDelete, noUpload, imageMode } = props; + const { + onChange, + imageId, + imageAlt, + imageUrl, + noDelete, + noUpload, + imageMode, + hidden, + allowedTypes = ['image'], + } = props; + + if (hidden) { + return null; + } return ( - + {!imageUrl && ( <> - + {!noUpload && ( )} @@ -70,6 +77,7 @@ export const MediaPicker = (props) => { type='replace' onChange={onChange} imageId={imageId} + allowedTypes={allowedTypes} /> {!noDelete && ( - } + + {offButton && offButton?.label && offButton?.attributes && ( + <> + setAttributes(offButton.attributes)} + > + {offButton?.label} + + + + + )} -
- {defaultButton && - - } + - {manifest[configPresetsKey].map(({ name: presetName, icon: presetIcon, attributes: presetAttrs }, i) => ( - - ))} -
- + + ) + )} + ); if (controlOnly) { @@ -104,11 +128,7 @@ export const PresetPicker = (props) => { } return ( - + {presetsContent} ); From af8a402297296fcac7e5349810349d5a7c389edb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 25 Jul 2024 18:12:54 +0200 Subject: [PATCH 60/74] tweak widthoffsetrangelisder --- .../width-offset-range-slider/auto-config.js | 46 ++- .../width-offset-range-slider.js | 313 +++++++++--------- 2 files changed, 189 insertions(+), 170 deletions(-) diff --git a/scripts/components/width-offset-range-slider/auto-config.js b/scripts/components/width-offset-range-slider/auto-config.js index 3130ce28f..bb85f6527 100644 --- a/scripts/components/width-offset-range-slider/auto-config.js +++ b/scripts/components/width-offset-range-slider/auto-config.js @@ -3,19 +3,21 @@ import { upperFirst } from '@eightshift/ui-components/utilities'; /** * - * @param {Object} options - Generation configuration. - * @param {string} [options.isFullWidthAttributeName] - Full-width property attribute name. - * @param {string} options.offsetAttributeName - Offset property attribute name. - * @param {string} options.widthAttributeName - Width property attribute name. - * @param {Boolean} [options.showFullWidth=false] - If `true`, the full-width toggle is shown. + * @param {Object} options - Generation configuration. + * @param {string} [options.isFullWidthAttributeName] - Full-width property attribute name. + * @param {string} options.offsetAttributeName - Offset property attribute name. + * @param {string} options.widthAttributeName - Width property attribute name. + * @param {Boolean} [options.showFullWidth=false] - If `true`, the full-width toggle is shown. * @param {Boolean} [options.showOffsetAutoToggle=false] - If `true`, the automatic offset toggle is shown. - * @param {Boolean} [options.numericValues=false] - If `true`, the values returned are `Number`s, instead of `string`s. Not compatible with Auto offset toggle. - * @param {Number} [options.min=1] - Minimum value of the slider. - * @param {Number} [options.numOfColumns=12] - Number of columns available to choose from. - * @param {Object} options.manifest - Component/block manifest. - * @param {Object} options.attributes - Component/block attributes object. - * @param {function} options.setAttributes - Component/block setAttributes function. - * @param {string[]?} [options.breakpointNames] - Breakpoint names to show. + * @param {Boolean} [options.numericValues=false] - If `true`, the values returned are `Number`s, instead of `string`s. Not compatible with Auto offset toggle. + * @param {Number} [options.min=1] - Minimum value of the slider. + * @param {Number} [options.numOfColumns=12] - Number of columns available to choose from. + * @param {Object} options.manifest - Component/block manifest. + * @param {Object} options.attributes - Component/block attributes object. + * @param {function} options.setAttributes - Component/block setAttributes function. + * @param {string[]?} [options.breakpointNames] - Breakpoint names to show. + * @param {string?} [options.defaultBreakpoint] - Default breakpoint to use. Defaults to the first breakpoint defined in `breakpointNames`. + * * @returns Configuration object. */ export const generateWidthOffsetRangeSliderConfig = (options) => { @@ -32,11 +34,13 @@ export const generateWidthOffsetRangeSliderConfig = (options) => { attributes, setAttributes, breakpointNames = getDefaultBreakpointNames(), + defaultBreakpoint = breakpointNames?.[0] ?? 'large', } = options; const widths = checkAttrResponsive(widthAttributeName, attributes, manifest, true); const offsets = checkAttrResponsive(offsetAttributeName, attributes, manifest, true); + const value = breakpointNames.reduce((all, current) => { let additional = {}; @@ -65,10 +69,24 @@ export const generateWidthOffsetRangeSliderConfig = (options) => { additional = { [`${isFullWidthAttributeName}${upperFirst(breakpoint)}`]: attrs.fullWidth, }; } + const output = {}; + + if (breakpoint !== defaultBreakpoint) { + output[`${widthAttributeName}${upperFirst(breakpoint)}`] = attrs.width; + output[`${offsetAttributeName}${upperFirst(breakpoint)}`] = attrs.offset; + } + + if (breakpoint === defaultBreakpoint && typeof attrs.width !== 'undefined') { + output[`${widthAttributeName}${upperFirst(breakpoint)}`] = attrs.width; + } + + if (breakpoint === defaultBreakpoint && typeof attrs.offset !== 'undefined') { + output[`${offsetAttributeName}${upperFirst(breakpoint)}`] = attrs.offset; + } + return { ...all, - [`${widthAttributeName}${upperFirst(breakpoint)}`]: attrs.width, - [`${offsetAttributeName}${upperFirst(breakpoint)}`]: attrs.offset, + ...output, ...additional, }; }, {}); diff --git a/scripts/components/width-offset-range-slider/width-offset-range-slider.js b/scripts/components/width-offset-range-slider/width-offset-range-slider.js index 64927553e..d2671cfde 100644 --- a/scripts/components/width-offset-range-slider/width-offset-range-slider.js +++ b/scripts/components/width-offset-range-slider/width-offset-range-slider.js @@ -1,9 +1,13 @@ import React from 'react'; -import { Responsive, IconLabel } from '@eightshift/frontend-libs/scripts'; +import { Responsive } from '@eightshift/frontend-libs/scripts'; import { icons } from '@eightshift/ui-components/icons'; import { __ } from '@wordpress/i18n'; -import { ColumnConfigSlider } from '../custom-slider/column-config-slider'; -import { BaseControl, HStack, ToggleButton } from '@eightshift/ui-components'; +import { + BaseControl, + HStack, + ToggleButton, + ColumnConfigSlider, +} from '@eightshift/ui-components'; import { clsx } from '@eightshift/ui-components/utilities'; /** @@ -12,21 +16,20 @@ import { clsx } from '@eightshift/ui-components/utilities'; * @typedef {null | 'dots' | true | {Number: string} | {Number: {style, label}}} DotStyle * @typedef {'top'|'bottom'|'hidden'} TooltipPosition * - * @param {object} props - WidthOffsetRangeSlider options. - * @param {React.Component?} [props.icon] - Icon to show next to the label - * @param {React.Component?} [props.label] - Label to show above component. - * @param {Object} [props.value] - Value to use - keys are breakpoint names, values are `width`, `offset`, `fullWidth`. - * @param {function} [props.onChange] - Function to trigger when the value of is changing. - * @param {any} [props.inheritValue] - Value that marks something as inherited. - * @param {function} [props.inheritCheck] - Function that returns a `boolean`, used to decide whether a value is inherited or not. - * @param {boolean} [props.fullWidthToggle=false] - If `true`, the "Fullwidth" toggle is shown. - * @param {boolean} [props.autoOffsetToggle=false] - If `true`, the "Automatic offset" toggle is shown. - * @param {any} [props.autoOffsetValue] - Value that marks automatic offset. - * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the base control. - * @param {boolean?} [props.numericValues=false] - If `true`, numeric values are returned instead of strings. Not compatible with `autoOffsetToggle`. - * @param {Number} [props.totalNumberOfColumns=12] - Available number of columns to show. - * @param {function} [props.onBeforeChange] - Function to trigger when the value of the slider starts changing. - * @param {function} [props.onAfterChange] - Function to trigger when the value of the slider is changed. + * @param {object} props - WidthOffsetRangeSlider options. + * @param {React.Component?} [props.icon] - Icon to show next to the label + * @param {React.Component?} [props.label] - Label to show above component. + * @param {Object} [props.value] - Value to use - keys are breakpoint names, values are `width`, `offset`, `fullWidth`. + * @param {function} [props.onChange] - Function to trigger when the value of is changing. + * @param {any} [props.inheritValue] - Value that marks something as inherited. + * @param {function} [props.inheritCheck] - Function that returns a `boolean`, used to decide whether a value is inherited or not. + * @param {boolean} [props.fullWidthToggle=false] - If `true`, the "Fullwidth" toggle is shown. + * @param {boolean} [props.autoOffsetToggle=false] - If `true`, the "Automatic offset" toggle is shown. + * @param {any} [props.autoOffsetValue] - Value that marks automatic offset. + * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the base control. + * @param {boolean?} [props.numericValues=false] - If `true`, numeric values are returned instead of strings. Not compatible with `autoOffsetToggle`. + * @param {Number} [props.totalNumberOfColumns=12] - Available number of columns to show. + * @param {function} [props.onAfterChange] - Function to trigger when the value of the slider is changed. * @param {int|string} [props.colAutoStartOverride] - If passed, overrides the auto-calculated value of the automatic column start offset. */ export const WidthOffsetRangeSlider = (props) => { @@ -51,7 +54,6 @@ export const WidthOffsetRangeSlider = (props) => { totalNumberOfColumns: rawTotalColumns = 12, - onBeforeChange, onAfterChange, colAutoStartOverride, @@ -134,179 +136,178 @@ export const WidthOffsetRangeSlider = (props) => { ? nearestValidFullWidth : fullWidth; - const displayedWidth = parsedWidth + parsedOffset; + const displayedWidth = parsedWidth + parsedOffset - 1; const totalNumberOfColumns = rawTotalColumns + (parsedFullWidth === true ? 2 : 0); return ( - { - let newValues = {}; - - if (isWidthInherited && !isOffsetInherited) { - newValues.offset = stringValues ? String(o) : o; - } else if (!isWidthInherited && isOffsetInherited) { - newValues.width = stringValues - ? String(w - nearestValidOffset) - : w - nearestValidOffset; - } else if (!isWidthInherited && offset === autoOffsetValue) { - const newWidth = w - autoStartOffset; - - if (newWidth > 0) { - newValues.width = stringValues ? String(newWidth) : newWidth; - } - } else if (!isWidthInherited && !isOffsetInherited) { - newValues.width = stringValues ? String(w - o) : w - o; - newValues.offset = stringValues ? String(o) : o; + <> + + + { + let newValues = {}; + + if (isWidthInherited && !isOffsetInherited) { + newValues.offset = stringValues ? String(o) : o; + } else if (!isWidthInherited && isOffsetInherited) { + newValues.width = stringValues + ? String(w - nearestValidOffset + 1) + : w - nearestValidOffset + 1; + } else if (!isWidthInherited && offset === autoOffsetValue) { + const newWidth = w - autoStartOffset; + + if (newWidth > 0) { + newValues.width = stringValues + ? String(newWidth) + : newWidth; } - selected={parsedFullWidth} - onChange={(value) => { + } else if (!isWidthInherited && !isOffsetInherited) { + newValues.width = stringValues ? String(w - o) : w - o + 1; + newValues.offset = stringValues ? String(o) : o; + } + + onChange({ + ...value, + [breakpoint]: { + ...value[breakpoint], + ...newValues, + }, + }); + }} + disableWidth={inheritCheck(width)} + disableOffset={ + inheritCheck(offset) || + (index === 0 && offset === autoOffsetValue) + } + onChangeEnd={onAfterChange} + /> + + + ); })} From b357d947c7e02d314695cdddca224d23d1b8713e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 25 Jul 2024 18:15:42 +0200 Subject: [PATCH 61/74] add showOuterAsGutter option to WORS --- .../width-offset-range-slider/width-offset-range-slider.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/components/width-offset-range-slider/width-offset-range-slider.js b/scripts/components/width-offset-range-slider/width-offset-range-slider.js index d2671cfde..4255e113b 100644 --- a/scripts/components/width-offset-range-slider/width-offset-range-slider.js +++ b/scripts/components/width-offset-range-slider/width-offset-range-slider.js @@ -31,6 +31,7 @@ import { clsx } from '@eightshift/ui-components/utilities'; * @param {Number} [props.totalNumberOfColumns=12] - Available number of columns to show. * @param {function} [props.onAfterChange] - Function to trigger when the value of the slider is changed. * @param {int|string} [props.colAutoStartOverride] - If passed, overrides the auto-calculated value of the automatic column start offset. + * @param {boolean} [props.showOuterAsGutter] - If `true`, the outer columns are displayed with a special icons instead of the column numbers. Other numbers are offset by 1. */ export const WidthOffsetRangeSlider = (props) => { const { @@ -57,6 +58,8 @@ export const WidthOffsetRangeSlider = (props) => { onAfterChange, colAutoStartOverride, + + showOuterAsGutter, } = props; const stringValues = !numericValues || autoOffsetToggle; @@ -204,7 +207,7 @@ export const WidthOffsetRangeSlider = (props) => { key={breakpoint} columns={totalNumberOfColumns} value={[parsedOffset, displayedWidth]} - showOuterAsGutter={parsedFullWidth} + showOuterAsGutter={showOuterAsGutter ?? parsedFullWidth} onChange={([o, w]) => { let newValues = {}; From 2f3d5fa809b5076716abdbfc33d9839b2e3213a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 26 Jul 2024 16:33:02 +0200 Subject: [PATCH 62/74] update deps --- package.json | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 855e6cccc..dec2ff09f 100644 --- a/package.json +++ b/package.json @@ -36,15 +36,16 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@eightshift/ui-components": "^1.3.2", + "@eightshift/ui-components": "^1.4.1", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", - "@swc/core": "^1.6.13", - "@wordpress/api-fetch": "^7.3.0", - "@wordpress/block-editor": "^13.3.0", + "@swc/core": "^1.7.2", + "@uidotdev/usehooks": "^2.4.1", + "@wordpress/api-fetch": "^7.4.0", + "@wordpress/block-editor": "^13.4.0", "@wordpress/dependency-extraction-webpack-plugin": "^5.9.0", - "@wordpress/dom-ready": "^4.3.0", - "@wordpress/server-side-render": "^5.2.0", + "@wordpress/dom-ready": "^4.4.0", + "@wordpress/server-side-render": "^5.4.0", "autoprefixer": "^10.4.19", "clean-webpack-plugin": "^4.0.0", "core-js": "^3.37.1", @@ -53,18 +54,18 @@ "eslint": "^9.7.0", "file-loader": "^6.2.0", "globals": "^15.8.0", - "husky": "^9.0.11", + "husky": "^9.1.2", "import-glob": "^1.5.0", "media-blender": "^2.1.0", "mini-css-extract-plugin": "^2.9.0", - "postcss": "^8.4.39", + "postcss": "^8.4.40", "postcss-loader": "^8.1.1", "postcss-scss": "^4.0.9", "promisify-child-process": "^4.1.2", "raw-loader": "^4.0.2", "regenerator-runtime": "^0.14.1", "sass": "^1.77.8", - "sass-loader": "^14.2.1", + "sass-loader": "^15.0.0", "style-loader": "^4.0.0", "stylelint": "^16.7.0", "stylelint-config-standard": "^36.0.1", @@ -74,20 +75,14 @@ "webpack": "^5.93.0", "webpack-cli": "^5.1.4", "webpack-manifest-plugin": "^5.0.0", - "webpack-merge": "^6.0.1", - "@uidotdev/usehooks": "^2.4.1", - "rc-slider": "^10.6.2", - "rc-tooltip": "^6.2.0", - "react-colorful": "^5.6.1", - "react-gcolor-picker": "^1.3.3", - "react-select": "^5.8.0" + "webpack-merge": "^6.0.1" }, "devDependencies": { "lint-staged": "^15.2.7", "micromodal": "^0.4.10", "ol": "^9.2.4", "ol-mapbox-style": "^12.3.4", - "swiper": "^11.1.5" + "swiper": "^11.1.8" }, "sideEffects": false, "lint-staged": { From ef1c87b3a0910346b425038d6f080f10b91cfbf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 26 Jul 2024 17:11:20 +0200 Subject: [PATCH 63/74] update ES UIC --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dec2ff09f..59151d324 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@eightshift/ui-components": "^1.4.1", + "@eightshift/ui-components": "^1.4.2", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", "@swc/core": "^1.7.2", From 26d317229eca9d40ed414cf891d00d4cbd8adc3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Fri, 26 Jul 2024 19:53:34 +0200 Subject: [PATCH 64/74] update ES UIC --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 59151d324..84c9c6ffc 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@eightshift/ui-components": "^1.4.2", + "@eightshift/ui-components": "^1.4.3", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", "@swc/core": "^1.7.2", From 276d89d2c66b1db21bfbac35a5ceb3b51f5160e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Tue, 30 Jul 2024 01:44:49 +0200 Subject: [PATCH 65/74] tweak pickers --- .../components/file-pickers/file-picker.js | 30 +++++++++---------- .../components/file-pickers/media-picker.js | 22 +++++++------- 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/scripts/components/file-pickers/file-picker.js b/scripts/components/file-pickers/file-picker.js index e4a326188..029b4d38f 100644 --- a/scripts/components/file-pickers/file-picker.js +++ b/scripts/components/file-pickers/file-picker.js @@ -9,13 +9,13 @@ import { icons } from '@eightshift/ui-components/icons'; * * @component * @param {Object} props - Component props. - * @property {ManageFileButtonType} [props.type] - The type of the button (browse, upload, replace). - * @property {Function} props.onChange - Function that handles the change event. - * @property {string} [props.currentId] - ID of the currently selected item. Used for the 'replace' type, to mark the currently selected item. - * @property {boolean} [props.compact] - Whether the button is compact (icon-only). - * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded. - * @property {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons. - * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`. + * @param {ManageFileButtonType} [props.type] - The type of the button (browse, upload, replace). + * @param {Function} props.onChange - Function that handles the change event. + * @param {string} [props.currentId] - ID of the currently selected item. Used for the 'replace' type, to mark the currently selected item. + * @param {boolean} [props.compact] - Whether the button is compact (icon-only). + * @param {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded. + * @param {ManageFileButtonKind} [props.kind] - The kind of file to manage. Controls labels and icons on the buttons. + * @param {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`. * * @returns {JSX.Element} The ManageFileButton component. * @@ -163,14 +163,14 @@ export const ManageFileButton = (props) => { * * @component * @param {Object} props - Component props. - * @property {Function} props.onChange - The function that handles the change event. - * @property {string} props.fileId - ID of the currently selected file. Used to mark the currently selected item when replacing the file. - * @property {string} props.fileName - URL of the currently selected image. - * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden. - * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden. - * @property {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded. - * @property {FileKind} [props.kind] - The kind of file to manage. - * @property {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`. + * @param {Function} props.onChange - The function that handles the change event. + * @param {string} props.fileId - ID of the currently selected file. Used to mark the currently selected item when replacing the file. + * @param {string} props.fileName - URL of the currently selected image. + * @param {boolean} [props.noDelete] - If `true`, the delete button will be hidden. + * @param {boolean} [props.noUpload] - If `true`, the upload button will be hidden. + * @param {string[]} props.allowedTypes - Determines types of files which are allowed to be uploaded. + * @param {FileKind} [props.kind] - The kind of file to manage. + * @param {Object} [props.labels] - Custom UI labels for the buttons. Applies only if `kind` is set to `custom`. * * @returns {JSX.Element} The FileSelector component. * diff --git a/scripts/components/file-pickers/media-picker.js b/scripts/components/file-pickers/media-picker.js index 512f5ecf6..ec9eb1871 100644 --- a/scripts/components/file-pickers/media-picker.js +++ b/scripts/components/file-pickers/media-picker.js @@ -13,15 +13,16 @@ const MediaButton = (props) => { * * @component * @param {Object} props - Component props. - * @property {Function} props.onChange - The function that handles the change event. - * @property {string} props.imageId - ID of the currently selected image. Used to mark the currently selected item when replacing the image. - * @property {string} props.imageAlt - Alt text of the currently selected image. - * @property {string} props.imageUrl - URL of the currently selected image. - * @property {boolean} [props.noDelete] - If `true`, the delete button will be hidden. - * @property {boolean} [props.noUpload] - If `true`, the upload button will be hidden. - * @property {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode. - * @property {boolean} [props.hidden] - If `true`, the component will be hidden. - * @property {string[]} [props.allowedTypes=['image']] - Determines types of files which are allowed to be uploaded. + * @param {Function} props.onChange - The function that handles the change event. + * @param {string} props.imageId - ID of the currently selected image. Used to mark the currently selected item when replacing the image. + * @param {string} props.imageAlt - Alt text of the currently selected image. + * @param {string} props.imageUrl - URL of the currently selected image. + * @param {boolean} [props.noDelete] - If `true`, the delete button will be hidden. + * @param {boolean} [props.noUpload] - If `true`, the upload button will be hidden. + * @param {ImagePlaceholderImageMode} [props.imageMode='cover'] - Determines inner image display mode. + * @param {boolean} [props.hidden] - If `true`, the component will be hidden. + * @param {string[]} [props.allowedTypes=['image']] - Determines types of files which are allowed to be uploaded. + * @param {string} [props.className] - Classes to add to the button wrapper. * * @returns {JSX.Element} The MediaPicker component. * @@ -47,6 +48,7 @@ export const MediaPicker = (props) => { imageMode, hidden, allowedTypes = ['image'], + className, } = props; if (hidden) { @@ -54,7 +56,7 @@ export const MediaPicker = (props) => { } return ( - + {!imageUrl && ( From f83f7ecf7b5ff5570c62dbc8f2089dc48a1c4826 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Tue, 30 Jul 2024 01:45:10 +0200 Subject: [PATCH 66/74] update ES UIC version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84c9c6ffc..ca55be795 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@eightshift/ui-components": "^1.4.3", + "@eightshift/ui-components": "^1.4.5", "@stylistic/eslint-plugin-js": "^2.3.0", "@stylistic/stylelint-plugin": "^2.1.2", "@swc/core": "^1.7.2", From b24d4b9cd3f37950eca4c9562940f709ca5ebb6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 7 Aug 2024 10:23:30 +0200 Subject: [PATCH 67/74] remove eslint maxlen --- scripts/components/re-orderable/sortable-item.js | 1 - .../responsive-number-picker.js | 1 - .../components/responsive-slider/responsive-slider.js | 1 - .../responsive-toggle-button.js | 1 - scripts/editor/css-variables.js | 8 ++++---- scripts/editor/registration.js | 10 ++-------- webpack/base.js | 3 +-- webpack/helpers.js | 1 - 8 files changed, 7 insertions(+), 19 deletions(-) diff --git a/scripts/components/re-orderable/sortable-item.js b/scripts/components/re-orderable/sortable-item.js index 70287cb21..af100e38d 100644 --- a/scripts/components/re-orderable/sortable-item.js +++ b/scripts/components/re-orderable/sortable-item.js @@ -46,7 +46,6 @@ export const SortableItem = (props) => { ...attributes, }; - // eslint-disable-next-line max-len const itemLabel = ((typeof title !== 'string' && title) || (typeof title === 'string' && title?.length > 0) || (typeof subtitle !== 'string' && subtitle) || (typeof subtitle === 'string' && subtitle?.length > 0) || icon) && ( ); diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index ee97b8f7b..282c7b945 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -151,7 +151,6 @@ export const ResponsiveNumberPicker = (props) => { }} disabled={(modifyInput ? modifyInput(parsedValue) : parsedValue) === resetButton || isInherited} className={clsx( - // eslint-disable-next-line max-len 'es-size-7! es-min-size-0! es-p-0! es-button-icon-20 es-rounded-1! es-hover-bg-cool-gray-100 es-transition', (parsedValue === resetButton || isInherited) && 'es-pointer-events-none es-nested-color-cool-gray-400!' )} diff --git a/scripts/components/responsive-slider/responsive-slider.js b/scripts/components/responsive-slider/responsive-slider.js index 221a4795a..6a2ce44ae 100644 --- a/scripts/components/responsive-slider/responsive-slider.js +++ b/scripts/components/responsive-slider/responsive-slider.js @@ -154,7 +154,6 @@ export const ResponsiveSlider = (props) => { }} disabled={parsedValue === resetButton || isInherited} className={clsx( - // eslint-disable-next-line max-len 'es-button-square-32 es-button-icon-24 es-slight-button-border-cool-gray-400 es-hover-slight-button-border-cool-gray-500 es-rounded-1! es-flex-shrink-0!', (parsedValue === resetButton || isInherited) && 'es-pointer-events-none es-nested-color-cool-gray-400!' )} diff --git a/scripts/components/responsive-toggle-button/responsive-toggle-button.js b/scripts/components/responsive-toggle-button/responsive-toggle-button.js index 606119077..983a756b2 100644 --- a/scripts/components/responsive-toggle-button/responsive-toggle-button.js +++ b/scripts/components/responsive-toggle-button/responsive-toggle-button.js @@ -124,7 +124,6 @@ export const ResponsiveToggleButton = (props) => { isPressed={buttonToggleEffect && isActive} className={clsx( 'es-button-square-32 es-rounded-1! es-h-8! es-px-2!', - // eslint-disable-next-line max-len buttonToggleEffect ? 'es-is-v2-gutenberg-button es-button-icon-24' : 'es-has-v2-gutenberg-button-active-state es-button-icon-30', buttonToggleEffect && isActive && 'is-active' )} diff --git a/scripts/editor/css-variables.js b/scripts/editor/css-variables.js index cfa0e475a..4f5a5d299 100644 --- a/scripts/editor/css-variables.js +++ b/scripts/editor/css-variables.js @@ -91,7 +91,7 @@ import { debounce, isEmpty, isObject, isPlainObject, kebabCase } from '@eightshi * * ``` */ -export const outputCssVariablesGlobal = (globalManifest = {}) => { // eslint-disable-line no-unused-vars +export const outputCssVariablesGlobal = (globalManifest = {}) => { let output = ''; for (const [itemKey, itemValue] of Object.entries(select(STORE_NAME).getSettingsGlobalVariables())) { @@ -146,7 +146,7 @@ export const outputCssVariablesGlobal = (globalManifest = {}) => { // eslint-dis * outputCssVariables(attributes, manifest, unique); * ``` */ -export const outputCssVariables = (attributes, manifest, unique, globalManifest = {}, customSelector = '') => { // eslint-disable-line no-unused-vars +export const outputCssVariables = (attributes, manifest, unique, globalManifest = {}, customSelector = '') => { const breakpoints = select(STORE_NAME).getSettingsGlobalVariablesBreakpoints(); @@ -309,12 +309,12 @@ export const outputCssVariablesInline = () => { ); // Find current tree with all inner blocks and all reusable blocks. - let currentStateBlocks = select('core/block-editor').__unstableGetClientIdsTree(); // eslint-disable-line no-underscore-dangle + let currentStateBlocks = select('core/block-editor').__unstableGetClientIdsTree(); // Subscribe to changes in state. subscribe(() => { // Find updated state of blocks after render. - const newStateBlocks = select('core/block-editor').__unstableGetClientIdsTree(); // eslint-disable-line no-underscore-dangle + const newStateBlocks = select('core/block-editor').__unstableGetClientIdsTree(); // Make changes only if blocks changed. if (newStateBlocks !== currentStateBlocks) { diff --git a/scripts/editor/registration.js b/scripts/editor/registration.js index 10b69c7a5..37658657e 100644 --- a/scripts/editor/registration.js +++ b/scripts/editor/registration.js @@ -117,7 +117,7 @@ export const registerBlocks = ( const blockOverridesComponent = getBlockGenericComponent(blockManifest.blockName, overridesComponentPath, 'overrides'); if (blockOverridesComponent !== null) { - blockManifest = Object.assign(blockManifest, blockOverridesComponent); // eslint-disable-line no-param-reassign + blockManifest = Object.assign(blockManifest, blockOverridesComponent); } } @@ -154,7 +154,6 @@ export const registerBlocks = ( ...deprecation.newAttributes(attributes), }; }, - // eslint-disable-next-line max-len isEligible: deprecation?.isEligible ?? ((attributes) => Object.keys(deprecation.oldAttributes).every((v) => Object.keys(attributes).includes(v))), save: blockDetails.options.save, }; @@ -234,7 +233,7 @@ export const registerVariations = ( const blockOverridesComponent = getBlockGenericComponent(variationManifest.name, overridesComponentPath, 'overrides'); if (blockOverridesComponent !== null) { - variationManifest = Object.assign(variationManifest, blockOverridesComponent);// eslint-disable-line no-param-reassign + variationManifest = Object.assign(variationManifest, blockOverridesComponent); } } @@ -278,7 +277,6 @@ export const getBlockEditComponent = (blockName, paths, fileName) => { // If edit component is missing throw and error. if (typeof editComponent === 'undefined') { - // eslint-disable-next-line max-len throw Error(`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`); } @@ -287,7 +285,6 @@ export const getBlockEditComponent = (blockName, paths, fileName) => { // If edit component callback is missing throw and error. if (typeof editCallback === 'undefined') { - // eslint-disable-next-line max-len throw Error(`It looks like you are missing block edit component for block: ${blockName}, please check if you have ${blockName}-block.js file in your block folder.`); } @@ -424,7 +421,6 @@ export const getMergeCallback = (blockManifest) => { outputObject[attribute] = parseFloat(receiver[attribute] ?? '0') + parseFloat(merger[attribute] ?? '0'); break; } - /* eslint-disable no-case-declarations */ case "addNumericPixelValue": { // Remove numbers const receiverUnit = (receiver[attribute] ?? '0px').replace(/\d/g, ''); @@ -614,7 +610,6 @@ export const prepareComponentAttributes = ( // Bailout if component doesn't exist. if (!component) { - // eslint-disable-next-line max-len throw Error(`Component specified in "${name}" manifest doesn't exist in your components list. Please check if you project has "${realComponentName}" component.`); } @@ -622,7 +617,6 @@ export const prepareComponentAttributes = ( // If component has more components do recursive loop. if (component?.components) { - // eslint-disable-next-line max-len outputAttributes = prepareComponentAttributes(componentsManifest, component, isExample, `${newParent}${upperFirst(camelCase(newComponentName))}`); } else { // Output the component attributes if there is no nesting left, and append the parent prefixes. diff --git a/webpack/base.js b/webpack/base.js index ede5f847b..bfd791bc8 100644 --- a/webpack/base.js +++ b/webpack/base.js @@ -54,7 +54,7 @@ module.exports = (options) => { if (!options.overrides.includes('dependencyExtractionWebpackPlugin')) { plugins.push(new DependencyExtractionWebpackPlugin({ outputFormat: 'json', - requestToExternal: function (request) { // eslint-disable-line consistent-return + requestToExternal: function (request) { if (request === '@wordpress/dom-ready') { return ''; } @@ -118,7 +118,6 @@ module.exports = (options) => { loader: 'sass-loader', options: { implementation: require("sass"), - // eslint-disable-next-line max-len additionalData: convertJsonToSass(options.config.blocksManifestSettingsPath) + ' ' + convertJsonToSass(options.config.blocksManifestSettingsPath, 'config', 'global-config'), }, }, diff --git a/webpack/helpers.js b/webpack/helpers.js index c8d8f38c6..796390ae1 100644 --- a/webpack/helpers.js +++ b/webpack/helpers.js @@ -31,7 +31,6 @@ function getConfig( } if (typeof projectPathConfig === 'undefined') { - // eslint-disable-next-line max-len throw Error('projectPath parameter is empty, please provide. This key represents: Project path relative to project root. For example: wp-content/themes/eightshift-boilerplate'); } From 394b8952cce47d51dbc60f6117a3a4f9a1421aeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Wed, 7 Aug 2024 10:56:31 +0200 Subject: [PATCH 68/74] fix eslint issues --- .../components/image/components/image-options.js | 1 - .../components/layout/components/layout-options.js | 1 - .../Blocks/components/lists/components/lists-editor.js | 2 +- .../components/video/components/video-options.js | 4 +--- .../Blocks/custom/column/components/column-options.js | 1 - .../Blocks/custom/columns/components/columns-editor.js | 2 -- .../components/featured-content-options.js | 2 -- .../src/Blocks/custom/heading/heading-transforms.js | 2 ++ .../src/Blocks/custom/map/assets/map-controller.js | 1 - .../src/Blocks/custom/map/components/map-components.js | 6 +++--- .../src/Blocks/custom/map/components/map-options.js | 6 ------ .../Blocks/custom/paragraph/paragraph-transforms.js | 2 ++ .../site-footer/components/site-footer-editor.js | 2 -- .../components/site-navigation-editor.js | 2 -- .../src/Blocks/custom/video/components/video-editor.js | 1 + .../src/Blocks/wrapper/components/wrapper-editor.js | 2 +- .../src/Blocks/wrapper/components/wrapper-options.js | 2 ++ blocks/init/src/Blocks/wrapper/wrapper-grid-guides.js | 1 + scripts/components/base-control/base-control.js | 2 +- scripts/editor/css-variables.js | 10 ++++++++-- scripts/editor/editor.js | 2 ++ scripts/editor/hooks.js | 1 + scripts/editor/registration.js | 3 ++- scripts/helpers/cookies.js | 1 + 24 files changed, 29 insertions(+), 30 deletions(-) diff --git a/blocks/init/src/Blocks/components/image/components/image-options.js b/blocks/init/src/Blocks/components/image/components/image-options.js index d4a8ff9b0..8174be122 100644 --- a/blocks/init/src/Blocks/components/image/components/image-options.js +++ b/blocks/init/src/Blocks/components/image/components/image-options.js @@ -113,7 +113,6 @@ export const ImageOptions = (attributes) => { key={index} icon={icons.trashAlt} label={__('Remove image', '%g_textdomain%')} - // eslint-disable-next-line max-len className='es-button-square-36 es-button-icon-26 es-border-cool-gray-100 es-hover-border-cool-gray-200 es-hover-color-red-500 es-rounded-1 es-nested-color-red-500 es-bg-pure-white es-shadow-sm es-hover-shadow-md -es-ml-4 -es-mb-2 es-has-animated-icon' onClick={() => setAttributes({ [urlAttr]: undefined, diff --git a/blocks/init/src/Blocks/components/layout/components/layout-options.js b/blocks/init/src/Blocks/components/layout/components/layout-options.js index b6a8f266b..092d58f8b 100644 --- a/blocks/init/src/Blocks/components/layout/components/layout-options.js +++ b/blocks/init/src/Blocks/components/layout/components/layout-options.js @@ -31,7 +31,6 @@ export const LayoutOptions = (attributes) => { value={layoutType} options={layouts} additionalClass='es-mb-3' - // eslint-disable-next-line max-len additionalButtonClass='es-v-spaced es-content-center! es-nested-m-0! es-h-16 es-w-16 es-nested-flex-shrink-0 es-text-3 es-gap-1.25! es-line-h-1' noBottomSpacing /> diff --git a/blocks/init/src/Blocks/components/lists/components/lists-editor.js b/blocks/init/src/Blocks/components/lists/components/lists-editor.js index e9e52a809..292b0a6e9 100644 --- a/blocks/init/src/Blocks/components/lists/components/lists-editor.js +++ b/blocks/init/src/Blocks/components/lists/components/lists-editor.js @@ -26,6 +26,7 @@ export const ListsEditor = (attributes) => { const listsOrderedOptions = getOption('listsOrdered', attributes, manifest).map(option => option.value); const listsDefault = manifest.attributes.listsOrdered.default; + if (!listsOrderedOptions.includes(listsOrdered)) { setAttributes({ [getAttrKey('listsOrdered', attributes, manifest)]: listsDefault }); // Resets the attribute to the default value if invalid value set. } @@ -56,6 +57,5 @@ export const ListsEditor = (attributes) => { data-id={unique} /> - ); }; diff --git a/blocks/init/src/Blocks/components/video/components/video-options.js b/blocks/init/src/Blocks/components/video/components/video-options.js index fc7ac9065..4454b1bbd 100644 --- a/blocks/init/src/Blocks/components/video/components/video-options.js +++ b/blocks/init/src/Blocks/components/video/components/video-options.js @@ -63,6 +63,7 @@ export const VideoOptions = (attributes) => { case 'chapters': return icons.videoChapters; } + return icons.emptyRect; }; @@ -115,7 +116,6 @@ export const VideoOptions = (attributes) => {