#2638

Committed 19 Aug 2024 08:29PM UTC coverage: 96.68% (+0.7%) from 96.022%

Build # #2638

Build Type

push

Committed by

Commit Message

chore: add v9 theming as a valid peer dependency (#1894)

Run Details

2948 of 3207 branches covered (91.92%)

Branch coverage included in aggregate %.

8642 of 8781 relevant lines covered (98.42%)

252.76 hits per line

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

89.66

/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, getColorV8 } from '@zendeskgarden/react-theming';
import { Diff, Size } from '../types';
import { StyledFont, THEME_SIZES } from './StyledFont';

const COMPONENT_ID = 'typography.codeblock_code';

const colorStyles = (props: IStyledCodeBlockLineProps & ThemeProps<DefaultTheme>) => {
  let backgroundColor;

  if (props.diff) {
    let hue;

    switch (props.diff) {
      case 'hunk':
        hue = 'royal';
        break;

      case 'add':
        hue = 'lime';
        break;

      case 'delete':
        hue = 'crimson';
        break;

      case 'change':
        hue = 'lemon';
        break;
    }

    backgroundColor = getColorV8(hue, 400, props.theme, 0.2);
  } else if (props.isHighlighted) {
    const hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;

    backgroundColor = getColorV8(hue, 600, props.theme, 0.1);
  }

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

const lineNumberStyles = (props: IStyledCodeBlockLineProps & ThemeProps<DefaultTheme>) => {
  const color = getColorV8('neutralHue', props.isLight ? 600 : 500, props.theme);
  let padding;

  if (props.language && props.language === 'diff') {
    padding = 0;
  } else if (props.size === 'small') {
    padding = props.theme.space.base * 4;
  } else if (props.size === 'large') {
    padding = props.theme.space.base * 7;
  } else {
    padding = props.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;
    }
  `;
};

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

/**
 * 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;

  ${props => colorStyles(props)};

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

zendeskgarden / react-components / #2638

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