gdx-ui 1.15.4 → 2.0.2

package/stories/layout/Navbar.stories.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _components = require("../../components");
+var _logo = _interopRequireDefault(require("../../assets/logo.svg"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Layout/Navbar',
+  component: _components.NavbarResponsive,
+  tags: ['autodocs']
+};
+var Link = function Link(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("a", {
+    href: "#",
+    style: {
+      color: 'inherit'
+    }
+  }, children);
+};
+var menu = [{
+  id: 'menu-items',
+  element: /*#__PURE__*/_react["default"].createElement(Link, {
+    to: '/items'
+  }, "Productos"),
+  submenu: [{
+    id: 'submenu-items-list',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/items'
+    }, "Listado")
+  }, {
+    id: 'submenu-items-movements',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/movements'
+    }, "Transferencias")
+  }, {
+    id: 'submenu-items-locations',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/locations'
+    }, "Ubicaciones")
+  }]
+}, {
+  id: 'menu-sales',
+  element: /*#__PURE__*/_react["default"].createElement(Link, {
+    to: '/sales'
+  }, "Ventas"),
+  active: true,
+  submenu: [{
+    id: 'submenu-sales-list',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/sales'
+    }, "Listado")
+  }, {
+    id: 'submenu-sales-customers',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/customers'
+    }, "Clientes")
+  }]
+}, {
+  id: 'menu-purchases',
+  element: /*#__PURE__*/_react["default"].createElement(Link, {
+    to: '/purchases'
+  }, "Compras"),
+  submenu: [{
+    id: 'submenu-purchases-list',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/purchases'
+    }, "Listado")
+  }, {
+    id: 'submenu-purchases-suppliers',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/suppliers'
+    }, "Proveedores")
+  }]
+}, {
+  id: 'menu-apps',
+  element: /*#__PURE__*/_react["default"].createElement(Link, {
+    to: '/apps/print-zpl'
+  }, "Apps"),
+  submenu: [{
+    id: 'submenu-apps-zpl',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/apps/print-zpl'
+    }, "Imprimir ZPL")
+  }]
+}, {
+  id: 'menu-users',
+  element: /*#__PURE__*/_react["default"].createElement(Link, {
+    to: '/users'
+  }, "Usuarios"),
+  submenu: [{
+    id: 'submenu-users-list',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/users'
+    }, "Listado de Usuarios")
+  }, {
+    id: 'submenu-users-stores',
+    element: /*#__PURE__*/_react["default"].createElement(Link, {
+      to: '/stores'
+    }, "Sucursales")
+  }]
+}];
+var icons = [{
+  id: 'exit',
+  label: 'Logout',
+  icon: _freeSolidSvgIcons.faRightFromBracket,
+  onClick: function onClick() {
+    return console.log('click');
+  }
+}];
+
+// Simple flex (no grid) — original behavior
+var Default = exports.Default = {
+  args: {},
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        background: '#000'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_components.NavbarResponsive, {
+      logo: /*#__PURE__*/_react["default"].createElement("img", {
+        src: _logo["default"],
+        alt: "Logo",
+        style: {
+          height: 40
+        }
+      }),
+      menu: menu,
+      icons: icons
+    }));
+  }
+};

package/stories/layout/Skeleton.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Layout/Skeleton',
+  component: _components.Skeleton,
+  tags: ['autodocs']
+}; // Simple flex (no grid) — original behavior
+var Default = exports.Default = {
+  args: {
+    width: 500,
+    height: 50
+  },
+  render: function render(_ref) {
+    var width = _ref.width,
+      height = _ref.height;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Text, null, "Default Skeleton:"), /*#__PURE__*/_react["default"].createElement(_components.Skeleton, null), /*#__PURE__*/_react["default"].createElement(_components.Skeleton, {
+      width: "50%"
+    }), /*#__PURE__*/_react["default"].createElement(_components.Text, null, "Skeleton with specified width and height:"), /*#__PURE__*/_react["default"].createElement(_components.Skeleton, {
+      width: width,
+      height: height
+    }));
+  }
+};

package/stories/list/List.stories.js

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.FooterList = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _List = require("../../components/util/List");
+var _components = require("../../components");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var data = Array.from({
   length: 5
 }, function (_, i) {
-  return "List Item ".concat(i + 1, " Content");
+  return "List Item ".concat(i + 1);
 });
 var _default = exports["default"] = {
   title: 'Lists/List',
@@ -20,7 +22,8 @@ var _default = exports["default"] = {
 var Default = exports.Default = {
   args: {
     inline: false,
-    bullets: false
+    bullets: false,
+    spacing: 'default'
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement(_List.List, args, data.map(function (item, index) {
@@ -29,4 +32,29 @@ var Default = exports.Default = {
       }, item);
     }));
   }
+};
+var FooterList = exports.FooterList = {
+  args: {
+    spacing: 'cozy'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_components.Flex, {
+      columns: 3
+    }, [1, 2, 3].map(function (n) {
+      return /*#__PURE__*/_react["default"].createElement(_components.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_components.Title, {
+        as: "h4",
+        spacing: args.spacing
+      }, "The List Title ", n), /*#__PURE__*/_react["default"].createElement(_List.List, _extends({}, args, {
+        className: "note"
+      }), data.map(function (item, index) {
+        return /*#__PURE__*/_react["default"].createElement(_List.ListItem, {
+          key: index
+        }, "Link to ", /*#__PURE__*/_react["default"].createElement("a", {
+          href: "#",
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, item));
+      })));
+    }));
+  }
 };

package/stories/list/ScrollableList.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ScrollableListDefault = void 0;
+exports["default"] = exports.ScrollableImageList = exports.ScrollableAnyComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ScrollableList = require("../../components/list/ScrollableList");
 var _components = require("../../components");
@@ -22,23 +22,52 @@ var _default = exports["default"] = {
   component: _ScrollableList.ScrollableList,
   tags: ['autodocs']
 };
-var ScrollableListDefault = exports.ScrollableListDefault = {
+var ScrollableImageList = exports.ScrollableImageList = {
   args: {
     // inline: false,
     items: data,
-    itemWidth: 300
+    itemWidth: 400
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement(_ScrollableList.ScrollableList, _extends({}, args, {
       items: data,
       renderItem: function renderItem(item) {
-        return /*#__PURE__*/_react["default"].createElement(_components.Thumb, {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          role: "button",
+          style: {
+            cursor: 'pointer'
+          },
+          tabIndex: 0,
+          onClick: function onClick() {
+            return alert("Clicked on ".concat(item.title));
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_components.Widget, {
+          hover: true,
+          spacing: false
+        }, /*#__PURE__*/_react["default"].createElement(_components.Thumb, {
           src: item.src,
-          size: "large",
           alt: item.title,
-          bordered: true,
-          onClick: function onClick() {}
-        });
+          size: "large"
+        })));
+      }
+    }));
+  }
+};
+var ScrollableAnyComponent = exports.ScrollableAnyComponent = {
+  args: {
+    // inline: false,
+    items: data,
+    itemWidth: 500
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_ScrollableList.ScrollableList, _extends({}, args, {
+      items: data,
+      renderItem: function renderItem(item) {
+        return /*#__PURE__*/_react["default"].createElement(_components.Widget, null, /*#__PURE__*/_react["default"].createElement("div", {
+          style: {
+            width: '200px'
+          }
+        }, /*#__PURE__*/_react["default"].createElement("h3", null, item.title), /*#__PURE__*/_react["default"].createElement("p", null, "This is a description for ", item.title, ". It can contain any content, not just images.")));
       }
     }));
   }

package/stories/utils/Badge.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LabelAndBadge = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Utils/Badge',
+  component: _components.Badge,
+  tags: ['autodocs']
+};
+var Default = exports.Default = {
+  args: {},
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Badge, args, "Badge"));
+  }
+};
+var LabelAndBadge = exports.LabelAndBadge = {
+  args: {},
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Badge, args, "Badge"));
+  }
+};

package/stories/utils/Expanded.stories.js

@@ -3,25 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.ExpandedInAnotherPlace = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Table = require("../../components/table/Table");
 var _Expandable = require("../../components/expandable/Expandable");
 var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+var _Tooltip = _interopRequireDefault(require("../../components/util/Tooltip"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var _default = exports["default"] = {
-  title: 'Components/Expandable',
+  title: 'Utils/Expandable',
   component: _Expandable.Expandable,
   tags: ['autodocs']
 };
 var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_Expandable.Expandable, {
+      open: false
+    }, /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableButton, null), /*#__PURE__*/_react["default"].createElement(_Separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement(_components.Information, {
+      color: "primary"
+    }, "More information shown when expanded.")));
+  }
+};
+var ExpandedInAnotherPlace = exports.ExpandedInAnotherPlace = {
   render: function render() {
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Expandable.Expandable, {
       open: false
-    }, /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableButton, null), /*#__PURE__*/_react["default"].createElement(_Separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "box"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "content"
-    }, "More information shown when expanded.")))));
+    }, /*#__PURE__*/_react["default"].createElement(_components.Flex, {
+      valign: "center"
+    }, /*#__PURE__*/_react["default"].createElement(_components.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableButton, null)), /*#__PURE__*/_react["default"].createElement(_components.FlexItem, null, "Click the button to expand the content below.")), /*#__PURE__*/_react["default"].createElement(_Separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_components.Information, {
+      color: "primary"
+    }, "You can put the expanded content anywhere, not necessarily right after the button. ", /*#__PURE__*/_react["default"].createElement("br", null), "Click the button to see the content below."), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement(_components.Widget, null, "Use different components inside the expanded area. ", /*#__PURE__*/_react["default"].createElement("br", null), "The content can be as complex as you need."))));
   }
 };

package/stories/utils/Loader.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Utils/Loader',
+  component: _components.Loader,
+  tags: ['autodocs']
+};
+var Default = exports.Default = {
+  args: {
+    inline: false
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "rounded content",
+      style: {
+        width: '400px',
+        height: '300px',
+        border: '1px solid #ccc'
+      }
+    }, "El Loader se puede mostrar de forma independiente, o dentro de cualquier contenedor. ", /*#__PURE__*/_react["default"].createElement("br", null), "En este ejemplo se muestra dentro de un contenedor con tama\xF1o definido, pero tambi\xE9n puede usarse en l\xEDnea dentro de textos o componentes. ", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_components.Loader, args, "Loader")));
+  }
+};

package/stories/utils/Note.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Truncated = exports.NotewithLinks = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Utils/Note',
+  component: _components.Note,
+  tags: ['autodocs']
+};
+var Default = exports.Default = {
+  args: {
+    inline: false
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Note, args, "Note is a component used to display important information in small size and gray color."));
+  }
+};
+var NotewithLinks = exports.NotewithLinks = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Note, args, "Note is a component used to display important information in small size and gray color. This is a link to ", /*#__PURE__*/_react["default"].createElement("a", {
+      href: "https://www.gadxe.com",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, "Gadxe's website"), " for more information."));
+  }
+};
+var Truncated = exports.Truncated = {
+  args: {
+    inline: false,
+    textWrap: true
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '260px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_components.Note, args, "Note is a component used to display important information in small size and gray color for contextual help."));
+  }
+};

package/stories/utils/Snackbar.stories.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SnackbarStackStory = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Utils/Snackbar',
+  component: _components.Snackbar,
+  tags: ['autodocs']
+};
+var Default = exports.Default = {
+  args: {},
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Snackbar, args, "Snackbar"));
+  }
+};
+var data = [{
+  id: 1,
+  children: 'Snackbar 1',
+  color: 'primary'
+}, {
+  id: 2,
+  children: 'Snackbar 2',
+  color: 'alert'
+}, {
+  id: 3,
+  children: 'Snackbar 3',
+  color: 'success'
+}];
+var SnackbarStackStory = exports.SnackbarStackStory = {
+  args: {
+    timer: 3
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_components.SnackbarStack, {
+      snackbars: data
+    }, /*#__PURE__*/_react["default"].createElement(_components.Snackbar, args, "Snackbar"));
+  }
+};

package/stories/utils/Text.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Truncated = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Utils/Text',
+  component: _components.Text,
+  tags: ['autodocs']
+};
+var Default = exports.Default = {
+  args: {
+    inline: false,
+    bold: true,
+    size: 'medium',
+    spacing: 'default'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Text is a component used to display important information in various sizes and styles. It can be used for headings, paragraphs, labels, and more. The Text component provides flexibility in terms of typography and can be customized to fit the design needs of the application."));
+  }
+};
+var Truncated = exports.Truncated = {
+  args: {
+    inline: false,
+    textWrap: true
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '280px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Text is a component used to display important information in various sizes and styles. It can be used for headings, paragraphs, labels, and more. The Text component provides flexibility in terms of typography and can be customized to fit the design needs of the application."));
+  }
+};

package/stories/utils/Title.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Utils/Title',
+  component: _components.Title,
+  tags: ['autodocs']
+};
+var Default = exports.Default = {
+  args: {
+    as: 'h1',
+    spacing: 'default'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Title, args, "This title is using h1"), /*#__PURE__*/_react["default"].createElement(_components.Text, null, "This is a paragraph of text that provides additional information about the title above. It can be used to give context, explain the title, or provide any other relevant details that complement the title."));
+  }
+};

package/stories/utils/TokensBorders.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Borders = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Tokens/Borders',
+  // component: Tokens,
+  tags: ['autodocs']
+};
+var Borders = exports.Borders = {
+  argTypes: {
+    border: {
+      control: {
+        type: 'select'
+      },
+      options: ['border-top', 'border-bottom', 'bordered']
+    }
+  },
+  args: {
+    border: 'bordered'
+  },
+  render: function render(_ref) {
+    var border = _ref.border;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(border, " margin-bottom"),
+      style: {
+        padding: '15px',
+        backgroundColor: '#ccffc1'
+      }
+    }, "Some content here"), /*#__PURE__*/_react["default"].createElement("div", null, "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".", border), " to apply this border."));
+  }
+};

package/stories/utils/TokensColors.stories.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Colors = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../../components/table/Table");
+var _Expandable = require("../../components/expandable/Expandable");
+var _Separator = require("../../components/util/Separator");
+var _components = require("../../components");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Tokens/Colors',
+  // component: Tokens,
+  tags: ['autodocs']
+};
+var Colors = exports.Colors = {
+  argTypes: {
+    color: {
+      control: {
+        type: 'select'
+      },
+      options: ['primary', 'success', 'alert', 'warning', 'default', 'gray', 'dark-gray', 'active']
+    }
+  },
+  args: {
+    color: 'primary'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.List, null, /*#__PURE__*/_react["default"].createElement(_components.ListItem, null, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faCircle,
+      className: "color-".concat(args.color)
+    }), " ", args.color), /*#__PURE__*/_react["default"].createElement(_components.ListItem, null, /*#__PURE__*/_react["default"].createElement("div", null, "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".color-", args.color), " to apply the color to any element.")), /*#__PURE__*/_react["default"].createElement(_components.ListItem, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "color-".concat(args.color)
+    }, "Used on text.")), /*#__PURE__*/_react["default"].createElement(_components.ListItem, null, "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".bg-", args.color), " to apply the color to any element."), /*#__PURE__*/_react["default"].createElement(_components.ListItem, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "bg-".concat(args.color, " rounded"),
+      style: {
+        padding: '15px'
+      }
+    }, "Used on background."))));
+  }
+};