-
Notifications
You must be signed in to change notification settings - Fork 91
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(theming): add new
getCheckeredBackground utility (#1793)
- Loading branch information
Showing
10 changed files
with
169 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 0 additions & 32 deletions
32
packages/colorpickers/src/styled/common/checkeredBackground.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /** | ||
| * 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 { getCheckeredBackground } from './getCheckeredBackground'; | ||
| import DEFAULT_THEME from '../elements/theme'; | ||
| import PALETTE from '../elements/palette'; | ||
|
|
||
| describe('getCheckeredBackground', () => { | ||
| it('returns a valid background', () => { | ||
| const size = 10; | ||
| const result = getCheckeredBackground({ theme: DEFAULT_THEME, size }); | ||
| const expected1 = `0 0px / ${size}px ${size}px repeat`; | ||
| const expected2 = `${size / 2}px ${size / 2}px / ${size}px ${size}px repeat`; | ||
|
|
||
| expect(result).toContain(expected1); | ||
| expect(result).toContain(expected2); | ||
| }); | ||
|
|
||
| it('handles color overlay as expected', () => { | ||
| const expected = `${PALETTE.blue[700]}80`; | ||
| const result = getCheckeredBackground({ theme: DEFAULT_THEME, size: 10, overlay: expected }); | ||
|
|
||
| expect(result).toContain(`linear-gradient(${expected}, ${expected})`); | ||
| }); | ||
|
|
||
| it('handles linear-gradient overlay as expected', () => { | ||
| const expected = `linear-gradient(to right, ${PALETTE.white}, ${PALETTE.black})`; | ||
| const result = getCheckeredBackground({ theme: DEFAULT_THEME, size: 10, overlay: expected }); | ||
|
|
||
| expect(result).toContain(`${expected},`); | ||
| }); | ||
|
|
||
| it('handles vertical position as expected', () => { | ||
| const size = 10; | ||
| const positionY = DEFAULT_THEME.space.base; | ||
| const result = getCheckeredBackground({ theme: DEFAULT_THEME, size, positionY }); | ||
| const expected1 = `0 ${positionY}px`; | ||
| const expected2 = `${size / 2}px ${size / 2 + positionY}px`; | ||
|
|
||
| expect(result).toContain(expected1); | ||
| expect(result).toContain(expected2); | ||
| }); | ||
|
|
||
| it('handles repeat as expected', () => { | ||
| const repeat = 'repeat-x'; | ||
| const result = getCheckeredBackground({ theme: DEFAULT_THEME, size: 10, repeat }); | ||
|
|
||
| expect(result).toContain(repeat); | ||
| }); | ||
|
|
||
| it('handles RTL as expected', () => { | ||
| const theme = { ...DEFAULT_THEME, rtl: true }; | ||
| const size = 10; | ||
| const result = getCheckeredBackground({ theme, size }); | ||
| const expected1 = `100% 0px / ${size}px ${size}px repeat`; | ||
| const expected2 = `calc(100% - ${size / 2}px) ${size / 2}px / ${size}px ${size}px repeat`; | ||
|
|
||
| expect(result).toContain(expected1); | ||
| expect(result).toContain(expected2); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /** | ||
| * 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 { CheckeredBackgroundParameters } from '../types'; | ||
| import { getColor } from './getColor'; | ||
|
|
||
| /** | ||
| * Get a checkered background image. | ||
| * | ||
| * @param {Object} options.theme Provides information for pattern color and LTR/RTL layout | ||
| * @param {number} options.size The pixel size of the checkered pattern | ||
| * @param {string} [options.overlay] Optional | ||
| * [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) with transparency or | ||
| * [`linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) | ||
| * overlay to apply on top of the checkered pattern | ||
| * @param {number} [options.positionY=0] Optional vertical position for starting the pattern (default `0`) | ||
| * @param {string} [options.repeat='repeat'] Optional repeat value for the pattern; either `'repeat'` or `'repeat-x'` (default `'repeat'`) | ||
| */ | ||
| export const getCheckeredBackground = ({ | ||
| theme, | ||
| size, | ||
| overlay, | ||
| positionY = 0, | ||
| repeat = 'repeat' | ||
| }: CheckeredBackgroundParameters) => { | ||
| const color = getColor({ theme, variable: 'border.default' }); | ||
| const dimensions = `${size}px ${size}px`; | ||
| const positionX1 = theme.rtl ? '100%' : '0'; | ||
| const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`; | ||
| const position1 = `${positionX1} ${positionY}px`; | ||
| const position2 = `${positionX2} ${size / 2 + positionY}px`; | ||
| const position3 = `${positionX2} ${positionY}px`; | ||
| const position4 = `${positionX1} ${size / -2 + positionY}px`; | ||
| let retVal = ` | ||
| linear-gradient(45deg, ${color} 25%, transparent 25%) ${position1} / ${dimensions} ${repeat}, | ||
| linear-gradient(45deg, transparent 75%, ${color} 75%) ${position2} / ${dimensions} ${repeat}, | ||
| linear-gradient(135deg, ${color} 25%, transparent 25%) ${position3} / ${dimensions} ${repeat}, | ||
| linear-gradient(135deg, transparent 75%, ${color} 75%) ${position4} / ${dimensions} ${repeat} | ||
| `; | ||
|
|
||
| if (overlay) { | ||
| retVal = overlay.startsWith('linear-gradient') | ||
| ? `${overlay}, ${retVal}` | ||
| : `linear-gradient(${overlay}, ${overlay}), ${retVal}`; | ||
| } | ||
|
|
||
| return retVal; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters