@dktunited-techoff/techoff-suite-ui 1.7.9 → 1.7.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/esm/components/TsDropdown/TsDropdown.css +8 -1
  2. package/esm/components/TsInput/TsInput/TsInput.css +19 -0
  3. package/esm/components/TsInput/TsInput/TsInput.d.ts +1 -1
  4. package/esm/components/TsInput/TsInput/TsInput.js +5 -2
  5. package/esm/components/TsInput/TsInput/TsInput.js.map +1 -1
  6. package/esm/components/TsInput/TsInput/TsInput.tsx +5 -2
  7. package/esm/components/TsInput/TsInput/TsInput.types.d.ts +1 -0
  8. package/esm/components/TsInput/TsInput/TsInput.types.tsx +1 -0
  9. package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
  10. package/lib/components/TsDropdown/TsDropdown.css +8 -1
  11. package/lib/components/TsInput/TsInput/TsInput.css +19 -0
  12. package/lib/components/TsInput/TsInput/TsInput.d.ts +1 -1
  13. package/lib/components/TsInput/TsInput/TsInput.js +5 -2
  14. package/lib/components/TsInput/TsInput/TsInput.js.map +1 -1
  15. package/lib/components/TsInput/TsInput/TsInput.tsx +5 -2
  16. package/lib/components/TsInput/TsInput/TsInput.types.d.ts +1 -0
  17. package/lib/components/TsInput/TsInput/TsInput.types.tsx +1 -0
  18. package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
  19. package/package.json +1 -1
  20. package/src/components/TsDropdown/TsDropdown.css +8 -1
  21. package/src/components/TsInput/TsInput/TsInput.css +19 -0
  22. package/src/components/TsInput/TsInput/TsInput.tsx +5 -2
  23. package/src/components/TsInput/TsInput/TsInput.types.tsx +1 -0
  24. package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx +5 -0
package/esm/components/TsDropdown/TsDropdown.css CHANGED
@@ -19,10 +19,16 @@
19
19
  flex: 1;
20
20
  color: #7a7a7a;
21
21
  font-weight: 400;
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
22
25
  }
23
26
  .ts-dropdown-input--value {
24
27
  flex: 1;
25
28
  font-weight: 600;
29
+ overflow: hidden;
30
+ text-overflow: ellipsis;
31
+ white-space: nowrap;
26
32
  }
27
33
  .ts-dropdown-input--chevron {
28
34
  display: flex;
@@ -58,7 +64,8 @@
58
64
  top: 60px;
59
65
  display: flex;
60
66
  flex-direction: column;
61
- min-width: 100%;
67
+ width: 100%;
68
+ min-width: 220px;
62
69
  max-height: 250px;
63
70
  padding: 12px;
64
71
  box-shadow: 0px 8px 9px 0px #1010101a;
package/esm/components/TsInput/TsInput/TsInput.css CHANGED
@@ -42,6 +42,9 @@ input:focus {
42
42
  .ts-input--padding-1 input {
43
43
  padding: 0 30px 0 10px;
44
44
  }
45
+ .ts-input--padding-2 input {
46
+ padding: 0 100px 0 10px;
47
+ }
45
48
  /* ####### */
46
49
  /* LABEL */
47
50
  .ts-input-label {
@@ -61,6 +64,22 @@ input:focus {
61
64
  height: 32px;
62
65
  color: #949494;
63
66
  }
67
+ /* ################ */
68
+ /* BY DEFAULT TAG */
69
+ .ts-input-tag {
70
+ position: absolute;
71
+ top: 4px;
72
+ right: 4px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ height: 24px;
77
+ padding: 0 8px;
78
+ background: #ebecf7;
79
+ color: #3643ba;
80
+ font-weight: 400;
81
+ font-size: 12px;
82
+ }
64
83
 
65
84
  /* ######### */
66
85
  /* GLOBALS */
package/esm/components/TsInput/TsInput/TsInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsInputProps } from './TsInput.types';
3
3
  import './TsInput.css';
4
- export declare const TsInput: ({ error, icon, label, value, onChange, ...props }: TsInputProps) => React.JSX.Element;
4
+ export declare const TsInput: ({ byDefault, error, icon, label, value, onChange, ...props }: TsInputProps) => React.JSX.Element;
package/esm/components/TsInput/TsInput/TsInput.js CHANGED
@@ -1,13 +1,16 @@
1
1
  import * as React from 'react';
2
2
  import { TsIcon } from '../../TsIcon/TsIcon';
3
3
  import './TsInput.css';
4
- export const TsInput = ({ error, icon, label, value, onChange, ...props }) => {
4
+ export const TsInput = ({ byDefault, error, icon, label, value, onChange, ...props }) => {
5
5
  // #########
6
6
  // Rendering
7
- return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
7
+ return (React.createElement("div", { className: `ts-input ${byDefault ? 'ts-input--padding-2' : icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
8
8
  label && React.createElement("div", { className: "ts-input-label" }, label),
9
9
  React.createElement("div", { className: `ts-input-container ${error && error !== '' ? 'ts-input-container--error' : ''}` },
10
10
  React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
11
+ byDefault && React.createElement("div", { className: "ts-input-tag" },
12
+ byDefault,
13
+ " by default"),
11
14
  icon && (React.createElement("div", { className: "ts-input-icon" },
12
15
  React.createElement(TsIcon, { name: icon, size: "16" })))),
13
16
  error && error !== '' && (React.createElement("div", { className: "ts-input-error" },
package/esm/components/TsInput/TsInput/TsInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACzF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9F,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,KAAK,KAAK,EAAE,IAAI,CACxB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACpG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE,YAAY,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAEhH,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9F,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,SAAS,IAAI,6BAAK,SAAS,EAAC,cAAc;gBAAE,SAAS;8BAAkB;YACvE,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,KAAK,KAAK,EAAE,IAAI,CACxB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,MAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -3,14 +3,17 @@ import { TsIcon } from '../../TsIcon/TsIcon';
3
3
  import { TsInputProps } from './TsInput.types';
4
4
  import './TsInput.css';
5
5
 
6
- export const TsInput = ({ error, icon, label, value, onChange, ...props }: TsInputProps) => {
6
+ export const TsInput = ({ byDefault, error, icon, label, value, onChange, ...props }: TsInputProps) => {
7
7
  // #########
8
8
  // Rendering
9
9
  return (
10
- <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
10
+ <div
11
+ className={`ts-input ${byDefault ? 'ts-input--padding-2' : icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}
12
+ >
11
13
  {label && <div className="ts-input-label">{label}</div>}
12
14
  <div className={`ts-input-container ${error && error !== '' ? 'ts-input-container--error' : ''}`}>
13
15
  <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
16
+ {byDefault && <div className="ts-input-tag">{byDefault} by default</div>}
14
17
  {icon && (
15
18
  <div className="ts-input-icon">
16
19
  <TsIcon name={icon} size="16" />
package/esm/components/TsInput/TsInput/TsInput.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  export type TsInputProps = {
3
+ byDefault?: string | number;
3
4
  error?: string;
4
5
  icon?: string;
5
6
  label?: string;
package/esm/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
3
  export type TsInputProps = {
4
+ byDefault?: string | number;
4
5
  error?: string;
5
6
  icon?: string;
6
7
  label?: string;
package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -6,6 +6,10 @@ import { icons } from '../../../TsIcon/icons';
6
6
  <Meta title="Components/Input" />
7
7
 
8
8
  export const inputArgTypes = {
9
+ byDefault: {
10
+ control: 'text',
11
+ description: 'Add "by default" tag.',
12
+ },
9
13
  error: {
10
14
  control: 'text',
11
15
  description: 'Error of the input.',
@@ -52,6 +56,7 @@ Input allows the user to enter content and data when the expected user input is
52
56
  <Story
53
57
  name="Overview"
54
58
  args={{
59
+ byDefault: '',
55
60
  error: '',
56
61
  icon: '',
57
62
  label: 'Label',
package/lib/components/TsDropdown/TsDropdown.css CHANGED
@@ -19,10 +19,16 @@
19
19
  flex: 1;
20
20
  color: #7a7a7a;
21
21
  font-weight: 400;
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
22
25
  }
23
26
  .ts-dropdown-input--value {
24
27
  flex: 1;
25
28
  font-weight: 600;
29
+ overflow: hidden;
30
+ text-overflow: ellipsis;
31
+ white-space: nowrap;
26
32
  }
27
33
  .ts-dropdown-input--chevron {
28
34
  display: flex;
@@ -58,7 +64,8 @@
58
64
  top: 60px;
59
65
  display: flex;
60
66
  flex-direction: column;
61
- min-width: 100%;
67
+ width: 100%;
68
+ min-width: 220px;
62
69
  max-height: 250px;
63
70
  padding: 12px;
64
71
  box-shadow: 0px 8px 9px 0px #1010101a;
package/lib/components/TsInput/TsInput/TsInput.css CHANGED
@@ -42,6 +42,9 @@ input:focus {
42
42
  .ts-input--padding-1 input {
43
43
  padding: 0 30px 0 10px;
44
44
  }
45
+ .ts-input--padding-2 input {
46
+ padding: 0 100px 0 10px;
47
+ }
45
48
  /* ####### */
46
49
  /* LABEL */
47
50
  .ts-input-label {
@@ -61,6 +64,22 @@ input:focus {
61
64
  height: 32px;
62
65
  color: #949494;
63
66
  }
67
+ /* ################ */
68
+ /* BY DEFAULT TAG */
69
+ .ts-input-tag {
70
+ position: absolute;
71
+ top: 4px;
72
+ right: 4px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ height: 24px;
77
+ padding: 0 8px;
78
+ background: #ebecf7;
79
+ color: #3643ba;
80
+ font-weight: 400;
81
+ font-size: 12px;
82
+ }
64
83
 
65
84
  /* ######### */
66
85
  /* GLOBALS */
package/lib/components/TsInput/TsInput/TsInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { TsInputProps } from './TsInput.types';
3
3
  import './TsInput.css';
4
- export declare const TsInput: ({ error, icon, label, value, onChange, ...props }: TsInputProps) => React.JSX.Element;
4
+ export declare const TsInput: ({ byDefault, error, icon, label, value, onChange, ...props }: TsInputProps) => React.JSX.Element;
package/lib/components/TsInput/TsInput/TsInput.js CHANGED
@@ -4,13 +4,16 @@ exports.TsInput = void 0;
4
4
  const React = require("react");
5
5
  const TsIcon_1 = require("../../TsIcon/TsIcon");
6
6
  require("./TsInput.css");
7
- const TsInput = ({ error, icon, label, value, onChange, ...props }) => {
7
+ const TsInput = ({ byDefault, error, icon, label, value, onChange, ...props }) => {
8
8
  // #########
9
9
  // Rendering
10
- return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
10
+ return (React.createElement("div", { className: `ts-input ${byDefault ? 'ts-input--padding-2' : icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
11
11
  label && React.createElement("div", { className: "ts-input-label" }, label),
12
12
  React.createElement("div", { className: `ts-input-container ${error && error !== '' ? 'ts-input-container--error' : ''}` },
13
13
  React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
14
+ byDefault && React.createElement("div", { className: "ts-input-tag" },
15
+ byDefault,
16
+ " by default"),
14
17
  icon && (React.createElement("div", { className: "ts-input-icon" },
15
18
  React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })))),
16
19
  error && error !== '' && (React.createElement("div", { className: "ts-input-error" },
package/lib/components/TsInput/TsInput/TsInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACzF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9F,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,KAAK,KAAK,EAAE,IAAI,CACxB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,eAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,OAAO,WAyBlB"}
1
+ {"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACpG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE,YAAY,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAEhH,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAAE;YAC9F,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,SAAS,IAAI,6BAAK,SAAS,EAAC,cAAc;gBAAE,SAAS;8BAAkB;YACvE,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG;QAEL,KAAK,IAAI,KAAK,KAAK,EAAE,IAAI,CACxB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,sBAAsB;gBACnC,oBAAC,eAAM,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,CACpC;YACN,6BAAK,SAAS,EAAC,uBAAuB,IAAE,KAAK,CAAO,CAChD,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,OAAO,WA4BlB"}
package/lib/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -3,14 +3,17 @@ import { TsIcon } from '../../TsIcon/TsIcon';
3
3
  import { TsInputProps } from './TsInput.types';
4
4
  import './TsInput.css';
5
5
 
6
- export const TsInput = ({ error, icon, label, value, onChange, ...props }: TsInputProps) => {
6
+ export const TsInput = ({ byDefault, error, icon, label, value, onChange, ...props }: TsInputProps) => {
7
7
  // #########
8
8
  // Rendering
9
9
  return (
10
- <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
10
+ <div
11
+ className={`ts-input ${byDefault ? 'ts-input--padding-2' : icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}
12
+ >
11
13
  {label && <div className="ts-input-label">{label}</div>}
12
14
  <div className={`ts-input-container ${error && error !== '' ? 'ts-input-container--error' : ''}`}>
13
15
  <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
16
+ {byDefault && <div className="ts-input-tag">{byDefault} by default</div>}
14
17
  {icon && (
15
18
  <div className="ts-input-icon">
16
19
  <TsIcon name={icon} size="16" />
package/lib/components/TsInput/TsInput/TsInput.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  export type TsInputProps = {
3
+ byDefault?: string | number;
3
4
  error?: string;
4
5
  icon?: string;
5
6
  label?: string;
package/lib/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
3
  export type TsInputProps = {
4
+ byDefault?: string | number;
4
5
  error?: string;
5
6
  icon?: string;
6
7
  label?: string;
package/lib/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -6,6 +6,10 @@ import { icons } from '../../../TsIcon/icons';
6
6
  <Meta title="Components/Input" />
7
7
 
8
8
  export const inputArgTypes = {
9
+ byDefault: {
10
+ control: 'text',
11
+ description: 'Add "by default" tag.',
12
+ },
9
13
  error: {
10
14
  control: 'text',
11
15
  description: 'Error of the input.',
@@ -52,6 +56,7 @@ Input allows the user to enter content and data when the expected user input is
52
56
  <Story
53
57
  name="Overview"
54
58
  args={{
59
+ byDefault: '',
55
60
  error: '',
56
61
  icon: '',
57
62
  label: 'Label',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.7.9",
3
+ "version": "1.7.11",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsDropdown/TsDropdown.css CHANGED
@@ -19,10 +19,16 @@
19
19
  flex: 1;
20
20
  color: #7a7a7a;
21
21
  font-weight: 400;
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
22
25
  }
23
26
  .ts-dropdown-input--value {
24
27
  flex: 1;
25
28
  font-weight: 600;
29
+ overflow: hidden;
30
+ text-overflow: ellipsis;
31
+ white-space: nowrap;
26
32
  }
27
33
  .ts-dropdown-input--chevron {
28
34
  display: flex;
@@ -58,7 +64,8 @@
58
64
  top: 60px;
59
65
  display: flex;
60
66
  flex-direction: column;
61
- min-width: 100%;
67
+ width: 100%;
68
+ min-width: 220px;
62
69
  max-height: 250px;
63
70
  padding: 12px;
64
71
  box-shadow: 0px 8px 9px 0px #1010101a;
package/src/components/TsInput/TsInput/TsInput.css CHANGED
@@ -42,6 +42,9 @@ input:focus {
42
42
  .ts-input--padding-1 input {
43
43
  padding: 0 30px 0 10px;
44
44
  }
45
+ .ts-input--padding-2 input {
46
+ padding: 0 100px 0 10px;
47
+ }
45
48
  /* ####### */
46
49
  /* LABEL */
47
50
  .ts-input-label {
@@ -61,6 +64,22 @@ input:focus {
61
64
  height: 32px;
62
65
  color: #949494;
63
66
  }
67
+ /* ################ */
68
+ /* BY DEFAULT TAG */
69
+ .ts-input-tag {
70
+ position: absolute;
71
+ top: 4px;
72
+ right: 4px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ height: 24px;
77
+ padding: 0 8px;
78
+ background: #ebecf7;
79
+ color: #3643ba;
80
+ font-weight: 400;
81
+ font-size: 12px;
82
+ }
64
83
 
65
84
  /* ######### */
66
85
  /* GLOBALS */
package/src/components/TsInput/TsInput/TsInput.tsx CHANGED
@@ -3,14 +3,17 @@ import { TsIcon } from '../../TsIcon/TsIcon';
3
3
  import { TsInputProps } from './TsInput.types';
4
4
  import './TsInput.css';
5
5
 
6
- export const TsInput = ({ error, icon, label, value, onChange, ...props }: TsInputProps) => {
6
+ export const TsInput = ({ byDefault, error, icon, label, value, onChange, ...props }: TsInputProps) => {
7
7
  // #########
8
8
  // Rendering
9
9
  return (
10
- <div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
10
+ <div
11
+ className={`ts-input ${byDefault ? 'ts-input--padding-2' : icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}
12
+ >
11
13
  {label && <div className="ts-input-label">{label}</div>}
12
14
  <div className={`ts-input-container ${error && error !== '' ? 'ts-input-container--error' : ''}`}>
13
15
  <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
16
+ {byDefault && <div className="ts-input-tag">{byDefault} by default</div>}
14
17
  {icon && (
15
18
  <div className="ts-input-icon">
16
19
  <TsIcon name={icon} size="16" />
package/src/components/TsInput/TsInput/TsInput.types.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
 
3
3
  export type TsInputProps = {
4
+ byDefault?: string | number;
4
5
  error?: string;
5
6
  icon?: string;
6
7
  label?: string;
package/src/components/TsInput/TsInput/__stories__/TsInput.stories.mdx CHANGED
@@ -6,6 +6,10 @@ import { icons } from '../../../TsIcon/icons';
6
6
  <Meta title="Components/Input" />
7
7
 
8
8
  export const inputArgTypes = {
9
+ byDefault: {
10
+ control: 'text',
11
+ description: 'Add "by default" tag.',
12
+ },
9
13
  error: {
10
14
  control: 'text',
11
15
  description: 'Error of the input.',
@@ -52,6 +56,7 @@ Input allows the user to enter content and data when the expected user input is
52
56
  <Story
53
57
  name="Overview"
54
58
  args={{
59
+ byDefault: '',
55
60
  error: '',
56
61
  icon: '',
57
62
  label: 'Label',