48b9eaea-a665-4630-b4b0-e44ec9a373d3

Committed 08 May 2024 06:27PM UTC coverage: 96.209% (-0.007%) from 96.216%

Build # 48b9eaea-a665-4630-b4b0-e44ec9a373d3

Build Type

push

circleci

Committed by

geotrev

Commit Message

feat(drag-drop): updates package to v9 colors

Run Details

3286 of 3617 branches covered (90.85%)

Branch coverage included in aggregate %.

11 of 11 new or added lines in 2 files covered. (100.0%)

1 existing line in 1 file now uncovered.

9937 of 10127 relevant lines covered (98.12%)

217.1 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 } = theme;
  const offsetY = `${space.base * 5}px`;
  const blurRadius = `${space.base * 7}px`;
  const color = getColor({
    hue: 'neutralHue',
    shade: 900,
    theme,
    transparency: theme.opacity[100]
  }) 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: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',
      transparency: theme.opacity[100],
      ...(!isGrabbed && { 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 } = 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: 900,
37	theme,
38	transparency: theme.opacity[100]
39	}) as string;
40
41	return shadows.lg(offsetY, blurRadius, color);	9✔
42	}
43
44	const colorStyles = (props: IStyledDraggableProps) => {	6✔
45	const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props;	9✔
46
47	const dragShadow = getDragShadow(theme);	9✔
48	const baseBgColor = getColor({ variable: 'background.default', theme });	9✔
49	const subtleBgColor = getColor({	9✔
50	variable: 'background.emphasis',
51	transparency: theme.opacity[100],
52	dark: { offset: -100 },
53	theme
54	});
55	const disabledColor = getColor({	9✔
56	variable: 'foreground.subtle',
57	light: { offset: -100 },
58	dark: { offset: 200 },
59	theme
60	});
61
62	let color;
63	let hoverBackgroundColor;
64	let boxShadow;
65	let borderColor = 'transparent';	9✔
66	let backgroundColor = baseBgColor;	9✔
67
68	if (isDisabled) {	9✔
69	backgroundColor = subtleBgColor;	2✔
70	color = disabledColor;	2✔
71	} else if (isPlaceholder) {	7✔
72	backgroundColor = subtleBgColor;	1✔
73	} else {
74	color = getColor({ variable: 'foreground.default', theme });	6✔
75	borderColor = isBare ? 'transparent' : getColor({ variable: 'border.default', theme });	6!
76	hoverBackgroundColor = getColor({	6✔
77	variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis',	6✔
78	transparency: theme.opacity[100],
79	...(!isGrabbed && { 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 / 48b9eaea-a665-4630-b4b0-e44ec9a373d3

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