#2641

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

Build # #2641

Build Type

push

Committed by

Commit Message

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

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.0

/packages/typography/src/styled/StyledCodeBlockLine.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 { Language } from 'prism-react-renderer';
import { DEFAULT_THEME, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
import { Diff, Size } from '../types';
import { StyledFont, THEME_SIZES } from './StyledFont';

const COMPONENT_ID = 'typography.codeblock_code';

export interface IStyledCodeBlockLineProps {
  language?: Language;
  isHighlighted?: boolean;
  isNumbered?: boolean;
  diff?: Diff;
  size?: Size;
}

const colorStyles = ({
  theme,
  diff,
  isHighlighted
}: IStyledCodeBlockLineProps & ThemeProps<DefaultTheme>) => {
  let backgroundColor;

  if (diff) {
    const hues = {
      hunk: 'royal',
      add: 'lime',
      delete: 'crimson',
      change: 'lemon'
    };

    backgroundColor = getColor({
      theme,
      hue: hues[diff],
      dark: { shade: 600 },
      light: { shade: 400 },
      transparency: theme.opacity[300]
    });
  } else if (isHighlighted) {
    backgroundColor = getColor({
      theme,
      dark: { hue: 'white' },
      light: { hue: 'neutralHue', shade: 700 },
      transparency: theme.opacity[100]
    });
  }

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

const lineNumberStyles = ({
  theme,
  language,
  size
}: IStyledCodeBlockLineProps & ThemeProps<DefaultTheme>) => {
  const color = getColor({ theme, variable: 'foreground.subtle', light: { offset: -100 } });
  let padding;

  if (language && language === 'diff') {
    padding = 0;
  } else if (size === 'small') {
    padding = theme.space.base * 4;
  } else if (size === 'large') {
    padding = theme.space.base * 7;
  } else {
    padding = theme.space.base * 6;
  }

  return `
    &::before {
      display: table-cell;
      padding-right: ${padding}px;
      width: 1px;
      text-align: right;
      color: ${color};
      content: counter(linenumber);
      counter-increment: linenumber;
    }
  `;
};

/*
 * 1. Fix line display for mobile.
 * 2. Match parent padding for overflow scroll.
 */
export const StyledCodeBlockLine = styled(StyledFont as 'code').attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION,
  as: 'code',
  isMonospace: true
})<IStyledCodeBlockLineProps>`
  display: table-row;
  height: ${props => props.theme.lineHeights[THEME_SIZES[props.size!]]}; /* [1] */
  direction: ltr;

  ${colorStyles};

  ${props => props.isNumbered && lineNumberStyles(props)};

  &::after {
    display: inline-block;
    width: ${props => props.theme.space.base * 3}px; /* [2] */
    content: '';
  }

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

StyledCodeBlockLine.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';	19✔
9	import { Language } from 'prism-react-renderer';
10	import { DEFAULT_THEME, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';	19✔
11	import { Diff, Size } from '../types';
12	import { StyledFont, THEME_SIZES } from './StyledFont';	19✔
13
14	const COMPONENT_ID = 'typography.codeblock_code';	19✔
15
16	export interface IStyledCodeBlockLineProps {
17	language?: Language;
18	isHighlighted?: boolean;
19	isNumbered?: boolean;
20	diff?: Diff;
21	size?: Size;
22	}
23
24	const colorStyles = ({	19✔
25	theme,
26	diff,
27	isHighlighted
28	}: IStyledCodeBlockLineProps & ThemeProps<DefaultTheme>) => {
29	let backgroundColor;
30
31	if (diff) {	47✔
32	const hues = {	12✔
33	hunk: 'royal',
34	add: 'lime',
35	delete: 'crimson',
36	change: 'lemon'
37	};
38
39	backgroundColor = getColor({	12✔
40	theme,
41	hue: hues[diff],
42	dark: { shade: 600 },
43	light: { shade: 400 },
44	transparency: theme.opacity[300]
45	});
46	} else if (isHighlighted) {	35✔
47	backgroundColor = getColor({	4✔
48	theme,
49	dark: { hue: 'white' },
50	light: { hue: 'neutralHue', shade: 700 },
51	transparency: theme.opacity[100]
52	});
53	}
54
55	return css`	47✔
56	background-color: ${backgroundColor};
57	`;
58	};
59
60	const lineNumberStyles = ({	19✔
61	theme,
62	language,
63	size
64	}: IStyledCodeBlockLineProps & ThemeProps<DefaultTheme>) => {
65	const color = getColor({ theme, variable: 'foreground.subtle', light: { offset: -100 } });	4✔
66	let padding;
67
68	if (language && language === 'diff') {	4!
69	padding = 0;	×
70	} else if (size === 'small') {	4!
NEW 71	padding = theme.space.base * 4;	×
72	} else if (size === 'large') {	4!
NEW 73	padding = theme.space.base * 7;	×
74	} else {
75	padding = theme.space.base * 6;	4✔
76	}
77
78	return `	4✔
79	&::before {
80	display: table-cell;
81	padding-right: ${padding}px;
82	width: 1px;
83	text-align: right;
84	color: ${color};
85	content: counter(linenumber);
86	counter-increment: linenumber;
87	}
88	`;
89	};
90
91	/*
92	* 1. Fix line display for mobile.
93	* 2. Match parent padding for overflow scroll.
94	*/
95	export const StyledCodeBlockLine = styled(StyledFont as 'code').attrs({	47✔
96	'data-garden-id': COMPONENT_ID,
97	'data-garden-version': PACKAGE_VERSION,
98	as: 'code',
99	isMonospace: true
100	})<IStyledCodeBlockLineProps>`
101	display: table-row;
102	height: ${props => props.theme.lineHeights[THEME_SIZES[props.size!]]}; /* [1] */	47✔
103	direction: ltr;
104
105	${colorStyles};
106
107	${props => props.isNumbered && lineNumberStyles(props)};	47✔
108
109	&::after {
110	display: inline-block;
111	width: ${props => props.theme.space.base * 3}px; /* [2] */	47✔
112	content: '';
113	}
114
115	${props => retrieveComponentStyles(COMPONENT_ID, props)};	47✔
116	`;
117
118	StyledCodeBlockLine.defaultProps = {	19✔
119	theme: DEFAULT_THEME
120	};

zendeskgarden / react-components / #2641

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