#2621

Committed 20 Aug 2024 05:21PM UTC coverage: 96.022% (-0.4%) from 96.396%

Build # #2621

Build Type

push

Committed by

Commit Message

chore: merge v9 `next` to `main` (#1898)

Run Details

3315 of 3674 branches covered (90.23%)

Branch coverage included in aggregate %.

2631 of 2675 new or added lines in 365 files covered. (98.36%)

3 existing lines in 1 file now uncovered.

10225 of 10427 relevant lines covered (98.06%)

235.58 hits per line

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

85.14

/packages/draggable/src/styled/dropzone/StyledDropzone.ts

/**
 * Copyright Zendesk, Inc.
 *
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */

import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
import { math } from 'polished';
import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'dropzone';

export interface IStyledDropzoneProps extends ThemeProps<DefaultTheme> {
  isActive?: boolean;
  isVertical?: boolean;
  isDanger?: boolean;
  isDisabled?: boolean;
  isHighlighted?: boolean;
  hasMessage?: boolean;
  hasIcon?: boolean;
}

const colorStyles = (props: IStyledDropzoneProps) => {
  const { isDanger, isDisabled, isActive, isHighlighted, theme } = props;

  const fgVariable = isDanger ? 'foreground.danger' : 'foreground.primary';
  const fgActive = getColor({ variable: fgVariable, theme });
  const borderActive = getColor({
    variable: isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',
    theme
  });

  let backgroundColor = 'transparent';
  let borderColor = getColor({ variable: `border.emphasis`, theme });
  let color = getColor({ variable: `foreground.subtle`, theme });

  if (isDisabled) {
    backgroundColor = getColor({ variable: 'background.disabled', theme });
    borderColor = getColor({ variable: `border.disabled`, theme });
    color = getColor({ variable: 'foreground.disabled', theme });
  } else if (isActive || isHighlighted) {
    color = isHighlighted
      ? getColor({
          variable: fgVariable,
          light: { offset: 200 },
          dark: { offset: -200 },
          theme
        })
      : fgActive;
    backgroundColor = getColor({
      variable: isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',
      transparency: theme.opacity[100],
      dark: { offset: -100 },
      theme
    });
    borderColor = borderActive;
  } else if (isDanger) {
    borderColor = borderActive;
    color = fgActive;
  }

  return css`
    border-color: ${borderColor};
    background-color: ${backgroundColor};
    color: ${color};
  `;
};

const sizeStyles = (props: IStyledDropzoneProps) => {
  const { theme, isHighlighted } = props;
  const borderWidth = isHighlighted ? math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;

  return css`
    border-width: ${borderWidth};
    border-style: ${isHighlighted ? theme.borderStyles.solid : 'dashed'};
    border-radius: ${theme.borderRadii.md};
    padding: ${isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4}px;
    width: 100%;
    font-family: ${theme.fonts.system};
    font-size: ${theme.fontSizes.md};
  `;
};

/**
 * 1. Reset margin, e.g. when alternative tag includes native margin
 */
export const StyledDropzone = styled.div.attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledDropzoneProps>`
  display: ${p => (p.hasMessage || p.hasIcon) && 'flex'};
  flex-direction: ${p => p.hasMessage && p.isVertical && 'column'};
  align-items: ${p => (p.hasMessage || p.hasIcon) && 'center'};
  justify-content: ${p => (p.hasMessage || p.hasIcon) && 'center'};
  /* prettier-ignore */
  transition:
    border-color 0.25s ease-in-out,
    background-color 0.25s ease-in-out,
    color 0.25s ease-in-out,
    z-index 0.25s ease-in-out;
  margin: 0; /* [1] */
  text-align: ${p => p.hasMessage && 'center'};
  direction: ${props => props.theme.rtl && 'rtl'};
  box-sizing: border-box;

  ${sizeStyles}
  ${colorStyles}

  ${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;

StyledDropzone.defaultProps = {
  theme: DEFAULT_THEME
};

1	/**
2	* Copyright Zendesk, Inc.
3	*
4	* Use of this source code is governed under the Apache License, Version 2.0
5	* found at http://www.apache.org/licenses/LICENSE-2.0.
6	*/
7
8	import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';	5✔
9	import { math } from 'polished';	5✔
10	import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';	5✔
11
12	const COMPONENT_ID = 'dropzone';	5✔
13
14	export interface IStyledDropzoneProps extends ThemeProps<DefaultTheme> {
15	isActive?: boolean;
16	isVertical?: boolean;
17	isDanger?: boolean;
18	isDisabled?: boolean;
19	isHighlighted?: boolean;
20	hasMessage?: boolean;
21	hasIcon?: boolean;
22	}
23
24	const colorStyles = (props: IStyledDropzoneProps) => {	5✔
25	const { isDanger, isDisabled, isActive, isHighlighted, theme } = props;	24✔
26
27	const fgVariable = isDanger ? 'foreground.danger' : 'foreground.primary';	24✔
28	const fgActive = getColor({ variable: fgVariable, theme });	24✔
29	const borderActive = getColor({	24✔
30	variable: isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis',	24✔
31	theme
32	});
33
34	let backgroundColor = 'transparent';	24✔
35	let borderColor = getColor({ variable: `border.emphasis`, theme });	24✔
36	let color = getColor({ variable: `foreground.subtle`, theme });	24✔
37
38	if (isDisabled) {	24✔
39	backgroundColor = getColor({ variable: 'background.disabled', theme });	1✔
40	borderColor = getColor({ variable: `border.disabled`, theme });	1✔
41	color = getColor({ variable: 'foreground.disabled', theme });	1✔
42	} else if (isActive \|\| isHighlighted) {	23!
NEW 43	color = isHighlighted	×
44	? getColor({
45	variable: fgVariable,
46	light: { offset: 200 },
47	dark: { offset: -200 },
48	theme
49	})
50	: fgActive;
NEW 51	backgroundColor = getColor({	×
52	variable: isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis',	×
53	transparency: theme.opacity[100],
54	dark: { offset: -100 },
55	theme
56	});
NEW 57	borderColor = borderActive;	×
58	} else if (isDanger) {	23✔
59	borderColor = borderActive;	4✔
60	color = fgActive;	4✔
61	}
62
63	return css`	24✔
64	border-color: ${borderColor};
65	background-color: ${backgroundColor};
66	color: ${color};
67	`;
68	};
69
70	const sizeStyles = (props: IStyledDropzoneProps) => {	5✔
71	const { theme, isHighlighted } = props;	24✔
72	const borderWidth = isHighlighted ? math(`${theme.borderWidths.sm} * 2`) : theme.borderWidths.sm;	24!
73
74	return css`	24✔
75	border-width: ${borderWidth};
76	border-style: ${isHighlighted ? theme.borderStyles.solid : 'dashed'};	24!
77	border-radius: ${theme.borderRadii.md};
78	padding: ${isHighlighted ? theme.space.base * 4 - 1 : theme.space.base * 4}px;	24!
79	width: 100%;
80	font-family: ${theme.fonts.system};
81	font-size: ${theme.fontSizes.md};
82	`;
83	};
84
85	/**
86	* 1. Reset margin, e.g. when alternative tag includes native margin
87	*/
88	export const StyledDropzone = styled.div.attrs({	24✔
89	'data-garden-id': COMPONENT_ID,
90	'data-garden-version': PACKAGE_VERSION
91	})<IStyledDropzoneProps>`
92	display: ${p => (p.hasMessage \|\| p.hasIcon) && 'flex'};	24✔
93	flex-direction: ${p => p.hasMessage && p.isVertical && 'column'};	24✔
94	align-items: ${p => (p.hasMessage \|\| p.hasIcon) && 'center'};	24✔
95	justify-content: ${p => (p.hasMessage \|\| p.hasIcon) && 'center'};	24✔
96	/* prettier-ignore */
97	transition:
98	border-color 0.25s ease-in-out,
99	background-color 0.25s ease-in-out,
100	color 0.25s ease-in-out,
101	z-index 0.25s ease-in-out;
102	margin: 0; /* [1] */
103	text-align: ${p => p.hasMessage && 'center'};	24✔
104	direction: ${props => props.theme.rtl && 'rtl'};	24✔
105	box-sizing: border-box;
106
107	${sizeStyles}
108	${colorStyles}
109
110	${props => retrieveComponentStyles(COMPONENT_ID, props)};	24✔
111	`;
112
113	StyledDropzone.defaultProps = {	5✔
114	theme: DEFAULT_THEME
115	};

zendeskgarden / react-components / #2621

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