Merge pull request #397 from lyytioy/next

Version 1.4.6

package.json

@@ -2,7 +2,7 @@
   "name": "@lyyti/design-system",
   "description": "Lyyti Design System",
   "homepage": "https://lyytioy.github.io/lyyti-design-system",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "engines": {
     "node": "^18",
     "npm": "^8"

src/icons/Magnifier.tsx → src/icons/AddressPin.tsx

@@ -1,12 +1,12 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const Magnifier = (props: any) =>
+const AddressPin = (props: any) =>
   createElement(
     SvgIcon,
     props,
     <path d="M.75 23.999a.743.743 0 01-.53-.22c-.142-.141-.22-.33-.22-.53s.078-.389.22-.53L11.979 10.96A6.738 6.738 0 0110.5 6.749c0-3.722 3.028-6.75 6.75-6.75S24 3.027 24 6.749s-3.028 6.75-6.75 6.75a6.734 6.734 0 01-4.21-1.479L1.28 23.779a.743.743 0 01-.53.22zm16.5-22.5c-2.895 0-5.25 2.355-5.25 5.25s2.355 5.25 5.25 5.25 5.25-2.355 5.25-5.25-2.355-5.25-5.25-5.25z" />,
     <path d="M14.25 8.25a.75.75 0 01-.75-.75c0-1.202.468-2.332 1.317-3.182a4.468 4.468 0 013.182-1.319c.207 0 .375.168.375.375l.001.75A.376.376 0 0118 4.5a2.98 2.98 0 00-2.122.879A2.98 2.98 0 0015 7.5a.75.75 0 01-.75.75z" />
   );
 
-export default Magnifier;
+export default AddressPin;

src/icons/ParticipantsAdded.tsx → src/icons/ParticipantAdded.tsx

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const ParticipantsAdded = (props: any) =>
+const ParticipantAdded = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -23,4 +23,4 @@ const ParticipantsAdded = (props: any) =>
     />
   );
 
-export default ParticipantsAdded;
+export default ParticipantAdded;

src/icons/ParticipantsAddedOutlined.tsx → src/icons/ParticipantAddedOutlined.tsx

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
-const ParticipantsAddedOutlined = (props: any) =>
+
+const ParticipantAddedOutlined = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -20,4 +21,4 @@ const ParticipantsAddedOutlined = (props: any) =>
       d="M16.5 13.1v6.8M19.9 16.5h-6.8"
     />
   );
-export default ParticipantsAddedOutlined;
+export default ParticipantAddedOutlined;

src/icons/ParticipantsShow.tsx → src/icons/ParticipantAttending.tsx

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const ParticipantsShow = (props: any) =>
+const ParticipantAttending = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -20,4 +20,4 @@ const ParticipantsShow = (props: any) =>
     />
   );
 
-export default ParticipantsShow;
+export default ParticipantAttending;

src/icons/ParticipantsShowOutlined.tsx → src/icons/ParticipantAttendingOutlined.tsx

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
-const ParticipantsShowOutlined = (props: any) =>
+
+const ParticipantAttendingOutlined = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -19,4 +20,4 @@ const ParticipantsShowOutlined = (props: any) =>
       strokeWidth={1.3}
     />
   );
-export default ParticipantsShowOutlined;
+export default ParticipantAttendingOutlined;

src/icons/ParticipantsDeclined.tsx → src/icons/ParticipantDeclined.tsx

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const ParticipantsDeclined = (props: any) =>
+const ParticipantDeclined = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -24,4 +24,4 @@ const ParticipantsDeclined = (props: any) =>
     />
   );
 
-export default ParticipantsDeclined;
+export default ParticipantDeclined;

src/icons/ParticipantsDeclinedOutlined.tsx → src/icons/ParticipantDeclinedOutlined.tsx

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
-const ParticipantsDeclinedOutlined = (props: any) =>
+
+const ParticipantDeclinedOutlined = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -21,4 +22,4 @@ const ParticipantsDeclinedOutlined = (props: any) =>
       strokeLinejoin="round"
     />
   );
-export default ParticipantsDeclinedOutlined;
+export default ParticipantDeclinedOutlined;

src/icons/ParticipantsNoShow.tsx → src/icons/ParticipantNoShow.tsx

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const ParticipantsNoShow = (props: any) =>
+const ParticipantNoShow = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -27,4 +27,4 @@ const ParticipantsNoShow = (props: any) =>
     />
   );
 
-export default ParticipantsNoShow;
+export default ParticipantNoShow;

src/icons/ParticipantsNoShowOutlined.tsx → src/icons/ParticipantNoShowOutlined.tsx

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
-const ParticipantsNoShowOutlined = (props: any) =>
+
+const ParticipantNoShowOutlined = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -27,4 +28,4 @@ const ParticipantsNoShowOutlined = (props: any) =>
       strokeLinejoin="round"
     />
   );
-export default ParticipantsNoShowOutlined;
+export default ParticipantNoShowOutlined;

src/icons/ParticipantsRegistered.tsx → src/icons/ParticipantRegistered.tsx

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
 
-const ParticipantsRegistered = (props: any) =>
+const ParticipantRegistered = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -25,4 +25,4 @@ const ParticipantsRegistered = (props: any) =>
     />
   );
 
-export default ParticipantsRegistered;
+export default ParticipantRegistered;

src/icons/ParticipantsRegisteredOutlined.tsx → src/icons/ParticipantRegisteredOutlined.tsx

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import SvgIcon from '@mui/material/SvgIcon';
-const ParticipantsRegisteredOutlined = (props: any) =>
+
+const ParticipantRegisteredOutlined = (props: any) =>
   createElement(
     SvgIcon,
     props,
@@ -13,4 +14,4 @@ const ParticipantsRegisteredOutlined = (props: any) =>
       strokeLinejoin="round"
     />
   );
-export default ParticipantsRegisteredOutlined;
+export default ParticipantRegisteredOutlined;

src/icons/Pause.tsx

@@ -0,0 +1,12 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+const Pause = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path
+      d="M10.12 16a.968.968 0 0 0 .713-.288.964.964 0 0 0 .287-.712V8.975a.926.926 0 0 0-.288-.7A.991.991 0 0 0 10.12 8a.968.968 0 0 0-.713.288A.964.964 0 0 0 9.12 9v6.025c0 .283.096.517.288.7.192.183.43.275.712.275Zm4 0a.968.968 0 0 0 .713-.288.964.964 0 0 0 .287-.712V8.975a.926.926 0 0 0-.288-.7A.991.991 0 0 0 14.12 8a.968.968 0 0 0-.713.288.964.964 0 0 0-.287.712v6.025c0 .283.096.517.288.7.192.183.43.275.712.275Zm-2 6a9.733 9.733 0 0 1-3.9-.788 10.114 10.114 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.755 9.755 0 0 1 2.12 12c0-1.383.263-2.683.788-3.9a10.114 10.114 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.755 9.755 0 0 1 12.12 2c1.383 0 2.683.263 3.9.788a10.114 10.114 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.138 3.175a9.72 9.72 0 0 1 .787 3.9 9.733 9.733 0 0 1-.788 3.9 10.114 10.114 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.138a9.72 9.72 0 0 1-3.9.787Zm0-2c2.217 0 4.104-.779 5.663-2.337 1.559-1.558 2.338-3.446 2.337-5.663 0-2.217-.779-4.104-2.337-5.663C16.225 4.778 14.337 3.999 12.12 4c-2.217 0-4.104.779-5.663 2.337C4.898 7.895 4.119 9.783 4.12 12c0 2.217.779 4.104 2.337 5.663C8.015 19.222 9.903 20.001 12.12 20Z"
+      fill="currentColor"
+    />
+  );
+export default Pause;

src/icons/Play.tsx

@@ -0,0 +1,12 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+const Play = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <path
+      d="M9.62 9.325v5.35c0 .4.175.692.525.875a.952.952 0 0 0 1.025-.05l4.15-2.65c.317-.183.475-.467.475-.85 0-.383-.158-.667-.475-.85L11.17 8.5a.952.952 0 0 0-1.025-.05c-.35.183-.525.475-.525.875ZM12.12 22a9.733 9.733 0 0 1-3.9-.788 10.114 10.114 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.755 9.755 0 0 1 2.12 12c0-1.383.263-2.683.788-3.9a10.114 10.114 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.755 9.755 0 0 1 12.12 2c1.383 0 2.683.263 3.9.788a10.114 10.114 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.138 3.175a9.72 9.72 0 0 1 .787 3.9 9.733 9.733 0 0 1-.788 3.9 10.114 10.114 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.138a9.72 9.72 0 0 1-3.9.787Zm0-2c2.217 0 4.104-.779 5.663-2.337 1.559-1.558 2.338-3.446 2.337-5.663 0-2.217-.779-4.104-2.337-5.663C16.225 4.778 14.337 3.999 12.12 4c-2.217 0-4.104.779-5.663 2.337C4.898 7.895 4.119 9.783 4.12 12c0 2.217.779 4.104 2.337 5.663C8.015 19.222 9.903 20.001 12.12 20Z"
+      fill="currentColor"
+    />
+  );
+export default Play;

src/icons/index.ts

@@ -14,7 +14,7 @@ export { default as FaceId } from './FaceId';
 export { default as Hierarchy } from './Hierarchy';
 export { default as HierarchyTree } from './HierarchyTree';
 export { default as ShareHierarchy } from './ShareHierarchy';
-export { default as Magnifier } from './Magnifier';
+export { default as AddressPin } from './AddressPin';
 export { default as Pin } from './Pin';
 export { default as Share } from './Share';
 export { default as Layout } from './Layout';
@@ -68,16 +68,16 @@ export { default as AlertCircle } from './AlertCircle';
 export { default as Success } from './Success';
 export { default as Info } from './Info';
 export { default as Stop } from './Stop';
-export { default as ParticipantsAdded } from './ParticipantsAdded';
-export { default as ParticipantsRegistered } from './ParticipantsRegistered';
-export { default as ParticipantsShow } from './ParticipantsShow';
-export { default as ParticipantsDeclined } from './ParticipantsDeclined';
-export { default as ParticipantsNoShow } from './ParticipantsNoShow';
-export { default as ParticipantsAddedOutlined } from './ParticipantsAddedOutlined';
-export { default as ParticipantsRegisteredOutlined } from './ParticipantsRegisteredOutlined';
-export { default as ParticipantsShowOutlined } from './ParticipantsShowOutlined';
-export { default as ParticipantsDeclinedOutlined } from './ParticipantsDeclinedOutlined';
-export { default as ParticipantsNoShowOutlined } from './ParticipantsNoShowOutlined';
+export { default as ParticipantAdded } from './ParticipantAdded';
+export { default as ParticipantRegistered } from './ParticipantRegistered';
+export { default as ParticipantAttending } from './ParticipantAttending';
+export { default as ParticipantDeclined } from './ParticipantDeclined';
+export { default as ParticipantNoShow } from './ParticipantNoShow';
+export { default as ParticipantAddedOutlined } from './ParticipantAddedOutlined';
+export { default as ParticipantRegisteredOutlined } from './ParticipantRegisteredOutlined';
+export { default as ParticipantAttendingOutlined } from './ParticipantAttendingOutlined';
+export { default as ParticipantDeclinedOutlined } from './ParticipantDeclinedOutlined';
+export { default as ParticipantNoShowOutlined } from './ParticipantNoShowOutlined';
 export { default as ParticipantEmail } from './ParticipantEmail';
 export { default as Person } from './Person';
 export { default as Bill } from './Bill';
@@ -122,3 +122,5 @@ export { default as SelectManyQuestion } from './SelectManyQuestion';
 export { default as DateQuestion } from './DateQuestion';
 export { default as EmailQuestion } from './EmailQuestion';
 export { default as Check } from './Check';
+export { default as Play } from './Play';
+export { default as Pause } from './Pause';

stories/DataDisplay/Icons.stories.tsx

@@ -78,7 +78,7 @@ const iconsList = [
   { name: 'Hierarchy', component: i.Hierarchy },
   { name: 'HierarchyTree', component: i.HierarchyTree },
   { name: 'ShareHierarchy', component: i.ShareHierarchy },
-  { name: 'Magnifier', component: i.Magnifier },
+  { name: 'AddressPin', component: i.AddressPin },
   { name: 'Pin', component: i.Pin },
   { name: 'Share', component: i.Share },
   { name: 'Layout', component: i.Layout },
@@ -132,16 +132,16 @@ const iconsList = [
   { name: 'Success', component: i.Success },
   { name: 'Info', component: i.Info },
   { name: 'Stop', component: i.Stop },
-  { name: 'ParticipantsAdded', component: i.ParticipantsAdded },
-  { name: 'ParticipantsRegistered', component: i.ParticipantsRegistered },
-  { name: 'ParticipantsShow', component: i.ParticipantsShow },
-  { name: 'ParticipantsDeclined', component: i.ParticipantsDeclined },
-  { name: 'ParticipantsNoShow', component: i.ParticipantsNoShow },
-  { name: 'ParticipantsAddedOutlined', component: i.ParticipantsAddedOutlined },
-  { name: 'ParticipantsRegisteredOutlined', component: i.ParticipantsRegisteredOutlined },
-  { name: 'ParticipantsShowOutlined', component: i.ParticipantsShowOutlined },
-  { name: 'ParticipantsDeclinedOutlined', component: i.ParticipantsDeclinedOutlined },
-  { name: 'ParticipantsNoShowOutlined', component: i.ParticipantsNoShowOutlined },
+  { name: 'ParticipantAdded', component: i.ParticipantAdded },
+  { name: 'ParticipantRegistered', component: i.ParticipantRegistered },
+  { name: 'ParticipantAttending', component: i.ParticipantAttending },
+  { name: 'ParticipantDeclined', component: i.ParticipantDeclined },
+  { name: 'ParticipantNoShow', component: i.ParticipantNoShow },
+  { name: 'ParticipantAddedOutlined', component: i.ParticipantAddedOutlined },
+  { name: 'ParticipantRegisteredOutlined', component: i.ParticipantRegisteredOutlined },
+  { name: 'ParticipantAttendingOutlined', component: i.ParticipantAttendingOutlined },
+  { name: 'ParticipantDeclinedOutlined', component: i.ParticipantDeclinedOutlined },
+  { name: 'ParticipantNoShowOutlined', component: i.ParticipantNoShowOutlined },
   { name: 'ParticipantEmail', component: i.ParticipantEmail },
   { name: 'Bill', component: i.Bill },
   { name: 'BrowserPage', component: i.BrowserPage },
@@ -184,6 +184,8 @@ const iconsList = [
   { name: 'DateQuestion', component: i.DateQuestion },
   { name: 'EmailQuestion', component: i.EmailQuestion },
   { name: 'Check', component: i.Check },
+  { name: 'Play', component: i.Play },
+  { name: 'Pause', component: i.Pause },
 ];
 
 const Template: Story<SvgIconProps> = (args) => {