@scality/core-ui 0.172.0 → 0.174.0

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 (15) hide show
  1. package/dist/components/inputv2/inputv2.d.ts +5 -0
  2. package/dist/components/inputv2/inputv2.d.ts.map +1 -1
  3. package/dist/components/inputv2/inputv2.js +3 -3
  4. package/dist/components/searchinput/SearchInput.component.d.ts +4 -0
  5. package/dist/components/searchinput/SearchInput.component.d.ts.map +1 -1
  6. package/dist/components/searchinput/SearchInput.component.js +2 -2
  7. package/dist/next.d.ts +1 -0
  8. package/dist/next.d.ts.map +1 -1
  9. package/dist/next.js +1 -0
  10. package/package.json +1 -1
  11. package/src/lib/components/inputv2/inputv2.tsx +13 -4
  12. package/src/lib/components/searchinput/SearchInput.component.tsx +9 -2
  13. package/src/lib/next.ts +1 -0
  14. package/stories/SearchInput/searchinput.stories.tsx +74 -0
  15. package/stories/icons.mdx +0 -115
package/dist/components/inputv2/inputv2.d.ts CHANGED
@@ -1,19 +1,24 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  import { IconName } from '../icon/Icon.component';
3
+ import { CoreUITheme } from '../../style/theme';
3
4
  export declare const convertSizeToRem: (size?: "1" | "2/3" | "1/2" | "1/3") => "14rem" | "6rem" | "10rem" | "20.5rem";
4
5
  export type InputSize = '1' | '2/3' | '1/2' | '1/3';
5
6
  export type InputProps = {
6
7
  error?: string;
7
8
  id: string;
8
9
  leftIcon?: IconName;
10
+ leftIconColor?: keyof CoreUITheme;
9
11
  rightIcon?: IconName;
12
+ rightIconColor?: keyof CoreUITheme;
10
13
  size?: InputSize;
11
14
  } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
12
15
  export declare const Input: import("react").ForwardRefExoticComponent<{
13
16
  error?: string;
14
17
  id: string;
15
18
  leftIcon?: IconName;
19
+ leftIconColor?: keyof CoreUITheme;
16
20
  rightIcon?: IconName;
21
+ rightIconColor?: keyof CoreUITheme;
17
22
  size?: InputSize;
18
23
  } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
19
24
  //# sourceMappingURL=inputv2.d.ts.map
package/dist/components/inputv2/inputv2.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAwFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;YAPR,MAAM;QACV,MAAM;eACC,QAAQ;gBACP,QAAQ;WACb,SAAS;0GAmDjB,CAAC"}
1
+ {"version":3,"file":"inputv2.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputv2/inputv2.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,gBAAgB,UAAW,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,2CAKlE,CAAC;AAwFF,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEpD,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,WAAW,CAAC;IAClC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,WAAW,CAAC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,KAAK;YATR,MAAM;QACV,MAAM;eACC,QAAQ;oBACH,MAAM,WAAW;gBACrB,QAAQ;qBACH,MAAM,WAAW;WAC3B,SAAS;0GAyDjB,CAAC"}
package/dist/components/inputv2/inputv2.js CHANGED
@@ -81,10 +81,10 @@ const InputBorder = styled.div `
81
81
  `;
82
82
  const SelfCenterredIcon = styled(Icon) `
83
83
  align-self: center;
84
- color: ${(props) => props.theme.textSecondary};
84
+ color: ${(props) => props.theme[props.color]};
85
85
  `;
86
- export const Input = forwardRef(({ error, disabled, id, leftIcon, rightIcon, placeholder, size, ...inputProps }, ref) => {
86
+ export const Input = forwardRef(({ error, disabled, id, leftIcon, leftIconColor = 'textSecondary', rightIcon, rightIconColor = 'textSecondary', placeholder, size, ...inputProps }, ref) => {
87
87
  const { isContextAvailable, disabled: disabledFromFieldContext, error: errorFromFieldContext, } = useFieldContext();
88
88
  placeholder = placeholder ? `Example: ${placeholder}` : undefined;
89
- return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsxs(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: [leftIcon && _jsx(SelfCenterredIcon, { name: leftIcon }), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, hasIcon: !!(leftIcon || rightIcon), id: id, ...inputProps, placeholder: placeholder }), rightIcon && _jsx(SelfCenterredIcon, { name: rightIcon })] }) }));
89
+ return (_jsx(InputBorder, { disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), width: convertSizeToRem(size), children: _jsxs(InputContainer, { isContextAvailable: isContextAvailable, disabled: !!(disabled || disabledFromFieldContext), hasError: !!(error || errorFromFieldContext), children: [leftIcon && (_jsx(SelfCenterredIcon, { name: leftIcon, color: leftIconColor })), _jsx(StyledInput, { ref: ref, disabled: disabled || disabledFromFieldContext, "aria-invalid": !!(error || errorFromFieldContext), "aria-describedby": `${DESCRIPTION_PREFIX}${id}`, hasIcon: !!(leftIcon || rightIcon), id: id, ...inputProps, placeholder: placeholder }), rightIcon && (_jsx(SelfCenterredIcon, { name: rightIcon, color: rightIconColor }))] }) }));
90
90
  });
package/dist/components/searchinput/SearchInput.component.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { ChangeEvent } from 'react';
2
+ import { IconName } from '../icon/Icon.component';
2
3
  import { InputSize } from '../inputv2/inputv2';
4
+ import { CoreUITheme } from '../../style/theme';
3
5
  export type Props = {
4
6
  placeholder?: string;
5
7
  value: string;
@@ -9,6 +11,8 @@ export type Props = {
9
11
  id?: string;
10
12
  size?: InputSize;
11
13
  autoComplete?: 'on' | 'off';
14
+ searchIcon?: IconName;
15
+ searchIconColor?: keyof CoreUITheme;
12
16
  };
13
17
  declare const SearchInput: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
14
18
  export { SearchInput };
package/dist/components/searchinput/SearchInput.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;CAC7B,CAAC;AAuCF,QAAA,MAAM,WAAW,2FAuFhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"SearchInput.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/searchinput/SearchInput.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA2C,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAC5B,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,WAAW,CAAC;CACrC,CAAC;AAuCF,QAAA,MAAM,WAAW,2FA0FhB,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
package/dist/components/searchinput/SearchInput.component.js CHANGED
@@ -38,7 +38,7 @@ const ClearButton = styled.div `
38
38
  right: 1px;
39
39
  top: 0px;
40
40
  `;
41
- const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', ...rest }, forwardedRef) => {
41
+ const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disabled, id, size, autoComplete = 'on', searchIcon = 'Search', searchIconColor = 'textSecondary', ...rest }, forwardedRef) => {
42
42
  const myInputRef = useRef(null);
43
43
  const debounce = useRef(null);
44
44
  const [debouncedValue, setDebouncedValue] = useState(value);
@@ -64,7 +64,7 @@ const SearchInput = forwardRef(({ placeholder, value, onChange, onReset, disable
64
64
  onChange(e);
65
65
  }, 300);
66
66
  };
67
- return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { autoComplete: autoComplete, min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: "Search", className: "search-box", disabled: disabled, ref: (element) => {
67
+ return (_jsxs(SearchInputContainer, { className: "sc-searchinput", disabled: disabled, ...rest, children: [_jsx(Input, { autoComplete: autoComplete, min: '1', id: id || 'search', type: "search", "aria-label": "search", name: "search", placeholder: placeholder, value: debouncedValue, onChange: handleChange, onReset: reset, size: size, leftIcon: searchIcon, leftIconColor: searchIconColor, className: "search-box", disabled: disabled, ref: (element) => {
68
68
  myInputRef.current = element;
69
69
  if (typeof forwardedRef === 'function') {
70
70
  forwardedRef(element);
package/dist/next.d.ts CHANGED
@@ -21,4 +21,5 @@ export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseri
21
21
  export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charttooltip/ChartTooltip';
22
22
  export { CoreUITheme } from './style/theme';
23
23
  export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
24
+ export { Sparkline } from './components/sparkline/sparkline.component';
24
25
  //# sourceMappingURL=next.d.ts.map
package/dist/next.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC"}
1
+ {"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC"}
package/dist/next.js CHANGED
@@ -20,3 +20,4 @@ export { ChartLegend } from './components/chartlegend/ChartLegend';
20
20
  export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
21
21
  export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charttooltip/ChartTooltip';
22
22
  export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
23
+ export { Sparkline } from './components/sparkline/sparkline.component';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.172.0",
3
+ "version": "0.174.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/lib/components/inputv2/inputv2.tsx CHANGED
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
3
3
  import { spacing } from '../../spacing';
4
4
  import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
5
5
  import { Icon, IconName } from '../icon/Icon.component';
6
+ import { CoreUITheme } from '../../style/theme';
6
7
 
7
8
  export const convertSizeToRem = (size?: '1' | '2/3' | '1/2' | '1/3') => {
8
9
  if (size === '2/3') return '14rem';
@@ -92,9 +93,9 @@ const InputBorder = styled.div<{
92
93
  }
93
94
  `;
94
95
 
95
- const SelfCenterredIcon = styled(Icon)`
96
+ const SelfCenterredIcon = styled(Icon)<{ color: keyof CoreUITheme }>`
96
97
  align-self: center;
97
- color: ${(props) => props.theme.textSecondary};
98
+ color: ${(props) => props.theme[props.color]};
98
99
  `;
99
100
 
100
101
  export type InputSize = '1' | '2/3' | '1/2' | '1/3';
@@ -103,7 +104,9 @@ export type InputProps = {
103
104
  error?: string;
104
105
  id: string;
105
106
  leftIcon?: IconName;
107
+ leftIconColor?: keyof CoreUITheme;
106
108
  rightIcon?: IconName;
109
+ rightIconColor?: keyof CoreUITheme;
107
110
  size?: InputSize;
108
111
  } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
109
112
 
@@ -114,7 +117,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
114
117
  disabled,
115
118
  id,
116
119
  leftIcon,
120
+ leftIconColor = 'textSecondary',
117
121
  rightIcon,
122
+ rightIconColor = 'textSecondary',
118
123
  placeholder,
119
124
  size,
120
125
  ...inputProps
@@ -139,7 +144,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
139
144
  disabled={!!(disabled || disabledFromFieldContext)}
140
145
  hasError={!!(error || errorFromFieldContext)}
141
146
  >
142
- {leftIcon && <SelfCenterredIcon name={leftIcon} />}
147
+ {leftIcon && (
148
+ <SelfCenterredIcon name={leftIcon} color={leftIconColor} />
149
+ )}
143
150
  <StyledInput
144
151
  ref={ref}
145
152
  disabled={disabled || disabledFromFieldContext}
@@ -150,7 +157,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
150
157
  {...inputProps}
151
158
  placeholder={placeholder}
152
159
  />
153
- {rightIcon && <SelfCenterredIcon name={rightIcon} />}
160
+ {rightIcon && (
161
+ <SelfCenterredIcon name={rightIcon} color={rightIconColor} />
162
+ )}
154
163
  </InputContainer>
155
164
  </InputBorder>
156
165
  );
package/src/lib/components/searchinput/SearchInput.component.tsx CHANGED
@@ -1,9 +1,11 @@
1
1
  import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react';
2
2
  import styled, { css } from 'styled-components';
3
- import { Icon } from '../icon/Icon.component';
3
+ import { Icon, IconName } from '../icon/Icon.component';
4
4
  import { Input, InputSize } from '../inputv2/inputv2';
5
5
  import { Button } from '../buttonv2/Buttonv2.component';
6
6
  import { spacing } from '../../spacing';
7
+ import { CoreUITheme } from '../../style/theme';
8
+
7
9
  export type Props = {
8
10
  placeholder?: string;
9
11
  value: string;
@@ -13,6 +15,8 @@ export type Props = {
13
15
  id?: string;
14
16
  size?: InputSize;
15
17
  autoComplete?: 'on' | 'off';
18
+ searchIcon?: IconName;
19
+ searchIconColor?: keyof CoreUITheme;
16
20
  };
17
21
  const SearchInputContainer = styled.div<{
18
22
  docked?: boolean;
@@ -63,6 +67,8 @@ const SearchInput = forwardRef(
63
67
  id,
64
68
  size,
65
69
  autoComplete = 'on',
70
+ searchIcon = 'Search',
71
+ searchIconColor = 'textSecondary',
66
72
  ...rest
67
73
  }: Props,
68
74
  forwardedRef,
@@ -115,7 +121,8 @@ const SearchInput = forwardRef(
115
121
  onChange={handleChange}
116
122
  onReset={reset}
117
123
  size={size}
118
- leftIcon="Search"
124
+ leftIcon={searchIcon}
125
+ leftIconColor={searchIconColor}
119
126
  className="search-box"
120
127
  disabled={disabled}
121
128
  ref={(element) => {
package/src/lib/next.ts CHANGED
@@ -36,3 +36,4 @@ export {
36
36
  } from './components/charttooltip/ChartTooltip';
37
37
  export { CoreUITheme } from './style/theme';
38
38
  export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
39
+ export { Sparkline } from './components/sparkline/sparkline.component';
package/stories/SearchInput/searchinput.stories.tsx CHANGED
@@ -97,3 +97,77 @@ export const Debounce = {
97
97
  );
98
98
  },
99
99
  };
100
+
101
+ export const WithCustomIconColor = {
102
+ render: (args) => {
103
+ const [value, setValue] = useState('');
104
+ return (
105
+ <Wrapper>
106
+ <Title>SearchInput with Custom Icon Colors</Title>
107
+ <div
108
+ style={{
109
+ width: '250px',
110
+ marginBottom: '20px',
111
+ }}
112
+ >
113
+ <SearchInput
114
+ placeholder="Primary color..."
115
+ value={value}
116
+ onChange={(e) => {
117
+ setValue(e.target.value);
118
+ action('on input change')(e.target.value);
119
+ }}
120
+ onReset={() => {
121
+ setValue('');
122
+ action('on input reset')();
123
+ }}
124
+ searchIconColor="infoPrimary"
125
+ {...args}
126
+ />
127
+ </div>
128
+ <div
129
+ style={{
130
+ width: '250px',
131
+ marginBottom: '20px',
132
+ }}
133
+ >
134
+ <SearchInput
135
+ placeholder="Success color..."
136
+ value={value}
137
+ onChange={(e) => {
138
+ setValue(e.target.value);
139
+ action('on input change')(e.target.value);
140
+ }}
141
+ onReset={() => {
142
+ setValue('');
143
+ action('on input reset')();
144
+ }}
145
+ searchIconColor="statusHealthy"
146
+ {...args}
147
+ />
148
+ </div>
149
+ <div
150
+ style={{
151
+ width: '250px',
152
+ marginBottom: '20px',
153
+ }}
154
+ >
155
+ <SearchInput
156
+ placeholder="Warning color..."
157
+ value={value}
158
+ onChange={(e) => {
159
+ setValue(e.target.value);
160
+ action('on input change')(e.target.value);
161
+ }}
162
+ onReset={() => {
163
+ setValue('');
164
+ action('on input reset')();
165
+ }}
166
+ searchIconColor="statusWarning"
167
+ {...args}
168
+ />
169
+ </div>
170
+ </Wrapper>
171
+ );
172
+ },
173
+ };
package/stories/icons.mdx DELETED
@@ -1,115 +0,0 @@
1
- import ImageFile from './pictures/icon-design-system.png';
2
- import { Meta } from '@storybook/addon-docs';
3
- import { Icon } from '../src/lib/components/icon/Icon.component';
4
- import { QueryClientProvider, QueryClient } from 'react-query';
5
-
6
- <Meta title="Style/Icons" />
7
-
8
- # Icons
9
-
10
- ## Style
11
-
12
- Icon style should be consistent.
13
- The style is rather outlined.
14
- If two options are possible when choosing an icon, choose the simpler one.
15
-
16
- <img src={ImageFile} />
17
-
18
- ## Size
19
-
20
- When next to a text, the icon and the text should have the same size.
21
-
22
- ## Icon set table
23
-
24
- | Icons | Name | Category | Origin | FontAwesome name | FontAwesome code | Icon Style & Prefix | FA free | Use case |
25
- | :----------------------------------------------------------------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- |
26
- | <i className="fas fa-wallet fa-3x" /> | Account | Entities | FA | wallet | `<i className="fas fa-wallet" />` | solid Style (fas) | yes | Hero |
27
- | <i className="fas fa-network-wired fa-3x" /> | Backend | Entities | FA | network-wired | `<i className="fas fa-network-wired" />` | solid Style (fas) | yes | Hero |
28
- | <i className="fas fa-tape fa-3x" /> | Tape | Entities | FA | tape | `<i className="fas fa-tape" />` | solid Style (fas) | yes | Hero |
29
- | <i className="fas fa-server fa-3x" /> | Node-backend | Entities | FA | server | `<i className="fas fa-server" />` | solid Style (fas) | yes | Hero |
30
- | <i className="fas fa-hdd fa-3x" /> | Volume-backend | Entities | FA | hdd | `<i className="fas fa-hdd" />` | solid Style (fas) | yes | Hero |
31
- | <i className="fas fa-database fa-3x" /> | Node-ptf | Entities | FA | database | `<i className="fas fa-database" />` | solid Style (fas) | yes | Hero |
32
- | <i className="fas fa-compact-disc fa-3x" /> | Volume-ptf | Entities | FA | compact-disc | `<i className="fas fa-compact-disc" />` | solid Style (fas) | yes | Hero |
33
- | <i className="fas fa-project-diagram fa-3x" /> | Network | Entities | FA | project-diagram | `<i className="fas fa-project-diagram" />` | solid Style (fas) | yes | Hero |
34
- | <i className="fas fa-glass-whiskey fa-3x" /> | Bucket | Entities | FA | glass-whiskey | `<i className="fas fa-glass-whiskey" />` | solid Style (fas) | yes | Hero |
35
- | <i className="fas fa-cloud fa-3x" /> | Cloud-backend | Entities | FA | cloud | `<i className="fas fa-cloud" />` | solid Style (fas) | yes | Hero |
36
- | <i className="fas fa-warehouse fa-3x" /> | Datacenter | Entities | FA | warehouse | `<i className="fas fa-warehouse" />` | solid Style (fas) | yes | Hero |
37
- | <i className="fas fa-user-cog fa-3x" /> | User | Menu | FA | user-cog | `<i className="fas fa-user-cog" />` | solid Style (fas) | yes | Top navbar |
38
- | <i className="fas fa-bell fa-3x" /> | Alert | Menu | FA | bell | `<i className="fas fa-bell" />` | solid Style (fas) | yes | |
39
- | <i className="fas fa-bars fa-3x" /> | Lat-menu | Menu | FA | bars | `<i className="fas fa-bars" />` | solid Style (fas) | yes | Expanded version of lat navbar |
40
- | <i className="fas fa-desktop fa-3x" /> | Dashboard | Menu | FA | desktop | `<i className="fas fa-desktop" />` | solid Style (fas) | yes | |
41
- | <i className="fas fa-stopwatch fa-3x" /> | Expiration | Workflow | FA | stopwatch | `<i className="fas fa-stopwatch" />` | solid Style (fas) | yes | |
42
- | <i className="fas fa-coins fa-3x" /> | Replication | Workflow | FA | coins | `<i className="fas fa-coins" />` | solid Style (fas) | yes | |
43
- | <i className="fas fa-rocket fa-3x" /> | Transition | Workflow | FA | rocket | `<i className="fas fa-rocket" />` | solid Style (fas) | yes | |
44
- | <i className="fas fa-reply fa-3x" /> | Discovery | Workflow | FA | reply | `<i className="fas fa-reply" />` | solid Style (fas) | yes | |
45
- | <i className="fas fa-chart-line fa-3x" /> | Metrics | Action icon | FA | chart-line | `<i className="fas fa-chart-line" />` | solid Style (fas) | yes | Last column of Tables |
46
- | <i className="far fa-file-alt fa-3x" /> | Logs | Action icon | FA | file-alt | `<i className="far fa-file-alt" />` | regular Style (far) | yes | |
47
- | <i className="fas fa-edit fa-3x" /> | Edit | Action icon | FA | edit | `<i className="fas fa-edit" />` | solid Style (fas) | yes | Field editable |
48
- | <i className="fas fa-plus fa-3x" /> | Create-add | Button-action | FA | plus | `<i className="fas fa-plus" />` | solid Style (fas) | yes | New entity creation |
49
- | <i className="fas fa-trash fa-3x" /> | Delete | Button-action | FA | trash | `<i className="fas fa-trash" />` | solid Style (fas) | yes | Entity deletion |
50
- | <i className="fas fa-save fa-3x" /> | Save | Button-action | FA | save | `<i className="fas fa-save" />` | solid Style (fas) | yes | Save changes on an entity |
51
- | <i className="fas fa-external-link-alt fa-3x" /> | External-link | Button-action | FA | external-link-alt | `<i className="fas fa-external-link-alt" />` | solid Style (fas) | yes | Open an external link |
52
- | <i className="fas fa-times fa-3x" /> | Close | Button-action | FA | times | `<i className="fas fa-times" />` | solid Style (fas) | yes | Close a window/modal |
53
- | <i className="fas fa-caret-down fa-3x" /> | Dropdown-down | Button-action | FA | caret-down | `<i className="fas fa-caret-down" />` | solid Style (fas) | yes | Expand a drop-down |
54
- | <i className="fas fa-caret-up fa-3x" /> | Dropdown-up | Button-action | FA | caret-up | `<i className="fas fa-caret-up" />` | solid Style (fas) | yes | Dropdown expanded |
55
- | <i className="fas fa-search fa-3x" /> | Search | Button-action | FA | search | `<i className="fas fa-search" />` | solid Style (fas) | yes | Search bar |
56
- | <i className="fas fa-ellipsis-v fa-3x" /> | More | Button-action | FA | ellipsis-v | `<i className="fas fa-ellipsis-v" />` | solid Style (fas) | yes | End of tables (not enough space to display all actions) |
57
- | <i className="fas fa-question-circle fa-3x" /> | Info | Button-action | FA | question-circle | `<i className="fas fa-question-circle" />` | solid Style (fas) | yes | Display tooltip info AND "About" (top menu) |
58
- | <i className="fas fa-sync fa-3x" /> | Sync | Button-action | FA | sync | `<i className="fas fa-sync" />` | solid Style (fas) | yes | Refresh the metrics |
59
- | <i className="fas fa-file-export fa-3x" /> | Export | Button-action | FA | file-export | `<i className="fas fa-file-export" />` | solid Style (fas) | yes | Export the data in predefined format |
60
- | <i className="far fa-clone fa-3x" /> | Copy | Button-action | FA | clone | `<i className="far fa-clone" />` | regular Style (far) | yes | Small icon next to a field that can be copied |
61
- | <i className="fas fa-file-upload fa-3x" /> | Upload | Button-action | FA | file-upload | `<i className="fas fa-file-upload" />` | solid Style (fas) | yes | Upload object |
62
- | <i className="fas fa-plus-square fa-3x" /> | Add-plus | Button-action | FA | plus-square | `<i className="fas fa-plus-square" />` | solid Style (fas) | yes | Add an item in a list |
63
- | <i className="fas fa-minus-square fa-3x" /> | Remove-minus | Button-action | FA | minus-square | `<i className="fas fa-minus-square" />` | solid Style (fas) | yes | Remove an item in a list |
64
- | <i className="fas fa-sort fa-3x" /> | Sort | Table | FA | sort | `<i className="fas fa-sort" />` | solid Style (fas) | yes | Sort |
65
- | <i className="fas fa-sort-up fa-3x" /> | Sort-up | Table | FA | sort-up | `<i className="fas fa-sort-up" />` | solid Style (fas) | yes | Sort |
66
- | <i className="fas fa-sort-down fa-3x" /> | Sort-down | Table | FA | sort-down | `<i className="fas fa-sort-down" />` | solid Style (fas) | yes | Sort |
67
- | <i className="fas fa-calendar-week fa-3x" /> | Calendar | Pill | FA | calendar-week | `<i className="fas fa-calendar-week" />` | solid Style (fas) | yes | Metric over a period |
68
- | <i className="fas fa-arrow-up fa-3x" /> | Arrow-up | Pill | FA | arrow-up | `<i className="fas fa-arrow-up" />` | solid Style (fas) | yes | Show an increase in trend |
69
- | <i className="fas fa-arrow-down fa-3x" /> | Arrow-down | Pill | FA | arrow-down | `<i className="fas fa-arrow-down" />` | solid Style (fas) | yes | Show a decrease in trend |
70
- | <i className="far fa-folder fa-3x" /> | Folder | Browsing | FA | folder | `<i className="far fa-folder" />` | regular Style (far) | yes | Browsing |
71
- | <i className="far fa-file fa-3x" /> | File | Browsing | FA | file | `<i className="far fa-file" />` | regular Style (far) | yes | Browsing |
72
- | <i className="fas fa-ban fa-3x" /> | Deletion-marker | Browsing | FA | ban | `<i className="fas fa-ban" />` | solid Style (fas) | yes | Browsing - deletion markers on objects |
73
- | <i className="fas fa-info-circle fa-3x" /> | Info-circle | Status | FA | info-circle | `<i className="fas fa-info-circle" />` | solid Style (fas) | yes | Grey empty state-status (charts, tables) |
74
- | <i className="fas fa-exclamation-triangle fa-3x" /> | Exclamation-triangle | Status | FA | exclamation-triangle | `<i className="fas fa-exclamation-triangle" />` | solid Style (fas) | yes | Yellow warning status (alerts list) |
75
- | <i className="fas fa-exclamation-circle fa-3x" /> | Exclamation-circle | Status | FA | exclamation-circle | `<i className="fas fa-exclamation-circle" />` | solid Style (fas) | yes | Red critical alerts |
76
- | <i className="fas fa-check fa-3x" /> | Check | Status | FA | check | `<i className="fas fa-check" />` | solid Style (fas) | yes | Healthy status AND successful operation |
77
- | <i className="fas fa-shield-alt fa-3x" /> | Protected | Status | FA | shield-alt | `<i className="fas fa-shield-alt" />` | solid Style (fas) | yes | Extra protection status |
78
- | <i className="fas fa-bars fa-3x" /> | Bars | Menu | FA | bars | `<i className="fas fa-bars" />` | solid Style (fas) | yes | Expand/collapse the lat navbar |
79
- | <i className="fas fa-link fa-3x" /> | Bound | Status | FA | link | `<i className="fas fa-link" />` | solid Style (fas) | yes | Bound status |
80
- | <i className="fas fa-unlink fa-3x" /> | Unbound | Status | FA | unlink | `<i className="fas fa-unlink" />` | solid Style (fas) | yes | Unbound status |
81
- | <i className="fas fa-exclamation fa-3x" /> | Exclamation | Status | FA | exclamation | `<i className="fas fa-exclamation" />` | solid Style (fas) | yes | Issue status |
82
- | <i className="fas fa-minus fa-3x" /> | Hyphen | Status | FA | minus | `<i class="fas fa-minus" />` | solid Style (fas) | yes | No status, in tables |
83
- | <i className="fas fa-times-circle fa-3x" /> | Remove-circle | Action | FA | times-circle | `<i class="fas fa-times-circle" />` | solid Style (fas) | yes | Remove a criteria in a search |
84
- | <i className="fas fa-file-upload fa-3x" /> | Object-upload | Action | FA | file-upload | `<i class="fas fa-file-upload" />` | solid Style (fas) | yes | When uploading an object |
85
- | <i className="fas fa-chevron-left fa-3x" /> | Chevron-left | Navigation | FA | chevron-left | `<i className="fas fa-chevron-left" />` | solid Style (fas) | yes | Expand tabs |
86
- | <i className="fas fa-chevron-right fa-3x" /> | Chevron-right | Navigation | FA | chevron-right | `<i className="fas fa-chevron-right" />` | solid Style (fas) | yes | Expand tables |
87
- | <i className="fas fa-angle-double-right fa-3x" /> | Angle-double-right | Status | FA | angle-double-right | `<i className="fas fa-angle-double-right" />` | solid Style (fas) | yes | Show an increase "From 1 value to another one" |
88
- | <i className="fas fa-language fa-3x" /> | Language | Menu | FA | language | `<i className="fas fa-language" />` | solid Style (fas) | yes | Select the language in the top menu |
89
- | <i className="fas fa-palette fa-3x" /> | Theme | Menu | FA | palette | `<i className="fas fa-palette" />` | solid Style (fas) | yes | Select the theme in the top menu |
90
- | <i className="fas fa-clipboard-list fa-3x" /> | Documentation | Menu | FA | clipboard-list | `<i className="fas fa-clipboard-list" />` | solid Style (fas) | yes | Access to the documentation link |
91
- | <i className="fas fa-comments fa-3x" /> | Support | Menu | FA | comments | `<i className="fas fa-comments" />` | solid Style (fas) | yes | Access to the support link |
92
- | <i className="fas fa-file-contract fa-3x" /> | EULA | Menu | FA | file-contract | `<i className="fas fa-file-contract" />` | solid Style (fas) | yes | Access to the "Terms of use" link |
93
- | <i className="fas fa-sign-out-alt fa-3x" /> | Log-out | Menu | FA | sign-out-alt | `<i className="fas fa-sign-out-alt" />` | solid Style (fas) | yes | Log out action |
94
- | <i className="far fa-hourglass fa-3x" /> | Hourglass | Status | FA | hourglass | `<i className="far fa-hourglass" />` | regular Style (far) | ? | Workflow delayed |
95
- | <i className="fas fa-pause fa-3x" /> | Pause | Status | FA | pause | `<i className="fas fa-pause" />` | solid Style (fas) | yes | Workflow paused |
96
- | <i className="fas fa-stop fa-3x" /> | Stop | Status | FA | stop | `<i className="fas fa-stop" />` | solid Style (fas) | yes | Upload stop |
97
- | <i className="fas fa-play fa-3x" /> | Play | Status | FA | play | `<i className="fas fa-play" />` | solid Style (fas) | yes | Upload play |
98
- | <i className="fas fa-level-up-alt fa-3x" /> | Upgrade | Button-action | FA | level-up-alt | `<i className="fas fa-level-up-alt" />` | solid Style (fas) | yes | Upgrade version |
99
- | <i className="fas fa-expand-alt fa-3x" /> | Expansion | Button-action | FA | expand-alt | `<i className="fas fa-expand-alt" />` | solid Style (fas) | yes | Expand with no rebalancing |
100
- | <i className="fas fa-balance-scale fa-3x" /> | Rebalance | Button-action | FA | balance-scale | `<i className="fas fa-balance-scale" />` | solid Style (fas) | yes | Expand with rebalancing |
101
- | <i className="fas fa-hard-hat fa-3x" /> | Maintenance | Button-action | FA | hard-hat | `<i className="fas fa-hard-hat" />` | solid Style (fas) | yes | Switch to "maintenance mode" |
102
- | <i className="fas fa-exchange-alt fa-3x" /> | Change-erasure | Button-action | FA | exchange-alt | `<i className="fas fa-exchange-alt" />` | solid Style (fas) | yes | Change erasure code level |
103
- | <i className="fas fa-circle fa-3x" /> | Circle-health | Status | FA | circle | `<i className="fas-circle" />` | solid Style (fas) | yes | Display status (Healthy, Warning, Critical) |
104
- | <i className="far fa-circle fa-3x" /> | Circle-empty | Status | FA | circle | `<i className="far-circle" />` | regular Style (far) | yes | Display empty health status |
105
- | <i className="fas fa-toolbox fa-3x" /> | Services | Status | FA | toolbox | `<i className="fas fa-toolbox" />` | solid Style (fas) | yes | Status icon for Services |
106
- | <i className="fas fa-cubes fa-3x" /> | Data-services | Hero | FA | cubes | `<i className="fas fa-cubes" />` | solid Style (fas) | yes | Hero icon for Data-services |
107
- | <i className="fas fa-arrow-right fa-3x" /> | Arrow-right | Navigation | FA | arrow-right | `<i className="fas fa-right-up" />` | solid Style (fas) | yes | Button as "Continue", next step |
108
- | <i className="fas fa-arrow-left fa-3x" /> | Arrow-left | Navigation | FA | arrow-left | `<i className="fas fa-arrow-left" />` | solid Style (fas) | yes | Go back to a previous status/page |
109
- | <i className="fas fa-certificate fa-3x" /> | Certificate | Entities | FA | certificate | `<i className="fas fa-certificate" />` | solid Style (fas) | yes | Certificate |
110
- | <i className="fas fa-download fa-3x" /> | Download | Action icon | FA | download | `<i className="fas fa-download" />` | solid Style (fas) | yes | Download |
111
- | <i className="fas fa-id-card fa-3x" /> | ID-card | Entities | FA | id-card | `<i className="fas fa-id-card"/>` | solid Style (fas) | yes | Identity |
112
- | <i className="fas fa-cog fa-3x" /> | Setting | Action | FA | cog | `<i className="fas fa-cog"/>` | solid Style (fas) | yes | Global Settings |
113
- | <i className="fas fa-ring fa-3x" /> | Ring | Entities | FA | ring | `<i className="fas fa-ring"/>` | solid Style (fas) | yes | Ring |
114
- | <QueryClientProvider client={new QueryClient()}><Icon name="Remote-user" size="3x" /></QueryClientProvider> | Remote-user | Entities | Custom | - | - | custom icon | - | Remote user in Identity UI |
115
- | <QueryClientProvider client={new QueryClient()}><Icon name="Remote-group" size="3x" /></QueryClientProvider> | Remote-group | Entities | Custom | - | - | custom icon | - | Remote group in Identity UI |