@raiadrogasil/pulso-react-components - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

Accordion/index.d.ts

@@ -1,22 +0,55 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 export interface AccordionProps {
-    inverse?: boolean;
-    options: Array<Option>;
-    onClick(option: Option): void;
+    /**
+     * Atribui uma função ao clique no título do componente.
+     */
+    onClick: React.MouseEventHandler<HTMLHeadingElement> & ((e: MouseEvent) => void);
+    /**
+     * Atribui uma função ao clique no título do componente.
+     */
+    onKeyDown: React.KeyboardEventHandler<HTMLHeadingElement> & ((e: KeyboardEvent) => void);
+    /**
+     * Aceite qualquer tipo de conteúdo, composto por componentes e/ou código HTML.
+     */
     children: ReactNode;
-    typeElementTitle: string;
+    /**
+     * Determina o tipe de tag que será carregada no título do componente.
+     */
+    titleTag: "h1" | "h2" | "h3" | "h4" | "h5";
+    /**
+     * Título do componente.
+     */
+    title: string;
+    /**
+     * Controla se o conteúdo fica visível ou não.
+     */
+    open?: boolean;
+    /**
+     * Essa Prop inclui um atributo data-qa com o valor configurado no botão.
+     */
+    dataQA?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect com o valor configurado no botão.
+     */
+    dataCollect?: string | null;
+    /**
+     * Essa Prop inclui um atributo data-collect-info com o valor configurado no botão.
+     */
+    dataCollectInfo?: string | null;
 }
-interface Option {
-    label: string;
-}
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/accordion.css";
- *
  * import Accordion from "@raiadrogasil/pulso-react-components/Accordion";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
  * ```
+ *
+ * ou
+ *
+ * ```
+ * import {ThemeProvider, Accordion} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-declare function Accordion({ inverse, options, onClick, children, typeElementTitle, }: AccordionProps): JSX.Element;
+declare function Accordion({ onClick, onKeyDown, children, titleTag, title, open, dataQA, dataCollect, dataCollectInfo, }: AccordionProps): JSX.Element;
 export default Accordion;

Accordion/index.js

 "use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
+var Accordion_styles_1 = require("./Accordion.styles");
+var Icon_1 = __importDefault(require("@raiadrogasil/pulso-react-components/Icon"));
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/accordion.css";
- *
  * import Accordion from "@raiadrogasil/pulso-react-components/Accordion";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
  * ```
+ *
+ * ou
+ *
+ * ```
+ * import {ThemeProvider, Accordion} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
 function Accordion(_a) {
-    var inverse = _a.inverse, options = _a.options, onClick = _a.onClick, children = _a.children, typeElementTitle = _a.typeElementTitle;
-    var _b = react_1.useState(), isOpen = _b[0], setIsOpen = _b[1];
-    var mainClass = "pulso-accordion";
-    var currentindex = isOpen;
-    function handleClick(index, option) {
-        if (currentindex === index) {
-            return setIsOpen(-1);
-        }
-        setIsOpen(index);
-        return onClick(option);
-    }
-    var chooseElement = function (label, typeElement) {
-        switch (typeElement) {
-            case "h1":
-                return (react_1.default.createElement("h1", { className: mainClass + "__list-item-header-paragraph" }, label));
-            case "h2":
-                return (react_1.default.createElement("h2", { className: mainClass + "__list-item-header-paragraph" }, label));
-            case "h3":
-                return (react_1.default.createElement("h3", { className: mainClass + "__list-item-header-paragraph" }, label));
-            case "h4":
-                return (react_1.default.createElement("h4", { className: mainClass + "__list-item-header-paragraph" }, label));
-            case "h5":
-                return (react_1.default.createElement("h5", { className: mainClass + "__list-item-header-paragraph" }, label));
-            default:
-                return (react_1.default.createElement("h1", { className: mainClass + "__list-item-header-paragraph" }, label));
-        }
-    };
-    function renderOptionsItems() {
-        return options.map(function (item, index) { return (react_1.default.createElement("li", { tabIndex: 0, key: index, className: mainClass + "__list-item " + (currentindex === index ? mainClass + "__list-item-isOpen" : null), onClick: function () { return handleClick(index, item); }, onKeyPress: function () { return handleClick(index, item); } },
-            react_1.default.createElement("div", { className: mainClass + "__list-item-header" },
-                chooseElement(item.label, typeElementTitle),
-                react_1.default.createElement("div", { className: mainClass + "__list-item-header-icon" },
-                    react_1.default.createElement("span", { className: "pulso-icon pulso-icon--medium rd-chevron-down" }))),
-            react_1.default.createElement("div", { className: mainClass + "__list-item-content" }, children))); });
-    }
-    return (react_1.default.createElement("div", { className: mainClass + " " + (inverse ? mainClass + "--inverse" : "") },
-        react_1.default.createElement("ul", { className: mainClass + "__list" }, renderOptionsItems())));
+    var onClick = _a.onClick, onKeyDown = _a.onKeyDown, children = _a.children, titleTag = _a.titleTag, title = _a.title, open = _a.open, dataQA = _a.dataQA, dataCollect = _a.dataCollect, dataCollectInfo = _a.dataCollectInfo;
+    return (react_1.default.createElement(Accordion_styles_1.Container, { open: open },
+        react_1.default.createElement(Accordion_styles_1.Title, { as: titleTag, open: open, tabIndex: 0, onClick: onClick, onKeyDown: onKeyDown, "data-qa": dataQA ? dataQA : null, "data-collect": dataCollect ? dataCollect : null, "data-collect-info": dataCollectInfo ? dataCollectInfo : null },
+            react_1.default.createElement(Accordion_styles_1.TitleText, null, title),
+            react_1.default.createElement(Accordion_styles_1.TitleIcon, { open: open },
+                react_1.default.createElement(Icon_1.default, { symbol: "rd-chevron-down", size: "large", colorName: open ? "colorNeutralWhite" : "colorBrandPure" }))),
+        react_1.default.createElement(Accordion_styles_1.Content, { open: open }, children)));
 }
 exports.default = Accordion;

Dropdown/index.d.ts

 import React from "react";
-export interface DropdownProps {
-    type: string;
+import { Option } from "@raiadrogasil/pulso-react-components/List";
+export declare type DropdownProps = {
+    /**
+     * Estado desabilitado do componente (impedindo a interação do usuário).
+     */
+    disabled?: boolean;
+    /**
+     * Habilita o estilo inverse do componente.
+     */
+    inverse?: boolean;
+    /**
+     * Texto do componente, para quando não há um valor selecionado.
+     */
     placeholder?: string;
+    /**
+     * Define um array de opções da lista, com a opção no seguinte formato:
+     *
+     * {
+     *   label: string;
+     *   selected?: boolean;
+     *   value: number;
+     *   dataCollect?: string | null;
+     *   dataCollectInfo?: string | null;
+     *   dataQA?: string | null;
+     * }
+     */
     options: Array<Option>;
+    /**
+     * Adiciona uma função de callback ao clique do da opção selecionada, com a opção selecionada como primeiro parâmetro.
+     */
     onClick(option: Option): void;
-}
-interface Option {
-    value: number;
-    label: string;
-}
+    /**
+     * Tipo do componente.
+     */
+    type: "standard";
+    /**
+     * Largura da lista em pixels, somente disponível no tipo icon. Caso não definido, no tipo icon, assumirá a largura do conteúdo (o conteúdo, nesse caso, nao terá quebra de linha).
+     */
+    width?: undefined;
+} | {
+    disabled?: boolean;
+    inverse?: boolean;
+    placeholder?: string;
+    options: Array<Option>;
+    onClick(option: Option): void;
+    type: "icon";
+    width?: number;
+};
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/icon.css";
+ * import Dropdown from "@raiadrogasil/pulso-react-components/Dropdown";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/list.css";
+ * ou
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/dropdown.css";
- *
- * import Dropdown from "@raiadrogasil/pulso-react-components/Dropdown";
  * ```
+ * import {ThemeProvider, Dropdown} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

Dropdown/index.js

@@ -16,19 +16,25 @@ "use strict";
 var Icon_1 = __importDefault(require("@raiadrogasil/pulso-react-components/Icon"));
+var Dropdown_styles_1 = __importDefault(require("./Dropdown.styles"));
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/icon.css";
+ * import Dropdown from "@raiadrogasil/pulso-react-components/Dropdown";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/list.css";
+ * ou
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/dropdown.css";
- *
- * import Dropdown from "@raiadrogasil/pulso-react-components/Dropdown";
  * ```
+ * import {ThemeProvider, Dropdown} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
 var Dropdown = function (_a) {
-    var options = _a.options, type = _a.type, placeholder = _a.placeholder, onClick = _a.onClick;
-    var _b = react_1.useState(false), open = _b[0], setOpen = _b[1];
-    var _c = react_1.useState({ label: placeholder }), optionSelected = _c[0], setOptionSelected = _c[1];
+    var disabled = _a.disabled, inverse = _a.inverse, options = _a.options, placeholder = _a.placeholder, onClick = _a.onClick, type = _a.type, width = _a.width;
+    var _b;
+    var _c = react_1.useState(false), open = _c[0], setOpen = _c[1];
+    var _d = react_1.useState({
+        label: options.find(function (option) { return option.selected !== undefined; })
+            ? (_b = options.find(function (option) { return option.selected !== undefined; })) === null || _b === void 0 ? void 0 : _b.label : placeholder,
+    }), optionSelected = _d[0], setOptionSelected = _d[1];
     var optionsRef = [];
@@ -64,4 +70,2 @@ var optionFocused = 0;
     function onOptionFocus(event, index) {
-        console.log(index);
-        console.log(event);
         optionFocused = index;
@@ -73,11 +77,15 @@ }
     var mainElement = "pulso-dropdown";
-    return (react_1.default.createElement("div", { className: mainElement },
-        react_1.default.createElement("div", { className: mainElement + "__select" + (open ? " " + mainElement + "__select--open" : ""), onClick: function () { return toggleOpen(); }, onKeyDown: function (event) { return togglePressKey(event); } },
-            react_1.default.createElement("span", null, optionSelected.label),
+    var mainClass = mainElement +
+        (" " + mainElement + "--" + type) +
+        (inverse ? " " + mainElement + "--inverse" : "") +
+        (disabled ? " " + mainElement + "--disabled" : "");
+    return (react_1.default.createElement(Dropdown_styles_1.default, { className: mainClass },
+        react_1.default.createElement("div", { className: mainElement + "__select" + (open ? " " + mainElement + "__select--open" : ""), onClick: disabled ? undefined : function () { return toggleOpen(); }, onKeyDown: disabled ? undefined : function (event) { return togglePressKey(event); }, tabIndex: disabled ? undefined : 0 },
+            type === "standard" ? react_1.default.createElement("span", null, optionSelected.label) : "",
             react_1.default.createElement("button", { className: "select__button" + (open ? " select__button--open" : ""), onClick: function () { return toggleOpen(); } },
                 react_1.default.createElement(Icon_1.default, { size: "medium", symbol: "rd-chevron-down" }))),
-        open && (react_1.default.createElement("div", { id: "dropdown", tabIndex: 1, className: mainElement + "__list" },
+        open && (react_1.default.createElement("div", { id: "dropdown", tabIndex: 1, className: mainElement + "__list", style: type === "icon" ? { width: width + "px" } : {} },
             react_1.default.createElement("div", { className: "list_container" },
-                react_1.default.createElement(List_1.default, { options: options, handleClick: handleClickSelect, type: type === "inverse" ? "standard" : "inverse", setOptionRef: setOptionRef, onKeyDown: onOptionKeyDown, onFocus: onOptionFocus }))))));
+                react_1.default.createElement(List_1.default, { options: options, handleClick: handleClickSelect, type: "standard", setOptionRef: setOptionRef, onKeyDown: onOptionKeyDown, onFocus: onOptionFocus }))))));
 };
 exports.default = Dropdown;

index.d.ts

@@ -13,2 +13,3 @@ export { default as ThemeProvider } from "./ThemeProvider";
 export { default as Link } from "./Link";
+export { default as Logo } from "./Logo";
 export { default as Paragraph } from "./Paragraph";
@@ -15,0 +16,0 @@ export { default as Radio } from "./Radio";

index.js

@@ -27,2 +27,4 @@ "use strict";
 exports.Link = Link_1.default;
+var Logo_1 = require("./Logo");
+exports.Logo = Logo_1.default;
 var Paragraph_1 = require("./Paragraph");
@@ -29,0 +31,0 @@ exports.Paragraph = Paragraph_1.default;

List/index.d.ts

@@ -20,2 +20,3 @@ import React from "react";
     options: Array<Option>;
+    active?(event: React.MouseEvent<HTMLLIElement>): void;
     /**
@@ -26,2 +27,6 @@ * Define uma função de callback, que será chamada ao clique de cada opção, com a opção escolhida, como parâmetro, assim como ela aparece no array.
     /**
+     * Nome do ícone que deve ser carregado, caso exista. O ícone deve estar contido na biblioteca de ícones do Pulso.
+     */
+    iconName?: string;
+    /**
      * Define referência para cada opção da lista.
@@ -38,4 +43,6 @@ */
     onKeyDown?(event: React.KeyboardEvent<HTMLLIElement>): void;
+    active?(event: React.MouseEvent<HTMLLIElement>): void;
 }
 export interface Option {
+    disabled?: boolean;
     label: string;
@@ -42,0 +49,0 @@ selected?: boolean;

List/index.js

@@ -14,2 +14,3 @@ "use strict";
 var react_1 = __importStar(require("react"));
+var Icon_1 = __importDefault(require("@raiadrogasil/pulso-react-components/Icon"));
 var List_styles_1 = __importDefault(require("./List.styles"));
@@ -37,13 +38,18 @@ var setOption = function (event, option, handleClick) {
 var List = function (_a) {
-    var options = _a.options, _b = _a.type, type = _b === void 0 ? "standard" : _b, handleClick = _a.handleClick, setOptionRef = _a.setOptionRef, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown;
+    var options = _a.options, _b = _a.type, type = _b === void 0 ? "standard" : _b, active = _a.active, handleClick = _a.handleClick, iconName = _a.iconName, setOptionRef = _a.setOptionRef, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown;
     var _c = react_1.useState(options.map(function (option, index) { return Object.assign(option, { index: index }); })), optionsList = _c[0], setOptionsList = _c[1];
     var optionsRef = [];
     var mainElement = "pulso-list";
-    return (react_1.default.createElement(List_styles_1.default, { className: mainElement + " " + mainElement + "--" + type }, optionsList.map(function (option) { return (react_1.default.createElement("li", { className: mainElement + "__item", "data-qa": option.dataQA ? option.dataQA : null, "data-collect": option.dataCollect ? option.dataCollect : null, "data-collect-info": option.dataCollectInfo ? option.dataCollectInfo : null, key: option.value, tabIndex: 0, onKeyDown: function (event) {
-            setOption(event, option, handleClick);
+    return (react_1.default.createElement(List_styles_1.default, { className: mainElement + " " + mainElement + "--" + type }, optionsList.map(function (option) { return (react_1.default.createElement("li", { className: mainElement + "__item" + (option.disabled ? " " + mainElement + "__item--disabled" : ""), "data-qa": option.dataQA ? option.dataQA : null, "data-collect": option.dataCollect ? option.dataCollect : null, "data-collect-info": option.dataCollectInfo ? option.dataCollectInfo : null, key: option.value, tabIndex: 0, onKeyDown: function (event) {
+            !option.disabled ? setOption(event, option, handleClick) : null;
             onKeyDown ? onKeyDown(event) : null;
-        }, onClick: function () { return handleClick(option); }, ref: setOptionRef, onFocus: function (event) {
+        }, onClick: !option.disabled ? function () { return handleClick(option); } : undefined, ref: setOptionRef, onFocus: function (event) {
             onFocus ? onFocus(event, option.index) : null;
-        } }, option.label)); })));
+        } },
+        react_1.default.createElement("span", { className: "item__content" },
+            iconName ? (react_1.default.createElement("span", { className: "item__icon" },
+                react_1.default.createElement(Icon_1.default, { size: "small", symbol: iconName }))) : (""),
+            " ",
+            option.label))); })));
 };
 exports.default = List;

List/List.styles.js

@@ -11,4 +11,4 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var ListStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-list {\n    margin: 0;\n    padding: 0;\n    .pulso-list__item {\n      min-width: 200px;\n      width: 100%;\n      font-weight: ", ";\n      font-size: ", ";\n      font-family: ", ";\n      line-height: ", ";\n      list-style: none;\n      align-items: center;\n      border-bottom-width: ", ";\n      border-bottom-style: solid;\n      border-color: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: flex;\n      height: 40px;\n      padding: 0 ", ";\n      transition: background-color 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n      &:hover {\n        background-color: ", ";\n        border-color: transparent;\n        color: ", ";\n      }\n\n      &:focus {\n        outline-style: none;\n        background-color: ", ";\n        border: ", " solid\n          ", ";\n      }\n\n      &:disabled {\n        color: ", ";\n        border-color: ", ";\n      }\n    }\n    &.pulso-list--inverse .pulso-list__item {\n      min-width: 200px;\n      width: 100%;\n      font-weight: ", ";\n      font-size: ", ";\n      font-family: ", ";\n      line-height: ", ";\n      list-style: none;\n      color: ", ";\n      display: flex;\n      align-items: center;\n      height: 40px;\n      border-bottom-style: solid;\n      border-bottom-width: ", ";\n      border-color: ", ";\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n        border-color: transparent;\n      }\n      &:focus {\n        outline-style: none;\n        background-color: ", ";\n        border: ", " solid\n          ", ";\n      }\n      &:disabled {\n        color: ", ";\n        border-color: ", ";\n      }\n    }\n  }\n"], ["\n  &.pulso-list {\n    margin: 0;\n    padding: 0;\n    .pulso-list__item {\n      min-width: 200px;\n      width: 100%;\n      font-weight: ", ";\n      font-size: ", ";\n      font-family: ", ";\n      line-height: ", ";\n      list-style: none;\n      align-items: center;\n      border-bottom-width: ", ";\n      border-bottom-style: solid;\n      border-color: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: flex;\n      height: 40px;\n      padding: 0 ", ";\n      transition: background-color 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n      &:hover {\n        background-color: ", ";\n        border-color: transparent;\n        color: ", ";\n      }\n\n      &:focus {\n        outline-style: none;\n        background-color: ", ";\n        border: ", " solid\n          ", ";\n      }\n\n      &:disabled {\n        color: ", ";\n        border-color: ", ";\n      }\n    }\n    &.pulso-list--inverse .pulso-list__item {\n      min-width: 200px;\n      width: 100%;\n      font-weight: ", ";\n      font-size: ", ";\n      font-family: ", ";\n      line-height: ", ";\n      list-style: none;\n      color: ", ";\n      display: flex;\n      align-items: center;\n      height: 40px;\n      border-bottom-style: solid;\n      border-bottom-width: ", ";\n      border-color: ", ";\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n        border-color: transparent;\n      }\n      &:focus {\n        outline-style: none;\n        background-color: ", ";\n        border: ", " solid\n          ", ";\n      }\n      &:disabled {\n        color: ", ";\n        border-color: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.theme.fontWeightMedium; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.spacingInlineTiny; }, function (props) { return props.theme.colorNeutralLightest; }, function (props) { return props.theme.colorNeutralDarkest; }, function (props) { return props.theme.colorNeutralDarkest; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.fontWeightMedium; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.lineHeightLarge; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorHighlightDark; }, function (props) { return props.theme.colorHighlightDark; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.colorNeutralLight; });
+var ListStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pulso-list {\n    margin: 0;\n    padding: 0;\n    .pulso-list__item {\n      min-width: 200px;\n      width: 100%;\n      font-weight: ", ";\n      font-size: ", ";\n      font-family: ", ";\n      line-height: ", ";\n      list-style: none;\n      align-items: center;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: flex;\n      height: 40px;\n      padding: 0 ", ";\n      position: relative;\n      transition: background-color 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n\n      .item__content {\n        z-index: 3;\n      }\n      &::before,\n      &::after {\n        box-sizing: border-box;\n        content: \"\";\n        display: block;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 2;\n      }\n      &::before {\n        border-top-width: ", ";\n        border-top-style: solid;\n        border-color: ", ";\n        opacity: ", ";\n      }\n      &::after {\n        background: transparent;\n        opacity: ", ";\n        transition: background-color 0.6s;\n        transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n        z-index: 1;\n      }\n      &:first-child::before {\n        border-top-width: 0;\n      }\n      &:last-child::before {\n        border-bottom-width: ", ";\n        border-bottom-style: solid;\n      }\n\n      &:hover {\n        color: ", ";\n        &::after {\n          background-color: ", ";\n        }\n      }\n\n      &:active {\n        &::after {\n          opacity: ", ";\n        }\n      }\n\n      &:focus {\n        &::before {\n          border-width: ", ";\n          border-color: ", ";\n          border-style: solid;\n          opacity: 1;\n        }\n        outline-style: none;\n      }\n\n      &:focus + .pulso-list__item::before {\n        border-top-width: 0;\n      }\n\n      .item__icon {\n        display: inline-flex;\n        padding-right: ", ";\n      }\n\n      &--disabled,\n      &--disabled:hover {\n        color: ", ";\n        cursor: not-allowed;\n        font-weight: ", ";\n        &::before,\n        &:focus::before {\n          border-top-width: ", ";\n          border-top-style: solid;\n          border-bottom-width: ", ";\n          border-left: none;\n          border-right: none;\n          border-color: ", ";\n          opacity: ", ";\n        }\n        :after {\n          background: transparent;\n        }\n        &:first-child::before,\n        &:focus:first-child::before {\n          border-top-width: 0;\n        }\n        &:last-child::before,\n        &:focus:last-child::before {\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n        }\n      }\n    }\n    &.pulso-list--inverse {\n      .pulso-list__item {\n        color: ", ";\n\n        &::before {\n          border-color: ", ";\n        }\n        &::after {\n          background: transparent;\n        }\n\n        &:hover {\n          &::after {\n            background-color: ", ";\n          }\n        }\n\n        &:focus {\n          &::before {\n            border-color: ", ";\n          }\n        }\n\n        &--disabled,\n        &--disabled:hover {\n          color: ", ";\n          &::before,\n          &:focus::before {\n            border-color: ", ";\n          }\n          :after {\n            background: transparent;\n          }\n        }\n      }\n    }\n  }\n"], ["\n  &.pulso-list {\n    margin: 0;\n    padding: 0;\n    .pulso-list__item {\n      min-width: 200px;\n      width: 100%;\n      font-weight: ", ";\n      font-size: ", ";\n      font-family: ", ";\n      line-height: ", ";\n      list-style: none;\n      align-items: center;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: flex;\n      height: 40px;\n      padding: 0 ", ";\n      position: relative;\n      transition: background-color 0.6s;\n      transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n\n      .item__content {\n        z-index: 3;\n      }\n      &::before,\n      &::after {\n        box-sizing: border-box;\n        content: \"\";\n        display: block;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 2;\n      }\n      &::before {\n        border-top-width: ", ";\n        border-top-style: solid;\n        border-color: ", ";\n        opacity: ", ";\n      }\n      &::after {\n        background: transparent;\n        opacity: ", ";\n        transition: background-color 0.6s;\n        transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);\n        z-index: 1;\n      }\n      &:first-child::before {\n        border-top-width: 0;\n      }\n      &:last-child::before {\n        border-bottom-width: ", ";\n        border-bottom-style: solid;\n      }\n\n      &:hover {\n        color: ", ";\n        &::after {\n          background-color: ", ";\n        }\n      }\n\n      &:active {\n        &::after {\n          opacity: ", ";\n        }\n      }\n\n      &:focus {\n        &::before {\n          border-width: ", ";\n          border-color: ", ";\n          border-style: solid;\n          opacity: 1;\n        }\n        outline-style: none;\n      }\n\n      &:focus + .pulso-list__item::before {\n        border-top-width: 0;\n      }\n\n      .item__icon {\n        display: inline-flex;\n        padding-right: ", ";\n      }\n\n      &--disabled,\n      &--disabled:hover {\n        color: ", ";\n        cursor: not-allowed;\n        font-weight: ", ";\n        &::before,\n        &:focus::before {\n          border-top-width: ", ";\n          border-top-style: solid;\n          border-bottom-width: ", ";\n          border-left: none;\n          border-right: none;\n          border-color: ", ";\n          opacity: ", ";\n        }\n        :after {\n          background: transparent;\n        }\n        &:first-child::before,\n        &:focus:first-child::before {\n          border-top-width: 0;\n        }\n        &:last-child::before,\n        &:focus:last-child::before {\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n        }\n      }\n    }\n    &.pulso-list--inverse {\n      .pulso-list__item {\n        color: ", ";\n\n        &::before {\n          border-color: ", ";\n        }\n        &::after {\n          background: transparent;\n        }\n\n        &:hover {\n          &::after {\n            background-color: ", ";\n          }\n        }\n\n        &:focus {\n          &::before {\n            border-color: ", ";\n          }\n        }\n\n        &--disabled,\n        &--disabled:hover {\n          color: ", ";\n          &::before,\n          &:focus::before {\n            border-color: ", ";\n          }\n          :after {\n            background: transparent;\n          }\n        }\n      }\n    }\n  }\n"])), function (props) { return props.theme.globalFontWeightMedium; }, function (props) { return props.theme.fontSizeMicro; }, function (props) { return props.theme.fontFamilyGlobal; }, function (props) { return props.theme.globalLineHeightLarge; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.spacingInlineTiny; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.opacityLevelWeakest; }, function (props) { return props.theme.opacityLevelWeak; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralDarkest; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.opacityLevelWeakest; }, function (props) { return props.theme.borderWidthThin; }, function (props) { return props.theme.colorBrandPure; }, function (props) { return props.theme.spacingInlineMicro; }, function (props) { return props.theme.colorNeutralLight; }, function (props) { return props.theme.globalFontWeightRegular; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralBlack; }, function (props) { return props.theme.opacityLevelWeakest; }, function (props) { return props.theme.borderWidthHairline; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralWhite; }, function (props) { return props.theme.colorNeutralDark; }, function (props) { return props.theme.colorNeutralWhite; });
 exports.default = ListStyled;
 var templateObject_1;

package.json

@@ -8,3 +8,3 @@ {
   },
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "./index.js",
@@ -16,3 +16,3 @@ "keywords": [
   "dependencies": {
-    "@raiadrogasil/pulso-tokens": "^0.1.0",
+    "@raiadrogasil/pulso-tokens": "^1.0.0",
     "react": "^17.0.1",
@@ -19,0 +19,0 @@ "styled-components": "^5.2.1"

Tag/index.d.ts

@@ -1,20 +0,38 @@
-import React, { ReactNode } from "react";
 export interface TagProps {
-    children: ReactNode;
-    onReset: Function;
-    value: string;
-    icon?: string;
+    /**
+     * Texto descritivo da tag (esquerdo). Número máximo de carácteres: 17 (small), 38 (medium).
+     */
+    description?: string;
+    /**
+     * Tamanho da tag.
+     */
+    size: "small" | "medium";
+    /**
+     * Cor de fundo da tag, pode ser atribuído um token de cor, no formato camelCase (ex.: colorBrandPure, colorNeutralDark,...), um nome de cor que seja reconhecido pelo browser (ex.: red, blue,...), um hexadecimal (ex.: #ff2852, #fff0f3,...)
+     */
+    tagBackgroundColor?: string;
+    /**
+     * Cor de texto da tag, pode ser atribuído um token de cor, no formato camelCase (ex.: colorBrandPure, colorNeutralDark,...), um nome de cor que seja reconhecido pelo browser (ex.: red, blue,...), um hexadecimal (ex.: #ff2852, #fff0f3,...)
+     */
+    tagColor?: string;
+    /**
+     * Texto descritivo da tag (direito). Não aparecerá se não for preenchido, ou se o texto da descrição for muito grande e ocupar o espaço que seria necessário para o valor. Número máximo de carácteres: 4.
+     */
+    value?: string;
 }
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/icon.css";
+ * import Tag from "@raiadrogasil/pulso-react-components/Tag";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/tag.css";
+ * ou
  *
- * import Tag from "@raiadrogasil/pulso-react-components/Tag";
  * ```
+ * import {ThemeProvider, Tag} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-declare const Tag: React.FC<TagProps>;
+declare function Tag({ description, size, tagBackgroundColor, tagColor, value, }: TagProps): JSX.Element;
 export default Tag;

Tag/index.js

@@ -7,22 +7,26 @@ "use strict";
 var react_1 = __importDefault(require("react"));
-var Icon_1 = __importDefault(require("@raiadrogasil/pulso-react-components/Icon"));
+var Tag_styles_1 = require("./Tag.styles");
 /**
- * Para utlizar esse componente, deve-se importar:
+ * Para utlizar esse componente, deve-se importar o componente e o componente de tema:
  *
  * ```
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/icon.css";
+ * import Tag from "@raiadrogasil/pulso-react-components/Tag";
+ * import ThemeProvider from "@raiadrogasil/pulso-react-components/ThemeProvider";
+ * ```
  *
- * import "@raiadrogasil/pulso-styles/css/<marca>/components/tag.css";
+ * ou
  *
- * import Tag from "@raiadrogasil/pulso-react-components/Tag";
  * ```
+ * import {ThemeProvider, Tag} from "@raiadrogasil/pulso-react-components/";
+ * ```
  */
-var Tag = function (_a) {
-    var children = _a.children, value = _a.value, icon = _a.icon;
-    return (react_1.default.createElement("div", { className: "pulso-tag--standard" },
-        react_1.default.createElement("div", { className: "pulso-tag--children" },
-            icon && react_1.default.createElement(Icon_1.default, { size: "small", symbol: icon }),
-            react_1.default.createElement("span", null, children)),
-        react_1.default.createElement("div", { className: "pulso-tag--value" }, value)));
-};
+function Tag(_a) {
+    var description = _a.description, size = _a.size, tagBackgroundColor = _a.tagBackgroundColor, tagColor = _a.tagColor, value = _a.value;
+    var _b, _c;
+    return (react_1.default.createElement(Tag_styles_1.Container, { tagBackgroundColor: tagBackgroundColor, size: size },
+        description ? (react_1.default.createElement(Tag_styles_1.Description, { tagColor: tagColor, size: size, descriptionOnly: value === "" }, description.substring(0, size === "small" ? 17 : 38))) : (""),
+        (value && size === "small" && description && ((_b = description) === null || _b === void 0 ? void 0 : _b.length) < 14) ||
+            (value && size === "medium" && description && ((_c = description) === null || _c === void 0 ? void 0 : _c.length) < 29) ||
+            (value && !description) ? (react_1.default.createElement(Tag_styles_1.Value, { size: size, valueOnly: description === "" }, value.substring(0, 4))) : ("")));
+}
 exports.default = Tag;

No alert changes

Improved metrics

Total package byte prevSize

322247

increased by10.1%

Number of package files

99

increased by4.21%

Lines of code

4053

increased by7.45%

Dependency changes

• + Added@raiadrogasil/pulso-tokens@1.1.0(transitive)

• - Removed@raiadrogasil/pulso-tokens@0.1.0(transitive)

• Updated@raiadrogasil/pulso-tokens@^1.0.0