@cloud-ru/uikit-product-site-banner 0.3.13

package/src/helperComponents/BannerCommon/styles.module.scss

@@ -0,0 +1,96 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--site-banner-main-gap);
+
+  padding: 32px;
+}
+
+.title,
+.description {
+  word-break: break-word;
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.buttons {
+  display: flex;
+  margin-top: auto;
+  gap: 16px;
+}
+
+.img {
+  width: 100%;
+  max-width: var(--site-banner-image-max-width);
+  max-height: var(--site-banner-image-max-height);
+
+  flex-shrink: 0;
+
+  &Wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.erid {
+  position: absolute;
+  right: 2px;
+  top: 2px;
+}
+
+.root {
+  position: relative;
+
+  display: grid;
+
+  grid-template-columns: 1fr var(--site-banner-image-max-width);
+
+  &[data-layout-type='tablet'] {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+      padding: 24px;
+    }
+
+    .text {
+      gap: 8px;
+    }
+
+    .buttons {
+      flex-direction: column;
+    }
+
+    .button {
+      width: 100%;
+    }
+  }
+
+  &[data-layout-type='mobile'] {
+    display: flex;
+    flex-direction: column;
+
+    .content {
+      padding: 16px;
+    }
+
+    .text {
+      gap: 4px;
+    }
+
+    .buttons {
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .button {
+      width: 100%;
+    }
+  }
+}

package/src/helperComponents/BannerCommon/types.ts

@@ -0,0 +1,17 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { Appearance, Color } from './constants';
+
+type ColorType = ValueOf<typeof Color>;
+
+export type AppearanceType = ValueOf<typeof Appearance>;
+
+export type WithColor = {
+  appearance: Exclude<AppearanceType, 'brand' | 'graphite'>;
+  color?: ColorType;
+};
+
+export type WithoutColor = {
+  appearance: Exclude<AppearanceType, 'decor'>;
+  color?: never;
+};

package/src/helperComponents/BannerCommon/util.ts

@@ -0,0 +1,22 @@
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+
+export const getBlockTitleProps = (layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'> => {
+  switch (layoutType) {
+    case 'mobile':
+      return {
+        purpose: 'title',
+        size: 'm',
+      };
+    case 'tablet':
+      return {
+        purpose: 'title',
+        size: 'l',
+      };
+    default:
+      return {
+        purpose: 'headline',
+        size: 'm',
+      };
+  }
+};

package/src/helperComponents/ColorWrapper/ColorWrapper.tsx

@@ -0,0 +1,33 @@
+import cn from 'classnames';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+
+import { ButtonPromoProps } from '@cloud-ru/uikit-product-button-predefined';
+import { EridProps } from '@cloud-ru/uikit-product-site-tag';
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import { AppearanceType, WithColor, WithoutColor } from '../BannerCommon/types';
+import styles from './styles.module.scss';
+
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+
+export type ColorWrapperProps = PropsWithChildren<
+  WithSupportProps<
+    {
+      className?: string;
+    } & (WithColor | WithoutColor)
+  >
+>;
+
+export function ColorWrapper({ id, className, children, color, appearance, ...other }: ColorWrapperProps & DivProps) {
+  return (
+    <div id={id} data-appearance={appearance} data-color={color} className={cn(styles.root, className)} {...other}>
+      {children}
+    </div>
+  );
+}
+
+ColorWrapper.getButtonAppearance = (appearance: AppearanceType): ButtonPromoProps['appearance'] =>
+  appearance !== 'graphite' ? 'secondary' : 'tertiary';
+
+ColorWrapper.getEridAppearance = (appearance: AppearanceType): EridProps['appearance'] =>
+  appearance === 'graphite' ? 'invert-neutral' : 'neutral';

package/src/helperComponents/ColorWrapper/index.ts

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

package/src/helperComponents/ColorWrapper/styles.module.scss

@@ -0,0 +1,45 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
+
+$colors: (
+  neutral: var.$sys-neutral-background,
+  white: var.$sys-neutral-background1-level,
+  violet: var.$sys-violet-background,
+  blue: var.$sys-blue-background,
+);
+
+$decor: 'decor';
+$graphite: 'graphite';
+$brand: 'brand';
+
+@mixin decor-background-colors {
+  @each $color, $value in $colors {
+    &[data-color='#{$color}'][data-appearance='#{$decor}'] {
+      background-color: $value;
+    }
+  }
+}
+
+@mixin appearance {
+  &[data-appearance='#{$graphite}'] {
+    background-color: var.$sys-graphite-accent-default;
+
+    [data-color-wrapper-role=text] {
+      color: var.$sys-invert-neutral-text-main;
+    }
+  }
+
+  &[data-appearance='#{$brand}'] {
+    background-color: var.$sys-primary-accent-default;
+  }
+}
+
+.root {
+  background-color: var.$sys-neutral-background;
+
+  @include decor-background-colors;
+  @include appearance;
+}
+
+[data-color-wrapper-role=text] {
+  color: var.$sys-graphite-text-main;
+}

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,3 @@
+export type BetterOmit<Type, Prop> = {
+  [Property in keyof Type as Exclude<Property, Prop>]: Type[Property];
+};