From 6d0c5b95afea44710a1068e02acaa21d44b96080 Mon Sep 17 00:00:00 2001
From: Albina Nikiforova <albina.nikiforova.5670@gmail.com>
Date: Tue, 28 Jan 2025 12:47:07 +0100
Subject: [PATCH] feat(components): RadioCard

---
 .../RadioCard/RadioCard.stories.tsx           | 23 +++++++++
 .../src/components/RadioCard/RadioCard.tsx    | 51 +++++++++++++++++++
 packages/components/src/index.ts              |  2 +
 3 files changed, 76 insertions(+)
 create mode 100644 packages/components/src/components/RadioCard/RadioCard.stories.tsx
 create mode 100644 packages/components/src/components/RadioCard/RadioCard.tsx

diff --git a/packages/components/src/components/RadioCard/RadioCard.stories.tsx b/packages/components/src/components/RadioCard/RadioCard.stories.tsx
new file mode 100644
index 00000000000..abe700143f5
--- /dev/null
+++ b/packages/components/src/components/RadioCard/RadioCard.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { RadioCard as RadioCardComponent, RadioCardProps } from './RadioCard';
+
+const meta: Meta = {
+    title: 'RadioCard',
+    component: RadioCardComponent,
+} as Meta;
+export default meta;
+
+export const RadioCard: StoryObj<RadioCardProps> = {
+    args: {
+        isActive: true,
+        children: 'Content',
+    },
+    argTypes: {
+        isActive: {
+            control: {
+                type: 'boolean',
+            },
+        },
+    },
+};
diff --git a/packages/components/src/components/RadioCard/RadioCard.tsx b/packages/components/src/components/RadioCard/RadioCard.tsx
new file mode 100644
index 00000000000..c37d4e39bbe
--- /dev/null
+++ b/packages/components/src/components/RadioCard/RadioCard.tsx
@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+
+import styled, { css } from 'styled-components';
+
+import { palette, borders, spacingsPx } from '@trezor/theme';
+
+import { Card } from '../Card/Card';
+import { Icon } from '../Icon/Icon';
+import { Box } from '../Box/Box';
+import { FrameProps } from '../../utils/frameProps';
+
+export type RadioCardProps = {
+    isActive: boolean;
+    children: ReactNode;
+    onClick: () => void;
+};
+
+const BorderActive = styled.div<{ isActive: boolean }>`
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    ${({ isActive }) =>
+        isActive &&
+        css`
+            outline: ${borders.widths.large} solid ${({ theme }) => theme.borderSecondary};
+            outline-offset: -${borders.widths.large};
+        `}
+    border-radius: ${borders.radii.md};
+`;
+
+const IconWrapper = styled.div`
+    border-radius: ${borders.radii.full};
+    background-color: ${({ theme }) => theme.borderSecondary};
+    padding: ${spacingsPx.xxxs};
+`;
+
+export const RadioCard = ({ isActive, children, ...frameProps }: RadioCardProps & FrameProps) => (
+    <Box position={{ type: 'relative' }} {...frameProps}>
+        {isActive && (
+            <Box position={{ type: 'absolute', top: '-1px', right: '-1px' }} zIndex={2}>
+                <IconWrapper>
+                    <Icon name="check" size="extraSmall" color={palette.lightWhiteAlpha1000} />
+                </IconWrapper>
+            </Box>
+        )}
+        <Card paddingType="small" fillType="none">
+            {children}
+        </Card>
+        <BorderActive isActive={isActive} />
+    </Box>
+);
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 8ec4f60b656..2648b8aeffa 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -101,3 +101,5 @@ export { getSafeWindowSize } from './utils/getSafeWindowSize';
 
 export { intermediaryTheme } from './config/colors';
 export type { SuiteThemeColors } from './config/colors';
+
+export { RadioCard } from './components/RadioCard/RadioCard';