Fees redesign

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

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

suite-common/icons/src/icons.ts

@@ -635,6 +635,7 @@ export const icons = {
     checkFat: require('../assets/checkFat.svg'),
     checkFatFilled: require('../assets/checkFatFilled.svg'),
     checkFilled: require('../assets/checkFilled.svg'),
+    checkMedium: require('../assets/checkMedium.svg'),
     checkSquare: require('../assets/checkSquare.svg'),
     checkSquareFilled: require('../assets/checkSquareFilled.svg'),
     checkSquareOffset: require('../assets/checkSquareOffset.svg'),