@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
160 lines • 8.78 kB
JavaScript
;
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.ListIcon = exports.SearchIcon = exports.Icons = exports.Playground = void 0;
/* eslint-disable react/no-array-index-key */
/* eslint-disable no-plusplus */
/* eslint-disable max-len */
var react_1 = __importStar(require("react"));
var natds_icons_1 = require("@naturacosmeticos/natds-icons");
var Autocomplete_1 = __importDefault(require("../Autocomplete/Autocomplete"));
var _1 = require(".");
var StoryContainer_1 = __importDefault(require("../../helpers/StoryContainer"));
var componentStatus = "\n> A helper component to display icons from @naturacosmeticos/natds-icons package.\n\n## Properties\n| Property | Values | Status |\n|--- | ---| ---|\n| **ariaHidden** | true/false | \u2705 Available |\n| **ariaLabel** | string | \u2705 Available |\n| **color** | color-name (Support Color tokens from theme) | \u2705 Available |\n| **name** | icon-name | \u2705 Available |\n| **role** | img, button | \u2705 Available |\n| **size** | (Support Size tokens from theme) | \u2705 Available |\n| **brand** | avon, avon_v2, natura, natura_v2, theBodyShop, <br /> consultoriaDeBeleza, casaEestilo | \u2705 Available |\n\n## Technical Usages Examples\n";
exports.default = {
title: 'Components/Icon',
component: _1.Icon,
parameters: {
componentSubtitle: '',
docs: { description: { component: componentStatus } }
}
};
var Playground = function (args) { return react_1.default.createElement(_1.Icon, __assign({}, args)); };
exports.Playground = Playground;
var Icons = function (args) { return react_1.default.createElement(_1.Icon, __assign({}, args)); };
exports.Icons = Icons;
var SearchIcon = 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.Icon, { color: "primary", name: names.value }),
react_1.default.createElement("p", null, names.value)))); })))));
};
exports.SearchIcon = SearchIcon;
exports.SearchIcon.args = __assign({}, exports.Playground.args);
var ListIcon = function (args) {
var filterOptionsN = (0, react_1.useState)(natds_icons_1.iconNames.map(function (icon) { return ({ value: icon, label: icon }); }))[0];
var filterOptions = (0, react_1.useState)(filterOptionsN)[0];
var countIcons = function () {
var counts = {
filled: 1,
outlined: 0,
categories: {}
};
filterOptions.forEach(function (option) {
var parts = option.value.split('-');
if (parts[0] === 'filled') {
counts.filled++;
}
else if (parts[0] === 'outlined') {
counts.outlined++;
}
var category = parts[1];
if (counts.categories[category]) {
counts.categories[category]++;
}
else {
counts.categories[category] = 1;
}
});
return counts;
};
var iconCounts = countIcons();
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, backgroundColor: '#fff', boxSizing: 'border-box', padding: '8px'
} },
Object.entries(iconCounts.categories).map(function (_a) {
var category = _a[0], count = _a[1];
return (react_1.default.createElement("p", { key: category },
category,
":",
' ',
count));
}),
react_1.default.createElement("p", null,
"Filled:",
' ',
iconCounts.filled),
react_1.default.createElement("p", null,
"Outlined:",
' ',
iconCounts.outlined),
react_1.default.createElement("p", null,
"Total de Icons:",
' ',
filterOptionsN.length)),
react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, filterOptions.map(function (option, index) { return (react_1.default.createElement("ul", { key: index, style: { display: 'flex', flexDirection: 'column' } },
react_1.default.createElement("li", null, option.value))); })))));
};
exports.ListIcon = ListIcon;
exports.ListIcon.args = __assign({}, exports.Playground.args);
//# sourceMappingURL=Icon.stories.js.map