From 53677c794aafd55fc649cf7663f47cbeaeddc5d0 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 31 Mar 2022 22:53:16 +0200
Subject: chore: add an Arrow icon component

---
 src/components/atoms/icons/arrow.module.scss | 16 +++++
 src/components/atoms/icons/arrow.stories.tsx | 29 +++++++++
 src/components/atoms/icons/arrow.test.tsx    |  9 +++
 src/components/atoms/icons/arrow.tsx         | 97 ++++++++++++++++++++++++++++
 4 files changed, 151 insertions(+)
 create mode 100644 src/components/atoms/icons/arrow.module.scss
 create mode 100644 src/components/atoms/icons/arrow.stories.tsx
 create mode 100644 src/components/atoms/icons/arrow.test.tsx
 create mode 100644 src/components/atoms/icons/arrow.tsx

(limited to 'src')

diff --git a/src/components/atoms/icons/arrow.module.scss b/src/components/atoms/icons/arrow.module.scss
new file mode 100644
index 0000000..76e6aea
--- /dev/null
+++ b/src/components/atoms/icons/arrow.module.scss
@@ -0,0 +1,16 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  fill: var(--color-primary);
+  transition: all 0.25s ease-in-out 0s;
+
+  &--left,
+  &--right {
+    width: var(--icon-size, #{fun.convert-px(30)});
+  }
+
+  &--bottom,
+  &--top {
+    height: var(--icon-size, #{fun.convert-px(30)});
+  }
+}
diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx
new file mode 100644
index 0000000..52b5126
--- /dev/null
+++ b/src/components/atoms/icons/arrow.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ArrowIcon from './arrow';
+
+export default {
+  title: 'Atoms/Icons',
+  component: ArrowIcon,
+  argTypes: {
+    direction: {
+      control: {
+        type: 'select',
+      },
+      description: 'An arrow icon.',
+      options: ['bottom', 'left', 'right', 'top'],
+      table: {
+        defaultValue: { summary: 'right' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof ArrowIcon>;
+
+const Template: ComponentStory<typeof ArrowIcon> = (args) => (
+  <ArrowIcon {...args} />
+);
+
+export const Arrow = Template.bind({});
diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx
new file mode 100644
index 0000000..01813ce
--- /dev/null
+++ b/src/components/atoms/icons/arrow.test.tsx
@@ -0,0 +1,9 @@
+import { render } from '@test-utils';
+import Arrow from './arrow';
+
+describe('Arrow', () => {
+  it('renders an arrow icon', () => {
+    const { container } = render(<Arrow />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx
new file mode 100644
index 0000000..f50d117
--- /dev/null
+++ b/src/components/atoms/icons/arrow.tsx
@@ -0,0 +1,97 @@
+import { FC } from 'react';
+import styles from './arrow.module.scss';
+
+type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
+
+type ArrowProps = {
+  /**
+   * The arrow direction. Default: right.
+   */
+  direction?: ArrowDirection;
+};
+
+/**
+ * Arrow component
+ *
+ * Render a svg arrow icon.
+ */
+const Arrow: FC<ArrowProps> = ({ direction = 'right' }) => {
+  const directionClass = styles[`icon--${direction}`];
+  const classes = `${styles.icon} ${directionClass}`;
+
+  if (direction === 'top') {
+    return (
+      <svg
+        className={classes}
+        viewBox="0 0 23.476 64.644995"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="arrow-head"
+          d="M 23.476001,24.637 11.715001,0 0,24.800001 Z"
+        />
+        <path
+          className="arrow-bar"
+          d="m 15.441001,64.644997 -0.018,-40.007999 H 8.035 l 0.142,40.007999 z"
+        />
+      </svg>
+    );
+  }
+
+  if (direction === 'bottom') {
+    return (
+      <svg
+        className={classes}
+        viewBox="0 0 23.476 64.644995"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="arrow-head"
+          d="m 23.476001,40.007997 -11.761,24.637 L 0,39.844996 Z"
+        />
+        <path
+          className="arrow-bar"
+          d="m 15.441001,0 -0.018,40.007999 H 8.035 L 8.177,0 Z"
+        />
+      </svg>
+    );
+  }
+
+  if (direction === 'left') {
+    return (
+      <svg
+        className={classes}
+        viewBox="0 0 64.644997 23.476001"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="arrow-head"
+          d="M 24.637,23.476 0,11.715 24.8,-8.3923343e-8 Z"
+        />
+        <path
+          className="arrow-bar"
+          d="m 64.644997,15.441 -40.008,-0.018 V 8.0349999 l 40.008,0.142 z"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 64.644997 23.476001"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="arrow-head"
+        d="M 40.007997,23.476 64.644997,11.715 39.844997,-8.3923343e-8 Z"
+      />
+      <path
+        className="arrow-bar"
+        d="M 0,15.441 40.008,15.423 V 8.0349999 L 0,8.1769999 Z"
+      />
+    </svg>
+  );
+};
+
+export default Arrow;
-- 
cgit v1.2.3