@alfalab/core-components-steps 1.6.2 → 1.7.0

package/moderncssm/components/step/index.module.css

@@ -0,0 +1,170 @@
+/* */
+
+:root {
+    --steps-option-svg-color: var(--color-light-status-positive);
+    --steps-dash-border: 2px solid var(--color-light-status-positive);
+}
+
+.step {
+    display: flex;
+    outline: none
+}
+
+.step:not(.vertical) {
+        align-items: center;
+    }
+
+.step.interactive:not(.disabled):hover {
+    cursor: pointer;
+}
+
+.step.disabled:hover .text {
+        background: unset;
+    }
+
+.step.disabled .indicator {
+        cursor: unset;
+    }
+
+.indicator {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-4)
+}
+
+.indicator.vertical {
+        flex-direction: column;
+        margin-right: var(--gap-8);
+    }
+
+.option {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-primary);
+    background: var(--color-light-neutral-translucent-300);
+    min-width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-circle)
+}
+
+.option.vertical {
+        margin-top: var(--gap-8);
+    }
+
+.dash {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-neutral-translucent-300);
+    margin-right: var(--gap-8)
+}
+
+.dash.size-16 {
+        min-width: 16px;
+    }
+
+.dash.size-8 {
+        min-width: 8px;
+    }
+
+.dash.completed {
+        border-top: var(--steps-dash-border);
+    }
+
+.dash.vertical {
+        min-width: unset;
+        min-height: 24px;
+        margin-right: 0;
+        margin-top: var(--gap-8);
+        border-left: 2px solid var(--color-light-neutral-translucent-300);
+        border-top: none
+    }
+
+.dash.vertical.size-16 {
+            min-height: 16px;
+        }
+
+.dash.vertical.size-8 {
+            min-height: 8px;
+        }
+
+.dash.completed.vertical {
+        border-left: var(--steps-dash-border);
+    }
+
+.text {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    transition: background 0.2s;
+    padding: var(--gap-8);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-8);
+    height: min-content
+}
+
+.text.interactive:not(.disabled):hover {
+            background: var(--color-light-transparent-default-hover);
+        }
+
+.text.interactive:not(.disabled):active {
+            background: var(--color-light-transparent-default-press);
+        }
+
+.focused {
+    outline: var(--gap-2) solid var(--focus-color);
+    outline-offset: var(--gap-2);
+}
+
+.selected .text {
+        color: var(--color-light-text-primary);
+    }
+
+.selected .option {
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-neutral-translucent-1300);
+    }
+
+.checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius-circle);
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-neutral-translucent-300);
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--border-radius-circle);
+    background: var(--color-light-neutral-translucent-300);
+}
+
+.selected .checkbox {
+    border: 2px solid var(--color-light-neutral-translucent-1300)
+}
+
+.selected .checkbox .dot {
+        background: var(--color-light-neutral-translucent-1300);
+    }
+
+.option:not(.error).unordered {
+    background: unset;
+}
+
+.completedIndicator > [class*='positive'] {
+    color: var(--steps-option-svg-color);
+    background-color: var(--steps-option-svg-color);
+}
+
+.fullWidth {
+    width: 100%;
+}

package/moderncssm/components/step-indicator/Component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BadgeProps } from "@alfalab/core-components-badge";
+type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
+declare const StepIndicator: React.FC<StepIndicatorProps>;
+export { StepIndicatorProps, StepIndicator };

package/moderncssm/components/step-indicator/Component.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import cn from 'classnames';
+import { Badge } from '@alfalab/core-components-badge/moderncssm';
+import styles from './index.module.css';
+
+const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
+
+export { StepIndicator };

package/moderncssm/components/step-indicator/index.d.ts

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

package/moderncssm/components/step-indicator/index.js

@@ -0,0 +1 @@
+export { StepIndicator } from './Component.js';

package/moderncssm/components/step-indicator/index.module.css

@@ -0,0 +1,3 @@
+.component.component {
+    padding: 0;
+}

package/moderncssm/index.d.ts

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

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { Steps } from './Component.js';

package/moderncssm/index.module.css

@@ -0,0 +1,12 @@
+/* */
+
+.component {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+
+.component.vertical {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-steps",
-    "version": "1.6.2",
+    "version": "1.7.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,10 +14,12 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.5.2",
+        "@alfalab/core-components-badge": "^5.6.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
-    }
+    },
+    "themesVersion": "13.1.0",
+    "varsVersion": "9.12.0"
 }

package/src/components/step/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 :root {
     --steps-option-svg-color: var(--color-light-status-positive);
@@ -34,11 +34,11 @@
     cursor: pointer;
     display: flex;
     align-items: center;
-    margin-right: var(--gap-2xs);
+    margin-right: var(--gap-4);
 
     &.vertical {
         flex-direction: column;
-        margin-right: var(--gap-xs);
+        margin-right: var(--gap-8);
     }
 }
 
@@ -55,7 +55,7 @@
     border-radius: var(--border-radius-circle);
 
     &.vertical {
-        margin-top: var(--gap-xs);
+        margin-top: var(--gap-8);
     }
 }
 
@@ -63,7 +63,7 @@
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
-    margin-right: var(--gap-xs);
+    margin-right: var(--gap-8);
 
     &.size-16 {
         min-width: 16px;
@@ -81,7 +81,7 @@
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
-        margin-top: var(--gap-xs);
+        margin-top: var(--gap-8);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
         border-top: none;
 
@@ -103,9 +103,9 @@
     @mixin paragraph_primary_medium;
 
     transition: background 0.2s;
-    padding: var(--gap-xs);
+    padding: var(--gap-8);
     color: var(--color-light-text-primary);
-    border-radius: var(--gap-xs);
+    border-radius: var(--gap-8);
     height: min-content;
 
     &.interactive:not(.disabled) {
@@ -120,8 +120,8 @@
 }
 
 .focused {
-    outline: var(--gap-3xs) solid var(--focus-color);
-    outline-offset: var(--gap-3xs);
+    outline: var(--gap-2) solid var(--focus-color);
+    outline-offset: var(--gap-2);
 }
 
 .selected {

package/src/components/step-indicator/index.module.css

@@ -1,3 +1,3 @@
-.component {
+.component.component {
     padding: 0;
 }

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;