@transferwise/components 0.0.0-experimental-c9cdfe3 → 0.0.0-experimental-79c0fba

package/src/slidingPanel/SlidingPanel.spec.js

@@ -24,17 +24,7 @@ describe('SlidingPanel', () => {
 
     expect(cssTransition()).toHaveLength(1);
 
-    expect(cssTransition().props()).toMatchObject({
-      in: true,
-      appear: true,
-      timeout: {
-        enter: 0,
-        exit: EXIT_ANIMATION,
-      },
-      classNames: 'sliding-panel--open-left sliding-panel',
-      unmountOnExit: true,
-    });
-    expect(cssTransition().props().children.props).toStrictEqual({
+    expect(cssTransition().props()).toStrictEqual({
       className: 'sliding-panel sliding-panel--open-left',
       children: null,
     });
@@ -42,24 +32,24 @@ describe('SlidingPanel', () => {
 
   it('adds fixed class', () => {
     component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
-    expect(cssTransition().prop('classNames')).toBe(
-      'sliding-panel--open-left sliding-panel--fixed sliding-panel',
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
     );
   });
 
   it('adds border classes if showSlidingPanelBorder is set to true', () => {
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
-    expect(cssTransition().prop('classNames')).toBe(
-      'sliding-panel--open-left sliding-panel--border-left sliding-panel',
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
     );
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
-    expect(cssTransition().prop('classNames')).toBe('sliding-panel--open-left sliding-panel');
+    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
 
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
-    expect(cssTransition().prop('classNames')).toBe(
-      'sliding-panel--open-top sliding-panel--border-top sliding-panel',
+    expect(cssTransition().prop('className')).toBe(
+      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
     );
   });
 
-  const cssTransition = () => component.find('CSSTransition');
+  const cssTransition = () => component.find('div');
 });

package/src/slidingPanel/SlidingPanel.tsx

@@ -0,0 +1,62 @@
+import classNames from 'classnames';
+import { forwardRef, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { CSSTransition } from 'react-transition-group';
+
+import { Position } from '../common';
+
+export const EXIT_ANIMATION = 350;
+
+export interface SlidingPanelProps
+  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
+  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
+  open: boolean;
+  showSlidingPanelBorder?: boolean;
+  slidingPanelPositionFixed?: boolean;
+}
+
+const SlidingPanel = forwardRef(
+  (
+    {
+      position = 'left',
+      open,
+      showSlidingPanelBorder,
+      slidingPanelPositionFixed,
+      className,
+      children,
+      ...rest
+    }: Omit<SlidingPanelProps, 'ref'>,
+    reference: React.ForwardedRef<HTMLDivElement>,
+  ) => {
+    const localReference = useRef<HTMLDivElement>(null);
+
+    return (
+      <CSSTransition
+        {...rest}
+        key={`sliding-panel--open-${position}`}
+        nodeRef={localReference}
+        in={open}
+        // Wait for animation to finish before unmount.
+        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
+        classNames="sliding-panel"
+        appear
+        unmountOnExit
+      >
+        <div
+          ref={mergeRefs([reference, localReference])}
+          className={classNames(
+            'sliding-panel',
+            `sliding-panel--open-${position}`,
+            showSlidingPanelBorder && `sliding-panel--border-${position}`,
+            slidingPanelPositionFixed && 'sliding-panel--fixed',
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </CSSTransition>
+    );
+  },
+);
+
+export default SlidingPanel;

package/src/slidingPanel/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SlidingPanel';
+export type { SlidingPanelProps } from './SlidingPanel';

package/src/sticky/Sticky.spec.js

@@ -25,7 +25,6 @@ describe('Sticky', () => {
 
     expect(slidingPanel.props()).toStrictEqual({
       children: null,
-      className: undefined,
       open: true,
       position: 'bottom',
       showSlidingPanelBorder: true,

package/src/sticky/{Sticky.story.js → Sticky.story.tsx}

@@ -9,10 +9,9 @@ export default {
 
 export const Basic = () => {
   const open = boolean('open', false);
-  const position = select('position', ['top', 'right', 'bottom', 'left'], 'bottom');
-  const fullParentWidth = boolean('fullParentWidth', true);
+  const position = select('position', ['top', 'bottom'], 'bottom');
   return (
-    <Sticky open={open} position={position} fullParentWidth={fullParentWidth}>
+    <Sticky open={open} position={position}>
       <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
         been the industry standard dummy text ever since the 1500s, when an unknown printer took a

package/src/sticky/Sticky.tsx

@@ -0,0 +1,16 @@
+import { Position } from '../common';
+import SlidingPanel from '../slidingPanel';
+
+export interface StickyProps {
+  open?: boolean;
+  position?: `${Position.TOP | Position.BOTTOM}`;
+  children?: React.ReactNode;
+}
+
+export default function Sticky({ open = true, position = 'bottom', children }: StickyProps) {
+  return (
+    <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
+      {children}
+    </SlidingPanel>
+  );
+}

package/src/sticky/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Sticky';
+export type { StickyProps } from './Sticky';

package/build/mocks.d.ts

@@ -1,9 +0,0 @@
-type StubGlobal = (name: PropertyKey, value: unknown) => void;
-interface GlobalMockParams {
-    fn: <T extends (...args: never[]) => unknown>(implementation?: T) => T;
-    stubGlobal?: StubGlobal;
-}
-export declare function mockMatchMedia({ fn, stubGlobal }: GlobalMockParams): void;
-export declare function mockResizeObserver({ fn, stubGlobal }: GlobalMockParams): void;
-export {};
-//# sourceMappingURL=mocks.d.ts.map

package/build/mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F"}

package/src/slidingPanel/SlidingPanel.js

@@ -1,73 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { forwardRef, RefObject, useRef } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { CSSTransition } from 'react-transition-group';
-
-export const EXIT_ANIMATION = 350;
-
-const SlidingPanel = forwardRef(
-  (
-    {
-      children,
-      className,
-      open,
-      position,
-      showSlidingPanelBorder,
-      slidingPanelPositionFixed,
-      ...rest
-    },
-    reference,
-  ) => {
-    /** @type {RefObject<HTMLDivElement>} */
-    const localReference = useRef(null);
-
-    return (
-      <CSSTransition
-        {...rest}
-        key={`sliding-panel--open-${position}`}
-        nodeRef={localReference}
-        in={open}
-        // Wait for animation to finish before unmount.
-        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
-        classNames={classNames(
-          `sliding-panel--open-${position}`,
-          showSlidingPanelBorder && `sliding-panel--border-${position}`,
-          {
-            'sliding-panel--fixed': slidingPanelPositionFixed,
-          },
-          'sliding-panel',
-        )}
-        appear
-        unmountOnExit
-      >
-        <div
-          ref={mergeRefs([reference, localReference])}
-          className={classNames('sliding-panel', `sliding-panel--open-${position}`, className)}
-        >
-          {children}
-        </div>
-      </CSSTransition>
-    );
-  },
-);
-
-SlidingPanel.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  open: PropTypes.bool,
-  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  showSlidingPanelBorder: PropTypes.bool,
-  slidingPanelPositionFixed: PropTypes.bool,
-};
-
-SlidingPanel.defaultProps = {
-  children: null,
-  className: undefined,
-  open: false,
-  position: 'left',
-  showSlidingPanelBorder: false,
-  slidingPanelPositionFixed: false,
-};
-
-export default SlidingPanel;

package/src/slidingPanel/index.js

@@ -1 +0,0 @@
-export { default } from './SlidingPanel';

package/src/sticky/Sticky.js

@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-
-import SlidingPanel from '../slidingPanel';
-
-const Sticky = ({ open, position, children }) => (
-  <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
-    {children}
-  </SlidingPanel>
-);
-
-Sticky.propTypes = {
-  open: PropTypes.bool,
-  position: PropTypes.oneOf(['top', 'bottom']),
-  children: PropTypes.node,
-};
-
-Sticky.defaultProps = {
-  open: true,
-  position: 'bottom',
-  children: null,
-};
-
-export default Sticky;

package/src/sticky/index.js

@@ -1 +0,0 @@
-export { default } from './Sticky';