@aegov/design-system-react/dist/components/Tabs/Tabs.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithIcons = exports.Pills = exports.Default = exports.Compact = exports.Arabic = void 0;
var _react = _interopRequireDefault(require("react"));
var _Tabs = _interopRequireDefault(require("./Tabs"));
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Tabs',
  component: _Tabs.default,
  args: {
    items: [{
      value: 'all',
      label: 'All services',
      content: /*#__PURE__*/_react.default.createElement("p", {
        className: "px-2 py-4"
      }, "This is the content area for the tab \"all services\"")
    }, {
      value: 'cat1',
      label: 'Category 1',
      content: 'This is the content area for the tab "category 1"'
    }, {
      value: 'cat2',
      label: 'Category 2',
      content: 'This is the content area for the tab "category 2"'
    }, {
      value: 'cat3',
      label: 'Category 3',
      content: 'This is the content area for the tab "category 3"'
    }]
  }
};
const Default = exports.Default = {};
const Compact = exports.Compact = {
  args: {
    variant: 'compact'
  }
};
const Pills = exports.Pills = {
  args: {
    variant: 'pills'
  }
};
const Arabic = exports.Arabic = {
  args: {
    dir: 'rtl'
  }
};
const WithIcons = exports.WithIcons = {
  args: {
    items: [{
      value: 'account',
      label: 'My account',
      icon: _react2.User,
      content: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
        className: "text-lg font-semibold"
      }, "My account"), /*#__PURE__*/_react.default.createElement("p", {
        className: "py-4"
      }, "This is the content area for the tab \"My account\""))
    }, {
      value: 'settings',
      label: 'Settings',
      icon: _react2.Gear,
      content: 'This is the content area for the tab "Settings"'
    }, {
      value: 'notifications',
      label: 'Notifications',
      icon: _react2.Bell,
      content: 'This is the content area for the tab "Notifications"'
    }, {
      value: 'support',
      label: 'Support',
      icon: _react2.Question,
      content: 'This is the content area for the tab "Support"'
    }]
  }
};