@dktunited-techoff/techoff-suite-ui 1.9.6 → 1.10.0

package/esm/components/TsTooltip/TsTooltip.css

@@ -0,0 +1,59 @@
+.ts-tooltip {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  color: #3643ba;
+}
+
+.ts-tooltip-container {
+  position: absolute;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #f3f4fa;
+  white-space: normal;
+  z-index: 10;
+}
+.ts-tooltip-container--bottom-right {
+  top: 24px;
+  left: 0;
+}
+.ts-tooltip-container--bottom-left {
+  top: 24px;
+  right: 0;
+}
+.ts-tooltip-container--left-bottom {
+  top: 0;
+  right: 24px;
+}
+.ts-tooltip-container--left-top {
+  bottom: 0;
+  right: 24px;
+}
+.ts-tooltip-container--top-left {
+  bottom: 24px;
+  right: 0;
+}
+.ts-tooltip-container--top-right {
+  bottom: 24px;
+  left: 0;
+}
+.ts-tooltip-container--right-top {
+  bottom: 0;
+  left: 24px;
+}
+.ts-tooltip-container--right-bottom {
+  top: 0;
+  left: 24px;
+}
+
+/* ######### */
+/* 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/components/TsTooltip/TsTooltip.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsTooltipProps } from './TsTooltip.types';
+import './TsTooltip.css';
+export declare const TsTooltip: ({ children, align, icon }: TsTooltipProps & PropsWithChildren) => React.JSX.Element;

package/esm/components/TsTooltip/TsTooltip.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsTooltip.css';
+export const TsTooltip = ({ children, align, icon = 'information-circle' }) => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-tooltip", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+        React.createElement(TsIcon, { name: icon }),
+        showTooltip && React.createElement("div", { className: `ts-tooltip-container ts-tooltip-container--${align}` }, children)));
+};
+//# sourceMappingURL=TsTooltip.js.map

package/esm/components/TsTooltip/TsTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsTooltip.js","sourceRoot":"","sources":["../../../src/components/TsTooltip/TsTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAG,oBAAoB,EAAsC,EAAE,EAAE;IAChH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7G,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI;QAErB,WAAW,IAAI,6BAAK,SAAS,EAAE,8CAA8C,KAAK,EAAE,IAAG,QAAQ,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsTooltip/TsTooltip.types.d.ts

@@ -0,0 +1,4 @@
+export type TsTooltipProps = {
+    align: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+    icon?: string;
+};

package/esm/components/TsTooltip/TsTooltip.types.js

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

package/esm/components/TsTooltip/TsTooltip.types.js.map

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

package/esm/components/TsTooltip/__stories__/TsTooltip.stories.mdx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsTooltip } from '../TsTooltip';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Tooltip" />
+
+export const tooltipArgTypes = {
+  children: { control: 'text', description: 'Child of the tooltip.' },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the tooltip.',
+    table: { defaultValue: { summary: 'information-circle' } },
+  },
+  align: {
+    control: 'select',
+    options: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+    description: 'Define the align of the content.',
+  },
+};
+
+# Tooltip
+
+Tooltip show a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording).
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ children: 'This is a tooltip', align: 'bottom-right' }} argTypes={tooltipArgTypes}>
+    {args => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px' }}>
+        <TsTooltip {...args}>{args.children}</TsTooltip>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTooltip} />

package/esm/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
+export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';

package/esm/index.js

@@ -8,6 +8,7 @@ export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
+export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';

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,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"}

package/lib/components/TsTooltip/TsTooltip.css

@@ -0,0 +1,59 @@
+.ts-tooltip {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  color: #3643ba;
+}
+
+.ts-tooltip-container {
+  position: absolute;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #f3f4fa;
+  white-space: normal;
+  z-index: 10;
+}
+.ts-tooltip-container--bottom-right {
+  top: 24px;
+  left: 0;
+}
+.ts-tooltip-container--bottom-left {
+  top: 24px;
+  right: 0;
+}
+.ts-tooltip-container--left-bottom {
+  top: 0;
+  right: 24px;
+}
+.ts-tooltip-container--left-top {
+  bottom: 0;
+  right: 24px;
+}
+.ts-tooltip-container--top-left {
+  bottom: 24px;
+  right: 0;
+}
+.ts-tooltip-container--top-right {
+  bottom: 24px;
+  left: 0;
+}
+.ts-tooltip-container--right-top {
+  bottom: 0;
+  left: 24px;
+}
+.ts-tooltip-container--right-bottom {
+  top: 0;
+  left: 24px;
+}
+
+/* ######### */
+/* 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/TsTooltip/TsTooltip.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { TsTooltipProps } from './TsTooltip.types';
+import './TsTooltip.css';
+export declare const TsTooltip: ({ children, align, icon }: TsTooltipProps & PropsWithChildren) => React.JSX.Element;

package/lib/components/TsTooltip/TsTooltip.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TsTooltip = void 0;
+const React = require("react");
+const react_1 = require("react");
+const TsIcon_1 = require("../TsIcon/TsIcon");
+require("./TsTooltip.css");
+const TsTooltip = ({ children, align, icon = 'information-circle' }) => {
+    const [showTooltip, setShowTooltip] = (0, react_1.useState)(false);
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-tooltip", onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+        React.createElement(TsIcon_1.TsIcon, { name: icon }),
+        showTooltip && React.createElement("div", { className: `ts-tooltip-container ts-tooltip-container--${align}` }, children)));
+};
+exports.TsTooltip = TsTooltip;
+//# sourceMappingURL=TsTooltip.js.map

package/lib/components/TsTooltip/TsTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsTooltip.js","sourceRoot":"","sources":["../../../src/components/TsTooltip/TsTooltip.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AAEpD,6CAA0C;AAC1C,2BAAyB;AAElB,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAG,oBAAoB,EAAsC,EAAE,EAAE;IAChH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE/D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7G,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,GAAI;QAErB,WAAW,IAAI,6BAAK,SAAS,EAAE,8CAA8C,KAAK,EAAE,IAAG,QAAQ,CAAO,CACnG,CACP,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,SAAS,aAYpB"}

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

@@ -0,0 +1,4 @@
+export type TsTooltipProps = {
+    align: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
+    icon?: string;
+};

package/lib/components/TsTooltip/TsTooltip.types.js

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

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

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsTooltip } from '../TsTooltip';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Tooltip" />
+
+export const tooltipArgTypes = {
+  children: { control: 'text', description: 'Child of the tooltip.' },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the tooltip.',
+    table: { defaultValue: { summary: 'information-circle' } },
+  },
+  align: {
+    control: 'select',
+    options: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+    description: 'Define the align of the content.',
+  },
+};
+
+# Tooltip
+
+Tooltip show a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording).
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ children: 'This is a tooltip', align: 'bottom-right' }} argTypes={tooltipArgTypes}>
+    {args => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px' }}>
+        <TsTooltip {...args}>{args.children}</TsTooltip>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTooltip} />

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
+export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';

package/lib/index.js

@@ -24,6 +24,7 @@ __exportStar(require("./components/TsInput/TsInput/TsInput"), exports);
 __exportStar(require("./components/TsLoader/TsLoader"), exports);
 __exportStar(require("./components/TsSwitcher/TsSwitcher"), exports);
 __exportStar(require("./components/TsTabs/TsTabs"), exports);
+__exportStar(require("./components/TsTooltip/TsTooltip"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeader"), exports);
 __exportStar(require("./layouts/TsHeader/TsHeaderProfile"), exports);
 __exportStar(require("./layouts/TsNavigation/TsNavigation"), exports);

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,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"}

package/package.json

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

package/src/components/TsTooltip/TsTooltip.css

@@ -0,0 +1,59 @@
+.ts-tooltip {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  color: #3643ba;
+}
+
+.ts-tooltip-container {
+  position: absolute;
+  width: max-content;
+  max-width: 300px;
+  padding: 8px 10px;
+  box-shadow: 0px 8px 9px 0px #1010101a;
+  background: #f3f4fa;
+  white-space: normal;
+  z-index: 10;
+}
+.ts-tooltip-container--bottom-right {
+  top: 24px;
+  left: 0;
+}
+.ts-tooltip-container--bottom-left {
+  top: 24px;
+  right: 0;
+}
+.ts-tooltip-container--left-bottom {
+  top: 0;
+  right: 24px;
+}
+.ts-tooltip-container--left-top {
+  bottom: 0;
+  right: 24px;
+}
+.ts-tooltip-container--top-left {
+  bottom: 24px;
+  right: 0;
+}
+.ts-tooltip-container--top-right {
+  bottom: 24px;
+  left: 0;
+}
+.ts-tooltip-container--right-top {
+  bottom: 0;
+  left: 24px;
+}
+.ts-tooltip-container--right-bottom {
+  top: 0;
+  left: 24px;
+}
+
+/* ######### */
+/* 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/components/TsTooltip/TsTooltip.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PropsWithChildren, useState } from 'react';
+import { TsTooltipProps } from './TsTooltip.types';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsTooltip.css';
+
+export const TsTooltip = ({ children, align, icon = 'information-circle' }: TsTooltipProps & PropsWithChildren) => {
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  // #########
+  // Rendering
+  return (
+    <div className="ts-tooltip" onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>
+      <TsIcon name={icon} />
+
+      {showTooltip && <div className={`ts-tooltip-container ts-tooltip-container--${align}`}>{children}</div>}
+    </div>
+  );
+};

package/src/components/TsTooltip/TsTooltip.types.ts

@@ -0,0 +1,12 @@
+export type TsTooltipProps = {
+  align:
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left-bottom'
+    | 'left-top'
+    | 'right-bottom'
+    | 'right-top';
+  icon?: string;
+};

package/src/components/TsTooltip/__stories__/TsTooltip.stories.mdx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsTooltip } from '../TsTooltip';
+import { icons } from '../../TsIcon/icons';
+
+<Meta title="Components/Tooltip" />
+
+export const tooltipArgTypes = {
+  children: { control: 'text', description: 'Child of the tooltip.' },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the tooltip.',
+    table: { defaultValue: { summary: 'information-circle' } },
+  },
+  align: {
+    control: 'select',
+    options: [
+      'top-left',
+      'top-right',
+      'bottom-left',
+      'bottom-right',
+      'left-bottom',
+      'left-top',
+      'right-bottom',
+      'right-top',
+    ],
+    description: 'Define the align of the content.',
+  },
+};
+
+# Tooltip
+
+Tooltip show a complementary information that will help the user better understand what he sees / reads (e.g. definition, explication concerning the UI / wording).
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ children: 'This is a tooltip', align: 'bottom-right' }} argTypes={tooltipArgTypes}>
+    {args => (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px' }}>
+        <TsTooltip {...args}>{args.children}</TsTooltip>
+      </div>
+    )}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTooltip} />

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './components/TsInput/TsInput/TsInput';
 export * from './components/TsLoader/TsLoader';
 export * from './components/TsSwitcher/TsSwitcher';
 export * from './components/TsTabs/TsTabs';
+export * from './components/TsTooltip/TsTooltip';
 export * from './layouts/TsHeader/TsHeader';
 export * from './layouts/TsHeader/TsHeaderProfile';
 export * from './layouts/TsNavigation/TsNavigation';