Merge pull request #2642 from epam/2616-multiswitch-add-example-or-property-with-icon-+-caption-and-icon-only

[MultiSwitch]: new examples

Author: AlekseyManetov

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

@@ -1,9 +1,19 @@
 import React, { useState } from 'react';
 import { FlexCell, MultiSwitch, Text } from '@epam/uui';
+
+import { ReactComponent as TableIcon } from '@epam/assets/icons/content-view_table-outline.svg';
+import { ReactComponent as GridIcon } from '@epam/assets/icons/content-view_grid-fill.svg';
+import { ReactComponent as DetailsIcon } from '@epam/assets/icons/content-view_detailes-fill.svg';
+import { ReactComponent as StarIcon } from '@epam/assets/icons/communication-star-fill.svg';
+import { ReactComponent as ClockIcon } from '@epam/assets/icons/action-schedule-outline.svg';
+import { ReactComponent as ChatIcon } from '@epam/assets/icons/communication-chat-outline.svg';
+
 import css from './BasicExample.module.scss';
 
 export default function BasicExample() {
     const [value, onValueChange] = useState(null);
+    const [view, setView] = useState(null);
+    const [filter, setFilter] = useState(null);
 
     return (
         <FlexCell width="auto" cx={ css.container }>
@@ -40,6 +50,22 @@ export default function BasicExample() {
                 onValueChange={ onValueChange }
                 isDisabled
             />
+            <Text>Icon only</Text>
+            <MultiSwitch
+                items={ [
+                    { id: 1, icon: TableIcon }, { id: 2, icon: GridIcon }, { id: 3, icon: DetailsIcon },
+                ] }
+                value={ view }
+                onValueChange={ setView }
+            />
+            <Text>Icon + Label</Text>
+            <MultiSwitch
+                items={ [
+                    { id: 1, icon: StarIcon, caption: 'Starred' }, { id: 2, icon: ClockIcon, caption: 'Latest' }, { id: 3, icon: ChatIcon, caption: 'All chats' },
+                ] }
+                value={ filter }
+                onValueChange={ setFilter }
+            />
         </FlexCell>
     );
 }