@naturacosmeticos/natds-react
Version:
A collection of components from Natura Design System for React
101 lines • 7.49 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.WithSearch = exports.WithLogo = exports.Elevation = exports.Color = exports.Playground = void 0;
/* eslint-disable @typescript-eslint/ban-ts-comment */
var react_1 = __importDefault(require("react"));
var TextField_1 = __importDefault(require("../TextField"));
var IconButton_1 = require("../IconButton");
var Icon_1 = require("../Icon");
var _1 = require(".");
var Logo_1 = require("../Logo");
var componentStatus = "\n> The App Bar Top displays information and actions relating to the current screen.\n\n## Properties\n| Property | Values | Status |\n|--- | ---| ---|\n| **variant(no prop)** | base/standard | \u2705 Available |\n| **color** | default, primary, inverse, none | \u2705 Available |\n| **elevation** | true/false | \u2705 Available |\n| **behaviour** | fixed, scroll, absolute | \u2705 Available |\n| **action** | left, right | \u2705 (available but with alternative composition) |\n| **Content Position** | (available but with alternative composition) | \u2705 (available but with alternative composition) |\n| **Content Type** | (available but with alternative composition) | \u2705 (available but with alternative composition) |\n| **Content Proeminent** | (available but with alternative composition) | \u2705 (available but with alternative composition) |\n\n\n## Technical Usages Examples\n";
exports.default = {
title: 'Components/AppBarTop',
component: _1.AppBarTop,
parameters: {
componentSubtitle: '',
docs: { description: { component: componentStatus } }
}
};
var Playground = function (args) { return (react_1.default.createElement("div", { style: {
display: 'flex',
position: 'relative',
gap: 8,
flexDirection: 'column',
minHeight: 920,
width: '100%',
// border: '1px solid red',
overflowY: 'scroll'
} },
react_1.default.createElement(_1.AppBarTop, __assign({}, args)))); };
exports.Playground = Playground;
exports.Playground.args = {
children: 'App Bar - Top',
behaviour: 'absolute'
// @ts-ignore
};
var Color = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } },
react_1.default.createElement(_1.AppBarTop, __assign({}, args, { color: "default" }), "Default"),
react_1.default.createElement(_1.AppBarTop, __assign({}, args, { color: "primary" }), "Primary"),
react_1.default.createElement(_1.AppBarTop, __assign({}, args, { color: "secondary" }), "Secondary"),
react_1.default.createElement(_1.AppBarTop, __assign({}, args, { color: "inverse" }), "Inverse"),
react_1.default.createElement(_1.AppBarTop, __assign({}, args, { color: "none" }), "None"))); };
exports.Color = Color;
exports.Color.args = {
children: 'App Bar - Top',
// @ts-ignore
style: { position: 'static' }
};
var Elevation = function (args) { return (react_1.default.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } },
react_1.default.createElement(_1.AppBarTop, __assign({}, args), "Elevation"),
react_1.default.createElement(_1.AppBarTop, __assign({}, args, { elevation: false }), "No Elevation"))); };
exports.Elevation = Elevation;
exports.Elevation.args = {
children: 'App Bar - Top',
// @ts-ignore
style: { position: 'static' }
};
var WithLogo = function (args) { return (react_1.default.createElement(_1.AppBarTop, __assign({}, args),
react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', width: '100%' } },
react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-navigation-menu", color: "highlight" }), ariaLabel: "menu", onClick: function () { return ''; } }),
react_1.default.createElement("div", { style: { flexGrow: 1, justifyContent: 'center', display: 'flex' } },
react_1.default.createElement(Logo_1.Logo, { size: "hugeX" })),
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-action-search", color: "highlight" }), ariaLabel: "search", onClick: function () { return ''; } }),
react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-finance-bag", color: "highlight" }), ariaLabel: "profile", onClick: function () { return ''; } }))))); };
exports.WithLogo = WithLogo;
exports.WithLogo.args = {
children: 'App Bar - Top',
// @ts-ignore
style: { position: 'static' }
};
var WithSearch = function (args) { return (react_1.default.createElement(_1.AppBarTop, __assign({}, args),
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: { justifyContent: 'center', display: 'flex' } },
react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-navigation-menu", color: "highlight" }), ariaLabel: "menu", onClick: function () { return ''; } })),
react_1.default.createElement("div", { style: { justifyContent: 'center', display: 'flex' } },
react_1.default.createElement(TextField_1.default, { ariaLabel: "search", onClick: function () { return ''; }, id: "123", size: "medium", placeholder: "Search", action: "icon", IconComponent: react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-action-search", color: "highlight" }), ariaLabel: "search", onClick: function () { return ''; } }) })),
react_1.default.createElement("div", null,
react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-action-search", color: "highlight" }), ariaLabel: "search", onClick: function () { return ''; } }),
react_1.default.createElement(IconButton_1.IconButton, { IconComponent: react_1.default.createElement(Icon_1.Icon, { name: "outlined-finance-bag", color: "highlight" }), ariaLabel: "profile", onClick: function () { return ''; } }))))); };
exports.WithSearch = WithSearch;
exports.WithSearch.args = {
children: 'App Bar - Top',
// @ts-ignore
style: { position: 'static' }
};
//# sourceMappingURL=AppBarTop.stories.js.map