roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-06-16 18:29:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[ui] add media query template literals, convert everything to the superior.

Browse source
This commit is contained in:
41666 2019-04-03 13:59:13 -05:00
parent c40c04e55e
commit f2bb6a7b18
No known key found for this signature in database
GPG key ID: BC51D07640DC10AF
10 changed files with 90 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

18
packages/roleypoly-ui/kit/__test__/__snapshots__/media.test.js.snap
View file

@ -17,3 +17,21 @@ font-size: 2em;
font-size: 2.5em;
};"
`;
exports[`mediaTemplateLiteral renders how we expect 1`] = `
"@media screen and (min-width: 0px) {
font-size: 0.5em;
};
@media screen and (min-width: 544px) {
font-size: 1em;
};
@media screen and (min-width: 768px) {
font-size: 1.5em;
};
@media screen and (min-width: 1012px) {
font-size: 2em;
};
@media screen and (min-width: 1280px) {
font-size: 2.5em;
};"
`;

25
packages/roleypoly-ui/kit/__test__/media.test.js
View file

@ -1,5 +1,5 @@
/* eslint-env jest */
import MediaQuery from '../media'
import MediaQuery, { xs, sm, md, lg, xl } from '../media'
describe('MediaQuery', () => {
it('outputs media queries', () => {
@ -14,3 +14,26 @@ describe('MediaQuery', () => {
expect(mq).toMatchSnapshot()
})
})
describe('mediaTemplateLiteral', () => {
it('renders how we expect', () => {
// this is a weird fixture because of how we render MediaQuery for testing
const mq = `${xs`font-size: 0.5em;`}
${sm`font-size: 1em;`}
${md`font-size: 1.5em;`}
${lg`font-size: 2em;`}
${xl`font-size: 2.5em;`}`
expect(mq).toMatchSnapshot()
const mq2 = MediaQuery({//
xs: 'font-size: 0.5em;',
sm: 'font-size: 1em;',
md: 'font-size: 1.5em;',
lg: 'font-size: 2em;',
xl: 'font-size: 2.5em;'
})
expect(mq).toEqual(mq2)
})
})

9
packages/roleypoly-ui/kit/media.js
View file

@ -17,6 +17,15 @@ export const breakpoints = {
xl: 1280
}
const mediaTemplateLiteral = (size: number, ...stuff: any): string =>
`@media screen and (min-width: ${size}px) {\n${stuff.join()}\n};`
export const xs = mediaTemplateLiteral.bind(null, breakpoints.xs)
export const sm = mediaTemplateLiteral.bind(null, breakpoints.sm)
export const md = mediaTemplateLiteral.bind(null, breakpoints.md)
export const lg = mediaTemplateLiteral.bind(null, breakpoints.lg)
export const xl = mediaTemplateLiteral.bind(null, breakpoints.xl)
const MediaQuery = (mq: MediaQueryConfig) => {
const out = []