@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/__tests__/behaviors/scrollIntoViewingArea.test.js

@@ -1,155 +1,226 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const scrollIntoViewingArea_1 = require("../../behaviors/scrollIntoViewingArea");
+
+var _scrollIntoViewingArea = require("../../behaviors/scrollIntoViewingArea");
+
 function scrollPositionFormula(positionData, isChildAboveViewingArea) {
-    const { viewingAreaEdgePosition, childEdgePosition, margin } = positionData;
-    const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1);
-    return childEdgePosition - viewingAreaEdgePosition + marginOffset;
-}
-// The DOMRect constructor isn't available in JSDOM, so we improvise here.
+  const {
+    viewingAreaEdgePosition,
+    childEdgePosition,
+    margin
+  } = positionData;
+  const marginOffset = margin * (isChildAboveViewingArea ? -1 : 1);
+  return childEdgePosition - viewingAreaEdgePosition + marginOffset;
+} // The DOMRect constructor isn't available in JSDOM, so we improvise here.
+
+
 function makeDOMRect(x, y, width, height) {
-    return {
-        x,
-        y,
-        width,
-        height,
-        top: y,
-        left: x,
-        right: x + width,
-        bottom: y + height,
-        toJSON() {
-            return this;
-        }
-    };
-}
-// Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+
+    toJSON() {
+      return this;
+    }
+
+  };
+} // Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
 // correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
+
+
 function createVirtualDOM(viewingAreaRect, childRect) {
-    const viewingArea = document.createElement('div');
-    viewingArea.style.overflow = 'auto';
-    viewingArea.id = 'viewingArea';
-    // eslint-disable-next-line github/unescaped-html-literal
-    viewingArea.innerHTML = '<div id="child"></div>';
-    const child = viewingArea.querySelector('#child');
-    child.getBoundingClientRect = () => childRect;
-    viewingArea.getBoundingClientRect = () => viewingAreaRect;
-    return { viewingArea, child };
+  const viewingArea = document.createElement('div');
+  viewingArea.style.overflow = 'auto';
+  viewingArea.id = 'viewingArea'; // eslint-disable-next-line github/unescaped-html-literal
+
+  viewingArea.innerHTML = '<div id="child"></div>';
+  const child = viewingArea.querySelector('#child');
+
+  child.getBoundingClientRect = () => childRect;
+
+  viewingArea.getBoundingClientRect = () => viewingAreaRect;
+
+  return {
+    viewingArea,
+    child
+  };
 }
+
 describe('scrollIntoViewingArea', () => {
-    it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
-        const scrollToMock = jest.fn();
-        Object.defineProperty(window.Element.prototype, 'scrollTo', {
-            writable: true,
-            value: scrollToMock
-        });
-        const childHeight = 50;
-        const viewAreaHeight = 100;
-        const childStart = viewAreaHeight + 10;
-        const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: 8 }, false);
-        const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
-        const childRect = makeDOMRect(0, childStart, 100, childHeight);
-        const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
-        viewingArea.getBoundingClientRect = () => viewingAreaRect;
-        viewingArea.scrollTop = 0;
-        child.getBoundingClientRect = () => childRect;
-        scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea);
-        expect(scrollToMock).toHaveBeenCalledWith({
-            behavior: 'smooth',
-            top: expectedScrollPosition
-        });
+  it('scrolls the expected amount when only the viewingArea element and child element are passed to the function', () => {
+    const scrollToMock = jest.fn();
+    Object.defineProperty(window.Element.prototype, 'scrollTo', {
+      writable: true,
+      value: scrollToMock
+    });
+    const childHeight = 50;
+    const viewAreaHeight = 100;
+    const childStart = viewAreaHeight + 10;
+    const expectedScrollPosition = scrollPositionFormula({
+      viewingAreaEdgePosition: viewAreaHeight,
+      childEdgePosition: childStart + childHeight,
+      margin: 8
+    }, false);
+    const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
+    const childRect = makeDOMRect(0, childStart, 100, childHeight);
+    const {
+      viewingArea,
+      child
+    } = createVirtualDOM(viewingAreaRect, childRect);
+
+    viewingArea.getBoundingClientRect = () => viewingAreaRect;
+
+    viewingArea.scrollTop = 0;
+
+    child.getBoundingClientRect = () => childRect;
+
+    (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea);
+    expect(scrollToMock).toHaveBeenCalledWith({
+      behavior: 'smooth',
+      top: expectedScrollPosition
+    });
+  });
+  describe('y-axis', () => {
+    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+      const scrollToMock = jest.fn();
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      });
+      const childHeight = 50;
+      const viewAreaHeight = 100;
+      const childStart = viewAreaHeight + 10;
+      const scrollMargin = 10;
+      const expectedScrollPosition = scrollPositionFormula({
+        viewingAreaEdgePosition: viewAreaHeight,
+        childEdgePosition: childStart + childHeight,
+        margin: scrollMargin
+      }, false);
+      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
+      const childRect = makeDOMRect(0, childStart, 100, childHeight);
+      const {
+        viewingArea,
+        child
+      } = createVirtualDOM(viewingAreaRect, childRect);
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect;
+
+      viewingArea.scrollTop = 0;
+
+      child.getBoundingClientRect = () => childRect;
+
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        top: expectedScrollPosition
+      });
+    });
+    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+      const scrollToMock = jest.fn();
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      });
+      const childHeight = 50;
+      const childStart = childHeight * -1 - 10;
+      const scrollMargin = 10;
+      const expectedScrollPosition = scrollPositionFormula({
+        viewingAreaEdgePosition: 0,
+        childEdgePosition: childStart,
+        margin: scrollMargin
+      }, true);
+      const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
+      const childRect = makeDOMRect(0, childStart, 100, childHeight);
+      const {
+        viewingArea,
+        child
+      } = createVirtualDOM(viewingAreaRect, childRect);
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect;
+
+      viewingArea.scrollTop = 0;
+
+      child.getBoundingClientRect = () => childRect;
+
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        top: expectedScrollPosition
+      });
     });
-    describe('y-axis', () => {
-        it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
-            const scrollToMock = jest.fn();
-            Object.defineProperty(window.Element.prototype, 'scrollTo', {
-                writable: true,
-                value: scrollToMock
-            });
-            const childHeight = 50;
-            const viewAreaHeight = 100;
-            const childStart = viewAreaHeight + 10;
-            const scrollMargin = 10;
-            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: viewAreaHeight, childEdgePosition: childStart + childHeight, margin: scrollMargin }, false);
-            const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaHeight);
-            const childRect = makeDOMRect(0, childStart, 100, childHeight);
-            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
-            viewingArea.getBoundingClientRect = () => viewingAreaRect;
-            viewingArea.scrollTop = 0;
-            child.getBoundingClientRect = () => childRect;
-            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
-            expect(scrollToMock).toHaveBeenCalledWith({
-                behavior: 'auto',
-                top: expectedScrollPosition
-            });
-        });
-        it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
-            const scrollToMock = jest.fn();
-            Object.defineProperty(window.Element.prototype, 'scrollTo', {
-                writable: true,
-                value: scrollToMock
-            });
-            const childHeight = 50;
-            const childStart = childHeight * -1 - 10;
-            const scrollMargin = 10;
-            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin }, true);
-            const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
-            const childRect = makeDOMRect(0, childStart, 100, childHeight);
-            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
-            viewingArea.getBoundingClientRect = () => viewingAreaRect;
-            viewingArea.scrollTop = 0;
-            child.getBoundingClientRect = () => childRect;
-            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'vertical', scrollMargin, scrollMargin, 'auto');
-            expect(scrollToMock).toHaveBeenCalledWith({
-                behavior: 'auto',
-                top: expectedScrollPosition
-            });
-        });
+  });
+  describe('x-axis', () => {
+    it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
+      const scrollToMock = jest.fn();
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      });
+      const childWidth = 50;
+      const viewAreaWidth = 100;
+      const childStart = viewAreaWidth + 10;
+      const scrollMargin = 10;
+      const expectedScrollPosition = scrollPositionFormula({
+        viewingAreaEdgePosition: viewAreaWidth,
+        childEdgePosition: childStart + childWidth,
+        margin: scrollMargin
+      }, false);
+      const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth);
+      const childRect = makeDOMRect(childStart, 0, childWidth, 100);
+      const {
+        viewingArea,
+        child
+      } = createVirtualDOM(viewingAreaRect, childRect);
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect;
+
+      viewingArea.scrollLeft = 0;
+
+      child.getBoundingClientRect = () => childRect;
+
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        left: expectedScrollPosition
+      });
     });
-    describe('x-axis', () => {
-        it('scrolls the child into the viewing area when it is AFTER the overflow cutoff point', () => {
-            const scrollToMock = jest.fn();
-            Object.defineProperty(window.Element.prototype, 'scrollTo', {
-                writable: true,
-                value: scrollToMock
-            });
-            const childWidth = 50;
-            const viewAreaWidth = 100;
-            const childStart = viewAreaWidth + 10;
-            const scrollMargin = 10;
-            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: viewAreaWidth, childEdgePosition: childStart + childWidth, margin: scrollMargin }, false);
-            const viewingAreaRect = makeDOMRect(0, 0, 100, viewAreaWidth);
-            const childRect = makeDOMRect(childStart, 0, childWidth, 100);
-            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
-            viewingArea.getBoundingClientRect = () => viewingAreaRect;
-            viewingArea.scrollLeft = 0;
-            child.getBoundingClientRect = () => childRect;
-            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
-            expect(scrollToMock).toHaveBeenCalledWith({
-                behavior: 'auto',
-                left: expectedScrollPosition
-            });
-        });
-        it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
-            const scrollToMock = jest.fn();
-            Object.defineProperty(window.Element.prototype, 'scrollTo', {
-                writable: true,
-                value: scrollToMock
-            });
-            const childWidth = 50;
-            const childStart = childWidth * -1 - 10;
-            const scrollMargin = 10;
-            const expectedScrollPosition = scrollPositionFormula({ viewingAreaEdgePosition: 0, childEdgePosition: childStart, margin: scrollMargin }, true);
-            const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
-            const childRect = makeDOMRect(childStart, 0, childWidth, 100);
-            const { viewingArea, child } = createVirtualDOM(viewingAreaRect, childRect);
-            viewingArea.getBoundingClientRect = () => viewingAreaRect;
-            viewingArea.scrollTop = 0;
-            child.getBoundingClientRect = () => childRect;
-            scrollIntoViewingArea_1.scrollIntoViewingArea(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
-            expect(scrollToMock).toHaveBeenCalledWith({
-                behavior: 'auto',
-                left: expectedScrollPosition
-            });
-        });
+    it('scrolls the child into the viewing area when it is BEFORE the overflow cutoff point', () => {
+      const scrollToMock = jest.fn();
+      Object.defineProperty(window.Element.prototype, 'scrollTo', {
+        writable: true,
+        value: scrollToMock
+      });
+      const childWidth = 50;
+      const childStart = childWidth * -1 - 10;
+      const scrollMargin = 10;
+      const expectedScrollPosition = scrollPositionFormula({
+        viewingAreaEdgePosition: 0,
+        childEdgePosition: childStart,
+        margin: scrollMargin
+      }, true);
+      const viewingAreaRect = makeDOMRect(0, 0, 100, 100);
+      const childRect = makeDOMRect(childStart, 0, childWidth, 100);
+      const {
+        viewingArea,
+        child
+      } = createVirtualDOM(viewingAreaRect, childRect);
+
+      viewingArea.getBoundingClientRect = () => viewingAreaRect;
+
+      viewingArea.scrollTop = 0;
+
+      child.getBoundingClientRect = () => childRect;
+
+      (0, _scrollIntoViewingArea.scrollIntoViewingArea)(child, viewingArea, 'horizontal', scrollMargin, scrollMargin, 'auto');
+      expect(scrollToMock).toHaveBeenCalledWith({
+        behavior: 'auto',
+        left: expectedScrollPosition
+      });
     });
-});
+  });
+});

package/lib/__tests__/filterObject.test.js

@@ -1,51 +1,30 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const theme_1 = require("../utils/theme");
+
+var _theme = require("../utils/theme");
+
 describe('filterObject', () => {
-    const colors = {
-        scale: {
-            gray: [
-                '#fafbfc',
-                '#f6f8fa',
-                '#e1e4e8',
-                '#d1d5da',
-                '#959da5',
-                '#6a737d',
-                '#586069',
-                '#444d56',
-                '#2f363d',
-                '#24292e'
-            ]
-        },
-        btn: {
-            shadow: '0 1px 0 rgba(27,31,35,0.04)'
-        }
+  const colors = {
+    scale: {
+      gray: ['#fafbfc', '#f6f8fa', '#e1e4e8', '#d1d5da', '#959da5', '#6a737d', '#586069', '#444d56', '#2f363d', '#24292e']
+    },
+    btn: {
+      shadow: '0 1px 0 rgba(27,31,35,0.04)'
+    }
+  };
+  it('filters out shadow values', () => {
+    const expected = {
+      scale: {
+        gray: ['#fafbfc', '#f6f8fa', '#e1e4e8', '#d1d5da', '#959da5', '#6a737d', '#586069', '#444d56', '#2f363d', '#24292e']
+      }
     };
-    it('filters out shadow values', () => {
-        const expected = {
-            scale: {
-                gray: [
-                    '#fafbfc',
-                    '#f6f8fa',
-                    '#e1e4e8',
-                    '#d1d5da',
-                    '#959da5',
-                    '#6a737d',
-                    '#586069',
-                    '#444d56',
-                    '#2f363d',
-                    '#24292e'
-                ]
-            }
-        };
-        expect(theme_1.filterObject(colors, (value) => theme_1.isColorValue(value))).toEqual(expected);
-    });
-    it('filters out color values', () => {
-        const expected = {
-            btn: {
-                shadow: '0 1px 0 rgba(27,31,35,0.04)'
-            }
-        };
-        expect(theme_1.filterObject(colors, (value) => theme_1.isShadowValue(value))).toEqual(expected);
-    });
-});
+    expect((0, _theme.filterObject)(colors, value => (0, _theme.isColorValue)(value))).toEqual(expected);
+  });
+  it('filters out color values', () => {
+    const expected = {
+      btn: {
+        shadow: '0 1px 0 rgba(27,31,35,0.04)'
+      }
+    };
+    expect((0, _theme.filterObject)(colors, value => (0, _theme.isShadowValue)(value))).toEqual(expected);
+  });
+});

package/lib/__tests__/theme.test.js

@@ -1,35 +1,36 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const theme_1 = require("../utils/theme");
+
+var _theme = require("../utils/theme");
+
 describe('isShadowValue', () => {
-    it('accepts transparent', () => {
-        expect(theme_1.isShadowValue('0 0 0 transparent')).toBe(true);
-    });
-    it('accepts hex colors', () => {
-        expect(theme_1.isShadowValue('0 0 0 #ff0000')).toBe(true);
-        expect(theme_1.isShadowValue('0 0 0 #ff0')).toBe(true);
-    });
-    it('accepts rgba colors', () => {
-        expect(theme_1.isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true);
-        expect(theme_1.isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true);
-    });
-    it('accepts px values', () => {
-        expect(theme_1.isShadowValue('12px 24px 0 #000')).toBe(true);
-    });
-    it('accepts em values', () => {
-        expect(theme_1.isShadowValue('0.5em 1em 0 #000')).toBe(true);
-    });
-    it('accepts inset values', () => {
-        expect(theme_1.isShadowValue('inset 12px 24px 0 #000')).toBe(true);
-    });
-    it('rejects individual colors', () => {
-        expect(theme_1.isShadowValue('red')).toBe(false);
-        expect(theme_1.isShadowValue('#f00')).toBe(false);
-        expect(theme_1.isShadowValue('rgb(255, 0, 0)')).toBe(false);
-    });
-    it('rejects individual numeric values', () => {
-        expect(theme_1.isShadowValue('0')).toBe(false);
-        expect(theme_1.isShadowValue('12px')).toBe(false);
-        expect(theme_1.isShadowValue('0.5em')).toBe(false);
-    });
-});
+  it('accepts transparent', () => {
+    expect((0, _theme.isShadowValue)('0 0 0 transparent')).toBe(true);
+  });
+  it('accepts hex colors', () => {
+    expect((0, _theme.isShadowValue)('0 0 0 #ff0000')).toBe(true);
+    expect((0, _theme.isShadowValue)('0 0 0 #ff0')).toBe(true);
+  });
+  it('accepts rgba colors', () => {
+    expect((0, _theme.isShadowValue)('0 0 0 rgb(255, 0, 0)')).toBe(true);
+    expect((0, _theme.isShadowValue)('0 0 0 rgba(255,0,0,0.2)')).toBe(true);
+  });
+  it('accepts px values', () => {
+    expect((0, _theme.isShadowValue)('12px 24px 0 #000')).toBe(true);
+  });
+  it('accepts em values', () => {
+    expect((0, _theme.isShadowValue)('0.5em 1em 0 #000')).toBe(true);
+  });
+  it('accepts inset values', () => {
+    expect((0, _theme.isShadowValue)('inset 12px 24px 0 #000')).toBe(true);
+  });
+  it('rejects individual colors', () => {
+    expect((0, _theme.isShadowValue)('red')).toBe(false);
+    expect((0, _theme.isShadowValue)('#f00')).toBe(false);
+    expect((0, _theme.isShadowValue)('rgb(255, 0, 0)')).toBe(false);
+  });
+  it('rejects individual numeric values', () => {
+    expect((0, _theme.isShadowValue)('0')).toBe(false);
+    expect((0, _theme.isShadowValue)('12px')).toBe(false);
+    expect((0, _theme.isShadowValue)('0.5em')).toBe(false);
+  });
+});

package/lib/__tests__/themeGet.test.js

@@ -1,14 +1,25 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const __1 = require("..");
+
+var _ = require("..");
+
 describe('themeGet', () => {
-    it('acccepts theme prop', () => {
-        expect(__1.themeGet('example')({ theme: { example: 'test' } })).toBe('test');
-    });
-    it('allows theme prop to override primer theme', () => {
-        expect(__1.themeGet('colors.gray.0')({ theme: { colors: { gray: ['#f00'] } } })).toBe('#f00');
-    });
-    it('uses primer theme as fallback', () => {
-        expect(__1.themeGet('space.1')({})).toBe('4px');
-    });
-});
+  it('acccepts theme prop', () => {
+    expect((0, _.themeGet)('example')({
+      theme: {
+        example: 'test'
+      }
+    })).toBe('test');
+  });
+  it('allows theme prop to override primer theme', () => {
+    expect((0, _.themeGet)('colors.gray.0')({
+      theme: {
+        colors: {
+          gray: ['#f00']
+        }
+      }
+    })).toBe('#f00');
+  });
+  it('uses primer theme as fallback', () => {
+    expect((0, _.themeGet)('space.1')({})).toBe('4px');
+  });
+});