ffbf0860-3826-4f9a-8e35-d4fef8008014

Committed 25 Jun 2024 09:39PM UTC coverage: 96.024% (-0.03%) from 96.057%

Build # ffbf0860-3826-4f9a-8e35-d4fef8008014

Build Type

Pull #1842

circleci

Committed by

geotrev

Commit Message

chore: use parent theme callback

Co-authored-by: Florent <ze-flo@users.noreply.github.com>

Pull Request Pull Request #1842: feat(notifications): new light/dark mode colors

Run Details

3346 of 3700 branches covered (90.43%)

Branch coverage included in aggregate %.

228 of 232 new or added lines in 24 files covered. (98.28%)

5 existing lines in 5 files now uncovered.

10131 of 10335 relevant lines covered (98.03%)

213.29 hits per line

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

94.87

/packages/forms/src/styled/text/StyledTextMediaFigure.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, { css, ThemeProps, DefaultTheme } from 'styled-components';
import {
  retrieveComponentStyles,
  DEFAULT_THEME,
  getColorV8,
  StyledBaseIcon
} from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'forms.media_figure';

interface IStyledTextMediaFigureProps {
  $isRotated?: boolean;
  $isHovered?: boolean;
  $isFocused?: boolean;
  $isDisabled?: boolean;
  $position: 'start' | 'end';
}

const colorStyles = (props: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {
  let shade = 600;

  if (props.$isDisabled) {
    shade = 400;
  } else if (props.$isHovered || props.$isFocused) {
    shade = 700;
  }

  return css`
    color: ${getColorV8('neutralHue', shade, props.theme)};
  `;
};

const sizeStyles = (props: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {
  const size = props.theme.iconSizes.md;
  const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
  const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
  let margin;

  if (props.$position === 'start') {
    margin = props.theme.rtl ? marginLast : marginFirst;
  } else {
    margin = props.theme.rtl ? marginFirst : marginLast;
  }

  return css`
    margin: ${margin};
    width: ${size};
    height: ${size};
  `;
};

export const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledTextMediaFigureProps>`
  transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
  /* prettier-ignore */
  transition:
    transform 0.25s ease-in-out,
    color 0.25s ease-in-out;

  ${props => colorStyles(props)};

  ${props => sizeStyles(props)}

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

StyledTextMediaFigure.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, { css, ThemeProps, DefaultTheme } from 'styled-components';	27✔
9	import {
10	retrieveComponentStyles,
11	DEFAULT_THEME,
12	getColorV8,
13	StyledBaseIcon
14	} from '@zendeskgarden/react-theming';	27✔
15
16	const COMPONENT_ID = 'forms.media_figure';	27✔
17
18	interface IStyledTextMediaFigureProps {
19	$isRotated?: boolean;
20	$isHovered?: boolean;
21	$isFocused?: boolean;
22	$isDisabled?: boolean;
23	$position: 'start' \| 'end';
24	}
25
26	const colorStyles = (props: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {	27✔
27	let shade = 600;	20✔
28
29	if (props.$isDisabled) {	20!
UNCOV 30	shade = 400;	×
31	} else if (props.$isHovered \|\| props.$isFocused) {	20✔
32	shade = 700;	1✔
33	}
34
35	return css`	20✔
36	color: ${getColorV8('neutralHue', shade, props.theme)};
37	`;
38	};
39
40	const sizeStyles = (props: IStyledTextMediaFigureProps & ThemeProps<DefaultTheme>) => {	27✔
41	const size = props.theme.iconSizes.md;	20✔
42	const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;	20✔
43	const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;	20✔
44	let margin;
45
46	if (props.$position === 'start') {	20✔
47	margin = props.theme.rtl ? marginLast : marginFirst;	8✔
48	} else {
49	margin = props.theme.rtl ? marginFirst : marginLast;	12✔
50	}
51
52	return css`	20✔
53	margin: ${margin};
54	width: ${size};
55	height: ${size};
56	`;
57	};
58
59	export const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({	90✔
60	'data-garden-id': COMPONENT_ID,
61	'data-garden-version': PACKAGE_VERSION
62	})<IStyledTextMediaFigureProps>`
63	transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};	20✔
64	/* prettier-ignore */
65	transition:
66	transform 0.25s ease-in-out,
67	color 0.25s ease-in-out;
68
69	${props => colorStyles(props)};	20✔
70
71	${props => sizeStyles(props)}	20✔
72
73	${props => retrieveComponentStyles(COMPONENT_ID, props)};	20✔
74	`;
75
76	StyledTextMediaFigure.defaultProps = {	27✔
77	theme: DEFAULT_THEME
78	};

zendeskgarden / react-components / ffbf0860-3826-4f9a-8e35-d4fef8008014

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