pixel-react 1.2.2 → 1.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. package/lib/components/Icon/types.d.ts +1 -1
  2. package/lib/components/MiniModal/MiniModal.stories.d.ts +1 -0
  3. package/lib/components/MiniModal/types.d.ts +6 -6
  4. package/lib/index.d.ts +10 -10
  5. package/lib/index.esm.js +36 -13
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +36 -13
  8. package/lib/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/assets/icons/add_testcase.svg +3 -0
  11. package/src/assets/icons/add_variable_icon.svg +3 -4
  12. package/src/assets/icons/attachment_icon.svg +3 -0
  13. package/src/assets/icons/authorization_icon.svg +3 -0
  14. package/src/assets/icons/automation_testcase.svg +4 -0
  15. package/src/assets/icons/back_icon.svg +3 -0
  16. package/src/assets/icons/manual_testcase.svg +3 -0
  17. package/src/assets/icons/variable_icon.svg +4 -0
  18. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +2 -2
  19. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +1 -1
  20. package/src/components/Button/types.ts +1 -1
  21. package/src/components/Form/Form.scss +18 -1
  22. package/src/components/Form/Form.stories.tsx +86 -13
  23. package/src/components/Icon/iconList.ts +16 -1
  24. package/src/components/Icon/types.ts +1 -1
  25. package/src/components/MiniModal/MiniModal.scss +5 -0
  26. package/src/components/MiniModal/MiniModal.stories.tsx +95 -0
  27. package/src/components/MiniModal/MiniModal.tsx +11 -6
  28. package/src/components/MiniModal/types.ts +6 -6
  29. package/src/index.ts +2 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.2.2",
4
+ "version": "1.2.3",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
package/src/assets/icons/add_testcase.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0666 0C12.2086 0 12.3507 0.017758 12.475 0.0355161C13.7358 0.0887902 15.9733 2.71698 15.9733 3.94229V13.7447C15.9733 14.9878 14.9611 16 13.7181 16H3.9689C2.72583 16 0.0621275 13.7092 0.0621275 12.4661C0.0443694 12.3241 0.0266113 12.182 0.0266113 12.04V10.2109V2.25527C0.0266113 1.70477 0.22195 1.20755 0.541595 0.81687C0.701417 0.621532 0.896756 0.461709 1.10985 0.319645C1.44726 0.124306 1.85569 0 2.28188 0H10.202H12.0311H12.0666ZM13.7358 15.6093C14.7658 15.6093 15.6182 14.7747 15.6182 13.727V3.96004C15.6182 3.48058 15.121 2.57492 14.4106 1.7758C14.3396 1.68701 14.2686 1.61598 14.1975 1.54495C14.2686 1.7758 14.3041 2.00666 14.3041 2.25527V12.0044C14.3041 13.2475 13.2919 14.2597 12.0488 14.2597H12.0133H2.26413C1.99775 14.2597 1.73138 14.2242 1.50053 14.1354C1.54492 14.1798 1.59376 14.2242 1.64259 14.2686C1.69143 14.313 1.74026 14.3574 1.78466 14.4018C2.58377 15.1121 3.48943 15.6093 3.9689 15.6093H13.7358ZM6.45599 3.30185H7.89315V6.44164H11.0329V7.8788H7.89315V11.0186H6.45599V7.8788H3.31621V6.44164H6.45599V3.30185Z" fill="currentColor"/>
3
+ </svg>
package/src/assets/icons/add_variable_icon.svg CHANGED
@@ -1,5 +1,4 @@
1
- <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M4.5 16V16C2.567 16 1 14.433 1 12.5V4.5C1 2.567 2.567 1 4.5 1V1M11.5 1V1C13.433 1 15 2.567 15 4.5V8.5V12.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
3
- <path d="M15 15V17M15 17V19M15 17H13M15 17H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
4
- <path d="M8.50631 10.8893L10.4739 6H12L9.35135 12H7.63604L5 6H6.53874L8.50631 10.8893Z" fill="currentColor"/>
1
+ <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.9799 1.39074L14.98 1.39066C14.7152 1.10024 14.2958 0.91202 13.667 0.901363L13.6603 0.901248L13.6603 0.901202C12.7479 0.873384 11.9951 1.10031 11.384 1.55729C10.8289 1.97239 10.3593 2.60115 10.001 3.47483C10.1534 3.44887 10.311 3.43399 10.4753 3.43399C10.7848 3.43399 11.4004 3.4707 11.7695 3.94829L11.7739 3.95398L11.7738 3.95401C12.0596 4.33506 12.0442 4.83443 11.9167 5.28791L11.9148 5.29459L11.9148 5.29458C11.8487 5.5177 11.679 5.86554 11.4767 6.23962C11.2662 6.62901 10.996 7.09066 10.702 7.55973L10.6993 7.56416L10.6992 7.56414C10.3347 8.13251 10.0495 8.55478 9.83621 8.83812C9.73082 8.9781 9.63297 9.09769 9.54476 9.18669C9.50132 9.23051 9.44774 9.27975 9.3864 9.32131C9.33933 9.3532 9.21625 9.43126 9.04751 9.43126H9.03969L9.03189 9.43102C8.86024 9.42565 8.74138 9.34197 8.68565 9.29502C8.62506 9.24396 8.58139 9.18766 8.55261 9.14632C8.49422 9.06244 8.44439 8.96269 8.40245 8.86844C8.31617 8.6746 8.22417 8.41394 8.13119 8.12159C7.94369 7.5321 7.73346 6.75358 7.53672 5.98052C7.33946 5.20536 7.15363 4.42727 7.01499 3.8353C6.94564 3.53916 6.88802 3.28929 6.84663 3.10947L6.79742 2.89575C6.78998 2.86356 6.7853 2.8436 6.78273 2.83267C6.78085 2.82467 6.78011 2.82151 6.78026 2.82195C6.57968 2.09733 6.4571 1.68312 6.26635 1.42424C6.18505 1.31391 6.0959 1.24128 5.9786 1.19094C5.85381 1.13739 5.67159 1.09837 5.39186 1.09837C5.26627 1.09837 5.03076 1.1623 4.67253 1.3451C4.32974 1.52003 3.92898 1.77495 3.49123 2.08709C2.6167 2.71068 1.63791 3.53124 0.748646 4.31012L0.746028 4.31241L0.74602 4.3124L0.529348 4.49953L0.770345 4.803C1.04584 4.59868 1.33341 4.39361 1.60844 4.23668C1.8837 4.07963 2.21683 3.9283 2.55433 3.92635C3.08046 3.91574 3.42074 4.32093 3.64468 4.72599C3.88424 5.15933 4.10594 5.79526 4.33533 6.63214C4.78297 8.25095 5.33179 9.99936 5.93252 11.3357C6.23406 12.0064 6.53701 12.5465 6.83047 12.9111C7.13988 13.2955 7.35241 13.3793 7.4597 13.3793C8.04015 13.3793 8.72417 13.1366 9.55755 12.509C10.3917 11.8809 11.3418 10.8921 12.4423 9.46323L14.9799 1.39074ZM14.9799 1.39074L14.9874 1.39862M14.9799 1.39074L14.9874 1.39862M14.9874 1.39862C15.338 1.76673 15.549 2.45607 15.4903 3.5376L15.4902 3.5376M14.9874 1.39862L15.4902 3.5376M15.4902 3.5376L15.4899 3.54442M15.4902 3.5376L15.4899 3.54442M15.4899 3.54442C15.4633 4.19952 15.2114 5.02391 14.6981 6.02812M15.4899 3.54442L14.6981 6.02812M14.6981 6.02812C14.1875 7.02705 13.4345 8.17281 12.4424 9.46314L14.6981 6.02812Z" fill="currentColor" stroke="currentColor"/>
3
+ <path d="M13.4708 9.75072H15.8999V11.1833H13.4708H13.3708V11.2833V13.7793H11.8044V11.2833V11.1833H11.7044H9.27529V9.75072H11.7044H11.8044V9.65072V7.15469H13.3708V9.65072V9.75072H13.4708Z" fill="currentColor" stroke="white" stroke-width="0.2"/>
5
4
  </svg>
package/src/assets/icons/attachment_icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.4416 8.46804L7.40855 13.5092C6.74872 14.0956 5.88979 14.4077 5.00744 14.3818C4.1251 14.3558 3.28601 13.9937 2.66183 13.3695C2.03764 12.7453 1.67553 11.9062 1.64956 11.0239C1.62358 10.1415 1.93571 9.2826 2.5221 8.62278L9.03736 2.10752C9.42634 1.73802 9.94236 1.532 10.4789 1.532C11.0154 1.532 11.5314 1.73802 11.9204 2.10752C12.2994 2.49158 12.5118 3.00945 12.5118 3.54902C12.5118 4.08859 12.2994 4.60645 11.9204 4.99052L6.30095 10.6018C6.24534 10.6617 6.17847 10.71 6.10417 10.7441C6.02987 10.7781 5.94959 10.7972 5.86792 10.8002C5.78624 10.8033 5.70477 10.7902 5.62816 10.7617C5.55154 10.7333 5.48128 10.69 5.42139 10.6344C5.3615 10.5788 5.31315 10.5119 5.2791 10.4376C5.24505 10.3633 5.22596 10.283 5.22294 10.2013C5.21991 10.1197 5.23301 10.0382 5.26147 9.96157C5.28993 9.88496 5.3332 9.8147 5.38881 9.75481L9.56673 5.58504C9.72008 5.43168 9.80624 5.22369 9.80624 5.00681C9.80624 4.78993 9.72008 4.58193 9.56673 4.42858C9.41337 4.27522 9.20538 4.18907 8.9885 4.18907C8.77162 4.18907 8.56362 4.27522 8.41027 4.42858L4.23235 8.61464C4.0233 8.82207 3.85737 9.06883 3.74414 9.3407C3.63091 9.61256 3.57262 9.90415 3.57262 10.1987C3.57262 10.4932 3.63091 10.7848 3.74414 11.0566C3.85737 11.3285 4.0233 11.5752 4.23235 11.7827C4.65941 12.1895 5.22659 12.4164 5.81638 12.4164C6.40617 12.4164 6.97335 12.1895 7.4004 11.7827L13.0117 6.16327C13.659 5.46854 14.0115 4.54966 13.9947 3.60022C13.978 2.65077 13.5933 1.7449 12.9219 1.07344C12.2504 0.401975 11.3445 0.0173533 10.3951 0.000601484C9.44565 -0.0161503 8.52677 0.336276 7.83204 0.983633L1.31677 7.4989C0.43819 8.47198 -0.0310478 9.74654 0.00682632 11.057C0.0447004 12.3675 0.586766 13.6128 1.52008 14.5336C2.4534 15.4543 3.70598 15.9794 5.01686 15.9994C6.32774 16.0195 7.59581 15.533 8.55686 14.6413L13.598 9.60821C13.674 9.53228 13.7342 9.44213 13.7753 9.34292C13.8164 9.24371 13.8376 9.13737 13.8376 9.02998C13.8376 8.9226 13.8164 8.81626 13.7753 8.71705C13.7342 8.61783 13.674 8.52769 13.598 8.45175C13.5221 8.37582 13.432 8.31559 13.3328 8.27449C13.2335 8.23339 13.1272 8.21224 13.0198 8.21224C12.9124 8.21224 12.8061 8.23339 12.7069 8.27449C12.6077 8.31559 12.5175 8.37582 12.4416 8.45175V8.46804Z" fill="currentColor"/>
3
+ </svg>
package/src/assets/icons/authorization_icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7.01996 1.20377C8.85437 1.81129 10.7372 2.52661 12.3472 3.151C12.4591 3.88383 12.6126 5.14073 12.6419 6.66013C12.6679 8.39079 12.5248 9.3455 12.4613 9.67831C12.3285 10.1368 12.0497 10.6349 11.6329 11.1587C11.1385 11.7793 10.4653 12.4246 9.6322 13.0762L9.63063 13.0774C8.44655 14.0068 7.35028 14.6059 7.01996 14.7784C6.68964 14.6062 5.59462 14.0084 4.41116 13.0796L4.40959 13.0784C3.57677 12.4271 2.90394 11.7821 2.41049 11.1618C2.01455 10.664 1.74329 10.1889 1.60329 9.74988C1.59954 9.73519 1.59548 9.7205 1.59079 9.7055C1.52829 9.49394 1.32735 8.64173 1.35766 6.54419C1.39079 5.20791 1.51329 4.01414 1.70454 3.14287C3.30957 2.5213 5.1868 1.80941 7.01996 1.20377ZM7.01996 0C6.92589 0 6.83152 0.0150003 6.73995 0.0453134C4.94273 0.63595 3.09926 1.32878 1.22453 2.05504C0.97234 2.15285 0.760773 2.3338 0.62327 2.5538C0.633896 2.55505 0.23795 3.79101 0.170449 6.52075C0.130448 9.25081 0.470455 10.0686 0.459205 10.0696C0.643271 10.6696 0.987652 11.2799 1.4811 11.9005C2.03267 12.5937 2.778 13.3096 3.67833 14.0134C5.16867 15.1831 6.56339 15.8822 6.62183 15.9069C6.74808 15.9688 6.88214 16 7.02027 16C7.15871 16 7.29309 15.9684 7.41934 15.9062C7.47809 15.8816 8.87437 15.1803 10.3641 14.0109C11.2647 13.3065 12.0101 12.5906 12.5619 11.8977C13.0907 11.233 13.4482 10.5808 13.621 9.9402C13.6141 9.93926 13.8642 8.93674 13.8295 6.6395C13.7854 4.34258 13.4654 2.64849 13.4698 2.64693C13.3366 2.38723 13.1032 2.17004 12.8176 2.0591C10.9425 1.33253 9.09875 0.63845 7.30121 0.0459384C7.20902 0.0156253 7.11434 0 7.01996 0Z" fill="currentColor"/>
3
+ </svg>
package/src/assets/icons/automation_testcase.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7.23636 5.52274H7.16533L6.40173 8.68367H7.94668L7.23636 5.52274Z" fill="currentColor"/>
3
+ <path d="M12.475 0.0355161C12.3507 0.017758 12.2086 0 12.0666 0H12.0311H10.202H2.28188C1.03882 0 0.0266113 1.01221 0.0266113 2.25527V10.2109V12.04C0.0266113 12.182 0.0443694 12.3241 0.0621275 12.4661C0.0621275 13.7092 2.72583 16 3.9689 16H13.7181C14.9611 16 15.9733 14.9878 15.9733 13.7447V3.94229C15.9733 2.71698 13.7358 0.0887902 12.475 0.0355161ZM6.47278 3.28524H7.9467L9.84681 11.01H8.47944L8.21307 9.83796H6.13538L5.85125 11.01H4.48388L6.47278 3.28524ZM15.6182 13.727C15.6182 14.7747 14.7658 15.6093 13.7358 15.6093H3.9689C3.48943 15.6093 2.58377 15.1121 1.78466 14.4018C1.69587 14.313 1.58932 14.2242 1.50053 14.1354C1.73138 14.2242 1.99775 14.2597 2.26413 14.2597H12.0133H12.0488C13.2919 14.2597 14.3041 13.2475 14.3041 12.0044V2.25527C14.3041 2.00666 14.2686 1.7758 14.1975 1.54495C14.2686 1.61598 14.3396 1.68701 14.4106 1.7758C15.121 2.57492 15.6182 3.48058 15.6182 3.96004V13.727Z" fill="currentColor"/>
4
+ </svg>
package/src/assets/icons/back_icon.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M15.5308 13.9958C15.3039 13.9958 15.1068 13.8317 15.0689 13.6041C14.7306 11.629 12.8181 8.18188 7.96666 7.98044V10.5146C7.96666 10.6902 7.86853 10.8511 7.71241 10.9314C7.55625 11.0117 7.36831 10.9981 7.22544 10.896L0.196281 5.87519C0.0730938 5.78719 0 5.6451 0 5.49372C0 5.34232 0.0730938 5.20026 0.196281 5.11229L7.22547 0.0914741C7.36831 -0.0105884 7.55628 -0.0242446 7.71241 0.0560991C7.86853 0.136443 7.96666 0.297318 7.96666 0.472912V3.04526C10.9655 3.34438 16 5.50901 16 13.5271C16 13.771 15.813 13.9741 15.5699 13.9942C15.5568 13.9953 15.5438 13.9958 15.5308 13.9958Z" fill="currentColor"/>
3
+ </svg>
package/src/assets/icons/manual_testcase.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M12.4877 0.0354767C12.3636 0.0177383 12.2217 0 12.0797 0H12.0443H10.2172H2.30591C2.23496 0 2.14627 -1.71809e-08 2.07531 0.0177383C2.00436 0.0177383 1.9334 0.0354768 1.84471 0.0532151C1.73828 0.0709535 1.63185 0.10643 1.52542 0.141907C1.45447 0.159645 1.38352 0.195122 1.3303 0.230599C1.20613 0.301552 1.08196 0.372506 0.957795 0.461197C0.780411 0.585366 0.638505 0.745011 0.496598 0.922395C0.478859 0.957871 0.461121 0.97561 0.425644 1.01109C0.177307 1.36585 0.0354004 1.80931 0.0354004 2.27051V12.0443C0.0354004 12.1863 0.0531387 12.3282 0.0708771 12.4701C0.0708771 13.7118 2.73163 16 3.97332 16H13.7117C14.9534 16 15.9644 14.9889 15.9644 13.7472V3.93792C15.9822 2.71397 13.7472 0.0886918 12.4877 0.0354767ZM4.29261 3.2816H5.9068L7.13074 8.8337H7.2017C7.60968 6.98891 8.0354 5.12639 8.44338 3.2816H10.0576V10.98H8.94006V5.97783H8.8691C8.53207 7.64523 8.10635 9.33038 7.75159 10.98L6.5099 10.9978L5.46334 5.99557H5.39239V10.98H4.29261V3.2816ZM15.6274 13.7118C15.6274 14.7583 14.776 15.592 13.7472 15.592H3.99105C3.51212 15.592 2.6252 15.0953 1.80924 14.3858C1.72054 14.2971 1.61411 14.2084 1.52542 14.1197C1.75602 14.2084 2.0221 14.2439 2.28817 14.2439H12.0265H12.062C13.3037 14.2439 14.3148 13.2328 14.3148 11.9911V2.25277C14.3148 2.00443 14.2793 1.77384 14.2084 1.54324C14.2793 1.61419 14.3503 1.68514 14.4212 1.77384C15.1307 2.57206 15.6274 3.47672 15.6274 3.95565V13.7118Z" fill="currentColor"/>
3
+ </svg>
package/src/assets/icons/variable_icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M10.5 4.5L8.40169 10.5H6.59831L4.5 4.5H6.03371L7.5 9.02991L8.97472 4.5H10.5Z" fill="currentColor"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1.28395 1.28395C2.21109 0.356801 3.60069 0 5.4 0H9.6C11.3993 0 12.7889 0.356801 13.7161 1.28395C14.6432 2.21109 15 3.60069 15 5.4V9.6C15 11.3993 14.6432 12.7889 13.7161 13.7161C12.7889 14.6432 11.3993 15 9.6 15H5.4C3.60069 15 2.21109 14.6432 1.28395 13.7161C0.356801 12.7889 0 11.3993 0 9.6V5.4C0 3.60069 0.356801 2.21109 1.28395 1.28395ZM1.99105 1.99105C1.3432 2.63891 1 3.69931 1 5.4V9.6C1 11.3007 1.3432 12.3611 1.99105 13.0089C2.63891 13.6568 3.69931 14 5.4 14H9.6C11.3007 14 12.3611 13.6568 13.0089 13.0089C13.6568 12.3611 14 11.3007 14 9.6V5.4C14 3.69931 13.6568 2.63891 13.0089 1.99105C12.3611 1.3432 11.3007 1 9.6 1H5.4C3.69931 1 2.63891 1.3432 1.99105 1.99105Z" fill="currentColor"/>
4
+ </svg>
package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss CHANGED
@@ -40,8 +40,8 @@
40
40
  }
41
41
  span {
42
42
  position: absolute;
43
- top: 15px;
44
- left: 18px;
43
+ top: 11px;
44
+ left: 8px;
45
45
  }
46
46
  }
47
47
  .scroll {
package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx CHANGED
@@ -26,7 +26,7 @@ const AllProjectsDropdown = ({
26
26
  const handleSelectOption = (option: optionsType) => {
27
27
  setSelectedOptions(option);
28
28
  setShowOptions(false);
29
- () => onClick(option);
29
+ onClick(option);
30
30
  };
31
31
 
32
32
  const handleInput = () => {
package/src/components/Button/types.ts CHANGED
@@ -4,7 +4,7 @@ export interface ButtonProps {
4
4
  /**
5
5
  * Variant of the button
6
6
  */
7
- variant: 'primary' | 'secondary' | 'tertiary' | 'delete'| 'warning';
7
+ variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
8
8
  /**
9
9
  * What background color to use
10
10
  */
package/src/components/Form/Form.scss CHANGED
@@ -99,10 +99,27 @@
99
99
  }
100
100
 
101
101
  .ff-main {
102
- padding: 30px;
102
+ padding: 40px;
103
103
  border-radius: 10px;
104
104
  background-color: var(--tree-connecting-lines-color);
105
105
 
106
+ .ff-error {
107
+ padding-left: 12px;
108
+ color: var(--error-light);
109
+ margin-top: 4px;
110
+ }
111
+
112
+ .ff-radio{
113
+ margin-top: 8px;
114
+ }
115
+ .ff-check{
116
+ display: flex;
117
+ }
118
+
119
+ .ff-textarea{
120
+ margin-top: 8px;
121
+ }
122
+
106
123
  .ff-button-layout {
107
124
  width: 99%;
108
125
  display: flex;
package/src/components/Form/Form.stories.tsx CHANGED
@@ -5,6 +5,8 @@ import Select from '../Select';
5
5
  import { Meta, StoryObj } from '@storybook/react/*';
6
6
  import Typography from '../Typography';
7
7
  import './Form.scss';
8
+ import Checkbox from '../Checkbox';
9
+ import TextArea from '../TextArea';
8
10
 
9
11
  type FormValues = {
10
12
  username: string;
@@ -12,6 +14,8 @@ type FormValues = {
12
14
  password: string;
13
15
  gender: string;
14
16
  language: string;
17
+ check: boolean;
18
+ description: string;
15
19
  };
16
20
 
17
21
  const meta: Meta<typeof Forms> = {
@@ -33,6 +37,8 @@ export const WithDefaultValues: Story = {
33
37
  password: '',
34
38
  gender: '',
35
39
  language: '',
40
+ check: false,
41
+ description: '',
36
42
  };
37
43
 
38
44
  const onSubmit = (data: FormValues) => {
@@ -56,8 +62,12 @@ export const WithDefaultValues: Story = {
56
62
  <Typography as="label">username</Typography>
57
63
  <Input
58
64
  type="text"
65
+ disabled={false}
59
66
  {...register('username', {
60
- required: 'Username is required',
67
+ required: {
68
+ value: true,
69
+ message: 'Username is required',
70
+ },
61
71
  minLength: {
62
72
  value: 3,
63
73
  message: 'Username must be at least 3 characters',
@@ -72,7 +82,7 @@ export const WithDefaultValues: Story = {
72
82
  value={watch('username')}
73
83
  onChange={(e) =>
74
84
  setValue('username', e.target.value, {
75
- shouldValidate: false,
85
+ shouldValidate: true,
76
86
  })
77
87
  }
78
88
  onBlur={() => {
@@ -87,8 +97,9 @@ export const WithDefaultValues: Story = {
87
97
 
88
98
  <Input
89
99
  type="email"
100
+ disabled={false}
90
101
  {...register('email', {
91
- required: 'Email is required',
102
+ required: { value: true, message: 'Email is required' },
92
103
  pattern: {
93
104
  value: /^\S+@\S+\.\S+$/,
94
105
  message: 'Please enter a valid email',
@@ -98,7 +109,7 @@ export const WithDefaultValues: Story = {
98
109
  helperText={errors.email?.message}
99
110
  value={watch('email')}
100
111
  onChange={(e) =>
101
- setValue('email', e.target.value, { shouldValidate: false })
112
+ setValue('email', e.target.value, { shouldValidate: true })
102
113
  }
103
114
  onBlur={() => {
104
115
  trigger('email');
@@ -109,11 +120,14 @@ export const WithDefaultValues: Story = {
109
120
  {/* Password Field */}
110
121
  <div>
111
122
  <Typography as="label">Password</Typography>
112
-
113
123
  <Input
124
+ disabled={false}
114
125
  type="password"
115
126
  {...register('password', {
116
- required: 'Password is required',
127
+ required: {
128
+ value: true,
129
+ message: 'Password is required',
130
+ },
117
131
  minLength: {
118
132
  value: 6,
119
133
  message: 'Password must be at least 6 characters',
@@ -134,9 +148,8 @@ export const WithDefaultValues: Story = {
134
148
  </div>
135
149
 
136
150
  {/* Gender Field */}
137
- <div>
151
+ <div className="ff-radio">
138
152
  <Typography as="label">Gender</Typography>
139
-
140
153
  <RadioGroup
141
154
  options={[
142
155
  {
@@ -152,14 +165,23 @@ export const WithDefaultValues: Story = {
152
165
  value: 'other',
153
166
  },
154
167
  ]}
168
+ {...register('gender', {
169
+ required: {
170
+ value: true,
171
+ message: 'select the Gender',
172
+ },
173
+ })}
155
174
  selectedValue={watch('gender')}
156
175
  onChange={(option) => {
157
- setValue('gender', option.value);
176
+ setValue('gender', option.value, {
177
+ shouldValidate: true,
178
+ });
158
179
  }}
159
- name="gender"
160
180
  />
161
181
  {errors?.gender && (
162
- <span className="ff-error">{errors.gender.message}</span>
182
+ <Typography className="ff-error">
183
+ {errors.gender.message}
184
+ </Typography>
163
185
  )}
164
186
  </div>
165
187
 
@@ -177,17 +199,68 @@ export const WithDefaultValues: Story = {
177
199
  value: watch('language') || '',
178
200
  }}
179
201
  {...register('language', {
180
- required: 'Programming language is required',
202
+ required: {
203
+ value: true,
204
+ message: 'language is required',
205
+ },
181
206
  })}
182
207
  onChange={(option) =>
183
208
  setValue('language', option.value, { shouldValidate: true })
184
209
  }
185
210
  />
186
211
  {errors?.gender && (
187
- <span className="ff-error">{errors?.language?.message}</span>
212
+ <Typography className="ff-error">
213
+ {errors?.language?.message}
214
+ </Typography>
188
215
  )}
189
216
  </div>
190
217
 
218
+ {/* TextArea Field */}
219
+ <div className="ff-textarea">
220
+ <TextArea
221
+ label="Description"
222
+ value={watch('description')}
223
+ {...register('description', {
224
+ required: 'Description is required',
225
+ maxLength: {
226
+ value: 30,
227
+ message: 'Maximum length is 200 characters',
228
+ },
229
+ })}
230
+ error={!!errors?.description?.message}
231
+ onChange={(e) => {
232
+ setValue('description', e.target.value, {
233
+ shouldValidate: true,
234
+ });
235
+ }}
236
+ onBlur={() => {
237
+ trigger('description');
238
+ }}
239
+ />
240
+ </div>
241
+ {/* check box Field */}
242
+ <div className="ff-check">
243
+ <Checkbox
244
+ label="terms condition"
245
+ disabled={false}
246
+ {...register('check', {
247
+ required: {
248
+ value: true,
249
+ message: 'Please select the checkbox',
250
+ },
251
+ })}
252
+ onChange={(e) => {
253
+ setValue('check', e.target.checked, {
254
+ shouldValidate: true,
255
+ });
256
+ }}
257
+ />
258
+ {errors?.check && (
259
+ <Typography className="ff-error">
260
+ {errors.check.message}
261
+ </Typography>
262
+ )}
263
+ </div>
191
264
  {/* Buttons */}
192
265
  <div className="ff-button-layout">
193
266
  <button type="submit">Submit</button>
package/src/components/Icon/iconList.ts CHANGED
@@ -114,6 +114,9 @@ import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
114
114
  import UpdateIcon from '../../assets/icons/update_icon.svg?react';
115
115
  import AddFile from '../../assets/icons/add_file.svg?react';
116
116
  import EyeClosed from '../../assets/icons/eye_closed.svg?react';
117
+ import AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
118
+ import VariableIcon from '../../assets/icons/variable_icon.svg?react';
119
+ import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
117
120
 
118
121
  import CloneIcon from '../../assets/icons/clone_icon.svg?react';
119
122
  import MoveIcon from '../../assets/icons/move_icon.svg?react';
@@ -122,8 +125,12 @@ import HistoryIcon from '../../assets//icons/history_icon.svg?react';
122
125
  import LinkedDefects from '../../assets//icons/linked_defects.svg?react';
123
126
  import FireflinkPlatform from '../../assets//icons/fireflink_platform.svg?react';
124
127
  import FireflinkFinder from '../../assets//icons/fireflink_finder_logo.svg?react';
125
- import ClientProfile from '../../assets//icons/client_profile.svg?react'
128
+ import ClientProfile from '../../assets//icons/client_profile.svg?react';
126
129
  import LicenseExpired from '../../assets//icons/license_expired.svg?react';
130
+ import AddTestCaseIcon from '../../assets/icons/add_testcase.svg?react';
131
+ import AutomationTestCaseIcon from '../../assets/icons/automation_testcase.svg?react';
132
+ import ManualTestCaseIcon from '../../assets/icons/manual_testcase.svg?react';
133
+ import BackIcon from '../../assets/icons/back_icon.svg?react';
127
134
 
128
135
  Components['delete_info'] = DeleteInfoIcon;
129
136
  Components['success'] = ToastSuccessIcon;
@@ -242,9 +249,17 @@ Components['no_access_icon'] = NoAccessIcon;
242
249
  Components['full_access_icon'] = FullAccessIcon;
243
250
  Components['view_access_icon'] = ViewAccessIcon;
244
251
  Components['eye_closed'] = EyeClosed;
252
+ Components['attachment_icon'] = AttachmentIcon;
253
+ Components['variable_icon'] = VariableIcon;
254
+ Components['authorization_icon'] = AuthorizationIcon;
255
+
245
256
  Components['fireflink_platform_logo'] = FireflinkPlatform;
246
257
  Components['fireflink_finder_logo'] = FireflinkFinder;
247
258
  Components['client_profile'] = ClientProfile;
248
259
  Components['license_expired'] = LicenseExpired;
260
+ Components['add_testcase'] = AddTestCaseIcon;
261
+ Components['automation_testcase'] = AutomationTestCaseIcon;
262
+ Components['manual_testcass'] = ManualTestCaseIcon;
263
+ Components['back_icon'] = BackIcon;
249
264
 
250
265
  export default Components;
package/src/components/Icon/types.ts CHANGED
@@ -7,5 +7,5 @@ export interface IconProps {
7
7
  onClick?: (data?: any) => void;
8
8
  hoverEffect?: boolean;
9
9
  disabled?: boolean;
10
- variant?: "dark" | "light";
10
+ variant?: 'dark' | 'light';
11
11
  }
package/src/components/MiniModal/MiniModal.scss CHANGED
@@ -168,3 +168,8 @@
168
168
  .ff-mini-modal-gap-10 {
169
169
  gap: 10px;
170
170
  }
171
+ .ff-mini-edit-model-icon {
172
+ color: var(--ff-mini-modal-box-shadow);
173
+ border: 2px solid var(--ff-mini-modal-box-shadow);
174
+ border-radius: 4px;
175
+ }
package/src/components/MiniModal/MiniModal.stories.tsx CHANGED
@@ -4,6 +4,7 @@ import MiniModal from './MiniModal';
4
4
  import Button from '../Button/Button';
5
5
  import './MiniModal.scss';
6
6
  import Typography from '../Typography';
7
+ import Icon from '../Icon';
7
8
 
8
9
  const meta: Meta<typeof MiniModal> = {
9
10
  title: 'Components/MiniModal',
@@ -595,5 +596,99 @@ export const CustomModalWithWrapper = () => {
595
596
  </div>
596
597
  );
597
598
  };
599
+ export const normalModalFollowedByIcon = () => {
600
+ const iconRef1 = useRef<HTMLButtonElement>(null);
601
+ const iconRef2 = useRef<HTMLButtonElement>(null);
602
+ const iconRef3 = useRef<HTMLButtonElement>(null);
603
+ const { currentModal, openModal } = useModal();
604
+
605
+ return (
606
+ <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
607
+ <Icon
608
+ className="ff-mini-edit-model-icon"
609
+ width={16}
610
+ height={16}
611
+ onClick={() => openModal(1)}
612
+ ref={iconRef1}
613
+ name="user_profile"
614
+ />
615
+
616
+ {currentModal === 1 && (
617
+ <MiniModal
618
+ anchorRef={iconRef1}
619
+ modalProperties={{ width: 168, height: 108 }}
620
+ childContent={
621
+ <>
622
+ <Typography as="p">
623
+ This is some content inside the first modal.
624
+ </Typography>
625
+ </>
626
+ }
627
+ isIconModel={true}
628
+ isAnimated={true}
629
+ firstAnchorRef={iconRef1}
630
+ anchorLeftDistanceForWrapper={0}
631
+ extraTopSpace={{ normalModal: 5 }}
632
+ />
633
+ )}
634
+
635
+ <Icon
636
+ className="ff-mini-edit-model-icon"
637
+ width={16}
638
+ height={16}
639
+ onClick={() => openModal(2)}
640
+ ref={iconRef2}
641
+ name="user_profile"
642
+ />
643
+
644
+ {currentModal === 2 && (
645
+ <MiniModal
646
+ anchorRef={iconRef2}
647
+ modalProperties={{ width: 193, height: 128 }}
648
+ childContent={
649
+ <>
650
+ <Typography as="p">
651
+ This is some content inside the Second modal.
652
+ </Typography>
653
+ </>
654
+ }
655
+ isIconModel={true}
656
+ isAnimated={true}
657
+ firstAnchorRef={iconRef2}
658
+ anchorLeftDistanceForWrapper={20}
659
+ extraTopSpace={{ normalModal: 15 }}
660
+ />
661
+ )}
662
+
663
+ <Icon
664
+ className="ff-mini-edit-model-icon"
665
+ width={16}
666
+ height={16}
667
+ onClick={() => openModal(3)}
668
+ ref={iconRef3}
669
+ name="user_profile"
670
+ />
671
+
672
+ {currentModal === 3 && (
673
+ <MiniModal
674
+ anchorRef={iconRef3}
675
+ modalProperties={{ width: 168, height: 108 }}
676
+ childContent={
677
+ <>
678
+ <Typography as="p">
679
+ This is some content inside the third modal.
680
+ </Typography>
681
+ </>
682
+ }
683
+ isIconModel={true}
684
+ isAnimated={true}
685
+ firstAnchorRef={iconRef3}
686
+ anchorLeftDistanceForWrapper={10}
687
+ extraTopSpace={{ normalModal: 10 }}
688
+ />
689
+ )}
690
+ </div>
691
+ );
692
+ };
598
693
 
599
694
  export default meta;
package/src/components/MiniModal/MiniModal.tsx CHANGED
@@ -14,8 +14,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
14
14
  anchorRef,
15
15
  headerProps,
16
16
  childContent,
17
- cancelButtonProps,
18
- proceedButtonProps,
17
+ cancelButtonProps = () => {},
18
+ proceedButtonProps = () => {},
19
19
  footerContent,
20
20
  isWrapped = false,
21
21
  isAnimated = false,
@@ -29,6 +29,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
29
29
  extraTopSpace,
30
30
  extraRightSpace,
31
31
  extraLeftSpace,
32
+ isIconModel,
32
33
  },
33
34
  ref
34
35
  ) => {
@@ -144,8 +145,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
144
145
  //specifying the modal's escape and enter functionality
145
146
  const handleEsc = useEscapeKey('Escape');
146
147
  const handleEnter = useEscapeKey('Enter');
147
- handleEsc(cancelButtonProps.onClick);
148
- handleEnter(proceedButtonProps.onClick);
148
+ handleEsc(cancelButtonProps?.onClick);
149
+ handleEnter(proceedButtonProps?.onClick);
149
150
  useClickOutside(modalRef, cancelButtonProps.onClick);
150
151
 
151
152
  //calculate the modal position
@@ -227,6 +228,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
227
228
  >
228
229
  {headerProps ? (
229
230
  <Typography as="div">{headerProps}</Typography>
231
+ ) : isIconModel ? (
232
+ <></>
230
233
  ) : (
231
234
  <Typography as="header">
232
235
  <Typography as="h2">Header text</Typography>
@@ -236,13 +239,15 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
236
239
  <div className="modal-content">{childContent}</div>
237
240
  {footerContent ? (
238
241
  <Typography as="footer">{footerContent}</Typography>
242
+ ) : isIconModel ? (
243
+ <></>
239
244
  ) : (
240
245
  <footer className="modal-footer">
241
246
  <Button
242
247
  variant="primary"
243
248
  className="btn-cancel"
244
- onClick={cancelButtonProps.onClick}
245
- label={cancelButtonProps.text}
249
+ onClick={cancelButtonProps?.onClick}
250
+ label={cancelButtonProps?.text}
246
251
  />
247
252
  <Button
248
253
  variant="secondary"
package/src/components/MiniModal/types.ts CHANGED
@@ -1,8 +1,4 @@
1
1
  import { ReactNode, RefObject } from 'react';
2
- interface ButtonProps {
3
- text: string;
4
- onClick: () => void;
5
- }
6
2
  interface ModalDimensions {
7
3
  width?: number;
8
4
  height?: number;
@@ -23,11 +19,11 @@ export interface MiniEditModalProps {
23
19
  /**
24
20
  * Props for the cancel button inside the modal
25
21
  */
26
- cancelButtonProps: ButtonProps;
22
+ cancelButtonProps?: any;
27
23
  /**
28
24
  * Props for the proceed button inside the modal.
29
25
  */
30
- proceedButtonProps: ButtonProps;
26
+ proceedButtonProps?: any;
31
27
  /**
32
28
  * Optional content for the footer of the modal.
33
29
  */
@@ -44,6 +40,10 @@ export interface MiniEditModalProps {
44
40
  * Specifies if the modal should behave as a popover with an arrow.
45
41
  */
46
42
  isPopOver?: boolean;
43
+ /**
44
+ * Specifies if the modal should behave as a popover with an arrow.
45
+ */
46
+ isIconModel?: boolean;
47
47
  /**
48
48
  * Sets the position of the modal relative to its anchor.
49
49
  * bottom: The modal appears below the anchor.
package/src/index.ts CHANGED
@@ -23,7 +23,7 @@ import LazyLoad from './components/LazyLoad/LazyLoad';
23
23
  import ThemeProvider from './components/ThemeProvider';
24
24
  import Typography from './components/Typography';
25
25
  import useTheme from './hooks/useTheme';
26
- import Forms from './components/Form/Forms';
26
+ import Form from './components/Form/Forms';
27
27
  import InputWithDropdown from './components/InputWithDropdown';
28
28
  import RadioButton from './components/RadioButton';
29
29
  import RadioGroup from './components/RadioGroup';
@@ -98,7 +98,7 @@ export {
98
98
  Table,
99
99
  RadioButton,
100
100
  RadioGroup,
101
- Forms,
101
+ Form,
102
102
  MiniModal,
103
103
  Container,
104
104
  Row,