From aeb638ea9a3e2de8b1881e9f787c92aa702760fb Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 7 Jan 2026 10:44:23 -0300 Subject: [PATCH 1/6] #1306786 - FEAT: Criado componente TAG e storybook do mesmo --- .../src/components/Tag/Tag.stories.jsx | 169 ++++++++++++++++++ .../src/components/Tag/index.jsx | 23 +++ .../src/components/Tag/variants/Contagem.jsx | 19 ++ .../src/components/Tag/variants/Contagem.scss | 14 ++ .../src/components/Tag/variants/Default.jsx | 81 +++++++++ .../src/components/Tag/variants/Default.scss | 79 ++++++++ .../src/components/Tag/variants/Icone.jsx | 63 +++++++ .../src/components/Tag/variants/Icone.scss | 15 ++ .../components/Tag/variants/Persistente.jsx | 150 ++++++++++++++++ .../components/Tag/variants/Persistente.scss | 21 +++ .../src/components/Tag/variants/Status.jsx | 27 +++ .../src/components/Tag/variants/Status.scss | 28 +++ 12 files changed, 689 insertions(+) create mode 100644 packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/index.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Default.scss create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx create mode 100644 packages/volto-govrs-ds/src/components/Tag/variants/Status.scss diff --git a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx new file mode 100644 index 0000000..80b2e79 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx @@ -0,0 +1,169 @@ +import Tag from './index'; +import Default from './variants/Default'; +import Persistente from './variants/Persistente'; +import Status from './variants/Status'; +import Icone from './variants/Icone'; +import Contagem from './variants/Contagem'; + +export default { + title: 'Components/Tag', + component: Tag, +}; + +export const TagDocs = () => ( + <> +
+

Tag - Documentação

+
+

Tag de Interação

+

Possuem uma ação ao serem clicadas/tocadas. De acordo com o tipo de interação podemos ter tags interativas dispensáveis e persistentes.
+ Tags aceitam as props content, disabled e showIcon

+

Dispensáveis

+
+ + + + +
+ 
+           {``} 

+           {``}
+
+
+ +

Ao utilizar a prop showIcon, a tag não exibe o ícone.

+ +
+ + +
+ + 
+           {``} 

+           {``}
+
+
+ +

Texto

+

A tag pode possuir icone e texto ou somente texto. Optando pela segunda opção utilizasse a prop showClose.

+ +
+ + + + +
+ + 
+           {``} 

+           {``}

+            {``}

+            {` `}
+
+
+ +

Persistentes

+

Tags persistentes não podem ser dispensadas, apenas indicam um estado ou categoria.

+

As props content, disabled e showIcon são aceitas.

+ +

ATENÇÃO: nas tags persistentes que serão selecionadas por padrão, utilize a prop defaultChecked juntamente com a prop disabled.

+
+ + + +
+ + 
+           {``} 

+           {``}

+            {`
+
+
+ +

Persistente — Grupo (radio)

+

Variação para seleção única entre várias tags. Cada tag precisa ter um id único.

+

Para selecionar uma tag por padrão, utilize a prop defaultSelected com o valor do id da tag desejada.

+ +
+ + + + + +
+ 
+           {``} 

+           {`  `}

+           {`  `}

+           {`  `}

+           {``}
+
+ +

Status

+

Tags de status são utilizadas para indicar estados ou categorias específicas. Elas não possuem interação de clique.

+
+ + + +
+ 
+           {``} 

+           {``}

+           {``}
+
+ +

Podem ser usadas com Label ou apenas com a superfície circular.
Para realizar a escolha utilizar a propLabel vazia ou com o mesmo conteúdo da prop status.

+
+ + + +
+ 
+           {``} 

+           {``}

+           {``}
+
+ +

Icone

+

Tags de icone possuem a mesma ideia das tags texto, porém utilizando apenas icone

+

As props ico pode ser utilizada para especificar qual icone será exibido.

+
+ + +
+ 
+           {``} 

+           {``}
+
+ +

Contagem

+

Tags de contagem são utilizadas para exibir um número ou valor associado a uma tag.

+

Se o valor for maior que 999, será exibido como "999+". Os valores são atribuidos através da prop label.

+
+ + + + + +
+ 
+           {``} 

+           {``} 

+           {``} 

+           {``}
+           {``}
+
+ + + + +); + \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/index.jsx b/packages/volto-govrs-ds/src/components/Tag/index.jsx new file mode 100644 index 0000000..ed95ea9 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/index.jsx @@ -0,0 +1,23 @@ +import Default from './variants/Default.jsx'; + +const VARIANTS = { + default: Default, + persistente: require('./variants/Persistente').default, + status: require('./variants/Status').default, + icon: require('./variants/Icone').default, + contagem: require('./variants/Contagem').default, +}; + +export default function Tag({ + items = [], + variant, + itemKey = (i) => i.id, + className = '', + ...rest +}) { + const v = variant || 'default'; + const Variant = VARIANTS[v] || DefaultVariant; + return ( + + ); +} \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx new file mode 100644 index 0000000..b488200 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx @@ -0,0 +1,19 @@ +import PropTypes from 'prop-types'; +import './Contagem.scss'; + +const Contagem = ({label}) => { + const n = Number(label); + const displayLabel = Number.isFinite(n) ? (n > 999 ? '999+' : String(n)) : label; + return( + <> +
+ + {displayLabel} + +
+ + + ); +} + +export default Contagem; \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss new file mode 100644 index 0000000..3c88290 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss @@ -0,0 +1,14 @@ +.govrs-tag-contagem{ + display: inline-flex; + min-width: 24px; + font-size: 0.875rem; + min-height: 24px; + padding: 1px 7px 4px 7px; + justify-content: center; + align-items: center; + gap: 8px; + background-color: #D54309; + color: #fff; + border-radius: 999px; + border: 1px solid #fff; +} \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx new file mode 100644 index 0000000..8d71e57 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx @@ -0,0 +1,81 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; +import './Default.scss'; + +function CarIcon() { + return( + + + + + ) +} + +function CloseIcon() { + return( + + + + + ) +} +const Default = ({ disabled = false, showClose = true, content = 'Tag Default', showIcon = true }) => { + const [visible, setVisible] = useState(true); + + const handleClose = () => { + if (disabled) return; + setVisible(false); + }; + + if (!visible) return null; + + return ( + <> + + {showIcon && ( + + )} + {content} + + {showClose && ( + + )} + + + ); +} + +Default.propTypes = { + disabled: PropTypes.bool, + content: PropTypes.node, + showClose: PropTypes.bool, + showIcon: PropTypes.bool, +}; + +Default.defaultProps = { + disabled: false, + content: 'Tag Default', + showClose: true, + showIcon: true, +}; + +export default Default; \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss new file mode 100644 index 0000000..1def4a8 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss @@ -0,0 +1,79 @@ +.govrs-tag{ + display: inline-flex; + padding: 4px 8px; + justify-content: center; + align-items: center; + gap: 8px; + background-color: #1A7235; + color: #fff; + border-radius: 4px; + border: none; + + + &:not(.disable):hover{ + background: linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%), #1A7235; + } + &:not(.disable):active{ + background: linear-gradient(0deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 100%), #1A7235; + } + + + + > button{ + background-color: transparent; + border: none; + color: #fff; + padding: 0; + + &:hover{ + cursor: pointer; + } + } + + &-group{ + display: flex; + gap: 12px; + align-items: center; + } +} + +.disable{ + opacity: 0.45; + + cursor: not-allowed; + > button{ + pointer-events: none; + + &:hover, &:active{ + cursor: not-allowed; + background-color: #1A7235; + } + } + } + +/* Layout para grupos de tags (ex.: Persistente.Group) */ +.govrs-tag-group{ + display: flex; + gap: 12px; + align-items: center; +} + +/* Foco visível para acessibilidade */ +.govrs-tag:focus-visible{ + outline: none; + border-color: rgba(10,97,41,0.9); + box-shadow: 0 0 0 6px rgba(10,97,41,0.12); +} + +.checked{ + background-color: #279B4A; +} + +// Estilo para exibir utilização dos blocos de código nos stories +.showCode{ + background: #f7f7f7; + padding: 12px; + border-radius: 4px; + overflow-x: auto; + margin-top: 8px; +} \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx new file mode 100644 index 0000000..062d8a0 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx @@ -0,0 +1,63 @@ +import PropTypes from 'prop-types'; +import './Icone.scss'; + +function SearchIcon() { + return ( + + + ) +} + +function CarIcon() { + return( + + + + + ) +} + +const Icone = ({ + ico = "search"}) => { + + const renderIcon = () => { + switch (ico) { + case "search": + return ; + case "car": + return ; + default: + return null; + } + } + + return ( + <> + + + {renderIcon()} + + + + ); +} +Icone.propTypes = { + ico: PropTypes.oneOf(['search','car']), + message: PropTypes.string, + children: PropTypes.node, + outline: PropTypes.bool, +}; + +Icone.defaultProps = { + message: null, + children: null, + outline: false, +}; + +export default Icone; \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss new file mode 100644 index 0000000..73750c4 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss @@ -0,0 +1,15 @@ +@import '../../../theme/variables.scss'; + +.govrs-tag-icon{ + display: inline-flex; + gap: 12px; + align-items: center; + justify-content: center; + max-width: 40px; + min-height: 40px; + border-radius: 50%; + background-color: Magenta; + color: #fff; + padding: 12px; + border: 1px solid #fff; +} \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx new file mode 100644 index 0000000..6bc7feb --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx @@ -0,0 +1,150 @@ +import React, {useState} from 'react'; +import PropTypes from 'prop-types'; +import './Persistente.scss'; + +function CarIcon() { + return( + + + + + ) +} + +function CheckIcon(){ + return( + + + + + ) +} + + +const Persistente = ({ disabled = false, content = 'Tag Persistente', checkIcon = true, showIcon = true, checked: checkedProp, defaultChecked = false, onChange }) => { + + const [internalChecked, setInternalChecked] = useState(defaultChecked); + const isControlled = checkedProp !== undefined; + const checked = isControlled ? checkedProp : internalChecked; + + const handleCheck = () => { + const newChecked = !checked; + if (!isControlled) setInternalChecked(newChecked); + if (typeof onChange === 'function') onChange(newChecked); + } + + return ( + <> + + + + ); +} + +Persistente.propTypes = { + disabled: PropTypes.bool, + content: PropTypes.node, + checkIcon: PropTypes.bool, + showIcon: PropTypes.bool, + checked: PropTypes.bool, + defaultChecked: PropTypes.bool, + onChange: PropTypes.func, +}; + +Persistente.defaultProps = { + disabled: false, + content: 'Tag Persistente', + checkIcon: true, + showIcon: true, + defaultChecked: false, + onChange: undefined, +}; + +// Group variant: quando radio=true, gerencia seleção única (radio-like). Se radio=false, renderiza filhos sem gerenciar. +function Group({ children, radio = false, defaultSelected = null, selected: selectedProp, onChange, allowUnselect = true, ariaLabel }) { + if (!radio) { + return ( +
+ {children} +
+ ); + } + + const [selected, setSelected] = useState(defaultSelected); + const isControlled = selectedProp !== undefined; + const current = isControlled ? selectedProp : selected; + + const handleChildChange = (id, newChecked) => { + if (!newChecked && allowUnselect) { + if (!isControlled) setSelected(null); + if (typeof onChange === 'function') onChange(null); + return; + } + if (newChecked) { + if (!isControlled) setSelected(id); + if (typeof onChange === 'function') onChange(id); + } + }; + + return ( +
+ {React.Children.map(children, child => { + // se o child não tiver id, não alteramos + const id = child.props && child.props.id; + if (!id) return child; + return React.cloneElement(child, { + checkIcon: true, + checked: id === current, + onChange: (newChecked) => handleChildChange(id, newChecked), + role: 'radio', + 'aria-checked': id === current, + className:"govrs-tag-group-active" + }); + })} +
+ ); +} + +Group.propTypes = { + children: PropTypes.node, + radio: PropTypes.bool, + defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + onChange: PropTypes.func, + allowUnselect: PropTypes.bool, + ariaLabel: PropTypes.string, +}; + +Group.defaultProps = { + radio: false, + defaultSelected: null, + onChange: undefined, + allowUnselect: true, + ariaLabel: 'Tag group', +}; + +Persistente.Group = Group; + +export default Persistente; diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss new file mode 100644 index 0000000..360302d --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss @@ -0,0 +1,21 @@ +/* Styles específicos para a variante Persistente */ + +/* Layout para grupos de tags (ex.: Persistente.Group) */ +.govrs-tag-group{ + display: flex; + gap: 12px; + align-items: center; +} + +/* Estado visual quando a tag está marcada */ +.govrs-tag.checked{ + background-color: #279B4A; + +} + +/* Foco visível para acessibilidade (aplicável a tags persistentes) */ +.govrs-tag:focus-visible{ + outline: none; + border-color: rgba(10,97,41,0.9); + box-shadow: 0 0 0 6px rgba(10,97,41,0.12); +} \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx new file mode 100644 index 0000000..3504672 --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx @@ -0,0 +1,27 @@ +import PropTypes from 'prop-types'; +import './Status.scss'; +const Status = ({ + status = 'online', + Label, +}) => { + const classes = ['govrs-tag-status', `govrs-tag-status--${status}`]; + return ( + <> +
+ + + {Label} +
+ + ); +} + +Status.propTypes = { + status: PropTypes.oneOf(['Online', 'Offline', 'Ausente']), +}; + +Status.defaultProps = { + status: 'online', +}; + +export default Status; \ No newline at end of file diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss new file mode 100644 index 0000000..55744ce --- /dev/null +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss @@ -0,0 +1,28 @@ +@import '../../../theme/variables.scss'; + +.govrs-tag-status{ + display: inline-flex; + justify-content: center; + align-items: center; + gap: 8px; + width: 24px; + height: 24px; + border-radius: 50%; + font-family: $font-family-base; + border: 1px solid var(--gray-2); +} +.govrs-tag-status--Online { + background-color: var(--green-cool-vivid-50); + color: #fcfcfc; +} + +.govrs-tag-status--Offline { + background-color: var(--red-vivid-50); + color: #fcfcfc; +} + +.govrs-tag-status--Ausente { + background-color: var(--gold-vivid-20); + color: #fcfcfc; +} + From b24b51cca216241372afad0ab7357fad8b678582 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 7 Jan 2026 11:50:35 -0300 Subject: [PATCH 2/6] Ajustes nos arquivos JSX e SCSS das variantes --- .../src/components/Tag/variants/Contagem.jsx | 32 ++-- .../src/components/Tag/variants/Contagem.scss | 28 ++-- .../src/components/Tag/variants/Default.jsx | 106 ++++++------ .../src/components/Tag/variants/Default.scss | 129 ++++++++------- .../src/components/Tag/variants/Icone.jsx | 85 +++++----- .../src/components/Tag/variants/Icone.scss | 14 +- .../components/Tag/variants/Persistente.jsx | 155 +++++++++++------- .../components/Tag/variants/Persistente.scss | 17 +- .../src/components/Tag/variants/Status.jsx | 24 ++- .../src/components/Tag/variants/Status.scss | 33 ++-- 10 files changed, 336 insertions(+), 287 deletions(-) diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx index b488200..162d94a 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.jsx @@ -1,19 +1,19 @@ -import PropTypes from 'prop-types'; import './Contagem.scss'; -const Contagem = ({label}) => { - const n = Number(label); - const displayLabel = Number.isFinite(n) ? (n > 999 ? '999+' : String(n)) : label; - return( - <> -
- - {displayLabel} - -
- - - ); -} +const Contagem = ({ label }) => { + const n = Number(label); + const displayLabel = Number.isFinite(n) + ? n > 999 + ? '999+' + : String(n) + : label; + return ( + <> +
+ {displayLabel} +
+ + ); +}; -export default Contagem; \ No newline at end of file +export default Contagem; diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss index 3c88290..61beba2 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Contagem.scss @@ -1,14 +1,14 @@ -.govrs-tag-contagem{ - display: inline-flex; - min-width: 24px; - font-size: 0.875rem; - min-height: 24px; - padding: 1px 7px 4px 7px; - justify-content: center; - align-items: center; - gap: 8px; - background-color: #D54309; - color: #fff; - border-radius: 999px; - border: 1px solid #fff; -} \ No newline at end of file +.govrs-tag-contagem { + display: inline-flex; + min-width: 24px; + min-height: 24px; + align-items: center; + justify-content: center; + padding: 1px 7px 4px 7px; + border: 1px solid #fff; + border-radius: 999px; + background-color: #d54309; + color: #fff; + font-size: 0.875rem; + gap: 8px; +} diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx index 8d71e57..42991d8 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Default.jsx @@ -3,66 +3,72 @@ import PropTypes from 'prop-types'; import './Default.scss'; function CarIcon() { - return( - - - - - ) + return ( + + + + ); } function CloseIcon() { - return( + return ( + xmlns="http://www.w3.org/2000/svg" + width="28" + height="28" + viewBox="0 0 28 28" + fill="none" + > + fill="currentColor" + d="M16.0625 14L19.1875 17.1562C19.5938 17.5312 19.5938 18.1562 19.1875 18.5312L18.5 19.2188C18.125 19.625 17.5 19.625 17.125 19.2188L14 16.0938L10.8438 19.2188C10.4688 19.625 9.84375 19.625 9.46875 19.2188L8.78125 18.5312C8.375 18.1562 8.375 17.5312 8.78125 17.1562L11.9062 14L8.78125 10.875C8.375 10.5 8.375 9.875 8.78125 9.5L9.46875 8.8125C9.84375 8.40625 10.4688 8.40625 10.8438 8.8125L14 11.9375L17.125 8.8125C17.5 8.40625 18.125 8.40625 18.5 8.8125L19.1875 9.5C19.5938 9.875 19.5938 10.5 19.1875 10.875L16.0625 14Z" + /> - - ) + ); } -const Default = ({ disabled = false, showClose = true, content = 'Tag Default', showIcon = true }) => { - const [visible, setVisible] = useState(true); +const Default = ({ + disabled = false, + showClose = true, + content = 'Tag Default', + showIcon = true, +}) => { + const [visible, setVisible] = useState(true); - const handleClose = () => { - if (disabled) return; - setVisible(false); - }; + const handleClose = () => { + if (disabled) return; + setVisible(false); + }; - if (!visible) return null; + if (!visible) return null; - return ( - <> - - {showIcon && ( - - )} - {content} + return ( + <> + + {showIcon && } + {content} - {showClose && ( - - )} - - - ); -} + {showClose && ( + + )} + + + ); +}; Default.propTypes = { disabled: PropTypes.bool, @@ -78,4 +84,4 @@ Default.defaultProps = { showIcon: true, }; -export default Default; \ No newline at end of file +export default Default; diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss index 1def4a8..a54c1c3 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Default.scss @@ -1,79 +1,86 @@ -.govrs-tag{ - display: inline-flex; - padding: 4px 8px; - justify-content: center; - align-items: center; - gap: 8px; - background-color: #1A7235; - color: #fff; - border-radius: 4px; - border: none; - - - &:not(.disable):hover{ - background: linear-gradient(0deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.30) 100%), #1A7235; - } - &:not(.disable):active{ - background: linear-gradient(0deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 100%), #1A7235; - } +.govrs-tag { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 4px 8px; + border: none; + border-radius: 4px; + background-color: #1a7235; + color: #fff; + gap: 8px; - + &:not(.disable):hover { + background: linear-gradient( + 0deg, + rgba(255, 255, 255, 0.3) 0%, + rgba(255, 255, 255, 0.3) 100% + ), + #1a7235; + } + &:not(.disable):active { + background: linear-gradient( + 0deg, + rgba(255, 255, 255, 0.65) 0%, + rgba(255, 255, 255, 0.65) 100% + ), + #1a7235; + } - > button{ - background-color: transparent; - border: none; - color: #fff; - padding: 0; + > button { + padding: 0; + border: none; + background-color: transparent; + color: #fff; - &:hover{ - cursor: pointer; - } - } - - &-group{ - display: flex; - gap: 12px; - align-items: center; + &:hover { + cursor: pointer; } + } + + &-group { + display: flex; + align-items: center; + gap: 12px; + } } -.disable{ - opacity: 0.45; - - cursor: not-allowed; - > button{ - pointer-events: none; +.disable { + cursor: not-allowed; + opacity: 0.45; + > button { + pointer-events: none; - &:hover, &:active{ - cursor: not-allowed; - background-color: #1A7235; - } - } + &:hover, + &:active { + background-color: #1a7235; + cursor: not-allowed; } + } +} /* Layout para grupos de tags (ex.: Persistente.Group) */ -.govrs-tag-group{ - display: flex; - gap: 12px; - align-items: center; +.govrs-tag-group { + display: flex; + align-items: center; + gap: 12px; } /* Foco visível para acessibilidade */ -.govrs-tag:focus-visible{ - outline: none; - border-color: rgba(10,97,41,0.9); - box-shadow: 0 0 0 6px rgba(10,97,41,0.12); +.govrs-tag:focus-visible { + border-color: rgba(10, 97, 41, 0.9); + box-shadow: 0 0 0 6px rgba(10, 97, 41, 0.12); + outline: none; } -.checked{ - background-color: #279B4A; +.checked { + background-color: #279b4a; } // Estilo para exibir utilização dos blocos de código nos stories -.showCode{ - background: #f7f7f7; - padding: 12px; - border-radius: 4px; - overflow-x: auto; - margin-top: 8px; -} \ No newline at end of file +.showCode { + padding: 12px; + border-radius: 4px; + margin-top: 8px; + background: #f7f7f7; + overflow-x: auto; +} diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx index 062d8a0..b00f3f7 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.jsx @@ -2,53 +2,58 @@ import PropTypes from 'prop-types'; import './Icone.scss'; function SearchIcon() { - return ( - - - ) + return ( + + + + ); } function CarIcon() { - return( - - - - - ) + return ( + + + + ); } -const Icone = ({ - ico = "search"}) => { - - const renderIcon = () => { - switch (ico) { - case "search": - return ; - case "car": - return ; - default: - return null; - } +const Icone = ({ ico = 'search' }) => { + const renderIcon = () => { + switch (ico) { + case 'search': + return ; + case 'car': + return ; + default: + return null; } + }; - return ( - <> - - - {renderIcon()} - - - - ); -} + return ( + <> + {renderIcon()} + + ); +}; Icone.propTypes = { - ico: PropTypes.oneOf(['search','car']), + ico: PropTypes.oneOf(['search', 'car']), message: PropTypes.string, children: PropTypes.node, outline: PropTypes.bool, @@ -60,4 +65,4 @@ Icone.defaultProps = { outline: false, }; -export default Icone; \ No newline at end of file +export default Icone; diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss index 73750c4..23fe11f 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Icone.scss @@ -1,15 +1,15 @@ @import '../../../theme/variables.scss'; -.govrs-tag-icon{ +.govrs-tag-icon { display: inline-flex; - gap: 12px; - align-items: center; - justify-content: center; max-width: 40px; min-height: 40px; + align-items: center; + justify-content: center; + padding: 12px; + border: 1px solid #fff; border-radius: 50%; background-color: Magenta; color: #fff; - padding: 12px; - border: 1px solid #fff; -} \ No newline at end of file + gap: 12px; +} diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx index 6bc7feb..0728a2c 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.jsx @@ -1,67 +1,87 @@ -import React, {useState} from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; import './Persistente.scss'; function CarIcon() { - return( - - - - - ) + return ( + + + + ); } -function CheckIcon(){ - return( - - + - - - ) + /> + + ); } +const Persistente = ({ + disabled = false, + content = 'Tag Persistente', + checkIcon = true, + showIcon = true, + checked: checkedProp, + defaultChecked = false, + onChange, +}) => { + const [internalChecked, setInternalChecked] = useState(defaultChecked); + const isControlled = checkedProp !== undefined; + const checked = isControlled ? checkedProp : internalChecked; + + const handleCheck = () => { + const newChecked = !checked; + if (!isControlled) setInternalChecked(newChecked); + if (typeof onChange === 'function') onChange(newChecked); + }; -const Persistente = ({ disabled = false, content = 'Tag Persistente', checkIcon = true, showIcon = true, checked: checkedProp, defaultChecked = false, onChange }) => { - - const [internalChecked, setInternalChecked] = useState(defaultChecked); - const isControlled = checkedProp !== undefined; - const checked = isControlled ? checkedProp : internalChecked; - - const handleCheck = () => { - const newChecked = !checked; - if (!isControlled) setInternalChecked(newChecked); - if (typeof onChange === 'function') onChange(newChecked); - } - - return ( - <> - - - - ); -} + return ( + <> + + + ); +}; Persistente.propTypes = { disabled: PropTypes.bool, @@ -83,16 +103,29 @@ Persistente.defaultProps = { }; // Group variant: quando radio=true, gerencia seleção única (radio-like). Se radio=false, renderiza filhos sem gerenciar. -function Group({ children, radio = false, defaultSelected = null, selected: selectedProp, onChange, allowUnselect = true, ariaLabel }) { +function Group({ + children, + radio = false, + defaultSelected = null, + selected: selectedProp, + onChange, + allowUnselect = true, + ariaLabel, +}) { + const [selected, setSelected] = useState(defaultSelected); if (!radio) { return ( -
+
{children}
); } - const [selected, setSelected] = useState(defaultSelected); + // const [selected, setSelected] = useState(defaultSelected); const isControlled = selectedProp !== undefined; const current = isControlled ? selectedProp : selected; @@ -109,8 +142,12 @@ function Group({ children, radio = false, defaultSelected = null, selected: sele }; return ( -
- {React.Children.map(children, child => { +
+ {React.Children.map(children, (child) => { // se o child não tiver id, não alteramos const id = child.props && child.props.id; if (!id) return child; @@ -120,7 +157,7 @@ function Group({ children, radio = false, defaultSelected = null, selected: sele onChange: (newChecked) => handleChildChange(id, newChecked), role: 'radio', 'aria-checked': id === current, - className:"govrs-tag-group-active" + className: 'govrs-tag-group-active', }); })}
diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss index 360302d..4d5b7c9 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Persistente.scss @@ -1,21 +1,20 @@ /* Styles específicos para a variante Persistente */ /* Layout para grupos de tags (ex.: Persistente.Group) */ -.govrs-tag-group{ +.govrs-tag-group { display: flex; - gap: 12px; align-items: center; + gap: 12px; } /* Estado visual quando a tag está marcada */ -.govrs-tag.checked{ - background-color: #279B4A; - +.govrs-tag.checked { + background-color: #279b4a; } /* Foco visível para acessibilidade (aplicável a tags persistentes) */ -.govrs-tag:focus-visible{ +.govrs-tag:focus-visible { + border-color: rgba(10, 97, 41, 0.9); + box-shadow: 0 0 0 6px rgba(10, 97, 41, 0.12); outline: none; - border-color: rgba(10,97,41,0.9); - box-shadow: 0 0 0 6px rgba(10,97,41,0.12); -} \ No newline at end of file +} diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx b/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx index 3504672..4a6d25a 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Status.jsx @@ -1,27 +1,23 @@ import PropTypes from 'prop-types'; import './Status.scss'; -const Status = ({ - status = 'online', - Label, -}) => { - const classes = ['govrs-tag-status', `govrs-tag-status--${status}`]; +const Status = ({ status = 'online', Label }) => { + const classes = ['govrs-tag-status', `govrs-tag-status--${status}`]; return ( <> -
- - - {Label} -
+
+ + {Label} +
); -} +}; Status.propTypes = { - status: PropTypes.oneOf(['Online', 'Offline', 'Ausente']), + status: PropTypes.oneOf(['Online', 'Offline', 'Ausente']), }; Status.defaultProps = { - status: 'online', + status: 'online', }; -export default Status; \ No newline at end of file +export default Status; diff --git a/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss b/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss index 55744ce..8cb2efc 100644 --- a/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss +++ b/packages/volto-govrs-ds/src/components/Tag/variants/Status.scss @@ -1,28 +1,27 @@ @import '../../../theme/variables.scss'; -.govrs-tag-status{ - display: inline-flex; - justify-content: center; - align-items: center; - gap: 8px; - width: 24px; - height: 24px; - border-radius: 50%; - font-family: $font-family-base; - border: 1px solid var(--gray-2); +.govrs-tag-status { + display: inline-flex; + width: 24px; + height: 24px; + align-items: center; + justify-content: center; + border: 1px solid var(--gray-2); + border-radius: 50%; + font-family: $font-family-base; + gap: 8px; } .govrs-tag-status--Online { - background-color: var(--green-cool-vivid-50); - color: #fcfcfc; + background-color: var(--green-cool-vivid-50); + color: #fcfcfc; } .govrs-tag-status--Offline { - background-color: var(--red-vivid-50); - color: #fcfcfc; + background-color: var(--red-vivid-50); + color: #fcfcfc; } .govrs-tag-status--Ausente { - background-color: var(--gold-vivid-20); - color: #fcfcfc; + background-color: var(--gold-vivid-20); + color: #fcfcfc; } - From fe7629eb5bd0643641a9da2139879cf1c7e3a999 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 7 Jan 2026 13:26:42 -0300 Subject: [PATCH 3/6] AB#1306786 - Ajustes de lint --- .../src/components/Tag/Tag.stories.jsx | 327 ++++++++++-------- .../src/components/Tag/index.jsx | 10 +- 2 files changed, 192 insertions(+), 145 deletions(-) diff --git a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx index 80b2e79..157b37e 100644 --- a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx @@ -6,164 +6,211 @@ import Icone from './variants/Icone'; import Contagem from './variants/Contagem'; export default { - title: 'Components/Tag', - component: Tag, + title: 'Components/Tag', + component: Tag, }; export const TagDocs = () => ( - <> + <>
-

Tag - Documentação

+

Tag - Documentação

Tag de Interação

-

Possuem uma ação ao serem clicadas/tocadas. De acordo com o tipo de interação podemos ter tags interativas dispensáveis e persistentes.
- Tags aceitam as props content, disabled e showIcon

+

+ Possuem uma ação ao serem clicadas/tocadas. De acordo com o tipo de + interação podemos ter tags interativas dispensáveis e persistentes. +
+ Tags aceitam as props content, disabled e{' '} + showIcon +

Dispensáveis

- - - - + + + + 
-           {``} 

-           {``}
-
-
- -

Ao utilizar a prop showIcon, a tag não exibe o ícone.

+ style={{ + background: '#f7f7f7', + padding: 12, + borderRadius: 4, + overflowX: 'auto', + marginTop: 8, + }} + > + {``}
+ {``} + + +

+ Ao utilizar a prop showIcon, a tag não exibe o ícone. +

- - + +
- 
-           {``} 

-           {``}
-
-
+ 
+      {``} 

+      {``}
+
-

Texto

-

A tag pode possuir icone e texto ou somente texto. Optando pela segunda opção utilizasse a prop showClose.

+

Texto

+

+ A tag pode possuir icone e texto ou somente texto. Optando pela segunda + opção utilizasse a prop showClose. +

-
- - - - +
+ + + +
- 
-           {``} 

-           {``}

-            {``}

-            {` `}
-
-
+ 
+      {``} 

+      {``}
+      

+      {``}
+      

+      {` `}
+
+ +

Persistentes

+

+ Tags persistentes não podem ser dispensadas, apenas indicam um estado ou + categoria. +

+

+ As props content, disabled e{' '} + showIcon são aceitas. +

+ +

+ {' '} + ATENÇÃO: nas tags persistentes que serão selecionadas por padrão, + utilize a prop defaultChecked juntamente com a prop{' '} + disabled. +

+
+ + + +
-

Persistentes

-

Tags persistentes não podem ser dispensadas, apenas indicam um estado ou categoria.

-

As props content, disabled e showIcon são aceitas.

+ 
+      {``} 

+      {``}
+      

+      {`
+
+ +

Persistente — Grupo (radio)

+

+ Variação para seleção única entre várias tags. Cada tag precisa ter um{' '} + id único. +

+

+ Para selecionar uma tag por padrão, utilize a prop{' '} + defaultSelected com o valor do id da tag + desejada. +

-

ATENÇÃO: nas tags persistentes que serão selecionadas por padrão, utilize a prop defaultChecked juntamente com a prop disabled.

-
- - - +
+ + + + +
- - 
-           {``} 

-           {``}

-            {`
-
-
- -

Persistente — Grupo (radio)

-

Variação para seleção única entre várias tags. Cada tag precisa ter um id único.

-

Para selecionar uma tag por padrão, utilize a prop defaultSelected com o valor do id da tag desejada.

- -
- - - - - -
- 
-           {``} 

-           {`  `}

-           {`  `}

-           {`  `}

-           {``}
-
- -

Status

-

Tags de status são utilizadas para indicar estados ou categorias específicas. Elas não possuem interação de clique.

-
- - - -
- 
-           {``} 

-           {``}

-           {``}
-
- -

Podem ser usadas com Label ou apenas com a superfície circular.
Para realizar a escolha utilizar a propLabel vazia ou com o mesmo conteúdo da prop status.

-
- - - -
- 
-           {``} 

-           {``}

-           {``}
-
- -

Icone

-

Tags de icone possuem a mesma ideia das tags texto, porém utilizando apenas icone

-

As props ico pode ser utilizada para especificar qual icone será exibido.

-
- - -
- 
-           {``} 

-           {``}
-
- -

Contagem

-

Tags de contagem são utilizadas para exibir um número ou valor associado a uma tag.

-

Se o valor for maior que 999, será exibido como "999+". Os valores são atribuidos através da prop label.

-
- - - - - -
- 
-           {``} 

-           {``} 

-           {``} 

-           {``}
-           {``}
-
- - - - -); - \ No newline at end of file + 
+      {``} 

+      {`  `}
+      

+      {`  `}
+      

+      {`  `}
+      

+      {``}
+
+ +

Status

+

+ Tags de status são utilizadas para indicar estados ou categorias + específicas. Elas não possuem interação de clique. +

+
+ + + +
+ 
+      {``} 

+      {``}
+      

+      {``}
+
+ +

+ Podem ser usadas com Label ou apenas com a superfície circular.
{' '} + Para realizar a escolha utilizar a propLabel vazia ou com o + mesmo conteúdo da prop status. +

+
+ + + +
+ 
+      {``} 

+      {``}
+      

+      {``}
+
+ +

Icone

+

+ Tags de icone possuem a mesma ideia das tags texto, porém utilizando + apenas icone +

+

+ As props ico pode ser utilizada para especificar qual icone + será exibido. +

+
+ + +
+ 
+      {``} 

+      {``}
+
+ +

Contagem

+

+ Tags de contagem são utilizadas para exibir um número ou valor associado a + uma tag. +

+

+ Se o valor for maior que 999, será exibido como "999+". Os valores são + atribuidos através da prop label. +

+
+ + + + + +
+ 
+      {``} 

+      {``} 

+      {``} 

+      {``}
+      {``}
+
+ +); diff --git a/packages/volto-govrs-ds/src/components/Tag/index.jsx b/packages/volto-govrs-ds/src/components/Tag/index.jsx index ed95ea9..125cf3d 100644 --- a/packages/volto-govrs-ds/src/components/Tag/index.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/index.jsx @@ -16,8 +16,8 @@ export default function Tag({ ...rest }) { const v = variant || 'default'; - const Variant = VARIANTS[v] || DefaultVariant; - return ( - - ); -} \ No newline at end of file + const Variant = VARIANTS[v] || Default; + return ( + + ); +} From 217b817faea30f301592d7afd9fb7d5e4244bad6 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Wed, 7 Jan 2026 14:31:23 -0300 Subject: [PATCH 4/6] =?UTF-8?q?AB#1306786=20-=20Adicionado=20descri=C3=A7?= =?UTF-8?q?=C3=A3o=20a=20=2023.feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/volto-govrs-ds/news/23.feature | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 packages/volto-govrs-ds/news/23.feature diff --git a/packages/volto-govrs-ds/news/23.feature b/packages/volto-govrs-ds/news/23.feature new file mode 100644 index 0000000..0d15831 --- /dev/null +++ b/packages/volto-govrs-ds/news/23.feature @@ -0,0 +1,2 @@ +Implementação do componente Tag dispensáveis ( Default) e Variantes: +Tag Texto, Tag Persistente, Tag Status, Tag Icone e Tag de Contagem(@Gabriel-SAbreu) \ No newline at end of file From da0751c6a4533de5fdfecb3b781636fdf5a1f14f Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 8 Jan 2026 16:32:28 -0300 Subject: [PATCH 5/6] =?UTF-8?q?AB#1306786-=20REFACTOR:=20Alterado=20requir?= =?UTF-8?q?e=20por=20import=20no=20arquivo=20index.jsx=20e=20adequa=C3=A7?= =?UTF-8?q?=C3=A3o=20das=20variants=20no=20Tag.stories.jsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Tag/Tag.stories.jsx | 119 +++++++++--------- .../src/components/Tag/index.jsx | 13 +- 2 files changed, 72 insertions(+), 60 deletions(-) diff --git a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx index 157b37e..4ec76aa 100644 --- a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx @@ -14,6 +14,11 @@ export const TagDocs = () => ( <>

Tag - Documentação

+

+ O componente Tag permite escolher a variante através da prop{' '} + variant. Isso facilita a utilização quando se deseja alternar + entre diferentes tipos de tags dinamicamente. +

Tag de Interação

@@ -25,10 +30,10 @@ export const TagDocs = () => (

Dispensáveis

- - - - + + + + 
 (
         marginTop: 8,
       }}
     >
-      {``} 

-      {``}
+      {``} 

+      {``}

@@ -48,35 +53,35 @@ export const TagDocs = () => (

- - + + 
-      {``} 

-      {``}
+      {``} 

+      {``}

Texto

- A tag pode possuir icone e texto ou somente texto. Optando pela segunda - opção utilizasse a prop showClose. + A tag pode não possuir nenhum tipo de interação, serrvindo apenas para exibição de um texto, nesse caso, pode possuir icone e texto ou somente texto. Optando pela segunda + opção utilizasse a prop showClose como false.

- - - - + + + + 
-      {``} 

-      {``}
+      {``} 

+      {``}
       

-      {``}
+      {``}
       

-      {` `}
+      {` `}

Persistentes

@@ -96,16 +101,16 @@ export const TagDocs = () => ( disabled.

- - - + + + 
-      {``} 

-      {``}
+      {``} 

+      {``}
       

-      {`
+      {`

Persistente — Grupo (radio)

@@ -120,21 +125,22 @@ export const TagDocs = () => (

- + + - + 
-      {``} 

+      {``} 

       {`  `}
       

       {`  `}
       

       {`  `}
       

-      {``}
+      {``}

Status

@@ -143,15 +149,15 @@ export const TagDocs = () => ( específicas. Elas não possuem interação de clique.

- - - + + + 
-      {``} 

-      {``}
+      {``} 

+      {``}
       

-      {``}
+      {``}

@@ -160,15 +166,15 @@ export const TagDocs = () => ( mesmo conteúdo da prop status.

- - - + + + 
-      {``} 

-      {``}
+      {``} 

+      {``}
       

-      {``}
+      {``}

Icone

@@ -181,12 +187,12 @@ export const TagDocs = () => ( será exibido.

- - + + 
-      {``} 

-      {``}
+      {``} 

+      {``}

Contagem

@@ -199,18 +205,19 @@ export const TagDocs = () => ( atribuidos através da prop label.

- - - - - + + + + + 
-      {``} 

-      {``} 

-      {``} 

-      {``}
-      {``}
+      {``} 

+      {``} 

+      {``} 

+      {``}
+      {``}
+ ); diff --git a/packages/volto-govrs-ds/src/components/Tag/index.jsx b/packages/volto-govrs-ds/src/components/Tag/index.jsx index 125cf3d..bbdb0f5 100644 --- a/packages/volto-govrs-ds/src/components/Tag/index.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/index.jsx @@ -1,11 +1,16 @@ import Default from './variants/Default.jsx'; +import Persistente from './variants/Persistente'; +import Status from './variants/Status'; +import Icone from './variants/Icone'; +import Contagem from './variants/Contagem'; const VARIANTS = { default: Default, - persistente: require('./variants/Persistente').default, - status: require('./variants/Status').default, - icon: require('./variants/Icone').default, - contagem: require('./variants/Contagem').default, + persistente: Persistente, + persistenteGroup: Persistente.Group, + status: Status, + icone: Icone, + contagem: Contagem, }; export default function Tag({ From 79cb99b0fdf501d901deb41c09cab81e90ae6aa0 Mon Sep 17 00:00:00 2001 From: Gabriel-SAbreu Date: Thu, 8 Jan 2026 16:58:37 -0300 Subject: [PATCH 6/6] AB#1306786 - CHORE:Ajustes lint --- .../src/components/Tag/Tag.stories.jsx | 57 ++++++++++++------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx index 4ec76aa..4d276ea 100644 --- a/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx +++ b/packages/volto-govrs-ds/src/components/Tag/Tag.stories.jsx @@ -1,10 +1,5 @@ import Tag from './index'; -import Default from './variants/Default'; import Persistente from './variants/Persistente'; -import Status from './variants/Status'; -import Icone from './variants/Icone'; -import Contagem from './variants/Contagem'; - export default { title: 'Components/Tag', component: Tag, @@ -15,10 +10,10 @@ export const TagDocs = () => (

Tag - Documentação

- O componente Tag permite escolher a variante através da prop{' '} - variant. Isso facilita a utilização quando se deseja alternar - entre diferentes tipos de tags dinamicamente. -

+ O componente Tag permite escolher a variante através da + prop variant. Isso facilita a utilização quando se deseja + alternar entre diferentes tipos de tags dinamicamente. +

Tag de Interação

@@ -58,25 +53,40 @@ export const TagDocs = () => ( 

-      {``} 

+      {``}{' '}
+      

       {``}

Texto

- A tag pode não possuir nenhum tipo de interação, serrvindo apenas para exibição de um texto, nesse caso, pode possuir icone e texto ou somente texto. Optando pela segunda - opção utilizasse a prop showClose como false. + A tag pode não possuir nenhum tipo de interação, serrvindo apenas para + exibição de um texto, nesse caso, pode possuir icone e texto ou somente + texto. Optando pela segunda opção utilizasse a prop showClose{' '} + como false.

- + - + 
-      {``} 

+      {``}{' '}
+      

       {``}
       

       {``}
@@ -103,7 +113,12 @@ export const TagDocs = () => (
     

       
       
-      
+      
     

 
     
@@ -125,15 +140,15 @@ export const TagDocs = () => (
     

 
     

-
       
         
         
         
-      
+      
     

     
-      {``} 

+      {``}{' '}
+      

       {`  `}
       

       {`  `}
@@ -154,7 +169,8 @@ export const TagDocs = () => (
       
     
-      {``} 

+      {``}{' '}
+      

       {``}
       

       {``}
@@ -218,6 +234,5 @@ export const TagDocs = () => (
       {``}
       {``}
- );