chore: rafactor card a bit

taiga-family · Jan 31, 2024 · 02e16fb · 02e16fb
1 parent f4b3eab
commit 02e16fb
Show file tree

Hide file tree

Showing 49 changed files with 513 additions and 447 deletions.
diff --git a/projects/addon-mobile/styles/common/card-large.less b/projects/addon-mobile/styles/common/card-large.less
@@ -1,13 +1,12 @@
-[tuiCard='l'] {
-    &[data-size='l'] {
-        &[data-space='normal'] {
-            padding: 1.25rem;
-            gap: 1.25rem;
-        }
+[tuiCardLarge] {
+    &[data-space='normal'] {
+        --t-padding: 1.25rem;
+        --t-gap: 1.25rem;
+    }
 
-        &[data-space='compact'] {
-            padding: 1rem;
-            gap: 1rem;
-        }
+    &[data-space='compact'] {
+        --t-padding: 1rem;
+        --t-gap: 1rem;
+        --t-comp: -0.125rem;
     }
 }
diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less
@@ -9,6 +9,7 @@
     .appearance-hover({
         background: var(--tui-clear);
         box-shadow: inset 0 0 0 1px var(--tui-base-05);
+        cursor: pointer;
     });
 
     .appearance-active({

diff --git a/projects/demo/src/modules/experimental/card/card.module.ts b/projects/demo/src/modules/experimental/card/card.module.ts
@@ -14,6 +14,7 @@ import {
     TuiSvgModule,
 } from '@taiga-ui/core';
 import {
+    TuiAppearanceModule,
     TuiAutoColorModule,
     TuiAvatarModule,
     TuiAvatarStackModule,
@@ -31,7 +32,6 @@ import {
     TuiThumbnailCardModule,
     TuiTitleModule,
 } from '@taiga-ui/experimental';
-import {TuiProgressModule} from '@taiga-ui/kit';
 
 import {ExampleTuiCardComponent} from './card.component';
 import {TuiCardExample1} from './examples/1';
@@ -82,10 +82,10 @@ import {TuiCardExample19} from './examples/19';
         TuiRepeatTimesModule,
         TuiDataListModule,
         TuiHostedDropdownModule,
-        TuiProgressModule,
         TuiButtonCloseModule,
         TuiPlatformModule,
         TuiLinkModule,
+        TuiAppearanceModule,
     ],
     declarations: [
         ExampleTuiCardComponent,

diff --git a/projects/demo/src/modules/experimental/card/card.template.html b/projects/demo/src/modules/experimental/card/card.template.html
@@ -10,6 +10,18 @@
             and is a subject to change. Expect final solution to be shipped in the next major version
         </tui-notification>
 
+        <p>
+            A layout component used to create various cards for the interface. Define visual styles of the cards
+            yourself or combine with
+            <a
+                routerLink="/experimental/surface"
+                tuiLink
+            >
+                Surface
+            </a>
+            for visual presets.
+        </p>
+
         <tui-doc-example
             id="avatar"
             heading="Avatar and text"
@@ -85,8 +97,8 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="cell"
-            heading="Cell"
+            id="single"
+            heading="Single item"
             [content]="example10"
         >
             <tui-card-example-10></tui-card-example-10>
@@ -119,15 +131,15 @@
 
         <tui-doc-example
             id="cell-list-headless"
-            heading="Cell List (headless)"
+            heading="Cell List (actions)"
             [content]="example14"
         >
             <tui-card-example-14></tui-card-example-14>
         </tui-doc-example>
 
         <tui-doc-example
-            id="progress"
-            heading="Progress"
+            id="align"
+            heading="Footer alignment"
             [content]="example15"
         >
             <tui-card-example-15></tui-card-example-15>

diff --git a/projects/demo/src/modules/experimental/card/examples/1/index.html b/projects/demo/src/modules/experimental/card/examples/1/index.html
@@ -1,4 +1,7 @@
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <tui-avatar
         src="tuiIconStarLarge"
         class="star"
@@ -10,7 +13,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <h2
         tuiTitle
         [style.margin-top]="'auto'"
@@ -20,7 +26,10 @@ <h2 tuiTitle>
     </h2>
 </div>
 
-<div tuiCard>
+<div
+    tuiCardMedium
+    tuiSurface="flat"
+>
     <h2 tuiTitle>
         Title
         <span tuiSubtitle>Subtitle</span>

diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.html b/projects/demo/src/modules/experimental/card/examples/10/index.html
@@ -1,74 +1,64 @@
 <button
-    tuiCard="l"
-    tuiCell
+    tuiCardLarge
+    tuiHeader
     tuiSurface="elevated"
 >
-    <header tuiHeader>
-        <h1 tuiTitle>
-            Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+    <h1 tuiTitle>
+        Title
+        <span tuiSubtitle>Subtitle</span>
+    </h1>
 
-        <aside tuiAccessories>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconStar"
-            ></tui-avatar>
-        </aside>
-    </header>
+    <aside tuiAccessories>
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+    </aside>
 </button>
 
 <button
-    tuiCard="l"
+    tuiCardLarge
     tuiCell
     tuiSurface="elevated"
 >
-    <section tuiCell>
-        <tui-avatar
-            appearance="primary"
-            src="tuiIconStar"
-        ></tui-avatar>
-        <div tuiTitle>
-            Title
-            <div tuiSubtitle>Description</div>
-        </div>
-    </section>
+    <tui-avatar
+        appearance="primary"
+        src="tuiIconStar"
+    ></tui-avatar>
+    <div tuiTitle>
+        Title
+        <div tuiSubtitle>Description</div>
+    </div>
 </button>
 
 <section class="actions">
     <button
-        tuiCard="l"
-        tuiCell
+        tuiCardLarge
+        tuiHeader
         tuiSurface="elevated"
     >
-        <header tuiHeader>
-            <h2 tuiTitle>Title</h2>
+        <h2 tuiTitle>Title</h2>
 
-            <aside tuiAccessories>
-                <tui-avatar
-                    appearance="primary"
-                    size="xxs"
-                    src="tuiIconStar"
-                ></tui-avatar>
-            </aside>
-        </header>
+        <aside tuiAccessories>
+            <tui-icon
+                icon="tuiIconStar"
+                tuiAppearance="flat"
+            ></tui-icon>
+        </aside>
     </button>
 
     <button
-        tuiCard="l"
-        tuiCell
+        tuiCardLarge
+        tuiHeader
         tuiSurface="elevated"
     >
-        <header tuiHeader>
-            <h2 tuiTitle>Title</h2>
+        <h2 tuiTitle>Title</h2>
 
-            <aside tuiAccessories>
-                <tui-avatar
-                    appearance="primary"
-                    size="xxs"
-                    src="tuiIconStar"
-                ></tui-avatar>
-            </aside>
-        </header>
+        <aside tuiAccessories>
+            <tui-icon
+                icon="tuiIconStar"
+                tuiAppearance="flat"
+            ></tui-icon>
+        </aside>
     </button>
 </section>
diff --git a/projects/demo/src/modules/experimental/card/examples/10/index.less b/projects/demo/src/modules/experimental/card/examples/10/index.less
@@ -2,18 +2,11 @@
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
-
-    [tuiCard][data-size='l'] {
-        padding: 1rem 1.5rem;
-    }
+    width: 20rem;
 }
 
 .actions {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 1.25rem;
-
-    button {
-        flex: 1;
-        height: 3.75rem;
-    }
 }
diff --git a/projects/demo/src/modules/experimental/card/examples/11/index.html b/projects/demo/src/modules/experimental/card/examples/11/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -11,8 +11,9 @@ <h1 tuiTitle>
 
     <section>
         <div
-            *tuiRepeatTimes="let index of 4"
-            tuiCard
+            *tuiRepeatTimes="let index of 3"
+            tuiCardMedium
+            tuiSurface="flat"
         >
             <tui-icon
                 icon="tuiIconPlusSquareLarge"

diff --git a/projects/demo/src/modules/experimental/card/examples/12/index.html b/projects/demo/src/modules/experimental/card/examples/12/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -9,21 +9,19 @@ <h1 tuiTitle>
         </h1>
     </header>
 
-    <section>
-        <div
-            *tuiRepeatTimes="let index of 6"
-            tuiCell="l"
-        >
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconStar"
-            ></tui-avatar>
-            <div tuiTitle>
-                Title
-                <div tuiSubtitle>Description</div>
-            </div>
+    <div
+        *tuiRepeatTimes="let index of 3"
+        tuiCell="l"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
         </div>
-    </section>
+    </div>
 
     <footer>
         <button

diff --git a/projects/demo/src/modules/experimental/card/examples/13/index.html b/projects/demo/src/modules/experimental/card/examples/13/index.html
@@ -1,5 +1,5 @@
 <div
-    tuiCard="l"
+    tuiCardLarge
     tuiSurface="elevated"
 >
     <header tuiHeader>
@@ -9,38 +9,20 @@ <h1 tuiTitle>
         </h1>
     </header>
 
-    <section>
-        <aside>
-            <div
-                *tuiRepeatTimes="let index of 6"
-                tuiCell="l"
-            >
-                <tui-avatar
-                    appearance="primary"
-                    src="tuiIconStar"
-                ></tui-avatar>
-                <div tuiTitle>
-                    Title
-                    <div tuiSubtitle>Description</div>
-                </div>
-            </div>
-        </aside>
-
-        <aside>
-            <div
-                *tuiRepeatTimes="let index of 6"
-                tuiCell="l"
-            >
-                <tui-avatar
-                    appearance="primary"
-                    src="tuiIconStar"
-                ></tui-avatar>
-                <div tuiTitle>
-                    Title
-                    <div tuiSubtitle>Description</div>
-                </div>
+    <section class="actions">
+        <div
+            *tuiRepeatTimes="let index of 6"
+            tuiCell="l"
+        >
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconStar"
+            ></tui-avatar>
+            <div tuiTitle>
+                Title
+                <div tuiSubtitle>Description</div>
             </div>
-        </aside>
+        </div>
     </section>
 
     <footer>