Merge pull request #2624 from epam/feature/adding-rating-to-uui

[Rating]: added to uui package

app/src/docs/Rating.doc.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import * as uui from '@epam/uui';
 import * as loveship from '@epam/loveship';
 import * as promo from '@epam/promo';
+import * as electric from '@epam/electric';
 import { DocBuilder, TDocConfig, TDocContext, TSkin } from '@epam/uui-docs';
 import { BaseDocsBlock, DocExample, EditableDocContent } from '../common';
-import * as uui from '@epam/uui';
 
 export class RatingDoc extends BaseDocsBlock {
     title = 'Rating';
@@ -12,17 +13,20 @@ export class RatingDoc extends BaseDocsBlock {
         name: 'Rating',
         contexts: [TDocContext.Default, TDocContext.Form],
         bySkin: {
-            [TSkin.Loveship]: { type: '@epam/loveship:RatingProps', component: loveship.Rating },
-            [TSkin.Promo]: { type: '@epam/promo:RatingProps', component: promo.Rating },
+            [TSkin.UUI]: { type: '@epam/uui:RatingProps', component: uui.Rating },
+            [TSkin.Loveship]: { type: '@epam/uui:RatingProps', component: loveship.Rating },
+            [TSkin.Promo]: { type: '@epam/uui:RatingProps', component: promo.Rating },
+            [TSkin.Electric]: { type: '@epam/uui:RatingProps', component: electric.Rating },
         },
-        doc: (doc: DocBuilder<promo.RatingProps | loveship.RatingProps>) => {
+        doc: (doc: DocBuilder<uui.RatingProps>) => {
             doc.merge('Tooltip', { examples: [{ value: uui.Tooltip, name: 'Tooltip' }] });
             doc.merge('value', {
                 editorType: 'MultiUnknownEditor',
                 examples: [
                     0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5,
                 ],
             });
+            doc.merge('hint', { examples: [{ value: (rating) => `${rating} star(s)`, name: '(rating) => string' }] });
         },
     };
 

app/src/docs/_examples/linkButton/Default.example.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IDropdownToggler } from '@epam/uui-core';
-import { Dropdown, DropdownMenuBody, DropdownMenuButton, LinkButton, Panel, Text } from '@epam/uui';
+import { Dropdown, DropdownMenuBody, DropdownMenuButton, FlexCell, FlexRow, LinkButton, Panel, Text } from '@epam/uui';
 import { ReactComponent as navigationBack } from '@epam/assets/icons/common/navigation-back-18.svg';
 import css from './DefaultExample.module.scss';
 
@@ -10,15 +10,24 @@ export default function DefaultLinkButtonExample() {
     return (
         <div className={ css.wrapper }>
             <Panel background="surface-main" cx={ css.components }>
-                <LinkButton caption="VIEW DETAILS" link={ { pathname: '/' } } />
-                <LinkButton caption="BACK TO CATALOG" link={ { pathname: '/' } } icon={ navigationBack } />
-                <Dropdown renderBody={ renderDropdownBody } renderTarget={ (props: IDropdownToggler) => <LinkButton caption="SORT BY" { ...props } /> } />
-            </Panel>
-
-            <Panel background="surface-main" cx={ css.descriptions }>
-                <Text>Simple action. Can also be used for redirection</Text>
-                <Text>Different icons support the meaning of an action. Can be used for a redirection or action</Text>
-                <Text>Chevron-down icon on the right makes a link button a toggler for Dropdowns</Text>
+                <FlexRow columnGap="12">
+                    <FlexCell cx={ css.link } width={ 160 }>
+                        <LinkButton caption="VIEW DETAILS" link={ { pathname: '/' } } />
+                    </FlexCell>
+                    <Text>Simple action. Can also be used for redirection</Text>
+                </FlexRow>
+                <FlexRow columnGap="12">
+                    <FlexCell cx={ css.link } width={ 160 }>
+                        <LinkButton caption="BACK TO CATALOG" link={ { pathname: '/' } } icon={ navigationBack } />
+                    </FlexCell>
+                    <Text>Different icons support the meaning of an action. Can be used for a redirection or action</Text>
+                </FlexRow>
+                <FlexRow columnGap="12">
+                    <FlexCell cx={ css.link } width={ 160 }>
+                        <Dropdown renderBody={ renderDropdownBody } renderTarget={ (props: IDropdownToggler) => <LinkButton caption="SORT BY" { ...props } /> } />
+                    </FlexCell>
+                    <Text>Chevron-down icon on the right makes a link button a toggler for Dropdowns</Text>
+                </FlexRow>
             </Panel>
         </div>
     );

app/src/docs/_examples/linkButton/DefaultExample.module.scss

@@ -1,20 +1,16 @@
 .wrapper {
     background-color: var(--uui-surface-main);
-    display: flex;
     flex: 1 1 100%;
-    padding: 12px;
 }
 
 .components {
-    row-gap: 12px;
-    align-items: flex-end;
-    margin-right: 12px;
+    row-gap: 6px;
     min-width: 120px;
     overflow: unset;
 }
 
-.descriptions {
-    row-gap: 12px;
-    align-items: flex-start;
-    max-width: 533px;
+.link {
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
 }

app/src/docs/_examples/rating/Basic.example.tsx

@@ -1,16 +1,18 @@
 import React, { useState } from 'react';
-import { FlexCell } from '@epam/uui';
-import { Rating } from '@epam/promo';
+import { FlexCell, Rating } from '@epam/uui';
+import { ReactComponent as FavoriteIcon } from '@epam/assets/icons/communication-favorite-fill.svg';
 import css from './BasicExample.module.scss';
 
 export default function BasicExample() {
     const [value, onValueChange] = useState(0);
+    const [value1, onValueChange1] = useState(0);
 
     return (
         <FlexCell width="auto" cx={ css.container }>
             <Rating value={ value } onValueChange={ onValueChange } />
             <Rating isDisabled value={ value } onValueChange={ onValueChange } />
             <Rating isReadonly value={ value } onValueChange={ onValueChange } />
+            <Rating cx={ css.redFillColor } step={ 0.5 } icon={ FavoriteIcon } value={ value1 } onValueChange={ onValueChange1 } />
         </FlexCell>
     );
 }

app/src/docs/_examples/rating/BasicExample.module.scss

@@ -8,3 +8,7 @@
         margin-bottom: 12px;
     }
 }
+
+.redFillColor {
+    --uui-rating-icon-filled: var(--uui-critical-50);
+}

changelog.md

@@ -11,6 +11,7 @@
 * [Data Sources]: cursor-based pagination support. More details [here](http://uui.epam.com/documents?id=dataSources-lazy-dataSource&mode=doc&category=dataSources&theme=loveship#using_cursor-based_pagination)
 * [TimelineScale]: added bottom/top month text customisation.
 * [TimelineScale]: customisation of today line height was added.
+* [Rating]: added to `@epam/uui`, removed independent components from 'skins', now reexport from `@epam/uui` is used, removed redundant(`filledStarIcon`, `emptyStarIcon`, `renderRating`, `from`, `to`) props for all packages, changed colors for empty & disabled stars for 'Promo' & 'Loveship' skins according [design](https://www.figma.com/design/M5Njgc6SQJ3TPUccp5XHQx/UUI-Components?node-id=18045-299767), added `icon` prop to have possibility to change default icon
 
 **What's Fixed**
 * [VirtualList]: fixed estimatedHeight calculations in components with pagination

epam-electric/components/index.ts

@@ -11,5 +11,5 @@ export {
     WarningNotification, SuccessNotification, HintNotification, ErrorNotification, ClearNotification, Checkbox, FlexSpacer, FlexCell, DataTableHeaderCell,
     Spinner, PickerModal, ModalBlocker, ModalHeader, ModalFooter, DropdownMenuBody, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuHeader,
     DropdownSubMenu, DropdownMenuSwitchButton, TimePicker, FileCard, SvgCircleProgress, DropSpot, DropMarker, IndeterminateBar, IndicatorBar, ProgressBar,
-    DataRowsContainer, ColumnHeaderDropdown, RichTextView, CountIndicator, SearchInput, IconContainer, Slider, Snackbar,
+    DataRowsContainer, ColumnHeaderDropdown, RichTextView, CountIndicator, SearchInput, IconContainer, Slider, Snackbar, Rating,
 } from '@epam/uui';

epam-promo/components/index.ts

@@ -13,6 +13,6 @@ export {
     Spinner, DataPickerBody, PickerModal, ModalBlocker, ModalHeader, ModalFooter, DropdownMenuBody, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuHeader,
     DropdownSubMenu, DropdownMenuSwitchButton, TimePicker, FileCard, SvgCircleProgress, DropSpot, DropMarker, IndeterminateBar, IndicatorBar, ProgressBar, RichTextView,
     Slider, ScrollBars, VirtualList, TextInput, SearchInput, LabeledInput, Snackbar, ErrorHandler, getRecoveryMessageConfig, getErrorPageConfig, ErrorPage,
-    HintAlert, SuccessAlert, WarningAlert, ErrorAlert, IconContainer, DropdownContainer,
+    HintAlert, SuccessAlert, WarningAlert, ErrorAlert, IconContainer, DropdownContainer, Rating,
 } from '@epam/uui';
 export { MainMenuLogo, MainMenuCustomElement } from '@epam/uui-components';

epam-promo/components/inputs/index.tsx

@@ -1,2 +1 @@
 export * from './MultiSwitch';
-export * from './Rating';

loveship/components/index.ts

@@ -13,6 +13,6 @@ export { FiltersPanel, PresetsPanel, defaultPredicates, Calendar, NumericInput,
     ModalBlocker, ModalHeader, ModalFooter, LabeledInput, DropdownMenuBody, DropdownMenuButton, DropdownMenuSplitter, DropdownMenuHeader,
     DropdownSubMenu, DropdownMenuSwitchButton, TimePicker, FileCard, SvgCircleProgress, DropSpot, DropMarker, IndeterminateBar, ProgressBar, IndicatorBar, Slider,
     RichTextView, ScrollBars, VirtualList, Checkbox, TabButton, VerticalTabButton, RadioInput, TextInput, SearchInput, Snackbar, ErrorHandler, getRecoveryMessageConfig,
-    getErrorPageConfig, ErrorPage, HintAlert, SuccessAlert, WarningAlert, ErrorAlert, IconContainer, DropdownContainer,
+    getErrorPageConfig, ErrorPage, HintAlert, SuccessAlert, WarningAlert, ErrorAlert, IconContainer, DropdownContainer, Rating,
 } from '@epam/uui';
 export { MainMenuLogo, MainMenuCustomElement } from '@epam/uui-components';