feat(suite): RadioCard component

trezor · Jan 27, 2025 · 5045312 · 5045312
1 parent e441a1a
commit 5045312
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/packages/components/src/components/RadioCard/RadioCard.stories.tsx 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
@@ -0,0 +1,82 @@
+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`
+            /* border: 4px solid ${({ theme }) => theme.borderSecondary}; */
+            outline: 2px solid ${({ theme }) => theme.borderSecondary};
+            outline-offset: -2px;
+            /* box-shadow: 0 0 0 2px ${({ theme }) => theme.borderSecondary}; */
+        `}
+    border-radius: ${borders.radii.md};
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+`;
+
+const IconWrapper = styled.div`
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 100;
+`;
+
+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>
+);