DPS in Device detail

plgd-dev · Mar 31, 2024 · 0a96dc3 · 0a96dc3
1 parent 1866fbd
commit 0a96dc3
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 8 deletions.
diff --git a/src/components/Atomic/ContentMenu/ContentMenu.styles.ts b/src/components/Atomic/ContentMenu/ContentMenu.styles.ts
@@ -74,6 +74,8 @@ export const itemTitleIcon = css`
 `
 
 export const itemTitleText = css`
+    display: flex;
+    align-items: center;
     margin-left: 12px;
     font-weight: bold;
 `
@@ -172,3 +174,15 @@ export const line = css`
     left: 0;
     bottom: 50%;
 `
+
+export const icon = css`
+    margin-left: 8px;
+`
+
+export const iconSuccess = (theme: ThemeType) => css`
+    color: ${get(theme, `ContentMenu.item.icon.success.color`)};
+`
+
+export const iconError = (theme: ThemeType) => css`
+    color: ${get(theme, `ContentMenu.item.icon.error.color`)};
+`
diff --git a/src/components/Atomic/ContentMenu/ContentMenu.tsx b/src/components/Atomic/ContentMenu/ContentMenu.tsx
@@ -8,6 +8,9 @@ import { Icon } from '../Icon'
 import { Arrow } from '../../Layout/LeftPanel/components'
 import img from '../../Layout/LeftPanel/assets/line.png'
 import IconSearch from '../Icon/components/IconSearch'
+import { statuses } from '../Tabs/constants'
+import IconCheck from '../Icon/components/IconCheck'
+import IconWarningCircle from '../Icon/components/IconWarningCircle'
 
 const ContentMenu: FC<Props> = (props) => {
     const { activeItem, className, handleItemClick, handleSubItemClick, id, menu: menuProp, menuSearch, title } = props
@@ -36,7 +39,7 @@ const ContentMenu: FC<Props> = (props) => {
 
     return (
         <div className={className} css={styles.contentMenu} id={id}>
-            <div css={styles.title}>{title}</div>
+            {title && <div css={styles.title}>{title}</div>}
             {menuSearch && (
                 <div css={styles.searchWrapper}>
                     <span css={styles.searchIcon}>
@@ -62,6 +65,8 @@ const ContentMenu: FC<Props> = (props) => {
                                 {getIcon(item)}
                                 <span aria-label={item.title} css={[styles.itemTitleText, !item.icon && styles.titleNoMargin]}>
                                     {item.title}
+                                    {item.status === statuses.SUCCESS && <IconCheck css={[styles.icon, styles.iconSuccess]} />}
+                                    {item.status === statuses.ERROR && <IconWarningCircle css={[styles.icon, styles.iconError]} />}
                                 </span>
                                 {item.children && (
                                     <span css={[styles.arrow, isItemActive && styles.activeArrow]}>

diff --git a/src/components/Atomic/ContentMenu/ContentMenu.types.ts b/src/components/Atomic/ContentMenu/ContentMenu.types.ts
@@ -1,11 +1,15 @@
 import { ReactNode, SyntheticEvent } from 'react'
+import { statuses } from './constants'
+
+export type StatusType = (typeof statuses)[keyof typeof statuses]
 
 export type ItemType = {
     children?: SubItemItem[]
     icon?: ReactNode
     id: string
     link: string
     title: string
+    status?: StatusType
 }
 
 export type SubItemItem = Omit<ItemType, 'icon' | 'link'> & {
@@ -20,5 +24,5 @@ export type Props = {
     id?: string
     menu: ItemType[]
     menuSearch?: boolean
-    title: string
+    title?: string
 }
diff --git a/src/components/Atomic/ContentMenu/constants.ts b/src/components/Atomic/ContentMenu/constants.ts
@@ -0,0 +1,5 @@
+export const statuses = {
+    SUCCESS: 'success',
+    ERROR: 'error',
+    WARNING: 'warning',
+} as const
diff --git a/src/components/Atomic/Grid/Column/Column.styles.ts b/src/components/Atomic/Grid/Column/Column.styles.ts
@@ -2,7 +2,7 @@ import { css } from '@emotion/react'
 import { ColumnSizesType, ColumnSizeType } from './Column.types'
 
 const comparePropName = (props: ColumnSizesType, name: string) =>
-    props.size === name || props.sm === name || props.md === name || props.lg === name || props.lg === name
+    props.size === name || props.sm === name || props.md === name || props.lg === name || props.xl === name || props.xxl === name
 
 const getColEqual = css`
     flex: 1 0 0;
@@ -58,4 +58,8 @@ export const column = (props: ColumnSizesType) => css`
     @media (min-width: 1200px) {
         ${props.xl && getColSize(props.xl)};
     }
+
+    @media (min-width: 1400px) {
+        ${props.xxl && getColSize(props.xxl)};
+    }
 `
diff --git a/src/components/Atomic/Grid/Column/Column.tsx b/src/components/Atomic/Grid/Column/Column.tsx
@@ -3,9 +3,9 @@ import { Props, defaultProps } from './Column.types'
 import * as styles from './Column.styles'
 
 const Column: FC<Props> = (props) => {
-    const { size, sm, md, lg, xl, className, id, style, children } = { ...defaultProps, ...props }
+    const { size, sm, md, lg, xl, xxl, className, id, style, children } = { ...defaultProps, ...props }
     return (
-        <div className={className} css={styles.column({ size, sm, md, lg, xl })} id={id} style={style}>
+        <div className={className} css={styles.column({ size, sm, md, lg, xl, xxl })} id={id} style={style}>
             {children}
         </div>
     )

diff --git a/src/components/Atomic/Grid/Column/Column.types.ts b/src/components/Atomic/Grid/Column/Column.types.ts
@@ -8,6 +8,7 @@ export type ColumnSizesType = {
     md?: ColumnSizeType
     lg?: ColumnSizeType
     xl?: ColumnSizeType
+    xxl?: ColumnSizeType
 }
 
 export type Props = {

diff --git a/src/components/Atomic/TagGroup/TagGroup.tsx b/src/components/Atomic/TagGroup/TagGroup.tsx
@@ -88,11 +88,11 @@ const TagGroup: FC<Props> = (props) => {
         } else {
             setTagsToDisplay(childArray.length)
         }
-    }, [])
+    }, [parent, tags, moreTags])
 
     const debouncedCallback = debounce(() => {
         calculate()
-    }, 1000)
+    }, 500)
 
     useEffect(() => {
         window.addEventListener('resize', debouncedCallback)
@@ -120,7 +120,7 @@ const TagGroup: FC<Props> = (props) => {
 
             {tagsToDisplay > 0 && <Inner />}
             {tagsToDisplay === 0 && (
-                <Tag onClick={() => setShow(true)} ref={moreTags} variant={tagVariants.BLUE}>
+                <Tag onClick={() => setShow(true)} variant={tagVariants.BLUE}>
                     {childrenArray.length} {i18n.more}
                 </Tag>
             )}

diff --git a/src/components/Atomic/_theme/siemens.ts b/src/components/Atomic/_theme/siemens.ts
@@ -212,6 +212,14 @@ const theme = {
                         color: colorsSiemens.neutral000,
                     },
                 },
+                icon: {
+                    success: {
+                        color: colorsSiemens.green,
+                    },
+                    error: {
+                        color: colorsSiemens.red,
+                    },
+                },
             },
             search: {
                 background: colors.light,

diff --git a/src/components/Atomic/_theme/template.ts b/src/components/Atomic/_theme/template.ts
@@ -223,6 +223,14 @@ export const getThemeTemplate = (colors: any, logoProps: LogoType) => ({
                         color: colors.primaryBonus,
                     },
                 },
+                icon: {
+                    success: {
+                        color: colors.green,
+                    },
+                    error: {
+                        color: colors.red,
+                    },
+                },
             },
             search: {
                 background: colors.light,