@dktunited-techoff/techoff-suite-ui 0.8.0

package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { BooleanInput } from '../BooleanInput';
+
+<Meta title="Components/Inputs/BooleanInput" />
+
+export const inputArgType = {
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  labelFalse: {
+    control: 'text',
+    description: 'Label of the FALSE value.',
+  },
+  labelTrue: {
+    control: 'text',
+    description: 'Label of the TRUE value.',
+  },
+  value: {
+    control: 'boolean',
+    description: 'Value of the input (can be undefined).',
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when clicking on input.',
+  },
+};
+
+# Boolean Input
+
+The Boolean input is used to quickly switch between two possible states. It is commonly used for "yes/no" switches. The input can in some cases have a 3rd state, EMPTY.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
+    {args => <BooleanInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={BooleanInput} />

package/lib/components/Inputs/TextInput/TextInput.css

@@ -0,0 +1,42 @@
+.text-input {
+  display: flex;
+  flex-direction: column;
+}
+.text-input > label {
+  display: block;
+  margin-bottom: 4px;
+  color: #012b49;
+  font-weight: 700;
+}
+.text-input-container {
+  position: relative;
+}
+.text-input-container > input {
+  width: 100%;
+  height: 32px;
+  padding: 0 40px 0 12px;
+  border: 1px solid #d4d4d4;
+  border-radius: 6px;
+  color: #007dbc;
+  font-weight: 700;
+}
+.text-input-container > input::placeholder {
+  font-weight: 400;
+}
+.text-input-container > .icon {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  color: #4e5d6b;
+  transform: translateY(-50%);
+}
+
+/* ######### */
+/* 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/components/Inputs/TextInput/TextInput.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TextInputProps } from './TextInput.types';
+import './TextInput.css';
+export declare const TextInput: ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => React.JSX.Element;

package/lib/components/Inputs/TextInput/TextInput.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const React = require("react");
+const Icon_1 = require("../../Icon/Icon");
+require("./TextInput.css");
+const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }) => {
+    // ########
+    // Handlers
+    const handleChange = (e) => onChange(e.target.value);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "text-input" },
+        label && React.createElement("label", null, label),
+        React.createElement("div", { className: "text-input-container" },
+            React.createElement("input", { type: "text", placeholder: placeholder, value: value, autoFocus: autofocus, onChange: handleChange }),
+            icon && React.createElement(Icon_1.Icon, { name: icon, size: "16" }))));
+};
+exports.TextInput = TextInput;
+//# sourceMappingURL=TextInput.js.map

package/lib/components/Inputs/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,0CAAuC;AAEvC,2BAAyB;AAElB,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAkB,EAAE,EAAE;IACpG,WAAW;IACX,WAAW;IACX,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACxB,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,sBAAsB;YACnC,+BAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAI;YAC1G,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,SAAS,aAiBpB"}

package/lib/components/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ChangeEvent } from 'react';
+import { Icon } from '../../Icon/Icon';
+import { TextInputProps } from './TextInput.types';
+import './TextInput.css';
+
+export const TextInput = ({ icon, label, placeholder, value, autofocus, onChange }: TextInputProps) => {
+  // ########
+  // Handlers
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);
+
+  // #########
+  // Rendering
+  return (
+    <div className="text-input">
+      {label && <label>{label}</label>}
+
+      <div className="text-input-container">
+        <input type="text" placeholder={placeholder} value={value} autoFocus={autofocus} onChange={handleChange} />
+        {icon && <Icon name={icon} size="16" />}
+      </div>
+    </div>
+  );
+};

package/lib/components/Inputs/TextInput/TextInput.types.d.ts

@@ -0,0 +1,8 @@
+export type TextInputProps = {
+    icon?: string;
+    label?: string;
+    placeholder?: string;
+    value: string;
+    autofocus?: boolean;
+    onChange: (value: string) => void;
+};

package/lib/components/Inputs/TextInput/TextInput.types.js

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

package/lib/components/Inputs/TextInput/TextInput.types.js.map

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

package/lib/components/Inputs/TextInput/TextInput.types.ts

@@ -0,0 +1,8 @@
+export type TextInputProps = {
+  icon?: string;
+  label?: string;
+  placeholder?: string;
+  value: string;
+  autofocus?: boolean;
+  onChange: (value: string) => void;
+};

package/lib/components/Inputs/TextInput/__stories__/TextInput.stories.mdx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TextInput } from '../TextInput';
+import { icons } from '../../../Icon/icons';
+
+<Meta title="Components/Inputs/TextInput" />
+
+export const inputArgTypes = {
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Name of an icon.',
+  },
+  label: {
+    control: 'text',
+    description: 'Label of the input.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder displayed when the input is empty.',
+  },
+  value: {
+    control: 'text',
+    description: 'Value of the input.',
+  },
+  autofocus: {
+    control: 'boolean',
+    description: 'Auto focus the input once mounted',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when the value of the input changes.',
+  },
+};
+
+# Text Input
+
+Text input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{ label: 'Label', placeholder: 'This is a placeholder', autofocus: false, onChange: () => {} }}
+    argTypes={inputArgTypes}
+  >
+    {args => <TextInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TextInput} />

package/lib/components/Loader/Loader.css

@@ -0,0 +1,42 @@
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  border: 2px solid;
+  border-color: #00689d transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1.5s linear infinite;
+}
+
+/* ####### */
+/* SIZES   */
+.loader--sm {
+  width: 24px;
+  height: 24px;
+}
+.loader--md {
+  width: 32px;
+  height: 32px;
+}
+.loader--lg {
+  width: 44px;
+  height: 44px;
+}
+
+/* ######### */
+/* 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/components/Loader/Loader.d.ts

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

package/lib/components/Loader/Loader.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const React = require("react");
+require("./Loader.css");
+const Loader = ({ size = 'md' }) => {
+    return React.createElement("div", { className: `loader loader--${size}` });
+};
+exports.Loader = Loader;
+//# sourceMappingURL=Loader.js.map

package/lib/components/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAe,EAAE,EAAE;IACrD,OAAO,6BAAK,SAAS,EAAE,kBAAkB,IAAI,EAAE,GAAI,CAAC;AACtD,CAAC,CAAC;AAFW,QAAA,MAAM,UAEjB"}

package/lib/components/Loader/Loader.types.d.ts

@@ -0,0 +1,3 @@
+export type LoaderProps = {
+    size?: 'sm' | 'md' | 'lg';
+};

package/lib/components/Loader/Loader.types.js

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

package/lib/components/Loader/Loader.types.js.map

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

package/lib/components/Loader/__stories__/Loader.stories.mdx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Loader } from '../Loader';
+
+<Meta title="Components/Loader" />
+
+export const loaderArgTypes = {
+  size: {
+    control: 'inline-radio',
+    options: ['sm', 'md', 'lg'],
+    description: 'Define the size of the loader.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ size: 'md' }} argTypes={loaderArgTypes}>
+    {args => <Loader {...args}>{args.children}</Loader>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Loader} />

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components/Button/Button';
+export * from './components/Icon/Icon';
+export * from './layouts/Header/Header';
+export * from './layouts/Header/HeaderActions';
+export * from './layouts/Header/HeaderProfile';
+export * from './layouts/Header/HeaderTitle';
+export * from './layouts/Navigation/Navigation';
+export * from './layouts/Navigation/NavigationActions';
+export * from './layouts/Navigation/NavigationBreadcrumb';

package/lib/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/Button/Button"), exports);
+__exportStar(require("./components/Icon/Icon"), exports);
+__exportStar(require("./layouts/Header/Header"), exports);
+__exportStar(require("./layouts/Header/HeaderActions"), exports);
+__exportStar(require("./layouts/Header/HeaderProfile"), exports);
+__exportStar(require("./layouts/Header/HeaderTitle"), exports);
+__exportStar(require("./layouts/Navigation/Navigation"), exports);
+__exportStar(require("./layouts/Navigation/NavigationActions"), exports);
+__exportStar(require("./layouts/Navigation/NavigationBreadcrumb"), exports);
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6DAA2C;AAC3C,yDAAuC;AAEvC,0DAAwC;AACxC,iEAA+C;AAC/C,iEAA+C;AAC/C,+DAA6C;AAC7C,kEAAgD;AAChD,yEAAuD;AACvD,4EAA0D"}

package/lib/layouts/Header/Header.css

@@ -0,0 +1,83 @@
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../assets/fonts/Montserrat-Medium.ttf');
+}
+
+/* ######## */
+/* HEADER   */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  padding: 0 24px;
+}
+.header-actions {
+  display: flex;
+}
+.header-actions > * {
+  margin-left: 12px;
+}
+
+/* ############## */
+/* HEADER TITLE   */
+.header-title-container {
+  display: flex;
+  align-items: flex-end;
+  height: 30px;
+}
+.header-title {
+  font-family: 'Montserrat';
+  font-size: 25px;
+  line-height: 19px;
+  text-transform: uppercase;
+}
+.header-by {
+  margin-left: 15px;
+  font-family: 'Montserrat';
+  font-size: 12px;
+  line-height: 10px;
+  text-transform: uppercase;
+}
+.header-techoff {
+  width: 64px;
+  margin-left: 4px;
+  margin-bottom: -2px;
+}
+
+/* ################ */
+/* HEADER PROFILE   */
+.header-profile {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 4px;
+  border-radius: 9999px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background: white;
+}
+.header-profile--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background: #e5e5e5;
+}
+.header-profile--name {
+  padding-left: 8px;
+  padding-right: 12px;
+  color: #4e5d6b;
+}
+
+/* ######### */
+/* 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/Header/Header.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import './Header.css';
+export declare const Header: ({ children }: PropsWithChildren) => React.JSX.Element;

package/lib/layouts/Header/Header.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const React = require("react");
+const react_1 = require("react");
+const validator_utils_1 = require("../../utils/validator.utils");
+require("./Header.css");
+const Header = ({ children }) => {
+    const titleElement = react_1.Children.toArray(children).find(c => (0, validator_utils_1.isSuiteElement)(c, 'HeaderTitle'));
+    const actionsElement = react_1.Children.toArray(children).find(c => (0, validator_utils_1.isSuiteElement)(c, 'HeaderActions'));
+    // #########
+    // Rendering
+    return (React.createElement("header", null,
+        React.createElement("div", null, titleElement),
+        React.createElement("div", null, actionsElement)));
+};
+exports.Header = Header;
+//# sourceMappingURL=Header.js.map

package/lib/layouts/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,iEAA6D;AAC7D,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACxD,MAAM,YAAY,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC5F,MAAM,cAAc,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,gCAAc,EAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,iCAAM,YAAY,CAAO;QACzB,iCAAM,cAAc,CAAO,CACpB,CACV,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,MAAM,UAYjB"}

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

@@ -0,0 +1,4 @@
+export type HeaderProfileProps = {
+    firstname: string;
+    lastname: string;
+};

package/lib/layouts/Header/Header.types.js

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

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

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

package/lib/layouts/Header/HeaderActions.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+export declare const HeaderActions: ({ children }: PropsWithChildren) => React.JSX.Element;

package/lib/layouts/Header/HeaderActions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderActions = void 0;
+const React = require("react");
+const HeaderActions = ({ children }) => {
+    // #########
+    // Rendering
+    return React.createElement("div", { className: "header-actions" }, children);
+};
+exports.HeaderActions = HeaderActions;
+//# sourceMappingURL=HeaderActions.js.map

package/lib/layouts/Header/HeaderActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActions.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderActions.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAGxB,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC/D,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AAC1D,CAAC,CAAC;AAJW,QAAA,aAAa,iBAIxB"}

package/lib/layouts/Header/HeaderProfile.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { HeaderProfileProps } from './Header.types';
+export declare const HeaderProfile: ({ firstname, lastname }: HeaderProfileProps) => React.JSX.Element;

package/lib/layouts/Header/HeaderProfile.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderProfile = void 0;
+const React = require("react");
+const Icon_1 = require("../../components/Icon/Icon");
+const string_utils_1 = require("../../utils/string.utils");
+const HeaderProfile = ({ firstname, lastname }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "header-profile" },
+        React.createElement("div", { className: "header-profile--icon" },
+            React.createElement(Icon_1.Icon, { name: "user", size: "16" })),
+        React.createElement("div", { className: "header-profile--name" },
+            (0, string_utils_1.capitalize)(firstname),
+            " ",
+            lastname.charAt(0).toUpperCase(),
+            ".")));
+};
+exports.HeaderProfile = HeaderProfile;
+//# sourceMappingURL=HeaderProfile.js.map

package/lib/layouts/Header/HeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,qDAAkD;AAClD,2DAAsD;AAG/C,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,6BAAK,SAAS,EAAC,sBAAsB;YACnC,oBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B;QAEN,6BAAK,SAAS,EAAC,sBAAsB;YAClC,IAAA,yBAAU,EAAC,SAAS,CAAC;;YAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;gBACrD,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,aAAa,iBAcxB"}

package/lib/layouts/Header/HeaderTitle.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+export declare const HeaderTitle: ({ children }: PropsWithChildren) => React.JSX.Element;

package/lib/layouts/Header/HeaderTitle.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderTitle = void 0;
+const React = require("react");
+const svg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 335 62.6" style="enable-background:new 0 0 335 62.6;" xml:space="preserve"><style type="text/css">	.st0{fill:#0883C4;}	.st1{fill:#FFFFFF;}</style><path d="M126.2,24.4c-3.1-3.3-7.4-5.3-12.4-5.3c-9.2,0-16,6.8-16,16.1c0,9.3,6.7,16.2,16,16.2c5.3,0,9.6-2.4,12.6-6l8.1,7.3	c-5.4,6.5-12.1,9.8-20.7,9.8C98,62.6,86.4,51,86.4,35.3C86.4,19.5,98,8,113.8,8c8.2,0,15.4,3,20.3,8.5L126.2,24.4z"/><polygon points="46.8,9.5 80.3,9.5 80.3,19.9 58,19.9 58,30.8 77.3,30.8 77.3,40.9 58,40.9 58,52.1 80.3,52.1 80.3,62.6 46.8,62.6 	"/><polygon points="265.4,8.7 297,8.7 297,19.2 276.6,19.2 276.6,32.6 294,32.6 294,42.8 276.6,42.8 276.6,61.8 265.4,61.8 "/><polygon points="303.4,8.7 335,8.7 335,19.2 314.6,19.2 314.6,32.6 332,32.6 332,42.8 314.6,42.8 314.6,61.8 303.4,61.8 "/><polygon points="174.5,40.1 152,40.1 152,61.8 140.8,61.8 140.8,8.7 152,8.7 152,29.2 174.5,29.2 174.5,8.7 185.7,8.7 185.7,61.8 	174.5,61.8 "/><polygon points="0,9.5 40.3,9.5 40.3,20.4 25.8,20.4 25.8,62.6 14.6,62.6 14.6,20.4 0,20.4 "/><polyline points="188.4,15.9 198.6,0 209.9,0 199.7,15.9 188.4,15.9 "/><path d="M231.7,8c-15.8,0-27.4,11.5-27.4,27.3c0,15.8,11.6,27.3,27.4,27.3c15.7,0,27.2-11.5,27.2-27.3C258.9,19.5,247.4,8,231.7,8z"	/><polygon class="st0" points="208,36.3 243.1,15.9 243,56.6 "/><polygon class="st1" points="231.1,56.7 230.6,37.4 214.2,47.6 "/></svg>';
+const HeaderTitle = ({ children }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "header-title-container" },
+        React.createElement("div", { className: "header-title" }, children),
+        React.createElement("div", { className: "header-by" }, "BY"),
+        React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: svg } })));
+};
+exports.HeaderTitle = HeaderTitle;
+//# sourceMappingURL=HeaderTitle.js.map

package/lib/layouts/Header/HeaderTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderTitle.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderTitle.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAG/B,MAAM,GAAG,GACP,wjDAAwjD,CAAC;AAEpjD,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,6BAAK,SAAS,EAAC,cAAc,IAAE,QAAQ,CAAO;QAC9C,6BAAK,SAAS,EAAC,WAAW,SAAS;QACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CACxE,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,WAAW,eAUtB"}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Header } from '../Header';
+import { HeaderActions } from '../HeaderActions';
+import { HeaderTitle } from '../HeaderTitle';
+import { HeaderProfile } from '../HeaderProfile';
+import { Button } from '../../../components/Button/Button';
+
+<Meta title="Layouts/Header" />
+
+# 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={{
+      children: [
+        <HeaderTitle>Techoff Suite UI</HeaderTitle>,
+        <HeaderActions>
+          <Button icon="plus" size="lg" variant="shadow" rounded onClick={() => {}} />
+          <HeaderProfile firstname="John" lastname="Doe" />
+        </HeaderActions>,
+      ],
+    }}
+  >
+    {args => <Header>{args.children}</Header>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Header} />