@dynamic-framework/ui-react 1.15.0 → 1.16.0

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

@@ -2,8 +2,9 @@ import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     text?: string;
     dot?: boolean;
+    soft?: boolean;
     theme?: string;
     id?: string;
 };
-export default function DBadge({ text, dot, theme, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DBadge({ text, dot, soft, theme, id, className, style, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-export * from './banking';
 export { default as DAlert } from './DAlert';
 export { default as DBadge } from './DBadge';
 export { default as DBoxFile } from './DBoxFile';

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

@@ -39,9 +39,9 @@ type Props = {
     iconMap: IconMapProps;
 };
 type Context = Props & {
-    setContext: (value: Props) => void;
+    setContext: (value: Partial<Props>) => void;
 };
-export declare const DContext: import("react").Context<Context>;
+export declare const DContext: import("react").Context<Partial<Context>>;
 export declare function DContextProvider({ language, currency, icon, iconMap, children, }: PropsWithChildren<Partial<Props>>): import("react/jsx-runtime").JSX.Element;
 export declare function useDContext(): Context;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "React Dynamic Framework",
   "license": "MIT",
   "repository": {
@@ -57,7 +57,8 @@
     "eslint:stories": "eslint stories/**/*.stories.tsx",
     "eslint:test": "eslint src/**/*.spec.tsx",
     "stylelint": "stylelint \"**/*.{css,scss}\" --rd",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "postversion": "pnpm build:scss"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -147,5 +148,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "a37c9aa8e3eac83d13f9c2b8837334aa35ad0128"
+  "gitHead": "1061bcbc122e8cfe94a0b4fbda24a6b327b93695"
 }

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

@@ -1,25 +1,33 @@
 // Accordion
 
 // scss-docs-start accordion-variables
-$accordion-padding-y: 1rem !default;
-$accordion-padding-x: 1.25rem !default;
-$accordion-color: var(--#{$prefix}body-color) !default;
-$accordion-bg: var(--#{$prefix}body-bg) !default;
+$accordion-padding-y: var(--#{$prefix}ref-spacer-4) !default;
+$accordion-padding-x: var(--#{$prefix}ref-spacer-3) !default;
+$accordion-color: var(--#{$prefix}gray-700) !default;
+$accordion-bg: var(--#{$prefix}white) !default;
 $accordion-border-width: var(--#{$prefix}border-width) !default;
 $accordion-border-color: var(--#{$prefix}border-color) !default;
 $accordion-border-radius: var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
 
 $accordion-body-padding-y: $accordion-padding-y !default;
+// custom
+$accordion-body-padding-top: $accordion-padding-x !default;
+// end custom
 $accordion-body-padding-x: $accordion-padding-x !default;
 
 $accordion-button-padding-y: $accordion-padding-y !default;
 $accordion-button-padding-x: $accordion-padding-x !default;
 $accordion-button-color: var(--#{$prefix}body-color) !default;
+$accordion-button-border-color: var(--#{$prefix}gray-100) !default;
 $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
+// custom
+$accordion-button-font-weight: var(--#{$prefix}ref-fw-bold) !default;
+$accordion-button-font-size: var(--#{$prefix}ref-fs-6) !default;
+// end custom
 $accordion-transition: $btn-transition, border-radius .15s ease !default;
-$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
-$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
+$accordion-button-active-bg: var(--#{$prefix}secondary-soft) !default;
+$accordion-button-active-color: var(--#{$prefix}body-color) !default;
 
 $accordion-button-focus-border-color: $input-focus-border-color !default;
 $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;

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

@@ -7,7 +7,7 @@ $body-text-align: null !default;
 // custom
 $body-color-mapping: "gray-900" !default;
 $body-color: map-get($all-colors, $body-color-mapping) !default;
-$body-bg-mapping: "white" !default;
+$body-bg-mapping: "secondary-soft" !default;
 $body-bg: map-get($all-colors, $body-bg-mapping) !default;
 
 $body-secondary-color: var(--#{$prefix}body-color-rgb) !default;

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

@@ -32,9 +32,9 @@ $btn-link-color: var(--#{$prefix}link-color) !default;
 $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color: $gray-600 !default;
 
-$btn-border-radius: $border-radius-sm !default;
-$btn-border-radius-sm: $border-radius-sm !default;
-$btn-border-radius-lg: $border-radius-lg !default;
+$btn-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg: var(--#{$prefix}border-radius) !default;
 
 $btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 

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

@@ -1,8 +1,8 @@
 // Close
 
 // scss-docs-start close-variables
-$btn-close-width: auto !default;
-$btn-close-height: auto !default;
+$btn-close-width: 1em !default;
+$btn-close-height: 1em !default;
 $btn-close-padding-x: 0 !default;
 $btn-close-padding-y: 0 !default;
 $btn-close-color: var(--#{$prefix}black) !default;

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

@@ -1,7 +1,7 @@
 // Modals
 
 // scss-docs-start modal-variables
-$modal-inner-padding: 0 !default;
+$modal-inner-padding: $spacer-3 !default;
 
 // custom
 $modal-header-gap: $spacer-4 !default;
@@ -24,7 +24,7 @@ $modal-content-box-shadow-xs: $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up: $box-shadow-sm !default;
 
 // custom
-$modal-body-padding: 0 !default;
+$modal-body-padding: $modal-inner-padding !default;
 // end custom
 
 $modal-backdrop-bg: var(--#{$prefix}black) !default;

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

@@ -5,8 +5,41 @@
 @import "bootstrap/scss/images";
 @import "bootstrap/scss/containers";
 @import "bootstrap/scss/grid";
-// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/tables"; we use our own bootstrap based implementation
 @import "tables";
 
 @import "bootstrap/scss/transitions";
 
+@import "bootstrap/scss/forms";
+// @import "bootstrap/scss/buttons"; we use our own bootstrap based implementation
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+@import "bootstrap/scss/badge";
+
+@import "accordion";
+@import "form-switch";
+@import "form-check";
+@import "button";
+@import "progress";
+@import "alert";
+@import "collapse";
+@import "pagination";
+@import "breadcrumb";

package/src/style/base/_accordion.scss

@@ -0,0 +1,18 @@
+.accordion {
+  --#{$prefix}accordion-btn-font-weight: #{$accordion-button-font-weight};
+  --#{$prefix}accordion-btn-font-size: #{$accordion-button-font-size};
+  --#{$prefix}accordion-body-padding-top: #{$accordion-body-padding-top};
+
+  .accordion-button {
+    font-weight: var(--#{$prefix}accordion-btn-font-weight);
+    @include font-size(var(--#{$prefix}accordion-btn-font-size));
+  }
+
+  .accordion-item .show {
+    background-color: var(--#{$prefix}accordion-active-bg);
+  }
+
+  .accordion-body {
+    padding-top: var(--#{$prefix}accordion-body-padding-top);
+  }
+}

package/src/style/base/_breadcrumb.scss

@@ -0,0 +1,10 @@
+.breadcrumb .separator {
+  float: left;
+  padding: 0 var(--#{$prefix}breadcrumb-item-padding-x);
+  color: var(--#{$prefix}breadcrumb-divider-color);
+  content: var(--#{$prefix}breadcrumb-divider, "/");
+}
+
+.breadcrumb .last {
+  color: var(--#{$prefix}breadcrumb-item-active-color);
+}

package/src/style/{components/_d-button.scss → base/_button.scss}

@@ -160,7 +160,21 @@
       text-decoration: underline;
     }
 
-    @include df-button-link-variant($color);
+    @if $color == "light" {
+      @include df-button-link-variant(
+        "gray",
+        $default-color: $value,
+        $hover-bg-color: var(--#{$prefix}gray-300),
+        $active-bg-color: var(--#{$prefix}gray-500)
+      );
+    } @else if $color == "dark" {
+      @include df-button-link-variant(
+        "gray",
+        $default-color: $value
+      );
+    } @else {
+      @include df-button-link-variant($color);
+    }
   }
 }
 

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

@@ -1,48 +1,16 @@
-@import "bootstrap/scss/forms";
-// @import "bootstrap/scss/buttons"; we use our own bootstrap based implementation
-
-@import "bootstrap/scss/dropdown";
-@import "bootstrap/scss/button-group";
-@import "bootstrap/scss/nav";
-@import "bootstrap/scss/navbar";
-@import "bootstrap/scss/card";
-@import "bootstrap/scss/accordion";
-@import "bootstrap/scss/breadcrumb";
-@import "bootstrap/scss/pagination";
-@import "bootstrap/scss/badge";
-@import "bootstrap/scss/alert";
-@import "bootstrap/scss/progress";
-@import "bootstrap/scss/list-group";
-@import "bootstrap/scss/close";
-@import "bootstrap/scss/toasts";
-@import "bootstrap/scss/modal";
-@import "bootstrap/scss/tooltip";
-@import "bootstrap/scss/popover";
-@import "bootstrap/scss/carousel";
-@import "bootstrap/scss/spinners";
-@import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/placeholders";
-
 @import "react-toastify/scss/main";
 
 @import "d-icon";
 @import "d-input";
-@import "d-input-switch";
-@import "d-input-check";
 @import "d-input-select";
 @import "d-input-pin";
-@import "d-button";
 @import "d-quick-action-button";
 @import "d-quick-action-select";
 @import "d-quick-action-check";
 @import "d-quick-action-switch";
-@import "d-progress";
-@import "d-alert";
-@import "d-badge";
 @import "d-chip";
 @import "d-modal";
 @import "d-offcanvas";
-@import "d-collapse";
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
@@ -53,10 +21,6 @@
 @import "d-carousel";
 @import "d-stepper-desktop";
 @import "d-stepper-mobile";
-@import "d-paginator";
 @import "d-card-account";
 @import "d-tooltip";
 @import "d-select";
-
-// TODO: review.
-@import "d-permission-group";

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

@@ -29,7 +29,7 @@
   }
 
   .modal-body {
-    padding: var(--#{$prefix}modal-body-padding);
+    padding: var(--#{$prefix}modal-component-body-padding, var(--#{$prefix}modal-body-padding));
   }
 
   .d-modal-separator {

package/src/style/helpers/_color-bg.scss

@@ -4,4 +4,16 @@
     color: color-contrast-var($value) if($enable-important-utilities, !important, null);
     background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
   }
+
+  .text-bg-soft-#{$color} {
+    color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+
+    @if $color == "light" {
+      background-color: RGBA(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    } @else if $color == "dark" {
+      background-color: RGBA(var(--#{$prefix}gray-200-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    } @else {
+      background-color: RGBA(var(--#{$prefix}#{$color}-100-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    }
+  }
 }

package/src/style/root/_root.scss

@@ -121,11 +121,11 @@
   --#{$prefix}heading-color: #{$headings-color};
 
   --#{$prefix}link-color: rgb(var(--#{$prefix}link-color-rgb));
-  --#{$prefix}link-color-rgb: var(--#{$prefix}#{$link-color-mapping});
+  --#{$prefix}link-color-rgb: var(--#{$prefix}#{$link-color-mapping}-rgb);
   --#{$prefix}link-decoration: #{$link-decoration};
 
   --#{$prefix}link-hover-color: rgb(var(--#{$prefix}link-hover-color-rgb));
-  --#{$prefix}link-hover-color-rgb: var(--#{$prefix}#{$link-hover-color-mapping});
+  --#{$prefix}link-hover-color-rgb: var(--#{$prefix}#{$link-hover-color-mapping}-rgb);
 
   @if $link-hover-decoration != null {
     --#{$prefix}link-hover-decoration: #{$link-hover-decoration};

package/dist/types/components/banking/DPermissionGroup.d.ts

@@ -1,11 +0,0 @@
-import { PermissionItemType } from './interface';
-type Props = {
-    title: string;
-    description: string;
-    permissionState: string;
-    permissionList: Array<PermissionItemType>;
-    onChangePermission: (permission: PermissionItemType, checked: boolean) => void;
-    onCustomAction?: (permission: PermissionItemType) => void;
-};
-export default function DPermissionGroup({ title, description, permissionState, permissionList, onChangePermission, onCustomAction, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/banking/DPermissionItem.d.ts

@@ -1,9 +0,0 @@
-import { PermissionItemType } from './interface';
-type Props = {
-    permission: PermissionItemType;
-    permissionState: string;
-    onChange: (isChecked: boolean) => void;
-    onAction?: () => void;
-};
-export default function DPermissionItem({ permission, permissionState, onChange, onAction, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/banking/DSummaryCard.d.ts

@@ -1,12 +0,0 @@
-import { Trans } from 'react-i18next';
-import { ReactElement } from 'react';
-type Props = {
-    title: string;
-    description: string;
-    icon: string;
-    iconSize: string;
-    iconTheme: string;
-    Summary: ReactElement<typeof Trans> | string;
-};
-export default function DSummaryCard({ title, description, icon, iconSize, iconTheme, Summary, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/banking/index.d.ts

@@ -1,3 +0,0 @@
-export { default as DPermissionGroup } from './DPermissionGroup';
-export { default as DPermissionItem } from './DPermissionItem';
-export { default as DSummaryCard } from './DSummaryCard';

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

@@ -1,7 +0,0 @@
-export type PermissionItemType = {
-    id: string;
-    enabled: boolean;
-    label: string;
-    type: string;
-    value: unknown;
-};

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

@@ -1,26 +0,0 @@
-.badge {
-  --#{$prefix}badge-bg: #{$badge-bg};
-  --#{$prefix}badge-dot-height: #{$badge-dot-height};
-
-  display: inline-block;
-  background-color: var(--#{$prefix}badge-bg);
-
-  @each $theme, $value in $theme-colors {
-    $color: color-contrast-var($value);
-    &.badge-#{$theme} {
-      --#{$prefix}badge-color: #{$color};
-      --#{$prefix}badge-bg: var(--#{$prefix}#{$theme});
-    }
-  }
-
-  &.badge-dot {
-    min-width: var(--#{$prefix}badge-dot-height);
-    height: var(--#{$prefix}badge-dot-height);
-    padding: 0;
-    border-radius: var(--#{$prefix}badge-border-radius);
-
-    > span {
-      vertical-align: middle;
-    }
-  }
-}

package/src/style/components/_d-permission-group.scss

@@ -1,39 +0,0 @@
-.operation-group {
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--#{$prefix}gray-300);
-  }
-}
-
-.permission-item {
-  padding: 8px 0;
-  .form-switch-box {
-    width: auto;
-  }
-  .label {
-    font-size: .875rem;
-  }
-  &:hover {
-    background: #f7f7ff;
-  }
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--#{$prefix}gray-300);
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .permission-item {
-    padding: 8px 10px;
-  }
-  .permission-item .label {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .operation-group  {
-    border-top: 1px solid var(--#{$prefix}gray-300);
-    &:not(:last-child) {
-      border-bottom: none;
-    }
-  }
-}