PC-104: Add the Ability to Remove a Category Accordion via Trash Icon, Pill Close Button, and Checkbox Toggle

Author: IvanRuskevych

app/assets/images/icons/trash-danger.svg

@@ -1,39 +1,54 @@
-.accordion-button {
-  padding: 22.4px;
-  border: 1px solid $primary;
-  border-radius: 8px !important;
-  background-color: $light !important;
-  transition: border-radius 0.8s ease-out;
+// Accordion styles for bsPrefix={'pc-category-accordion'}
+.pc-category-accordion {
+  .accordion-button {
+    padding: 22.4px;
+    border: 1px solid $primary;
+    border-radius: 8px !important;
+    background-color: $light !important;
+    transition: border-radius 0.8s ease-out;
 
-  &:not(.collapsed) {
-    border-bottom: 1px solid $teal-blue;
-    border-radius: 8px 8px 0 0 !important;
+    &:not(.collapsed) {
+      border-bottom: 1px solid $teal-blue;
+      border-radius: 8px 8px 0 0 !important;
+    }
   }
-}
 
-.accordion-button:not(.collapsed):focus,
-.accordion-button.collapsed:focus {
-  outline-offset: none;
-  box-shadow: none;
-}
+  .accordion-button:not(.collapsed):focus,
+  .accordion-button.collapsed:focus {
+    outline-offset: none;
+    box-shadow: none;
+  }
 
-.accordion-button::after {
-  display: none !important;
-}
+  .accordion-button::after {
+    display: none !important;
+  }
 
-.pc-accordion-body {
-  padding: 20px 32px;
-}
+  .pc-accordion-body {
+    padding: 20px 32px;
+  }
+
+  .accordion-bottom-filling {
+    height: 24px;
+  }
 
-.accordion-bottom-filling {
-  height: 24px;
+  .pc-extra-actions {
+    right: 60px;
+  }
 }
 
-.pc-accordion-quote {
+// Accordion styles for bsPrefix={'pc-item-accordion'}
+.pc-item-accordion {
   .accordion-button {
     padding: 0;
     border: transparent;
     background-color: $white !important;
+
+    &:not(.collapsed) {
+      border: transparent;
+    }
   }
 
+  .pc-extra-actions {
+    right: 44px;
+  }
 }

app/assets/images/icons/trash-default.svg

@@ -15,22 +15,22 @@
     }
 
     &:disabled {
-      border-color: $secondary!important;
-      color: $secondary!important;
+      border-color: $secondary !important;
+      color: $secondary !important;
       background: $white !important;
     }
   }
 
-  // styles for variant="warning"
-  &-warning {
+  // styles for variant="danger"
+  &-danger {
+    border-color: $danger !important;
     color: $white;
-    border-color: $coral-primary !important;
-    background: $coral-primary !important;
+    background: $danger !important;
 
     &:hover,
     &:focus {
-      color: $white;
       border-color: $coral-primary !important;
+      color: $white;
       background: $coral-primary !important;
     }
 
@@ -67,29 +67,30 @@
     }
 
     &:disabled {
-      border-color: $gray-light !important;
-      color: $text-gray-disable !important;
+      border-color: $secondary !important;
+      color: $secondary !important;
     }
   }
 }
 
+// Styles for btn close "x"
+.btn-close {
+  &:focus {
+    box-shadow: none;
+  }
+}
+
 // Additional styles for buttons
 .pc-btn {
-  &-reset, &-back, &-download, &-next {
-    height: 38px;
-  }
+  width: 96px;
+  height: 38px;
 
   &-reset {
     width: 103.71px;
     font-family: $font-family-lato !important;
   }
 
-  &-back,  &-next {
-    width: 96px;
-  }
-
   &-download {
     width: 106px;
   }
 }
-

app/assets/images/icons/trash.svg

@@ -1,3 +1,7 @@
 .pc-pointer {
   cursor: pointer;
 }
+
+.pc-mw-524 {
+  max-width: 524px !important;
+}

app/assets/stylesheets/application/accordion.scss

@@ -9,3 +9,31 @@
     height: 25px;
   }
 }
+
+//Styles for trash-icon on category header accordion
+.pc-icon-hover-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+
+  .icon-default {
+    display: inline;
+  }
+
+  .icon-hover {
+    display: none;
+  }
+
+  &:hover {
+    .icon-default {
+      display: none;
+    }
+
+    .icon-hover {
+      display: inline;
+    }
+  }
+}

app/assets/stylesheets/application/buttons.scss

@@ -39,6 +39,10 @@ h2,
   line-height: 1.7;
 }
 
+.pc-ff-lato {
+  font-family: $font-family-lato;
+}
+
 // Utility Classes
 $custom-colors: (
   'gray': $gray,
@@ -53,6 +57,7 @@ $custom-colors: (
   'teal-dark': $teal-dark,
   'teal-light': $teal-light,
   'teal-blue': $teal-blue,
+  'dark-700': $dark-700,
 );
 
 @each $name, $color in $custom-colors {

app/assets/stylesheets/application/common.scss

@@ -20,6 +20,7 @@ $teal: #a0c9c8;
 $teal-dark: #115d5b;
 $teal-light: #dce8f3;
 $teal-blue: #90bddb;
+$dark-700: rgba($dark, 0.7);
 
 // Button Colors
 $coral-primary: #fe6d75;

app/assets/stylesheets/application/icons.scss

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { Button, Container, Form } from 'react-bootstrap'
 import { useAppHooks } from '../hooks'
-import { ItemsPricingTopBar, ItemTotalPrice, QuoteCreation, ROUTES } from '../shared'
-import { PcAccordion, PcItemAccordion, PcItemFormGroup, PcItemTextareaControl } from '../ui'
+import { DeleteItemModal, ItemsPricingTopBar, ItemTotalPrice, QuoteCreation, ROUTES } from '../shared'
+import { PcCategoryAccordion, PcItemAccordion, PcItemFormGroup, PcItemTextareaControl } from '../ui'
 import { getCurrentStepId } from '../utils'
 
 export const ItemsPricing = () => {
@@ -24,6 +24,11 @@ export const ItemsPricing = () => {
       prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id],
     )
   }
+  const handleDeleteCategory = (categoryId) => {
+    setSelectedCategories((prev) => prev.filter((category) => category.id !== categoryId))
+    setExpandedAccordions((prev) => prev.filter((id) => id !== categoryId))
+  }
+
   const expandAll = () => setExpandedAccordions(selectedCategories.map(category => category.id))
   const collapseAll = () => setExpandedAccordions([])
   const handleDownload = () => {
@@ -59,13 +64,14 @@ export const ItemsPricing = () => {
 
       <section className={'d-flex flex-column gap-4 mb-8'}>
         {selectedCategories.length > 0 && selectedCategories.map((category) => (
-          <PcAccordion
+          <PcCategoryAccordion
             key={category.id}
             categoryName={category.name}
             isOpen={expandedAccordions.includes(category.id)}
             onToggle={() => handleToggle(category.id)}
+            onDelete={() => handleDeleteCategory(category.id)}
           >
-            {/*List of items */}
+            {/*TODO: Skeleton for displaying item inside accordion */}
             <div className={'d-flex flex-column gap-5'}>
               {/*TODO: Example of Fixed Price. Will be changed after adding logic*/}
               <PcItemAccordion
@@ -95,17 +101,21 @@ export const ItemsPricing = () => {
                   </PcItemFormGroup>
                 }
               </PcItemAccordion>
+
             </div>
-          </PcAccordion>
+          </PcCategoryAccordion>
         ))}
       </section>
 
       {/* Buttons section */}
       <section className={'d-flex justify-content-center align-items-center gap-4 mb-5'}>
-        <Button variant={'outline-primary'} className={'fw-bold pc-btn-back'} onClick={handleBack}>Back</Button>
-        <Button variant={'outline-primary'} className={'fw-bold pc-btn-download'} onClick={handleDownload}
+        <Button variant={'outline-primary'} className={'fw-bold pc-btn'} onClick={handleBack}>Back</Button>
+        <Button variant={'outline-primary'} className={'fw-bold pc-btn pc-btn-download'} onClick={handleDownload}
                 disabled={true}>Download</Button>
       </section>
+
+      {/*Modal for confirm delete/cancel category*/}
+      <DeleteItemModal />
     </Container>
   )
 }