From 769c124ff54960ac9db4f9028b095c1385cd3961 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 1 Apr 2022 11:43:38 +0200
Subject: chore: add a computer screen icon component

---
 .../atoms/icons/computer-screen.module.scss        | 39 ++++++++++++
 .../atoms/icons/computer-screen.stories.tsx        | 13 ++++
 .../atoms/icons/computer-screen.test.tsx           |  9 +++
 src/components/atoms/icons/computer-screen.tsx     | 72 ++++++++++++++++++++++
 4 files changed, 133 insertions(+)
 create mode 100644 src/components/atoms/icons/computer-screen.module.scss
 create mode 100644 src/components/atoms/icons/computer-screen.stories.tsx
 create mode 100644 src/components/atoms/icons/computer-screen.test.tsx
 create mode 100644 src/components/atoms/icons/computer-screen.tsx

(limited to 'src')

diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/icons/computer-screen.module.scss
new file mode 100644
index 0000000..6c8f701
--- /dev/null
+++ b/src/components/atoms/icons/computer-screen.module.scss
@@ -0,0 +1,39 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.root,
+.separator,
+.cursor,
+.line,
+.text {
+  fill: var(--color-fg);
+}
+
+.stand {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-dark);
+
+  &--top {
+    stroke-width: 3;
+  }
+
+  &--bottom {
+    stroke-width: 2;
+  }
+}
+
+.screen {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-dark);
+  stroke-width: 3;
+}
+
+.contour {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-dark);
+  stroke-width: 3;
+}
diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx
new file mode 100644
index 0000000..317b4b6
--- /dev/null
+++ b/src/components/atoms/icons/computer-screen.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ComputerScreenIcon from './computer-screen';
+
+export default {
+  title: 'Atoms/Icons',
+  component: ComputerScreenIcon,
+} as ComponentMeta<typeof ComputerScreenIcon>;
+
+const Template: ComponentStory<typeof ComputerScreenIcon> = (args) => (
+  <ComputerScreenIcon {...args} />
+);
+
+export const ComputerScreen = Template.bind({});
diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx
new file mode 100644
index 0000000..c0e53e0
--- /dev/null
+++ b/src/components/atoms/icons/computer-screen.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import ComputerScreen from './computer-screen';
+
+describe('ComputerScreen', () => {
+  it('renders a computer screen icon', () => {
+    const { container } = render(<ComputerScreen />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx
new file mode 100644
index 0000000..c9c869d
--- /dev/null
+++ b/src/components/atoms/icons/computer-screen.tsx
@@ -0,0 +1,72 @@
+import { FC } from 'react';
+import styles from './computer-screen.module.scss';
+
+/**
+ * ComputerScreen component
+ *
+ * Render a computer screen svg icon.
+ */
+const ComputerScreen: FC = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
+        className={styles.contour}
+      />
+      <path
+        d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z"
+        className={styles.screen}
+      />
+      <path
+        d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z"
+        className={`${styles.stand} ${styles['stand--top']}`}
+      />
+      <path
+        d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z"
+        className={`${styles.stand} ${styles['stand--bottom']}`}
+      />
+      <path
+        d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z"
+        className={styles.line}
+      />
+      <path
+        d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z"
+        className={styles.line}
+      />
+      <path
+        d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z"
+        className={styles.line}
+      />
+      <path
+        d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z"
+        className={styles.cursor}
+      />
+      <path
+        d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
+        className={styles.text}
+      />
+      <path
+        d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
+        className={styles.text}
+      />
+      <path
+        d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
+        className={styles.text}
+      />
+      <path
+        d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z"
+        className={styles.separator}
+      />
+      <path
+        d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
+        className={styles.root}
+      />
+    </svg>
+  );
+};
+
+export default ComputerScreen;
-- 
cgit v1.2.3