From c27d1318fa79cbef3718f4ae21f96e69b929bcf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Goran=20Alkovi=C4=87?= <77000136+goranalkovic-infinum@users.noreply.github.com> Date: Thu, 29 Feb 2024 10:00:40 +0100 Subject: [PATCH 1/5] Revert "Frontend libs 9.5.0" --- CHANGELOG.md | 16 +-- package.json | 28 ++--- scripts/components/collapsable/collapsable.js | 11 +- .../color-picker-component.js | 19 +-- .../color-picker-component.scss | 13 ++ .../{toggle => icon-toggle}/docs/readme.mdx | 4 +- .../{toggle => icon-toggle}/docs/story.js | 18 +-- .../toggle.js => icon-toggle/icon-toggle.js} | 15 +-- scripts/components/index.js | 2 +- .../components/number-picker/number-picker.js | 109 +++++++--------- .../number-picker/number-picker.scss | 49 +++----- .../responsive-number-picker.js | 41 +++--- scripts/editor/icons/icons.js | 7 +- scripts/index.js | 2 +- styles/es-component-styles.scss | 1 + .../es-gutenberg-component-style-updates.scss | 2 +- styles/es-utility-classes.scss | 119 +++++------------- 17 files changed, 168 insertions(+), 288 deletions(-) create mode 100644 scripts/components/color-picker-component/color-picker-component.scss rename scripts/components/{toggle => icon-toggle}/docs/readme.mdx (94%) rename scripts/components/{toggle => icon-toggle}/docs/story.js (92%) rename scripts/components/{toggle/toggle.js => icon-toggle/icon-toggle.js} (91%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5bbfe139f..f00102117 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,26 +4,12 @@ All notable changes to this project will be documented in this file. This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/). -## [9.5.0] - 2024-02-29 - -### Added -- New `es-size`, `es-min-size`, and `es-max-size` (+ `-nested` variants) utility classes for setting height and width at once -- New `prefix`, `suffix`, `extraButton`, and `noExtraButtonSeparator` props in `NumberPicker` -- `Collapsable` now has a `disabled` prop to disable the expand/collapse button -- 1 new UI icon +## [9.5.0] - 2024-02-21 ### Updated -- `NumberPicker` has been completely updated visually -- `ResponsiveNumberPicker` now better visually integrates the reset button - Fixed block renaming (due to recent Gutenberg changes) - `LinkInput` should now pop the suggestion panel only when focused into the input field - Fixed typo in `MultiSelect` story -- Tweaked Gutenberg override classes for `NumberControl` so they don't override FE libs `NumberPicker` -- Utility classes now use logical properties for paddings, margins, borders, widths, and heights -- `IconToggle` is now `Toggle`, but the previous name will also work (for now) -- Refreshed 3 UI icons -- Updated dependencies -- `ColorPicker` now has a slot for additional controls ## [9.4.2] - 2024-02-21 diff --git a/package.json b/package.json index dad607cc7..20a644e36 100644 --- a/package.json +++ b/package.json @@ -51,10 +51,10 @@ "@infinumjs/eslint-config-react-js": "^3.5.0", "@stylistic/stylelint-plugin": "^2.1.0", "@uidotdev/usehooks": "^2.4.1", - "@wordpress/api-fetch": "^6.49.0", - "@wordpress/block-editor": "^12.20.0", - "@wordpress/dependency-extraction-webpack-plugin": "^5.3.0", - "@wordpress/dom-ready": "^3.52.0", + "@wordpress/api-fetch": "^6.48.0", + "@wordpress/block-editor": "^12.19.1", + "@wordpress/dependency-extraction-webpack-plugin": "^5.2.0", + "@wordpress/dom-ready": "^3.51.0", "autoprefixer": "^10.4.17", "babel-loader": "^9.1.3", "browser-sync": "^3.0.2", @@ -64,7 +64,7 @@ "crypto-browserify": "^3.12.0", "css-loader": "^6.10.0", "css-minimizer-webpack-plugin": "^6.0.0", - "eslint": "^8.57.0", + "eslint": "^8.56.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", @@ -78,9 +78,9 @@ "just-kebab-case": "^4.2.0", "just-throttle": "^4.2.0", "media-blender": "^2.1.0", - "mini-css-extract-plugin": "^2.8.1", + "mini-css-extract-plugin": "^2.8.0", "postcss": "^8.4.35", - "postcss-loader": "^8.1.1", + "postcss-loader": "^8.1.0", "postcss-scss": "^4.0.9", "promisify-child-process": "^4.1.2", "raw-loader": "^4.0.2", @@ -91,9 +91,9 @@ "react-html-parser": "^2.0.2", "react-select": "^5.8.0", "regenerator-runtime": "^0.14.1", - "sass": "^1.71.1", - "sass-loader": "^14.1.1", - "storybook": "^7.6.17", + "sass": "^1.71.0", + "sass-loader": "^14.1.0", + "storybook": "^7.6.16", "stream-browserify": "^3.0.0", "style-loader": "^3.3.4", "stylelint": "^16.2.1", @@ -106,7 +106,7 @@ "webpack-merge": "^5.10.0" }, "devDependencies": { - "@babel/preset-env": "^7.24.0", + "@babel/preset-env": "^7.23.9", "@eightshift/storybook": "^1.6.1", "@jest/globals": "^29.7.0", "babel-jest": "^29.7.0", @@ -116,11 +116,11 @@ "jest-environment-jsdom": "^29.7.0", "lint-staged": "^15.2.2", "micromodal": "^0.4.10", - "ol": "^9.0.0", - "ol-mapbox-style": "^12.2.1", + "ol": "^8.2.0", + "ol-mapbox-style": "^12.2.0", "react-test-renderer": "^18.2.0", "replace-in-file": "^7.1.0", - "swiper": "^11.0.7" + "swiper": "^11.0.6" }, "sideEffects": false, "lint-staged": { diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index 8bd131cf7..f6a87028b 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -16,7 +16,7 @@ import { icons, AnimatedContentVisibility, Control, classnames } from '@eightshi * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the component classes. * @param {React.Component?} [props.actions] - Actions to show to the right of the label. * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are kept visible when the component is expanded. - * @param {boolean} [props.disabled=false] - If `true`, the expand button is disabled. + * @returns */ export const Collapsable = ({ icon, @@ -32,15 +32,9 @@ export const Collapsable = ({ actions, keepActionsOnExpand = false, - - disabled = false, }) => { const [isOpen, setIsOpen] = useState(false); - if (disabled && isOpen) { - setIsOpen(false); - } - return ( diff --git a/scripts/components/color-picker-component/color-picker-component.js b/scripts/components/color-picker-component/color-picker-component.js index 806c66216..55d6287b5 100644 --- a/scripts/components/color-picker-component/color-picker-component.js +++ b/scripts/components/color-picker-component/color-picker-component.js @@ -37,7 +37,6 @@ import { ColorPalette } from '../color-palette-custom/color-palette-custom'; * @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. */ export const ColorPicker = (props) => { const { @@ -73,8 +72,6 @@ export const ColorPicker = (props) => { buttonIconOverride, additionalButtonArgs, additionalColorPaletteArgs, - - additionalControls, } = props; let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs'); @@ -182,8 +179,8 @@ export const ColorPicker = (props) => { allowCloseFromChildren noArrow > -
-
+
+

{pickerPopupTitle ?? defaultPopupTitle}

-
+
{
-
+
{ />
- {additionalControls && -
- {additionalControls} -
- } - {canReset && -
+
- - {extraButton && !noExtraButtonSeparator && -
- } - - {extraButton && -
- {extraButton} -
- }
); diff --git a/scripts/components/number-picker/number-picker.scss b/scripts/components/number-picker/number-picker.scss index 8f1630615..106f7963b 100644 --- a/scripts/components/number-picker/number-picker.scss +++ b/scripts/components/number-picker/number-picker.scss @@ -1,37 +1,26 @@ -// 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; - } + .es-number-picker-input-value { + .components-input-control__input { + font-variant-numeric: tabular-nums; - &__input { - appearance: none; - - margin: 0 !important; - padding: 0 !important; - min-height: auto !important; + // stylelint-disable-next-line declaration-no-important + min-height: 2rem !important; + } - border: none !important; - box-shadow: none !important; + .components-input-control__backdrop { + // stylelint-disable declaration-no-important + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + // stylelint-enable declaration-no-important + } + } - width: var(--es-number-input-width) !important; - } + .components-button > svg { + transition: { + // stylelint-disable-next-line declaration-no-important + property: color, background-color, border-color, text-decoration-color, fill, stroke !important; + timing-function: var(--es-ease-out-cubic); + duration: 0.3s; } } } diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index b4739bcef..5a031d205 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -120,25 +120,29 @@ export const ResponsiveNumberPicker = (props) => { }; const nearestValid = getNearest(); + const parsedValue = parseFloat(inheritCheck(currentValue) ? nearestValid : currentValue); return ( - { - const newValue = stringValues ? `${currentValue}` : currentValue; - onChange({ - ...value, - [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, - }); - }} - noBottomSpacing - fixedWidth={fieldWidth} - min={min} - max={max} - step={step} - extraButton={typeof resetButton !== 'undefined' && +
+ { + const newValue = stringValues ? `${currentValue}` : currentValue; + onChange({ + ...value, + [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, + }); + }} + noBottomSpacing + fixedWidth={fieldWidth} + min={min} + max={max} + step={step} + {...additionalProps} + /> + + {typeof resetButton !== 'undefined' &&
); })} diff --git a/scripts/editor/icons/icons.js b/scripts/editor/icons/icons.js index 9dbc35cb2..df75c0cf2 100644 --- a/scripts/editor/icons/icons.js +++ b/scripts/editor/icons/icons.js @@ -369,7 +369,7 @@ export const icons = { dropdownCaret: , checkCircleFill: , componentGeneric: , - toggleOff: , + toggleOff: , toggleOn: , toggleOnAlt: , hyphenate: , @@ -724,8 +724,8 @@ export const icons = { textSizeAlt: , textLarger: , textSmaller: , - extract: , - extractAlt: , + extract: , + extractAlt: , tree: , treeAlt: , treeAlt2: , @@ -745,7 +745,6 @@ export const icons = { officeBuilding: , officeBuildings: , box: , - hoverBackgroundGlow: , }; /** diff --git a/scripts/index.js b/scripts/index.js index 323627b1d..0d21bd420 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -27,7 +27,7 @@ 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 { IconToggle } from './components/icon-toggle/icon-toggle'; export { Notification } from './components/inline-notification/inline-notification'; export { LinkInput, LinkEditComponent } from './components/link-input/link-input'; export { MatrixAlignControl } from './components/matrix-align-control/matrix-align-control'; diff --git a/styles/es-component-styles.scss b/styles/es-component-styles.scss index 6477e1714..580d6e70c 100644 --- a/styles/es-component-styles.scss +++ b/styles/es-component-styles.scss @@ -7,6 +7,7 @@ @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/color-picker-component/color-picker-component'; @import '../scripts/components/server-side-render/server-side-render'; @import '../scripts/components/color-palette-custom/color-palette-custom'; @import './es-shared/es-nested-collapsable'; diff --git a/styles/es-gutenberg-component-style-updates.scss b/styles/es-gutenberg-component-style-updates.scss index 827cbc266..384c5630f 100644 --- a/styles/es-gutenberg-component-style-updates.scss +++ b/styles/es-gutenberg-component-style-updates.scss @@ -75,7 +75,7 @@ } // Tweak NumberControl to better fit in. -.components-number-control:not(.es-number-picker .components-number-control) { +.components-number-control { .components-input-control__input { padding: 0 0.5rem !important; font-size: 0.78125rem !important; diff --git a/styles/es-utility-classes.scss b/styles/es-utility-classes.scss index 2c983c1ba..c844410bf 100644 --- a/styles/es-utility-classes.scss +++ b/styles/es-utility-classes.scss @@ -320,7 +320,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-t': ( - 'cssProp': 'border-block-start', + 'cssProp': 'border-top', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -329,7 +329,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-b': ( - 'cssProp': 'border-block-end', + 'cssProp': 'border-bottom', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -338,7 +338,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-l': ( - 'cssProp': 'border-inline-start', + 'cssProp': 'border-left', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -347,7 +347,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-r': ( - 'cssProp': 'border-inline-end', + 'cssProp': 'border-right', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -392,7 +392,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mt': ( - 'cssProp': 'margin-block-start', + 'cssProp': 'margin-top', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -401,7 +401,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mb': ( - 'cssProp': 'margin-block-end', + 'cssProp': 'margin-bottom', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -410,7 +410,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'ml': ( - 'cssProp': 'margin-inline-start', + 'cssProp': 'margin-left', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -419,7 +419,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mr': ( - 'cssProp': 'margin-inline-end', + 'cssProp': 'margin-right', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -455,7 +455,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pt': ( - 'cssProp': 'padding-block-start', + 'cssProp': 'padding-top', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -464,7 +464,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pb': ( - 'cssProp': 'padding-block-end', + 'cssProp': 'padding-bottom', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -473,7 +473,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pl': ( - 'cssProp': 'padding-inline-start', + 'cssProp': 'padding-left', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -482,7 +482,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pr': ( - 'cssProp': 'padding-inline-end', + 'cssProp': 'padding-right', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -500,7 +500,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'w': ( - 'cssProp': 'inline-size', + 'cssProp': 'width', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -509,7 +509,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'h': ( - 'cssProp': 'block-size', + 'cssProp': 'height', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -626,7 +626,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tl': ( - 'cssProp': 'border-start-start-radius', + 'cssProp': 'border-top-left-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -635,7 +635,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tr': ( - 'cssProp': 'border-start-end-radius', + 'cssProp': 'border-top-right-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -644,7 +644,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-bl': ( - 'cssProp': 'border-end-start-radius', + 'cssProp': 'border-bottom-left-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -653,7 +653,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-br': ( - 'cssProp': 'border-end-end-radius', + 'cssProp': 'border-bottom-right-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -1159,19 +1159,19 @@ $es-utility-props: ( } .es-border-t { - border-block-start: 1px solid currentColor; + border-top: 1px solid currentColor; } .es-border-b { - border-block-end: 1px solid currentColor; + border-bottom: 1px solid currentColor; } .es-border-l { - border-inline-start: 1px solid currentColor; + border-left: 1px solid currentColor; } .es-border-r { - border-inline-end: 1px solid currentColor; + border-right: 1px solid currentColor; } .es-border-x { @@ -1246,70 +1246,6 @@ $es-utility-props: ( } } -// Special 'size' utility class (w + h). -@each $name, $value in $es-spacings { - .es-size-#{$name} { - block-size: #{$value}; - inline-size: #{$value}; - } - - .es-size-#{$name}\! { - block-size: #{$value} !important; - inline-size: #{$value} !important; - } - - .es-min-size-#{$name} { - min-block-size: #{$value}; - min-inline-size: #{$value}; - } - - .es-min-size-#{$name}\! { - min-block-size: #{$value} !important; - min-inline-size: #{$value} !important; - } - - .es-max-size-#{$name} { - max-block-size: #{$value}; - max-inline-size: #{$value}; - } - - .es-max-size-#{$name}\! { - max-block-size: #{$value} !important; - max-inline-size: #{$value} !important; - } - - // 'nested' variants - .es-nested-size-#{$name} svg { - block-size: #{$value}; - inline-size: #{$value}; - } - - .es-nested-size-#{$name}\! svg { - block-size: #{$value} !important; - inline-size: #{$value} !important; - } - - .es-min-size-#{$name} svg { - min-block-size: #{$value}; - min-inline-size: #{$value}; - } - - .es-min-size-#{$name}\! svg { - min-block-size: #{$value} !important; - min-inline-size: #{$value} !important; - } - - .es-max-size-#{$name} svg { - max-block-size: #{$value}; - max-inline-size: #{$value}; - } - - .es-max-size-#{$name}\! svg { - max-block-size: #{$value} !important; - max-inline-size: #{$value} !important; - } -} - @each $size, $value in $es-square-button-sizes { .es-button-square-#{$size} { width: #{$value} !important; @@ -1346,15 +1282,16 @@ $es-utility-props: ( // Default WP field spacing. .es-has-wp-field-v-space { - margin-block: 1.5rem; + margin-top: 1.5rem; + margin-bottom: 1.5rem; } .es-has-wp-field-b-space { - margin-block-end: 1.5rem; + margin-bottom: 1.5rem; } .es-has-wp-field-t-space { - margin-block-start: 1.5rem; + margin-top: 1.5rem; } // A11y high-visibility outline. @@ -1677,10 +1614,10 @@ $es-utility-props: ( // Helper to disable default Gutenberg field spacing (e.g. for inlining input fields). .es-no-field-spacing { - margin-block-end: 0 !important; + margin-bottom: 0 !important; .components-base-control__field { - margin-block-end: 0 !important; + margin-bottom: 0 !important; } } From c18dbf7cf44e9d7ccb9751c9e596fcb48a0002ad 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 Apr 2024 14:02:17 +0200 Subject: [PATCH 2/5] sync files --- package.json | 2 +- scripts/components/collapsable/collapsable.js | 11 +- .../color-picker-component.js | 19 ++- .../color-picker-component.scss | 13 -- scripts/components/index.js | 2 +- .../components/number-picker/number-picker.js | 40 +++--- .../number-picker/number-picker.scss | 17 +-- .../responsive-number-picker.js | 41 +++--- .../icon-toggle.js => toggle/toggle.js} | 15 ++- scripts/editor/icons/icons.js | 6 +- scripts/index.js | 2 +- styles/es-component-styles.scss | 1 - .../es-gutenberg-component-style-updates.scss | 2 +- styles/es-utility-classes.scss | 119 +++++++++++++----- 14 files changed, 176 insertions(+), 114 deletions(-) delete mode 100644 scripts/components/color-picker-component/color-picker-component.scss rename scripts/components/{icon-toggle/icon-toggle.js => toggle/toggle.js} (91%) diff --git a/package.json b/package.json index 2a71dd74e..b44c2a3e9 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "crypto-browserify": "^3.12.0", "css-loader": "^7.1.1", "css-minimizer-webpack-plugin": "^6.0.0", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", diff --git a/scripts/components/collapsable/collapsable.js b/scripts/components/collapsable/collapsable.js index f6a87028b..8bd131cf7 100644 --- a/scripts/components/collapsable/collapsable.js +++ b/scripts/components/collapsable/collapsable.js @@ -16,7 +16,7 @@ import { icons, AnimatedContentVisibility, Control, classnames } from '@eightshi * @param {string?} [props.additionalClasses] - If passed, the classes are appended to the component classes. * @param {React.Component?} [props.actions] - Actions to show to the right of the label. * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are kept visible when the component is expanded. - * @returns + * @param {boolean} [props.disabled=false] - If `true`, the expand button is disabled. */ export const Collapsable = ({ icon, @@ -32,9 +32,15 @@ export const Collapsable = ({ actions, keepActionsOnExpand = false, + + disabled = false, }) => { const [isOpen, setIsOpen] = useState(false); + if (disabled && isOpen) { + setIsOpen(false); + } + return (
diff --git a/scripts/components/color-picker-component/color-picker-component.js b/scripts/components/color-picker-component/color-picker-component.js index 1a14674e3..c7954429c 100644 --- a/scripts/components/color-picker-component/color-picker-component.js +++ b/scripts/components/color-picker-component/color-picker-component.js @@ -37,6 +37,7 @@ import { ColorPalette } from '../color-palette-custom/color-palette-custom'; * @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. */ export const ColorPicker = (props) => { const { @@ -72,6 +73,8 @@ export const ColorPicker = (props) => { buttonIconOverride, additionalButtonArgs, additionalColorPaletteArgs, + + additionalControls, } = props; let defaultPopupTitle = __('Pick a color', 'eightshift-frontend-libs'); @@ -179,8 +182,8 @@ export const ColorPicker = (props) => { allowCloseFromChildren noArrow > -
-
+
+

{pickerPopupTitle ?? defaultPopupTitle}

-
+
{
-
+
{ />
+ {additionalControls && +
+ {additionalControls} +
+ } + {canReset && -
+
+ + {extraButton && !noExtraButtonSeparator && +
+ } + + {extraButton && +
+ {extraButton} +
+ }
); diff --git a/scripts/components/number-picker/number-picker.scss b/scripts/components/number-picker/number-picker.scss index 3efcb82e6..697858135 100644 --- a/scripts/components/number-picker/number-picker.scss +++ b/scripts/components/number-picker/number-picker.scss @@ -1,17 +1,8 @@ +// stylelint-disable declaration-no-important .es-number-picker { - .es-number-picker-input-value { - .components-input-control__input { - font-variant-numeric: tabular-nums; - - // stylelint-disable-next-line declaration-no-important - min-height: 2rem !important; - } - - .components-input-control__backdrop { - // stylelint-disable declaration-no-important - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - // stylelint-enable declaration-no-important + .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; } } diff --git a/scripts/components/responsive-number-picker/responsive-number-picker.js b/scripts/components/responsive-number-picker/responsive-number-picker.js index 5a031d205..b4739bcef 100644 --- a/scripts/components/responsive-number-picker/responsive-number-picker.js +++ b/scripts/components/responsive-number-picker/responsive-number-picker.js @@ -120,29 +120,25 @@ export const ResponsiveNumberPicker = (props) => { }; const nearestValid = getNearest(); - const parsedValue = parseFloat(inheritCheck(currentValue) ? nearestValid : currentValue); return ( -
- { - const newValue = stringValues ? `${currentValue}` : currentValue; - onChange({ - ...value, - [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, - }); - }} - noBottomSpacing - fixedWidth={fieldWidth} - min={min} - max={max} - step={step} - {...additionalProps} - /> - - {typeof resetButton !== 'undefined' && + { + const newValue = stringValues ? `${currentValue}` : currentValue; + onChange({ + ...value, + [breakpoint]: modifyOutput ? modifyOutput(newValue) : newValue, + }); + }} + noBottomSpacing + fixedWidth={fieldWidth} + min={min} + max={max} + step={step} + extraButton={typeof resetButton !== 'undefined' &&
+ {...additionalProps} + /> ); })} diff --git a/scripts/components/icon-toggle/icon-toggle.js b/scripts/components/toggle/toggle.js similarity index 91% rename from scripts/components/icon-toggle/icon-toggle.js rename to scripts/components/toggle/toggle.js index a406cea57..213fb6984 100644 --- a/scripts/components/icon-toggle/icon-toggle.js +++ b/scripts/components/toggle/toggle.js @@ -1,11 +1,11 @@ import React from 'react'; import { ToggleControl, CheckboxControl, Button } from '@wordpress/components'; -import { IconLabel, classnames, TileButton } from '../../../scripts'; +import { IconLabel, classnames, TileButton } from '../..'; /** - * Custom toggle control that can render as + * Custom toggle control. * - * @param {object} props - IconToggle options. + * @param {object} props - `Toggle` options. * @param {React.Component} props.icon - Icon to display. * @param {string} props.label - Usually component name. * @param {'toggle'|'checkbox'|'button'|'iconButton'|'tileButton'} [props.type='toggle'] - Kind of toggle to render. @@ -18,7 +18,7 @@ import { IconLabel, classnames, TileButton } from '../../../scripts'; * @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 IconToggle = ({ +export const Toggle = ({ icon, label, @@ -85,3 +85,10 @@ export const IconToggle = ({ /> ); }; + +/** + * Custom toggle control. + * + * @deprecated since 9.5.0 - renamed to `Toggle` + */ +export const IconToggle = (props) => ; diff --git a/scripts/editor/icons/icons.js b/scripts/editor/icons/icons.js index b8c8d515c..0a592fa7c 100644 --- a/scripts/editor/icons/icons.js +++ b/scripts/editor/icons/icons.js @@ -369,7 +369,7 @@ export const icons = { dropdownCaret: , checkCircleFill: , componentGeneric: , - toggleOff: , + toggleOff: , toggleOn: , toggleOnAlt: , hyphenate: , @@ -724,8 +724,8 @@ export const icons = { textSizeAlt: , textLarger: , textSmaller: , - extract: , - extractAlt: , + extract: , + extractAlt: , tree: , treeAlt: , treeAlt2: , diff --git a/scripts/index.js b/scripts/index.js index e8dd66865..651c9374f 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -27,7 +27,7 @@ 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 { IconToggle } from './components/icon-toggle/icon-toggle'; +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 { MatrixAlignControl } from './components/matrix-align-control/matrix-align-control'; diff --git a/styles/es-component-styles.scss b/styles/es-component-styles.scss index 580d6e70c..6477e1714 100644 --- a/styles/es-component-styles.scss +++ b/styles/es-component-styles.scss @@ -7,7 +7,6 @@ @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/color-picker-component/color-picker-component'; @import '../scripts/components/server-side-render/server-side-render'; @import '../scripts/components/color-palette-custom/color-palette-custom'; @import './es-shared/es-nested-collapsable'; diff --git a/styles/es-gutenberg-component-style-updates.scss b/styles/es-gutenberg-component-style-updates.scss index 384c5630f..827cbc266 100644 --- a/styles/es-gutenberg-component-style-updates.scss +++ b/styles/es-gutenberg-component-style-updates.scss @@ -75,7 +75,7 @@ } // Tweak NumberControl to better fit in. -.components-number-control { +.components-number-control:not(.es-number-picker .components-number-control) { .components-input-control__input { padding: 0 0.5rem !important; font-size: 0.78125rem !important; diff --git a/styles/es-utility-classes.scss b/styles/es-utility-classes.scss index 865a4d8e3..98211c075 100644 --- a/styles/es-utility-classes.scss +++ b/styles/es-utility-classes.scss @@ -320,7 +320,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-t': ( - 'cssProp': 'border-top', + 'cssProp': 'border-block-start', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -329,7 +329,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-b': ( - 'cssProp': 'border-bottom', + 'cssProp': 'border-block-end', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -338,7 +338,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-l': ( - 'cssProp': 'border-left', + 'cssProp': 'border-inline-start', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -347,7 +347,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'border-r': ( - 'cssProp': 'border-right', + 'cssProp': 'border-inline-end', 'values': $es-colors, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -392,7 +392,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mt': ( - 'cssProp': 'margin-top', + 'cssProp': 'margin-block-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -401,7 +401,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mb': ( - 'cssProp': 'margin-bottom', + 'cssProp': 'margin-block-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -410,7 +410,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'ml': ( - 'cssProp': 'margin-left', + 'cssProp': 'margin-inline-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -419,7 +419,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'mr': ( - 'cssProp': 'margin-right', + 'cssProp': 'margin-inline-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -455,7 +455,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pt': ( - 'cssProp': 'padding-top', + 'cssProp': 'padding-block-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -464,7 +464,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pb': ( - 'cssProp': 'padding-bottom', + 'cssProp': 'padding-block-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -473,7 +473,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pl': ( - 'cssProp': 'padding-left', + 'cssProp': 'padding-inline-start', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -482,7 +482,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'pr': ( - 'cssProp': 'padding-right', + 'cssProp': 'padding-inline-end', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -500,7 +500,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'w': ( - 'cssProp': 'width', + 'cssProp': 'inline-size', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -509,7 +509,7 @@ $es-utility-props: ( 'includeNegativeValues': 'true', ), 'h': ( - 'cssProp': 'height', + 'cssProp': 'block-size', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'true', @@ -626,7 +626,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tl': ( - 'cssProp': 'border-top-left-radius', + 'cssProp': 'border-start-start-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -635,7 +635,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-tr': ( - 'cssProp': 'border-top-right-radius', + 'cssProp': 'border-start-end-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -644,7 +644,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-bl': ( - 'cssProp': 'border-bottom-left-radius', + 'cssProp': 'border-end-start-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -653,7 +653,7 @@ $es-utility-props: ( 'includeNegativeValues': 'false', ), 'rounded-br': ( - 'cssProp': 'border-bottom-right-radius', + 'cssProp': 'border-end-end-radius', 'values': $es-spacings, 'additionalSelector': '', 'includeBcfSelectors': 'false', @@ -1168,19 +1168,19 @@ $es-utility-props: ( } .es-border-t { - border-top: 1px solid currentColor; + border-block-start: 1px solid currentColor; } .es-border-b { - border-bottom: 1px solid currentColor; + border-block-end: 1px solid currentColor; } .es-border-l { - border-left: 1px solid currentColor; + border-inline-start: 1px solid currentColor; } .es-border-r { - border-right: 1px solid currentColor; + border-inline-end: 1px solid currentColor; } .es-border-x { @@ -1255,6 +1255,70 @@ $es-utility-props: ( } } +// Special 'size' utility class (w + h). +@each $name, $value in $es-spacings { + .es-size-#{$name} { + block-size: #{$value}; + inline-size: #{$value}; + } + + .es-size-#{$name}\! { + block-size: #{$value} !important; + inline-size: #{$value} !important; + } + + .es-min-size-#{$name} { + min-block-size: #{$value}; + min-inline-size: #{$value}; + } + + .es-min-size-#{$name}\! { + min-block-size: #{$value} !important; + min-inline-size: #{$value} !important; + } + + .es-max-size-#{$name} { + max-block-size: #{$value}; + max-inline-size: #{$value}; + } + + .es-max-size-#{$name}\! { + max-block-size: #{$value} !important; + max-inline-size: #{$value} !important; + } + + // 'nested' variants + .es-nested-size-#{$name} svg { + block-size: #{$value}; + inline-size: #{$value}; + } + + .es-nested-size-#{$name}\! svg { + block-size: #{$value} !important; + inline-size: #{$value} !important; + } + + .es-min-size-#{$name} svg { + min-block-size: #{$value}; + min-inline-size: #{$value}; + } + + .es-min-size-#{$name}\! svg { + min-block-size: #{$value} !important; + min-inline-size: #{$value} !important; + } + + .es-max-size-#{$name} svg { + max-block-size: #{$value}; + max-inline-size: #{$value}; + } + + .es-max-size-#{$name}\! svg { + max-block-size: #{$value} !important; + max-inline-size: #{$value} !important; + } +} + @each $size, $value in $es-square-button-sizes { .es-button-square-#{$size} { width: #{$value} !important; @@ -1291,16 +1355,15 @@ $es-utility-props: ( // Default WP field spacing. .es-has-wp-field-v-space { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-block: 1.5rem; } .es-has-wp-field-b-space { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .es-has-wp-field-t-space { - margin-top: 1.5rem; + margin-block-start: 1.5rem; } // A11y high-visibility outline. @@ -1623,10 +1686,10 @@ $es-utility-props: ( // Helper to disable default Gutenberg field spacing (e.g. for inlining input fields). .es-no-field-spacing { - margin-bottom: 0 !important; + margin-block-end: 0 !important; .components-base-control__field { - margin-bottom: 0 !important; + margin-block-end: 0 !important; } } From cd2f4cba032a652bdef6295910325cfd2e8aa19e Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Tue, 30 Apr 2024 12:41:52 +0200 Subject: [PATCH 3/5] Make installation available from other branches than the Infinum repo --- setup/create-wp-project/readme.md | 10 +++++++++- setup/create-wp-project/src/arguments.js | 7 +++++++ setup/create-wp-project/src/commands/theme.js | 2 +- setup/create-wp-project/src/dependencies.js | 12 +++++++----- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/setup/create-wp-project/readme.md b/setup/create-wp-project/readme.md index 605bec5ab..e78f58ab1 100644 --- a/setup/create-wp-project/readme.md +++ b/setup/create-wp-project/readme.md @@ -36,11 +36,13 @@ To make sure you use the latest version of npx command you can add `@latest` fla ## Specify version to create -If you want to specify a version of Eightshift Libs or Frontend Libs to use, you can use add two additional attributes to this command to specify a branch or release to use: +If you want to specify a version of Eightshift Libs, Frontend Libs or repository to use, you can use add two additional attributes to this command to specify a branch, release or repository to use: ``` +--eightshiftLibsRepo --eightshiftLibsBranch --eightshiftFrontendLibsBranch + ``` Example: @@ -56,6 +58,12 @@ You can also specify the version of the create-wp-project script like this: npx create-wp-project@2.0.12 --eightshiftLibsBranch="release/6.0.0" --eightshiftFrontendLibsBranch="develop" ``` +You can also specify the repo of the create-wp-project script like this: + +``` +npx create-wp-project --eightshiftLibsRepo="https://github.com/example-repository/eightshift-libs.git" +``` + ## Use a different repository diff --git a/setup/create-wp-project/src/arguments.js b/setup/create-wp-project/src/arguments.js index fb6ad295d..7ece20f00 100644 --- a/setup/create-wp-project/src/arguments.js +++ b/setup/create-wp-project/src/arguments.js @@ -55,6 +55,13 @@ const scriptArguments = { type: 'text', skipPrompt: true, }, + eightshiftLibsRepo: { + name: 'eightshiftLibsRepo', + describe: 'Custom repository URL for the eightshift-libs (e.g., github.com/user/eightshift-libs).', + type: 'text', + // default: 'infinum/eightshift-libs', // Setting default to ensure backward compatibility + skipPrompt: true, + }, eightshiftLibsBranch: { name: 'eightshiftLibsBranch', describe: 'Use this to override which infinum/eightshift-libs version is loaded (mainly used for testing).', diff --git a/setup/create-wp-project/src/commands/theme.js b/setup/create-wp-project/src/commands/theme.js index a23b0f1c8..ae45ea70c 100644 --- a/setup/create-wp-project/src/commands/theme.js +++ b/setup/create-wp-project/src/commands/theme.js @@ -84,7 +84,7 @@ exports.handler = async (argv) => { if (argv.eightshiftLibsBranch) { await installStep({ describe: `Installing Composer packages`, - thisHappens: installModifiedComposerDependencies(projectPath, argv.eightshiftLibsBranch), + thisHappens: installModifiedComposerDependencies(projectPath, argv.eightshiftLibsBranch, argv.eightshiftLibsRepo), }); } else { await installStep({ diff --git a/setup/create-wp-project/src/dependencies.js b/setup/create-wp-project/src/dependencies.js index e1264c973..31c529845 100644 --- a/setup/create-wp-project/src/dependencies.js +++ b/setup/create-wp-project/src/dependencies.js @@ -1,18 +1,18 @@ const { installNodePackage, installComposerPackage } = require('./basics/command-line'); const eightshiftLibsName = ''; -const eightshiftLibsRepo = 'infinum/eightshift-libs'; +const defaultEightshiftLibsRepo = 'infinum/eightshift-libs'; const eightshiftFrontendLibsRepo = 'infinum/eightshift-frontend-libs'; const eightshiftFrontendLibsRepoUrl = 'https://github.com/infinum/eightshift-frontend-libs'; /** - * Check if we need to modify dependencies (if user passed an alternative branch for any dependency + * Check if we need to modify dependencies (if user passed an alternative branch or repo for any dependency * as argument) * * @param {object} argv List of CLI arguments. */ const areDependenciesModified = (argv) => { - return argv.eightshiftLibsBranch || argv.eightshiftFrontendLibsBranch; + return argv.eightshiftLibsBranch || argv.eightshiftFrontendLibsBranch || argv.eightshiftLibsRepo; }; /** @@ -26,12 +26,14 @@ const installModifiedNodeDependencies = async (projectPath, branch) => { }; /** - * Installs composer packages and modifies the libs to a specific branch. + * Installs composer packages and modifies the libs to a specific branch or repo. * * @param {string} projectPath Path to the project. * @param {array} branch Name of the branch to pull from. + * @param {string} repo Custom repository to use if provided. */ -const installModifiedComposerDependencies = async (projectPath, branch) => { +const installModifiedComposerDependencies = async (projectPath, branch, repo) => { + const eightshiftLibsRepo = repo || defaultEightshiftLibsRepo; return installComposerPackage(projectPath, `${eightshiftLibsRepo}:dev-${branch}`); }; From 715fec9e662fcf32b96ac71fae369371fc00df78 Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Tue, 30 Apr 2024 12:51:15 +0200 Subject: [PATCH 4/5] enable default compatibility --- setup/create-wp-project/src/arguments.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup/create-wp-project/src/arguments.js b/setup/create-wp-project/src/arguments.js index 7ece20f00..9a29a5d29 100644 --- a/setup/create-wp-project/src/arguments.js +++ b/setup/create-wp-project/src/arguments.js @@ -59,7 +59,7 @@ const scriptArguments = { name: 'eightshiftLibsRepo', describe: 'Custom repository URL for the eightshift-libs (e.g., github.com/user/eightshift-libs).', type: 'text', - // default: 'infinum/eightshift-libs', // Setting default to ensure backward compatibility + default: 'infinum/eightshift-libs', // Setting default to ensure backward compatibility skipPrompt: true, }, eightshiftLibsBranch: { From 4a7d4dabc0b036dfe2c0b60aafc527874ee7972c Mon Sep 17 00:00:00 2001 From: DjidjaleskaSandra Date: Thu, 9 May 2024 11:47:42 +0200 Subject: [PATCH 5/5] install frontend libs specific repo --- setup/create-wp-project/readme.md | 7 +++++++ setup/create-wp-project/src/arguments.js | 7 +++++++ setup/create-wp-project/src/commands/theme.js | 2 +- setup/create-wp-project/src/dependencies.js | 8 +++++--- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/setup/create-wp-project/readme.md b/setup/create-wp-project/readme.md index e78f58ab1..75ae8abd4 100644 --- a/setup/create-wp-project/readme.md +++ b/setup/create-wp-project/readme.md @@ -42,6 +42,7 @@ If you want to specify a version of Eightshift Libs, Frontend Libs or repository --eightshiftLibsRepo --eightshiftLibsBranch --eightshiftFrontendLibsBranch +--eightshiftFrontendLibsUrl ``` @@ -64,6 +65,12 @@ You can also specify the repo of the create-wp-project script like this: npx create-wp-project --eightshiftLibsRepo="https://github.com/example-repository/eightshift-libs.git" ``` +You can also specify the repo of the create-wp-project script like this: + +``` +npx create-wp-project -eightshiftFrontendLibsBranch="develop" --eightshiftFrontendLibsRepoUrl="https://github.com/example-repository/eightshift-frontend-libs.git" +``` + ## Use a different repository diff --git a/setup/create-wp-project/src/arguments.js b/setup/create-wp-project/src/arguments.js index 9a29a5d29..73e08c8b1 100644 --- a/setup/create-wp-project/src/arguments.js +++ b/setup/create-wp-project/src/arguments.js @@ -74,6 +74,13 @@ const scriptArguments = { type: 'text', skipPrompt: true, }, + eightshiftFrontendLibsRepoUrl: { + name: 'eightshiftFrontendLibsRepoUrl', + describe: 'Custom repository URL for the eightshift-frontend-libs (e.g., github.com/user/eightshift-frontend-libs).', + type: 'text', + default: 'infinum/eightshift-frontend-libs', // Setting default to ensure backward compatibility + skipPrompt: true, + }, }; module.exports = { diff --git a/setup/create-wp-project/src/commands/theme.js b/setup/create-wp-project/src/commands/theme.js index ae45ea70c..130a43eaf 100644 --- a/setup/create-wp-project/src/commands/theme.js +++ b/setup/create-wp-project/src/commands/theme.js @@ -65,7 +65,7 @@ exports.handler = async (argv) => { if (argv.eightshiftFrontendLibsBranch) { await installStep({ describe: `Installing Node packages`, - thisHappens: installModifiedNodeDependencies(projectPath, argv.eightshiftFrontendLibsBranch), + thisHappens: installModifiedNodeDependencies(projectPath, argv.eightshiftFrontendLibsBranch, argv.eightshiftFrontendLibsRepoUrl), }); } else { await installStep({ diff --git a/setup/create-wp-project/src/dependencies.js b/setup/create-wp-project/src/dependencies.js index 31c529845..43d2f8e3d 100644 --- a/setup/create-wp-project/src/dependencies.js +++ b/setup/create-wp-project/src/dependencies.js @@ -3,7 +3,7 @@ const { installNodePackage, installComposerPackage } = require('./basics/command const eightshiftLibsName = ''; const defaultEightshiftLibsRepo = 'infinum/eightshift-libs'; const eightshiftFrontendLibsRepo = 'infinum/eightshift-frontend-libs'; -const eightshiftFrontendLibsRepoUrl = 'https://github.com/infinum/eightshift-frontend-libs'; +const defaultEightshiftFrontendLibsRepoUrl = 'https://github.com/infinum/eightshift-frontend-libs'; /** * Check if we need to modify dependencies (if user passed an alternative branch or repo for any dependency @@ -12,7 +12,7 @@ const eightshiftFrontendLibsRepoUrl = 'https://github.com/infinum/eightshift-fro * @param {object} argv List of CLI arguments. */ const areDependenciesModified = (argv) => { - return argv.eightshiftLibsBranch || argv.eightshiftFrontendLibsBranch || argv.eightshiftLibsRepo; + return argv.eightshiftLibsBranch || argv.eightshiftFrontendLibsBranch || argv.eightshiftLibsRepo || argv.eightshiftFrontendLibsRepoUrl; }; /** @@ -20,8 +20,10 @@ const areDependenciesModified = (argv) => { * * @param {string} projectPath Path to the project. * @param {array} branch Name of the branch to pull from. + * @param {string} repo Custom repository to use if provided. */ -const installModifiedNodeDependencies = async (projectPath, branch) => { +const installModifiedNodeDependencies = async (projectPath, branch, repo) => { + const eightshiftFrontendLibsRepoUrl = repo || defaultEightshiftFrontendLibsRepoUrl; return installNodePackage(projectPath, `${eightshiftFrontendLibsRepoUrl}#${branch} --save`); };