diff options
Diffstat (limited to 'server/sonar-web/design-system/src/helpers')
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 ( |