@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
61 lines • 6.68 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.Brand = exports.Sizes = exports.Custom = exports.Selected = exports.Disabled = exports.WithAvatar = exports.WithIcon = exports.Playground = void 0;
var react_1 = __importDefault(require("react"));
var _1 = require(".");
var componentStatus = "\n> Chip used to display discrete tags or selections in user interfaces..\n\n## Properties\n| Property | Values | Status |\n|--- | ---| ---|\n| **variant(no prop)** | Standard | \u2705 Available |\n| **labelText** | string | \u2705 Available |\n| **leftIcon** | icon-name | \u2705 Available |\n| **rightIcon** | icon-name | \u2705 Available |\n| **leftAvatar** | string | \u2705 Available |\n| **rightAvatar** | string | \u2705 Available |\n| **color** | neutral, primary, secondary, custom | \u2705 Available |\n| **disabled** | true/false | \u2705 Available |\n| **selected** | true/false | \u2705 Available |\n| **customLabelColor** | string | \u2705 Available |\n| **customBackground** | string | \u2705 Available |\n| **customBorderColor** | string | \u2705 Available |\n| **size** | semi, semiX, medium | \u2705 Available |\n| **onClick** | function | \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/Chip',
component: _1.Chip,
parameters: {
componentSubtitle: '',
docs: { description: { component: componentStatus } }
}
};
var Playground = function (args) { return (react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", onClick: function () { return console.log('clicked!'); } }))); };
exports.Playground = Playground;
var WithIcon = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: '16px' } },
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", leftIcon: "outlined-default-mockup" })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", rightIcon: "outlined-default-mockup" })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", leftIcon: "outlined-default-mockup", rightIcon: "outlined-default-mockup" })))); };
exports.WithIcon = WithIcon;
var WithAvatar = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: '16px' } },
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", leftAvatar: "https://via.placeholder.com/200x200" })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", rightAvatar: "https://via.placeholder.com/200x200" })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", leftAvatar: "https://via.placeholder.com/200x200", rightAvatar: "https://via.placeholder.com/200x200" })))); };
exports.WithAvatar = WithAvatar;
var Disabled = function (args) { return (react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", disabled: true }))); };
exports.Disabled = Disabled;
var Selected = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: '16px' } },
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Neutral", color: "neutral", selected: true })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Primary", color: "primary", selected: true })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Secondary", color: "secondary", selected: true })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Custom", color: "custom", customBackground: "#FF00FF", customBorderColor: "#FF00FF", customLabelColor: "#fff", selected: true })))); };
exports.Selected = Selected;
var Custom = function (args) { return (react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", color: "custom", customBackground: "#FF00FF", customBorderColor: "#FF00FF" }))); };
exports.Custom = Custom;
var Sizes = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: '16px' } },
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", size: "semi" })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", size: "semiX" })),
react_1.default.createElement(_1.Chip, __assign({}, args, { labelText: "Chip label", size: "medium" })))); };
exports.Sizes = Sizes;
var Brand = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: '16px' } },
react_1.default.createElement(_1.Chip, __assign({ brand: "avon_v2" }, args, { labelText: "Chip label", size: "semi" })),
react_1.default.createElement(_1.Chip, __assign({ brand: "natura_v2" }, args, { labelText: "Chip label", size: "semiX" })),
react_1.default.createElement(_1.Chip, __assign({ brand: "casaEestilo", color: "custom" }, args, { labelText: "Chip label", size: "medium" })))); };
exports.Brand = Brand;
//# sourceMappingURL=Chip.stories.js.map