Merge branch 'epic/CXSPA-9094-bootstrap' into chore/add-bootstrap-lic…

…ense
SAP · Jan 8, 2025 · 86a9815 · 86a9815
2 parents acbdd38 + 7e87602
commit 86a9815
Show file tree

Hide file tree

Showing 21 changed files with 76 additions and 58 deletions.
diff --git a/docs/migration/2211_ng18/bootstrap.md b/docs/migration/2211_ng18/bootstrap.md
@@ -9,15 +9,15 @@
    styles to be applied correctly.
 ### Steps to Update:
 1. Place the following import for styles-config at the top of the file:
-   ```@import 'styles-config';```
+       ```@import 'styles-config';```
 2. Add Spartacus core styles first. Importing Spartacus styles before Bootstrap ensures core styles load as a
    priority.
 3. Follow this by importing Bootstrap styles using the Bootstrap copy provided by Spartacus. Ensure the order of
    Bootstrap imports matches the sequence below for consistency.
 4. Conclude with the Spartacus index styles.
 
 
-Final file structure should look like this:
+   Final file structure should look like this:
 
 ```styles.scss
 // ORDER IMPORTANT: Spartacus core first

diff --git a/extra-webpack.config.js b/extra-webpack.config.js
@@ -23,7 +23,6 @@ module.exports = {
   ],
   resolve: {
     fallback: {
-      bootstrap: path.join(__dirname, 'projects/styles/bootstrap-copy'),
       '@spartacus/styles': path.join(__dirname, 'projects/storefrontstyles'),
       '@spartacus/user': path.join(__dirname, 'feature-libs/user'),
       '@spartacus/organization': path.join(

diff --git a/feature-libs/cart/_index.scss b/feature-libs/cart/_index.scss
@@ -2,9 +2,9 @@
 @import '@spartacus/styles/scss/cxbase/blocks/modal';
 @import '@spartacus/styles/scss/misc/table';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/checkout/_index.scss b/feature-libs/checkout/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/mixins';
 
 @import './base/index';
 @import './b2b/index';

diff --git a/feature-libs/organization/_index.scss b/feature-libs/organization/_index.scss
@@ -1,9 +1,9 @@
 @import '@spartacus/styles/scss/core';
 
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/organization/administration/styles/_buttons.scss b/feature-libs/organization/administration/styles/_buttons.scss
@@ -1,5 +1,5 @@
 %buttons {
-  @import 'bootstrap/scss/buttons';
+  @import '@spartacus/styles/vendor/bootstrap/scss/buttons';
   a.link,
   button.link {
     @extend .btn, .btn-link, .btn-sm;

diff --git a/feature-libs/pickup-in-store/_index.scss b/feature-libs/pickup-in-store/_index.scss
@@ -4,8 +4,8 @@ $cx-color-link-primary: #1672b7;
 @import '@spartacus/styles/scss/cxbase/blocks/modal';
 @import '@spartacus/styles/scss/misc/table';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './styles/index';
diff --git a/feature-libs/pickup-in-store/styles/_my-preferred-store.scss b/feature-libs/pickup-in-store/styles/_my-preferred-store.scss
@@ -1,5 +1,5 @@
 %cx-my-preferred-store {
-  @import 'bootstrap/scss/buttons';
+  @import '@spartacus/styles/vendor/bootstrap/scss/buttons';
 
   .cx-store-opening-hours-toggle {
     @include type('6');

diff --git a/feature-libs/product-multi-dimensional/_index.scss b/feature-libs/product-multi-dimensional/_index.scss
@@ -1,7 +1,7 @@
 @import '@spartacus/styles/scss/core';
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './selector/index';
diff --git a/feature-libs/product/_index.scss b/feature-libs/product/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/qualtrics/_index.scss b/feature-libs/qualtrics/_index.scss
@@ -1,7 +1,7 @@
 @import '@spartacus/styles/scss/core';
 // we require a few bootstrap files for the CSS in this code
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './styles/index';
diff --git a/feature-libs/quote/_index.scss b/feature-libs/quote/_index.scss
@@ -1,9 +1,9 @@
 @import '@spartacus/styles/scss/core';
 @import '@spartacus/styles/scss/app';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @mixin visible-focus {
   outline-style: solid;

diff --git a/feature-libs/storefinder/styles/_index.scss b/feature-libs/storefinder/styles/_index.scss
@@ -1,6 +1,6 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/mixins';
 
 @import './components/index';
 @import './layout/index';
diff --git a/integration-libs/epd-visualization/_index.scss b/integration-libs/epd-visualization/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './styles/index';
 

diff --git a/integration-libs/opf/_index.scss b/integration-libs/opf/_index.scss
@@ -1,8 +1,8 @@
 @import '@spartacus/styles/scss/core';
 @import '@spartacus/checkout';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 @import './base/styles/index';
 @import './checkout/styles/index';
 @import './cta/styles/index';

diff --git a/projects/schematics/src/add-spartacus/index.ts b/projects/schematics/src/add-spartacus/index.ts
@@ -148,7 +148,26 @@ function installStyles(options: SpartacusOptions): Rule {
       styleFilePath
     );
     let insertion =
-      `\n@import '${relativeStyleConfigImportPath}';\n` +
+      `@import '${relativeStyleConfigImportPath}';\n` +
+      `\n// ORDER IMPORTANT: Spartacus core first\n` +
+      `@import '@spartacus/styles/scss/core';\n\n` +
+      `// ORDER IMPORTANT: Copy of Bootstrap files next\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/reboot';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/type';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/grid';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/utilities';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/transitions';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/dropdown';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/card';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/nav';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/buttons';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/forms';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/custom-forms';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/modal';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/close';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/alert';\n` +
+      `@import '@spartacus/styles/vendor/bootstrap/scss/tooltip';\n\n` +
+      `// ORDER IMPORTANT: Spartacus styles last\n` +
       `@import '@spartacus/styles/index';\n`;
 
     if (options?.theme) {

diff --git a/projects/schematics/src/ng-add/__snapshots__/index_spec.ts.snap b/projects/schematics/src/ng-add/__snapshots__/index_spec.ts.snap
@@ -67,7 +67,6 @@ exports[`Spartacus Schematics: ng-add should add spartacus properly with SSR 2`]
     "@spartacus/storefront": "~2211.32.0-1",
     "@spartacus/styles": "~2211.32.0-1",
     "angular-oauth2-oidc": "^17.0.1",
-    "bootstrap": "^4.6.2",
     "express": "^4.18.2",
     "i18next": "^23.7.6",
     "i18next-http-backend": "^2.4.2",

diff --git a/projects/storefrontapp/src/styles.scss b/projects/storefrontapp/src/styles.scss
@@ -4,21 +4,22 @@
 @import '@spartacus/styles/scss/core';
 
 // ORDER IMPORTANT: Bootstrap next
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/custom-forms';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/alert';
-@import 'bootstrap/scss/tooltip';
+
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+@import '@spartacus/styles/vendor/bootstrap/scss/type';
+@import '@spartacus/styles/vendor/bootstrap/scss/grid';
+@import '@spartacus/styles/vendor/bootstrap/scss/utilities';
+@import '@spartacus/styles/vendor/bootstrap/scss/transitions';
+@import '@spartacus/styles/vendor/bootstrap/scss/dropdown';
+@import '@spartacus/styles/vendor/bootstrap/scss/card';
+@import '@spartacus/styles/vendor/bootstrap/scss/nav';
+@import '@spartacus/styles/vendor/bootstrap/scss/buttons';
+@import '@spartacus/styles/vendor/bootstrap/scss/forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/custom-forms';
+@import '@spartacus/styles/vendor/bootstrap/scss/modal';
+@import '@spartacus/styles/vendor/bootstrap/scss/close';
+@import '@spartacus/styles/vendor/bootstrap/scss/alert';
+@import '@spartacus/styles/vendor/bootstrap/scss/tooltip';
 
 // ORDER IMPORTANT: Spartacus styles last
 @import '@spartacus/styles';
diff --git a/projects/storefrontstyles/scss/cxbase/_functions.scss b/projects/storefrontstyles/scss/cxbase/_functions.scss
@@ -1,3 +1,3 @@
-@import 'bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
 @import 'functions/spacer';
 @import 'functions/merge';
diff --git a/projects/storefrontstyles/scss/cxbase/_mixins.scss b/projects/storefrontstyles/scss/cxbase/_mixins.scss
@@ -4,7 +4,7 @@
 // we load variables through the theme import.  */
 @import '../theme';
 
-@import 'bootstrap/scss/_mixins';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
 
 @import './mixins/reset';
 @import './mixins/weight';

diff --git a/projects/storefrontstyles/scss/cxbase/_variables.scss b/projects/storefrontstyles/scss/cxbase/_variables.scss
@@ -10,7 +10,7 @@
 // The Sparta buttons use uppercase type but future themes may want normal case
 // so a variable was created to make this available for other themes.
 @import 'functions';
-@import 'bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
 
 $background: $white !default;
 $inverse: $white !default;