aboutsummaryrefslogtreecommitdiffstats
path: root/server/sonar-web/design-system/src/helpers
diff options
context:
space:
mode:
Diffstat (limited to 'server/sonar-web/design-system/src/helpers')
-rw-r--r--server/sonar-web/design-system/src/helpers/__tests__/theme-test.ts38
-rw-r--r--server/sonar-web/design-system/src/helpers/keyboard.ts2
-rw-r--r--server/sonar-web/design-system/src/helpers/positioning.ts14
-rw-r--r--server/sonar-web/design-system/src/helpers/theme.ts6
4 files changed, 30 insertions, 30 deletions
diff --git a/server/sonar-web/design-system/src/helpers/__tests__/theme-test.ts b/server/sonar-web/design-system/src/helpers/__tests__/theme-test.ts
index 66f1b97ce05..f82544e8712 100644
--- a/server/sonar-web/design-system/src/helpers/__tests__/theme-test.ts
+++ b/server/sonar-web/design-system/src/helpers/__tests__/theme-test.ts
@@ -33,13 +33,13 @@ describe('getProp', () => {
describe('themeColor', () => {
it('should work for light theme', () => {
expect(ThemeHelper.themeColor('backgroundPrimary')({ theme: lightTheme })).toEqual(
- 'rgb(252,252,253)'
+ 'rgb(252,252,253)',
);
});
it('should work with a theme-defined opacity', () => {
expect(ThemeHelper.themeColor('bannerIconHover')({ theme: lightTheme })).toEqual(
- 'rgba(217,45,32,0.2)'
+ 'rgba(217,45,32,0.2)',
);
});
@@ -53,13 +53,13 @@ describe('themeColor', () => {
ThemeHelper.themeColor(ThemeHelper.themeContrast('backgroundPrimary')({ theme: lightTheme }))(
{
theme: lightTheme,
- }
- )
+ },
+ ),
).toEqual('rgb(8,9,12)');
expect(
ThemeHelper.themeColor(ThemeHelper.themeAvatarColor('luke')({ theme: lightTheme }))({
theme: lightTheme,
- })
+ }),
).toEqual('rgb(209,215,254)');
});
});
@@ -67,7 +67,7 @@ describe('themeColor', () => {
describe('themeContrast', () => {
it('should work for light theme', () => {
expect(ThemeHelper.themeContrast('backgroundPrimary')({ theme: lightTheme })).toEqual(
- 'rgb(8,9,12)'
+ 'rgb(8,9,12)',
);
});
@@ -75,19 +75,19 @@ describe('themeContrast', () => {
expect(ThemeHelper.themeContrast('var(--test)')({ theme: lightTheme })).toEqual('var(--test)');
expect(ThemeHelper.themeContrast('rgb(0,0,0)')({ theme: lightTheme })).toEqual('rgb(0,0,0)');
expect(ThemeHelper.themeContrast('rgba(0,0,0,1)')({ theme: lightTheme })).toEqual(
- 'rgba(0,0,0,1)'
+ 'rgba(0,0,0,1)',
);
expect(
ThemeHelper.themeContrast(ThemeHelper.themeColor('backgroundPrimary')({ theme: lightTheme }))(
{
theme: lightTheme,
- }
- )
+ },
+ ),
).toEqual('rgb(252,252,253)');
expect(
ThemeHelper.themeContrast(ThemeHelper.themeAvatarColor('luke')({ theme: lightTheme }))({
theme: lightTheme,
- })
+ }),
).toEqual('rgb(209,215,254)');
expect(
ThemeHelper.themeContrast('backgroundPrimary')({
@@ -95,7 +95,7 @@ describe('themeContrast', () => {
...lightTheme,
contrasts: { ...lightTheme.contrasts, backgroundPrimary: 'inherit' },
},
- })
+ }),
).toEqual('inherit');
});
});
@@ -106,17 +106,17 @@ describe('themeBorder', () => {
});
it('should allow to override the color of the border', () => {
expect(ThemeHelper.themeBorder('focus', 'primaryLight')({ theme: lightTheme })).toEqual(
- '4px solid rgba(123,135,217,0.2)'
+ '4px solid rgba(123,135,217,0.2)',
);
});
it('should allow to override the opacity of the border', () => {
expect(ThemeHelper.themeBorder('focus', undefined, 0.5)({ theme: lightTheme })).toEqual(
- '4px solid rgba(197,205,223,0.5)'
+ '4px solid rgba(197,205,223,0.5)',
);
});
it('should allow to pass a CSS prop as color name', () => {
expect(
- ThemeHelper.themeBorder('focus', 'var(--outlineColor)', 0.5)({ theme: lightTheme })
+ ThemeHelper.themeBorder('focus', 'var(--outlineColor)', 0.5)({ theme: lightTheme }),
).toEqual('4px solid var(--outlineColor)');
});
});
@@ -124,25 +124,25 @@ describe('themeBorder', () => {
describe('themeShadow', () => {
it('should work for light theme', () => {
expect(ThemeHelper.themeShadow('xs')({ theme: lightTheme })).toEqual(
- '0px 1px 2px 0px rgba(29,33,47,0.05)'
+ '0px 1px 2px 0px rgba(29,33,47,0.05)',
);
});
it('should allow to override the color of the shadow', () => {
expect(ThemeHelper.themeShadow('xs', 'backgroundPrimary')({ theme: lightTheme })).toEqual(
- '0px 1px 2px 0px rgba(252,252,253,0.05)'
+ '0px 1px 2px 0px rgba(252,252,253,0.05)',
);
expect(ThemeHelper.themeShadow('xs', 'transparent')({ theme: lightTheme })).toEqual(
- '0px 1px 2px 0px transparent'
+ '0px 1px 2px 0px transparent',
);
});
it('should allow to override the opacity of the shadow', () => {
expect(ThemeHelper.themeShadow('xs', 'backgroundPrimary', 0.8)({ theme: lightTheme })).toEqual(
- '0px 1px 2px 0px rgba(252,252,253,0.8)'
+ '0px 1px 2px 0px rgba(252,252,253,0.8)',
);
});
it('should allow to pass a CSS prop as color name', () => {
expect(ThemeHelper.themeShadow('xs', 'var(--shadowColor)')({ theme: lightTheme })).toEqual(
- '0px 1px 2px 0px var(--shadowColor)'
+ '0px 1px 2px 0px var(--shadowColor)',
);
});
});
diff --git a/server/sonar-web/design-system/src/helpers/keyboard.ts b/server/sonar-web/design-system/src/helpers/keyboard.ts
index dd6f1c9a515..6ab67e51496 100644
--- a/server/sonar-web/design-system/src/helpers/keyboard.ts
+++ b/server/sonar-web/design-system/src/helpers/keyboard.ts
@@ -55,7 +55,7 @@ export function isInput(event: KeyboardEvent): boolean {
}
export function isTextarea(
- event: KeyboardEvent
+ event: KeyboardEvent,
): event is KeyboardEvent & { target: HTMLTextAreaElement } {
return event.target instanceof HTMLTextAreaElement;
}
diff --git a/server/sonar-web/design-system/src/helpers/positioning.ts b/server/sonar-web/design-system/src/helpers/positioning.ts
index 47afd6b3f49..a918b0d9096 100644
--- a/server/sonar-web/design-system/src/helpers/positioning.ts
+++ b/server/sonar-web/design-system/src/helpers/positioning.ts
@@ -80,7 +80,7 @@ const MARGIN_TO_EDGE = 4;
export function popupPositioning(
toggleNode: Element,
popupNode: Element,
- placement: PopupPlacement = PopupPlacement.Bottom
+ placement: PopupPlacement = PopupPlacement.Bottom,
) {
const toggleRect = toggleNode.getBoundingClientRect();
const popupRect = popupNode.getBoundingClientRect();
@@ -136,12 +136,12 @@ export function popupPositioning(
const inBoundariesLeft = Math.min(
Math.max(left, getMinLeftPlacement(toggleRect)),
- getMaxLeftPlacement(toggleRect, popupRect)
+ getMaxLeftPlacement(toggleRect, popupRect),
);
const inBoundariesTop = Math.min(
Math.max(top, getMinTopPlacement(toggleRect)),
- getMaxTopPlacement(toggleRect, popupRect)
+ getMaxTopPlacement(toggleRect, popupRect),
);
return {
@@ -157,27 +157,27 @@ export function popupPositioning(
function getMinLeftPlacement(toggleRect: DOMRect) {
return Math.min(
MARGIN_TO_EDGE, // Left edge of the sceen
- toggleRect.left + toggleRect.width / 2 // Left edge of the screen when scrolled
+ toggleRect.left + toggleRect.width / 2, // Left edge of the screen when scrolled
);
}
function getMaxLeftPlacement(toggleRect: DOMRect, popupRect: DOMRect) {
return Math.max(
document.documentElement.clientWidth - popupRect.width - MARGIN_TO_EDGE, // Right edge of the screen
- toggleRect.left + toggleRect.width / 2 - popupRect.width // Right edge of the screen when scrolled
+ toggleRect.left + toggleRect.width / 2 - popupRect.width, // Right edge of the screen when scrolled
);
}
function getMinTopPlacement(toggleRect: DOMRect) {
return Math.min(
MARGIN_TO_EDGE, // Top edge of the sceen
- toggleRect.top + toggleRect.height / 2 // Top edge of the screen when scrolled
+ toggleRect.top + toggleRect.height / 2, // Top edge of the screen when scrolled
);
}
function getMaxTopPlacement(toggleRect: DOMRect, popupRect: DOMRect) {
return Math.max(
document.documentElement.clientHeight - popupRect.height - MARGIN_TO_EDGE, // Bottom edge of the screen
- toggleRect.top + toggleRect.height / 2 - popupRect.height // Bottom edge of the screen when scrolled
+ toggleRect.top + toggleRect.height / 2 - popupRect.height, // Bottom edge of the screen when scrolled
);
}
diff --git a/server/sonar-web/design-system/src/helpers/theme.ts b/server/sonar-web/design-system/src/helpers/theme.ts
index 77048771012..989347fe27f 100644
--- a/server/sonar-web/design-system/src/helpers/theme.ts
+++ b/server/sonar-web/design-system/src/helpers/theme.ts
@@ -39,7 +39,7 @@ export function themeContrast(name: ThemeColors | CSSColor) {
export function themeBorder(
name: keyof Theme['borders'] = 'default',
color?: ThemeColors | CSSColor,
- opacity?: number
+ opacity?: number,
) {
return function ({ theme }: ThemedProps) {
const [width, style, ...rgba] = theme.borders[name];
@@ -50,7 +50,7 @@ export function themeBorder(
export function themeShadow(
name: keyof Theme['shadows'],
color?: ThemeColors | CSSColor,
- opacity?: number
+ opacity?: number,
) {
return function ({ theme }: ThemedProps) {
const shadows = theme.shadows[name];
@@ -89,7 +89,7 @@ function getColor(
theme: Theme,
[r, g, b, a]: number[],
colorOverride?: ThemeColors | CSSColor,
- opacityOverride?: number
+ opacityOverride?: number,
) {
// Custom CSS property or rgb(a) color, return it directly
if (