12430197088

Committed 20 Dec 2024 10:58AM UTC coverage: 98.041% (+0.08%) from 97.966%

Build # 12430197088

Build Type

Pull #776

github

Committed by

web-flow

Commit Message

Merge b21b71f2f into e78ba9eac

Pull Request Pull Request #776: fix(Input): fixed Ant props for Ant Design Input

Run Details

997 of 1037 branches covered (96.14%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 2 files covered. (100.0%)

5 existing lines in 1 file now uncovered.

1605 of 1617 relevant lines covered (99.26%)

68.79 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.24

/src/components/Feedback/Feedback.tsx

/**
 * Copyright 2024 Mia srl
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
 */

import {
  PiCheckCircleFill,
  PiPlaceholderDuotone,
  PiSelection,
  PiTrashDuotone,
  PiWarningDiamondFill,
  PiXSquareFill,
} from 'react-icons/pi'
import { ReactElement, ReactNode } from 'react'
import { LoadingOutlined } from '@ant-design/icons'
import { Spin } from 'antd'

import { Alert } from '../Alert'
import { Badge } from '../Badge'
import { FeedbackProps } from './props'
import { Icon } from '../Icon'
import { IconComponent } from '../Icon/Icon.props'
import Palette from '../../themes/schema/palette'
import { Type } from './types'
import { Typography } from '../Typography'
import styles from './feedback.module.css'
import { useTheme } from '../../hooks/useTheme'

// TODO: replace this with DS colors from useTheme hook when possible
const colors = {
  purple: {
    500: '986DF1',
    600: '7133CD',
  },
}

const getColor = (type: Type, palette: Palette): string => {
  switch (type) {
  case Type.Delete:
    return palette.error[500]
  case Type.EmptyState:
    return palette.secondary[500]
  case Type.Error:
    return palette.error[500]
  case Type.Generic:
    return palette.common.black
  case Type.Special:
    return colors.purple[500]
  case Type.Success:
    return palette.success[500]
  case Type.Warning:
    return palette.warning[400]
  default:
    return palette.common.black
  }
}

const getIcon = (type: Type): IconComponent => {
  switch (type) {
  case Type.Delete:
    return PiTrashDuotone
  case Type.EmptyState:
    return PiSelection
  case Type.Error:
    return PiXSquareFill
  case Type.Generic:
    return PiPlaceholderDuotone
  case Type.Special:
    return PiPlaceholderDuotone
  case Type.Success:
    return PiCheckCircleFill
  case Type.Warning:
    return PiWarningDiamondFill
  default:
    return PiPlaceholderDuotone
  }
}

const getTextColor = (type: Type, palette: Palette): string => {
  switch (type) {
  case Type.Error:
    return palette.error[600]
  case Type.Special:
    return colors.purple[600]
  case Type.Success:
    return palette.success[600]
  default:
    return palette.text.neutral.main
  }
}

/**
 * UI component for displaying messages to the user.
 * @returns {ReactElement} Feedback component
 */
export const Feedback = ({
  alert: customAlert,
  badge: customBadge,
  icon: customIcon,
  children: customChildren,
  description,
  title: customTitle,
  type,
}: FeedbackProps): ReactElement => {
  const { palette } = useTheme()

  const icon: ReactNode = (type === Type.Loading)
    ? (
      <div className={styles.spinner}>
        <Spin indicator={<LoadingOutlined className={styles.loading} />} size="large" />
      </div>
    )
    : (
      <div className={styles.icon} data-testid="custom-icon">
        <Icon color={getColor(type, palette)} component={customIcon || getIcon(type)} size={64} />
      </div>
    )

  const title = (
    <div className={styles.titleWrapper}>
      <div className={styles.title}>
        <Typography.H2
          color={getTextColor(type, palette)}
          ellipsis={{ rows: 1, tooltip: { title: customTitle } }}
        >
          {customTitle}
        </Typography.H2>
      </div>
      {description && (
        <div className={styles.description}>
          <Typography.BodyS ellipsis={{ rows: 2, tooltip: { title: description } }}>
            {description}
          </Typography.BodyS>
        </div>
      )}
    </div>
  )

  const badge = customBadge ? <Badge {...customBadge} /> : null

  const alert = customAlert
    ? (
      <div className={styles.alert}>
        <Alert {...customAlert} isCompressed />
      </div>
    )
    : null

  const children = customChildren
    ? (
      <div className={styles.children}>
        {customChildren}
      </div>
    )
    : null

  return (
    <div className={styles.feedback}>
      <div className={styles.content}>
        {icon}
        {title}
        {badge}
        {alert}
        {children}
      </div>
    </div>
  )
}

Feedback.Type = Type

1	/**
2	* Copyright 2024 Mia srl
3	*
4	* Licensed under the Apache License, Version 2.0 (the "License");
5	* you may not use this file except in compliance with the License.
6	* You may obtain a copy of the License at
7	*
8	* http://www.apache.org/licenses/LICENSE-2.0
9	*
10	* Unless required by applicable law or agreed to in writing, software
11	* distributed under the License is distributed on an "AS IS" BASIS,
12	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	* See the License for the specific language governing permissions and
14	* limitations under the License.
15	*
16	* SPDX-License-Identifier: Apache-2.0
17	*/
18
19	import {	4✔
20	PiCheckCircleFill,
21	PiPlaceholderDuotone,
22	PiSelection,
23	PiTrashDuotone,
24	PiWarningDiamondFill,
25	PiXSquareFill,
26	} from 'react-icons/pi'
27	import { ReactElement, ReactNode } from 'react'
28	import { LoadingOutlined } from '@ant-design/icons'	4✔
29	import { Spin } from 'antd'	4✔
30
31	import { Alert } from '../Alert'	4✔
32	import { Badge } from '../Badge'	4✔
33	import { FeedbackProps } from './props'
34	import { Icon } from '../Icon'	4✔
35	import { IconComponent } from '../Icon/Icon.props'
36	import Palette from '../../themes/schema/palette'
37	import { Type } from './types'	4✔
38	import { Typography } from '../Typography'	4✔
39	import styles from './feedback.module.css'	4✔
40	import { useTheme } from '../../hooks/useTheme'	4✔
41
42	// TODO: replace this with DS colors from useTheme hook when possible
43	const colors = {	4✔
44	purple: {
45	500: '986DF1',
46	600: '7133CD',
47	},
48	}
49
50	const getColor = (type: Type, palette: Palette): string => {	4✔
51	switch (type) {	12!
52	case Type.Delete:
53	return palette.error[500]	2✔
54	case Type.EmptyState:
55	return palette.secondary[500]	2✔
56	case Type.Error:
57	return palette.error[500]	2✔
58	case Type.Generic:
59	return palette.common.black	2✔
60	case Type.Special:
61	return colors.purple[500]	2✔
62	case Type.Success:
63	return palette.success[500]	2✔
64	case Type.Warning:
UNCOV 65	return palette.warning[400]	×
66	default:
UNCOV 67	return palette.common.black	×
68	}
69	}
70
71	const getIcon = (type: Type): IconComponent => {	4✔
72	switch (type) {	10!
73	case Type.Delete:
74	return PiTrashDuotone	2✔
75	case Type.EmptyState:
76	return PiSelection	2✔
77	case Type.Error:
78	return PiXSquareFill	2✔
79	case Type.Generic:
80	return PiPlaceholderDuotone	2✔
81	case Type.Special:
UNCOV 82	return PiPlaceholderDuotone	×
83	case Type.Success:
84	return PiCheckCircleFill	2✔
85	case Type.Warning:
UNCOV 86	return PiWarningDiamondFill	×
87	default:
UNCOV 88	return PiPlaceholderDuotone	×
89	}
90	}
91
92	const getTextColor = (type: Type, palette: Palette): string => {	4✔
93	switch (type) {	14✔
94	case Type.Error:
95	return palette.error[600]	2✔
96	case Type.Special:
97	return colors.purple[600]	2✔
98	case Type.Success:
99	return palette.success[600]	2✔
100	default:
101	return palette.text.neutral.main	8✔
102	}
103	}
104
105	/**
106	* UI component for displaying messages to the user.
107	* @returns {ReactElement} Feedback component
108	*/
109	export const Feedback = ({	4✔
110	alert: customAlert,
111	badge: customBadge,
112	icon: customIcon,
113	children: customChildren,
114	description,
115	title: customTitle,
116	type,
117	}: FeedbackProps): ReactElement => {
118	const { palette } = useTheme()	14✔
119
120	const icon: ReactNode = (type === Type.Loading)	14✔
121	? (
122	<div className={styles.spinner}>
123	<Spin indicator={<LoadingOutlined className={styles.loading} />} size="large" />
124	</div>
125	)
126	: (
127	<div className={styles.icon} data-testid="custom-icon">
128	<Icon color={getColor(type, palette)} component={customIcon \|\| getIcon(type)} size={64} />	11✔
129	</div>
130	)
131
132	const title = (
133	<div className={styles.titleWrapper}>	14✔
134	<div className={styles.title}>
135	<Typography.H2
136	color={getTextColor(type, palette)}
137	ellipsis={{ rows: 1, tooltip: { title: customTitle } }}
138	>
139	{customTitle}
140	</Typography.H2>
141	</div>
142	{description && (	8✔
143	<div className={styles.description}>
144	<Typography.BodyS ellipsis={{ rows: 2, tooltip: { title: description } }}>
145	{description}
146	</Typography.BodyS>
147	</div>
148	)}
149	</div>
150	)
151
152	const badge = customBadge ? <Badge {...customBadge} /> : null	14✔
153
154	const alert = customAlert	14✔
155	? (
156	<div className={styles.alert}>
157	<Alert {...customAlert} isCompressed />
158	</div>
159	)
160	: null
161
162	const children = customChildren	14✔
163	? (
164	<div className={styles.children}>
165	{customChildren}
166	</div>
167	)
168	: null
169
170	return (	14✔
171	<div className={styles.feedback}>
172	<div className={styles.content}>
173	{icon}
174	{title}
175	{badge}
176	{alert}
177	{children}
178	</div>
179	</div>
180	)
181	}
182
183	Feedback.Type = Type	4✔

mia-platform / design-system / 12430197088

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous