61e1083c-a460-48c8-8c20-357900776552

Committed 09 May 2024 06:57PM UTC coverage: 96.144% (-0.07%) from 96.216%

Build # 61e1083c-a460-48c8-8c20-357900776552

Build Type

Pull #1805

circleci

Committed by

geotrev

Commit Message

refactor: clean up variable strings

Pull Request Pull Request #1805: 🚧 feat(draggable): recolors components with new palette

Run Details

3280 of 3617 branches covered (90.68%)

Branch coverage included in aggregate %.

28 of 31 new or added lines in 4 files covered. (90.32%)

1 existing line in 1 file now uncovered.

9935 of 10128 relevant lines covered (98.09%)

217.06 hits per line

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

94.44

/packages/drag-drop/src/styled/draggable/StyledDraggable.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, { ThemeProps, DefaultTheme, css } from 'styled-components';
import {
  retrieveComponentStyles,
  DEFAULT_THEME,
  getColor,
  IGardenTheme,
  getLineHeight,
  focusStyles
} from '@zendeskgarden/react-theming';
import { StyledGrip } from './StyledGrip';

const COMPONENT_ID = 'draggable';

export interface IStyledDraggableProps extends ThemeProps<DefaultTheme> {
  focusInset?: boolean;
  isBare?: boolean;
  isCompact?: boolean;
  isDisabled?: boolean;
  isGrabbed?: boolean;
  isPlaceholder?: boolean;
}

export function getDragShadow(theme: IGardenTheme) {
  const { space, shadows, opacity } = theme;
  const offsetY = `${space.base * 5}px`;
  const blurRadius = `${space.base * 7}px`;
  const color = getColor({
    hue: 'neutralHue',
    shade: 1200,
    light: { transparency: opacity[200] },
    dark: { transparency: opacity[1000] },
    theme
  }) as string;

  return shadows.lg(offsetY, blurRadius, color);
}

const colorStyles = (props: IStyledDraggableProps) => {
  const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props;

  const dragShadow = getDragShadow(theme);
  const baseBgColor = getColor({ variable: 'background.default', theme });
  const subtleBgColor = getColor({
    variable: 'background.emphasis',
    transparency: theme.opacity[100],
    dark: { offset: -100 },
    theme
  });
  const disabledColor = getColor({
    variable: 'foreground.subtle',
    light: { offset: -100 },
    dark: { offset: 200 },
    theme
  });

  let color;
  let hoverBackgroundColor;
  let boxShadow;
  let borderColor = 'transparent';
  let backgroundColor = baseBgColor;

  if (isDisabled) {
    backgroundColor = subtleBgColor;
    color = disabledColor;
  } else if (isPlaceholder) {
    backgroundColor = subtleBgColor;
  } else {
    color = getColor({ variable: 'foreground.default', theme });
    borderColor = isBare ? 'transparent' : getColor({ variable: 'border.default', theme });
    hoverBackgroundColor = getColor({
      variable: `background.${isGrabbed ? 'raised' : 'primaryEmphasis'}`,
      ...(!isGrabbed && { transparency: theme.opacity[100], dark: { offset: -100 } }),
      theme
    });
    boxShadow = dragShadow;
  }

  return css`
    border-color: ${borderColor};
    box-shadow: ${isGrabbed && boxShadow};
    background-color: ${backgroundColor};
    color: ${color};

    &:hover {
      background-color: ${hoverBackgroundColor};
    }

    ${focusStyles({
      theme,
      inset: focusInset,
      boxShadow: isGrabbed ? dragShadow : undefined
    })}

    > ${StyledGrip} {
      color: ${isDisabled && disabledColor};
    }
  `;
};

const sizeStyles = (props: IStyledDraggableProps) => {
  const { isCompact, theme } = props;
  const paddingDefault = theme.space.base * 2.25;
  const paddingCompact = theme.space.base * 1.25;

  /**
   * 1. Reset margin, e.g. when alternative tag includes native margin
   */
  return css`
    margin: 0; /* [1] */
    border: ${theme.borders.sm};
    border-radius: ${theme.borderRadii.md};
    padding: ${isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`};
    line-height: ${getLineHeight(theme.space.base * 5, theme.fontSizes.md)};
    font-size: ${theme.fontSizes.md};
    font-weight: ${theme.fontWeights.regular};
  `;
};

const getCursor = (props: IStyledDraggableProps) => {
  let cursor = props.isGrabbed ? 'grabbing' : 'grab';

  if (props.isDisabled || props.isPlaceholder) {
    cursor = 'default';
  }

  return cursor;
};

export const StyledDraggable = styled.div.attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': PACKAGE_VERSION
})<IStyledDraggableProps>`
  display: flex;
  flex: 1;
  align-items: center;
  /* prettier-ignore */
  transition:
    border-color 0.25s ease-in-out,
    box-shadow 0.1s ease-in-out,
    background-color 0.25s ease-in-out,
    color 0.25s ease-in-out,
    z-index 0.25s ease-in-out;
  cursor: ${getCursor};
  font-family: ${props => props.theme.fonts.system};
  direction: ${props => props.theme.rtl && 'rtl'};
  box-sizing: border-box;

  ${sizeStyles}

  ${colorStyles}

  > * {
    visibility: ${p => p.isPlaceholder && !p.isDisabled && 'hidden'};
  }

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

StyledDraggable.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, { ThemeProps, DefaultTheme, css } from 'styled-components';	6✔
9	import {
10	retrieveComponentStyles,
11	DEFAULT_THEME,
12	getColor,
13	IGardenTheme,
14	getLineHeight,
15	focusStyles
16	} from '@zendeskgarden/react-theming';	6✔
17	import { StyledGrip } from './StyledGrip';	6✔
18
19	const COMPONENT_ID = 'draggable';	6✔
20
21	export interface IStyledDraggableProps extends ThemeProps<DefaultTheme> {
22	focusInset?: boolean;
23	isBare?: boolean;
24	isCompact?: boolean;
25	isDisabled?: boolean;
26	isGrabbed?: boolean;
27	isPlaceholder?: boolean;
28	}
29
UNCOV 30	export function getDragShadow(theme: IGardenTheme) {	×
31	const { space, shadows, opacity } = theme;	9✔
32	const offsetY = `${space.base * 5}px`;	9✔
33	const blurRadius = `${space.base * 7}px`;	9✔
34	const color = getColor({	9✔
35	hue: 'neutralHue',
36	shade: 1200,
37	light: { transparency: opacity[200] },
38	dark: { transparency: opacity[1000] },
39	theme
40	}) as string;
41
42	return shadows.lg(offsetY, blurRadius, color);	9✔
43	}
44
45	const colorStyles = (props: IStyledDraggableProps) => {	6✔
46	const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props;	9✔
47
48	const dragShadow = getDragShadow(theme);	9✔
49	const baseBgColor = getColor({ variable: 'background.default', theme });	9✔
50	const subtleBgColor = getColor({	9✔
51	variable: 'background.emphasis',
52	transparency: theme.opacity[100],
53	dark: { offset: -100 },
54	theme
55	});
56	const disabledColor = getColor({	9✔
57	variable: 'foreground.subtle',
58	light: { offset: -100 },
59	dark: { offset: 200 },
60	theme
61	});
62
63	let color;
64	let hoverBackgroundColor;
65	let boxShadow;
66	let borderColor = 'transparent';	9✔
67	let backgroundColor = baseBgColor;	9✔
68
69	if (isDisabled) {	9✔
70	backgroundColor = subtleBgColor;	2✔
71	color = disabledColor;	2✔
72	} else if (isPlaceholder) {	7✔
73	backgroundColor = subtleBgColor;	1✔
74	} else {
75	color = getColor({ variable: 'foreground.default', theme });	6✔
76	borderColor = isBare ? 'transparent' : getColor({ variable: 'border.default', theme });	6!
77	hoverBackgroundColor = getColor({	6✔
78	variable: `background.${isGrabbed ? 'raised' : 'primaryEmphasis'}`,	6✔
79	...(!isGrabbed && { transparency: theme.opacity[100], dark: { offset: -100 } }),	11✔
80	theme
81	});
82	boxShadow = dragShadow;	6✔
83	}
84
85	return css`	9✔
86	border-color: ${borderColor};
87	box-shadow: ${isGrabbed && boxShadow};	10✔
88	background-color: ${backgroundColor};
89	color: ${color};
90
91	&:hover {
92	background-color: ${hoverBackgroundColor};
93	}
94
95	${focusStyles({
96	theme,
97	inset: focusInset,
98	boxShadow: isGrabbed ? dragShadow : undefined	9✔
99	})}
100
101	> ${StyledGrip} {
102	color: ${isDisabled && disabledColor};	11✔
103	}
104	`;
105	};
106
107	const sizeStyles = (props: IStyledDraggableProps) => {	6✔
108	const { isCompact, theme } = props;	9✔
109	const paddingDefault = theme.space.base * 2.25;	9✔
110	const paddingCompact = theme.space.base * 1.25;	9✔
111
112	/**
113	* 1. Reset margin, e.g. when alternative tag includes native margin
114	*/
115	return css`	9✔
116	margin: 0; /* [1] */
117	border: ${theme.borders.sm};
118	border-radius: ${theme.borderRadii.md};
119	padding: ${isCompact ? `${paddingCompact}px ${paddingDefault}px` : `${paddingDefault}px`};	9!
120	line-height: ${getLineHeight(theme.space.base * 5, theme.fontSizes.md)};
121	font-size: ${theme.fontSizes.md};
122	font-weight: ${theme.fontWeights.regular};
123	`;
124	};
125
126	const getCursor = (props: IStyledDraggableProps) => {	6✔
127	let cursor = props.isGrabbed ? 'grabbing' : 'grab';	9✔
128
129	if (props.isDisabled \|\| props.isPlaceholder) {	9✔
130	cursor = 'default';	3✔
131	}
132
133	return cursor;	9✔
134	};
135
136	export const StyledDraggable = styled.div.attrs({	9✔
137	'data-garden-id': COMPONENT_ID,
138	'data-garden-version': PACKAGE_VERSION
139	})<IStyledDraggableProps>`
140	display: flex;
141	flex: 1;
142	align-items: center;
143	/* prettier-ignore */
144	transition:
145	border-color 0.25s ease-in-out,
146	box-shadow 0.1s ease-in-out,
147	background-color 0.25s ease-in-out,
148	color 0.25s ease-in-out,
149	z-index 0.25s ease-in-out;
150	cursor: ${getCursor};
151	font-family: ${props => props.theme.fonts.system};	9✔
152	direction: ${props => props.theme.rtl && 'rtl'};	9!
153	box-sizing: border-box;
154
155	${sizeStyles}
156
157	${colorStyles}
158
159	> * {
160	visibility: ${p => p.isPlaceholder && !p.isDisabled && 'hidden'};	9✔
161	}
162
163	${props => retrieveComponentStyles(COMPONENT_ID, props)};	9✔
164	`;
165
166	StyledDraggable.defaultProps = {	6✔
167	theme: DEFAULT_THEME
168	};

zendeskgarden / react-components / 61e1083c-a460-48c8-8c20-357900776552

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