@ftdata/ui 0.0.17 → 0.0.18

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 (12) hide show
  1. package/dist/components/Input/index.d.ts +1 -0
  2. package/dist/components/Input/index.js +12 -26
  3. package/dist/components/Input/styles.js +1 -1
  4. package/dist/components/Select/index.d.ts +2 -1
  5. package/dist/components/Select/index.js +12 -24
  6. package/dist/components/Select/styles.js +1 -1
  7. package/dist/components/fields/components/HelpText/index.js +18 -13
  8. package/dist/components/fields/components/HelpText/modifiers/colors.js +2 -2
  9. package/dist/components/fields/components/HelpText/styles.js +5 -0
  10. package/dist/components/fields/components/Label/index.js +1 -1
  11. package/dist/components/fields/components/Label/styles.js +11 -4
  12. package/package.json +3 -3
package/dist/components/Input/index.d.ts CHANGED
@@ -10,5 +10,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
10
10
  textField?: string;
11
11
  margin?: string;
12
12
  required?: boolean;
13
+ sublabel?: string;
13
14
  }
14
15
  export declare const Input: React.FC<InputProps>;
package/dist/components/Input/index.js CHANGED
@@ -1,18 +1,17 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import "react";
3
- import { Container, DivIcon, HelpText, InputContainer, InputControl, StyledLabel } from "./styles.js";
3
+ import { Container, DivIcon, InputContainer, InputControl } from "./styles.js";
4
4
  import { Icon } from "@ftdata/f-icons";
5
- const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, ...rest })=>/*#__PURE__*/ jsxs(Container, {
5
+ import Label from "../fields/components/Label/index.js";
6
+ import HelpText from "../fields/components/HelpText/index.js";
7
+ const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, sublabel, ...rest })=>/*#__PURE__*/ jsxs(Container, {
6
8
  margin: margin,
7
9
  children: [
8
- textField && /*#__PURE__*/ jsxs(StyledLabel, {
9
- htmlFor: name,
10
- children: [
11
- textField,
12
- required && /*#__PURE__*/ jsx("span", {
13
- children: "*"
14
- })
15
- ]
10
+ textField && /*#__PURE__*/ jsx(Label, {
11
+ text: textField,
12
+ subtext: sublabel,
13
+ required: required,
14
+ htmlFor: name
16
15
  }),
17
16
  /*#__PURE__*/ jsxs(InputContainer, {
18
17
  width: width,
@@ -35,22 +34,9 @@ const Input = ({ disabled, error, helpText, name, success, width, icon, textFiel
35
34
  })
36
35
  ]
37
36
  }),
38
- helpText && /*#__PURE__*/ jsxs(HelpText, {
39
- disabled: disabled,
40
- error: error,
41
- success: success,
42
- children: [
43
- error && /*#__PURE__*/ jsx("div", {
44
- children: /*#__PURE__*/ jsx(Icon, {
45
- name: "ui warning-circle",
46
- size: "1rem",
47
- color: "currentColor"
48
- })
49
- }),
50
- /*#__PURE__*/ jsx("span", {
51
- children: helpText
52
- })
53
- ]
37
+ helpText && /*#__PURE__*/ jsx(HelpText, {
38
+ text: helpText,
39
+ feedback: error ? "danger" : success ? "success" : "info"
54
40
  })
55
41
  ]
56
42
  });
package/dist/components/Input/styles.js CHANGED
@@ -18,6 +18,7 @@ const TextField = styled_components.span`
18
18
  `;
19
19
  const Container = styled_components.div`
20
20
  display: flex;
21
+ gap: 0.5rem;
21
22
  flex-direction: column;
22
23
  box-sizing: border-box;
23
24
  margin: ${({ margin })=>margin};
@@ -79,7 +80,6 @@ const HelpText = styled_components.div`
79
80
  color: ${({ error, success })=>error ? COLOR_DANGER_MEDIUM : success ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
80
81
  display: flex;
81
82
  gap: 0.25rem;
82
- margin-top: 0.5rem;
83
83
 
84
84
  div {
85
85
  height: 1rem;
package/dist/components/Select/index.d.ts CHANGED
@@ -29,7 +29,8 @@ export interface SelectProps extends InputPropsWithoutOnToggle {
29
29
  onLoadMore?: () => Promise<void>;
30
30
  onToggle?: (open: boolean) => void;
31
31
  dropdownPosition?: "top" | "bottom";
32
+ sublabel?: string;
32
33
  }
33
- export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
34
+ export default function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation, selected, setSelected, onLoadMore, onToggle, dropdownPosition, sublabel, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
34
35
  export declare const normalizeOptions: (options: ISelectOption[]) => ISelectOption[];
35
36
  export {};
package/dist/components/Select/index.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useRef, useState } from "react";
3
- import { CavetButton, HelpText, IconContainer, InputWrapper, SelectContainer, StyledInput, StyledLabel } from "./styles.js";
3
+ import { CavetButton, IconContainer, InputWrapper, SelectContainer, StyledInput } from "./styles.js";
4
4
  import { Icon } from "@ftdata/f-icons";
5
5
  import List from "./List/index.js";
6
- function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, dropdownPosition, ...rest }) {
6
+ import Label from "../fields/components/Label/index.js";
7
+ import HelpText from "../fields/components/HelpText/index.js";
8
+ function Select({ helpText, isError, isSuccess, label, name, isRequired, options, placeholder, icon, isLoading, search, t, variation = "default", selected, setSelected, onLoadMore, onToggle, dropdownPosition, sublabel, ...rest }) {
7
9
  const [showList, setShowList] = useState(false);
8
10
  const [currentValue, setCurrentValue] = useState("");
9
11
  const [filtered, setFiltered] = useState([]);
@@ -118,15 +120,11 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
118
120
  onClick: handleClick,
119
121
  ref: selectRef,
120
122
  children: [
121
- /*#__PURE__*/ jsxs(StyledLabel, {
122
- htmlFor: name,
123
- isRequired: isRequired,
124
- children: [
125
- label,
126
- isRequired && /*#__PURE__*/ jsx("span", {
127
- children: "*"
128
- })
129
- ]
123
+ label && /*#__PURE__*/ jsx(Label, {
124
+ text: label,
125
+ subtext: sublabel,
126
+ required: isRequired,
127
+ htmlFor: name
130
128
  }),
131
129
  /*#__PURE__*/ jsxs(InputWrapper, {
132
130
  children: [
@@ -173,19 +171,9 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
173
171
  })
174
172
  ]
175
173
  }),
176
- helpText && /*#__PURE__*/ jsxs(HelpText, {
177
- isError: isError,
178
- isSuccess: isSuccess,
179
- children: [
180
- isError && /*#__PURE__*/ jsx(Icon, {
181
- name: "ui warning-circle",
182
- size: "1rem",
183
- color: "currentColor"
184
- }),
185
- /*#__PURE__*/ jsx("span", {
186
- children: helpText
187
- })
188
- ]
174
+ helpText && /*#__PURE__*/ jsx(HelpText, {
175
+ text: helpText,
176
+ feedback: isError ? "danger" : isSuccess ? "success" : "info"
189
177
  })
190
178
  ]
191
179
  });
package/dist/components/Select/styles.js CHANGED
@@ -2,6 +2,7 @@ import styled_components from "styled-components";
2
2
  import { COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM } from "@ftdata/f-tokens";
3
3
  const SelectContainer = styled_components.div`
4
4
  display: flex;
5
+ gap: 0.5rem;
5
6
  flex-direction: column;
6
7
  `;
7
8
  const StyledLabel = styled_components.label`
@@ -68,7 +69,6 @@ const HelpText = styled_components.div`
68
69
  color: ${({ isError, isSuccess })=>isError ? COLOR_DANGER_MEDIUM : isSuccess ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
69
70
  display: flex;
70
71
  gap: 0.25rem;
71
- margin-top: 0.5rem;
72
72
 
73
73
  span {
74
74
  font-size: 0.875rem;
package/dist/components/fields/components/HelpText/index.js CHANGED
@@ -1,31 +1,36 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Icon } from "@ftdata/f-icons";
3
3
  import { HelpTextContainer } from "./styles.js";
4
4
  const DEFAULT_ICONS = {
5
5
  danger: "ui info-information",
6
- success: "ui done-check-checkmark",
6
+ success: "ui done-check",
7
7
  warning: "ui warning-triangle"
8
8
  };
9
9
  const getFeedbackIcon = (feedback)=>{
10
10
  if ("info" === feedback || "disabled" === feedback || !feedback) return;
11
- return /*#__PURE__*/ jsx(Icon, {
12
- name: DEFAULT_ICONS[feedback],
13
- color: "currentColor",
14
- size: "1rem",
15
- weight: "2.5"
11
+ return /*#__PURE__*/ jsx("div", {
12
+ children: /*#__PURE__*/ jsx(Icon, {
13
+ name: DEFAULT_ICONS[feedback],
14
+ color: "currentColor",
15
+ size: "1rem",
16
+ weight: "2.5"
17
+ })
16
18
  });
17
19
  };
18
20
  function HelpText({ feedback, text, icon }) {
19
21
  return /*#__PURE__*/ jsxs(HelpTextContainer, {
20
22
  feedback: feedback,
21
23
  children: [
22
- icon && /*#__PURE__*/ jsx(Icon, {
23
- name: icon,
24
- color: "currentColor",
25
- size: "1rem"
24
+ !icon && /*#__PURE__*/ jsx(Fragment, {
25
+ children: getFeedbackIcon(feedback)
26
+ }),
27
+ icon && /*#__PURE__*/ jsx("div", {
28
+ children: /*#__PURE__*/ jsx(Icon, {
29
+ name: icon,
30
+ color: "currentColor",
31
+ size: "1rem"
32
+ })
26
33
  }),
27
- " ",
28
- !icon && getFeedbackIcon(feedback),
29
34
  /*#__PURE__*/ jsx("span", {
30
35
  children: text
31
36
  })
package/dist/components/fields/components/HelpText/modifiers/colors.js CHANGED
@@ -1,9 +1,9 @@
1
- import { COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
1
+ import { COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, COLOR_WARNING_MEDIUM } from "@ftdata/f-tokens";
2
2
  const HELP_TEXT_COLOR_MODIFIER = {
3
3
  danger: COLOR_DANGER_MEDIUM,
4
4
  warning: COLOR_WARNING_MEDIUM,
5
5
  success: COLOR_SUCCESS_MEDIUM,
6
- info: COLOR_NEUTRAL_DUSK,
6
+ info: COLOR_NEUTRAL_DARK,
7
7
  disabled: COLOR_NEUTRAL_MEDIUM
8
8
  };
9
9
  export { HELP_TEXT_COLOR_MODIFIER };
package/dist/components/fields/components/HelpText/styles.js CHANGED
@@ -7,6 +7,11 @@ const HelpTextContainer = styled_components.div`
7
7
  color: ${({ feedback = "info" })=>HELP_TEXT_COLOR_MODIFIER[feedback]};
8
8
  transition: all 0.18s ease;
9
9
 
10
+ div {
11
+ width: 1rem;
12
+ height: 1rem;
13
+ }
14
+
10
15
  span {
11
16
  font-size: 0.875rem;
12
17
  line-height: 1.25rem;
package/dist/components/fields/components/Label/index.js CHANGED
@@ -12,7 +12,7 @@ function Label({ text, subtext, required, htmlFor }) {
12
12
  subtext && /*#__PURE__*/ jsx("span", {
13
13
  children: subtext
14
14
  }),
15
- required && /*#__PURE__*/ jsx("span", {
15
+ required && /*#__PURE__*/ jsx("strong", {
16
16
  children: "*"
17
17
  })
18
18
  ]
package/dist/components/fields/components/Label/styles.js CHANGED
@@ -13,16 +13,23 @@ const LabelContainer = styled_components.div`
13
13
  font-weight: ${FONT_WEIGHT_BOLD};
14
14
  line-height: 1rem;
15
15
  white-space: normal;
16
- word-wrap: break-word;
17
- overflow-wrap: break-word;
18
16
  }
19
17
 
20
- span {
18
+ span,
19
+ strong {
21
20
  margin-left: ${({ required })=>required ? "0" : "0.5rem"};
22
- color: ${({ required })=>required ? COLOR_DANGER_MEDIUM : COLOR_NEUTRAL_DARK};
21
+ color: ${COLOR_NEUTRAL_DARK};
23
22
  font-size: 0.875rem;
24
23
  font-weight: ${FONT_WEIGHT_BOLD};
25
24
  line-height: 1rem;
26
25
  }
26
+
27
+ span {
28
+ margin-left: 0.25rem;
29
+ }
30
+
31
+ strong {
32
+ color: ${COLOR_DANGER_MEDIUM};
33
+ }
27
34
  `;
28
35
  export { LabelContainer };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ftdata/ui",
3
- "version": "0.0.17",
3
+ "version": "0.0.18",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -31,8 +31,8 @@
31
31
  "react-input-mask-next": "3.0.0-alpha.12",
32
32
  "react-select": "^5.10.2",
33
33
  "react-window": "^2.0.2",
34
- "@ftdata/f-tokens": "0.0.1",
35
- "@ftdata/f-icons": "0.0.6"
34
+ "@ftdata/f-icons": "0.0.6",
35
+ "@ftdata/f-tokens": "0.0.1"
36
36
  },
37
37
  "publishConfig": {
38
38
  "access": "public"