feat(Card): add mode plain (#7824)

* feat(Card): add mode plain

* fix(Card): fix screenshots

* doc(Card): add expample of plain Card to styleguide

* doc(Card): fix prettier

* fix(Card): fix documentation

* fix(Card): prettier

packages/vkui/src/components/Card/Card.e2e-playground.tsx

@@ -12,7 +12,7 @@ export const CardPlayground = (props: ComponentPlaygroundProps): React.ReactNode
       {...props}
       propSets={[
         {
-          mode: ['tint', 'shadow', 'outline', 'outline-tint'],
+          mode: ['tint', 'shadow', 'outline', 'outline-tint', 'plain'],
         },
       ]}
     >

packages/vkui/src/components/Card/Card.module.css

@@ -12,10 +12,11 @@
     0 2px 24px 0 rgba(0, 0, 0, 0.08),
     0 0 2px 0 rgba(0, 0, 0, 0.08)
   );
-  background: var(--vkui--color_background_contrast_themed);
 }
 
-.modeOutline {
+.modeShadow,
+.modeOutline,
+.modePlain {
   background: var(--vkui--color_background_contrast_themed);
 }
 

packages/vkui/src/components/Card/Card.tsx

@@ -4,7 +4,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Card.module.css';
 
 export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {
-  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint';
+  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint' | 'plain';
 }
 
 /**
@@ -24,6 +24,7 @@ export const Card = ({
         styles.host,
         mode === 'outline' && styles.modeOutline,
         mode === 'shadow' && styles.modeShadow,
+        mode === 'plain' && styles.modePlain,
         withBorder && styles.withBorder,
       )}
     />

packages/vkui/src/components/Card/Readme.md

@@ -8,33 +8,39 @@
   <Panel id="card">
     <PanelHeader>Card</PanelHeader>
     <Group>
-      <Group mode="plain" header={<Header size="s">Дефолтный стиль</Header>}>
+      <Group mode="plain" header={<Header size="s">Стандартный стиль</Header>}>
         <CardGrid size="l">
           <Card>
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header size="s">С внутренней обводкой</Header>}>
+      <Group mode="plain" header={<Header size="s">Стандартный фон с обводкой</Header>}>
         <CardGrid size="l">
-          <Card mode="outline">
+          <Card mode="outline-tint">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header size="s">С внешней тенью</Header>}>
+    </Group>
+    <Group style={{ background: 'var(--vkui--color_background_secondary)' }}>
+      <Group mode="plain" header={<Header size="s">Светлый фон без обводки и тени</Header>}>
         <CardGrid size="l">
-          <Card mode="shadow">
+          <Card mode="plain">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group
-        mode="plain"
-        header={<Header size="s">С внутренней обводкой и дефолтным фоном</Header>}
-      >
+      <Group mode="plain" header={<Header size="s">Светлый фон с обводкой</Header>}>
         <CardGrid size="l">
-          <Card mode="outline-tint">
+          <Card mode="outline">
+            <div style={{ height: 96 }} />
+          </Card>
+        </CardGrid>
+      </Group>
+      <Group mode="plain" header={<Header size="s">Светлый фон с тенью</Header>}>
+        <CardGrid size="l">
+          <Card mode="shadow">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>