@transferwise/components 46.57.0 → 46.58.0

package/src/withId/withId.story.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button, withId, type WithIdProps } from '..';
+
+type Story = StoryObj<typeof withId>;
+
+type DescribedButtonProps = { id?: string };
+type DescribedButtonWithIdProps = WithIdProps<DescribedButtonProps>;
+
+function CustomButton({ id }: DescribedButtonWithIdProps) {
+  return (
+    <>
+      <Button aria-describedby={id}>Continue</Button>
+
+      <p id={id} className="text-xs-center m-t-2">
+        Enter an amount in either GBP or PLN
+        <br />
+        This paragraph has id of <code>{id}</code>
+      </p>
+    </>
+  );
+}
+const DescribedButton = withId<DescribedButtonProps>(CustomButton);
+DescribedButton.displayName = 'DescribedButton';
+
+export default {
+  component: DescribedButton,
+} satisfies Meta<typeof withId>;
+
+export const WithoutId: Story = {};
+
+export const WithCustomId: Story = {
+  args: {
+    id: 'myId',
+  },
+};
+
+export const WithEmptyId: Story = {
+  args: {
+    id: '',
+  },
+};

package/src/withId/withId.tsx

@@ -0,0 +1,27 @@
+import { useId, ComponentType } from 'react';
+
+type ChildProps<Props> = Props & {
+  id?: string;
+};
+
+export type WithIdProps<Props> = Props & {
+  id: string;
+};
+
+/**
+ * @internal
+ * @param {ReactNode} WrappedComponent
+ */
+export default function withId<Props extends object>(
+  WrappedComponent: ComponentType<WithIdProps<Props>>,
+) {
+  function WithIdComponent(props: ChildProps<Props>) {
+    const id = useId();
+
+    return <WrappedComponent {...props} id={props.id || id} />;
+  }
+
+  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+
+  return WithIdComponent;
+}