npm - indicator-ui - Versions diffs - 0.0.15 → 0.0.17 - Mend

indicator-ui 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/dist/scss/styles/mixins/modify-svg.scss CHANGED Viewed

@@ -1,4 +1,4 @@
-@mixin modify-svg($stroke: null, $fill: null) {
+@mixin modify-svg($stroke: null, $fill: null, $stroke-width: null) {
   & {
     svg {
       * {
@@ -9,6 +9,10 @@
         @if ($fill != null) {
           fill: $fill;
         }
+        @if ($stroke-width != null) {
+          stroke-width: $stroke-width;
+        }
       }
       & {

package/dist/scss/test/global.scss CHANGED Viewed

@@ -1,3 +1,5 @@
+@import 'colors.css';
 * {
   margin: 0;
   padding: 0;

package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 @use '../../../../styles' as *;
-@mixin baseButton() {
+@mixin base-button() {
   @include modify-flex(row, center, center);
   .icon {

package/dist/scss/ui/Buttons/styles/mixins/button.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 @mixin insertButton() {
   .button {
-    @include baseButton.baseButton();
+    @include baseButton.base-button();
     &.small {
       @include properties.smallButton;

package/dist/scss/ui/Buttons/styles/mixins/properties/large.scss CHANGED Viewed

@@ -15,6 +15,6 @@
   .text {
     padding: 0 6px;
-    @include fnt-flex($size: 14, $line-height: 20, $weight: 500);
+    @include fnt-flex($size: 14, $line-height: 20);
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/link-black.scss CHANGED Viewed

@@ -9,8 +9,8 @@
   }
   .text {
-    color: var(--gray-700);
     padding: 0 !important;
+    @include fnt-flex($weight: 400, $color: var(--gray-700));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/link-color.scss CHANGED Viewed

@@ -9,8 +9,8 @@
   }
   .text {
-    color: var(--blue-dark-500);
     padding: 0 !important;
+    @include fnt-flex($weight: 400, $color: var(--blue-dark-500));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss CHANGED Viewed

@@ -9,8 +9,8 @@
   }
   .text {
-    color: var(--gray-400);
     padding: 0 !important;
+    @include fnt-flex($weight: 400, $color: var(--gray-400));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/medium.scss CHANGED Viewed

@@ -15,6 +15,6 @@
   .text {
     padding: 0 8px;
-    @include fnt-flex($size: 14, $line-height: 20, $weight: 500);
+    @include fnt-flex($size: 14, $line-height: 20);
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss CHANGED Viewed

@@ -10,7 +10,7 @@
   }
   .text {
-    color: var(--base-white);
+    @include fnt-flex($weight: 500, $color: var(--base-white));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss CHANGED Viewed

@@ -10,7 +10,7 @@
   }
   .text {
-    color: var(--blue-dark-500);
+    @include fnt-flex($weight: 500, $color: var(--blue-dark-500));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss CHANGED Viewed

@@ -10,7 +10,7 @@
   }
   .text {
-    color: var(--gray-700);
+    @include fnt-flex($weight: 500, $color: var(--gray-700));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/small.scss CHANGED Viewed

@@ -15,6 +15,6 @@
   .text {
     padding: 0 4px;
-    @include fnt-flex($size: 14, $line-height: 16, $weight: 500);
+    @include fnt-flex($size: 14, $line-height: 16);
   }
 }

package/dist/scss/ui/Buttons/styles/mixins/properties/tab-active.scss CHANGED Viewed

@@ -10,7 +10,7 @@
   }
   .text {
-    color: var(--gray-700);
+    @include fnt-flex($weight: 500, $color: var(--gray-700));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/tab.scss CHANGED Viewed

@@ -10,7 +10,7 @@
   }
   .text {
-    color: var(--gray-500);
+    @include fnt-flex($weight: 500, $color: var(--gray-500));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-color.scss CHANGED Viewed

@@ -11,7 +11,7 @@
   &:hover {
     .text {
-      color: var(--blue-dark-700);
+      @include fnt-flex($weight: 400, $color: var(--blue-dark-700));
     }
     .icon {

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-gray.scss CHANGED Viewed

@@ -7,6 +7,7 @@
   .text {
     color: var(--gray-700);
+    @include fnt-flex($weight: 400, $color: var(--gray-400));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/tertiary-white.scss CHANGED Viewed

@@ -6,7 +6,7 @@
   }
   .text {
-    color: var(--blue-dark-100);
+    @include fnt-flex($weight: 400, $color: var(--blue-dark-100));
   }
   &:hover {

package/dist/scss/ui/Buttons/styles/mixins/properties/ultra.scss CHANGED Viewed

@@ -15,6 +15,6 @@
   .text {
     padding: 0 12px;
-    @include fnt-flex($size: 18, $line-height: 24, $weight: 500);
+    @include fnt-flex($size: 18, $line-height: 24);
   }
 }

package/dist/scss/ui/CheckboxMark/index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @forward "styles";

package/dist/scss/ui/CheckboxMark/styles/index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @forward "mixins";

package/dist/scss/ui/CheckboxMark/styles/mixins/base.scss ADDED Viewed

@@ -0,0 +1,26 @@
+@use '../../../../styles' as *;
+@mixin checkbox-mark-base-hover() {
+  background-color: var(--blue-dark-50);
+  box-shadow: 0 0 0 1px var(--blue-dark-200);
+}
+@mixin checkbox-mark-base() {
+  width: 20px;
+  height: 20px;
+  background-color: var(--base-white);
+  box-shadow: 0 0 0 1px var(--gray-300);
+  cursor: pointer;
+  overflow: hidden;
+  @include centerInsideContent();
+  @include modify-svg($stroke-width: 4) {
+    width: 14px;
+    height: 14px;
+    flex: none;
+  }
+  &:hover {
+    @include checkbox-mark-base-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/checkbox-mark.scss ADDED Viewed

@@ -0,0 +1,92 @@
+@use 'base';
+@use 'properties';
+@mixin checkbox-mark() {
+  .checkboxMark {
+    @include base.checkbox-mark-base();
+    &.checkbox {
+      @include properties.checkbox();
+    }
+    &.radio {
+      @include properties.radio();
+    }
+    &.checked {
+      @include properties.checked();
+    }
+    &.indeterminate {
+      @include properties.indeterminate();
+    }
+    &.error {
+      @include properties.error();
+    }
+    &.disabled {
+      @include properties.disabled();
+    }
+    &.correct {
+      &.checked {
+        @include properties.correct-checked();
+        &.disabled {
+          @include properties.correct-disabled();
+        }
+      }
+    }
+    &.incorrect {
+      &.checked {
+        @include properties.incorrect-checked();
+        &.disabled {
+          @include properties.incorrect-disabled();
+        }
+      }
+    }
+    &.hover {
+      @include base.checkbox-mark-base-hover();
+      &.checked {
+        @include properties.checked-hover();
+      }
+      &.indeterminate {
+        @include properties.indeterminate-hover();
+      }
+      &.error {
+        @include properties.error-hover();
+      }
+      &.disabled {
+        @include properties.disabled-hover();
+      }
+      &.correct {
+        &.checked {
+          @include properties.correct-checked-hover();
+          &.disabled {
+            @include properties.correct-disabled-hover();
+          }
+        }
+      }
+      &.incorrect {
+        &.checked {
+          @include properties.incorrect-checked-hover();
+          &.disabled {
+            @include properties.incorrect-disabled-hover();
+          }
+        }
+      }
+    }
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/index.scss ADDED Viewed

@@ -0,0 +1,3 @@
+@forward "checkbox-mark";
+@forward "properties";
+@forward "base";

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checkbox.scss ADDED Viewed

@@ -0,0 +1,3 @@
+@mixin checkbox() {
+  border-radius: 6px;
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/checked.scss ADDED Viewed

@@ -0,0 +1,20 @@
+@use '../../../../../styles' as *;
+@mixin checked-hover() {
+  box-shadow: 0 0 0 1px var(--blue-dark-400);
+}
+@mixin checked() {
+  background-color: var(--blue-dark-50);
+  box-shadow: 0 0 0 1px var(--blue-dark-200);
+  @include modify-svg($stroke: var(--blue-dark-500));
+  &:after {
+    display: block;
+  }
+  &:hover {
+    @include checked-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/correct.scss ADDED Viewed

@@ -0,0 +1,41 @@
+@use '../../../../../styles' as *;
+@mixin correct-checked-hover() {
+  background-color: var(--blue-dark-600);
+  box-shadow: none;
+}
+@mixin correct-disabled-hover() {
+  background-color: var(--gray-300);
+  box-shadow: none;
+}
+@mixin correct-checked() {
+  background-color: var(--blue-dark-500);
+  box-shadow: none;
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
+  @include modify-svg($stroke: var(--base-white));
+  &:after {
+    display: none;
+  }
+  &:hover {
+    @include correct-checked-hover();
+  }
+}
+@mixin correct-disabled() {
+  background-color: var(--gray-300);
+  box-shadow: none;
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
+  @include modify-svg($stroke: var(--base-white));
+  &:after {
+    display: none;
+  }
+  &:hover {
+    @include correct-disabled-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/disabled.scss ADDED Viewed

@@ -0,0 +1,27 @@
+@use '../../../../../styles' as *;
+@mixin disabled-hover() {
+  background-color: var(--gray-100);
+  box-shadow: 0 0 0 1px var(--gray-300);
+  @include modify-svg($stroke: var(--gray-300));
+  @include fnt-flex($color: var(--gray-300));
+}
+@mixin disabled() {
+  cursor: default;
+  background-color: var(--gray-100);
+  box-shadow: 0 0 0 1px var(--gray-300);
+  &:after {
+    background-color: var(--gray-300);
+  }
+  @include modify-svg($stroke: var(--gray-300));
+  @include fnt-flex($color: var(--gray-300));
+  &:hover {
+    @include disabled-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/error.scss ADDED Viewed

@@ -0,0 +1,22 @@
+@use '../../../../../styles' as *;
+@mixin error-hover() {
+  background-color: var(--error-50);
+  box-shadow: 0 0 0 1px var(--error-400);
+}
+@mixin error() {
+  background-color: var(--error-50);
+  box-shadow: 0 0 0 1px var(--error-200);
+  @include modify-svg($stroke: var(--error-500));
+  @include fnt-flex($color: var(--error-500));
+  &:after {
+    background-color: var(--error-500);
+  }
+  &:hover {
+    @include error-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/incorrect.scss ADDED Viewed

@@ -0,0 +1,41 @@
+@use '../../../../../styles' as *;
+@mixin incorrect-checked-hover() {
+  background-color: var(--error-600);
+  box-shadow: none;
+}
+@mixin incorrect-disabled-hover() {
+  background-color: var(--gray-300);
+  box-shadow: none;
+}
+@mixin incorrect-checked() {
+  background-color: var(--error-500);
+  box-shadow: none;
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
+  @include modify-svg($stroke: var(--base-white));
+  &:after {
+    display: none;
+  }
+  &:hover {
+    @include incorrect-checked-hover();
+  }
+}
+@mixin incorrect-disabled() {
+  background-color: var(--gray-300);
+  box-shadow: none;
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--base-white));
+  @include modify-svg($stroke: var(--base-white));
+  &:after {
+    display: none;
+  }
+  &:hover {
+    @include incorrect-disabled-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/indeterminate.scss ADDED Viewed

@@ -0,0 +1,17 @@
+@use '../../../../../styles' as *;
+@mixin indeterminate-hover() {
+  box-shadow: 0 0 0 1px var(--blue-dark-400);
+}
+@mixin indeterminate() {
+  background-color: var(--blue-dark-50);
+  box-shadow: 0 0 0 1px var(--blue-dark-200);
+  @include modify-svg($stroke: var(--blue-dark-500));
+  @include fnt($size: 14, $line-height: 14, $weight: 500, $color: var(--blue-dark-500));
+  &:hover {
+    @include indeterminate-hover();
+  }
+}

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/index.scss ADDED Viewed

@@ -0,0 +1,8 @@
+@forward "checkbox";
+@forward "radio";
+@forward "checked";
+@forward "incorrect";
+@forward "correct";
+@forward "disabled";
+@forward "error";
+@forward "indeterminate";

package/dist/scss/ui/CheckboxMark/styles/mixins/properties/radio.scss ADDED Viewed

@@ -0,0 +1,15 @@
+@use '../../../../../styles' as *;
+@mixin radio() {
+  border-radius: 50%;
+  &:after {
+    display: none;
+    flex: none;
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--blue-dark-500);
+  }
+}

package/dist/scss/ui/MicroButton/styles/mixins/base-button.scss CHANGED Viewed

@@ -1,6 +1,6 @@
 @use '../../../../styles' as *;
-@mixin base-button() {
+@mixin base-micro-button() {
   width: fit-content;
   height: fit-content;
   @include modify-flex(row, center, center);

package/dist/scss/ui/MicroButton/styles/mixins/index.scss CHANGED Viewed

@@ -1 +1,2 @@
-@forward "micro-button";
+@forward "micro-button";
+@forward "base-button";

package/dist/scss/ui/MicroButton/styles/mixins/micro-button.scss CHANGED Viewed

@@ -3,7 +3,7 @@
 @mixin micro-button() {
   .button {
-    @include base-button.base-button();
+    @include base-button.base-micro-button();
     &.light {
       @include properties.light();

package/dist/scss/ui/index.scss CHANGED Viewed

@@ -1,2 +1,3 @@
 @forward "Buttons";
-@forward "MicroButton";
+@forward "MicroButton";
+@forward "CheckboxMark";

package/dist/types/src/test/pages/CheckboxMarkPage.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function CheckboxMarkPage(): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/test/pages/CheckboxPage.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare function CheckboxPage(): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/test/pages/index.d.ts CHANGED Viewed

@@ -3,3 +3,6 @@ export * from './HomePage';
 export * from './ButtonsPage';
 export * from './MicroButtonsPage';
 export * from './FieldsPage';
+export * from './CheckboxMarkPage';
+export * from './FormBuilderPage';
+export * from './CheckboxPage';

package/dist/types/src/ui/Checkbox/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './ui';
2	+ export * from './types';

package/dist/types/src/ui/Checkbox/styles/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as CheckboxStyle } from './Checkbox.module.scss';

package/dist/types/src/ui/Checkbox/types/CheckboxTypes.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import React from "react";
+import { CheckboxMarkIndeterminateType, CheckboxMarkRelationType, CheckboxMarkTypeType } from "../../CheckboxMark";
+export type CheckboxClassNameType = {
+    checkbox?: string;
+    disabled?: string;
+    error?: string;
+    textBlock?: string;
+    text?: string;
+    indeterminate?: string;
+    supportingText?: string;
+    widthFill?: string;
+    heightFill?: string;
+    widthHug?: string;
+    heightHug?: string;
+};
+export type CheckboxPropsType = {
+    checked?: boolean;
+    type?: CheckboxMarkTypeType;
+    subtype?: CheckboxMarkRelationType;
+    indeterminate?: CheckboxMarkIndeterminateType;
+    error?: boolean;
+    disabled?: boolean;
+    text?: React.ReactNode;
+    onClick?: () => void;
+    supportingText?: React.ReactNode;
+    width?: 'fill' | 'hug';
+    height?: 'fill' | 'hug';
+    /**
+     * Добавочные имена стилей. ```className="main-style addition-style-1 addition-style-2..."```
+     * */
+    additionStyle?: string | string[];
+    className?: CheckboxClassNameType;
+};

package/dist/types/src/ui/Checkbox/types/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './CheckboxTypes';

package/dist/types/src/ui/Checkbox/ui/Checkbox.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { CheckboxPropsType } from "../types";
2	+ export declare function Checkbox({ checked, type, error, subtype, disabled, text, supportingText, indeterminate, onClick, width, height, className, }: CheckboxPropsType): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/ui/Checkbox/ui/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./Checkbox";

package/dist/types/src/ui/CheckboxMark/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './ui';
2	+ export * from './types';

package/dist/types/src/ui/CheckboxMark/styles/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as CheckboxMarkStyle } from './CheckboxMark.module.scss';