RadioCard component

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',
+            },
+        },
+    },
+};

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>
+);

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';