Merge branch 'dev' into 'master'

Merging dev to master branch See merge request Frontend/synerise-design!2222
Synerise · Dec 22, 2021 · 69d62a9 · 69d62a9
2 parents dd78d8a + eb9fb27
commit 69d62a9
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 21 deletions.
diff --git a/packages/components/badge/src/Badge.styles.tsx b/packages/components/badge/src/Badge.styles.tsx
@@ -37,7 +37,7 @@ export const beforeElementAnimation = keyframes`
 
 // eslint-disable-next-line react/jsx-props-no-spreading
 export default styled(
-  ({ flag, outlined, backgroundColor, textColor, backgroundColorHue, textColorHue, pulsing, ...rest }) => (
+  ({ flag, outlined, backgroundColor, textColor, backgroundColorHue, textColorHue, pulsing, customColor, ...rest }) => (
     <Badge {...rest} />
   )
 )`
@@ -68,31 +68,40 @@ export default styled(
   ${(props): FlattenSimpleInterpolation | false =>
     css`
       ${
-        props.status === 'active' &&
+        props.status === 'active' && !props.customColor &&
         css`
           .ant-badge-status-active {
             background-color: ${props.theme.palette['green-600']};
           }
         `
       }
+      ${
+      props.customColor  &&
+      css`
+          .ant-badge-dot,
+          .ant-badge-status-dot {
+            background-color: ${props.theme.palette[`${props.customColor}-600`]};
+          }
+        `
+    }
         ${
-          props.status === 'inactive' &&
+          props.status === 'inactive' && !props.customColor &&
           css`
             .ant-badge-status-inactive {
               background-color: ${props.theme.palette['grey-400']};
             }
           `
         }
       ${
-        props.status === 'blocked' &&
+        props.status === 'blocked' && !props.customColor &&
         css`
           .ant-badge-status-blocked {
             background-color: ${props.theme.palette['red-600']};
           }
         `
       }
         ${
-          props.status === 'processing' &&
+          props.status === 'processing' && !props.customColor &&
           css`
             .ant-badge-status-processing {
               background-color: ${props.theme.palette['blue-600']};

diff --git a/packages/components/badge/src/Badge.tsx b/packages/components/badge/src/Badge.tsx
@@ -12,6 +12,7 @@ const Badge: React.FC<BadgeProps> = ({
   backgroundColorHue,
   textColorHue,
   pulsing,
+  customColor,
   ...antdProps
 }) => {
   return (
@@ -24,6 +25,7 @@ const Badge: React.FC<BadgeProps> = ({
       backgroundColorHue={backgroundColorHue}
       textColorHue={textColorHue}
       pulsing={pulsing}
+      customColor={customColor}
       {...antdProps}
     />
   );

diff --git a/packages/components/badge/src/Badge.types.ts b/packages/components/badge/src/Badge.types.ts
@@ -28,4 +28,5 @@ export interface BadgeProps extends Omit<AntBadgeProps, 'status'> {
   backgroundColorHue?: ColorHue;
   textColorHue?: ColorHue;
   pulsing?: boolean;
+  customColor?: Color;
 }
diff --git a/packages/components/button/src/Button.styles.tsx b/packages/components/button/src/Button.styles.tsx
@@ -170,7 +170,7 @@ export const AntdButton = styled(
     ${(props): FlattenSimpleInterpolation | false =>
       props.mode !== 'single-icon' &&
       css`
-        &.ant-btn:not(.ds-expander):not(.ds-button-creator) {
+        &.ant-btn:not(.ds-expander):not(.ds-button-creator):not(.btn-search):not(.btn-search-open) {
           min-width: 54px;
         }
       `}

diff --git a/packages/components/filter/src/Filter.tsx b/packages/components/filter/src/Filter.tsx
@@ -36,6 +36,8 @@ const Filter: React.FC<FilterProps> = ({
   addFilterComponent,
   texts,
 }) => {
+  const [activeExpressionId, setActiveExpressionId] = React.useState<string | null>(null);
+
   const { formatMessage } = useIntl();
   const text = React.useMemo(
     () => ({
@@ -94,7 +96,13 @@ const Filter: React.FC<FilterProps> = ({
       const Component = component[expression.type];
       const LogicComponent = expression.logic && component[expression.logic.type];
       return (
-        <S.ExpressionWrapper key={expression.id} data-dropLabel={text.dropMeHere} index={index}>
+        <S.ExpressionWrapper
+          key={expression.id}
+          data-dropLabel={text.dropMeHere}
+          index={index}
+          style={expression.id === activeExpressionId ? { zIndex: 10001 } : undefined}
+          onClick={(): void => setActiveExpressionId(expression.id)}
+        >
           <Component {...expression.data} {...componentProps(expression)} />
           {expression.logic && index + 1 < expressions.length && (
             <S.LogicWrapper>
@@ -104,7 +112,7 @@ const Filter: React.FC<FilterProps> = ({
         </S.ExpressionWrapper>
       );
     },
-    [componentProps, expressions.length, text]
+    [componentProps, expressions.length, activeExpressionId, text]
   );
 
   return (

diff --git a/packages/components/result/src/Result.tsx b/packages/components/result/src/Result.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Icon, { WarningM, CheckM, HourglassM, SearchNoResultsM, InfoM } from '@synerise/ds-icon';
+import Icon, { WarningM, CheckM, HourglassM, InformationNoSearchResultL, InfoM } from '@synerise/ds-icon';
 
 import * as S from './Result.styles';
 import { ResultProps } from './Result.types';
@@ -32,9 +32,8 @@ const mapTypeToStatus = {
     background: 'grey-100',
   },
   'no-results': {
-    IconComponent: SearchNoResultsM,
+    IconComponent: InformationNoSearchResultL,
     iconColor: 'grey-600',
-    background: 'grey-100',
   },
 };
 
@@ -55,7 +54,7 @@ const Result: React.FC<ResultProps> = ({
         <S.ResultIconContainer>
           {customIcon || (
             <S.StatusIconContainer {...iconContainerStyles}>
-              <Icon component={<IconComponent />} size={24} />
+              <Icon component={<IconComponent />} size={mapTypeToStatus['no-results'] ? 48 : 24} />
             </S.StatusIconContainer>
           )}
         </S.ResultIconContainer>

diff --git a/packages/components/table/src/Cell/StatusLabel/StatusLabel.tsx b/packages/components/table/src/Cell/StatusLabel/StatusLabel.tsx
@@ -3,10 +3,10 @@ import Badge from '@synerise/ds-badge';
 import * as S from './StatusLabel.styles';
 import { Props } from './StatusLabel.types';
 
-const StatusLabelCell: React.FC<Props> = ({ status, label }: Props) => {
+const StatusLabelCell: React.FC<Props> = ({ status, label,customColor }: Props) => {
   return (
     <S.StatusLabel>
-      <Badge status={status} />
+      <Badge customColor={customColor} status={status} />
       <S.Label>{label}</S.Label>
     </S.StatusLabel>
   );

diff --git a/packages/components/table/src/Cell/StatusLabel/StatusLabel.types.ts b/packages/components/table/src/Cell/StatusLabel/StatusLabel.types.ts
@@ -1,7 +1,8 @@
-import { Status } from '@synerise/ds-badge/dist/Badge.types';
+import { Color, Status } from '@synerise/ds-badge/dist/Badge.types';
 import * as React from 'react';
 
 export type Props = {
   status: Status;
   label: string | React.ReactNode;
+  customColor: Color;
 };
diff --git a/packages/components/time-picker/src/TimePicker.tsx b/packages/components/time-picker/src/TimePicker.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import dayjs from 'dayjs';
+import { range } from 'lodash';
 
 import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
 import Dropdown from '@synerise/ds-dropdown';
@@ -49,19 +50,19 @@ const TimePicker: React.FC<TimePickerProps> = ({
   const unitConfig: UnitConfig[] = [
     {
       unit: 'hour',
-      options: use12HourClock ? [...Array(13).keys()] : [...Array(24).keys()],
+      options: use12HourClock ? range(12 + 1) : range(24),
       disabled: disabledHours,
       insertSeperator: true,
     },
     {
       unit: 'minute',
-      options: [...Array(60).keys()],
+      options: range(60),
       disabled: disabledMinutes,
       insertSeperator: true,
     },
     {
       unit: 'second',
-      options: [...Array(60).keys()],
+      options: range(60),
       disabled: disabledSeconds,
       insertSeperator: !!use12HourClock,
     },

diff --git a/packages/portal/stories/components/Badge/index.stories.tsx b/packages/portal/stories/components/Badge/index.stories.tsx
@@ -8,9 +8,26 @@ import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import { shapes as avatarShape, sizes as avatarSize } from '../Avatar/constants';
 import { statuses } from './constants';
 
+
+
 const decorator = storyFn => (
   <div style={{ display: 'flex', width: '192px', height: '34px', alignItems: 'center', justifyContent: 'center' }}>{storyFn()}</div>
 );
+const CUSTOM_COLORS = [
+  '',
+  'blue',
+  'grey',
+  'red',
+  'green',
+  'yellow',
+  'pink',
+  'mars',
+  'orange',
+  'fern',
+  'cyan',
+  'purple',
+  'violet',
+];
 
 const stories = {
   standalone: () => {
@@ -199,8 +216,7 @@ const stories = {
 
   flagDefault: () => (
     <>
-      <Badge status={select('Status', statuses, 'active')} flag={true} pulsing={boolean('Set Pulsing', true)} />
-
+      <Badge customColor={select('Set custom color status', CUSTOM_COLORS, '')} status={select('Status', statuses, 'active')} flag={true} pulsing={boolean('Set Pulsing', true)} />
     </>
   ),
   flagWithLabel: () => (

diff --git a/packages/portal/stories/components/Table/content/withAllCellTypes.data.tsx b/packages/portal/stories/components/Table/content/withAllCellTypes.data.tsx
@@ -117,6 +117,7 @@ const iconSizes = {
   Large: 'L',
 };
 const colorOptions = {
+  '': '',
   blue: 'blue',
   grey: 'grey',
   red: 'red',
@@ -320,7 +321,7 @@ export const COLUMNS_WITH_STATUSES = [
     ellipsis: true,
     icon: { component: <VarTypeBooleanM /> },
     tooltip: { title: 'Tooltip', description: 'Description' },
-    render: status => <TableCell.StatusLabelCell status={status} label={status} />,
+    render: status => <TableCell.StatusLabelCell customColor={select('Set custom color status', colorOptions, '')} status={status} label={status} />,
   },
   {
     title: 'Tag',

diff --git a/yarn.lock b/yarn.lock
@@ -2223,6 +2223,14 @@
     "@babel/helper-module-transforms" "^7.14.0"
     "@babel/helper-plugin-utils" "^7.13.0"
 
+"@babel/plugin-transform-modules-umd@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.0.tgz#2f8179d1bbc9263665ce4a65f305526b2ea8ac34"
+  integrity sha512-nPZdnWtXXeY7I87UZr9VlsWme3Y0cfFFE41Wbxz4bbaexAjNMInXPFUpRRUJ8NoMm0Cw+zxbqjdPmLhcjfazMw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helper-plugin-utils" "^7.13.0"
+
 "@babel/plugin-transform-modules-umd@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz#e909acae276fec280f9b821a5f38e1f08b480697"