feat(components): add a Help icon shape

7 files changed, 45 insertions, 1 deletions

diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx
index fa8d2b5..0da568a 100644
--- a/src/components/atoms/images/icons/icon.stories.tsx
+++ b/src/components/atoms/images/icons/icon.stories.tsx
@@ -22,6 +22,7 @@ export default {
         'envelop',
         'feed',
         'hamburger',
+        'help',
         'home',
         'magnifying-glass',
         'minus',
@@ -145,6 +146,14 @@ Hamburger.args = {
 };
 
 /**
+ * Icon Stories - Help
+ */
+export const Help = Template.bind({});
+Help.args = {
+  shape: 'help',
+};
+
+/**
  * Icon Stories - Home
  */
 export const Home = Template.bind({});
diff --git a/src/components/atoms/images/icons/icon.test.tsx b/src/components/atoms/images/icons/icon.test.tsx
index d80edd7..103b34c 100644
--- a/src/components/atoms/images/icons/icon.test.tsx
+++ b/src/components/atoms/images/icons/icon.test.tsx
@@ -116,6 +116,14 @@ describe('Icon', () => {
     expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
   });
 
+  it('render an icon with help shape', () => {
+    const heading = 'quidem';
+
+    render(<Icon heading={heading} shape="help" role="img" />);
+
+    expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument();
+  });
+
   it('render an icon with home shape', () => {
     const heading = 'aut';
 
diff --git a/src/components/atoms/images/icons/icon.tsx b/src/components/atoms/images/icons/icon.tsx
index 23170d9..c694abf 100644
--- a/src/components/atoms/images/icons/icon.tsx
+++ b/src/components/atoms/images/icons/icon.tsx
@@ -8,7 +8,11 @@ import {
 } from './plus-minus-icon';
 import { type SVGIconShape, SVGPaths, type SVGPathsProps } from './svg-paths';
 
-export type IconShape = SVGIconShape | PlusMinusIconShape | 'hamburger';
+export type IconShape =
+  | SVGIconShape
+  | PlusMinusIconShape
+  | 'hamburger'
+  | 'help';
 
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/help-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/help-icon-paths.module.scss
new file mode 100644
index 0000000..477cd53
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/help-icon-paths.module.scss
@@ -0,0 +1,3 @@
+.icon {
+  fill: var(--color-primary);
+}
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/help-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/help-icon-paths.tsx
new file mode 100644
index 0000000..dae2190
--- /dev/null
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/help-icon-paths.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/jsx-no-literals */
+import type { FC } from 'react';
+import styles from './help-icon-paths.module.scss';
+
+/**
+ * HelpIconPaths
+ *
+ * Render the svg paths to make a help icon.
+ */
+export const HelpIconPaths: FC = () => (
+  <path
+    className={styles.icon}
+    d="m 41.278921,63.659973 v -1.212748 c 0.02378,-4.161387 0.39236,-7.478607 1.10574,-9.95166 0.737161,-2.473052 1.795342,-4.458628 3.174544,-5.956727 1.402982,-1.521879 3.103206,-2.912972 5.100671,-4.173277 2.187701,-1.402982 4.030601,-2.924861 5.5287,-4.565636 1.4981,-1.664555 2.24715,-3.662021 2.24715,-5.992398 0,-2.473052 -0.856057,-4.446739 -2.568171,-5.92106 -1.688333,-1.498099 -3.733358,-2.247148 -6.135073,-2.247148 -2.330377,0 -4.42296,0.760939 -6.277749,2.282817 -1.831011,1.521879 -2.805964,3.733359 -2.924861,6.63444 H 25.976907 c 0.118897,-4.755871 1.260306,-8.691354 3.424228,-11.806449 2.163921,-3.115095 5.029333,-5.433582 8.596236,-6.955461 3.566903,-1.521879 7.502387,-2.282818 11.80645,-2.282818 4.732091,0 8.917257,0.784719 12.555499,2.354156 3.638241,1.545658 6.491764,3.792807 8.560568,6.741447 2.068803,2.948639 3.103205,6.503653 3.103205,10.66504 0,4.185166 -1.010623,7.668841 -3.031868,10.451026 -1.997466,2.782185 -4.660754,5.16012 -7.989863,7.133807 -2.805963,1.688333 -4.862877,3.507454 -6.170741,5.457363 -1.307865,1.949907 -1.985577,4.660753 -2.033136,8.132538 v 1.212748 z m 7.026799,24.828179 c -2.354156,0 -4.375401,-0.832277 -6.063734,-2.496832 -1.688335,-1.664556 -2.520612,-3.685801 -2.496833,-6.063735 -0.02378,-2.330378 0.808498,-4.327844 2.496833,-5.992397 1.688333,-1.664556 3.709578,-2.496834 6.063734,-2.496834 2.282819,0 4.268395,0.832278 5.956729,2.496834 1.712114,1.664553 2.580061,3.662019 2.60384,5.992397 -0.02378,2.377934 -0.891727,4.399179 -2.60384,6.063735 -1.688334,1.664555 -3.67391,2.496832 -5.956729,2.496832 z"
+  />
+);
diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
index 43927ae..ed82fc1 100644
--- a/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
+++ b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts
@@ -6,6 +6,7 @@ export * from './computer-icon-paths';
 export * from './cross-icon-paths';
 export * from './envelop-icon-paths';
 export * from './feed-icon-paths';
+export * from './help-icon-paths';
 export * from './home-icon-paths';
 export * from './magnifying-glass-icon-paths';
 export * from './moon-icon-paths';
diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
index 0f5be6e..88de5ef 100644
--- a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
+++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx
@@ -14,6 +14,7 @@ import {
   PostsStackIconPaths,
   SunIconPaths,
   CrossIconPaths,
+  HelpIconPaths,
 } from './icons-paths';
 
 export type SVGIconOrientation = ArrowOrientation;
@@ -27,6 +28,7 @@ export type SVGIconShape =
   | 'cross'
   | 'envelop'
   | 'feed'
+  | 'help'
   | 'home'
   | 'magnifying-glass'
   | 'moon'
@@ -67,6 +69,8 @@ export const SVGPaths: FC<SVGPathsProps> = ({
       return <EnvelopIconPaths />;
     case 'feed':
       return <FeedIconPaths />;
+    case 'help':
+      return <HelpIconPaths />;
     case 'home':
       return <HomeIconPaths />;
     case 'magnifying-glass':