@dynamic-framework/ui-react 1.28.0 → 1.29.0

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

@@ -1,20 +1,18 @@
 import type { PropsWithChildren } from 'react';
-import type { AlertType, BaseProps } from '../interface';
+import type { AlertTheme, BaseProps } from '../interface';
 type Props = BaseProps & PropsWithChildren<{
     id?: string;
-    type?: AlertType;
+    theme?: AlertTheme;
     icon?: string;
     iconFamilyClass?: string;
     iconFamilyPrefix?: string;
     iconMaterialStyle?: boolean;
-    showIcon?: boolean;
     showClose?: boolean;
     iconClose?: string;
     iconCloseFamilyClass?: string;
     iconCloseFamilyPrefix?: string;
     iconCloseMaterialStyle?: boolean;
-    soft?: boolean;
     onClose?: () => void;
 }>;
-export default function DAlert({ type, icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showIcon, soft, showClose, onClose, children, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DAlert({ theme, icon: iconProp, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, iconClose: iconCloseProp, iconCloseFamilyClass, iconCloseFamilyPrefix, iconCloseMaterialStyle, showClose, onClose, children, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,15 @@
 import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     text?: string;
-    dot?: boolean;
     soft?: boolean;
+    rounded?: boolean;
     theme?: string;
     id?: string;
+    iconStart?: string;
+    iconEnd?: string;
+    iconMaterialStyle?: boolean;
+    iconFamilyClass?: string;
+    iconFamilyPrefix?: string;
 };
-export default function DBadge({ text, dot, soft, theme, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBadge({ text, soft, theme, id, rounded, className, style, iconStart, iconEnd, iconMaterialStyle, iconFamilyClass, iconFamilyPrefix, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -50,9 +50,9 @@ export type StateIcons = {
     invalidIcon?: string;
     validIcon?: string;
 };
-export type AlertType = 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark' | 'primary' | 'secondary';
-export type AlertTypeIconMap = {
-    [state in AlertType]: string;
+export type AlertTheme = 'success' | 'info' | 'warning' | 'danger' | 'primary' | 'secondary';
+export type AlertThemeIconMap = {
+    [state in AlertTheme]: string;
 };
 export type ButtonVariant = 'outline' | 'link';
 export type ButtonType = 'submit' | 'reset' | 'button';

package/dist/types/contexts/DContext.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import { PortalContextProps } from './DPortalContext';
-import type { AlertTypeIconMap } from '../components/interface';
+import type { AlertThemeIconMap } from '../components/interface';
 export type CurrencyProps = {
     symbol: string;
     precision: number;
@@ -19,7 +19,7 @@ type IconMapProps = {
     chevronUp: string;
     chevronLeft: string;
     chevronRight: string;
-    alert: AlertTypeIconMap;
+    alert: AlertThemeIconMap;
     upload: string;
     calendar: string;
     check: string;

package/jest/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/jest/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -66,7 +66,7 @@
   "files": [
     "dist/",
     "src/style",
-    "setupJest.js"
+    "jest/"
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.1",
@@ -106,7 +106,7 @@
     "@storybook/theming": "^7.5.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.6",
+    "@types/jest": "^29.5.12",
     "@types/node": "^18.15.3",
     "@types/react": "^18.2.31",
     "@types/react-datepicker": "^4.19.1",
@@ -141,7 +141,7 @@
     "storybook": "^7.5.1",
     "stylelint": "^15.11.0",
     "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.2.3",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2"
   },
@@ -157,5 +157,5 @@
       "optional": true
     }
   },
-  "gitHead": "f4db34343c4608b19f11d876ffad63f1e69feec5"
+  "gitHead": "cf832f6d5da30a387a87354ffb60c2173e3804ea"
 }

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

@@ -1,9 +1,5 @@
 // Alerts
-//
-// Define alert colors, border radius, and padding.
-
 // scss-docs-start alert-variables
-$alert-padding-x: $spacer-6 !default;
 $alert-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $alert-link-font-weight: var(--#{$prefix}fw-bold) !default;
 // scss-docs-end alert-variables
@@ -16,7 +12,6 @@ $alert-color-scale: 100% !default;
 
 // custom
 $alert-gap: var(--#{$prefix}ref-spacer-4) !default;
-$alert-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
-$alert-close-icon-size: var(--#{$prefix}ref-spacer-3) !default;
+$alert-close-icon-size: var(--#{$prefix}ref-spacer-4) !default;
 // end custom
 // scss-docs-end alert-variables

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

@@ -10,6 +10,6 @@ $badge-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 // custom
 $badge-bg: var(--#{$prefix}white) !default;
-$badge-dot-height: var(--#{$prefix}ref-spacer-4) !default;
+$badge-gap: var(--#{$prefix}ref-spacer-2) !default;
 // end custom
 // scss-docs-end badge-variables

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

@@ -3,7 +3,7 @@
 // Define common padding and border radius sizes and more.
 
 // scss-docs-start border-variables
-$border-color: var(--#{$prefix}gray-300) !default;
+$border-color: var(--#{$prefix}gray-100) !default;
 $border-color-translucent: rgba(var(--#{$prefix}black-rgb), .175) !default;
 // scss-docs-end border-variables
 

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

@@ -20,6 +20,22 @@ $spacer-11: $spacer * 2.75 !default;  // 44px
 $spacer-12: $spacer * 3 !default;     // 48px
 $spacer-13: $spacer * 3.25 !default;  // 52px
 $spacer-14: $spacer * 3.5 !default;   // 56px
+$spacer-15: $spacer * 3.75 !default;  // 60px
+$spacer-16: $spacer * 4 !default;     // 64px
+$spacer-17: $spacer * 4.25 !default;  // 68px
+$spacer-18: $spacer * 4.5 !default;   // 72px
+$spacer-19: $spacer * 4.75 !default;  // 76px
+$spacer-20: $spacer * 5 !default;     // 80px
+$spacer-21: $spacer * 5.25 !default;  // 84px
+$spacer-22: $spacer * 5.5 !default;   // 88px
+$spacer-23: $spacer * 5.75 !default;  // 92px
+$spacer-24: $spacer * 6 !default;     // 96px
+$spacer-25: $spacer * 6.25 !default;  // 100px
+$spacer-26: $spacer * 6.5 !default;   // 104px
+$spacer-27: $spacer * 6.75 !default;  // 108px
+$spacer-28: $spacer * 7 !default;     // 112px
+$spacer-29: $spacer * 7.25 !default;  // 116px
+$spacer-30: $spacer * 7.5 !default;   // 120px
 $spacers: (
   0: 0,
   1: $spacer-1,
@@ -36,5 +52,21 @@ $spacers: (
   12: $spacer-12,
   13: $spacer-13,
   14: $spacer-14,
+  15: $spacer-15,
+  16: $spacer-16,
+  17: $spacer-17,
+  18: $spacer-18,
+  19: $spacer-19,
+  20: $spacer-20,
+  21: $spacer-21,
+  22: $spacer-22,
+  23: $spacer-23,
+  24: $spacer-24,
+  25: $spacer-25,
+  26: $spacer-26,
+  27: $spacer-27,
+  28: $spacer-28,
+  29: $spacer-29,
+  30: $spacer-30,
 ) !default;
 // scss-docs-end spacer-variables-maps

package/src/style/base/_+import.scss

@@ -36,6 +36,7 @@
 
 @import "type";
 @import "body";
+@import "badge";
 @import "accordion";
 @import "form-switch";
 @import "form-check";

package/src/style/base/_alert.scss

@@ -1,66 +1,31 @@
 .alert {
   --#{$prefix}alert-gap: #{$alert-gap};
-  --#{$prefix}alert-box-shadow: #{$alert-box-shadow};
-  --#{$prefix}alert-icon-color: var(--#{$prefix}alert-color);
-  --#{$prefix}alert-separator-opacity: var(--#{$prefix}alert-component-separator-opacity);
   --#{$prefix}alert-close-icon-size: #{$alert-close-icon-size};
+  --#{$prefix}alert-icon-size: var(--#{$prefix}ref-spacer-5);
 
   display: flex;
   flex-direction: row;
   gap: var(--#{$prefix}alert-gap);
-  align-items: center;
-  box-shadow: var(--#{$prefix}alert-box-shadow);
+  align-items: flex-start;
 
   .alert-text {
     flex-grow: 1;
   }
 
-  .alert-separator {
-    align-self: stretch;
-    width: 1px;
-    background-color: var(--#{$prefix}alert-icon-color);
-    opacity: var(--#{$prefix}alert-separator-opacity);
-  }
-
-  .btn-close {
-    --#{$prefix}btn-close-bg: transparent;
-  }
-
-  .alert-icon.d-icon {
+  .alert-icon {
+    --#{$prefix}icon-size: var(--#{$prefix}alert-icon-size);
     --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
   }
 
-  .alert-close-icon {
-    --#{$prefix}icon-color: var(--#{$prefix}alert-icon-color);
-    --#{$prefix}icon-size: var(--#{$prefix}alert-close-icon-size);
-  }
-
-  @each $theme, $value in $theme-colors {
+  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
     $color: color-contrast-var($value);
     &.alert-#{$theme} {
-      --#{$prefix}alert-color: #{$color};
-      --#{$prefix}alert-bg: var(--#{$prefix}#{$theme});
-      --#{$prefix}alert-border-color: var(--#{$prefix}#{$theme});
-      --#{$prefix}alert-link-color: #{$color};
-    }
-  }
-
-  &.alert-soft {
-    --#{$prefix}alert-color: var(--#{$prefix}gray-900);
-    --#{$prefix}alert-border: 0;
-
-    @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-      &.alert-#{$theme} {
-        --#{$prefix}alert-icon-color: var(--#{$prefix}#{$theme}-500);
+      --#{$prefix}alert-icon-color: var(--#{$prefix}#{$theme}-500);
+      --#{$prefix}alert-color: var(--#{$prefix}body-color);
 
-        --#{$prefix}alert-bg: var(--#{$prefix}#{$theme}-100);
-      }
-    }
-
-    &.alert-light {
-      --#{$prefix}alert-icon-color: var(--#{$prefix}secondary-500);
-      --#{$prefix}alert-border-color: var(--#{$prefix}secondary-500);
-      --#{$prefix}alert-bg: var(--#{$prefix}white);
+      --#{$prefix}alert-bg: var(--#{$prefix}surface-#{$theme});
+      --#{$prefix}alert-border-color: var(--#{$prefix}surface-#{$theme});
+      --#{$prefix}alert-link-color: #{$color};
     }
   }
 }

package/src/style/base/_badge.scss

@@ -0,0 +1,49 @@
+.badge {
+  --#{$prefix}badge-gap: #{$badge-gap};
+  --#{$prefix}badge-icon-size: #{$badge-font-size};
+  --#{$prefix}badge-bg: #{$badge-bg};
+  --#{$prefix}badge-color: #{$badge-color};
+
+  display: flex;
+  gap: var(--#{$prefix}badge-gap);
+  color: var(--#{$prefix}badge-color);
+
+  background-color: var(--#{$prefix}badge-bg);
+
+  .d-icon {
+    --#{$prefix}icon-size: var(--#{$prefix}badge-icon-size);
+  }
+
+  @each $theme, $value in map-remove($theme-colors, "light") {
+    $color: color-contrast-var($value);
+
+    &.badge-#{$theme} {
+      --#{$prefix}badge-bg: var(--#{$prefix}#{$theme});
+      --#{$prefix}badge-color: #{$color};
+    }
+  }
+
+  &.badge-light {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-200);
+    --#{$prefix}badge-color: var(--#{$prefix}gray-900);
+  }
+
+  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
+    $color: color-contrast-var($value);
+
+    &.badge-soft-#{$theme} {
+      --#{$prefix}badge-bg: var(--#{$prefix}surface-#{$theme});
+      --#{$prefix}badge-color: var(--#{$prefix}body-color);
+    }
+  }
+
+  &.badge-soft-light {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-700);
+    --#{$prefix}badge-color: var(--#{$prefix}white);
+  }
+
+  &.badge-soft-dark {
+    --#{$prefix}badge-bg: var(--#{$prefix}gray-100);
+    --#{$prefix}badge-color: var(--#{$prefix}body-color);
+  }
+}

package/src/style/base/_toast.scss

@@ -37,20 +37,15 @@
         color: var(--#{$prefix}toast-close-color);
       }
     }
-  }
-
-  &.toast-soft {
-    --#{$prefix}toast-color: var(--#{$prefix}gray-900);
-    --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
-    --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
 
-    @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-      &.toast-#{$theme} {
-        --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
-        --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
-        --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
-        --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
-      }
+    &.toast-soft-#{$theme} {
+      --#{$prefix}toast-color: var(--#{$prefix}gray-900);
+      --#{$prefix}toast-close-color: var(--#{$prefix}gray-900);
+      --#{$prefix}toast-header-color: var(--#{$prefix}gray-900);
+      --#{$prefix}toast-icon-color: var(--#{$prefix}#{$theme}-500);
+      --#{$prefix}toast-border-color: var(--#{$prefix}#{$theme}-100);
+      --#{$prefix}toast-bg: var(--#{$prefix}#{$theme}-100);
+      --#{$prefix}toast-header-bg: var(--#{$prefix}#{$theme}-100);
     }
   }
 }

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

@@ -1,6 +1,5 @@
 .d-close {
   display: flex;
-  align-self: center;
   padding: 0;
   background: transparent;
   border: 0;