@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
207 lines • 21.5 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibilityGuide = exports.FullWidth = exports.Icon = exports.Disabled = exports.Sizes = exports.LabelTransform = exports.Brands = exports.Variants = exports.Playground = void 0;
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable react/no-unescaped-entities */
/* eslint-disable max-len */
var react_1 = __importDefault(require("react"));
var Divider_1 = __importDefault(require("../Divider"));
var Typography_1 = __importDefault(require("../Typography"));
var GayaButton_1 = __importDefault(require("./GayaButton"));
var StoryContainer_1 = __importDefault(require("../../helpers/StoryContainer"));
// theme version 0.84.4 icon version 1.32.0
var componentStatus = "\n\n> O GaYaButton faz parte da evolu\u00E7\u00E3o cont\u00EDnua dos componentes do GaYa Design System. Lan\u00E7ado como um novo componente, o GaYaButton substitui o antigo Button, que permanecer\u00E1 dispon\u00EDvel para uso, mas n\u00E3o receber\u00E1 mais atualiza\u00E7\u00F5es ou suporte ativo. \nRecomendamos a migra\u00E7\u00E3o para o GaYaButton o mais r\u00E1pido poss\u00EDvel para aproveitar as melhorias e garantir a compatibilidade futura.\n\n## Propriedades\n| Figma props | React props | Valores | Status |\n|--- |--- | ---| ---|\n| **hierarchy** | **variant** | filled, outlined, ghost, tonal | \u2705 Dispon\u00EDvel |\n| **Text Tranform** | **textTranform** | uppercase, lowercase, capitalize | \u2705 Dispon\u00EDvel |\n| **Size** | **size** | semi, semiX, medium | \u2705 Dispon\u00EDvel |\n| **Icon** | **iconName** | 'icon_name' | \u2705 Dispon\u00EDvel |\n| **disabled** | **disabled** | true, false | \u2705 Dispon\u00EDvel |\n| **Display** | **fullWidth ** | true, false | \u2705 Dispon\u00EDvel |\n| **--** | **brand** | avon, avon_v2, natura, natura_v2, natura_v3, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo | \u2705 Dispon\u00EDvel |\n| **Color** | **color** | primary, onPrimary, secondary, onSecondary, neutral, inverse | \u2705 Dispon\u00EDvel |\n\n## Exemplos de usos\n";
exports.default = {
title: 'Components/GayaButton',
component: GayaButton_1.default,
parameters: {
componentSubtitle: '',
docs: { description: { component: componentStatus } },
actions: { argTypesRegex: '^on.*' }
}
};
var Playground = function (args) { return react_1.default.createElement(GayaButton_1.default, __assign({}, args)); };
exports.Playground = Playground;
exports.Playground.args = {
children: 'button',
onClick: function () { return null; }
};
var Variants = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ ariaLabel: "Action 1" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ ariaLabel: "Action 2" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ ariaLabel: "Action 3" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ ariaLabel: "Action 4" }, args, { variant: "tonal" })))); };
exports.Variants = Variants;
exports.Variants.args = __assign({}, exports.Playground.args);
var Brands = function (args) { return (react_1.default.createElement("div", { style: {
display: 'flex', flexDirection: 'column', gap: 20, padding: 15
} },
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 20, brand: "natura_v3" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 30, brand: "natura_v3" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 40, brand: "natura_v3" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 40, brand: "natura_v3" }, args, { variant: "tonal" }))),
react_1.default.createElement(Divider_1.default, null),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 16, brand: "consultoriaDeBeleza" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 17, brand: "consultoriaDeBeleza" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 18, brand: "consultoriaDeBeleza" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 18, brand: "consultoriaDeBeleza" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 16, brand: "forcaDeVendas" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 17, brand: "forcaDeVendas" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 18, brand: "forcaDeVendas" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 18, brand: "forcaDeVendas" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 10, brand: "natura_v2" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 11, brand: "natura_v2" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 12, brand: "natura_v2" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 12, brand: "natura_v2" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 1, brand: "avon" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 2, brand: "avon" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 3, brand: "avon" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 3, brand: "avon" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 4, brand: "avon_v2" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 5, brand: "avon_v2" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 6, brand: "avon_v2" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 6, brand: "avon_v2" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 7, brand: "natura" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 8, brand: "natura" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 9, brand: "natura" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 9, brand: "natura" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 19, brand: "theBodyShop" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 20, brand: "theBodyShop" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 21, brand: "theBodyShop" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 21, brand: "theBodyShop" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 13, brand: "casaEestilo" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 14, brand: "casaEestilo" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 15, brand: "casaEestilo" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 15, brand: "casaEestilo" }, args, { variant: "tonal" }))),
react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ key: 13, brand: "casaEestilo_v2" }, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 14, brand: "casaEestilo_v2" }, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 15, brand: "casaEestilo_v2" }, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({ key: 15, brand: "casaEestilo_v2" }, args, { variant: "tonal" }))))); };
exports.Brands = Brands;
exports.Brands.args = __assign({}, exports.Playground.args);
var LabelTransform = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({ textTransform: "uppercase" }, args, { variant: "contained" })),
react_1.default.createElement(GayaButton_1.default, __assign({ textTransform: "capitalize" }, args, { variant: "contained" })),
react_1.default.createElement(GayaButton_1.default, __assign({ textTransform: "lowercase" }, args, { variant: "contained" })))); };
exports.LabelTransform = LabelTransform;
exports.LabelTransform.args = __assign({}, exports.Playground.args);
var Sizes = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({ variant: "filled" }, args, { size: "semi" })),
react_1.default.createElement(GayaButton_1.default, __assign({ variant: "filled" }, args, { size: "semiX" })),
react_1.default.createElement(GayaButton_1.default, __assign({ variant: "filled" }, args, { size: "medium" }))),
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined", size: "semi" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined", size: "semiX" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined", size: "medium" }))),
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost", size: "semi" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost", size: "semiX" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost", size: "medium" }))),
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal", size: "semi" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal", size: "semiX" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal", size: "medium" }))))); };
exports.Sizes = Sizes;
exports.Sizes.args = __assign({}, exports.Playground.args);
var Disabled = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "filled" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal" })))); };
exports.Disabled = Disabled;
exports.Disabled.args = __assign(__assign({}, exports.Playground.args), { disabled: true });
var Icon = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { showIcon: true, iconName: "outlined-default-mockup", iconPosition: "left" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { showIcon: true, iconName: "outlined-default-mockup" }))),
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined", showIcon: true, iconName: "outlined-default-mockup", iconPosition: "left" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined", showIcon: true, iconName: "outlined-default-mockup" }))),
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost", showIcon: true, iconName: "outlined-default-mockup", iconPosition: "left" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost", showIcon: true, iconName: "outlined-default-mockup" }))),
react_1.default.createElement("div", { style: { display: 'flex', gap: 8 } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal", showIcon: true, iconName: "outlined-default-mockup", iconPosition: "left" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal", showIcon: true, iconName: "outlined-default-mockup" }))))); };
exports.Icon = Icon;
exports.Icon.args = __assign({}, exports.Playground.args);
var FullWidth = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } },
react_1.default.createElement(GayaButton_1.default, __assign({}, args)),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "outlined" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "ghost" })),
react_1.default.createElement(GayaButton_1.default, __assign({}, args, { variant: "tonal" })))); };
exports.FullWidth = FullWidth;
exports.FullWidth.args = __assign(__assign({}, exports.Playground.args), { fullWidth: true });
var AccessibilityGuide = function () { return (react_1.default.createElement("div", null,
react_1.default.createElement(Typography_1.default, { variant: "heading4" }, "Accessibility Guide"),
react_1.default.createElement("table", { style: {
fontFamily: 'roboto',
fontSize: '13px',
maxWidth: '800px',
margin: '20px 0',
borderCollapse: 'collapse',
border: '1px solid #ccc'
} },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", { style: { backgroundColor: '#f4f4f4', color: '#333' } },
react_1.default.createElement("th", { style: { padding: '10px', fontSize: '16px', border: '1px solid #ccc' } },
react_1.default.createElement(Typography_1.default, { variant: "subtitle1" }, "Atributo")),
react_1.default.createElement("th", { style: { padding: '10px', fontSize: '16px', border: '1px solid #ccc' } },
react_1.default.createElement(Typography_1.default, { variant: "subtitle1" }, "Descri\u00E7\u00E3o")),
react_1.default.createElement("th", { style: { padding: '10px', fontSize: '16px', border: '1px solid #ccc' } },
react_1.default.createElement(Typography_1.default, { variant: "subtitle1" }, "C\u00F3digo de Exemplo")))),
react_1.default.createElement("tbody", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "role"),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "Especifica o papel do elemento para tecnologias assistivas."),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } },
react_1.default.createElement("code", null, "<Gayabutton role=\"button\">Click me</Gayabutton>"))),
react_1.default.createElement("tr", null,
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "aria-label"),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "Fornece uma etiqueta de texto para leitores de tela."),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } },
react_1.default.createElement("code", null, "<Gayabutton aria-label=\"Fechar\">X</Gayabutton>"))),
react_1.default.createElement("tr", null,
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "aria-describedby"),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "Identifica elementos que descrevem o bot\u00E3o."),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } },
react_1.default.createElement("code", null, "<Gayabutton aria-describedby=\"descriptionClose\">Fechar</Gayabutton>"),
react_1.default.createElement("br", null),
react_1.default.createElement("code", null, "<div id=\"descriptionClose\">Clique para fechar a janela</div>"))),
react_1.default.createElement("tr", null,
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "aria-disabled"),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "Indica que o elemento est\u00E1 desabilitado, mas ainda \u00E9 acessado pela tecnologia assistiva."),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } },
react_1.default.createElement("code", null, "<Gayabutton aria-disabled=\"true\">N\u00E3o dispon\u00EDvel</button>"))),
react_1.default.createElement("tr", null,
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "aria-haspopup"),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } }, "Indica que o bot\u00E3o tem um menu popup associado."),
react_1.default.createElement("td", { style: { padding: '10px', border: '1px solid #ccc' } },
react_1.default.createElement("code", null, "<Gayabutton aria-haspopup=\"true\">Op\u00E7\u00F5es</button>"))))))); };
exports.AccessibilityGuide = AccessibilityGuide;
//# sourceMappingURL=GayaButton.stories.js.map