13975845329

Committed 20 Mar 2025 05:41PM UTC coverage: 95.503%. First build

Build # 13975845329

Build Type

Pull #2009

github

Committed by

web-flow

Commit Message

Merge 73aefd4c8 into 613f9a40e

Pull Request Pull Request #2009: fix(forms): remove `renderToString` for the calendar picker icon

Run Details

3542 of 3966 branches covered (89.31%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

9731 of 9932 relevant lines covered (97.98%)

235.14 hits per line

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

33.33

/packages/accordions/src/styled/timeline/StyledItemIcon.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, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';
import { math } from 'polished';
import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'timeline.icon';

interface IStyledItemIcon {
  $surfaceColor?: string;
}

const colorStyles = ({ $surfaceColor, theme }: IStyledItemIcon & ThemeProps<DefaultTheme>) => {
  const foregroundColor = getColor({ theme, variable: 'border.emphasis' });
  let backgroundColor;

  if ($surfaceColor) {
    backgroundColor = $surfaceColor.includes('.')
      ? getColor({ theme, variable: $surfaceColor })
      : $surfaceColor;
  } else {
    backgroundColor = getColor({ theme, variable: 'background.default' });
  }

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

/**
 * 1. Odd sizing allows the timeline line to center respective of the circle icon.
 */
export const StyledItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledItemIcon>`
  z-index: 1;
  box-sizing: content-box;

  padding: ${props => props.theme.space.base}px 0;
  width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
  height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */

  ${colorStyles}

  ${componentStyles};
`;

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, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';	14✔
9	import { math } from 'polished';	14✔
10	import { componentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';	14✔
11
12	const COMPONENT_ID = 'timeline.icon';	14✔
13
14	interface IStyledItemIcon {
15	$surfaceColor?: string;
16	}
17
18	const colorStyles = ({ $surfaceColor, theme }: IStyledItemIcon & ThemeProps<DefaultTheme>) => {	14✔
19	const foregroundColor = getColor({ theme, variable: 'border.emphasis' });	×
20	let backgroundColor;
21
22	if ($surfaceColor) {	×
23	backgroundColor = $surfaceColor.includes('.')	×
24	? getColor({ theme, variable: $surfaceColor })
25	: $surfaceColor;
26	} else {
27	backgroundColor = getColor({ theme, variable: 'background.default' });	×
28	}
29
30	return css`	×
31	background-color: ${backgroundColor};
32	color: ${foregroundColor};
33	`;
34	};
35
36	/**
37	* 1. Odd sizing allows the timeline line to center respective of the circle icon.
38	*/
39	export const StyledItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({	14✔
40	'data-garden-id': COMPONENT_ID,
41	'data-garden-version': PACKAGE_VERSION
42	})<IStyledItemIcon>`
43	z-index: 1;
44	box-sizing: content-box;
45
46	padding: ${props => props.theme.space.base}px 0;	×
47	width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */	×
48	height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */	×
49
50	${colorStyles}
51
52	${componentStyles};
53	`;

zendeskgarden / react-components / 13975845329

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