@itcase/ui 1.1.0 → 1.1.2

package/dist/css/components/{Fader/Fader.css → Overlay/Overlay.css}

@@ -1,26 +1,26 @@
-.fader {
+.overlay {
   width: 100%;
   height: 100%;
-  background: var(--fader-fill);
+  background: var(--overlay-fill);
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
-  backdrop-filter: blur(var(--fader-blur, 10px));
+  backdrop-filter: blur(var(--overlay-blur, 10px));
 }
-.fader {
+.overlay {
   &&_state {
     &_visible {
       position: fixed;
       visibility: visible !important;
-      animation-name: faderFadeIn;
+      animation-name: overlayFadeIn;
     }
     &_hidden {
-      animation-name: faderFaderOut;
+      animation-name: overlayFaderOut;
     }
   }
 }
-@keyframes faderFadeIn {
+@keyframes overlayFadeIn {
   from {
     opacity: 0%;
   }
@@ -28,7 +28,7 @@
     opacity: 100%;
   }
 }
-@keyframes faderFaderOut {
+@keyframes overlayFaderOut {
   from {
     opacity: 100%;
   }
@@ -36,8 +36,8 @@
     opacity: 0%;
   }
 }
-.fader {
+.overlay {
   &&_type_click {
-    opacity: 0;
+    opacity: 0%;
   }
 }

package/dist/css/components/{RadioButton/RadioButton.css → Radio/Radio.css}

@@ -1,11 +1,11 @@
-.radio-button {
+.radio {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto auto;
   column-gap: 4px;
   &:hover {
     ^&__state {
-      border-color: var(--radio-button-state-border-hover);
+      border-color: var(--radio-state-border-hover);
     }
   }
   &__item {
@@ -32,7 +32,7 @@
       z-index: 3;
       cursor: pointer;
       appearance: none;
-      &:disabled + .radio-button__state {
+      &:disabled + .radio__state {
         border-color: transparent !important;
       }
     }
@@ -42,7 +42,7 @@
       z-index: 1;
       &_shape {
         &_rounded {
-          border-radius: var(--radio-button-shape-rounded, 4px);
+          border-radius: var(--radio-shape-rounded, 4px);
           position: relative;
           overflow: hidden;
         }
@@ -66,11 +66,11 @@
     }
   }
 }
-.radio-button {
+.radio {
   &_shape {
     &_rounded {
       ^^&__item {
-        border-radius: var(--radio-button-item-shape-rounded, 4px);
+        border-radius: var(--radio-item-shape-rounded, 4px);
         position: relative;
         overflow: hidden;
       }
@@ -84,20 +84,21 @@
     }
   }
 }
-.radio-button {
+.radio {
   &_checkmark {
     &_fill {
       @each $type in accent, primary, secondary, tertiary, surface, success, error {
         &_$(type) {
           &-item {
-            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
+              disabled, hover {
               &-$(color) {
                 & ^^^^^&__input {
                   &:checked {
                     & ~ ^^^^^^^&__state {
                       &-checkmark {
-                        display: block;
                         background: var(--color-$(type)-item-$(color));
+                        display: block;
                       }
                     }
                   }
@@ -111,5 +112,5 @@
   }
 }
 :root {
-  --radio-button-state-border-hover: var(--color-surface-border-tertiary);
+  --radio-state-border-hover: var(--color-surface-border-tertiary);
 }

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -0,0 +1,6 @@
+.scrolldrag {
+  white-space: nowrap;
+  padding: 0 5px;
+  display: inline-block;
+  overflow: scroll hidden;
+}

package/dist/css/components/Title/Title.css

@@ -93,3 +93,12 @@
     }
   }
 }
+.title {
+  &.text-style {
+    &_italic {
+      ^^&__wrapper {
+        font-style: italic;
+      }
+    }
+  }
+}

package/dist/stories/ModalConfirm.stories.js

@@ -15,7 +15,7 @@ export default {
 export const Default = {
   args: {
     isOpen: true,
-    isFader: true,
+    isOverlay: true,
     isOutsideClose: true,
     shape: 'rounded',
     elevation: 8,

package/dist/stories/ModalDefault.stories.js

@@ -13,7 +13,7 @@ export default {
 export const Default = {
   args: {
     isOpen: true,
-    isFader: true,
+    isOverlay: true,
     isOutsideClose: true,
     shape: 'rounded',
     elevation: 8,

package/dist/stories/{RadioButton.stories.js → Radio.stories.js}

@@ -1,13 +1,13 @@
-import { RadioButton, radioButtonConfig } from '@itcase/ui/components/RadioButton'
-import radioButtonState from 'src/components/RadioButton/state.json'
+import { Radio, radioConfig } from '@itcase/ui/components/Radio'
+import radioState from 'src/components/Radio/state.json'
 
 import { shapeProps, textColorProps, textSizeProps } from '@itcase/ui/constants'
 
-radioButtonConfig.setState(radioButtonState)
+radioConfig.setState(radioState)
 
 export default {
-  title: 'Atoms / RadioButton',
-  component: RadioButton,
+  title: 'Atoms / Radio',
+  component: Radio,
   argTypes: {
     advancedProps: { control: 'boolean' },
     className: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -58,6 +58,7 @@
     "react-otp-input": "^3.1.1",
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
+    "react-scroll-ondrag": "^3.0.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "swiper": "^11.0.7",