Merge pull request #104 from Giveth/add_warning_icon

fix: add warning icon

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.30",
+	"version": "1.11.31",
 	"files": [
 		"/lib"
 	],

src/components/icons/Warning/Warning.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+import { IconWarning16 } from './Warning16';
+import { IconWarning24 } from './Warning24';
+import { IconWarning32 } from './Warning32';
+
+export const IconWarning: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => {
+	switch (size.toString()) {
+		case '16':
+			return <IconWarning16 color={color} />;
+		case '24':
+			return <IconWarning24 color={color} />;
+		case '32':
+			return <IconWarning32 color={color} />;
+		default:
+			return <IconWarning24 size={size} color={color} />;
+	}
+};

src/components/icons/Warning/Warning16.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconWarning16: FC<IIconProps> = ({
+	size = 16,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 16 16'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M5.00001 3.74984V5.41651M5.00001 7.08317H5.00418M4.28751 1.60817L0.758342 7.49984C0.685579 7.62585 0.647078 7.76872 0.646671 7.91422C0.646263 8.05973 0.683963 8.20281 0.75602 8.32923C0.828076 8.45564 0.931978 8.56099 1.05739 8.63478C1.1828 8.70857 1.32534 8.74824 1.47084 8.74984H8.52918C8.67468 8.74824 8.81722 8.70857 8.94263 8.63478C9.06804 8.56099 9.17194 8.45564 9.244 8.32923C9.31605 8.20281 9.35375 8.05973 9.35335 7.91422C9.35294 7.76872 9.31444 7.62585 9.24168 7.49984L5.71251 1.60817C5.63823 1.48572 5.53364 1.38447 5.40884 1.31421C5.28404 1.24394 5.14323 1.20703 5.00001 1.20703C4.85679 1.20703 4.71598 1.24394 4.59118 1.31421C4.46637 1.38447 4.36179 1.48572 4.28751 1.60817Z'
+			stroke={color}
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Warning/Warning24.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconWarning24: FC<IIconProps> = ({
+	size = 24,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M5.00001 3.74984V5.41651M5.00001 7.08317H5.00418M4.28751 1.60817L0.758342 7.49984C0.685579 7.62585 0.647078 7.76872 0.646671 7.91422C0.646263 8.05973 0.683963 8.20281 0.75602 8.32923C0.828076 8.45564 0.931978 8.56099 1.05739 8.63478C1.1828 8.70857 1.32534 8.74824 1.47084 8.74984H8.52918C8.67468 8.74824 8.81722 8.70857 8.94263 8.63478C9.06804 8.56099 9.17194 8.45564 9.244 8.32923C9.31605 8.20281 9.35375 8.05973 9.35335 7.91422C9.35294 7.76872 9.31444 7.62585 9.24168 7.49984L5.71251 1.60817C5.63823 1.48572 5.53364 1.38447 5.40884 1.31421C5.28404 1.24394 5.14323 1.20703 5.00001 1.20703C4.85679 1.20703 4.71598 1.24394 4.59118 1.31421C4.46637 1.38447 4.36179 1.48572 4.28751 1.60817Z'
+			stroke={color}
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/Warning/Warning32.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { IIconProps } from '../type';
+
+export const IconWarning32: FC<IIconProps> = ({
+	size = 32,
+	color = 'currentColor',
+}) => (
+	<svg
+		width={size}
+		height={size}
+		viewBox='0 0 32 32'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+	>
+		<path
+			d='M5.00001 3.74984V5.41651M5.00001 7.08317H5.00418M4.28751 1.60817L0.758342 7.49984C0.685579 7.62585 0.647078 7.76872 0.646671 7.91422C0.646263 8.05973 0.683963 8.20281 0.75602 8.32923C0.828076 8.45564 0.931978 8.56099 1.05739 8.63478C1.1828 8.70857 1.32534 8.74824 1.47084 8.74984H8.52918C8.67468 8.74824 8.81722 8.70857 8.94263 8.63478C9.06804 8.56099 9.17194 8.45564 9.244 8.32923C9.31605 8.20281 9.35375 8.05973 9.35335 7.91422C9.35294 7.76872 9.31444 7.62585 9.24168 7.49984L5.71251 1.60817C5.63823 1.48572 5.53364 1.38447 5.40884 1.31421C5.28404 1.24394 5.14323 1.20703 5.00001 1.20703C4.85679 1.20703 4.71598 1.24394 4.59118 1.31421C4.46637 1.38447 4.36179 1.48572 4.28751 1.60817Z'
+			stroke={color}
+			stroke-linecap='round'
+			stroke-linejoin='round'
+		/>
+	</svg>
+);

src/components/icons/index.tsx

@@ -489,3 +489,7 @@ export * from './Estimated/Estimated';
 export * from './Estimated/Estimated16';
 export * from './Estimated/Estimated24';
 export * from './Estimated/Estimated32';
+export * from './Warning/Warning';
+export * from './Warning/Warning16';
+export * from './Warning/Warning24';
+export * from './Warning/Warning32';

src/stories/icons/Warning/Warning.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { IconWarning } from '../../../components/icons/Warning/Warning';
+
+export default {
+	title: 'Example/Icons/Warning/Warning',
+	component: IconWarning,
+} as ComponentMeta<typeof IconWarning>;
+
+const Template: ComponentStory<typeof IconWarning> = args => (
+	<IconWarning {...args} />
+);
+
+export const Warning = Template.bind({});
+Warning.args = {
+	color: 'white',
+	size: 24,
+};

src/stories/icons/Warning/Warning16.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { IconWarning16 } from '../../../components/icons/Warning/Warning16';
+
+export default {
+	title: 'Example/Icons/Warning/Warning16',
+	component: IconWarning16,
+} as ComponentMeta<typeof IconWarning16>;
+
+const Template: ComponentStory<typeof IconWarning16> = args => (
+	<IconWarning16 {...args} />
+);
+
+export const Warning16 = Template.bind({});
+Warning16.args = {
+	color: 'white',
+	size: 16,
+};

src/stories/icons/Warning/Warning24.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { IconWarning24 } from '../../../components/icons/Warning/Warning24';
+
+export default {
+	title: 'Example/Icons/Warning/Warning24',
+	component: IconWarning24,
+} as ComponentMeta<typeof IconWarning24>;
+
+const Template: ComponentStory<typeof IconWarning24> = args => (
+	<IconWarning24 {...args} />
+);
+
+export const Warning24 = Template.bind({});
+Warning24.args = {
+	color: 'white',
+	size: 24,
+};

src/stories/icons/Warning/Warning32.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { IconWarning32 } from '../../../components/icons/Warning/Warning32';
+
+export default {
+	title: 'Example/Icons/Warning/Warning32',
+	component: IconWarning32,
+} as ComponentMeta<typeof IconWarning32>;
+
+const Template: ComponentStory<typeof IconWarning32> = args => (
+	<IconWarning32 {...args} />
+);
+
+export const Warning32 = Template.bind({});
+Warning32.args = {
+	color: 'white',
+	size: 32,
+};