@snack-uikit/info-block 0.1.1 → 0.1.2-preview-3e9a33fa.0

package/README.md

@@ -13,8 +13,8 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| description* | `string` | - | Подзаголовок |
 | title | `string` | - | Заголовок |
+| description | `string` | - | Подзаголовок |
 | icon | `Pick<IconPredefinedProps, "icon" \| "decor" \| "appearance">` | - | Иконка |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
 | align | enum Align: `"horizontal"`, `"vertical"` | - | Расположение элементов |

package/dist/components/InfoBlock/InfoBlock.d.ts

@@ -7,7 +7,7 @@ export type InfoBlockProps = WithSupportProps<{
     /** Заголовок */
     title?: string;
     /** Подзаголовок */
-    description: string;
+    description?: string;
     /** Иконка */
     icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
     /** Размер */

package/dist/components/InfoBlock/InfoBlock.js

@@ -19,5 +19,5 @@ import styles from './styles.module.css';
 export function InfoBlock(_a) {
     var _b, _c;
     var { title, description, icon, size = SIZE.S, footer, align = ALIGN.Vertical, className } = _a, rest = __rest(_a, ["title", "description", "icon", "size", "footer", "align", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.infoBlock, className), "data-size": size, "data-align": align }, extractSupportProps(rest), { children: [icon && (_jsx(IconPredefined, { icon: icon.icon, appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'primary', decor: (_c = icon.decor) !== null && _c !== void 0 ? _c : true, size: size, "data-test-id": TEST_IDS.icon })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textWrap, children: [title && (_jsx(Typography, { family: 'sans', purpose: 'title', size: size, className: styles.title, "data-test-id": TEST_IDS.title, children: title })), _jsx(Typography, { family: 'sans', purpose: 'body', size: size, className: styles.description, "data-test-id": TEST_IDS.description, children: description })] }), footer && (_jsx("div", { className: styles.footer, "data-test-id": TEST_IDS.footer, children: footer }))] })] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.infoBlock, className), "data-size": size, "data-align": align }, extractSupportProps(rest), { children: [icon && (_jsx(IconPredefined, { icon: icon.icon, appearance: (_b = icon.appearance) !== null && _b !== void 0 ? _b : 'primary', decor: (_c = icon.decor) !== null && _c !== void 0 ? _c : true, size: size, "data-test-id": TEST_IDS.icon })), _jsxs("div", { className: styles.contentLayout, children: [_jsxs("div", { className: styles.textWrap, children: [title && (_jsx(Typography, { family: 'sans', purpose: 'title', size: size, className: styles.title, "data-test-id": TEST_IDS.title, children: title })), description && (_jsx(Typography, { family: 'sans', purpose: 'body', size: size, className: styles.description, "data-test-id": TEST_IDS.description, children: description }))] }), footer && (_jsx("div", { className: styles.footer, "data-test-id": TEST_IDS.footer, children: footer }))] })] })));
 }

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

@@ -14,6 +14,14 @@
   width:100%;
 }
 
+.title{
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #565656);
+}
+
 .infoBlock{
   display:flex;
   box-sizing:border-box;
@@ -22,10 +30,18 @@
   flex-direction:column;
   align-items:center;
 }
+.infoBlock[data-align=vertical] .contentLayout{
+  align-items:center;
+}
 .infoBlock[data-align=vertical] .textWrap{
   align-items:center;
 }
 .infoBlock[data-align=vertical] .footer{
+  width:auto;
+  text-align:center;
+}
+.infoBlock[data-align=vertical] .description,
+.infoBlock[data-align=vertical] .title{
   text-align:center;
 }
 .infoBlock[data-align=horizontal]{
@@ -58,12 +74,4 @@
 }
 .infoBlock[data-size=l] .textWrap{
   gap:var(--space-info-block-l-container-content-layout-text-wrap-gap, 8px);
-}
-
-.title{
-  color:var(--sys-neutral-text-main, #333333);
-}
-
-.description{
-  color:var(--sys-neutral-text-support, #565656);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Info Block",
-  "version": "0.1.1",
+  "version": "0.1.2-preview-3e9a33fa.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,5 +38,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "b60d0b74333a53f68fe0b48714f036599af050eb"
+  "gitHead": "9b4c7f1e424970a764d16e946ca24dd59d8fabc4"
 }

package/src/components/InfoBlock/InfoBlock.tsx

@@ -14,7 +14,7 @@ export type InfoBlockProps = WithSupportProps<{
   /** Заголовок */
   title?: string;
   /** Подзаголовок */
-  description: string;
+  description?: string;
   /** Иконка */
   icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
   /** Размер */
@@ -62,15 +62,17 @@ export function InfoBlock({
             </Typography>
           )}
 
-          <Typography
-            family='sans'
-            purpose='body'
-            size={size}
-            className={styles.description}
-            data-test-id={TEST_IDS.description}
-          >
-            {description}
-          </Typography>
+          {description && (
+            <Typography
+              family='sans'
+              purpose='body'
+              size={size}
+              className={styles.description}
+              data-test-id={TEST_IDS.description}
+            >
+              {description}
+            </Typography>
+          )}
         </div>
 
         {footer && (

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

@@ -18,6 +18,14 @@ $sizes: 's', 'm', 'l';
   width: 100%;
 }
 
+.title {
+  color: $sys-neutral-text-main;
+}
+
+.description {
+  color: $sys-neutral-text-support;
+}
+
 .infoBlock {
   display: flex;
   box-sizing: border-box;
@@ -26,11 +34,21 @@ $sizes: 's', 'm', 'l';
     flex-direction: column;
     align-items: center;
 
+    .contentLayout {
+      align-items: center;
+    }
+
     .textWrap {
       align-items: center;
     }
 
     .footer {
+      width: auto;
+      text-align: center;
+    }
+
+    .description,
+    .title {
       text-align: center;
     }
   }
@@ -54,11 +72,3 @@ $sizes: 's', 'm', 'l';
     }
   }
 }
-
-.title {
-  color: $sys-neutral-text-main;
-}
-
-.description {
-  color: $sys-neutral-text-support;
-}