@transferwise/components 0.0.0-experimental-af01b75 → 0.0.0-experimental-0657ea4

package/src/common/Panel/_stories/Panel.rtl.test.story.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useRef } from 'react';
+import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator';
+import Button from '../../../Button';
+import { Position } from '../../PropsValues/position';
+import Panel from '../Panel';
+
+export default {
+  component: Panel,
+  title: 'Dialogs/Panel/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Panel>;
+
+type Story = StoryObj<typeof Panel>;
+
+function PanelStory({
+  position,
+  label,
+}: {
+  position: Parameters<typeof Panel>[0]['position'];
+  label: string;
+}) {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const margin =
+    position?.startsWith('bottom') || position?.startsWith('top') ? '3.5rem 0' : '2.5rem 0';
+
+  return (
+    <>
+      <Button ref={anchorRef} style={{ margin }}>
+        {label}
+      </Button>
+      <Panel
+        open
+        position={position}
+        anchorRef={anchorRef}
+        arrow
+        aria-label={`Panel positioned ${label}`}
+      >
+        <div style={{ padding: '16px', maxWidth: '200px' }}>
+          Panel content positioned at <strong>{label}</strong>
+        </div>
+      </Panel>
+    </>
+  );
+}
+
+export const Top: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.TOP_LEFT} label="top-left" />
+      <PanelStory position={Position.TOP} label="top" />
+      <PanelStory position={Position.TOP_RIGHT} label="top-right" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center', vAlign: 'bottom' }),
+};
+
+export const Right: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.RIGHT_TOP} label="right-top" />
+      <PanelStory position={Position.RIGHT} label="right" />
+      <PanelStory position={Position.RIGHT_BOTTOM} label="right-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+};
+export const RightFlipped: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.RIGHT_TOP} label="right-top" />
+      <PanelStory position={Position.RIGHT} label="right" />
+      <PanelStory position={Position.RIGHT_BOTTOM} label="right-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+};
+
+export const Bottom: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.BOTTOM_LEFT} label="bottom-left" />
+      <PanelStory position={Position.BOTTOM} label="bottom" />
+      <PanelStory position={Position.BOTTOM_RIGHT} label="bottom-right" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'center' }),
+};
+
+export const Left: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.LEFT_TOP} label="left-top" />
+      <PanelStory position={Position.LEFT} label="left" />
+      <PanelStory position={Position.LEFT_BOTTOM} label="left-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'right', vAlign: 'center' }),
+};
+
+export const LeftFlipped: Story = {
+  render: () => (
+    <>
+      <PanelStory position={Position.LEFT_TOP} label="left-top" />
+      <PanelStory position={Position.LEFT} label="left" />
+      <PanelStory position={Position.LEFT_BOTTOM} label="left-bottom" />
+    </>
+  ),
+  ...withRTLDiff({ renderAs: 'iframe', hAlign: 'left', vAlign: 'center' }),
+};

package/src/common/PropsValues/position.ts

@@ -1,5 +1,3 @@
-import type { Placement } from '@floating-ui/react';
-
 export enum Position {
   BOTTOM = 'bottom',
   BOTTOM_LEFT = 'bottom-left',
@@ -21,51 +19,3 @@ export type PositionTop = 'top';
 export type PositionRight = 'right';
 export type PositionBottom = 'bottom';
 export type PositionLeft = 'left';
-
-export type PositionTopLeft = 'top-left';
-export type PositionTopRight = 'top-right';
-export type PositionBottomLeft = 'bottom-left';
-export type PositionBottomRight = 'bottom-right';
-export type PositionLeftTop = 'left-top';
-export type PositionLeftBottom = 'left-bottom';
-export type PositionRightTop = 'right-top';
-export type PositionRightBottom = 'right-bottom';
-
-/** Neptune position values that can be converted to floating-ui Placement */
-export type FloatingPlacement =
-  | PositionTop
-  | PositionRight
-  | PositionBottom
-  | PositionLeft
-  | PositionTopLeft
-  | PositionTopRight
-  | PositionRightTop
-  | PositionRightBottom
-  | PositionBottomLeft
-  | PositionBottomRight
-  | PositionLeftTop
-  | PositionLeftBottom;
-
-/** Maps Neptune position values to floating-ui Placement */
-export const positionToPlacement = (position: FloatingPlacement): Placement => {
-  switch (position) {
-    case 'top-left':
-      return 'top-start';
-    case 'top-right':
-      return 'top-end';
-    case 'bottom-left':
-      return 'bottom-start';
-    case 'bottom-right':
-      return 'bottom-end';
-    case 'left-top':
-      return 'left-start';
-    case 'left-bottom':
-      return 'left-end';
-    case 'right-top':
-      return 'right-start';
-    case 'right-bottom':
-      return 'right-end';
-    default:
-      return position;
-  }
-};

package/src/main.css

@@ -21875,27 +21875,35 @@ button.np-option {
 .np-panel[data-popper-placement^="top"] > .np-panel__content {
   transform: translateY(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="top"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="top"] .np-panel__arrow {
   inset-block-end: -6px;
 }
 .np-panel[data-popper-placement^="right"] > .np-panel__content {
   transform: translateX(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="right"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="right"] .np-panel__arrow {
   inset-inline-start: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="right"] .np-panel__arrow {
+  inset-inline-start: unset;
+  inset-inline-end: -6px;
+}
 .np-panel[data-popper-placement^="bottom"] > .np-panel__content {
   transform: translateY(-10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="bottom"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="bottom"] .np-panel__arrow {
   inset-block-start: -6px;
 }
 .np-panel[data-popper-placement^="left"] > .np-panel__content {
   transform: translateX(10px) scale(0.95);
 }
-.np-panel[data-popper-placement^="left"] > .np-panel__content .np-panel__arrow {
+.np-panel[data-popper-placement^="left"] .np-panel__arrow {
   inset-inline-end: -6px;
 }
+[dir="rtl"] .np-panel[data-popper-placement^="left"] .np-panel__arrow {
+  inset-inline-end: unset;
+  inset-inline-start: -6px;
+}
 .np-theme-personal .np-panel__content {
   border-radius: 16px;
   border-radius: var(--radius-medium);