From 87132e0d39b5b61467295c1ac145370d3e4b6502 Mon Sep 17 00:00:00 2001
From: Albina Nikiforova <albina.nikiforova.5670@gmail.com>
Date: Mon, 27 Jan 2025 14:58:55 +0100
Subject: [PATCH] feat(suite): RadioCard component

---
 .../RadioCard/RadioCard.stories.tsx           | 23 ++++++
 .../src/components/RadioCard/RadioCard.tsx    | 80 +++++++++++++++++++
 packages/components/src/index.ts              |  2 +
 3 files changed, 105 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..6e175ea5407
--- /dev/null
+++ b/packages/components/src/components/RadioCard/RadioCard.tsx
@@ -0,0 +1,80 @@
+import styled, { css } from 'styled-components';
+
+import { palette, borders } from '@trezor/theme';
+
+import { Card } from '../Card/Card';
+import { Icon } from '../Icon/Icon';
+
+export type RadioCardProps = {
+    isActive: boolean;
+    children: React.ReactNode;
+    onClick: () => void;
+};
+
+const BorderActive = styled.div<{ isActive: boolean }>`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    ${({ isActive }) =>
+        isActive &&
+        css`
+            outline: 2px solid ${({ theme }) => theme.borderSecondary};
+            outline-offset: -2px;
+        `}
+    border-radius: ${borders.radii.md};
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+`;
+
+const IconWrapper = styled.div`
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 2;
+`;
+
+const RadioCardWrapper = styled.div<{ isActive: boolean }>`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: ${borders.radii.md};
+
+    ${({ isActive }) =>
+        isActive &&
+        css`
+            &::after {
+                content: '';
+                position: absolute;
+                top: -1px;
+                right: -1px;
+                background-color: ${({ theme }) => theme.borderSecondary};
+                color: white;
+                width: 14px;
+                height: 14px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: bold;
+            }
+        `}
+`;
+
+export const RadioCard = ({ isActive, children, onClick }: RadioCardProps) => (
+    <RadioCardWrapper isActive={isActive} onClick={onClick}>
+        {isActive && (
+            <IconWrapper>
+                <Icon name="checkMedium" size="extraSmall" color={palette.lightWhiteAlpha1000} />
+            </IconWrapper>
+        )}
+        <BorderActive isActive={isActive} />
+        <Card width="100%" paddingType="small" flex="1" fillType="none">
+            {children}
+        </Card>
+    </RadioCardWrapper>
+);
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';