Add question icons

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.4",
+  "version": "1.4.5",
   "engines": {
     "node": "^18",
     "npm": "^8"

src/icons/Check.tsx

@@ -0,0 +1,19 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+const Check = (props: any) =>
+  createElement(
+    SvgIcon,
+    props,
+    <circle cx={12} cy={12} r={12} fill="currentColor" fillOpacity={0.5} />,
+    <path
+      d="m17.833 6.167-7.291 11.666-4.375-5.25"
+      stroke="#fff"
+      fill="none"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+
+export default Check;

src/icons/DateQuestion.tsx

@@ -0,0 +1,31 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useTheme } from '@mui/material/styles';
+
+const DateQuestion = (props: any) => {
+  const theme = useTheme();
+
+  return createElement(
+    SvgIcon,
+    props,
+    <rect width={24} height={24} rx={3} fill={theme.palette.coral['300']} />,
+    <path
+      clipRule="evenodd"
+      d="M4.502 8a1.5 1.5 0 0 1 1.5-1.5h12a1.5 1.5 0 0 1 1.5 1.5v10a1.5 1.5 0 0 1-1.5 1.5h-12a1.5 1.5 0 0 1-1.5-1.5V8Z"
+      stroke={theme.palette.primary.contrastText}
+      fill={theme.palette.coral['300']}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />,
+    <path
+      d="M4.502 10.5h15M8.502 8V4.5M15.502 8V4.5"
+      stroke={theme.palette.primary.contrastText}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+};
+
+export default DateQuestion;

src/icons/EmailQuestion.tsx

@@ -0,0 +1,31 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useTheme } from '@mui/material/styles';
+
+const EmailQuestion = (props: any) => {
+  const theme = useTheme();
+
+  return createElement(
+    SvgIcon,
+    props,
+    <rect width={24} height={24} rx={3} fill={theme.palette.sunset['300']} />,
+    <path
+      clipRule="evenodd"
+      d="M4 8.5A1.5 1.5 0 0 1 5.5 7h13A1.5 1.5 0 0 1 20 8.5v7.667a1.5 1.5 0 0 1-1.5 1.5h-13a1.5 1.5 0 0 1-1.5-1.5V8.5Z"
+      stroke={theme.palette.primary.contrastText}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />,
+    <path
+      d="m14.621 10.893 2.712 2.506M9.38 10.893l-2.712 2.506M19.738 7.365l-6.765 4.665a1.71 1.71 0 0 1-1.945 0L4.264 7.365"
+      stroke={theme.palette.primary.contrastText}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+};
+
+export default EmailQuestion;

src/icons/SelectManyQuestion.tsx

@@ -0,0 +1,30 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useTheme } from '@mui/material/styles';
+
+const SelectManyQuestion = (props: any) => {
+  const theme = useTheme();
+
+  return createElement(
+    SvgIcon,
+    props,
+    <rect width={24} height={24} rx={3} fill={theme.palette.balticSea['100']} />,
+    <path
+      d="m16.167 7.833-5.208 8.333-3.125-3.75"
+      stroke={theme.palette.primary.contrastText}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />,
+    <path
+      stroke={theme.palette.primary.contrastText}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 4.5v15h-15v-15z"
+    />
+  );
+};
+
+export default SelectManyQuestion;

src/icons/SelectOneQuestion.tsx

@@ -0,0 +1,31 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useTheme } from '@mui/material/styles';
+
+const SelectOneQuestion = (props: any) => {
+  const theme = useTheme();
+
+  return createElement(
+    SvgIcon,
+    props,
+    <rect width={24} height={24} rx={3} fill={theme.palette.sky['400']} />,
+    <g clipPath="url(#select-one_svg__a)">
+      <circle cx={11.999} cy={12} r={5.833} fill={theme.palette.sky['400']} />
+      <path
+        d="M12 8.666A3.335 3.335 0 1 0 15.334 12a3.335 3.335 0 0 0-3.332-3.333Zm0-3.333A6.67 6.67 0 0 0 5.335 12a6.67 6.67 0 0 0 6.667 6.666A6.669 6.669 0 0 0 18.667 12a6.669 6.669 0 0 0-6.666-6.667Zm0 12A5.332 5.332 0 0 1 6.668 12a5.332 5.332 0 0 1 5.334-5.334A5.332 5.332 0 0 1 17.334 12a5.332 5.332 0 0 1-5.333 5.333Z"
+        fill={theme.palette.primary.contrastText}
+      />
+    </g>,
+    <defs>
+      <clipPath id="select-one_svg__a">
+        <path
+          fill={theme.palette.primary.contrastText}
+          transform="translate(2 2)"
+          d="M0 0h20v20H0z"
+        />
+      </clipPath>
+    </defs>
+  );
+};
+
+export default SelectOneQuestion;

src/icons/TextQuestion.tsx

@@ -0,0 +1,23 @@
+import { createElement } from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+import { useTheme } from '@mui/material/styles';
+
+const TextQuestion = (props: any) => {
+  const theme = useTheme();
+
+  return createElement(
+    SvgIcon,
+    props,
+    <rect width={24} height={24} rx={3} fill={theme.palette.primary.main} />,
+    <path
+      clipRule="evenodd"
+      d="M4.5 11.998a1.5 1.5 0 0 1 1.5-1.5h12a1.5 1.5 0 0 1 1.5 1.5v0a1.5 1.5 0 0 1-1.5 1.5H6a1.5 1.5 0 0 1-1.5-1.5v0Z"
+      stroke={theme.palette.primary.contrastText}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+};
+
+export default TextQuestion;

src/icons/index.ts

@@ -116,3 +116,9 @@ export { default as HeavyPlus } from './HeavyPlus';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
 export { default as Rectangle } from './Rectangle';
+export { default as TextQuestion } from './TextQuestion';
+export { default as SelectOneQuestion } from './SelectOneQuestion';
+export { default as SelectManyQuestion } from './SelectManyQuestion';
+export { default as DateQuestion } from './DateQuestion';
+export { default as EmailQuestion } from './EmailQuestion';
+export { default as Check } from './Check';

stories/DataDisplay/Icons.stories.tsx

@@ -178,6 +178,12 @@ const iconsList = [
   { name: 'HeavyPlus', component: i.HeavyPlus },
   { name: 'Folder', component: i.Folder },
   { name: 'Person', component: i.Person },
+  { name: 'TextQuestion', component: i.TextQuestion },
+  { name: 'SelectOneQuestion', component: i.SelectOneQuestion },
+  { name: 'SelectManyQuestion', component: i.SelectManyQuestion },
+  { name: 'DateQuestion', component: i.DateQuestion },
+  { name: 'EmailQuestion', component: i.EmailQuestion },
+  { name: 'Check', component: i.Check },
 ];
 
 const Template: Story<SvgIconProps> = (args) => {