feat(suite): quick-action refactotring, simplification of the UI and …

…adding a update icon

chore(components): add frameProps for ComponentWithSubIcon

packages/components/src/components/ComponentWithSubIcon/ComponentWithSubIcon.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Icon, iconVariants } from '../Icon/Icon';
+import {
+    allowedComponentWithSubIconFrameProps,
+    ComponentWithSubIcon as ComponentWithSubIconComponent,
+    ComponentWithSubIconProps,
+} from './ComponentWithSubIcon';
+import { getFramePropsStory } from '../../utils/frameProps';
+
+const meta: Meta = {
+    title: 'ComponentWithSubIcon',
+    component: ComponentWithSubIconComponent,
+} as Meta;
+export default meta;
+
+export const ComponentWithSubIcon: StoryObj<ComponentWithSubIconProps> = {
+    args: {
+        subIconProps: {
+            name: 'check',
+        },
+        variant: 'destructive',
+        children: <Icon name="tor" />,
+        ...getFramePropsStory(allowedComponentWithSubIconFrameProps).args,
+    },
+    argTypes: {
+        variant: {
+            options: iconVariants,
+            control: {
+                type: 'select',
+            },
+        },
+        ...getFramePropsStory(allowedComponentWithSubIconFrameProps).argTypes,
+    },
+};

packages/components/src/components/ComponentWithSubIcon/ComponentWithSubIcon.tsx

@@ -0,0 +1,86 @@
+import styled, { useTheme } from 'styled-components';
+import {
+    ExclusiveColorOrVariant,
+    getColorForIconVariant,
+    getIconSize,
+    Icon,
+    IconProps,
+} from '../Icon/Icon';
+import { borders, spacingsPx } from '@trezor/theme';
+import { TransientProps } from '../../utils/transientProps';
+import { ReactNode } from 'react';
+import { FramePropsKeys, FrameProps, withFrameProps } from '../../utils/frameProps';
+
+export const allowedComponentWithSubIconFrameProps: FramePropsKeys[] = ['margin'];
+type AllowedFrameProps = Pick<FrameProps, (typeof allowedComponentWithSubIconFrameProps)[number]>;
+
+const Container = styled.div<TransientProps<AllowedFrameProps>>`
+    position: relative;
+
+    ${withFrameProps}
+`;
+
+type SubIconWrapperProps = TransientProps<ExclusiveColorOrVariant> & {
+    $subIconColor: string;
+    $subIconSize: number;
+};
+
+const SubIconWrapper = styled.div<SubIconWrapperProps>`
+    position: absolute;
+
+    right: -${({ $subIconSize }) => $subIconSize / 2 + 3}px;
+    top: -${({ $subIconSize }) => $subIconSize / 2 + 3}px;
+
+    background-color: ${({ theme, $variant, $color }) =>
+        getColorForIconVariant({ theme, variant: $variant, color: $color })};
+    border-radius: ${borders.radii.full};
+    border: 1px solid ${({ theme }) => theme['borderElevationNegative']};
+    padding: ${spacingsPx.xxxs};
+`;
+
+export type ComponentWithSubIconProps = AllowedFrameProps &
+    ExclusiveColorOrVariant & {
+        subIconProps?: IconProps;
+        children: ReactNode;
+    };
+
+export const ComponentWithSubIcon = ({
+    variant,
+    color,
+    children,
+    subIconProps,
+    margin,
+}: ComponentWithSubIconProps) => {
+    const theme = useTheme();
+
+    if (subIconProps === undefined) {
+        return <Container $margin={margin}>{children}</Container>;
+    }
+
+    const backgroundIconColor = getColorForIconVariant({
+        theme,
+        color,
+        variant,
+    });
+
+    const iconColor = getColorForIconVariant({
+        theme,
+        color: subIconProps.color,
+        variant: subIconProps.variant,
+    });
+
+    const subIconSize = getIconSize(subIconProps.size ?? 12);
+
+    return (
+        <Container $margin={margin}>
+            {children}
+            <SubIconWrapper
+                $color={backgroundIconColor}
+                $subIconColor={iconColor}
+                $subIconSize={subIconSize}
+            >
+                <Icon {...subIconProps} size={subIconSize} />
+            </SubIconWrapper>
+        </Container>
+    );
+};

packages/components/src/components/Icon/Icon.stories.tsx

@@ -1,8 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { allowedIconFrameProps, Icon as IconComponent, IconProps, iconVariants } from './Icon';
-import { IconName, icons } from '@suite-common/icons/src/icons';
+import {
+    allowedIconFrameProps,
+    Icon as IconComponent,
+    IconName,
+    IconProps,
+    icons,
+    iconSizes,
+    iconVariants,
+} from './Icon';
 import { getFramePropsStory } from '../../utils/frameProps';
-import { iconSizes } from '@suite-common/icons/src/webComponents';
+
 const meta: Meta = {
     title: 'Icons',
     component: IconComponent,

packages/components/src/components/Icon/Icon.tsx

@@ -14,10 +14,18 @@ import { CSSColor, Color } from '@trezor/theme';
 import { makePropsTransient, TransientProps } from '../../utils/transientProps';
 import { FrameProps, FramePropsKeys, withFrameProps } from '../../utils/frameProps';
 
-export const iconVariants = ['primary', 'tertiary', 'info', 'warning', 'destructive'] as const;
-export type IconVariant = Extract<UIVariant, (typeof iconVariants)[number]>;
-
-type ExclusiveColorOrVariant =
+export const iconVariants = [
+    'primary',
+    'tertiary',
+    'info',
+    'warning',
+    'destructive',
+    'purple',
+] as const;
+
+export type IconVariant = Extract<UIVariant, (typeof iconVariants)[number]> | 'purple';
+
+export type ExclusiveColorOrVariant =
     | { variant?: IconVariant; color?: undefined }
     | {
           variant?: undefined;
@@ -34,9 +42,10 @@ const variantColorMap: Record<IconVariant, Color> = {
     info: 'iconAlertBlue',
     warning: 'iconAlertYellow',
     destructive: 'iconAlertRed',
+    purple: 'iconAlertPurple',
 };
 
-const getColorForIconVariant = ({
+export const getColorForIconVariant = ({
     variant,
     theme,
     color,
@@ -190,4 +199,10 @@ export const Icon = forwardRef(
     },
 );
 
-export { type IconName, icons, type IconSize } from '@suite-common/icons/src/webComponents';
+export {
+    type IconName,
+    icons,
+    type IconSize,
+    iconSizes,
+    getIconSize,
+} from '@suite-common/icons/src/webComponents';

packages/components/src/components/Icon/icons.stories.tsx

@@ -1,11 +1,18 @@
 import React, { useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { Meta, StoryObj } from '@storybook/react';
-import { IconName, icons, Icon, IconProps, allowedIconFrameProps, iconVariants } from './Icon';
+import {
+    IconName,
+    icons,
+    Icon,
+    IconProps,
+    allowedIconFrameProps,
+    iconVariants,
+    iconSizes,
+} from './Icon';
 import { getFramePropsStory } from '../../utils/frameProps';
 import { Input } from '../form/Input/Input';
 import { typography } from '@trezor/theme';
-import { iconSizes } from '@suite-common/icons/src/webComponents';
 
 const CopiedText = styled.div`
     display: flex;

packages/components/src/components/buttons/Button/Button.tsx

@@ -26,6 +26,7 @@ type ButtonContainerProps = TransientProps<AllowedFrameProps> & {
     $hasIcon?: boolean;
     $isFullWidth?: boolean;
     $isSubtle: boolean;
+    $borderRadius?: typeof borders.radii.sm | typeof borders.radii.full; // Do not allow all, we want consistency
 };
 
 export const ButtonContainer = styled.button<ButtonContainerProps>`
@@ -36,7 +37,7 @@ export const ButtonContainer = styled.button<ButtonContainerProps>`
     gap: ${({ $hasIcon }) => $hasIcon && spacingsPx.xs};
     padding: ${({ $size }) => getPadding($size, true)};
     width: ${({ $isFullWidth }) => $isFullWidth && '100%'};
-    border-radius: ${borders.radii.full};
+    border-radius: ${({ $borderRadius }) => $borderRadius ?? borders.radii.full};
     transition:
         ${focusStyleTransition},
         background 0.1s ease-out;

packages/components/src/components/typography/Text/Text.tsx

@@ -10,10 +10,9 @@ type TextWrap = 'balance' | 'break-word';
 export const allowedTextFrameProps: FramePropsKeys[] = ['margin'];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedTextFrameProps)[number]>;
 
-export type TextVariant = Extract<
-    UIVariant,
-    'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'destructive'
->;
+export type TextVariant =
+    | Extract<UIVariant, 'primary' | 'secondary' | 'tertiary' | 'info' | 'warning' | 'destructive'>
+    | 'purple';
 
 type ExclusiveColorOrVariant =
     | { variant?: TextVariant; color?: undefined }
@@ -30,6 +29,7 @@ const variantColorMap: Record<TextVariant, Color> = {
     info: 'textAlertBlue',
     warning: 'textAlertYellow',
     destructive: 'textAlertRed',
+    purple: 'textAlertPurple',
 };
 
 type ColorProps = {

packages/components/src/index.ts

@@ -19,6 +19,7 @@ export * from './components/buttons/Button/Button';
 export * from './components/buttons/ButtonGroup/ButtonGroup';
 export * from './components/buttons/IconButton/IconButton';
 export * from './components/Icon/Icon';
+export { ComponentWithSubIcon } from './components/ComponentWithSubIcon/ComponentWithSubIcon';
 export * from './components/buttons/PinButton/PinButton';
 export * from './components/buttons/TextButton/TextButton';
 export { Card, type CardProps } from './components/Card/Card';