Remove Bootstrap dependency

.prettierignore

@@ -5,4 +5,5 @@ feature-libs/smartedit/assets/webApplicationInjector.js
 coverage
 
 /.nx/cache
-/.nx/workspace-data
+/.nx/workspace-data
+projects/storefrontstyles/vendor/**/*.scss

.stylelintrc.json

@@ -38,8 +38,14 @@
       "margin-inline"
     ],
     "declaration-property-value-disallowed-list": {
-      "text-align": ["right", "left"]
+      "text-align": [
+        "right",
+        "left"
+      ]
     },
     "scss/comment-no-loud": true
-  }
+  },
+  "ignoreFiles": [
+    "projects/storefrontstyles/vendor/**/*.scss"
+  ]
 }

README.md

@@ -158,4 +158,3 @@ Many improvements are coming! All tasks will be posted to our GitHub issue track
 
 Copyright (c) 2024 SAP SE or an SAP affiliate company. All rights reserved.
 This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the [LICENSE](LICENSE) file.
-

docs/migration/2211_ng18/bootstrap.md

@@ -0,0 +1,76 @@
+# Spartacus migration - Bootstrap
+
+1. Uninstall Bootstrap
+   If the bootstrap package is still installed in your project, uninstall it to avoid conflicts. Use
+   the following command:
+   ```npm uninstall bootstrap```
+2. Update `styles.scss`
+   Modify the `styles.scss` file to integrate Spartacus styles along with Bootstrap. Proper import order is critical for
+   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';```
+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:
+
+```styles.scss
+// ORDER IMPORTANT: Spartacus core first
+@import '@spartacus/styles/scss/core';
+
+// ORDER IMPORTANT: Bootstrap next
+@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';
+
+@import '@spartacus/styles/index';
+```
+3. Individual imports.
+   If your application directly imports specific Bootstrap classes in any of your stylesheets, replace those imports with the corresponding Spartacus imports. For example:
+```
+// Original import
+@import '~bootstrap/scss/reboot';
+
+// Replace with
+@import '@spartacus/styles/vendor/bootstrap/scss/reboot';
+```
+
+4. Some libraries have stopped importing Bootstrap-related styles. Instead, these styles should now be imported directly within the application. For example, the lib-cart.scss file should include the following imports:
+```scss
+// original imports
+@import '../styles-config';
+@import '@spartacus/cart';
+// new imports
+@import '@spartacus/styles/vendor/bootstrap/scss/functions';
+@import '@spartacus/styles/vendor/bootstrap/scss/variables';
+@import '@spartacus/styles/vendor/bootstrap/scss/_mixins';
+```
+Affected libraries:
+- cart
+- checkout
+- organization
+- pick-up-in-store
+- product
+- product-multi-dimensional
+- qualtrics
+- quote
+- storefinder
+- epd-visualization
+- opf

feature-libs/cart/_index.scss

@@ -2,10 +2,6 @@
 @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';
-
 @mixin visible-focus {
   outline-style: solid;
   outline-color: var(--cx-color-visual-focus);

feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.html

@@ -1,11 +1,11 @@
 <div
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
-  class="cx-clear-cart-dialog"
+  class="modal-dialog modal-dialog-centered cx-clear-cart-dialog"
   role="dialog"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-clear-cart-container">
+  <div class="modal-content cx-clear-cart-container">
     <ng-container *ngIf="!isClearing; else loading">
       <div
         *cxFeature="'!a11yRemoveStatusLoadedRole'"
@@ -43,7 +43,7 @@
       </div>
 
       <!-- Modal Body -->
-      <div class="cx-clear-cart-body">
+      <div class="modal-body cx-clear-cart-body">
         <div class="clear-cart-msg">
           {{ 'clearCart.allItemsWillBeRemoved' | cxTranslate }}
         </div>

feature-libs/cart/base/styles/components/_clear-cart-dialog.scss

@@ -2,12 +2,7 @@
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-clear-cart-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-
     .cx-clear-cart-container {
-      @extend .modal-content;
-
       .cx-clear-cart-header {
         .cx-clear-cart-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@
       }
 
       .cx-clear-cart-body {
-        @extend .modal-body;
-
         .clear-cart-msg {
           margin-bottom: 1.5rem;
         }

feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.html

@@ -1,11 +1,11 @@
 <div
   [cxFocus]="focusConfig"
   (esc)="close('Escape clicked')"
-  class="cx-import-entries-dialog"
+  class="modal-dialog modal-dialog-centered cx-import-entries-dialog"
   role="dialog"
   aria-labelledby="dialogTitle"
 >
-  <div class="cx-import-entries-container">
+  <div class="modal-content cx-import-entries-container">
     <!-- Modal Header -->
     <div class="modal-header cx-import-entries-header">
       <ng-container>
@@ -43,12 +43,14 @@
     <ng-container *ngIf="context$ | async as context">
       <ng-container *ngIf="formState; else importSummary">
         <cx-import-to-new-saved-cart-form
+          class="modal-body"
           *ngIf="isNewCartForm(context); else reducedForm"
           [type]="context.type"
           (submitEvent)="importProducts(context, $event)"
         ></cx-import-to-new-saved-cart-form>
         <ng-template #reducedForm>
           <cx-import-entries-form
+            class="modal-body"
             [type]="context.type"
             (submitEvent)="importProducts(context, $event)"
           ></cx-import-entries-form>
@@ -57,6 +59,7 @@
 
       <ng-template #importSummary>
         <cx-import-entries-summary
+          class="modal-body"
           [summary]="summary$ | async"
           [type]="context.type"
           (closeEvent)="close('Close Import Products Dialog')"

feature-libs/cart/import-export/styles/_import-entries-dialog.scss

@@ -2,11 +2,7 @@ cx-import-entries-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-import-entries-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-
     .cx-import-entries-container {
-      @extend .modal-content;
       pointer-events: none;
 
       button,
@@ -32,7 +28,6 @@ cx-import-entries-dialog {
 
       cx-import-entries-form,
       cx-import-to-new-saved-cart-form {
-        @extend .modal-body;
         background-color: var(--cx-color-inverse);
         .cx-import-entries-subtitle {
           font-weight: var(--cx-font-weight-bold);
@@ -95,8 +90,6 @@ cx-import-entries-dialog {
       }
 
       cx-import-entries-summary {
-        @extend .modal-body;
-
         ul {
           margin: -0.75rem 0 1.5rem;
           overflow: auto;

feature-libs/cart/package.json

@@ -42,7 +42,6 @@
     "@spartacus/storefront": "2211.32.0",
     "@spartacus/styles": "2211.32.0",
     "@spartacus/user": "2211.32.0",
-    "bootstrap": "^4.6.2",
     "rxjs": "^7.8.0"
   },
   "publishConfig": {

feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html

@@ -2,11 +2,11 @@
   <div
     [cxFocus]="focusConfig"
     (esc)="close('Escape clicked')"
-    class="cx-saved-cart-form-dialog"
+    class="modal-dialog modal-dialog-centered cx-saved-cart-form-dialog"
     role="dialog"
     aria-labelledby="dialogTitle"
   >
-    <form [formGroup]="form" class="cx-saved-cart-form-container">
+    <form [formGroup]="form" class="modal-content cx-saved-cart-form-container">
       <!-- Modal Header -->
       <div class="modal-header cx-saved-cart-form-header">
         <ng-container [ngSwitch]="layoutOption">
@@ -63,7 +63,7 @@
       </div>
 
       <!-- Modal Body -->
-      <div class="cx-saved-cart-form-body">
+      <div class="modal-body cx-saved-cart-form-body">
         <!-- start DELETE and RESTORE form -->
         <ng-container
           *ngIf="

feature-libs/cart/saved-cart/styles/_saved-cart-form-dialog.scss

@@ -2,12 +2,7 @@ cx-saved-cart-form-dialog {
   background-color: rgba(0, 0, 0, 0.5);
 
   .cx-saved-cart-form-dialog {
-    @extend .modal-dialog;
-    @extend .modal-dialog-centered;
-
     .cx-saved-cart-form-container {
-      @extend .modal-content;
-
       .cx-saved-cart-form-header {
         .cx-saved-cart-form-title {
           font-size: var(--cx-font-size, 1.375rem);
@@ -17,8 +12,6 @@ cx-saved-cart-form-dialog {
       }
 
       .cx-saved-cart-form-body {
-        @extend .modal-body;
-
         .cx-saved-cart-form-row {
           margin-bottom: 1.5rem;
 

feature-libs/cart/schematics/add-cart/__snapshots__/index_spec.ts.snap

@@ -78,6 +78,9 @@ export class CartBaseFeatureModule { }
 exports[`Spartacus Cart schematics: ng-add Cart Base feature general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/cart";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 
@@ -263,6 +266,9 @@ export class CartImportExportFeatureModule { }
 exports[`Spartacus Cart schematics: ng-add Cart Import Export feature general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/cart";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 
@@ -448,6 +454,9 @@ export class CartQuickOrderFeatureModule { }
 exports[`Spartacus Cart schematics: ng-add Quick Order feature general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/cart";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 
@@ -633,6 +642,9 @@ export class CartSavedCartFeatureModule { }
 exports[`Spartacus Cart schematics: ng-add Saved Cart feature general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/cart";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 
@@ -828,6 +840,9 @@ export class WishListFeatureModule { }
 exports[`Spartacus Cart schematics: ng-add Wish List feature general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/cart";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 

feature-libs/checkout/_index.scss

@@ -1,9 +1,5 @@
 @import '@spartacus/styles/scss/core';
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-
 @import './base/index';
 @import './b2b/index';
 @import './scheduled-replenishment/index';

feature-libs/checkout/package.json

@@ -39,7 +39,6 @@
     "@spartacus/storefront": "2211.32.0",
     "@spartacus/styles": "2211.32.0",
     "@spartacus/user": "2211.32.0",
-    "bootstrap": "^4.6.2",
     "rxjs": "^7.8.0"
   },
   "publishConfig": {

feature-libs/checkout/schematics/add-checkout/__snapshots__/index_spec.ts.snap

@@ -130,6 +130,9 @@ export class CheckoutWrapperModule { }
 exports[`Spartacus Checkout schematics: ng-add Checkout feature b2b general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/checkout";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 
@@ -315,6 +318,9 @@ export class CheckoutFeatureModule { }
 exports[`Spartacus Checkout schematics: ng-add Checkout feature base general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/checkout";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;
 
@@ -594,6 +600,9 @@ export class CheckoutWrapperModule { }
 exports[`Spartacus Checkout schematics: ng-add Checkout feature scheduled replenishment general setup styling should create a proper scss file 1`] = `
 "@import "../../styles-config";
 @import "@spartacus/checkout";
+@import "@spartacus/styles/vendor/bootstrap/scss/functions";
+@import "@spartacus/styles/vendor/bootstrap/scss/variables";
+@import "@spartacus/styles/vendor/bootstrap/scss/_mixins";
 "
 `;