From b43b3f65ef96d873fffe713a74d39167a5cef411 Mon Sep 17 00:00:00 2001 From: WillianLomeu Date: Thu, 14 Nov 2024 17:49:08 -0300 Subject: [PATCH] fix(grid): added prop color --- src/components.d.ts | 3 ++ src/components/grid/color-grid-interface.ts | 33 ++++++++++++++++ src/components/grid/grid.scss | 42 +++++++++++++++++++++ src/components/grid/grid.tsx | 5 ++- src/components/grid/readme.md | 5 ++- 5 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 src/components/grid/color-grid-interface.ts diff --git a/src/components.d.ts b/src/components.d.ts index a9bca678..eaf62bf8 100644 --- a/src/components.d.ts +++ b/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; diff --git a/src/components/grid/color-grid-interface.ts b/src/components/grid/color-grid-interface.ts new file mode 100644 index 00000000..df7ec629 --- /dev/null +++ b/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'; diff --git a/src/components/grid/grid.scss b/src/components/grid/grid.scss index f21970df..fe363937 100644 --- a/src/components/grid/grid.scss +++ b/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; diff --git a/src/components/grid/grid.tsx b/src/components/grid/grid.tsx index 51bc9d4b..b7992225 100644 --- a/src/components/grid/grid.tsx +++ b/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 ( diff --git a/src/components/grid/readme.md b/src/components/grid/readme.md index aac06e5e..01220261 100644 --- a/src/components/grid/readme.md +++ b/src/components/grid/readme.md @@ -10,6 +10,7 @@ | Property | Attribute | Description | Type | Default | | ---------------- | ----------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `alignItems` | `align-items` | | `"baseline" \| "center" \| "flex-end" \| "flex-start" \| "stretch"` | `undefined` | +| `bgColor` | `bg-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"` | `undefined` | | `container` | `container` | | `boolean` | `undefined` | | `containerFluid` | `container-fluid` | | `boolean` | `undefined` | | `direction` | `direction` | | `"column" \| "column-reverse" \| "row" \| "row-reverse"` | `undefined` | @@ -19,10 +20,10 @@ | `justifyContent` | `justify-content` | | `"center" \| "flex-end" \| "flex-start" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch"` | `undefined` | | `lg` | `lg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `lgOffset` | `lg-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | -| `margin` | `margin` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | +| `margin` | `margin` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | | `md` | `md` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `mdOffset` | `md-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | -| `padding` | `padding` | | `"none" \| "half" \| "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | +| `padding` | `padding` | | `"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12" \| "none" \| "half" \| "l-none" \| "l-half" \| "l-1" \| "l-2" \| "l-3" \| "l-4" \| "l-5" \| "l-6" \| "l-7" \| "l-8" \| "l-9" \| "l-10" \| "l-11" \| "l-12" \| "b-none" \| "b-half" \| "b-1" \| "b-2" \| "b-3" \| "b-4" \| "b-5" \| "b-6" \| "b-7" \| "b-8" \| "b-9" \| "b-10" \| "b-11" \| "b-12" \| "r-none" \| "r-half" \| "r-1" \| "r-2" \| "r-3" \| "r-4" \| "r-5" \| "r-6" \| "r-7" \| "r-8" \| "r-9" \| "r-10" \| "r-11" \| "r-12" \| "t-none" \| "t-half" \| "t-1" \| "t-2" \| "t-3" \| "t-4" \| "t-5" \| "t-6" \| "t-7" \| "t-8" \| "t-9" \| "t-10" \| "t-11" \| "t-12" \| "y-none" \| "y-half" \| "y-1" \| "y-2" \| "y-3" \| "y-4" \| "y-5" \| "y-6" \| "y-7" \| "y-8" \| "y-9" \| "y-10" \| "y-11" \| "y-12" \| "x-none" \| "x-half" \| "x-1" \| "x-2" \| "x-3" \| "x-4" \| "x-5" \| "x-6" \| "x-7" \| "x-8" \| "x-9" \| "x-10" \| "x-11" \| "x-12"` | `undefined` | | `sm` | `sm` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `smOffset` | `sm-offset` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` | | `xg` | `xg` | | `"1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto"` | `undefined` |