@dynamic-framework/ui-react 2.7.0 → 2.9.0

package/src/style/components/_d-confirm-modal.scss

@@ -0,0 +1,17 @@
+.confirm-modal {
+  --#{$prefix}confirm-modal-body-padding-y: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}confirm-modal-body-padding-x: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}confirm-modal-field-gap: var(--#{$prefix}ref-spacer-4);
+}
+
+.d-confirm-modal-body {
+  padding: var(--#{$prefix}confirm-modal-body-padding-y) var(--#{$prefix}confirm-modal-body-padding-x);
+}
+
+.d-confirm-modal-message {
+  margin-bottom: var(--#{$prefix}confirm-modal-field-gap);
+}
+
+.d-confirm-modal-field {
+  margin-bottom: var(--#{$prefix}confirm-modal-field-gap);
+}

package/src/style/components/_d-data-state-wrapper.scss

@@ -0,0 +1,47 @@
+.d-empty-state {
+  --#{$prefix}empty-state-padding: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}empty-state-spacing: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}empty-state-color: var(--#{$prefix}secondary);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}empty-state-padding);
+  text-align: center;
+}
+
+.d-empty-state-icon {
+  margin-bottom: var(--#{$prefix}empty-state-spacing);
+  color: var(--#{$prefix}empty-state-color);
+}
+
+.d-empty-state-message {
+  margin-bottom: var(--#{$prefix}empty-state-spacing);
+  color: var(--#{$prefix}empty-state-color);
+}
+
+.d-error-state {
+  --#{$prefix}error-state-gap: var(--#{$prefix}ref-spacer-3);
+
+  display: flex;
+  gap: var(--#{$prefix}error-state-gap);
+  align-items: center;
+}
+
+.d-error-state-content {
+  flex: 1 1 auto;
+}
+
+.d-error-state-message {
+  margin-bottom: 0;
+}
+
+.d-loading-state {
+  --#{$prefix}loading-state-padding: var(--#{$prefix}ref-spacer-4);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--#{$prefix}loading-state-padding);
+}

package/src/style/components/_d-datepicker.scss

@@ -215,6 +215,12 @@
     }
   }
 
+  &-year-selector {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
   &-day-selector {
     margin-bottom: var(--#{$prefix}ref-spacer-4);
 
@@ -287,6 +293,11 @@
   margin-top: -.5rem;
 }
 
+.datepicker-top-header-title {
+  margin-bottom: 0;
+  font-weight: var(--#{$prefix}fw-normal);
+}
+
 .react-datepicker__year,
 .react-datepicker__quarterPicker {
   --#{$prefix}datepicker-body-gap: 1rem;

package/src/style/components/_d-error-boundary.scss

@@ -0,0 +1,7 @@
+.d-error-boundary-content {
+  --#{$prefix}error-boundary-gap: var(--#{$prefix}ref-spacer-2);
+
+  display: flex;
+  gap: var(--#{$prefix}error-boundary-gap);
+  align-items: center;
+}

package/src/style/components/_d-input-currency.scss

@@ -0,0 +1,5 @@
+.d-input-currency-symbol {
+  --#{$prefix}input-currency-symbol-color: var(--#{$prefix}input-currency-component-symbol-color, #{$input-currency-symbol-color});
+
+  color: var(--#{$prefix}input-currency-symbol-color);
+}

package/src/style/components/_d-otp.scss

@@ -0,0 +1,54 @@
+.d-otp {
+  --#{$prefix}otp-content-gap: var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}otp-content-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}otp-content-padding-bottom: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}otp-footer-gap: var(--#{$prefix}ref-spacer-4);
+}
+
+.d-otp-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}otp-content-gap);
+  padding: 0 var(--#{$prefix}otp-content-padding-x) var(--#{$prefix}otp-content-padding-bottom);
+}
+
+.d-otp-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}otp-content-gap);
+}
+
+.d-otp-divider {
+  margin: 0;
+}
+
+.d-otp-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}otp-footer-gap);
+  align-items: center;
+
+  @include media-breakpoint-up(lg) {
+    flex-direction: row;
+  }
+}
+
+.d-otp-contact {
+  margin-bottom: 0;
+  font-size: .875em;
+
+  @include media-breakpoint-up(lg) {
+    margin-left: auto;
+  }
+}
+
+.d-otp-countdown {
+  display: flex;
+  gap: var(--#{$prefix}ref-spacer-2);
+  align-items: center;
+}
+
+.d-otp-countdown-text {
+  flex: 1 1 auto;
+  margin-bottom: 0;
+}

package/src/style/components/_d-password-strength-meter.scss

@@ -0,0 +1,76 @@
+.d-password-strength-meter {
+  --#{$prefix}password-strength-meter-margin-top: var(--#{$prefix}ref-spacer-2);
+
+  margin-top: var(--#{$prefix}password-strength-meter-margin-top);
+}
+
+.d-password-strength-bar {
+  --#{$prefix}password-strength-bar-height: 8px;
+  --#{$prefix}password-strength-bar-radius: var(--#{$prefix}border-radius-lg);
+  --#{$prefix}password-strength-bar-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}password-strength-bar-margin-bottom: var(--#{$prefix}ref-spacer-2);
+
+  width: 100%;
+  height: var(--#{$prefix}password-strength-bar-height);
+  margin-bottom: var(--#{$prefix}password-strength-bar-margin-bottom);
+  overflow: hidden;
+  background: var(--#{$prefix}password-strength-bar-bg);
+  border-radius: var(--#{$prefix}password-strength-bar-radius);
+}
+
+.d-password-strength-bar-fill {
+  height: 100%;
+  transition: width .3s ease-in-out;
+
+  &.is-empty {
+    background: var(--#{$prefix}gray-200);
+  }
+
+  &.is-weak {
+    background: var(--#{$prefix}danger);
+  }
+
+  &.is-fair {
+    background: var(--#{$prefix}warning);
+  }
+
+  &.is-good {
+    background: var(--#{$prefix}info);
+  }
+
+  &.is-strong {
+    background: var(--#{$prefix}success);
+  }
+}
+
+.d-password-check-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$prefix}ref-spacer-2);
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.d-password-check-item {
+  --#{$prefix}password-check-item-color: var(--#{$prefix}gray-600);
+
+  display: flex;
+  gap: var(--#{$prefix}ref-spacer-2);
+  align-items: flex-start;
+  font-size: .875em;
+  color: var(--#{$prefix}password-check-item-color);
+
+  &.is-valid {
+    color: var(--#{$prefix}success);
+  }
+}
+
+.d-password-check-item-icon {
+  flex-shrink: 0;
+  color: var(--#{$prefix}gray-300);
+}
+
+.d-password-check-item.is-valid .d-password-check-item-icon {
+  color: var(--#{$prefix}success);
+}

package/src/style/components/_d-popover.scss

@@ -11,5 +11,9 @@
     &:focus-visible {
       outline: 0;
     }
+
+    &.d-popover-content-fill {
+      width: 100%;
+    }
   }
 }

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

@@ -0,0 +1,8 @@
+// Semantic hook classes for theming. The mobile/desktop toggle itself relies on
+// Bootstrap's responsive display utilities (d-{breakpoint}-none / d-{breakpoint}-block)
+// because the breakpoint is dynamic (component prop) and CSS custom properties
+// cannot be read inside media queries.
+.d-stepper-mobile,
+.d-stepper-desktop {
+  width: 100%;
+}

package/src/style/components/_d-tabs.scss

@@ -1,3 +1,21 @@
+.d-tabs {
+  display: flex;
+  width: 100%;
+}
+
+.d-tabs-column {
+  flex-direction: column;
+}
+
+.d-tabs-nav-vertical {
+  flex-direction: column;
+  align-items: center;
+}
+
+.d-tabs-content {
+  width: 100%;
+}
+
 .nav-toggle-button-group {
   --#{$prefix}toggle-button-group-border-color: var(--#{$prefix}gray-50);
   --#{$prefix}toggle-button-group-border-radius: 4rem;

package/src/style/components/_d-voucher.scss

@@ -5,6 +5,9 @@
   --#{$prefix}voucher-amount-rounded: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-footer-gap: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}voucher-margin: 0 0 var(--#{$prefix}ref-spacer-4) 0;
+  --#{$prefix}voucher-title-margin-bottom: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}voucher-amount-value-margin: var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}voucher-divider-margin: var(--#{$prefix}ref-spacer-4);
 }
 
 .d-voucher-header {
@@ -28,3 +31,30 @@
   gap: var(--#{$prefix}voucher-footer-gap);
   justify-content: flex-start;
 }
+
+.d-voucher-title-group {
+  text-align: center;
+}
+
+.d-voucher-title {
+  margin-bottom: var(--#{$prefix}voucher-title-margin-bottom);
+}
+
+.d-voucher-message {
+  margin: 0;
+}
+
+.d-voucher-amount-value {
+  margin: 0;
+  font-size: var(--#{$prefix}fs-3);
+  font-weight: var(--#{$prefix}fw-bold);
+  text-align: center;
+
+  &.d-voucher-amount-value-with-details {
+    margin-bottom: var(--#{$prefix}voucher-amount-value-margin);
+  }
+}
+
+.d-voucher-divider {
+  margin: var(--#{$prefix}voucher-divider-margin) 0;
+}

package/dist/types/components/DOtp/hooks/useCountdown.d.ts

@@ -1,4 +0,0 @@
-export default function useCountdown(seconds: number): {
-    secondsLeft: number;
-    restartCountdown: () => void;
-};

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

@@ -1,12 +0,0 @@
-.form-text {
-  --#{$prefix}form-text-padding: #{$form-text-padding-y} #{$form-text-padding-x};
-  --#{$prefix}form-text-gap: var(--#{$prefix}ref-spacer-1);
-  --#{$prefix}form-text-color: #{$form-text-color};
-
-  display: inline-flex;
-  flex-direction: row;
-  gap: var(--#{$prefix}form-text-gap);
-  align-items: center;
-  padding: var(--#{$prefix}form-text-padding);
-  color: var(--#{$prefix}form-text-color);
-}