@snack-uikit/card 0.6.4 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2023-12-28)
+
+
+### Features
+
+* **FF-3960:** add S size ([1ef77b1](https://github.com/cloud-ru-tech/snack-uikit/commit/1ef77b133d182e2601372ad9e6304080d95516ac))
+
+
+
+
+
 ## 0.6.4 (2023-12-25)
 
 ### Only dependencies have been changed
@@ -37,7 +48,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## 0.6.1 (2023-12-14)
 
-**Note:** Version bump only for package @snack-uikit/card
+### Only dependencies have been changed
+* [@snack-uikit/button@0.15.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/droplist@0.12.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/droplist/CHANGELOG.md)
+* [@snack-uikit/icon-predefined@0.4.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icon-predefined/CHANGELOG.md)
+* [@snack-uikit/promo-tag@0.4.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/promo-tag/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+* [@snack-uikit/typography@0.6.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/typography/CHANGELOG.md)
 
 
 

package/README.md

@@ -33,7 +33,7 @@ import { Card, SearchPrivate } from "@snack-uikit/card";
 | outline | `boolean` | - | Управление состоянием наличия обводки |
 | multipleSelection | `boolean` | - | Отображение галочки для режима массового выделения карточек |
 | onClick | `() => void` | - | Колбек на клик по карточке |
-| size | enum Size: `"m"`, `"l"` | - | Размер |
+| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
 | promoBadge | `string` | - | Текст для PromoBadge |
 | children | `ReactNode` | - | Вложенный контент |
 | header | `ReactElement<HeaderProps, string \| JSXElementConstructor<any>>` | - | Вложенный Header |

package/dist/components/Card/Card.js

@@ -31,5 +31,5 @@ export function Card(_a) {
     }, [onClick]);
     return (_jsx(CardContext.Provider, { value: { size, disabled }, children: _jsxs("div", Object.assign({ ref: localRef, className: cn(styles.card, className) }, extractSupportProps(rest), { onClick: onClick, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-outline": outline || undefined, "data-pointer": onClick ? true : undefined, 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, onKeyDown: onKeyDown, children: [image, promoBadge && _jsx(PromoBadge, { text: promoBadge }), _jsxs("div", { className: styles.composition, tabIndex: -1, children: [!disabled && functionBadge && (_jsx(FunctionBadgeWrapper, { className: styles.functionBadgeWrapper, children: functionBadge })), _jsxs("div", { className: styles.contentWrapper, children: [_jsxs("div", { className: styles.content, "data-size": size, children: [header || null, _jsx(Typography, { family: 'sans', size: size, purpose: 'body', className: styles.body, children: children })] }), footer && _jsx("div", { className: styles.footer, children: footer })] })] }), !disabled && checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
+            tabIndex: 0, onKeyDown: onKeyDown, children: [image, promoBadge && _jsx(PromoBadge, { text: promoBadge }), _jsxs("div", { className: styles.composition, tabIndex: -1, children: [!disabled && functionBadge && (_jsx(FunctionBadgeWrapper, { className: styles.functionBadgeWrapper, children: functionBadge })), _jsx("div", { className: styles.contentWrapper, children: _jsxs("div", { className: styles.content, "data-size": size, children: [header || null, children && (_jsx(Typography, { family: 'sans', size: size, purpose: 'body', className: styles.body, children: children })), footer && _jsx("div", { className: styles.footer, children: footer })] }) })] }), !disabled && checked && multipleSelection && _jsx(Check, { className: styles.check })] })) }));
 }

package/dist/components/Card/styles.module.css

@@ -137,17 +137,21 @@
   box-sizing:border-box;
   max-width:100%;
 }
+.content[data-size=s]{
+  padding:var(--space-card-padding-container-s, 8px);
+  gap:var(--space-card-gap-s, 4px);
+}
 .content[data-size=m]{
-  padding:var(--space-card-padding-container, 16px);
+  padding:var(--space-card-padding-container-m, 16px);
   gap:var(--space-card-gap-m, 8px);
 }
 .content[data-size=l]{
-  padding:var(--space-card-padding-container, 16px);
+  padding:var(--space-card-padding-container-l, 24px);
   gap:var(--space-card-gap-l, 16px);
 }
 
 .footer{
-  padding:var(--space-card-padding-container, 16px);
   position:relative;
   box-sizing:border-box;
+  width:100%;
 }

package/dist/components/Footer/components/Dimension/constants.js

@@ -1,5 +1,6 @@
 import { SIZE } from '../../../../constants';
 export const TYPOGRAPHY_SIZE_MAP = {
+    [SIZE.S]: 'm',
     [SIZE.M]: 'm',
     [SIZE.L]: 'l',
 };

package/dist/components/Header/constants.js

@@ -1,9 +1,11 @@
 import { SIZE } from '../../constants';
 export const TITLE_SIZE_MAP = {
+    [SIZE.S]: 's',
     [SIZE.M]: 's',
     [SIZE.L]: 'l',
 };
 export const DESCRIPTION_SIZE_MAP = {
+    [SIZE.S]: 'm',
     [SIZE.M]: 'm',
     [SIZE.L]: 'l',
 };

package/dist/components/Header/styles.module.css

@@ -4,6 +4,9 @@
   box-sizing:border-box;
   width:100%;
 }
+.titleLayout[data-size=s]{
+  gap:var(--space-card-gap-s, 4px);
+}
 .titleLayout[data-size=m]{
   gap:var(--space-card-gap-m, 8px);
 }

package/dist/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly S: "s";
     readonly M: "m";
     readonly L: "l";
 };

package/dist/constants.js

@@ -1,4 +1,5 @@
 export const SIZE = {
+    S: 's',
     M: 'm',
     L: 'l',
 };

package/dist/helperComponents/Emblem/styled.module.css

@@ -7,6 +7,12 @@
   border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
   border-style:solid;
 }
+.img[data-size=s]{
+  width:var(--size-card-picture-s, 32px);
+  height:var(--size-card-picture-s, 32px);
+  border-width:var(--border-width-card-picture, 1px);
+  border-radius:var(--radius-card-picture, 8px);
+}
 .img[data-size=m]{
   width:var(--size-card-picture-m, 40px);
   height:var(--size-card-picture-m, 40px);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,15 +32,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.15.0",
-    "@snack-uikit/droplist": "0.12.3",
-    "@snack-uikit/icon-predefined": "0.4.0",
+    "@snack-uikit/button": "0.15.1",
+    "@snack-uikit/droplist": "0.12.4",
+    "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.19.2",
-    "@snack-uikit/promo-tag": "0.4.0",
-    "@snack-uikit/truncate-string": "0.4.3",
-    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/promo-tag": "0.4.1",
+    "@snack-uikit/truncate-string": "0.4.4",
+    "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
 }

package/src/components/Card/Card.tsx

@@ -99,12 +99,14 @@ export function Card({
             <div className={styles.content} data-size={size}>
               {header || null}
 
-              <Typography family='sans' size={size} purpose='body' className={styles.body}>
-                {children}
-              </Typography>
-            </div>
+              {children && (
+                <Typography family='sans' size={size} purpose='body' className={styles.body}>
+                  {children}
+                </Typography>
+              )}
 
-            {footer && <div className={styles.footer}>{footer}</div>}
+              {footer && <div className={styles.footer}>{footer}</div>}
+            </div>
           </div>
         </div>
 

package/src/components/Card/styles.module.scss

@@ -1,7 +1,7 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
-$sizes:  'm', 'l';
+$sizes: 's', 'm', 'l';
 
 .functionBadgeWrapper {
   position: absolute;
@@ -17,12 +17,12 @@ $sizes:  'm', 'l';
 .composition {
   @include composite-var($card-composition-container);
 
-  box-sizing: border-box; 
+  box-sizing: border-box;
 }
 
 .card {
   @include composite-var($card-container);
-  
+
   position: relative;
 
   overflow: hidden;
@@ -32,7 +32,7 @@ $sizes:  'm', 'l';
   padding: 0;
 
   text-align: left;
-  
+
   background-color: $sys-neutral-background1-level;
   border: 0;
   outline-color: transparent;
@@ -76,8 +76,6 @@ $sizes:  'm', 'l';
     }
   }
 
-
-
   &[data-pointer] {
     * {
       cursor: pointer;
@@ -153,14 +151,13 @@ $sizes:  'm', 'l';
     background-color: $sys-neutral-background;
     outline-color: $sys-neutral-decor-default;
     outline-width: $border-width-card-container;
-    
+
     * {
       cursor: not-allowed;
     }
   }
 }
 
-
 .body {
   display: block;
   color: $sys-neutral-text-support;
@@ -186,9 +183,7 @@ $sizes:  'm', 'l';
 }
 
 .footer {
-  @include composite-var($card-footer);
-
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 }
-

package/src/components/Footer/components/Dimension/constants.ts

@@ -3,6 +3,7 @@ import { TypographyProps } from '@snack-uikit/typography';
 import { SIZE } from '../../../../constants';
 
 export const TYPOGRAPHY_SIZE_MAP: Record<string, TypographyProps['size']> = {
+  [SIZE.S]: 'm',
   [SIZE.M]: 'm',
   [SIZE.L]: 'l',
 };

package/src/components/Header/constants.ts

@@ -4,11 +4,13 @@ import { SIZE } from '../../constants';
 import { Size } from '../../types';
 
 export const TITLE_SIZE_MAP: Record<Size, TypographyProps['size']> = {
+  [SIZE.S]: 's',
   [SIZE.M]: 's',
   [SIZE.L]: 'l',
 };
 
 export const DESCRIPTION_SIZE_MAP: Record<Size, TypographyProps['size']> = {
+  [SIZE.S]: 'm',
   [SIZE.M]: 'm',
   [SIZE.L]: 'l',
 };

package/src/components/Header/styles.module.scss

@@ -1,6 +1,6 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
 
-$sizes:  'm', 'l';
+$sizes: 's', 'm', 'l';
 
 .titleLayout {
   display: flex;

package/src/constants.ts

@@ -1,4 +1,5 @@
 export const SIZE = {
+  S: 's',
   M: 'm',
   L: 'l',
 } as const;

package/src/helperComponents/Emblem/styled.module.scss

@@ -1,6 +1,6 @@
 @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
 
-$sizes:  'm', 'l';
+$sizes:  's', 'm', 'l';
 
 .img {
   overflow: hidden;