forkfacts · hhimanshu · Mar 16, 2023 · Feb 6, 2023 · Feb 6, 2023 · Feb 6, 2023
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -11,6 +11,7 @@ import "@fontsource/poppins/600.css";
 import "@fontsource/poppins/700.css";
 import { customTheme } from "../src/themes/theme";
 import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import "../src/styles/styles.css";
 
 const optionsCallback = (options) => ({ panelExclude: [...options.panelExclude, /Warning/] });
 addDecorator((storyFn, context) => withConsole(optionsCallback)(storyFn)(context));

diff --git a/README.md b/README.md
@@ -123,6 +123,17 @@ To use the Controls addon, you need to write your stories using args. Storybook
 
 By default, Storybook will choose a control for each arg based on the initial value of the arg. It works well with certain types of args, such as boolean values or free-text strings, but in other cases, you want a more restricted control. Read more at [storybook controls github tutorial](https://github.com/storybookjs/storybook/blob/next/docs/essentials/controls.md) and [storybook controls documentation](https://storybook.js.org/docs/react/essentials/controls).
 
+## Generating Icons
+
+To generate icons from SVG images downloaded from the project Figma design, use the following command:
+
+```
+npm run svgr
+
+```
+
+This will use the @svgr/cli package to generate TypeScript files for the SVG icons in the src/images/icons directory. The generated files will be placed in the src/DesignIcons directory. The --replace-attr-values '#000=currentColor' option replaces any #000 fill values with the currentColor value, which allows the icons to inherit the color of their parent element.
+
 ## Release
 
 We are using a version of [6 weeks cycle](https://3.basecamp-help.com/article/35-the-six-week-cycle). However, we may not

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "prepare": "husky install",
-    "svgr": "npx @svgr/cli --out-dir src/DesignIcons  --typescript --ignore-existing -- src/images/icons"
+    "svgr": "npx @svgr/cli --out-dir src/DesignIcons --typescript --ignore-existing --replace-attr-values '#000=currentColor' src/images/icons"
   },
   "dependencies": {
     "@algolia/autocomplete-core": "1.7.3",
@@ -54,9 +54,15 @@
     "gatsby-transformer-sharp": "^5.1.0",
     "install": "^0.13.0",
     "react": "^18.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
-    "react-share": "^4.4.1"
+    "react-multi-carousel": "^2.8.2",
+    "react-share": "^4.4.1",
+    "react-slick": "^0.29.0",
+    "recharts": "^2.4.1",
+    "slick-carousel": "^1.8.1",
+    "uninstall": "^0.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
@@ -75,6 +81,7 @@
     "@types/react": "^18.0.25",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.8",
+    "@types/react-slick": "^0.23.10",
     "babel-loader": "^8.3.0",
     "husky": "^8.0.0",
     "prettier": "2.8.0",

diff --git a/src/DesignIcons/Baby.tsx b/src/DesignIcons/Baby.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SvgBaby = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={30} height={30} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M22.907 16.178a1.498 1.498 0 0 0 1.119-1.444c0-.831-.678-1.504-1.505-1.504h-.167l-5.648-8.456c.36-.398.57-.925.57-1.5A2.277 2.277 0 0 0 15 1a2.277 2.277 0 0 0-2.276 2.275c0 .57.21 1.097.566 1.496L7.64 13.23h-.167c-.827 0-1.504.673-1.504 1.504 0 .694.476 1.273 1.118 1.444a2.792 2.792 0 0 0-1.864 2.62c0 1.353.999 2.493 2.297 2.725 0 .998.193 1.971.566 2.867a7.365 7.365 0 0 0 1.624 2.421A7.427 7.427 0 0 0 15 29.001c4.123 0 7.478-3.351 7.478-7.478v-.005c1.299-.227 2.298-1.37 2.298-2.72a2.79 2.79 0 0 0-1.869-2.62Zm-15.386 4.47a1.924 1.924 0 0 1-1.44-1.85c0-.888.613-1.642 1.44-1.857v3.707Zm14.1.875A6.628 6.628 0 0 1 15 28.144a6.577 6.577 0 0 1-4.684-1.937 6.562 6.562 0 0 1-1.938-4.684V17.91c.858.21 1.762.321 2.709.321 2.289 0 4.419-.655 5.829-1.77a4.737 4.737 0 0 0 4.705 1.659v3.403ZM7.474 15.38a.647.647 0 1 1 0-1.294h15.047a.647.647 0 1 1 0 1.294H7.474Zm15.004 5.267v-3.707a1.93 1.93 0 0 1 1.44 1.856c0 .883-.617 1.637-1.44 1.851Z"
+      fill={props.color}
+    />
+    <path
+      d="M15 22.938c-.783 0-1.419.718-1.419 1.602 0 .885.636 1.602 1.419 1.602.78 0 1.418-.717 1.418-1.602 0-.884-.638-1.602-1.418-1.602Zm-3.694-2.605a1.611 1.611 0 0 0-1.61 1.61.428.428 0 1 0 .857 0 .754.754 0 0 1 1.508 0 .428.428 0 1 0 .857 0 1.613 1.613 0 0 0-1.612-1.61Zm7.383 0a1.611 1.611 0 0 0-1.61 1.61.428.428 0 1 0 .858 0 .754.754 0 1 1 1.508 0 .429.429 0 0 0 .857 0 1.613 1.613 0 0 0-1.613-1.61Zm-6.2-1.48h-2.365a.429.429 0 0 0 0 .857h2.366a.429.429 0 0 0 0-.857Zm7.384 0h-2.365a.429.429 0 0 0 0 .857h2.365a.428.428 0 1 0 0-.857Z"
+      fill={props.color}
+    />
+  </svg>
+);
+export default SvgBaby;
diff --git a/src/DesignIcons/Kids.tsx b/src/DesignIcons/Kids.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SvgKids = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={30} height={30} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M11.126 8.584a2.334 2.334 0 1 1-4.668 0 2.334 2.334 0 0 1 4.668 0Z"
+      fill={props.color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.06 16.247a1.25 1.25 0 0 1-2.12-1.325l.002-.004.005-.007.015-.024a11.385 11.385 0 0 1 .245-.37c.159-.234.383-.552.638-.874.25-.316.556-.672.88-.96.161-.145.357-.299.577-.422.207-.116.532-.26.929-.26h3.123c.396 0 .72.144.929.26.22.123.415.277.577.422.324.288.63.644.879.96a15.427 15.427 0 0 1 .83 1.161l.053.083.015.024.005.007.002.003s-.022-.034 0 .001a1.25 1.25 0 0 1-2.12 1.325l-.001-.003-.01-.015-.042-.065a9.482 9.482 0 0 0-.053-.082v1.553l.452 4.747a1.25 1.25 0 0 1-2.482.295l-.638-4.463-.637 4.463a1.25 1.25 0 0 1-2.482-.295l.524-5.507h.012v-.793l-.054.082-.042.065-.01.015v.003Z"
+      fill={props.color}
+    />
+    <path
+      d="M23.625 8.583a2.333 2.333 0 1 1-4.667 0 2.333 2.333 0 0 1 4.667 0Z"
+      fill={props.color}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.563 16.116a1.25 1.25 0 0 1-2.126-1.315l.002-.004.005-.007.015-.023.053-.084a15.507 15.507 0 0 1 .82-1.161c.246-.315.55-.672.87-.96.16-.145.354-.3.573-.424.207-.117.532-.263.931-.263h3.088c.4 0 .724.146.93.263.22.124.414.279.574.423.32.29.624.646.87.96a15.526 15.526 0 0 1 .874 1.246l.015.023.006.011a1.25 1.25 0 0 1-2.126 1.315l-.002-.003-.01-.015a11.923 11.923 0 0 0-.29-.44c.292 1.457.869 3.454 1.17 4.465a.62.62 0 0 1-.46.787c-2.212.46-3.76.449-6.16-.008a.624.624 0 0 1-.475-.801c.315-1.015.903-2.99 1.18-4.48a16.88 16.88 0 0 0-.315.477l-.01.015-.002.003ZM18.5 21.97v.843a.937.937 0 0 0 1.843.244l.247-.915a22.669 22.669 0 0 1-2.09-.172Zm3.535.168.248.919a.937.937 0 0 0 1.842-.245v-.85c-.727.091-1.414.15-2.09.176Z"
+      fill={props.color}
+    />
+  </svg>
+);
+export default SvgKids;
diff --git a/src/DesignIcons/Lactation.tsx b/src/DesignIcons/Lactation.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SvgLactation = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={20} height={20} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 0C7.237 0 5 2.237 5 5s2.237 5 5 5c2.762 0 5-2.237 5-5s-2.238-5-5-5Zm2.5 5c0-1.375-1.125-2.5-2.5-2.5A2.507 2.507 0 0 0 7.5 5c0 1.375 1.125 2.5 2.5 2.5s2.5-1.125 2.5-2.5Zm5 11.25c-.25-.887-4.125-2.5-7.5-2.5s-7.25 1.613-7.5 2.512V17.5h15v-1.25Zm-17.5 0c0-3.325 6.662-5 10-5s10 1.675 10 5V20H0v-3.75Z"
+      fill={props.color}
+    />
+  </svg>
+);
+export default SvgLactation;
diff --git a/src/DesignIcons/Male.tsx b/src/DesignIcons/Male.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SvgMale = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={30} height={30} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.349 8.625c.114 1.295.402 2.727.59 3.535-.42-.369-2.18-2.126-2.09-.572.11 1.894 1.681 2.18 1.685 2.18l.263.056v.268c0 .006-.036 1.962 1.608 2.858.823.45 1.71.674 2.595.674.886 0 1.772-.225 2.595-.674 1.644-.896 1.608-2.852 1.608-2.858v-.268l.262-.055c.005-.001 1.577-.287 1.686-2.181.087-1.515-1.602.136-2.036.504.145-.756.392-2.058.51-3.276-.082-.282-.184-.51-.31-.628-.537-.494-2.242.691-3.078-.263-.836-.954-.937-1.119-1.974-.987-1.036.132-.034 1.316-1.572 1.086-1.475-.22-1.98-.03-2.307.537l-.035.064Zm-.645 1.732a2.77 2.77 0 0 1-.19-1.346c.133-1.283-.903-2.172.435-3.719 1.338-1.546.937-2.073 2.241-2.106 1.304-.033 2.441-.955 3.511-.296 1.07.658 1.807-.296 2.575 1.119.77 1.415 1.473.46 1.84 1.81.368 1.35.87 1.481.502 2.6-.213.65-.404 1.476-.527 2.056.752-.46 1.833-.802 1.72 1.149-.108 1.893-1.4 2.532-1.957 2.721-.051.636-.342 2.312-1.944 3.186-.091.05-.183.097-.276.142.773.187 1.817-.04 2.789.68 1.284.954 1.16 2.57 1.16 2.57s1.864-.248 2.775 1.574c.912 1.823.208 4.102.208 4.102-11.553.996-7.579.996-19.131 0 0 0-.705-2.279.206-4.102.912-1.822 2.777-1.574 2.777-1.574s-.124-1.616 1.16-2.57c.972-.72 2.015-.493 2.788-.68a6.697 6.697 0 0 1-.277-.142c-1.601-.874-1.892-2.55-1.943-3.186-.556-.189-1.85-.828-1.958-2.721-.102-1.78.789-1.652 1.516-1.267Zm7.231 7.604c-.048.746-.117 1.927-.117 2.382 0 .704.58.166 1.491.704 2.858 1.689-9.475 1.689-6.618 0 .911-.538 1.492 0 1.492-.704 0-.455-.07-1.636-.118-2.382a5.948 5.948 0 0 0 1.935.326c.652 0 1.303-.109 1.935-.326Z"
+      fill={props.color}
+    />
+  </svg>
+);
+export default SvgMale;
diff --git a/src/DesignIcons/PregnantWoman.tsx b/src/DesignIcons/PregnantWoman.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SvgPregnantWoman = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={30} height={30} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clipPath="url(#pregnant-woman_svg__a)" fill={props.color}>
+      <path d="M19 22.765a.008.008 0 0 0-.006-.006c-2.109-.55-4-1.513-5.757-2.926a.712.712 0 0 0-.42-.153c-1.115-.047-1.645-.456-1.895-.805a.008.008 0 0 0-.012 0c-1.608 1.352-2.635 3.209-2.759 5.08-.096 1.45.288 3.578 2.657 5.478.34.27.746.431 1.173.465 2.291.181 5.341.23 7.397-.794a2.115 2.115 0 0 0 .95-2.828A20.076 20.076 0 0 1 19 22.767Z" />
+      <path d="M21.476 16.652c-.9-3.563-.69-3.895-.762-4.376-.41-1.44-1.378-1.861-2.138-1.777a1.817 1.817 0 0 0-1.62 1.708c-.035.608.092 1.336.4 2.293.025.1 1.238 2.618 1.891 4.916.002.007-.006.013-.012.01-.526-.29-1.085-.35-1.671-.414-.918-.098-1.96-.21-3.223-1.221a.633.633 0 0 1-.23-.37c-.167-.963-1.17-1.566-2.114-1.006a2.25 2.25 0 0 0-.96 1.195c-.281.803.185 1.696 1.793 1.764.222.009.43.085.6.22 1.942 1.564 4.054 2.567 6.46 3.061.697.149 1.476-.17 1.836-.828.722-1.312.27-3.102-.25-5.175Z" />
+      <path d="M9.158 5.606c.022-.01.045-.025.068-.039.389.586.794 1.108 1.24 1.387a.008.008 0 0 1 .005.009 4.37 4.37 0 0 0-.053 1.36.393.393 0 0 0 .57.298c.132-.067.231-.107.324-.13a.03.03 0 0 1 .035.022.945.945 0 0 0 .12.27.34.34 0 0 0 .454.126l.179-.098-.047.194a.343.343 0 0 0 .093.325c.173.167.302.312.402.457a.69.69 0 0 0 .99.162c.29-.216.472-.462.726-.662.451-.35 1.022.33.766.94l-.001.002-2.83 3.778h-.001c-.482.78-.437 1.46-.164 2.036a.008.008 0 0 0 .01.004c1.033-.472 2.172.188 2.369 1.321.01.067.07.145.117.182 1.197.959 2.19 1.064 3.066 1.158.384.042.777.084 1.164.196a.008.008 0 0 0 .01-.01c-.659-2.064-1.666-4.174-1.708-4.307-.318-.99-.448-1.752-.412-2.398.06-1.041.855-1.88 1.892-1.995.833-.088 1.693.334 2.188 1.286-.307-.87-.752-1.774-1.335-2.705-.15-.24-.224-.527-1.113-1.464a.009.009 0 0 1-.001-.008c.53-1.453.3-3.075-.916-4.453a5.082 5.082 0 0 1-.607-.875C15.302-.61 11.617-.55 9.582 1.522a3.248 3.248 0 0 1-.537.415c-.997.655-1.459 2.332-.917 3.326a.797.797 0 0 0 1.03.343Zm.63-.158c.716.228 1.3-.511 1.463-.744.153-.22.59-.223.731.106.384.897 1.078 1.007 1.834.47a.445.445 0 0 1 .568.035c.714.725.96 1.498.747 2.361a1.02 1.02 0 0 0 .12.78c.223.355.583.465 1.005.465.835 0 1.514-.564 1.885-1.298a.008.008 0 0 1 .013-.002c.382.41.713.816.922 1.2-1.038.93-2.321 1.588-3.707 1.357.21-.849-.63-1.645-1.293-1.133-.264.209-.479.483-.732.666a.387.387 0 0 1-.54-.092 3.307 3.307 0 0 0-.44-.504l-.012-.041.124-.527c.034-.126-.104-.233-.222-.17l-.479.262a.036.036 0 0 1-.047-.015.65.65 0 0 1-.086-.193.332.332 0 0 0-.4-.239 1.876 1.876 0 0 0-.394.157c-.058.031-.119-.012-.127-.07-.055-.402-.03-.85.07-1.37a.15.15 0 0 0-.078-.165c-.416-.223-.826-.739-1.21-1.313.08-.02.171-.02.286.017Z" />
+    </g>
+    <defs>
+      <clipPath id="pregnant-woman_svg__a">
+        <path fill="#fff" d="M0 0h30v30H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgPregnantWoman;
diff --git a/src/DesignIcons/Woman.tsx b/src/DesignIcons/Woman.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SvgWoman = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={30} height={30} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M13.284 14.67a.525.525 0 1 0-.094-1.046.525.525 0 0 0 .094 1.046Zm4.38 3.867c-2.496.828-4.128-.072-4.143-.081a.3.3 0 0 0-.3.519c.731.365 1.54.546 2.358.525a7.202 7.202 0 0 0 2.274-.384.3.3 0 0 0-.19-.57v-.009Zm1.014-3.816a.525.525 0 1 0-.094-1.046.525.525 0 0 0 .094 1.046Z"
+      fill={props.color}
+    />
+    <path
+      d="m26.847 21.624-1.392-.68c-2.034-.99-2.127-3.058-2.226-5.245-.01-.884-.1-1.766-.27-2.634-.645-2.796-1.608-4.839-3.03-6.423-1.629-1.82-3-1.998-3.63-1.965.621 1.008.639 2.475.6 3.12l.579.444.156.12.066.04c1.011.728 1.572 1.682 1.869 3.191l.09.456c.036.183.072.372.111.558a9.121 9.121 0 0 0-3.27.705l-.759-.024a5.659 5.659 0 0 0-2.064-.705c-1.299-.207-2.979.273-3.258.357h-.138c.3-1.542 1.458-2.643 2.376-3.3.622-.41 1.285-.756 1.977-1.032a15.244 15.244 0 0 0 1.515-.729l.168-.105c.03-.738 0-2.72-1.065-3.342v-.015a5.127 5.127 0 0 0-3.9.525c-2.826 1.575-4.752 5.56-5.211 8.661a17.744 17.744 0 0 0-.117 2.7c.028.818-.001 1.637-.087 2.451-.192 1.524-2.598 1.482-2.622 1.476a.314.314 0 0 0-.231.1.3.3 0 0 0-.075.236 4.002 4.002 0 0 0 2.718 3.405c2.157.81 5.178.33 6.873-1.056a4.67 4.67 0 0 0 2.622.804 6.505 6.505 0 0 0 2.001-.35 9.709 9.709 0 0 0 4.752 1.232c.198 0 .399 0 .6-.02 3.246-.202 4.359-2.458 4.404-2.55a.301.301 0 0 0-.132-.406ZM19.872 13.2c.312 0 .622.035.927.102 0 .981-.117 1.917-.3 2.025-.081.018-.192.033-.3.051-.669.084-1.83.132-2.139.144-.102-.078-.459-.423-1.092-1.752a8.283 8.283 0 0 1 2.904-.57Zm-6.3-.027c.584.082 1.15.26 1.674.528a9.904 9.904 0 0 1-1.125 1.698 7.115 7.115 0 0 1-2.943-.3c-.078-.213-.24-.972-.366-1.64.543-.15 1.788-.436 2.766-.283l-.006-.003Zm6.099 6.48a5.813 5.813 0 0 1-.231.477c-.027.051-.057.102-.087.153-.057.105-.114.21-.177.3l-.117.174c-.06.09-.117.183-.18.273l-.135.177c-.063.081-.123.165-.189.246l-.147.168c-.066.075-.129.15-.195.222-.066.072-.105.102-.156.156a4.256 4.256 0 0 1-.201.198l-.162.138c-.069.057-.135.117-.204.171-.069.054-.111.078-.165.117-.054.04-.129.096-.195.135-1.749.6-3.099.441-4.374-.47a9.908 9.908 0 0 1-1.593-1.342c-.9-1.017-1.35-2.424-1.365-4.2.02-1.082.14-2.16.36-3.219h.066c.21 1.113.369 1.758.474 1.911.207.3 1.521.58 2.742.58.301.001.602-.018.9-.058a.3.3 0 0 0 .183-.102 10.4 10.4 0 0 0 1.266-1.878l.375 2.625-1.131.243a.3.3 0 0 0-.158.535.302.302 0 0 0 .221.065h.063l1.404-.3a.3.3 0 0 0 .234-.333l-.411-2.883c.654 1.386 1.2 2.142 1.575 2.19H18c.069 0 1.422-.05 2.238-.15a8.034 8.034 0 0 1-.567 3.681Z"
+      fill={props.color}
+    />
+  </svg>
+);
+export default SvgWoman;
diff --git a/src/DesignIcons/index.ts b/src/DesignIcons/index.ts
@@ -1,6 +1,12 @@
 export { default as CompareSorting } from "./CompareSorting";
+export { default as Baby } from "./Baby";
 export { default as Email } from "./Email";
 export { default as Facebook } from "./Facebook";
+export { default as Kids } from "./Kids";
+export { default as Lactation } from "./Lactation";
 export { default as Linkedin } from "./Linkedin";
+export { default as Male } from "./Male";
 export { default as NutritionIcon } from "./NutritionIcon";
+export { default as PregnantWoman } from "./PregnantWoman";
 export { default as Twitter } from "./Twitter";
+export { default as Woman } from "./Woman";
diff --git a/src/components/DetailPageComponents/DetailsPageTabItems/DetailsPageTabItems.tsx b/src/components/DetailPageComponents/DetailsPageTabItems/DetailsPageTabItems.tsx
@@ -23,7 +23,7 @@ export default function DetailsPageTabItems({
             width: "0px",
             background: "transparent",
           },
-          flexDirection: "row", // set the flex-direction to row
+          flexDirection: "row",
         }}
         id="tab-items-container"
       >