@redneckz/wildless-cms-uni-blocks 0.3.13 → 0.3.14

package/src/components/Recommendation/RecommendationCard.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { RecommendationCardContent } from './RecommendationContent';
+
+export interface RecommendationCardProps extends RecommendationCardContent, UniBlockProps {
+  version?: BlockVersion;
+}
+
+export const RecommendationCard = JSX<RecommendationCardProps>(
+  ({ context, className = '', title, description, items, image, version }) => {
+    return (
+      <section
+        className={`border border-solid box-border rounded-md p-7 min-w-[515px] max-w-[515px] ${className}`}
+        role="listitem"
+      >
+        <BaseTile
+          context={context}
+          title={title && <Heading headingType="h4" title={title} className="mb-4" />}
+          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+        >
+          {description ? <Description description={description} /> : null}
+          {items?.length ? <List items={items} version={version} /> : null}
+        </BaseTile>
+      </section>
+    );
+  },
+);

package/src/components/Recommendation/RecommendationContent.ts

@@ -0,0 +1,19 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+export type RecommendationCardContent = HeadingContent &
+  DescriptionContent &
+  ListContent &
+  ImageContent;
+
+/**
+ * @title Рекомендации
+ */
+export interface RecommendationContent extends HeadingContent {
+  /** @title Карточки */
+  recommendations?: RecommendationCardContent[];
+  version?: BlockVersion;
+}

package/src/model/BlockVersion.ts

@@ -1,5 +1,11 @@
 /**
- * @title Цвет плитки
+ * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
  */
 export type BlockVersion = 'primary' | 'secondary';
+
+/**
+ * @title Цвет блока
+ * @enumNames ["Прозрачная", Основная", "Второстепенная"]
+ */
+export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';

package/src/ui-kit/Description/Description.tsx

@@ -8,5 +8,5 @@ export interface DescriptionProps extends DescriptionContent {
 export const Description = JSX<DescriptionProps>((props) => {
   const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
+  return <div className={`font-normal text-base ${className}`}>{description}</div>;
 });