a0d123d9-48e1-49cd-9115-be482ef4c6db

Committed 24 Jun 2024 03:23PM UTC coverage: 96.036% (-0.007%) from 96.043%

Build # a0d123d9-48e1-49cd-9115-be482ef4c6db

Build Type

Pull #1842

circleci

Committed by

geotrev

Commit Message

chore: use default background in Well when not recessed

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

Run Details

3332 of 3685 branches covered (90.42%)

Branch coverage included in aggregate %.

228 of 231 new or added lines in 24 files covered. (98.7%)

1 existing line in 1 file now uncovered.

10140 of 10343 relevant lines covered (98.04%)

213.19 hits per line

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

87.5

/packages/notifications/src/styled/StyledIcon.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 {
  getColor,
  DEFAULT_THEME,
  StyledBaseIcon,
  retrieveComponentStyles
} from '@zendeskgarden/react-theming';
import { Type } from '../types';
import { validationTypes } from '../utils/icons';

const COMPONENT_ID = 'notifications.icon';

interface IStyledIconProps extends ThemeProps<DefaultTheme> {
  $type?: Type;
}

const sizeStyles = ({ theme: { rtl, space } }: IStyledIconProps) => {
  return css`
    right: ${rtl && `${space.base * 4}px`};
    left: ${!rtl && `${space.base * 4}px`};
    margin-top: ${space.base / 2}px;
  `;
};

const colorStyles = ({ theme, $type }: IStyledIconProps) => {
  let variable;

  switch ($type) {
    case validationTypes.success:
      variable = 'foreground.success';
      break;
    case validationTypes.error:
      variable = 'foreground.danger';
      break;
    case validationTypes.warning:
      variable = 'foreground.warning';
      break;
    case validationTypes.info:
      variable = 'foreground.subtle';
      break;
    default:
      variable = 'foreground.default';
      break;
  }

  const color = getColor({ variable, theme });

  return css`
    color: ${color};
  `;
};

export const StyledIcon = styled(StyledBaseIcon).attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledIconProps>`
  position: absolute;

  ${sizeStyles}
  ${colorStyles}

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

StyledIcon.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';	17✔
9	import {
10	getColor,
11	DEFAULT_THEME,
12	StyledBaseIcon,
13	retrieveComponentStyles
14	} from '@zendeskgarden/react-theming';	17✔
15	import { Type } from '../types';
16	import { validationTypes } from '../utils/icons';	17✔
17
18	const COMPONENT_ID = 'notifications.icon';	17✔
19
20	interface IStyledIconProps extends ThemeProps<DefaultTheme> {
21	$type?: Type;
22	}
23
24	const sizeStyles = ({ theme: { rtl, space } }: IStyledIconProps) => {	17✔
25	return css`	22✔
26	right: ${rtl && `${space.base * 4}px`};	22!
27	left: ${!rtl && `${space.base * 4}px`};	44✔
28	margin-top: ${space.base / 2}px;
29	`;
30	};
31
32	const colorStyles = ({ theme, $type }: IStyledIconProps) => {	17✔
33	let variable;
34
35	switch ($type) {	22!
36	case validationTypes.success:
37	variable = 'foreground.success';	6✔
38	break;	6✔
39	case validationTypes.error:
40	variable = 'foreground.danger';	6✔
41	break;	6✔
42	case validationTypes.warning:
43	variable = 'foreground.warning';	4✔
44	break;	4✔
45	case validationTypes.info:
46	variable = 'foreground.subtle';	6✔
47	break;	6✔
48	default:
NEW 49	variable = 'foreground.default';	×
NEW 50	break;	×
51	}
52
53	const color = getColor({ variable, theme });	22✔
54
55	return css`	22✔
56	color: ${color};
57	`;
58	};
59
60	export const StyledIcon = styled(StyledBaseIcon).attrs({	22✔
61	'data-garden-id': COMPONENT_ID,
62	'data-garden-version': PACKAGE_VERSION
63	})<IStyledIconProps>`
64	position: absolute;
65
66	${sizeStyles}
67	${colorStyles}
68
69	${props => retrieveComponentStyles(COMPONENT_ID, props)}	22✔
70	`;
71
72	StyledIcon.defaultProps = {	17✔
73	theme: DEFAULT_THEME
74	};

zendeskgarden / react-components / a0d123d9-48e1-49cd-9115-be482ef4c6db

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