feat(plasma-temple): product - export by platforms

packages/plasma-temple/src/components/Product/ProductDetails/ExpandableProductDetails/ExpandableProductDetails.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../../../DeviceComponent/DeviceComponent';
 
 import { ExpandableProductDetailsCommon, ExpandableProductDetailsProps } from './ExpandableProductDetails@common';
 import { ExpandableProductDetailsMobile } from './ExpandableProductDetails@mobile';
 
-const mapDeviceToExpandableProductDetails: Record<DeviceKind, React.FC<ExpandableProductDetailsProps>> = {
-    sberBox: ExpandableProductDetailsCommon,
-    sberPortal: ExpandableProductDetailsCommon,
-    mobile: ExpandableProductDetailsMobile,
-};
-
 /**
  * Компонент для отображения деталей (характеристик) товара
  * с возможность по умолчанию скрывать часть характеристик
- * Актуален для устройств с пультом и SberPortal
  */
-export const ExpandableProductDetails = mapDeviceToExpandableProductDetails[detectDevice()];
+export const ExpandableProductDetails: React.FC<ExpandableProductDetailsProps> = (props) => (
+    <DeviceComponent
+        sberbox={ExpandableProductDetailsCommon}
+        sberportal={ExpandableProductDetailsCommon}
+        mobile={ExpandableProductDetailsMobile}
+        props={props}
+    />
+);

packages/plasma-temple/src/components/Product/ProductInfo/ProductInfo.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { detectDevice, DeviceKind } from '@sberdevices/plasma-ui/utils';
+
+import { DeviceComponent } from '../../DeviceComponent/DeviceComponent';
 
 import { ProductInfoCommon, ProductInfoProps } from './ProductInfo@common';
 import { ProductInfoMobile } from './ProductInfo@mobile';
 
-const mapDeviceToProductInfo: Record<DeviceKind, React.FC<ProductInfoProps>> = {
-    sberBox: ProductInfoCommon,
-    sberPortal: ProductInfoCommon,
-    mobile: ProductInfoMobile,
-};
-
 /**
  * Компонент для отображения информации (описания) о товаре
- * Актуален для устройств с пультом и SberPortal
  */
-export const ProductInfo = mapDeviceToProductInfo[detectDevice()];
+export const ProductInfo: React.FC<ProductInfoProps> = (props) => (
+    <DeviceComponent
+        sberbox={ProductInfoCommon}
+        sberportal={ProductInfoCommon}
+        mobile={ProductInfoMobile}
+        props={props}
+    />
+);

packages/plasma-temple/src/components/Product/ProductPrice/ProductPrice.tsx

@@ -1,17 +1,55 @@
 import React from 'react';
-import { detectDevice } from '@sberdevices/plasma-ui/utils';
+import styled, { css } from 'styled-components';
+import { Col, mediaQuery, Price, Row } from '@sberdevices/plasma-ui';
+import { accent, headline2, headline3, primary } from '@sberdevices/plasma-tokens';
 
-import { DeviceFamily } from '../../../types';
-
-import { ProductPriceSberBox } from './ProductPrice@sberbox';
-import { ProductPriceSberPortal } from './ProductPrice@sberportal';
 import { ProductPriceProps } from './types';
 
-const mapDeviceToProductPrice: Record<DeviceFamily, React.FC<ProductPriceProps>> = {
-    sberBox: ProductPriceSberBox,
-    sberPortal: ProductPriceSberPortal,
-    mobile: ProductPriceSberPortal,
-};
+const StyledPrice = styled(Price)<{ old?: boolean }>`
+    ${headline2}
+
+    ${mediaQuery(
+        'M',
+        2,
+    )(css`
+        ${headline3}
+    `)}
+
+    ${mediaQuery(
+        'S',
+        1,
+    )(css`
+        ${headline3}
+    `)}
+
+    color: ${accent};
+    ${({ old }) =>
+        old &&
+        css`
+            color: ${primary};
+            opacity: 0.28;
+            text-decoration: line-through;
+        `}
+`;
 
 /** Компонент для отображения цены на странице товара */
-export const ProductPrice = mapDeviceToProductPrice[detectDevice()];
+export const ProductPrice: React.FC<ProductPriceProps> = ({ price, oldPrice, className, ...rest }) => {
+    if (!price) {
+        return null;
+    }
+
+    return (
+        <Row className={className}>
+            <Col>
+                <StyledPrice {...rest}>{price}</StyledPrice>
+            </Col>
+            {oldPrice && (
+                <Col>
+                    <StyledPrice {...rest} old>
+                        {oldPrice}
+                    </StyledPrice>
+                </Col>
+            )}
+        </Row>
+    );
+};

packages/plasma-temple/src/components/Product/index.ts

@@ -11,3 +11,4 @@ export * from './ProductImageSlider/ProductImageSlider';
 export * from './ProductInfo/ProductInfo';
 export * from './ProductRecommendations/ProductRecommendations';
 export * from './ProductVariationSwitcher/ProductVariationSwitcher';
+export * from './types';

packages/plasma-temple/src/components/Product/index@mobile.ts

@@ -0,0 +1,11 @@
+export { ProductMobile as Product } from './Product@mobile';
+export { ProductActionButton } from './ProductActionButton/ProductActionButton';
+export { ProductDetails } from './ProductDetails/ProductDetails';
+export { ExpandableProductDetailsMobile as ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@mobile';
+export { ProductImage } from './ProductImage/ProductImage';
+export { ProductImageSlider } from './ProductImageSlider/ProductImageSlider';
+export { ProductInfoMobile as ProductInfo } from './ProductInfo/ProductInfo@mobile';
+export { ProductPrice } from './ProductPrice/ProductPrice';
+export { ProductTitle } from './ProductTitle/ProductTitle';
+export { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
+export { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';

packages/plasma-temple/src/components/Product/index@sberbox.ts

@@ -0,0 +1,10 @@
+export { ProductCommon as Product } from './Product@common';
+export { ProductActionButton } from './ProductActionButton/ProductActionButton';
+export { ProductDetails } from './ProductDetails/ProductDetails';
+export { ExpandableProductDetailsCommon as ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@common';
+export { ProductImage } from './ProductImage/ProductImage';
+export { ProductInfoCommon as ProductInfo } from './ProductInfo/ProductInfo@common';
+export { ProductPrice } from './ProductPrice/ProductPrice';
+export { ProductTitle } from './ProductTitle/ProductTitle';
+export { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
+export { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';

packages/plasma-temple/src/components/Product/index@sberportal.ts

@@ -0,0 +1,10 @@
+export { ProductCommon as Product } from './Product@common';
+export { ProductActionButton } from './ProductActionButton/ProductActionButton';
+export { ProductDetails } from './ProductDetails/ProductDetails';
+export { ExpandableProductDetailsCommon as ExpandableProductDetails } from './ProductDetails/ExpandableProductDetails/ExpandableProductDetails@common';
+export { ProductImage } from './ProductImage/ProductImage';
+export { ProductInfoCommon as ProductInfo } from './ProductInfo/ProductInfo@common';
+export { ProductPrice } from './ProductPrice/ProductPrice';
+export { ProductTitle } from './ProductTitle/ProductTitle';
+export { ProductRecommendations } from './ProductRecommendations/ProductRecommendations';
+export { ProductVariationSwitcher } from './ProductVariationSwitcher/ProductVariationSwitcher';

packages/plasma-temple/src/components/index@mobile.ts

@@ -1 +1,2 @@
 export { StateLayoutMobile as StateLayout } from './StateLayout/StateLayout@mobile';
+export * from './Product/index@mobile';

packages/plasma-temple/src/components/index@sberbox.ts

@@ -1 +1,2 @@
 export { StateLayoutSberBox as StateLayout } from './StateLayout/StateLayout@sberbox';
+export * from './Product/index@sberbox';

packages/plasma-temple/src/components/index@sberportal.ts

@@ -1 +1,2 @@
 export { StateLayoutSberPortal as StateLayout } from './StateLayout/StateLayout@sberportal';
+export * from './Product/index@sberportal';