WIP: 83060c3 added hidePasswordMeter

Author: aizad-deriv

.github/workflows/publish_npm_package.yml

@@ -23,7 +23,7 @@ jobs:
         uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
         with:
           fetch-depth: 0
-          token: ${{ secrets.GITHUB_TOKEN }}
+          token: ${{ secrets.CI_GITHUB_TOKEN }}
       - name: Setup Node.js
         uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8
         with:

CHANGELOG.md

@@ -0,0 +1,152 @@
+## [1.1.1](https://github.com/deriv-com/ui/compare/v1.1.0...v1.1.1) (2024-01-31)
+
+
+### ⚙️ 	 Continuous Integrations
+
+* updated commit subjects in release config ([2209665](https://github.com/deriv-com/ui/commit/220966588367d339846824736621c7bcacd1338b))
+* updated commit subjects in release config ([68059b4](https://github.com/deriv-com/ui/commit/68059b46d18a6ee200bc67d902ce36b596e8c311))
+
+# [1.1.0](https://github.com/deriv-com/ui/compare/v1.0.1...v1.1.0) (2024-01-31)
+
+
+### 📦 	 Code Refactoring
+
+* Added dropdown component ([82dd5af](https://github.com/deriv-com/ui/commit/82dd5af841f0305f3c47efb88f308af9619dd537))
+* added storybook for dropdown ([9f63186](https://github.com/deriv-com/ui/commit/9f63186c017a732cd0fcd8a77068801df4c988b8))
+* added storybook for dropdown ([3ddfcd7](https://github.com/deriv-com/ui/commit/3ddfcd78d1b3f30f81e4b2c11b9b4886b8638dd2))
+* To remove exported types ([bc36051](https://github.com/deriv-com/ui/commit/bc36051952fc64b60ef60e67535f3736d709260f))
+* To remove exported types ([61e32b7](https://github.com/deriv-com/ui/commit/61e32b7f67a679d8b953b5ffac8308b3ea2fadd3))
+* To remove exported types ([75b99bc](https://github.com/deriv-com/ui/commit/75b99bcbe970e2709fce03d0093fed8d1f7d7f95))
+
+## [1.0.1](https://github.com/deriv-com/ui/compare/v1.0.0...v1.0.1) (2024-01-30)
+
+
+### ♻️ 	 Chores
+
+* added missed new line ([889a1ea](https://github.com/deriv-com/ui/commit/889a1eac78778364e407d2dd8ea52428cdfd1297))
+
+
+### 🛠 	 Builds
+
+* added repository info to package.json ([7a357ca](https://github.com/deriv-com/ui/commit/7a357ca12dd27ce5493a14c80ce0d82fc59623d3))
+* added repository info to package.json ([63e051c](https://github.com/deriv-com/ui/commit/63e051cc84633f0baea071933492a2d473e82d12))
+
+# 1.0.0 (2024-01-30)
+
+
+### ♻️ 	 Chores
+
+* 📄 added JSDoc ([a92d62c](https://github.com/deriv-com/ui/commit/a92d62c21228e8aa4d3a4530200e80beae5d3229))
+* 📄 added storybook ([cc3a12d](https://github.com/deriv-com/ui/commit/cc3a12dfe0ca1163ace96ff4a711e130adec52fd))
+* 🧹 some cleanup ([ef456cf](https://github.com/deriv-com/ui/commit/ef456cf0becf063d3bf6aa6d8be669bf727b8d35))
+* 🧹some more clean-up ([6272d25](https://github.com/deriv-com/ui/commit/6272d256b1af3a21811bd7275da48454df5272ce))
+* added BEM approach for variant classnames ([cabefe4](https://github.com/deriv-com/ui/commit/cabefe4302cefcc027f829efb6ea25d42414f263))
+* added citation for usehooks ([75491c3](https://github.com/deriv-com/ui/commit/75491c3db7227ab648064f24f31ec85b9c6a0064))
+* added classname prop to components ([701959f](https://github.com/deriv-com/ui/commit/701959f35be3c85238e5e519a8fbc6d717f752d2))
+* added helperMessage ([3bd81be](https://github.com/deriv-com/ui/commit/3bd81bea463d3ce0120589bf7ff91db5910a8e84))
+* added storybook ([c0f0460](https://github.com/deriv-com/ui/commit/c0f0460ae7550861ee629ea18598eb020a130717))
+* added type to classNameVariants ([9a6379c](https://github.com/deriv-com/ui/commit/9a6379cc8048e9b5d624475b77c663bab6d96889))
+* added type to classNameVariants ([79c769c](https://github.com/deriv-com/ui/commit/79c769ccb6b01d144acde539b14d15dc42f3e105))
+* added variants to input ([ba8ab60](https://github.com/deriv-com/ui/commit/ba8ab60f9673417bd3bbd46e035e6dab259cabdf))
+* appended derivs to classnames ([083dad9](https://github.com/deriv-com/ui/commit/083dad9b17e95e195afd24227832bad424bb173b))
+* get latest changes ([eac799f](https://github.com/deriv-com/ui/commit/eac799f9da7cd54c3135c4f1a0c2d524fd8f860c))
+* minor changes to story ([349774c](https://github.com/deriv-com/ui/commit/349774cfeedf1581cfc82bd938e4cee3294fd62f))
+* removed useWindowSize hook ([aae8fcb](https://github.com/deriv-com/ui/commit/aae8fcbb014791627f819b8837c1fd5b74dc25ac))
+* temp story ([92d458f](https://github.com/deriv-com/ui/commit/92d458f09026a8519b1d4ad1736676ef1a93e9f7))
+* updated stylings to have variants and fix label animation ([4453a1c](https://github.com/deriv-com/ui/commit/4453a1c7c8defd3db460431e423bef9a32e6b4cb))
+
+
+### ⚙️ 	 Continuous Integrations
+
+* add publish workflow ([d9bbe55](https://github.com/deriv-com/ui/commit/d9bbe55a4ff0415fb64b93b6e48f5a5043f356c7))
+* add storybook gh workflow ([73defbe](https://github.com/deriv-com/ui/commit/73defbec57ece146f056af5183683c9850632efe))
+* build and test workflow ([fddbb71](https://github.com/deriv-com/ui/commit/fddbb716d53b072febbf04c6b07f95f69dd1d31f))
+* change the import to require as the module is cjs ([9c67755](https://github.com/deriv-com/ui/commit/9c67755270786d6479741ae065b16a2d59548a95))
+* custom access token ([1204b6e](https://github.com/deriv-com/ui/commit/1204b6e1233e0f5708689edd8cb8c31b945cd2d0))
+* fix the md ([1e2177e](https://github.com/deriv-com/ui/commit/1e2177e10c64bd2cabe389c527a9e26d1cf66c5f))
+* remove the if condition as its skipping the job ([e61552e](https://github.com/deriv-com/ui/commit/e61552e7532ebb41b605e62d38bde87db0cea423))
+* trigger on push to main ([435ea18](https://github.com/deriv-com/ui/commit/435ea185f5dd4bc1ec00a9e2d897bb914723dda5))
+* update project repo path ([fca1c7e](https://github.com/deriv-com/ui/commit/fca1c7ee16df4aa94533cd042439f99d0adc3d4e))
+* update the modules ext to cjs ([9caf31a](https://github.com/deriv-com/ui/commit/9caf31a9b3a12e3f91cdb3df017f6e806f344152))
+* update the transformer path ([56ecd6e](https://github.com/deriv-com/ui/commit/56ecd6e88380bd548e02d127ca5a9ecc791ea778))
+* update transformer module name ([79c0184](https://github.com/deriv-com/ui/commit/79c0184d3739dfb826495870b86aab2cc0f96a96))
+* update workflow name ([a886592](https://github.com/deriv-com/ui/commit/a8865923bdedff57bba69d6fafa798466a9a9196))
+* use es6 export syntax ([cb9dc9b](https://github.com/deriv-com/ui/commit/cb9dc9b07282dd7d0119a186b1a75ea9240c814e))
+
+
+### ✨ 	 Features
+
+* :sparkles: added layout component ([ca8cb69](https://github.com/deriv-com/ui/commit/ca8cb69025196f660f63aaf29389bdb47b4050d3))
+* :sparkles: added screen size related hooks ([2331c5f](https://github.com/deriv-com/ui/commit/2331c5ffc6404d040648820f9a6fb27f136e70fb))
+* :sparkles: added useDevice and useMediaQuery Hooks ([003c051](https://github.com/deriv-com/ui/commit/003c0512e8c8128887f0d08d91d901c9b04cc223))
+* add changelog file ([122655b](https://github.com/deriv-com/ui/commit/122655b6e5221b2b51c5df7c8c4aae0b0fa8b0db))
+* add default value to tab ([7487bf9](https://github.com/deriv-com/ui/commit/7487bf93dee5cc23da24f7557b13cd433066a6d4))
+* add semantic release config and utils ([4b85e2f](https://github.com/deriv-com/ui/commit/4b85e2f47f7e73cc4616652f6dfb1e85ed6c8234))
+* added classname prop to components ([4207629](https://github.com/deriv-com/ui/commit/42076295c26b71e16b3deb1663f3e76e9ad8dc77))
+* added Loader, Button and Text components ([93daf06](https://github.com/deriv-com/ui/commit/93daf068f3bbd6d033eb5d5813dba702da5c8b4f))
+* added new Input component ([29db1bc](https://github.com/deriv-com/ui/commit/29db1bc22d4e2c2cb6d7716c61011e1b27f43a75))
+* added tab component ([7bfbabb](https://github.com/deriv-com/ui/commit/7bfbabbc39156792279bbe4db6015ae346632735))
+* added tab component ([0493df2](https://github.com/deriv-com/ui/commit/0493df2e751963447fd32267c7cf658155d998de))
+* added tooltip component ([14aeeef](https://github.com/deriv-com/ui/commit/14aeeef77e5132d3214343fd20f2fefa4aa36361))
+* make active tab optional ([a5c7182](https://github.com/deriv-com/ui/commit/a5c71827c01db2479c20e9d2dc4e9d743017c785))
+
+
+### 🐛 	 Bug Fixes
+
+* :hammer: fixed controls for props in story ([51d53c8](https://github.com/deriv-com/ui/commit/51d53c85ae56123a9afb0ad9fa238bb71dc4ede2))
+* add deriv prefix infront of classname ([892c9da](https://github.com/deriv-com/ui/commit/892c9da9153dd3e004dbc9f0b0f3e7dd9f9dec7a))
+* add onChange to Tab component ([a56b6ee](https://github.com/deriv-com/ui/commit/a56b6ee8e23f5db3821caeac0f7b9f07c39d70c3))
+* added deriv prefixes for position classes and remove FC from component ([ddc9ef1](https://github.com/deriv-com/ui/commit/ddc9ef1b01f3a49619d2ad587dba360a427880fa))
+* added missing EOF new line ([f2f78e9](https://github.com/deriv-com/ui/commit/f2f78e96d4de96a1b004bac1b6484fb2d01cae73))
+* added useEffect for activeTab in Tabs component ([7e2099c](https://github.com/deriv-com/ui/commit/7e2099c3d463500e7da3cbd1d00132afe09bbd3d))
+* added useEffect for activeTab in Tabs component ([6c80b9f](https://github.com/deriv-com/ui/commit/6c80b9f2b43af01430f3aa78850ea6b98c0236c2))
+* added variants ([d21a9bf](https://github.com/deriv-com/ui/commit/d21a9bf9bcb1f33a1a2808a323966a857d9d2a12))
+* corrected the version ([d25d953](https://github.com/deriv-com/ui/commit/d25d953f058f8787cb7b0fb69a1785cb9a4ab0e5))
+* exclude vite-plugin-lib-inject-css from storybook build ([697d507](https://github.com/deriv-com/ui/commit/697d50789e9478baf20313d5d25baed80d442253))
+* exclude vite-plugin-lib-inject-css from storybook build ([332d1d6](https://github.com/deriv-com/ui/commit/332d1d65bfa4be4285f4df5ddcb38fe7aca26fa9))
+* fixed font issue ([240ab52](https://github.com/deriv-com/ui/commit/240ab52855ca70adf6850c54122c1692e032ec15))
+* fixed font issue ([ef1e210](https://github.com/deriv-com/ui/commit/ef1e2101bd11e3cfac64821f01187a72b3e1988d))
+* minor styling issues ([e16e25a](https://github.com/deriv-com/ui/commit/e16e25ad1dd35fb6602164c863ab026c1d4202b0))
+* removed duplicated import statement ([0b8496b](https://github.com/deriv-com/ui/commit/0b8496b129261b2464bc9d50ef155bbba4bf4fe0))
+* removed duplicated import statement ([43d48a3](https://github.com/deriv-com/ui/commit/43d48a36171928236005620d0fc6668551d28ccf))
+* rename prop based on suggestion ([cbadf3f](https://github.com/deriv-com/ui/commit/cbadf3f95c481084d0d0538f4a5bbb801f26b50f))
+* resolve comments ([fde0bda](https://github.com/deriv-com/ui/commit/fde0bda3ba1e77e78af0da3963f121b6680a07a5))
+
+
+### 📦 	 Code Refactoring
+
+* added new props for styling ([d80b0e0](https://github.com/deriv-com/ui/commit/d80b0e05a1c2903dca7ad3971c8745ea4a7b12d1))
+* Added story for toggle switch component ([3ed47fc](https://github.com/deriv-com/ui/commit/3ed47fc783605e6141eaed35e154a97a75f94029))
+* Added toggle switch component ([e0ca8c0](https://github.com/deriv-com/ui/commit/e0ca8c0e37ca85eab929f82667fc6bdf1e818f4a))
+* made tab panel optional ([a806974](https://github.com/deriv-com/ui/commit/a806974d5b5f1ea734f62d3dc2f2e23baf5e4803))
+* refactored Tabs and replace classnames with clsx ([6f5c658](https://github.com/deriv-com/ui/commit/6f5c65878a84ca0483ff2452e6260707626f95fa))
+* removed react.FC type ([ba3aed1](https://github.com/deriv-com/ui/commit/ba3aed1391a073a2a8a68b9f9bacb17523dcf255))
+* renamed classname prefix ([42836de](https://github.com/deriv-com/ui/commit/42836de36f2fa8b44f094af237bc216cb0fdd828))
+* renamed classname prefix from wallet to deriv ([b946115](https://github.com/deriv-com/ui/commit/b946115db6a8dea3db16585597388d9a39e41b10))
+* renamed classname prefix from wallet to deriv ([f96f3d7](https://github.com/deriv-com/ui/commit/f96f3d78ed5ce1f46cf7c40d8c50678dc0db8f25))
+* replaced tab index number with tab label ([fe44da2](https://github.com/deriv-com/ui/commit/fe44da2099f54a949c778aae5bcd261d14fda7bb))
+
+
+### 🗑 	 Reverts
+
+* revert back classname prop for tab component ([b147ab0](https://github.com/deriv-com/ui/commit/b147ab0d980af762377f84c7f9cd2c45212435ac))
+
+
+### 🛠 	 Builds
+
+* add parserOptions to eslint ([9821f22](https://github.com/deriv-com/ui/commit/9821f222d8fef230f269c2226e2fe12ed4c238cd))
+* add rollup override ([4df87b9](https://github.com/deriv-com/ui/commit/4df87b94d2dcfac06dd47d3edca254a233c37d1f))
+* add rollup to optional deps ([7c6fda2](https://github.com/deriv-com/ui/commit/7c6fda2a9c21d65c77ce08a246d3b23eab764e9c))
+* add semantic release deps ([b3f786e](https://github.com/deriv-com/ui/commit/b3f786ebfab45c2b128f08a93715ed97d88a24a1))
+* bump to verison 0.0.1-beta.8 ([0546768](https://github.com/deriv-com/ui/commit/0546768d868305f2ecc4f0f0513dbcc068fa4040))
+* bump to version 0.0.0-beta.9 ([fc3906c](https://github.com/deriv-com/ui/commit/fc3906ccc35dc61bb7c6070412a00e574f4898c6))
+* bump to version 0.0.0-beta.9 ([f5f6092](https://github.com/deriv-com/ui/commit/f5f60929ea4051809848d4a72e020bc8c5b11d22))
+* increased the package version ([ea3a972](https://github.com/deriv-com/ui/commit/ea3a972421dc8ea5be623943dc39e022ac9243d8))
+* removed dist from import path ([a47afad](https://github.com/deriv-com/ui/commit/a47afad57bdc4807f3386f509d1c1d7af662cf71))
+* removed dist from import path ([ba79d62](https://github.com/deriv-com/ui/commit/ba79d6220be11c0939a3a89e568545ce6340036b))
+* updated package name and readme ([c5efcf8](https://github.com/deriv-com/ui/commit/c5efcf8c150a9029a2842be7c87baadaebd0a1c2))
+* updated package version ([f37f46e](https://github.com/deriv-com/ui/commit/f37f46eb3e16ab19f5002da5a0618679dd56d251))
+* updated package version ([d975697](https://github.com/deriv-com/ui/commit/d975697114a7aa712ee12f7c50c3807e0873deb8))
+* updated version ([89981d5](https://github.com/deriv-com/ui/commit/89981d505caec19434cdbf1717b5bbf9ffefa20a))
+* updated version ([831593a](https://github.com/deriv-com/ui/commit/831593a01289aa95b7a5aaab23bc98bd94d57f4b))
+* use module exports for cjs file ([8ccfc17](https://github.com/deriv-com/ui/commit/8ccfc17e3f4b3ed6720b49c8e1ef3c657f9bdfa2))

lib/components/Dropdown/Dropdown.scss

@@ -0,0 +1,145 @@
+.deriv-dropdown {
+    width: 100%;
+    position: relative;
+    cursor: pointer;
+
+    &--disabled {
+        pointer-events: none;
+
+        & label {
+            color: var(--system-light-5-active-background, #999);
+        }
+    }
+
+    &__button {
+        all: unset;
+        right: 1.6rem;
+        transform: rotate(0);
+        transform-origin: 50% 45%;
+        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+
+        &--active {
+            transform: rotate(180deg);
+        }
+    }
+    &__content {
+        width: 100%;
+        background: var(--system-light-8-primary-background, #fff);
+        display: flex;
+        align-items: center;
+
+        .deriv-textfield__field {
+            cursor: pointer;
+        }
+    }
+
+    &__field {
+        position: absolute;
+        inset: 0;
+        min-width: 0; /* this is required to reset input's default width */
+        padding-left: 2rem;
+        display: flex;
+        flex-grow: 1;
+        font-family: inherit;
+        outline: 0;
+        font-size: 1.4rem;
+        background-color: transparent;
+        color: var(--system-light-2-general-text, #333);
+        transition: border-color 0.2s;
+        cursor: unset;
+        user-select: none;
+        &::selection {
+            background-color: transparent;
+        }
+
+        &::placeholder {
+            color: transparent;
+        }
+    }
+
+    &__field:placeholder-shown ~ &__label {
+        font-size: 1.4rem;
+        cursor: text;
+        top: 30%;
+        padding: 0;
+    }
+
+    &__field:placeholder-shown ~ &__label--with-icon {
+        left: 4.4rem;
+    }
+
+    label,
+    &__field:focus ~ &__label {
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 16px;
+        display: flex;
+        align-items: center;
+        pointer-events: none;
+        text-transform: capitalize;
+        transition: all 0.15s ease-out;
+        padding: 0;
+    }
+
+    &__field:focus ~ &__label {
+        color: var(--brand-blue, #85acb0);
+    }
+
+    &__items {
+        position: absolute;
+        top: 2.7rem;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        z-index: 2;
+        border-radius: 0.4rem;
+        background: var(--system-light-8-primary-background, #fff);
+        box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
+        overflow-y: auto;
+
+        & > :first-child {
+            border-radius: 0.4rem 0.4rem 0 0;
+        }
+
+        & > :last-child {
+            border-radius: 0 0 0.4rem 0.4rem;
+        }
+
+        &--sm {
+            max-height: 22rem;
+        }
+
+        &--md {
+            max-height: 42rem;
+        }
+
+        &--lg {
+            max-height: 66rem;
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        left: 1.6rem;
+        width: 1.6rem;
+        height: 1.6rem;
+    }
+
+    &__item {
+        padding: 10px 16px;
+        width: 100%;
+        z-index: 2;
+
+        &:hover:not(&--active) {
+            cursor: pointer;
+            background: var(--system-light-6-hover-background, #e6e9e9);
+        }
+
+        &--active {
+            background: var(--system-light-5-active-background, #d6dadb);
+        }
+    }
+}