From 9b31e81c8d45eaf0dc6971655dc08b0d0a1cbe56 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 1 Apr 2022 11:46:31 +0200
Subject: chore: add an envelop svg icon component

---
 src/components/atoms/icons/envelop.module.scss | 28 ++++++++++++
 src/components/atoms/icons/envelop.stories.tsx | 13 ++++++
 src/components/atoms/icons/envelop.test.tsx    |  9 ++++
 src/components/atoms/icons/envelop.tsx         | 60 ++++++++++++++++++++++++++
 4 files changed, 110 insertions(+)
 create mode 100644 src/components/atoms/icons/envelop.module.scss
 create mode 100644 src/components/atoms/icons/envelop.stories.tsx
 create mode 100644 src/components/atoms/icons/envelop.test.tsx
 create mode 100644 src/components/atoms/icons/envelop.tsx

(limited to 'src')

diff --git a/src/components/atoms/icons/envelop.module.scss b/src/components/atoms/icons/envelop.module.scss
new file mode 100644
index 0000000..202900b
--- /dev/null
+++ b/src/components/atoms/icons/envelop.module.scss
@@ -0,0 +1,28 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.envelop {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.lines {
+  fill: var(--color-fg);
+}
+
+.background {
+  fill: var(--color-shadow-dark);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
+
+.paper {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-darker);
+  stroke-width: 4;
+}
diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx
new file mode 100644
index 0000000..9577431
--- /dev/null
+++ b/src/components/atoms/icons/envelop.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import EnvelopIcon from './envelop';
+
+export default {
+  title: 'Atoms/Icons',
+  component: EnvelopIcon,
+} as ComponentMeta<typeof EnvelopIcon>;
+
+const Template: ComponentStory<typeof EnvelopIcon> = (args) => (
+  <EnvelopIcon {...args} />
+);
+
+export const Envelop = Template.bind({});
diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx
new file mode 100644
index 0000000..072dc85
--- /dev/null
+++ b/src/components/atoms/icons/envelop.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import Envelop from './envelop';
+
+describe('Envelop', () => {
+  it('renders an envelop icon', () => {
+    const { container } = render(<Envelop />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx
new file mode 100644
index 0000000..a846a45
--- /dev/null
+++ b/src/components/atoms/icons/envelop.tsx
@@ -0,0 +1,60 @@
+import { FC } from 'react';
+import styles from './envelop.module.scss';
+
+/**
+ * Envelop Component
+ *
+ * Render an envelop svg icon.
+ */
+const Envelop: FC = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.background}
+        d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z"
+      />
+      <path
+        className={styles.envelop}
+        d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z"
+      />
+      <path
+        className={styles.paper}
+        d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z"
+      />
+      <path
+        className={styles.envelop}
+        d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z"
+      />
+      <path
+        className={styles.lines}
+        d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z"
+      />
+      <path
+        className={styles.envelop}
+        d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z"
+      />
+      <path
+        className={styles.envelop}
+        d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z"
+      />
+    </svg>
+  );
+};
+
+export default Envelop;
-- 
cgit v1.2.3