[Rating]: added example with other icon & color

[LinkButton]: fixed layout of basic example
epam · Nov 14, 2024 · 8d9d8cb · 8d9d8cb
1 parent 4f07469
commit 8d9d8cb
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 23 deletions.
diff --git a/app/src/docs/_examples/linkButton/Default.example.tsx b/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>
     );

diff --git a/app/src/docs/_examples/linkButton/DefaultExample.module.scss b/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;
 }
diff --git a/app/src/docs/_examples/rating/Basic.example.tsx b/app/src/docs/_examples/rating/Basic.example.tsx
@@ -1,15 +1,18 @@
 import React, { useState } from 'react';
 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>
     );
 }
diff --git a/app/src/docs/_examples/rating/BasicExample.module.scss b/app/src/docs/_examples/rating/BasicExample.module.scss
@@ -8,3 +8,7 @@
         margin-bottom: 12px;
     }
 }
+
+.redFillColor {
+    --uui-rating-icon-filled: var(--uui-critical-50);
+}
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
@@ -91868,6 +91868,24 @@
       },
       "from": "@epam/uui:RatingMods",
       "required": false
+     },
+     {
+      "uid": "icon",
+      "name": "icon",
+      "comment": {
+       "raw": [
+        "Rating icon can be changed according to your needs.",
+        "  Icon can be a React element (usually an SVG element)."
+       ]
+      },
+      "typeValue": {
+       "raw": "Icon"
+      },
+      "editor": {
+       "type": "component"
+      },
+      "from": "@epam/uui:RatingMods",
+      "required": false
      }
     ],
     "propsFromUnion": false

diff --git a/uui/components/inputs/Rating.tsx b/uui/components/inputs/Rating.tsx
@@ -1,4 +1,4 @@
-import { Overwrite, withMods } from '@epam/uui-core';
+import { Icon, Overwrite, withMods } from '@epam/uui-core';
 import * as uuiComponents from '@epam/uui-components';
 import { Tooltip } from '../overlays';
 import { settings } from '../../settings';
@@ -8,6 +8,11 @@ import { ReactComponent as FilledStarIcon } from '../../icons/star-filled.svg';
 import css from './Rating.module.scss';
 
 interface RatingMods {
+    /**
+     *  Rating icon can be changed according to your needs.
+     *  Icon can be a React element (usually an SVG element).
+     */
+    icon?: Icon;
     /**
      * Defines component size.
      * @default '18'
@@ -32,9 +37,9 @@ function applyRatingMods(mods: RatingProps) {
 export const Rating = withMods<uuiComponents.RatingProps, RatingProps>(
     uuiComponents.Rating,
     applyRatingMods,
-    () => ({
-        filledStarIcon: FilledStarIcon,
-        emptyStarIcon: FilledStarIcon,
+    (props) => ({
+        filledStarIcon: props.icon || FilledStarIcon,
+        emptyStarIcon: props.icon || FilledStarIcon,
         Tooltip,
     }),
 );
diff --git a/uui/components/inputs/__tests__/Rating.test.tsx b/uui/components/inputs/__tests__/Rating.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Rating } from '../Rating';
 import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { ReactComponent as FavoriteIcon } from '@epam/assets/icons/communication-favorite-fill.svg';
 
 describe('Rating', () => {
     it('should be rendered correctly', async () => {
@@ -14,4 +15,10 @@ describe('Rating', () => {
 
         expect(tree).toMatchSnapshot();
     });
+
+    it('should be rendered with other icon', async () => {
+        const tree = await renderSnapshotWithContextAsync(<Rating icon={ FavoriteIcon } value={ null } onValueChange={ jest.fn } size={ 24 } step={ 1 } />);
+
+        expect(tree).toMatchSnapshot();
+    });
 });
diff --git a/uui/components/inputs/__tests__/__snapshots__/Rating.test.tsx.snap b/uui/components/inputs/__tests__/__snapshots__/Rating.test.tsx.snap
@@ -307,3 +307,157 @@ exports[`Rating should be rendered correctly with more props 1`] = `
   </div>
 </div>
 `;
+
+exports[`Rating should be rendered with other icon 1`] = `
+<div
+  aria-valuemax={5}
+  aria-valuemin={1}
+  aria-valuenow={0}
+  className="container root uui-size-24"
+  onKeyDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseMove={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  role="slider"
+  tabIndex={0}
+>
+  <div
+    className="container"
+  >
+    <div
+      className="uui-rating-empty-star-container"
+    >
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      className="uui-rating-filled-star-container"
+      style={
+        Object {
+          "width": 0,
+        }
+      }
+    >
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+      <div
+        className="uui-rating-star"
+      >
+        <div
+          className="container uui-icon uui-enabled"
+          style={Object {}}
+        >
+          <svg
+            className=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;