Merge pull request #82 from myntra/stepperfix

Stepper Fix
myntra · Nov 9, 2023 · bb0b1f0 · bb0b1f0
2 parents 8cf2c7b + 57e6547
commit bb0b1f0
Show file tree

Hide file tree

Showing 57 changed files with 2,418 additions and 2,374 deletions.
diff --git a/README.md b/README.md
@@ -57,21 +57,21 @@ We provide a basic set of icons for immediate use, as well as the option to util
 Run the following command using npm:
 
 ```bash
-npm install @myntra/uikit-icons --save
+npm install @applique-ui/uikit-icons --save
 ```
 If you prefer Yarn, use the following command instead:
 
 ```bash
-yarn add @myntra/uikit-icons
+yarn add @applique-ui/uikit-icons
 ```
 
 ### Usage
 1. Import any of the provided icons directly in your project:
 
 ```js
-import BarsSolid from "@myntra/uikit-icons/svgs/BarsSolid"
-import Bell from "@myntra/uikit-icons/svgs/Bell"
-import BoxSolid from "@myntra/uikit-icons/svgs/BoxSolid"
+import BarsSolid from "@applique-ui/uikit-icons/svgs/BarsSolid"
+import Bell from "@applique-ui/uikit-icons/svgs/Bell"
+import BoxSolid from "@applique-ui/uikit-icons/svgs/BoxSolid"
 ```
 
 2. Pass this icon element as a prop to the component:

diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -33,7 +33,7 @@
     "@applique-ui/uikit-context": "0.0.*",
     "@applique-ui/icon": "0.0.*",
     "@applique-ui/layout": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest",
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest",
     "@applique-ui/uikit-utils": "0.0.*"
   }
 }
diff --git a/components/avatar/package.json b/components/avatar/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "name-initials": "^0.1.3",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/badge/package.json b/components/badge/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest",
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest",
     "@applique-ui/button": "0.0.*",
     "@applique-ui/icon": "0.0.*"
   }

diff --git a/components/banner/package.json b/components/banner/package.json
@@ -32,7 +32,7 @@
     "@applique-ui/text": "0.0.*",
     "@applique-ui/layout": "0.0.*",
     "@applique-ui/icon": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest",
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest",
     "@applique-ui/uikit-utils": "0.0.*"
   }
 }
diff --git a/components/bread-crumb/package.json b/components/bread-crumb/package.json
@@ -31,6 +31,6 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/button-group/package.json b/components/button-group/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/dropdown": "0.0.*",
     "@applique-ui/list": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/button/package.json b/components/button/package.json
@@ -35,6 +35,6 @@
     "@applique-ui/loader": "0.0.*",
     "@applique-ui/uikit-context": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/click-away/package.json b/components/click-away/package.json
@@ -31,6 +31,6 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/dropdown/package.json b/components/dropdown/package.json
@@ -35,6 +35,6 @@
     "@applique-ui/portal": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "prop-types": "^15.7.2",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/error-boundary/package.json b/components/error-boundary/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "prop-types": "^15.7.2",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/fab/package.json b/components/fab/package.json
@@ -34,6 +34,6 @@
     "@applique-ui/dropdown": "0.0.*",
     "@applique-ui/icon": "0.0.*",
     "@applique-ui/button": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/field/package.json b/components/field/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "prop-types": "^15.7.2",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/form/package.json b/components/form/package.json
@@ -46,6 +46,6 @@
     "@applique-ui/input-file": "0.0.*",
     "@applique-ui/uikit-context": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/grid/package.json b/components/grid/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "prop-types": "^15.7.2",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/icon/example.mdx b/components/icon/example.mdx
@@ -1,5 +1,5 @@
 import Icon from './src/icon'
-import {Bell} from "@myntra/uikit-icons"
+import {Bell} from "@applique-ui/uikit-icons"
 
 # Icon
 

diff --git a/components/icon/package.json b/components/icon/package.json
@@ -36,6 +36,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "react": "16.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/icon/src/icon.tsx b/components/icon/src/icon.tsx
@@ -5,7 +5,7 @@ import classnames from './icon.module.scss'
 export type IconName = string | ReactNode
 
 interface Props extends BaseProps {
-  /** icon component name from @myntra/uikit-icons */
+  /** icon component name from @applique-ui/uikit-icons */
   name: IconName
   /** Accessibility text for screen readers */
   title?: string

diff --git a/components/image/package.json b/components/image/package.json
@@ -33,6 +33,6 @@
     "@applique-ui/uikit-utils": "0.0.*",
     "intersection-observer-polyfill": "^0.1.0",
     "prop-types": "^15.7.2",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-checkbox/package.json b/components/input-checkbox/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/input": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-file/package.json b/components/input-file/package.json
@@ -31,6 +31,6 @@
     "@applique-ui/button": "0.0.*",
     "@applique-ui/input-text": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-masked/package.json b/components/input-masked/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/input": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-month/package.json b/components/input-month/package.json
@@ -35,6 +35,6 @@
     "@applique-ui/input-masked": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "luxon": "^1.21.1",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-number/package.json b/components/input-number/package.json
@@ -32,6 +32,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/input": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-radio/package.json b/components/input-radio/package.json
@@ -31,6 +31,6 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-select/package.json b/components/input-select/package.json
@@ -36,6 +36,6 @@
     "@applique-ui/list": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
     "sifter": "^0.5.3",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-text-area/package.json b/components/input-text-area/package.json
@@ -33,6 +33,6 @@
     "@applique-ui/input": "0.0.*",
     "@applique-ui/icon": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input-text/package.json b/components/input-text/package.json
@@ -34,6 +34,6 @@
     "@applique-ui/icon": "0.0.*",
     "@applique-ui/input": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/input/package.json b/components/input/package.json
@@ -33,6 +33,6 @@
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/icon": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/layout/package.json b/components/layout/package.json
@@ -29,6 +29,6 @@
   "peerDependencies": {},
   "dependencies": {
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/list/package.json b/components/list/package.json
@@ -36,6 +36,6 @@
     "@applique-ui/uikit-utils": "0.0.*",
     "react": "^16.9.0",
     "scroll-into-view-if-needed": "^2.2.20",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/loader/package.json b/components/loader/package.json
@@ -31,6 +31,6 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/measure/package.json b/components/measure/package.json
@@ -33,6 +33,6 @@
     "@applique-ui/uikit-utils": "0.0.*",
     "prop-types": "^15.7.2",
     "resize-observer-polyfill": "^1.5.1",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/modal/package.json b/components/modal/package.json
@@ -34,6 +34,6 @@
     "@applique-ui/portal": "0.0.*",
     "@applique-ui/text": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/nav-bar/package.json b/components/nav-bar/package.json
@@ -35,6 +35,6 @@
     "@applique-ui/click-away": "0.0.*",
     "@applique-ui/uikit-context": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/page/package.json b/components/page/package.json
@@ -31,6 +31,6 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest"
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest"
   }
 }
diff --git a/components/pagination/package.json b/components/pagination/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@applique-ui/uikit-can-i-use": "0.0.*",
     "@applique-ui/uikit-utils": "0.0.*",
-    "uikit-icons": "npm:@myntra/uikit-icons@latest",
+    "uikit-icons": "npm:@applique-ui/uikit-icons@latest",
     "@applique-ui/input-select": "0.0.*",
     "@applique-ui/input-number": "0.0.*",
     "@applique-ui/icon": "0.0.*",

diff --git a/components/pagination/src/pages.tsx b/components/pagination/src/pages.tsx
@@ -5,6 +5,10 @@ import Icon from '@applique-ui/icon'
 
 import ChevronLeftSolid from 'uikit-icons/svgs/ChevronLeftSolid'
 import ChevronRightSolid from 'uikit-icons/svgs/ChevronRightSolid'
+
+import ChevronSkipLeftSolid from 'uikit-icons/svgs/ChevronSkipLeftSolid'
+import ChevronSkipRightSolid from 'uikit-icons/svgs/ChevronSkipRightSolid'
+
 import { usePagination, DOTS } from './usePagination'
 import classnames from './pagination.module.scss'
 
@@ -43,7 +47,13 @@ const SkipPages = ({ onPageChange, type, currentPage }) => {
       onMouseOut={handleMouseOut}
     >
       {isHovering ? (
-        <Icon name={ChevronRightSolid} onClick={onSkipClick} />
+        <Icon
+          className={classnames('pages-icon')}
+          name={
+            type === DOTS.LEFT ? ChevronSkipLeftSolid : ChevronSkipRightSolid
+          }
+          onClick={onSkipClick}
+        />
       ) : (
         <span>&#8230;</span>
       )}
@@ -102,7 +112,7 @@ const Pages = ({
     >
       <Icon
         name={ChevronLeftSolid}
-        className={classnames('pages-item-icon', {
+        className={classnames('pages-icon', {
           pagesItemIconDisabled: currentPage === 1,
         })}
         onClick={onPrevious}
@@ -131,7 +141,7 @@ const Pages = ({
       })}
       <Icon
         name={ChevronRightSolid}
-        className={classnames('pages-item-icon', {
+        className={classnames('pages-icon', {
           pagesItemIconDisabled: currentPage === lastPage,
         })}
         onClick={onNext}

diff --git a/components/pagination/src/pagination.module.scss b/components/pagination/src/pagination.module.scss
@@ -27,17 +27,18 @@
   &-item {
     margin-left: 0 !important;
 
-    &-icon {
-      color: color('primary');
-      cursor: pointer;
-
-      &-disabled {
-        cursor: not-allowed;
-      }
-    }
-    &-skipPages {
+    &-skip-pages {
       width: size('3x');
       cursor: pointer;
     }
   }
+
+  &-icon {
+    color: color('primary');
+    cursor: pointer;
+
+    &-disabled {
+      cursor: not-allowed;
+    }
+  }
 }