Merge pull request #835 from takenet/developer

Developer
takenet · May 27, 2024 · 04e20a9 · 04e20a9
2 parents 7d5c54b + 3ef1f42
commit 04e20a9
Show file tree

Hide file tree

Showing 55 changed files with 695 additions and 450 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -17,6 +17,7 @@ import { BannerAlign, BannerVariant, ButtonClose, Context } from "./components/b
 import { ButtonSize, ButtonType, ButtonVariant, IconTheme, IconType } from "./components/button/button";
 import { colorsVariants, LoadingSpinnerVariant } from "./components/loading-spinner/loading-spinner";
 import { ButtonIconTheme, IconButtonSize, IconButtonVariant } from "./components/icon-button/icon-button";
+import { PaperBackground, PaperElevation } from "./components/paper/paper-interface";
 import { justifyContent } from "./components/card/card-footer/card-footer";
 import { justifyContent as justifyContent1 } from "./components/card/card-header/card-header";
 import { ChipSize, ChipVariant } from "./components/chip/chip";
@@ -51,7 +52,6 @@ import { collapses as collapses1 } from "./components/nav-tree/nav-tree";
 import { collapses as collapses2 } from "./components/nav-tree/nav-tree-item";
 import { justifyContent as justifyContent3, navbarBackground, orientation } from "./components/navbar/navbar";
 import { PaginationOptionsPositionType } from "./components/pagination/pagination";
-import { PaperBackground, PaperElevation } from "./components/paper/paper-interface";
 import { progressBarColor, progressBarSize } from "./components/progress-bar/progress-bar";
 import { TypeOption } from "./components/select-option/select-option";
 import { sidebarBackground, sidebarPosition, sidebarType } from "./components/sidebar/sidebar";
@@ -413,6 +413,10 @@ export namespace Components {
         "variant"?: IconButtonVariant;
     }
     interface BdsCard {
+        /**
+          * Prop for set the background color.
+         */
+        "bgColor"?: PaperBackground;
         /**
           * If the prop is true, the component will be clickable.
          */
@@ -3822,6 +3826,10 @@ declare namespace LocalJSX {
         "variant"?: IconButtonVariant;
     }
     interface BdsCard {
+        /**
+          * Prop for set the background color.
+         */
+        "bgColor"?: PaperBackground;
         /**
           * If the prop is true, the component will be clickable.
          */

diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
@@ -38,9 +38,15 @@
     top: calc(50% - 16px);
     border-radius: 8px;
     contain: inherit;
-    -webkit-transition: height 0.5s, all 0.3s;
-    -moz-transition: height 0.5s, all 0.3s;
-    transition: height 0.5s, all 0.3s;
+    -webkit-transition:
+      height 0.5s,
+      all 0.3s;
+    -moz-transition:
+      height 0.5s,
+      all 0.3s;
+    transition:
+      height 0.5s,
+      all 0.3s;
     z-index: 1;
 
     &__isopen {
@@ -75,7 +81,7 @@
 .accordion_body {
   height: 0;
   overflow: hidden;
-  border-bottom: 1px solid $color-surface-3;
+  border-bottom: 1px solid $color-border-1;
   -webkit-transition: height 0.5s;
   -moz-transition: height 0.5s;
   transition: height 0.5s;

diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
@@ -19,7 +19,7 @@
     max-width: 424px;
     border-radius: 8px;
     background: $color-surface-1;
-    box-shadow: $shadow-box;
+    box-shadow: $shadow-3;
   }
 
   &--open {

diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
@@ -34,10 +34,6 @@ $select-options-max-height: 250px;
   $color-input-hover: $hover;
   $color-input-focus: $focus;
 
-  @if ($name == 'disabled') {
-    background: $color-surface-2;
-  }
-
   @include input-border($color-input-border);
 
   // States
@@ -51,13 +47,20 @@ $select-options-max-height: 250px;
 
   &.input--pressed {
     @include input-border($color-input-primary, $color-input-focus);
+    .input__icon {
+      .bds-icon {
+        color: $color-input-primary;
+      }
+    }
   }
 
   .input__container__label {
     color: $color-input-label;
 
     &--pressed {
-      color: $color-input-primary;
+      bds-typo {
+        color: $color-input-primary;
+      }
     }
   }
 
@@ -98,17 +101,18 @@ $select-options-max-height: 250px;
   flex-direction: row;
   align-items: center;
   padding: $input-padding;
-
   flex: 1;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
 
-  background: $color-surface-1;
+  .bds-icon {
+    position: relative;
+    z-index: 1;
+  }
 
   &--state {
     &-primary {
-
       .input__icon {
         position: relative;
         &::before {
@@ -118,9 +122,8 @@ $select-options-max-height: 250px;
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: $color-primary;
+          background-color: $color-hover;
           z-index: 0;
-          opacity: 50%;
           border-radius: 8px;
         }
       }
@@ -146,15 +149,15 @@ $select-options-max-height: 250px;
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: $color-delete;
+          background-color: $color-surface-negative;
           z-index: 0;
           opacity: 50%;
           border-radius: 8px;
         }
       }
       @include input-theme(
         'danger',
-        $color-delete,
+        $color-negative,
         $color-error,
         $color-delete,
         $color-content-default,
@@ -174,14 +177,14 @@ $select-options-max-height: 250px;
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: $color-success;
+          background-color: $color-surface-positive;
           z-index: 0;
           border-radius: 8px;
         }
       }
       @include input-theme(
         'success',
-        $color-content-default,
+        $color-positive,
         $color-success,
         $color-content-default,
         $color-content-default,
@@ -201,7 +204,7 @@ $select-options-max-height: 250px;
           left: 0;
           width: 100%;
           height: 100%;
-          background-color: $color-primary;
+          background-color: $color-hover;
           z-index: 0;
           opacity: 50%;
           border-radius: 8px;
@@ -210,13 +213,11 @@ $select-options-max-height: 250px;
       opacity: 50%;
       pointer-events: none;
       cursor: not-allowed;
-      background: $color-surface-2;
     }
   }
 
-
   & .icon-success {
-    color: $color-success;
+    color: $color-positive;
     margin-left: 4px;
   }
 
@@ -298,10 +299,20 @@ $select-options-max-height: 250px;
 
     &--danger {
       .bds-icon {
-        color: $color-delete;
+        color: $color-negative;
+      }
+      .input__message__text {
+        color: $color-negative;
+      }
+    }
+    &--success {
+      .input__message__icon {
+        .bds-icon {
+          color: $color-positive;
+        }
       }
       .input__message__text {
-        color: $color-delete;
+        color: $color-content-default;
       }
     }
   }
@@ -327,7 +338,7 @@ $select-options-max-height: 250px;
   flex-wrap: nowrap;
   gap: 8px;
 
-  .inside-input-left{
+  .inside-input-left {
     display: inline;
   }
 }
@@ -373,21 +384,19 @@ $select-options-max-height: 250px;
     display: grid;
     @include custom-scroll;
 
-    background: $color-surface-2;
+    background: $color-surface-0;
     width: 100%;
     max-height: 200px;
     height: fit-content;
     position: absolute;
     left: 0;
     border-radius: $select-options-radius;
-    box-shadow: $select-options-box-shadow;
+    box-shadow: $shadow-3;
     overflow-y: auto;
     z-index: 2;
     pointer-events: none;
     opacity: 0;
 
-    box-shadow: 0px 2px 12px $shadow-drop;
-
     ::slotted(*) {
       display: flex;
       flex-flow: column;
@@ -403,7 +412,7 @@ $select-options-max-height: 250px;
 
     .select-all {
       order: -3;
-      background-color: var(--color-surface-1, #F6F6F6);
+      background-color: var(--color-surface-1, #f6f6f6);
       padding: 8px 8px 8px 12px;
       box-sizing: border-box;
       display: flex;
@@ -426,7 +435,7 @@ $select-options-max-height: 250px;
         background-color: $color-border-2;
       }
     }
-    
+
     .load-spinner {
       background-color: $color-surface-1;
       height: 200px;

diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
@@ -585,7 +585,7 @@ export class BdsAutocomplete {
       return (
         <div class={styles} part="input__message">
           <div class="input__message__icon">
-            <bds-icon size="x-small" name={icon} theme="solid" color="inherit"></bds-icon>
+            <bds-icon size="x-small" name={icon} theme="outline" color="inherit"></bds-icon>
           </div>
           <bds-typo class="input__message__text" variant="fs-12">
             {message}

diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss
@@ -17,7 +17,7 @@ $avatar-size-extra-large: 72px;
   align-items: center;
   appearance: none;
   height: 100%;
-  
+
   &::before {
     content: '';
     position: absolute;
@@ -63,15 +63,15 @@ $avatar-size-extra-large: 72px;
     }
 
     &__text {
-      color: $color-content-din;
+      color: $color-content-default;
       opacity: 1;
       -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
       transition: all 0.5s;
     }
 
     &__icon {
-      color: $color-content-din;
+      color: $color-content-default;
       opacity: 1;
       -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
@@ -122,7 +122,7 @@ $avatar-size-extra-large: 72px;
       transition: all 0.5s;
 
       &__icon {
-        color: $color-content-din;
+        color: $color-content-default;
       }
     }
 
@@ -142,7 +142,7 @@ $avatar-size-extra-large: 72px;
       transition: all 0.5s;
 
       &__icon {
-        color: $color-content-din;
+        color: $color-content-default;
       }
     }
   }

diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
@@ -47,6 +47,10 @@
       &--error {
         background-color: $color-error;
       }
+
+      &--success {
+        background-color: $color-success;
+      }
     }
 
     &__content {

diff --git a/src/components/banner/banner.stories.jsx b/src/components/banner/banner.stories.jsx
@@ -27,23 +27,23 @@ Properties.argTypes = {
     table: {
       defaultValue: { summary: 'system' },
     },
-    
-    options: ['system', 'error', 'warning', 'info'],
+
+    options: ['system', 'error', 'warning', 'info', 'success'],
     control: 'select',
   },
   context: {
     table: {
       defaultValue: { summary: 'outside' },
     },
-    
+
     options: ['outside', 'inside'],
     control: 'select',
   },
   buttonClose: {
     table: {
       defaultValue: { summary: 'false' },
     },
-    
+
     control: 'boolean',
   },
 };

diff --git a/src/components/banner/banner.tsx b/src/components/banner/banner.tsx
@@ -11,7 +11,7 @@ import {
   Element,
 } from '@stencil/core';
 
-export type BannerVariant = 'system' | 'warning' | 'info' | 'error';
+export type BannerVariant = 'system' | 'warning' | 'info' | 'error' | 'success';
 export type BannerAlign = 'left' | 'right' | 'center';
 export type ButtonClose = 'true' | 'false';
 export type Link = 'true' | 'false';
@@ -88,6 +88,9 @@ export class Banner implements ComponentInterface {
             {this.variant === 'error' && (
               <bds-icon class="icon_left" theme="outline" size="medium" name="error"></bds-icon>
             )}
+            {this.variant === 'success' && (
+              <bds-icon class="icon_left" theme="outline" size="medium" name="checkball"></bds-icon>
+            )}
             <div class="slot">
               <slot></slot>
             </div>