Merge branch 'X2-6043' of github.com:ranjantanya/ui-kit into X2-6577-…

…6043

# By Tanya Ranjan (14) and others
# Via Tanya Ranjan (10) and GitHub (1)
* 'X2-6043' of github.com:ranjantanya/ui-kit:
  X2-6043: fix
  X2-6043: Fix top row in search bar
  2.1.16
  Dumb Bell, Mobile icons + Fix missing attribute for Submit Button (xola#254)
  Fix drawer close button (xola#260)
  Fix warnings from Tailwind (xola#259)
  2.1.15
  X2-6043: Have absolute width on xl and 2xl screens
  X2-6043: Adjust search bar width
  X2-6043: Lint fix
  X2-6043: Reapply changes for showcase feedback
  X2-6043: Address showcase feedback
  X2-6043: Remove Show all results option + change border & shadow
  X2-6043: Revert changes
  X2-6043: Change xl width
  X2-6043: Increase search box width on xl screens
  X2-6043: Fix typo
  X2-6043: Revert width change
  X2-6043: Dashboard search menu changes: initial commit

# Conflicts:
#	src/index.js

.prettierignore

@@ -1,2 +1,3 @@
 src/theme.js
 package-lock.json
+node_modules

.storybook/main.js

@@ -1,6 +1,8 @@
 module.exports = {
     stories: ["../src/**/*.stories.@(js|jsx|mdx)"],
-
+    core: {
+        disableTelemetry: true,
+    },
     addons: [
         "@storybook/addon-postcss",
         "@storybook/addon-links",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xola/ui-kit",
-    "version": "2.1.14",
+    "version": "2.1.16",
     "description": "Xola UI Kit",
     "license": "MIT",
     "files": [
@@ -30,7 +30,7 @@
     },
     "dependencies": {
         "@headlessui/react": "^1.4.0",
-        "@tailwindcss/forms": "^0.4.0",
+        "@tailwindcss/forms": "^0.5.6",
         "@tailwindcss/line-clamp": "^0.3.1",
         "@tippyjs/react": "^4.2.6",
         "clsx": "^1.1.1",

src/components/Buttons/ButtonGroup.jsx

@@ -52,6 +52,7 @@ const Button = ({
     as: Tag = "button",
     isActive,
     shouldShowText = true,
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
     isHidden = false,
     size = "medium",
     icon,

src/components/Search.jsx

@@ -175,7 +175,7 @@ export const Search = ({
                     id: menuId,
                     className: clsx(
                         "ui-search-menu",
-                        "absolute top-10 divide-y divide-gray-light w-full xl:w-2/3 max-h-[75vh] border border-blue-light mt-1 rounded overflow-auto z-10 bg-white",
+                        "absolute top-10 divide-y divide-gray-light w-full xl:w-[590px] max-h-[75vh] border border-secondary-lighter shadow-xl mt-1 rounded overflow-auto z-10 bg-white",
                         { hidden: !open },
                     ),
                 })}
@@ -184,28 +184,20 @@ export const Search = ({
                     ? itemList.map((item, index) => (
                           <li key={item} {...getItemProps({ key: index, item, index, className: "ui-search-item" })}>
                               {item === submitValueItem ? (
-                                  <>
+                                  isLoading ? (
+                                      <div className="p-3 text-center">
+                                          <Spinner size="small" />
+                                      </div>
+                                  ) : inputValue.length < minChars ? (
                                       <div
                                           className={clsx(
                                               "cursor-pointer p-2",
                                               highlightedIndex === index ? "bg-blue-light text-white" : "",
                                           )}
                                       >
-                                          {inputValue.length >= minChars ? (
-                                              <>
-                                                  Show all results for <strong>{inputValue}</strong>
-                                              </>
-                                          ) : (
-                                              `Enter at least ${minChars} characters to begin search`
-                                          )}
+                                          {`Enter at least ${minChars} characters to begin search`}
                                       </div>
-
-                                      {isLoading ? (
-                                          <div className="p-3 text-center">
-                                              <Spinner size="small" />
-                                          </div>
-                                      ) : null}
-                                  </>
+                                  ) : null
                               ) : (
                                   children?.(item, highlightedIndex === index)
                               )}
@@ -219,15 +211,15 @@ export const Search = ({
                     <li className="search-footer pointer-events sticky bottom-0 flex space-x-5 p-2 text-sm text-gray-dark">
                         <span className="flex items-center">
                             <Key char="up" className="mr-0.5" />
-                            <Key char="down" className="mr-2" /> to navigate
+                            <Key char="down" className="mr-2" /> navigate results
                         </span>
 
                         <span className="flex items-center">
-                            <Key char="enter" className="mr-2" /> to submit
+                            <Key char="enter" className="mr-2" /> purchase details
                         </span>
 
                         <span className="flex items-center">
-                            <Key char="esc" className="mr-2" /> to close
+                            <Key char="esc" className="mr-2" /> close search
                         </span>
                     </li>
                 ) : null}

src/icons/ClockManualIcon.jsx

@@ -17,4 +17,4 @@ export const ClockManualIcon = createIcon((props) => {
     );
 });
 
-ClockManualIcon.tags = ["clock", "manual", "watch"];
+ClockManualIcon.tags = ["clock", "manual", "watch", "fly", "on the fly"];

src/icons/DumbbellIcon.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { createIcon } from "../helpers/icon";
+
+export const DumbbellIcon = createIcon((props) => {
+    return (
+        <svg viewBox="0 0 14 14" width={14} height={14} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0.8"
+                d="M9.745 2.203a.687.687 0 000 .972l2.004 2.003a.687.687 0 10.972-.972l-2.004-2.003a.688.688 0 00-.972 0z"
+            />
+            <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0.8"
+                d="M7.801 2.202a.687.687 0 000 .973l3.949 3.948a.687.687 0 10.972-.974L8.775 2.202a.688.688 0 00-.974 0zM2.812 9.137a.688.688 0 01.972 0l2.004 2.003a.688.688 0 01-.973.972L2.812 10.11a.687.687 0 010-.972z"
+            />
+            <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0.8"
+                d="M2.812 7.192a.688.688 0 01.972 0l3.948 3.948a.688.688 0 11-.973.973L2.812 8.166a.688.688 0 010-.974z"
+            />
+            <path
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0.8"
+                d="M9.289 4.663L5.27 8.68l.973.972 4.017-4.017-.972-.972z"
+            />
+        </svg>
+    );
+});
+
+DumbbellIcon.tags = ["weight", "exercise", "gym"];

src/icons/MobileIcon.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { createIcon } from "../helpers/icon";
+
+export const MobileIcon = createIcon((props) => {
+    return (
+        <svg width={18} height={18} viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <g
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.3"
+                clipPath="url(#clip0_9896_373783)"
+            >
+                <path d="M13.5 14.25a1.5 1.5 0 01-1.5 1.5H6a1.5 1.5 0 01-1.5-1.5V3.75A1.5 1.5 0 016 2.25h6a1.5 1.5 0 011.5 1.5v10.5z" />
+                <path d="M10.877 2.25v1.5a.375.375 0 01-.375.375h-3a.375.375 0 01-.375-.375v-1.5" />
+            </g>
+            <defs>
+                <clipPath id="clip0_9896_373783">
+                    <path fill="#fff" d="M0 0H18V18H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+});
+
+MobileIcon.tags = ["mobile", "phone", "iphone", "android", "ios"];

src/index.js

@@ -143,6 +143,7 @@ export { DownArrowIcon } from "./icons/DownArrowIcon";
 export { DownloadIcon } from "./icons/DownloadIcon";
 export { DropdownIcon } from "./icons/DropdownIcon";
 export { DuplicateIcon } from "./icons/DuplicateIcon";
+export { DumbbellIcon } from "./icons/DumbbellIcon";
 export { DurationIcon } from "./icons/DurationIcon";
 export { EditIcon } from "./icons/EditIcon";
 export { EditNoteIcon } from "./icons/EditNoteIcon";
@@ -190,6 +191,8 @@ export { MegaphoneIcon } from "./icons/MegaphoneIcon";
 export { MenuIcon } from "./icons/MenuIcon";
 export { MinusIcon } from "./icons/MinusIcon";
 export { MixedChecklistIcon } from "./icons/MixedChecklistIcon";
+export { MobileIcon } from "./icons/MobileIcon";
+export { MountainIcon } from "./icons/MountainIcon";
 export { MoneyAddIcon } from "./icons/MoneyAddIcon";
 export { MoneyBackIcon } from "./icons/MoneyBackIcon";
 export { MoneyIcon } from "./icons/MoneyIcon";