@dynamic-framework/ui-react 1.30.1 → 1.31.0

package/dist/types/components/DStepperDesktop/DStepperDesktop.d.ts

@@ -1,6 +1,7 @@
 import type { BaseProps } from '../interface';
 type Step = {
     label: string;
+    description?: string;
     value: number;
 };
 type Props = BaseProps & {
@@ -12,6 +13,7 @@ type Props = BaseProps & {
     iconSuccessMaterialStyle?: boolean;
     vertical?: boolean;
     completed?: boolean;
+    alignStart?: boolean;
 };
-export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, completed, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical, completed, alignStart, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.30.1",
+  "version": "1.31.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -60,7 +60,10 @@
     "eslint:test": "eslint src/**/*.spec.tsx",
     "stylelint": "stylelint \"**/*.{css,scss}\" --rd",
     "postversion": "pnpm build:scss",
-    "publish:cdn": "node scripts/publish-cdn.js",
+    "publish:cdn": "pnpm publish:cdn-version && pnpm publish:cdn-latest",
+    "publish:cdn-version": "node scripts/publish-cdn.js",
+    "publish:cdn-latest": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/latest/ui-react --delete --acl public-read",
+    "publish:cdn-rc": "aws s3 sync ./dist/ s3://dynamicframework-cdn/assets/rc/ui-react --delete --acl public-read",
     "lint-staged": "lint-staged"
   },
   "main": "./dist/index.js",
@@ -161,5 +164,5 @@
       "optional": true
     }
   },
-  "gitHead": "da2db914b855d6e1bd39b1b36d8bc56f7ae762f0"
+  "gitHead": "215888b4375e8906c7a36f68c92754a4fa7ad53e"
 }

package/src/style/abstracts/variables/_+import.scss

@@ -13,7 +13,6 @@ $prefix: $variable-prefix !default;
 @import "spacers";
 @import "body";
 @import "border";
-@import "box-shadow";
 
 // scss-docs-start focus-ring-variables
 $focus-ring-width: .25rem !default;

package/src/style/abstracts/variables/_forms.scss

@@ -1,5 +1,5 @@
 // scss-docs-start form-text-variables
-$form-text-margin-top: $spacer-2 !default;
+$form-text-margin-top: var(--#{$prefix}ref-spacer-1) !default;
 $form-text-color: var(--#{$prefix}body-color) !default;
 // scss-docs-end form-text-variables
 
@@ -23,7 +23,7 @@ $input-padding-y-lg: $spacer-4 !default;
 $input-font-size-lg: var(--#{$prefix}ref-spacer-5) !default;
 
 $input-bg: var(--#{$prefix}white) !default;
-$input-disabled-color: var(--#{$prefix}gray-300) !default;
+$input-disabled-color: var(--#{$prefix}body-color) !default;
 $input-disabled-bg: var(--#{$prefix}gray-100) !default;
 $input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 
@@ -79,7 +79,7 @@ $input-group-addon-border-color: transparent !default;
 
 // custom
 $form-text-padding-y: 0 !default;
-$form-text-padding-x: $spacer-2 !default;
+$form-text-padding-x: 0 !default;
 // end custom
 
 // scss-docs-start form-select-variables

package/src/style/abstracts/variables/_tooltip.scss

@@ -5,12 +5,12 @@ $tooltip-color:  var(--#{$prefix}body-bg) !default;
 $tooltip-bg: var(--#{$prefix}emphasis-color) !default;
 $tooltip-border-radius: var(--#{$prefix}ref-spacer-1) !default;
 $tooltip-opacity: 1 !default;
-$tooltip-padding-y: var(--#{$prefix}ref-spacer-1) !default;
-$tooltip-padding-x: var(--#{$prefix}ref-spacer-2) !default;
+$tooltip-padding-y: var(--#{$prefix}ref-spacer-2) !default;
+$tooltip-padding-x: var(--#{$prefix}ref-spacer-1) !default;
 
 // custom
-$tooltip-font-size-sm: var(--#{$prefix}fs-small) !default;
-$tooltip-font-size-lg: var(--#{$prefix}fs-6) !default;
+$tooltip-font-size-sm: var(--#{$prefix}fs-body-small) !default;
+$tooltip-font-size-lg: var(--#{$prefix}fs-body-medium) !default;
 // end custom
 
 // scss-docs-end tooltip-variables

package/src/style/base/_form-check.scss

@@ -1,4 +1,8 @@
+.form-check-label {
+  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
+}
+
 .form-check-input {
-  --bs-form-check-input-focus-border-color: #{$component-focus-border-color};
-  --bs-form-check-input-focus-box-shadow: #{$input-btn-focus-box-shadow};
+  --#{$prefix}form-check-input-focus-border-color: #{$component-focus-border-color};
+  --#{$prefix}form-check-input-focus-box-shadow: #{$input-btn-focus-box-shadow};
 }

package/src/style/base/_label.scss

@@ -5,6 +5,7 @@ label {
   gap: var(--#{$prefix}ref-spacer-1);
   align-items: center;
   padding: var(--#{$prefix}label-padding-y) var(--#{$prefix}label-padding-x);
+  margin-bottom: var(--#{$prefix}label-margin-bottom);
   font-size: var(--#{$prefix}label-font-size);
   font-weight: var(--#{$prefix}label-font-weight);
   color: var(--#{$prefix}label-color);

package/src/style/components/_d-stepper-desktop.scss

@@ -29,9 +29,10 @@
   --#{$prefix}step-line-color: var(--#{$prefix}secondary);
 
   /* Step label */
-  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-4);
-
+  --#{$prefix}step-label-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}step-description-font-size: var(--#{$prefix}fs-body-tiny);
 
   position: relative;
   display: flex;
@@ -97,10 +98,25 @@
       width: 50%;
     }
 
-    .d-step-label {
+    .d-step-text-container {
       padding-right: var(--#{$prefix}step-label-padding);
       padding-left: var(--#{$prefix}step-label-padding);
       text-align: center;
+
+      .d-step-label {
+        font-size: var(--#{$prefix}step-label-font-size);
+      }
+
+      .d-step-description {
+        font-size: var(--#{$prefix}step-description-font-size);
+      }
+    }
+  }
+
+  &.is-align-start {
+    .d-step-text-container {
+      text-align: left;
+      transform: translateX(calc(50% - (var(--#{$prefix}step-icon-container-size) / 2) - var(--#{$prefix}step-label-padding)));
     }
   }
 
@@ -116,12 +132,16 @@
         height: 100%;
       }
 
-      .d-step-label {
+      .d-step-text-container {
         display: flex;
+        flex-direction: column;
         flex-grow: 1;
-        align-items: center;
+        align-items: flex-start;
         min-height: var(--#{$prefix}step-label-height);
         padding: var(--#{$prefix}step-vertical-label-padding);
+      }
+
+      .d-step-label {
         text-align: left;
       }
 

package/src/style/components/_d-stepper-mobile.scss

@@ -6,7 +6,7 @@
   --#{$prefix}step-progress-outter-size: 62px;
   --#{$prefix}step-progress-outter-z-index: 1;
   --#{$prefix}step-progress-outter-fill-background-color: var(--#{$prefix}secondary-500);
-  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}gray-300);
+  --#{$prefix}step-progress-outter-background-color: var(--#{$prefix}secondary-100);
 
   /* Inner circle */
   --#{$prefix}step-progress-inner-size: 50px;
@@ -15,14 +15,14 @@
 
   /* Current step */
   --#{$prefix}step-current-step-z-index: 3;
-  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}fw-bold);
-  --#{$prefix}step-current-step-color: var(--#{$prefix}gray-700);
+  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}fw-normal);
+  --#{$prefix}step-current-step-color: var(--#{$prefix}secondary-500);
 
   /* Info circle */
   --#{$prefix}step-info-max-width: 12rem;
-  --#{$prefix}step-info-label-font-size: var(--#{$prefix}fs-6);
-  --#{$prefix}step-info-description-font-size: var(--#{$prefix}fs-small);
-  --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
+  --#{$prefix}step-info-label-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}step-info-description-font-size: var(--#{$prefix}fs-body-tiny);
+  --#{$prefix}step-info-description-color: var(--#{$prefix}body-color);
 
   display: flex;
   gap: var(--#{$prefix}step-container-gap);

package/src/style/root/_root.scss

@@ -208,7 +208,8 @@
   --#{$prefix}fw-bolder: #{$font-weight-bolder-value};
 
   --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
-  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-0);
+  --#{$prefix}label-margin-bottom: var(--#{$prefix}ref-spacer-1);
   --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}label-color: var(--#{$prefix}gray-700);

package/src/style/abstracts/variables/_box-shadow.scss

@@ -1,6 +0,0 @@
-// scss-docs-start box-shadow-variables
-$box-shadow: 0 12px 14px 0 rgba($dark, .2) !default;
-$box-shadow-sm: 0 8px 12px 0 rgba($dark, .05) !default;
-$box-shadow-lg: 0 20px 22px 0 rgba($dark, .25) !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black, .75) !default;
-// scss-docs-end box-shadow-variables