@dktunited-techoff/techoff-suite-ui 1.2.0 → 1.3.1

package/lib/layouts/TsHeader/TsHeader.css

@@ -0,0 +1,186 @@
+@font-face {
+  font-family: 'Montserrat-Medium';
+  src: url('../../assets/fonts/Montserrat-Medium.ttf');
+}
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url('../../assets/fonts/Roboto-Light.ttf');
+}
+
+/* ######## */
+/* HEADER   */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  padding: 0 24px;
+}
+.ts-header-aside {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+}
+.ts-header-right-side {
+  justify-content: flex-end;
+}
+.ts-header-search-bar {
+  display: flex;
+  align-items: center;
+  width: 400px;
+  height: 100%;
+}
+.ts-header-actions {
+  display: flex;
+}
+.ts-header-actions > * {
+  margin-left: 12px;
+}
+
+/* ################ */
+/* HEADER TECHOFF   */
+.ts-header-techoff {
+  display: flex;
+  height: 18px;
+  margin-left: 4px;
+}
+
+/* ################ */
+/* HEADER PROFILE   */
+.ts-header-profile-container {
+  position: relative;
+}
+.ts-header-profile-dropdown {
+  display: flex;
+  height: 40px;
+  border-radius: 9999px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  color: #4e5d6b;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ts-header-profile-img-container {
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border-radius: 9999px;
+}
+.ts-header-profile-img-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background-color: rgb(229, 229, 229);
+}
+.ts-header-profile-name {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 16px;
+}
+.ts-header-profile-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding-right: 14px;
+  border-radius: 9999px;
+}
+.ts-header-profile-menu {
+  position: absolute;
+  right: 0;
+  top: 48px;
+  width: 288px;
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: #ffffff;
+  z-index: 10;
+}
+.ts-header-profile-menu-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ts-header-profile-menu-item:hover {
+  background-color: #e7f3f9;
+}
+.ts-header-profile-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+.ts-header-profile-menu-item-label {
+  flex: 1;
+  padding: 0 2px;
+}
+
+/* ############### */
+/* HEADER SEARCH   */
+.ts-header-search {
+  position: relative;
+  width: 100%;
+}
+.ts-header-search-items-container {
+  position: absolute;
+  top: calc(100% + 4px);
+  width: 100%;
+  max-height: 200px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: white;
+  overflow-y: auto;
+  z-index: 100;
+}
+.ts-header-search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+}
+.ts-header-search-no-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: #8c96a2;
+  font-style: italic;
+}
+.ts-header-search-items {
+  padding: 8px;
+}
+.ts-header-search-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ts-header-search-item:hover {
+  background: #e7f3f9;
+}
+.ts-header-search-item--match {
+  background: #cce5f2;
+  color: #007dbc;
+  font-weight: 700;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/layouts/TsHeader/TsHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsHeaderProps } from './TsHeader.types';
+import './TsHeader.css';
+export declare const TsHeader: ({ actions, appName }: TsHeaderProps) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeader.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsHeader = void 0;
+const React = require("react");
+const icons_1 = require("../../components/TsIcon/icons");
+require("./TsHeader.css");
+const TsHeader = ({ actions, appName }) => {
+    // #########
+    // Rendering
+    return (React.createElement("header", null,
+        React.createElement("div", { className: "ts-header-aside" },
+            React.createElement("div", { className: "ts-header-techoff", dangerouslySetInnerHTML: { __html: icons_1.icons[`header-${appName}`] } })),
+        React.createElement("div", { className: "ts-header-aside ts-header-right-side" },
+            React.createElement("div", { className: "ts-header-actions" }, actions))));
+};
+exports.TsHeader = TsHeader;
+//# sourceMappingURL=TsHeader.js.map

package/lib/layouts/TsHeader/TsHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,yDAAsD;AAEtD,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAiB,EAAE,EAAE;IAC9D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,6BAAK,SAAS,EAAC,mBAAmB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAK,CAAC,UAAU,OAAO,EAAE,CAAC,EAAE,GAAI,CAClG;QAEN,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BAAK,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAO,CAC9C,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,QAAQ,YAcnB"}

package/lib/layouts/TsHeader/TsHeader.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+export type TsHeaderProps = {
+    actions: ReactElement;
+    appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability';
+    search?: ReactElement;
+};
+export type TsHeaderProfileItemProps = {
+    icon: string;
+    label: string;
+    link: string;
+};
+export type TsHeaderProfileProps = {
+    firstname: string;
+    lastname: string;
+};
+export type TsHeaderSearchProps = {
+    getItemLabel: (e: any) => string;
+    getItemValue: (e: any) => string;
+    loadItems: (search?: string) => Promise<any[]>;
+    noDataLabel?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+};

package/lib/layouts/TsHeader/TsHeader.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsHeader.types.js.map

package/lib/layouts/TsHeader/TsHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeader.types.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeader.types.ts"],"names":[],"mappings":""}

package/lib/layouts/TsHeader/TsHeaderProfile.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsHeaderProfileItemProps, TsHeaderProfileProps } from './TsHeader.types';
+export declare const TsHeaderProfileItem: ({ icon, label, link }: TsHeaderProfileItemProps) => React.JSX.Element;
+export declare const TsHeaderProfile: ({ children, firstname, lastname }: TsHeaderProfileProps & PropsWithChildren) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeaderProfile.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsHeaderProfile = exports.TsHeaderProfileItem = void 0;
+const React = require("react");
+const react_1 = require("react");
+const TsIcon_1 = require("../../components/TsIcon/TsIcon");
+const use_click_outside_1 = require("../../hooks/use-click-outside");
+const string_utils_1 = require("../../utils/string.utils");
+const TsHeaderProfileItem = ({ icon, label, link }) => {
+    // ########
+    // Handlers
+    const handleNavigate = () => window.open(link, '_blank', 'noreferrer');
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-profile-menu-item", onClick: handleNavigate },
+        React.createElement("div", { className: "ts-header-profile-menu-item-icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })),
+        React.createElement("div", { className: "ts-header-profile-menu-item-label" }, label),
+        React.createElement("div", { className: "ts-header-profile-menu-item-icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: "external-link", size: "16" }))));
+};
+exports.TsHeaderProfileItem = TsHeaderProfileItem;
+const TsHeaderProfile = ({ children, firstname, lastname }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const ref = (0, use_click_outside_1.useClickOutside)(() => setIsOpen(false));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-profile-container", ref: ref },
+        React.createElement("div", { className: "ts-header-profile-dropdown", onClick: () => children && setIsOpen(prev => !prev) },
+            React.createElement("div", { className: "ts-header-profile-img-container" },
+                React.createElement("div", { className: "ts-header-profile-img-icon" },
+                    React.createElement(TsIcon_1.TsIcon, { name: "user", size: "16" }))),
+            React.createElement("div", { className: "ts-header-profile-name" },
+                (0, string_utils_1.capitalize)(firstname),
+                " ",
+                lastname.charAt(0).toUpperCase(),
+                "."),
+            children && (React.createElement("div", { className: "ts-header-profile-chevron" },
+                React.createElement(TsIcon_1.TsIcon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" })))),
+        isOpen && React.createElement("div", { className: "ts-header-profile-menu" }, children)));
+};
+exports.TsHeaderProfile = TsHeaderProfile;
+//# sourceMappingURL=TsHeaderProfile.js.map

package/lib/layouts/TsHeader/TsHeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,2DAAwD;AACxD,qEAAgE;AAChE,2DAAsD;AAG/C,MAAM,mBAAmB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA4B,EAAE,EAAE;IACrF,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEvE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,cAAc;QAClE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B;QACN,6BAAK,SAAS,EAAC,mCAAmC,IAAE,KAAK,CAAO;QAChE,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACrC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,mBAAmB,uBAkB9B;AAEK,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA4C,EAAE,EAAE;IAC7G,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,6BAA6B,EAAC,GAAG,EAAE,GAAG;QACnD,6BAAK,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;YAC7F,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,6BAAK,SAAS,EAAC,4BAA4B;oBACzC,oBAAC,eAAM,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC5B,CACF;YACN,6BAAK,SAAS,EAAC,wBAAwB;gBACpC,IAAA,yBAAU,EAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,2BAA2B;gBACxC,oBAAC,eAAM,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC9D,CACP,CACG;QAEL,MAAM,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAC/D,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,eAAe,mBA4B1B"}

package/lib/layouts/TsHeader/TsHeaderSearch.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TsHeaderSearchProps } from './TsHeader.types';
+export declare const TsHeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }: TsHeaderSearchProps) => React.JSX.Element;

package/lib/layouts/TsHeader/TsHeaderSearch.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsHeaderSearch = void 0;
+const React = require("react");
+const react_1 = require("react");
+// import { Input } from '../../components/Inputs/Input/Input';
+const TsLoader_1 = require("../../components/TsLoader/TsLoader");
+const use_click_outside_1 = require("../../hooks/use-click-outside");
+const TsHeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, onChange, }) => {
+    const [searchValue] = (0, react_1.useState)('');
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [showItems, setShowItems] = (0, react_1.useState)(false);
+    const ref = (0, use_click_outside_1.useClickOutside)(() => setShowItems(false));
+    // #######
+    // Helpers
+    const getBeforeMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        return label.substring(0, matchStartIndex);
+    };
+    const getMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchStartIndex, matchEndIndex);
+    };
+    const getAfterMatch = (item) => {
+        const label = getItemLabel(item);
+        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
+        const matchEndIndex = matchStartIndex + searchValue.length;
+        return label.substring(matchEndIndex);
+    };
+    // ########
+    // Watchers
+    (0, react_1.useEffect)(() => {
+        if (searchValue === '') {
+            setShowItems(false);
+            setItems([]);
+            setIsLoading(false);
+        }
+        else {
+            setShowItems(true);
+            setIsLoading(true);
+            loadItems(searchValue)
+                .then(setItems)
+                .finally(() => setIsLoading(false));
+        }
+    }, [searchValue]);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-header-search", ref: ref }, showItems && searchValue !== '' && (React.createElement("div", { className: "ts-header-search-items-container" },
+        isLoading && (React.createElement("div", { className: "ts-header-search-loading" },
+            React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
+        !isLoading && items.length === 0 && React.createElement("div", { className: "ts-header-search-no-items" }, noDataLabel),
+        !isLoading && items.length > 0 && (React.createElement("div", { className: "ts-header-search-items" }, items.map(item => (React.createElement("div", { className: "ts-header-search-item", onClick: () => onChange(getItemValue(item)) },
+            getBeforeMatch(item),
+            React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(item)),
+            getAfterMatch(item))))))))));
+};
+exports.TsHeaderSearch = TsHeaderSearch;
+//# sourceMappingURL=TsHeaderSearch.js.map

package/lib/layouts/TsHeader/TsHeaderSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsHeaderSearch.js","sourceRoot":"","sources":["../../../src/layouts/TsHeader/TsHeaderSearch.tsx"],"names":[],"mappings":"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"}

package/lib/layouts/TsHeader/__stories__/TsHeader.stories.mdx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsHeader } from '../TsHeader';
+import { TsHeaderProfile, TsHeaderProfileItem } from '../TsHeaderProfile';
+import { TsHeaderSearch } from '../TsHeaderSearch';
+import { TsButton } from '../../../components/TsButton/TsButton';
+
+<Meta title="Layouts/Header" />
+
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
+    description: 'Icon of the button.',
+  },
+};
+
+export const loadItems = () => {
+  return Promise.resolve([
+    { id: 1, label: 'Item 1' },
+    { id: 2, label: 'Item 2' },
+    { id: 3, label: 'Item 3' },
+    { id: 4, label: 'Item 4' },
+    { id: 5, label: 'Item 5' },
+    { id: 6, label: 'Item 6' },
+    { id: 7, label: 'Item 7' },
+    { id: 8, label: 'Item 8' },
+    { id: 9, label: 'Item 9' },
+  ]);
+};
+
+# Header
+
+The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      actions: (
+        <>
+          <TsButton icon="add" size="lg" variant="shadow" rounded />
+          <TsHeaderProfile firstname="John" lastname="Doe">
+            <TsHeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
+            <TsHeaderProfileItem icon="award" label="Trainings" link="" />
+          </TsHeaderProfile>
+        </>
+      ),
+      appName: 'repairability',
+      search: (
+        <TsHeaderSearch
+          getItemLabel={item => item.label}
+          getItemValue={item => item.id}
+          loadItems={loadItems}
+          noDataLabel="No item found."
+          placeholder="Search something in the application"
+          onChange={() => {}}
+        />
+      ),
+    }}
+    argTypes={headerArgTypes}
+  >
+    {args => <TsHeader {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsHeader} />

package/lib/layouts/TsNavigation/TsNavigation.css

@@ -0,0 +1,74 @@
+.ts-navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.ts-breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.ts-breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.ts-breadcrumb-chevron {
+  padding: 0 8px;
+  color: #3643ba;
+}
+.ts-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 9999px;
+  color: #3643ba;
+}
+.ts-breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270deg, #3643ba 0%, rgba(54, 67, 186, 0.6) 100%);
+  color: #ffffff;
+}
+.ts-breadcrumb-item--link {
+  cursor: pointer;
+}
+.ts-breadcrumb-item--link:hover {
+  text-decoration: underline;
+}
+.ts-breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.ts-navigation-divider {
+  flex: 1;
+  height: 1px;
+  margin: 4px 0;
+  background: #ebecf7;
+}
+
+/* ######### */
+/* ACTIONS   */
+.ts-navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.ts-navigation-actions > * {
+  margin-left: 16px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/lib/layouts/TsNavigation/TsNavigation.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsNavigationBreadcrumbItemProps, TsNavigationProps } from './TsNavigation.types';
+import './TsNavigation.css';
+export declare const TsNavigationBreadcrumbDivider: () => React.JSX.Element;
+export declare const TsNavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<TsNavigationBreadcrumbItemProps>) => React.JSX.Element;
+export declare const TsNavigation: ({ actions, breadcrumbs }: TsNavigationProps) => React.JSX.Element;

package/lib/layouts/TsNavigation/TsNavigation.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsNavigation = exports.TsNavigationBreadcrumbItem = exports.TsNavigationBreadcrumbDivider = void 0;
+const React = require("react");
+const TsIcon_1 = require("../../components/TsIcon/TsIcon");
+require("./TsNavigation.css");
+const TsNavigationBreadcrumbDivider = () => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-breadcrumb-chevron" },
+        React.createElement(TsIcon_1.TsIcon, { name: "chevron-right" })));
+};
+exports.TsNavigationBreadcrumbDivider = TsNavigationBreadcrumbDivider;
+const TsNavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `
+        ts-breadcrumb-item
+        ${highlight ? 'ts-breadcrumb-item--highlight' : ''} ${onClick ? 'ts-breadcrumb-item--link' : ''}
+      `, onClick: onClick },
+        icon && (React.createElement("div", { className: "ts-breadcrumb-item--icon" },
+            React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }))),
+        children));
+};
+exports.TsNavigationBreadcrumbItem = TsNavigationBreadcrumbItem;
+const TsNavigation = ({ actions, breadcrumbs }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-navigation" },
+        React.createElement("div", { className: "ts-breadcrumb" }, breadcrumbs),
+        React.createElement("div", { className: "ts-navigation-divider" }),
+        React.createElement("div", { className: "ts-navigation-actions" }, actions)));
+};
+exports.TsNavigation = TsNavigation;
+//# sourceMappingURL=TsNavigation.js.map

package/lib/layouts/TsNavigation/TsNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsNavigation.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AAExD,8BAA4B;AAErB,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,eAAM,IAAC,IAAI,EAAC,eAAe,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,6BAA6B,iCAQxC;AAEK,MAAM,0BAA0B,GAAG,CAAC,EACzC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC4C,EAAE,EAAE;IACvD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE;OAChG,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,0BAA0B;YACvC,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,0BAA0B,8BAyBrC;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAqB,EAAE,EAAE;IAC1E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC5B,6BAAK,SAAS,EAAC,eAAe,IAAE,WAAW,CAAO;QAClD,6BAAK,SAAS,EAAC,uBAAuB,GAAG;QACzC,6BAAK,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAO,CAClD,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}

package/lib/layouts/TsNavigation/TsNavigation.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+export type TsNavigationProps = {
+    actions?: ReactElement;
+    breadcrumbs: ReactElement;
+};
+export type TsNavigationBreadcrumbItemProps = {
+    icon?: string;
+    highlight?: boolean;
+    onClick?: () => void;
+};

package/lib/layouts/TsNavigation/TsNavigation.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=TsNavigation.types.js.map

package/lib/layouts/TsNavigation/TsNavigation.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsNavigation.types.js","sourceRoot":"","sources":["../../../src/layouts/TsNavigation/TsNavigation.types.ts"],"names":[],"mappings":""}

package/lib/layouts/TsNavigation/__stories__/TsNavigation.stories.mdx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsNavigation, TsNavigationBreadcrumbItem, TsNavigationBreadcrumbDivider } from '../TsNavigation';
+import { TsButton } from '../../../components/TsButton/TsButton';
+import { icons } from '../../../components/TsIcon/icons';
+
+<Meta title="Layouts/Navigation" />
+
+# Navigation
+
+Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      actions: (
+        <>
+          <TsButton icon="check" onClick={() => {}}>
+            Action 1
+          </TsButton>
+          <TsButton icon="add" onClick={() => {}}>
+            Action 2
+          </TsButton>
+        </>
+      ),
+      breadcrumbs: (
+        <>
+        <TsNavigationBreadcrumbItem icon="home" onClick={() => {}}>
+          Home
+        </TsNavigationBreadcrumbItem>
+        <TsNavigationBreadcrumbDivider />
+        <TsNavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</TsNavigationBreadcrumbItem>
+        <TsNavigationBreadcrumbDivider />
+        <TsNavigationBreadcrumbItem highlight>Menu Item 2</TsNavigationBreadcrumbItem>
+        </>
+      )
+    }}
+
+>
+
+    {args => <TsNavigation {...args} />}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsNavigation} />

package/lib/utils/string.utils.d.ts

@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;

package/lib/utils/string.utils.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+exports.capitalize = capitalize;
+//# sourceMappingURL=string.utils.js.map

package/lib/utils/string.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":";;;AAAO,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAAvF,QAAA,UAAU,cAA6E"}