@cloud-ru/ds-info-block 1.0.0

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

@@ -0,0 +1,109 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/infoBlock.module' as infoBlock;
+
+$sizes: 's', 'm', 'l';
+
+.contentLayout {
+  display: flex;
+  flex-direction: column;
+}
+
+.textWrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.title {
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+.description {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.infoBlock {
+  display: flex;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(infoBlock.$infoBlock, 'anatomy', 'size', $size, 'container');
+    }
+  }
+
+  // Центрирования по горизонтали в Figma нет: корень там фрейм фиксированной ширины,
+  // а место блока в потоке определяет родитель.
+  &[data-align='vertical'] {
+    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;
+    }
+  }
+
+  &[data-align='horizontal'] {
+    flex-direction: row;
+    align-items: flex-start;
+
+    .contentLayout {
+      flex: 1 0 0;
+      align-items: flex-start;
+      min-width: 0;
+    }
+
+    .textWrap {
+      align-items: flex-start;
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-start;
+    }
+
+    .description,
+    .title {
+      text-align: left;
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .contentLayout {
+        @include base.composite-var(infoBlock.$infoBlock, 'anatomy', 'size', $size, 'container', 'content');
+      }
+
+      .textWrap {
+        @include base.composite-var(infoBlock.$infoBlock, 'anatomy', 'size', $size, 'container', 'content', 'text');
+      }
+
+      .title {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'title', $size);
+      }
+
+      .description {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', $size);
+      }
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './InfoBlock';

package/src/constants.ts

@@ -0,0 +1,24 @@
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
+
+export const ALIGN = {
+  Vertical: 'vertical',
+  Horizontal: 'horizontal',
+} as const;
+
+export const TEST_IDS = {
+  root: 'info-block',
+  icon: 'info-block__icon',
+  title: 'info-block__title',
+  content: 'info-block__content',
+  footer: 'info-block__footer',
+};
+
+export const SIZE_TO_ICON_SIZE = {
+  s: 'm' as const,
+  m: 'l' as const,
+  l: '5xl' as const,
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './constants';
+export * from './types';

package/src/types.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { ALIGN, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+export type Align = ValueOf<typeof ALIGN>;