@hipay/hipay-material-ui 3.4.1 → 3.5.0

package/src/styles/colorManipulator.js

@@ -0,0 +1,251 @@
+/* eslint-disable no-use-before-define */
+
+import warning from 'warning';
+
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * @param {number} value The value to be clamped
+ * @param {number} min The lower boundary of the output range
+ * @param {number} max The upper boundary of the output range
+ * @returns {number} A number in the range [min, max]
+ */
+function clamp(value, min = 0, max = 1) {
+    warning(
+        value >= min && value <= max,
+        `Material-UI: the value provided ${value} is out of range [${min}, ${max}].`,
+    );
+
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+
+/**
+ * Converts a color from CSS hex format to CSS rgb format.
+ *
+ * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
+ * @returns {string} A CSS rgb color string
+ */
+export function convertHexToRGB(color) {
+    color = color.substr(1);
+
+    const re = new RegExp(`.{1,${color.length / 3}}`, 'g');
+    let colors = color.match(re);
+
+    if (colors && colors[0].length === 1) {
+        colors = colors.map(n => n + n);
+    }
+
+    return colors ? `rgb(${colors.map(n => parseInt(n, 16)).join(', ')})` : '';
+}
+
+/**
+ * Converts a color from CSS rgb format to CSS hex format.
+ *
+ * @param {string} color - RGB color, i.e. rgb(n, n, n)
+ * @returns {string} A CSS rgb color string, i.e. #nnnnnn
+ */
+export function rgbToHex(color) {
+    // Pass hex straight through
+    if (color.indexOf('#') === 0) {
+        return color;
+    }
+    function intToHex(c) {
+        const hex = c.toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    }
+
+    let { values } = decomposeColor(color);
+    values = values.map(n => intToHex(n));
+
+    return `#${values.join('')}`;
+}
+
+/**
+ * Returns an object with the type and values of a color.
+ *
+ * Note: Does not support rgb % values.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {object} - A MUI color object: {type: string, values: number[]}
+ */
+export function decomposeColor(color) {
+    if (color.charAt(0) === '#') {
+        return decomposeColor(convertHexToRGB(color));
+    }
+
+    const marker = color.indexOf('(');
+    const type = color.substring(0, marker);
+    let values = color.substring(marker + 1, color.length - 1).split(',');
+    values = values.map(value => parseFloat(value));
+
+    if (process.env.NODE_ENV !== 'production') {
+        if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
+            throw new Error(
+                [
+                    `Material-UI: unsupported \`${color}\` color.`,
+                    'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().',
+                ].join('\n'),
+            );
+        }
+    }
+
+    return { type, values };
+}
+
+/**
+ * Converts a color object with type and values to a string.
+ *
+ * @param {object} color - Decomposed color
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {array} color.values - [n,n,n] or [n,n,n,n]
+ * @returns {string} A CSS color string
+ */
+export function recomposeColor(color) {
+    const { type } = color;
+    let { values } = color;
+
+    if (type.indexOf('rgb') !== -1) {
+        // Only convert the first 3 values to int (i.e. not alpha)
+        values = values.map((n, i) => (i < 3 ? parseInt(n, 10) : n));
+    }
+
+    if (type.indexOf('hsl') !== -1) {
+        values[1] = `${values[1]}%`;
+        values[2] = `${values[2]}%`;
+    }
+
+    return `${color.type}(${values.join(', ')})`;
+}
+
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} A contrast ratio value in the range 0 - 21.
+ */
+export function getContrastRatio(foreground, background) {
+    const lumA = getLuminance(foreground);
+    const lumB = getLuminance(background);
+    return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+}
+
+/**
+ * The relative brightness of any point in a color space,
+ * normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} The relative brightness of the color in the range 0 - 1
+ */
+export function getLuminance(color) {
+    const decomposedColor = decomposeColor(color);
+
+    if (decomposedColor.type.indexOf('rgb') !== -1) {
+        const rgb = decomposedColor.values.map(val => {
+            val /= 255; // normalized
+            return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
+        });
+        // Truncate at 3 digits
+        return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
+    }
+
+    // else if (decomposedColor.type.indexOf('hsl') !== -1)
+    return decomposedColor.values[2] / 100;
+}
+
+/**
+ * Darken or lighten a colour, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function emphasize(color, coefficient = 0.15) {
+    return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+
+/**
+ * Set the absolute transparency of a color.
+ * Any existing alpha values are overwritten.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} value - value to set the alpha channel to in the range 0 -1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function fade(color, value) {
+    warning(color, `Material-UI: missing color argument in fade(${color}, ${value}).`);
+
+    if (!color) return color;
+
+    color = decomposeColor(color);
+    value = clamp(value);
+
+    if (color.type === 'rgb' || color.type === 'hsl') {
+        color.type += 'a';
+    }
+    color.values[3] = value;
+
+    return recomposeColor(color);
+}
+
+/**
+ * Darkens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function darken(color, coefficient) {
+    warning(color, `Material-UI: missing color argument in darken(${color}, ${coefficient}).`);
+
+    if (!color) return color;
+
+    color = decomposeColor(color);
+    coefficient = clamp(coefficient);
+
+    if (color.type.indexOf('hsl') !== -1) {
+        color.values[2] *= 1 - coefficient;
+    } else if (color.type.indexOf('rgb') !== -1) {
+        for (let i = 0; i < 3; i += 1) {
+            color.values[i] *= 1 - coefficient;
+        }
+    }
+    return recomposeColor(color);
+}
+
+/**
+ * Lightens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function lighten(color, coefficient) {
+    warning(color, `Material-UI: missing color argument in lighten(${color}, ${coefficient}).`);
+
+    if (!color) return color;
+
+    color = decomposeColor(color);
+    coefficient = clamp(coefficient);
+
+    if (color.type.indexOf('hsl') !== -1) {
+        color.values[2] += (100 - color.values[2]) * coefficient;
+    } else if (color.type.indexOf('rgb') !== -1) {
+        for (let i = 0; i < 3; i += 1) {
+            color.values[i] += (255 - color.values[i]) * coefficient;
+        }
+    }
+
+    return recomposeColor(color);
+}

package/src/styles/colorManipulator.test.js

@@ -0,0 +1,314 @@
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import {
+    recomposeColor,
+    convertHexToRGB,
+    rgbToHex,
+    darken,
+    decomposeColor,
+    emphasize,
+    fade,
+    getContrastRatio,
+    getLuminance,
+    lighten,
+} from './colorManipulator';
+
+describe('utils/colorManipulator', () => {
+    beforeEach(() => {
+        consoleErrorMock.spy();
+    });
+
+    afterEach(() => {
+        consoleErrorMock.reset();
+    });
+
+    describe('recomposeColor', () => {
+        it('converts a decomposed rgb color object to a string` ', () => {
+            assert.strictEqual(
+                recomposeColor({
+                    type: 'rgb',
+                    values: [255, 255, 255],
+                }),
+                'rgb(255, 255, 255)',
+            );
+        });
+
+        it('converts a decomposed rgba color object to a string` ', () => {
+            assert.strictEqual(
+                recomposeColor({
+                    type: 'rgba',
+                    values: [255, 255, 255, 0.5],
+                }),
+                'rgba(255, 255, 255, 0.5)',
+            );
+        });
+
+        it('converts a decomposed hsl color object to a string` ', () => {
+            assert.strictEqual(
+                recomposeColor({
+                    type: 'hsl',
+                    values: [100, 50, 25],
+                }),
+                'hsl(100, 50%, 25%)',
+            );
+        });
+
+        it('converts a decomposed hsla color object to a string` ', () => {
+            assert.strictEqual(
+                recomposeColor({
+                    type: 'hsla',
+                    values: [100, 50, 25, 0.5],
+                }),
+                'hsla(100, 50%, 25%, 0.5)',
+            );
+        });
+    });
+
+    describe('convertHexToRGB', () => {
+        it('converts a short hex color to an rgb color` ', () => {
+            assert.strictEqual(convertHexToRGB('#9f3'), 'rgb(153, 255, 51)');
+        });
+
+        it('converts a long hex color to an rgb color` ', () => {
+            assert.strictEqual(convertHexToRGB('#A94FD3'), 'rgb(169, 79, 211)');
+        });
+    });
+
+    describe('rgbToHex', () => {
+        it('converts an rgb color to a hex color` ', () => {
+            assert.strictEqual(rgbToHex('rgb(169, 79, 211)'), '#a94fd3');
+        });
+
+        it('passes a hex value through` ', () => {
+            assert.strictEqual(rgbToHex('#A94FD3'), '#A94FD3');
+        });
+    });
+
+    describe('decomposeColor', () => {
+        it('converts an rgb color string to an object with `type` and `value` keys', () => {
+            const { type, values } = decomposeColor('rgb(255, 255, 255)');
+            assert.strictEqual(type, 'rgb');
+            assert.deepEqual(values, [255, 255, 255]);
+        });
+
+        it('converts an rgba color string to an object with `type` and `value` keys', () => {
+            const { type, values } = decomposeColor('rgba(255, 255, 255, 0.5)');
+            assert.strictEqual(type, 'rgba');
+            assert.deepEqual(values, [255, 255, 255, 0.5]);
+        });
+
+        it('converts an hsl color string to an object with `type` and `value` keys', () => {
+            const { type, values } = decomposeColor('hsl(100, 50%, 25%)');
+            assert.strictEqual(type, 'hsl');
+            assert.deepEqual(values, [100, 50, 25]);
+        });
+
+        it('converts an hsla color string to an object with `type` and `value` keys', () => {
+            const { type, values } = decomposeColor('hsla(100, 50%, 25%, 0.5)');
+            assert.strictEqual(type, 'hsla');
+            assert.deepEqual(values, [100, 50, 25, 0.5]);
+        });
+    });
+
+    describe('getContrastRatio', () => {
+        it('returns a ratio for black : white', () => {
+            assert.strictEqual(getContrastRatio('#000', '#FFF'), 21);
+        });
+
+        it('returns a ratio for black : black', () => {
+            assert.strictEqual(getContrastRatio('#000', '#000'), 1);
+        });
+
+        it('returns a ratio for white : white', () => {
+            assert.strictEqual(getContrastRatio('#FFF', '#FFF'), 1);
+        });
+
+        it('returns a ratio for dark-grey : light-grey', () => {
+            assert.approximately(getContrastRatio('#707070', '#E5E5E5'), 3.93, 0.01);
+        });
+
+        it('returns a ratio for black : light-grey', () => {
+            assert.approximately(getContrastRatio('#000', '#888'), 5.92, 0.01);
+        });
+    });
+
+    describe('getLuminance', () => {
+        it('returns a valid luminance for rgb white', () => {
+            assert.strictEqual(getLuminance('rgba(0, 0, 0)'), 0);
+            assert.strictEqual(getLuminance('rgb(0, 0, 0)'), 0);
+        });
+
+        it('returns a valid luminance for rgb white', () => {
+            assert.strictEqual(getLuminance('rgba(255, 255, 255)'), 1);
+            assert.strictEqual(getLuminance('rgb(255, 255, 255)'), 1);
+        });
+
+        it('returns a valid luminance for rgb mid-grey', () => {
+            assert.strictEqual(getLuminance('rgba(127, 127, 127)'), 0.212);
+            assert.strictEqual(getLuminance('rgb(127, 127, 127)'), 0.212);
+        });
+
+        it('returns a valid luminance for an rgb color', () => {
+            assert.strictEqual(getLuminance('rgb(255, 127, 0)'), 0.364);
+        });
+
+        it('returns a valid luminance from an hsl color', () => {
+            assert.strictEqual(getLuminance('hsl(100, 100%, 50%)'), 0.5);
+        });
+
+        it('throw on invalid colors', () => {
+            assert.throw(() => {
+                getLuminance('black');
+            }, 'unsupported `black` color');
+        });
+    });
+
+    describe('emphasize', () => {
+        it('lightens a dark rgb color with the coefficient provided', () => {
+            assert.strictEqual(emphasize('rgb(1, 2, 3)', 0.4), lighten('rgb(1, 2, 3)', 0.4));
+        });
+
+        it('darkens a light rgb color with the coefficient provided', () => {
+            assert.strictEqual(
+                emphasize('rgb(250, 240, 230)', 0.3),
+                darken('rgb(250, 240, 230)', 0.3),
+            );
+        });
+
+        it('lightens a dark rgb color with the coefficient 0.15 by default', () => {
+            assert.strictEqual(emphasize('rgb(1, 2, 3)'), lighten('rgb(1, 2, 3)', 0.15));
+        });
+
+        it('darkens a light rgb color with the coefficient 0.15 by default', () => {
+            assert.strictEqual(emphasize('rgb(250, 240, 230)'), darken('rgb(250, 240, 230)', 0.15));
+        });
+    });
+
+    describe('fade', () => {
+        it('converts an rgb color to an rgba color with the value provided', () => {
+            assert.strictEqual(fade('rgb(1, 2, 3)', 0.4), 'rgba(1, 2, 3, 0.4)');
+        });
+
+        it('updates an rgba color with the alpha value provided', () => {
+            assert.strictEqual(fade('rgba(255, 0, 0, 0.2)', 0.5), 'rgba(255, 0, 0, 0.5)');
+        });
+
+        it('converts an hsl color to an hsla color with the value provided', () => {
+            assert.strictEqual(fade('hsl(0, 100%, 50%)', 0.1), 'hsla(0, 100%, 50%, 0.1)');
+        });
+
+        it('updates an hsla color with the alpha value provided', () => {
+            assert.strictEqual(fade('hsla(0, 100%, 50%, 0.2)', 0.5), 'hsla(0, 100%, 50%, 0.5)');
+        });
+
+        it('throw on invalid colors', () => {
+            assert.throw(() => {
+                fade('white', 0.4);
+            }, 'unsupported `white` color');
+        });
+    });
+
+    describe('darken', () => {
+        it("doesn't modify rgb black", () => {
+            assert.strictEqual(darken('rgb(0, 0, 0)', 0.1), 'rgb(0, 0, 0)');
+        });
+
+        it("doesn't overshoot if an above-range coefficient is supplied", () => {
+            assert.strictEqual(darken('rgb(0, 127, 255)', 1.5), 'rgb(0, 0, 0)');
+            assert.strictEqual(consoleErrorMock.callCount(), 1);
+        });
+
+        it("doesn't overshoot if a below-range coefficient is supplied", () => {
+            assert.strictEqual(darken('rgb(0, 127, 255)', -0.1), 'rgb(0, 127, 255)');
+            assert.strictEqual(consoleErrorMock.callCount(), 1);
+        });
+
+        it('darkens rgb white to black when coefficient is 1', () => {
+            assert.strictEqual(darken('rgb(255, 255, 255)', 1), 'rgb(0, 0, 0)');
+        });
+
+        it('retains the alpha value in an rgba color', () => {
+            assert.strictEqual(darken('rgb(0, 0, 0, 0.5)', 0.1), 'rgb(0, 0, 0, 0.5)');
+        });
+
+        it('darkens rgb white by 10% when coefficient is 0.1', () => {
+            assert.strictEqual(darken('rgb(255, 255, 255)', 0.1), 'rgb(229, 229, 229)');
+        });
+
+        it('darkens rgb red by 50% when coefficient is 0.5', () => {
+            assert.strictEqual(darken('rgb(255, 0, 0)', 0.5), 'rgb(127, 0, 0)');
+        });
+
+        it('darkens rgb grey by 50% when coefficient is 0.5', () => {
+            assert.strictEqual(darken('rgb(127, 127, 127)', 0.5), 'rgb(63, 63, 63)');
+        });
+
+        it("doesn't modify rgb colors when coefficient is 0", () => {
+            assert.strictEqual(darken('rgb(255, 255, 255)', 0), 'rgb(255, 255, 255)');
+        });
+
+        it('darkens hsl red by 50% when coefficient is 0.5', () => {
+            assert.strictEqual(darken('hsl(0, 100%, 50%)', 0.5), 'hsl(0, 100%, 25%)');
+        });
+
+        it("doesn't modify hsl colors when coefficient is 0", () => {
+            assert.strictEqual(darken('hsl(0, 100%, 50%)', 0), 'hsl(0, 100%, 50%)');
+        });
+
+        it("doesn't modify hsl colors when l is 0%", () => {
+            assert.strictEqual(darken('hsl(0, 50%, 0%)', 0.5), 'hsl(0, 50%, 0%)');
+        });
+    });
+
+    describe('lighten', () => {
+        it("doesn't modify rgb white", () => {
+            assert.strictEqual(lighten('rgb(255, 255, 255)', 0.1), 'rgb(255, 255, 255)');
+        });
+
+        it("doesn't overshoot if an above-range coefficient is supplied", () => {
+            assert.strictEqual(lighten('rgb(0, 127, 255)', 1.5), 'rgb(255, 255, 255)');
+            assert.strictEqual(consoleErrorMock.callCount(), 1);
+        });
+
+        it("doesn't overshoot if a below-range coefficient is supplied", () => {
+            assert.strictEqual(lighten('rgb(0, 127, 255)', -0.1), 'rgb(0, 127, 255)');
+            assert.strictEqual(consoleErrorMock.callCount(), 1);
+        });
+
+        it('lightens rgb black to white when coefficient is 1', () => {
+            assert.strictEqual(lighten('rgb(0, 0, 0)', 1), 'rgb(255, 255, 255)');
+        });
+
+        it('retains the alpha value in an rgba color', () => {
+            assert.strictEqual(lighten('rgb(255, 255, 255, 0.5)', 0.1), 'rgb(255, 255, 255, 0.5)');
+        });
+
+        it('lightens rgb black by 10% when coefficient is 0.1', () => {
+            assert.strictEqual(lighten('rgb(0, 0, 0)', 0.1), 'rgb(25, 25, 25)');
+        });
+
+        it('lightens rgb red by 50% when coefficient is 0.5', () => {
+            assert.strictEqual(lighten('rgb(255, 0, 0)', 0.5), 'rgb(255, 127, 127)');
+        });
+
+        it('lightens rgb grey by 50% when coefficient is 0.5', () => {
+            assert.strictEqual(lighten('rgb(127, 127, 127)', 0.5), 'rgb(191, 191, 191)');
+        });
+
+        it("doesn't modify rgb colors when coefficient is 0", () => {
+            assert.strictEqual(lighten('rgb(127, 127, 127)', 0), 'rgb(127, 127, 127)');
+        });
+
+        it('lightens hsl red by 50% when coefficient is 0.5', () => {
+            assert.strictEqual(lighten('hsl(0, 100%, 50%)', 0.5), 'hsl(0, 100%, 75%)');
+        });
+
+        it("doesn't modify hsl colors when coefficient is 0", () => {
+            assert.strictEqual(lighten('hsl(0, 100%, 50%)', 0), 'hsl(0, 100%, 50%)');
+        });
+
+        it("doesn't modify hsl colors when `l` is 100%", () => {
+            assert.strictEqual(lighten('hsl(0, 50%, 100%)', 0.5), 'hsl(0, 50%, 100%)');
+        });
+    });
+});

package/src/styles/createBreakpoints.js

@@ -0,0 +1,71 @@
+// Sorted ASC by size. That's important.
+// It can't be configured as it's used statically for propTypes.
+export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+// Keep in mind that @media is inclusive by the CSS specification.
+export default function createBreakpoints(breakpoints) {
+    const {
+        // The breakpoint **start** at this value.
+        // For instance with the first breakpoint xs: [xs, sm[.
+        values = {
+            xs: 0,
+            sm: 600,
+            md: 960,
+            lg: 1280,
+            xl: 1920,
+        },
+        unit = 'px',
+        step = 5,
+        ...other
+    } = breakpoints;
+
+    function up(key) {
+        const value = typeof values[key] === 'number' ? values[key] : key;
+        return `@media (min-width:${value}${unit})`;
+    }
+
+    function down(key) {
+        const endIndex = keys.indexOf(key) + 1;
+        const upperbound = values[keys[endIndex]];
+
+        if (endIndex === keys.length) {
+            // xl down applies to all sizes
+            return up('xs');
+        }
+
+        const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
+        return `@media (max-width:${value - step / 100}${unit})`;
+    }
+
+    function between(start, end) {
+        const endIndex = keys.indexOf(end) + 1;
+
+        if (endIndex === keys.length) {
+            return up(start);
+        }
+
+        return (
+            `@media (min-width:${values[start]}${unit}) and ` +
+            `(max-width:${values[keys[endIndex]] - step / 100}${unit})`
+        );
+    }
+
+    function only(key) {
+        return between(key, key);
+    }
+
+    function width(key) {
+        return values[key];
+    }
+
+    return {
+        keys,
+        values,
+        up,
+        down,
+        between,
+        only,
+        width,
+        ...other,
+    };
+}

package/src/styles/createBreakpoints.test.js

@@ -0,0 +1,66 @@
+import { assert } from 'chai';
+import createBreakpoints from './createBreakpoints';
+
+describe('createBreakpoints', () => {
+    const breakpoints = createBreakpoints({});
+
+    describe('up', () => {
+        it('should work for xs', () => {
+            assert.strictEqual(breakpoints.up('xs'), '@media (min-width:0px)');
+        });
+
+        it('should work for md', () => {
+            assert.strictEqual(breakpoints.up('md'), '@media (min-width:960px)');
+        });
+    });
+
+    describe('down', () => {
+        it('should work', () => {
+            assert.strictEqual(breakpoints.down('sm'), '@media (max-width:959.95px)');
+        });
+
+        it('should work for md', () => {
+            assert.strictEqual(breakpoints.down('md'), '@media (max-width:1279.95px)');
+        });
+
+        it('should use the specified key if it is not a recognized breakpoint', () => {
+            assert.strictEqual(breakpoints.down(600), '@media (max-width:599.95px)');
+        });
+
+        it('should apply to all sizes for xl', () => {
+            assert.strictEqual(breakpoints.down('xl'), '@media (min-width:0px)');
+        });
+    });
+
+    describe('between', () => {
+        it('should work', () => {
+            assert.strictEqual(
+                breakpoints.between('sm', 'md'),
+                '@media (min-width:600px) and (max-width:1279.95px)',
+            );
+        });
+
+        it('on xl should call up', () => {
+            assert.strictEqual(breakpoints.between('lg', 'xl'), '@media (min-width:1280px)');
+        });
+    });
+
+    describe('only', () => {
+        it('should work', () => {
+            assert.strictEqual(
+                breakpoints.only('md'),
+                '@media (min-width:960px) and (max-width:1279.95px)',
+            );
+        });
+
+        it('on xl should call up', () => {
+            assert.strictEqual(breakpoints.only('xl'), '@media (min-width:1920px)');
+        });
+    });
+
+    describe('width', () => {
+        it('should work', () => {
+            assert.strictEqual(breakpoints.width('md'), 960);
+        });
+    });
+});