Merge pull request #943 from takenet/bugfix/upgrade-grid-color

fix(grid): added prop color

src/components.d.ts

@@ -36,6 +36,7 @@ import { languages } from "./utils/languages";
 import { DaysList } from "./components/datepicker/datepicker-interface";
 import { stateSelect } from "./components/datepicker/datepicker-period/datepicker-period";
 import { activeMode, DropdownPostionType as DropdownPostionType1 } from "./components/dropdown/dropdown";
+import { Color } from "./components/grid/color-grid-interface";
 import { IconSize, IconTheme as IconTheme1, IconType as IconType1 } from "./components/icon/icon-interface";
 import { IllustrationType } from "./components/illustration/illustration-interface";
 import { ObjectFitValue } from "./components/image/image";
@@ -951,6 +952,7 @@ export namespace Components {
     }
     interface BdsGrid {
         "alignItems"?: alignItems;
+        "bgColor"?: Color;
         "container"?: boolean;
         "containerFluid"?: boolean;
         "direction"?: direction;
@@ -4593,6 +4595,7 @@ declare namespace LocalJSX {
     }
     interface BdsGrid {
         "alignItems"?: alignItems;
+        "bgColor"?: Color;
         "container"?: boolean;
         "containerFluid"?: boolean;
         "direction"?: direction;

src/components/grid/color-grid-interface.ts

@@ -0,0 +1,33 @@
+export type Color =
+  | '$color-brand'
+  | '$color-primary'
+  | '$color-secondary'
+  | '$color-surface-0'
+  | '$color-surface-1'
+  | '$color-surface-2'
+  | '$color-surface-3'
+  | '$color-surface-4'
+  | '$color-surface-positive'
+  | '$color-surface-negative'
+  | '$color-surface-primary'
+  | '$color-content-default'
+  | '$color-content-disable'
+  | '$color-content-ghost'
+  | '$color-content-bright'
+  | '$color-content-din'
+  | '$color-border-1'
+  | '$color-border-2'
+  | '$color-border-3'
+  | '$color-info'
+  | '$color-system'
+  | '$color-focus'
+  | '$color-success'
+  | '$color-warning'
+  | '$color-error'
+  | '$color-delete'
+  | '$color-shadow-0'
+  | '$color-shadow-1'
+  | '$color-hover'
+  | '$color-pressed'
+  | '$color-positive'
+  | '$color-negative';

src/components/grid/grid.scss

@@ -1,3 +1,45 @@
+$colors: (
+  "color-brand": $color-brand,
+  "color-primary": $color-primary,
+  "color-secondary": $color-secondary,
+  "color-surface-0": $color-surface-0,
+  "color-surface-1": $color-surface-1,
+  "color-surface-2": $color-surface-2,
+  "color-surface-3": $color-surface-3,
+  "color-surface-4": $color-surface-4,
+  "color-surface-positive": $color-surface-positive,
+  "color-surface-negative": $color-surface-negative,
+  "color-surface-primary": $color-surface-primary,
+  "color-content-default": $color-content-default,
+  "color-content-disable": $color-content-disable,
+  "color-content-ghost": $color-content-ghost,
+  "color-content-bright": $color-content-bright,
+  "color-content-din": $color-content-din,
+  "color-border-1": $color-border-1,
+  "color-border-2": $color-border-2,
+  "color-border-3": $color-border-3,
+  "color-info": $color-info,
+  "color-system": $color-system,
+  "color-focus": $color-focus,
+  "color-success": $color-success,
+  "color-warning": $color-warning,
+  "color-error": $color-error,
+  "color-delete": $color-delete,
+  "color-shadow-0": $color-shadow-0,
+  "color-shadow-1": $color-shadow-1,
+  "color-hover": $color-hover,
+  "color-pressed": $color-pressed,
+  "color-positive": $color-positive,
+  "color-negative": $color-negative
+);
+
+// Gera as classes de fundo para cada cor
+@each $name, $value in $colors {
+  :host(.#{$name}) {
+    background-color: #{$value};
+  }
+}
+
 :host {
   display: flex;
   box-sizing: border-box;

src/components/grid/grid.tsx

@@ -1,5 +1,6 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import { direction, justifyContent, flexWrap, alignItems, breakpoint, gap, padding, margin } from './grid-interface';
+import { Color } from './color-grid-interface';
 @Component({
   tag: 'bds-grid',
   styleUrl: 'grid.scss',
@@ -28,6 +29,7 @@ export class Grid {
   @Prop() gap?: gap;
   @Prop() padding?: padding;
   @Prop() margin?: margin;
+  @Prop() bgColor?: Color;
   render() {
     return (
       <Host
@@ -54,8 +56,9 @@ export class Grid {
           [`xgoffset--${this.xgOffset}`]: true,
           [`padding--${this.padding}`]: true,
           [`margin--${this.margin}`]: true,
+          [this.bgColor || '']: true,
         }}
-        style={{ height: this.height }}
+        style={{ height: this.height  }}
       >
         <slot></slot>
       </Host>