@cloud-ru/uikit-product-site-article 0.2.2 → 0.2.4

package/dist/esm/components/Products/Products.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent } from 'react';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+export type ArticleProduct = {
+    name: string;
+    icon: string;
+    href: string;
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+};
+export type ProductsProps = WithLayoutType<{
+    products?: ArticleProduct[];
+    solutions?: ArticleProduct[];
+}>;
+export declare function Products(props: ProductsProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Products/Products.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import { ServiceLight } from './helperComponents';
+import styles from './styles.module.css';
+export function Products(props) {
+    const { layoutType, products, solutions } = props;
+    return (_jsxs("div", { className: styles.products, "data-layout-type": layoutType, children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 0 && (_jsxs("div", { children: [_jsx(Typography.SansTitleM, { className: styles.label, tag: 'span', children: "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u043D\u044B\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044B:" }), _jsx("div", { className: styles.tags, "data-layout-type": layoutType, "data-test-id": 'article-products', children: products.map(item => (_jsx(ServiceLight, Object.assign({}, item), item.name))) })] })), (solutions === null || solutions === void 0 ? void 0 : solutions.length) && solutions.length > 0 && (_jsxs("div", { children: [_jsx(Typography.SansTitleM, { className: styles.label, tag: 'span', children: "\u0420\u0435\u0448\u0435\u043D\u0438\u044F:" }), _jsx("div", { className: styles.tags, "data-layout-type": layoutType, "data-test-id": 'article-solutions', children: solutions.map(item => (_jsx(ServiceLight, Object.assign({}, item), item.name))) })] }))] }));
+}

package/dist/esm/components/Products/helperComponents/ServiceLight/ServiceLight.d.ts

@@ -0,0 +1,4 @@
+import { ArticleProduct } from '../../Products';
+type ServiceLightProps = ArticleProduct;
+export declare function ServiceLight(props: ServiceLightProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Products/helperComponents/ServiceLight/ServiceLight.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function ServiceLight(props) {
+    const { icon, name, href, onClick } = props;
+    return (_jsxs("a", { className: styles.serviceLight, href: href, onClick: onClick, children: [_jsx("img", { src: icon, alt: `Иконка-${name}`, width: 24, height: 24 }), _jsx(Typography.SansBodyM, { children: name })] }));
+}

package/dist/esm/components/Products/helperComponents/ServiceLight/index.d.ts

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

package/dist/esm/components/Products/helperComponents/ServiceLight/index.js

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

package/dist/esm/components/Products/helperComponents/ServiceLight/styles.module.css

@@ -0,0 +1,9 @@
+.serviceLight{
+  display:inline-flex;
+  align-items:center;
+  gap:4px;
+  color:var(--sys-neutral-text-support, #656774);
+}
+.serviceLight:hover{
+  color:var(--sys-primary-text-light, #0ea55b);
+}

package/dist/esm/components/Products/helperComponents/index.d.ts

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

package/dist/esm/components/Products/helperComponents/index.js

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

package/dist/esm/components/Products/index.d.ts

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

package/dist/esm/components/Products/index.js

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

package/dist/esm/components/Products/styles.module.css

@@ -0,0 +1,29 @@
+.products{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  gap:24px;
+}
+.products[data-layout-type=tablet]{
+  gap:20px;
+}
+.products[data-layout-type=mobile]{
+  gap:12px;
+}
+
+.label{
+  display:block;
+  color:var(--sys-neutral-text-main, #41424e);
+  margin-bottom:8px;
+}
+
+.tags{
+  display:flex;
+  flex-wrap:wrap;
+  gap:16px;
+}
+.tags[data-layout-type=mobile]{
+  flex-wrap:nowrap;
+  flex-direction:column;
+  gap:12px;
+}

package/dist/esm/components/Quote/Quote.d.ts

@@ -0,0 +1,8 @@
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+export type QuoteProps = WithLayoutType<{
+    text: string;
+    image?: string;
+    name?: string;
+    position?: string;
+}>;
+export declare function Quote(props: QuoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Quote/Quote.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Typography } from '@snack-uikit/typography';
+import { ArticleTypography } from '../ArticleTypography';
+import { QuotesSVG } from './QuotesSVG';
+import styles from './styles.module.css';
+export function Quote(props) {
+    const { text, image, name, position, layoutType } = props;
+    const typographyProps = useMemo(() => {
+        if (layoutType === 'mobile') {
+            return {
+                family: 'sans',
+                purpose: 'body',
+                size: 'm',
+            };
+        }
+        return {
+            family: 'sans',
+            purpose: 'body',
+            size: 'l',
+        };
+    }, [layoutType]);
+    return (_jsxs("div", { className: styles.quote, "data-layout-type": layoutType, "data-test-id": 'quote', children: [_jsx("div", { className: styles.iconWrapper, "data-layout-type": layoutType, children: _jsx(QuotesSVG, { className: styles.icon }) }), _jsxs("div", { className: styles.wrapper, children: [_jsx(ArticleTypography, { className: styles.text, layoutType: layoutType, tag: 'p', type: 'body', children: text }), _jsxs("div", { className: styles.author, "data-layout-type": layoutType, children: [image && _jsx("img", { className: styles.authorImage, src: image, alt: '\u0424\u043E\u0442\u043E \u0430\u0432\u0442\u043E\u0440\u0430 \u0446\u0438\u0442\u0430\u0442\u044B' }), _jsxs("div", { className: styles.authorNameWrapper, children: [name && (_jsx(ArticleTypography, { className: styles.authorName, layoutType: layoutType, tag: 'span', type: 'bodyBold', children: name })), position && (_jsx(Typography, Object.assign({}, typographyProps, { className: styles.authorPosition, children: position })))] })] })] })] }));
+}

package/dist/esm/components/Quote/QuotesSVG.d.ts

@@ -0,0 +1,3 @@
+export declare function QuotesSVG({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Quote/QuotesSVG.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function QuotesSVG({ className }) {
+    return (_jsx("svg", { width: '72', height: '64', viewBox: '0 0 72 64', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: className, children: _jsx("g", { id: 'Quotes', children: _jsxs("g", { id: 'Vector', children: [_jsx("path", { id: 'Vector 1', d: 'M0 51.7263L14.5187 12.2738H35.8522L27.5559 51.7263H0Z', fill: '#DDE0EA' }), _jsx("path", { id: 'Vector 2', d: 'M36.1484 51.7263L50.6671 12.2738H72.0007L63.7043 51.7263H36.1484Z', fill: '#DDE0EA' })] }) }) }));
+}

package/dist/esm/components/Quote/index.d.ts

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

package/dist/esm/components/Quote/index.js

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

package/dist/esm/components/Quote/styles.module.css

@@ -0,0 +1,51 @@
+.quote{
+  box-sizing:border-box;
+  display:flex;
+  gap:32px;
+}
+.quote[data-layout-type=mobile]{
+  gap:16px;
+}
+
+.iconWrapper[data-layout-type=mobile]{
+  width:48px;
+}
+
+.icon{
+  width:inherit;
+  height:inherit;
+}
+
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  padding:16px 0;
+  gap:16px;
+}
+
+.text{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.author{
+  display:flex;
+  gap:12px;
+}
+.author[data-layout-type=mobile]{
+  flex-direction:column;
+}
+.author .authorImage{
+  border:var(--border-width-general-xs, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+  width:48px;
+  height:48px;
+}
+.author .authorNameWrapper{
+  display:flex;
+  flex-direction:column;
+}
+.author .authorNameWrapper .authorName{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.author .authorNameWrapper .authorPosition{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './Highlight';
+export * from './Quote';
+export * from './ImageArticle';
+export * from './ArticleLinks';
+export * from './Products';
+export * from './ArticleRichText';
+export * from './ArticleTypography';
+export * from './DropdownShare';
+export * from './FooterArticle';

package/dist/esm/components/index.js

@@ -0,0 +1,9 @@
+export * from './Highlight';
+export * from './Quote';
+export * from './ImageArticle';
+export * from './ArticleLinks';
+export * from './Products';
+export * from './ArticleRichText';
+export * from './ArticleTypography';
+export * from './DropdownShare';
+export * from './FooterArticle';

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-article",
   "title": "Site Article",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -44,5 +44,5 @@
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "ce69097516055b330a0b05da5e29ac5b66e56284"
 }