@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
127 lines • 9.27 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchIconButton = exports.Disabled = exports.BackgroundStyle = exports.Size = exports.Color = exports.Playground = void 0;
/* eslint-disable max-len */
var react_1 = __importStar(require("react"));
var natds_icons_1 = require("@naturacosmeticos/natds-icons");
var _1 = require(".");
var StoryContainer_1 = __importDefault(require("../../helpers/StoryContainer"));
var Icon_1 = require("../Icon");
var Autocomplete_1 = __importDefault(require("../Autocomplete/Autocomplete"));
var componentStatus = "\n> Icon button allow users to take actions, and make choices, with a single tap.\n\n## Properties\n| Property | Values | Status |\n|--- | ---| ---|\n| **ariaLabel** | string | \u2705 Available |\n| **backgroundStyle** | none, float, overlay | \u2705 Available |\n| **disabled** | true/false | \u2705 Available |\n| **IconComponent** | componente Icon | \u2705 Available |\n| **onClick** | function | \u2705 Available |\n| **size** | semi, medium, semiX | \u2705 Available |\n| **color** | primary, highEmphasis | \u2705 Available |\n## Technical Usages Examples\n";
exports.default = {
title: 'Components/IconButton',
component: _1.IconButton,
parameters: {
componentSubtitle: '',
docs: { description: { component: componentStatus } },
actions: { argTypesRegex: '^on.*' }
}
};
var Playground = function (args) { return react_1.default.createElement(_1.IconButton, __assign({}, args, { onClick: function () { return console.log('clicked!'); } })); };
exports.Playground = Playground;
exports.Playground.args = {
IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "standard", name: "outlined-default-mockup", color: "highEmphasis" })
};
var Color = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(_1.IconButton, __assign({}, args)),
react_1.default.createElement(_1.IconButton, __assign({}, args, { IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "standard", name: "outlined-default-mockup", color: "primary" }) })),
react_1.default.createElement(_1.IconButton, __assign({}, args, { IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "standard", name: "outlined-default-mockup", color: "surface" }) })))); };
exports.Color = Color;
exports.Color.args = __assign({}, exports.Playground.args);
var Size = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(_1.IconButton, __assign({}, args)),
react_1.default.createElement(_1.IconButton, __assign({}, args, { size: "semiX", IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "semi", name: "outlined-default-mockup", color: "highEmphasis" }) })),
react_1.default.createElement(_1.IconButton, __assign({}, args, { size: "medium", IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "semiX", name: "outlined-default-mockup", color: "highEmphasis" }) })))); };
exports.Size = Size;
exports.Size.args = __assign({}, exports.Playground.args);
var BackgroundStyle = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(_1.IconButton, __assign({}, args)),
react_1.default.createElement(_1.IconButton, __assign({}, args, { backgroundStyle: "float" })),
react_1.default.createElement(_1.IconButton, __assign({}, args, { backgroundStyle: "overlay" })))); };
exports.BackgroundStyle = BackgroundStyle;
exports.BackgroundStyle.args = __assign({}, exports.Playground.args);
var Disabled = function (args) { return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement(_1.IconButton, __assign({}, args, { IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "standard", name: "outlined-default-mockup", color: "mediumEmphasis" }) })),
react_1.default.createElement(_1.IconButton, __assign({}, args, { backgroundStyle: "float", IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "standard", name: "outlined-default-mockup", color: "mediumEmphasis" }) })),
react_1.default.createElement(_1.IconButton, __assign({}, args, { backgroundStyle: "overlay", IconComponent: react_1.default.createElement(Icon_1.Icon, { size: "standard", name: "outlined-default-mockup", color: "lowEmphasis" }) })))); };
exports.Disabled = Disabled;
exports.Disabled.args = __assign(__assign({}, exports.Playground.args), { disabled: true });
var SearchIconButton = function (args) {
var _a = (0, react_1.useState)(natds_icons_1.iconNames[0]), value = _a[0], setValue = _a[1];
var filterOptionsN = (0, react_1.useState)(natds_icons_1.iconNames.map(function (icon) { return ({ value: icon, label: icon }); }))[0];
var _b = (0, react_1.useState)(natds_icons_1.iconNames.map(function (icon) { return ({ value: icon, label: icon }); })), filterOptions = _b[0], setFilterOptions = _b[1];
var handleSelect = function (values) {
setValue(values.label);
handleChange(values.label);
};
var handleChange = function (values) {
setValue(values);
var newFilter = filterOptionsN.filter(function (opt) { return opt.label.toLowerCase().includes(values.toLowerCase()); });
if (newFilter.length > 0) {
setFilterOptions(newFilter);
}
else {
setFilterOptions([{ value: 'false', label: 'false' }]);
}
};
return (react_1.default.createElement(StoryContainer_1.default, null,
react_1.default.createElement("div", { style: { display: 'flex', gap: 20 } },
react_1.default.createElement("div", { style: { minWidth: 280 } },
react_1.default.createElement(Autocomplete_1.default, { onChange: function (e) { return handleChange(e.target.value); }, options: filterOptions, value: value, handleSelect: handleSelect })),
react_1.default.createElement("div", { style: {
display: 'flex', gap: 20, width: '480px', flexWrap: 'wrap'
} }, filterOptions.map(function (names) { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center ',
padding: '8px',
backgroundColor: '#ffffff',
border: '1px solid #ccc',
width: '180px'
} },
react_1.default.createElement(_1.IconButton, __assign({}, args, { backgroundStyle: "float", ariaLabel: names.label, onClick: function () { return ''; }, IconComponent: react_1.default.createElement(Icon_1.Icon, { color: "primary", name: names.value }) })),
react_1.default.createElement("p", null, names.value)))); })))));
};
exports.SearchIconButton = SearchIconButton;
exports.SearchIconButton.args = __assign({}, exports.Playground.args);
//# sourceMappingURL=IconButton.stories.js.map