@dktunited-techoff/techoff-suite-ui 1.10.13 → 1.11.0

package/esm/index.d.ts

@@ -12,3 +12,4 @@ export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';
+export * from './layouts/TsSearchHeader/TsSearchHeader';

package/esm/index.js

@@ -12,4 +12,5 @@ export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';
+export * from './layouts/TsSearchHeader/TsSearchHeader';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oDAAoD,CAAC;AACnE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC"}

package/esm/layouts/TsSearchHeader/TsSearchHeader.css

@@ -0,0 +1,98 @@
+.ts-search-header {
+  position: relative;
+  width: 450px;
+  height: 32px;
+}
+
+.ts-search-header-input-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  border: none;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: white;
+}
+
+.ts-search-header-input-container-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 32px;
+  color: #687787;
+}
+
+.ts-search-header-bar-input {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  color: #8c96a2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ts-search-header-bar-input input {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.ts-search-header-bar-input input::placeholder {
+  text-align: center;
+}
+
+.ts-search-header-dropdown {
+  position: absolute;
+  top: 100%;
+  width: 450px;
+  max-height: 250px;
+  padding: 12px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: white;
+  transform: translateY(10px);
+  overflow: auto;
+}
+
+.ts-search-header-loader {
+  display: flex;
+  justify-content: center;
+}
+
+.ts-search-header-message {
+  text-align: center;
+  font-style: italic;
+  color: #4e5d6b;
+}
+
+.ts-search-header-items {
+  width: 100%;
+  height: 100%;
+}
+
+.ts-search-header-item {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  background: white;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ts-search-header-item:hover {
+  background: #ebecf7;
+}
+
+/* ######### */
+/* 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/esm/layouts/TsSearchHeader/TsSearchHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TsSearchHeaderProps, TsSearchHeaderItemProps } from './TsSearchHeader.types';
+import './TsSearchHeader.css';
+export declare const TsSearchHeaderItem: ({ id, label, onClick }: TsSearchHeaderItemProps) => React.JSX.Element;
+export declare const TsSearchHeader: ({ placeholder, noItemMessage, isLoading, value, items, onChange, }: TsSearchHeaderProps) => React.JSX.Element;

package/esm/layouts/TsSearchHeader/TsSearchHeader.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TsIcon } from '../../components/TsIcon/TsIcon';
+import { TsLoader } from '../../components/TsLoader/TsLoader';
+import './TsSearchHeader.css';
+export const TsSearchHeaderItem = ({ id, label, onClick }) => {
+    // Rendering
+    return (React.createElement("button", { className: "ts-search-header-item", id: id, onClick: onClick },
+        React.createElement("div", { className: "ts-search-header-item-label" }, label)));
+};
+export const TsSearchHeader = ({ placeholder, noItemMessage, isLoading, value, items, onChange, }) => {
+    // Rendering
+    return (React.createElement("div", { className: "ts-search-header" },
+        React.createElement("div", { className: "ts-search-header-input-container" },
+            React.createElement("div", { className: "ts-search-header-input-container-icon" },
+                React.createElement(TsIcon, { name: "search", size: "16" })),
+            React.createElement("div", { className: "ts-search-header-bar-input" },
+                React.createElement("input", { id: "search", name: "search", placeholder: placeholder, value: value, onChange: e => onChange(e.target.value) })),
+            React.createElement("div", { className: "ts-search-header-input-container-icon" })),
+        value && (React.createElement("div", { className: "ts-search-header-dropdown" },
+            isLoading && (React.createElement("div", { className: "ts-search-header-loader" },
+                React.createElement(TsLoader, { size: "sm" }))),
+            !isLoading && (!items || items.length === 0) && (React.createElement("div", { className: "ts-search-header-message" }, noItemMessage ?? 'No item found.')),
+            !isLoading && items && items.length > 0 && React.createElement("div", { className: "ts-search-header-items" }, items)))));
+};
+//# sourceMappingURL=TsSearchHeader.js.map

package/esm/layouts/TsSearchHeader/TsSearchHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsSearchHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsSearchHeader/TsSearchHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAA2B,EAAE,EAAE;IACpF,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO;QAChE,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnD,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,GACY,EAAE,EAAE;IACxB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9B;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,+BACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACvC,CACE;YACN,6BAAK,SAAS,EAAC,uCAAuC,GAAG,CACrD;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,2BAA2B;YACvC,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,oBAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,GAAG,CAClB,CACP;YACA,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAC/C,6BAAK,SAAS,EAAC,0BAA0B,IAAE,aAAa,IAAI,gBAAgB,CAAO,CACpF;YACA,CAAC,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAO,CAC7F,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/TsSearchHeader/TsSearchHeader.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+export type TsSearchHeaderItemProps = {
+    id: string;
+    label: string;
+    onClick?: () => void;
+};
+export type TsSearchHeaderProps = {
+    placeholder?: string;
+    noItemMessage?: string;
+    value: string;
+    isLoading?: boolean;
+    items?: ReactElement[];
+    onChange: (val: string) => void;
+};

package/esm/layouts/TsSearchHeader/TsSearchHeader.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsSearchHeader.types.js.map

package/esm/layouts/TsSearchHeader/TsSearchHeader.types.js.map

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

package/esm/layouts/TsSearchHeader/__stories__/TsSearchHeader.stories.mdx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsSearchHeader, TsSearchHeaderItem } from '../TsSearchHeader';
+
+<Meta title="Layouts/Search header" />
+
+# Search header
+
+Search allows users to specify a word or phrase to find relevant content without using navigation. Search can be used as the primary means of discovering content or as a filter to help the user find content.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      placeholder: "Search a product by name, by conception code",
+      noItemMessage: "",
+      value: "",
+      isLoading: false,
+      items: [
+        <TsSearchHeaderItem id="1" label="Item 1" />,
+        <TsSearchHeaderItem id="2" label="Item 2" />,
+        <TsSearchHeaderItem id="3" label="Item 3" />,
+        <TsSearchHeaderItem id="4" label="Item 4" />,
+      ],
+      onChange: () => undefined,
+    }}
+
+>
+
+    {args => <div style={{display: 'flex', width: '100%', height: '300px', justifyContent: 'center'}}><TsSearchHeader {...args} /></div>}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsSearchHeader} />

package/lib/index.d.ts

@@ -12,3 +12,4 @@ export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';
+export * from './layouts/TsSearchHeader/TsSearchHeader';

package/lib/index.js

@@ -28,4 +28,5 @@ __exportStar(require("./components/TsTooltip/TsTooltip"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeader"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeaderProfile"), exports);
 __exportStar(require("./layouts/TsNavigation/TsNavigation"), exports);
+__exportStar(require("./layouts/TsSearchHeader/TsSearchHeader"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,qEAAmD;AACnD,6DAA2C;AAC3C,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iEAA+C;AAC/C,qEAAmD;AACnD,iFAA+D;AAC/D,6FAA2E;AAC3E,6DAA2C;AAC3C,qFAAmE;AACnE,uEAAqD;AACrD,iEAA+C;AAC/C,qEAAmD;AACnD,6DAA2C;AAC3C,mEAAiD;AACjD,8DAA4C;AAC5C,qEAAmD;AACnD,sEAAoD;AACpD,0EAAwD"}

package/lib/layouts/TsSearchHeader/TsSearchHeader.css

@@ -0,0 +1,98 @@
+.ts-search-header {
+  position: relative;
+  width: 450px;
+  height: 32px;
+}
+
+.ts-search-header-input-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  border: none;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: white;
+}
+
+.ts-search-header-input-container-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 32px;
+  color: #687787;
+}
+
+.ts-search-header-bar-input {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  color: #8c96a2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ts-search-header-bar-input input {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.ts-search-header-bar-input input::placeholder {
+  text-align: center;
+}
+
+.ts-search-header-dropdown {
+  position: absolute;
+  top: 100%;
+  width: 450px;
+  max-height: 250px;
+  padding: 12px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: white;
+  transform: translateY(10px);
+  overflow: auto;
+}
+
+.ts-search-header-loader {
+  display: flex;
+  justify-content: center;
+}
+
+.ts-search-header-message {
+  text-align: center;
+  font-style: italic;
+  color: #4e5d6b;
+}
+
+.ts-search-header-items {
+  width: 100%;
+  height: 100%;
+}
+
+.ts-search-header-item {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  background: white;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ts-search-header-item:hover {
+  background: #ebecf7;
+}
+
+/* ######### */
+/* 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/TsSearchHeader/TsSearchHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TsSearchHeaderProps, TsSearchHeaderItemProps } from './TsSearchHeader.types';
+import './TsSearchHeader.css';
+export declare const TsSearchHeaderItem: ({ id, label, onClick }: TsSearchHeaderItemProps) => React.JSX.Element;
+export declare const TsSearchHeader: ({ placeholder, noItemMessage, isLoading, value, items, onChange, }: TsSearchHeaderProps) => React.JSX.Element;

package/lib/layouts/TsSearchHeader/TsSearchHeader.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsSearchHeader = exports.TsSearchHeaderItem = void 0;
+const React = require("react");
+const TsIcon_1 = require("../../components/TsIcon/TsIcon");
+const TsLoader_1 = require("../../components/TsLoader/TsLoader");
+require("./TsSearchHeader.css");
+const TsSearchHeaderItem = ({ id, label, onClick }) => {
+    // Rendering
+    return (React.createElement("button", { className: "ts-search-header-item", id: id, onClick: onClick },
+        React.createElement("div", { className: "ts-search-header-item-label" }, label)));
+};
+exports.TsSearchHeaderItem = TsSearchHeaderItem;
+const TsSearchHeader = ({ placeholder, noItemMessage, isLoading, value, items, onChange, }) => {
+    // Rendering
+    return (React.createElement("div", { className: "ts-search-header" },
+        React.createElement("div", { className: "ts-search-header-input-container" },
+            React.createElement("div", { className: "ts-search-header-input-container-icon" },
+                React.createElement(TsIcon_1.TsIcon, { name: "search", size: "16" })),
+            React.createElement("div", { className: "ts-search-header-bar-input" },
+                React.createElement("input", { id: "search", name: "search", placeholder: placeholder, value: value, onChange: e => onChange(e.target.value) })),
+            React.createElement("div", { className: "ts-search-header-input-container-icon" })),
+        value && (React.createElement("div", { className: "ts-search-header-dropdown" },
+            isLoading && (React.createElement("div", { className: "ts-search-header-loader" },
+                React.createElement(TsLoader_1.TsLoader, { size: "sm" }))),
+            !isLoading && (!items || items.length === 0) && (React.createElement("div", { className: "ts-search-header-message" }, noItemMessage ?? 'No item found.')),
+            !isLoading && items && items.length > 0 && React.createElement("div", { className: "ts-search-header-items" }, items)))));
+};
+exports.TsSearchHeader = TsSearchHeader;
+//# sourceMappingURL=TsSearchHeader.js.map

package/lib/layouts/TsSearchHeader/TsSearchHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsSearchHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsSearchHeader/TsSearchHeader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AACxD,iEAA8D;AAC9D,gCAA8B;AAEvB,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAA2B,EAAE,EAAE;IACpF,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO;QAChE,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnD,CACV,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,kBAAkB,sBAO7B;AAEK,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,GACY,EAAE,EAAE;IACxB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,oBAAC,eAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9B;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,+BACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACvC,CACE;YACN,6BAAK,SAAS,EAAC,uCAAuC,GAAG,CACrD;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,2BAA2B;YACvC,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,oBAAC,mBAAQ,IAAC,IAAI,EAAC,IAAI,GAAG,CAClB,CACP;YACA,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAC/C,6BAAK,SAAS,EAAC,0BAA0B,IAAE,aAAa,IAAI,gBAAgB,CAAO,CACpF;YACA,CAAC,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAO,CAC7F,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,cAAc,kBA0CzB"}

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+export type TsSearchHeaderItemProps = {
+    id: string;
+    label: string;
+    onClick?: () => void;
+};
+export type TsSearchHeaderProps = {
+    placeholder?: string;
+    noItemMessage?: string;
+    value: string;
+    isLoading?: boolean;
+    items?: ReactElement[];
+    onChange: (val: string) => void;
+};

package/lib/layouts/TsSearchHeader/TsSearchHeader.types.js

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

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

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

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsSearchHeader, TsSearchHeaderItem } from '../TsSearchHeader';
+
+<Meta title="Layouts/Search header" />
+
+# Search header
+
+Search allows users to specify a word or phrase to find relevant content without using navigation. Search can be used as the primary means of discovering content or as a filter to help the user find content.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      placeholder: "Search a product by name, by conception code",
+      noItemMessage: "",
+      value: "",
+      isLoading: false,
+      items: [
+        <TsSearchHeaderItem id="1" label="Item 1" />,
+        <TsSearchHeaderItem id="2" label="Item 2" />,
+        <TsSearchHeaderItem id="3" label="Item 3" />,
+        <TsSearchHeaderItem id="4" label="Item 4" />,
+      ],
+      onChange: () => undefined,
+    }}
+
+>
+
+    {args => <div style={{display: 'flex', width: '100%', height: '300px', justifyContent: 'center'}}><TsSearchHeader {...args} /></div>}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsSearchHeader} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "1.10.13",
+  "version": "1.11.0",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/index.ts

@@ -12,3 +12,4 @@ export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';
+export * from './layouts/TsSearchHeader/TsSearchHeader';

package/src/layouts/TsSearchHeader/TsSearchHeader.css

@@ -0,0 +1,98 @@
+.ts-search-header {
+  position: relative;
+  width: 450px;
+  height: 32px;
+}
+
+.ts-search-header-input-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border-radius: 9999px;
+  border: none;
+  box-shadow: 0px 12px 9px 0px #10101012;
+  background: white;
+}
+
+.ts-search-header-input-container-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 32px;
+  color: #687787;
+}
+
+.ts-search-header-bar-input {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  color: #8c96a2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ts-search-header-bar-input input {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.ts-search-header-bar-input input::placeholder {
+  text-align: center;
+}
+
+.ts-search-header-dropdown {
+  position: absolute;
+  top: 100%;
+  width: 450px;
+  max-height: 250px;
+  padding: 12px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: white;
+  transform: translateY(10px);
+  overflow: auto;
+}
+
+.ts-search-header-loader {
+  display: flex;
+  justify-content: center;
+}
+
+.ts-search-header-message {
+  text-align: center;
+  font-style: italic;
+  color: #4e5d6b;
+}
+
+.ts-search-header-items {
+  width: 100%;
+  height: 100%;
+}
+
+.ts-search-header-item {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  border: none;
+  background: white;
+  text-align: left;
+  cursor: pointer;
+}
+
+.ts-search-header-item:hover {
+  background: #ebecf7;
+}
+
+/* ######### */
+/* 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/src/layouts/TsSearchHeader/TsSearchHeader.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { TsSearchHeaderProps, TsSearchHeaderItemProps } from './TsSearchHeader.types';
+import { TsIcon } from '../../components/TsIcon/TsIcon';
+import { TsLoader } from '../../components/TsLoader/TsLoader';
+import './TsSearchHeader.css';
+
+export const TsSearchHeaderItem = ({ id, label, onClick }: TsSearchHeaderItemProps) => {
+  // Rendering
+  return (
+    <button className="ts-search-header-item" id={id} onClick={onClick}>
+      <div className="ts-search-header-item-label">{label}</div>
+    </button>
+  );
+};
+
+export const TsSearchHeader = ({
+  placeholder,
+  noItemMessage,
+  isLoading,
+  value,
+  items,
+  onChange,
+}: TsSearchHeaderProps) => {
+  // Rendering
+  return (
+    <div className="ts-search-header">
+      <div className="ts-search-header-input-container">
+        <div className="ts-search-header-input-container-icon">
+          <TsIcon name="search" size="16" />
+        </div>
+        <div className="ts-search-header-bar-input">
+          <input
+            id="search"
+            name="search"
+            placeholder={placeholder}
+            value={value}
+            onChange={e => onChange(e.target.value)}
+          />
+        </div>
+        <div className="ts-search-header-input-container-icon" />
+      </div>
+
+      {value && (
+        <div className="ts-search-header-dropdown">
+          {isLoading && (
+            <div className="ts-search-header-loader">
+              <TsLoader size="sm" />
+            </div>
+          )}
+          {!isLoading && (!items || items.length === 0) && (
+            <div className="ts-search-header-message">{noItemMessage ?? 'No item found.'}</div>
+          )}
+          {!isLoading && items && items.length > 0 && <div className="ts-search-header-items">{items}</div>}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/layouts/TsSearchHeader/TsSearchHeader.types.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+
+export type TsSearchHeaderItemProps = { id: string; label: string; onClick?: () => void };
+export type TsSearchHeaderProps = {
+  placeholder?: string;
+  noItemMessage?: string;
+  value: string;
+  isLoading?: boolean;
+  items?: ReactElement[];
+  onChange: (val: string) => void;
+};

package/src/layouts/TsSearchHeader/__stories__/TsSearchHeader.stories.mdx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsSearchHeader, TsSearchHeaderItem } from '../TsSearchHeader';
+
+<Meta title="Layouts/Search header" />
+
+# Search header
+
+Search allows users to specify a word or phrase to find relevant content without using navigation. Search can be used as the primary means of discovering content or as a filter to help the user find content.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      placeholder: "Search a product by name, by conception code",
+      noItemMessage: "",
+      value: "",
+      isLoading: false,
+      items: [
+        <TsSearchHeaderItem id="1" label="Item 1" />,
+        <TsSearchHeaderItem id="2" label="Item 2" />,
+        <TsSearchHeaderItem id="3" label="Item 3" />,
+        <TsSearchHeaderItem id="4" label="Item 4" />,
+      ],
+      onChange: () => undefined,
+    }}
+
+>
+
+    {args => <div style={{display: 'flex', width: '100%', height: '300px', justifyContent: 'center'}}><TsSearchHeader {...args} /></div>}
+
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsSearchHeader} />