@digi-frontend/dgate-api-documentation 1.0.39 → 1.0.50

package/src/components/dialog/dialog.ts

@@ -1,54 +1,58 @@
-export type DialogStatus = 'error' | 'info' | 'warning'
-export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ButtonType = 'text' | 'submit' | 'reset'
-export type ButtonVariant = 'outlined' | 'contained' | 'text' | 'link'
-export type ButtonColor =
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'warning'
-  | 'action'
-  | 'normal'
-export type ButtonSize = 'small' | 'medium' | 'large'
-
-export interface BaseActionButtonProps {
-  text: string
-  color?: ButtonColor
-  variant?: ButtonVariant
-  type?: ButtonType
-  size?: ButtonSize
-  id?: string
-  className?: string
-  disabled?: boolean
-  startIcon?: JSX.Element
-  endIcon?: JSX.Element
-  dataId?: string
-  loading?: boolean
-  fullWidth?: boolean
-  active?: boolean
-  onKeyDown?: () => void
-}
-
-export interface SubmitButtonProps extends BaseActionButtonProps {
-  onClick: () => void // Required for submit
-}
-
-export interface CancelButtonProps extends BaseActionButtonProps {
-  onClick?: () => void // Optional for cancel
-}
-
-export interface CommonDialogProps {
-  status?: DialogStatus
-  content?: React.ReactElement
-  onSubmit?: SubmitButtonProps
-  onCancel?: CancelButtonProps
-  onClose: () => void
-  open?: boolean
-  icon?: JSX.Element | boolean
-  size?: DialogSize
-  children?: React.ReactElement
-  statusTitle?: boolean
-}
+export type DialogStatus = 'error' | 'info' | 'warning'
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonType = 'text' | 'submit' | 'reset'
+export type ButtonVariant = 'outlined' | 'contained' | 'text' | 'link'
+export type ButtonColor =
+  | 'inherit'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'info'
+  | 'warning'
+  | 'action'
+  | 'normal'
+export type ButtonSize = 'small' | 'medium' | 'large'
+
+export interface BaseActionButtonProps {
+  text: string
+  color?: ButtonColor
+  variant?: ButtonVariant
+  type?: ButtonType
+  size?: ButtonSize
+  id?: string
+  className?: string
+  disabled?: boolean
+  startIcon?: JSX.Element
+  endIcon?: JSX.Element
+  dataId?: string
+  loading?: boolean
+  fullWidth?: boolean
+  active?: boolean
+  onKeyDown?: () => void
+}
+
+export interface SubmitButtonProps extends BaseActionButtonProps {
+  onClick: () => void // Required for submit
+}
+
+export interface CancelButtonProps extends BaseActionButtonProps {
+  onClick?: () => void // Optional for cancel
+}
+
+export interface CommonDialogProps {
+  status?: DialogStatus
+  content?: React.ReactElement
+  onSubmit?: SubmitButtonProps
+  onCancel?: CancelButtonProps
+  onClose: () => void
+  open?: boolean
+  icon?: JSX.Element | boolean
+  size?: DialogSize
+  children?: React.ReactElement
+  statusTitle?: boolean
+  isSubmitDisabled?: boolean
+  submitBtnComponent?: JSX.Element | null
+  withClose?: boolean
+  noActions?: boolean
+}

package/src/components/dialog/index.tsx

@@ -1,85 +1,89 @@
-import React from 'react'
-// @ts-ignore
-import { Dialog, Button, CloseIcon, infoIcon } from '@digi-frontend/dgate-ui'
-import SVGLoader from '../SVGLoader/SVGLoader'
-import './style.scss'
-import { CommonDialogProps } from './dialog'
-
-const CommonDialog = ({
-  status = 'info',
-  content,
-  onSubmit,
-  onCancel,
-  onClose,
-  open,
-  size = 'xs',
-  icon = (
-    <>
-      <SVGLoader src={infoIcon} width="4.0625rem" height="4.0625rem" />
-    </>
-  ),
-}: CommonDialogProps) => {
-  const handleClose = () => {
-    onClose() // Always close the dialog first
-
-    if (onCancel && onCancel.onClick) {
-      onCancel.onClick() // If onCancel.onClick is provided, invoke it after closing the dialog
-    }
-  }
-
-  const body = (
-    <div className="common-dialog">
-      {icon && (
-        <div className="confirmation-dialog-header">
-          <div className={`icon ${status}`}>{icon}</div>
-        </div>
-      )}
-      <SVGLoader
-        src={CloseIcon}
-        width={'1.5rem'}
-        height={'1.5rem'}
-        onClick={handleClose}
-        className="close-icon"
-      />
-
-      {content}
-      <div
-        className="confirmation-dialog-footer"
-        style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
-      >
-        {onCancel && (
-          <Button
-            {...onCancel}
-            onClick={handleClose}
-            variant={onCancel.variant || 'outlined'}
-            color={onCancel.color || 'normal'}
-          >
-            {onCancel.text}
-          </Button>
-        )}
-        {onSubmit && (
-          <Button
-            {...onSubmit}
-            variant={onSubmit.variant || 'contained'}
-            color={onSubmit.color || 'secondary'}
-          >
-            {onSubmit.text}
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-
-  return (
-    <Dialog
-      open={open}
-      onClose={handleClose}
-      content={body}
-      fullWidth={false}
-      size={size}
-      id="common-dialog"
-    />
-  )
-}
-
-export default CommonDialog
+import React from 'react'
+// @ts-ignore
+import { Dialog, Button, CloseIcon, infoIcon } from 'digitinary-ui'
+import SVGLoader from '../SVGLoader/SVGLoader'
+import './style.scss'
+import { CommonDialogProps } from './dialog'
+import { Closecircle, InfoIcon } from './../../assets/icons'
+
+const CommonDialog = ({
+  status = 'info',
+  content,
+  onSubmit,
+  onCancel,
+  onClose,
+  open,
+  size = 'xs',
+  icon = (
+    <>
+      <SVGLoader src={InfoIcon} width="4.0625rem" height="4.0625rem" />
+    </>
+  ),
+  noActions = false,
+}: CommonDialogProps) => {
+  const handleClose = () => {
+    onClose() // Always close the dialog first
+
+    if (onCancel && onCancel.onClick) {
+      onCancel.onClick() // If onCancel.onClick is provided, invoke it after closing the dialog
+    }
+  }
+
+  const body = (
+    <div className="common-dialog">
+      {icon && (
+        <div className="confirmation-dialog-header">
+          <div className={`icon ${status}`}>{icon}</div>
+        </div>
+      )}
+      <SVGLoader
+        src={Closecircle}
+        width={'1.5rem'}
+        height={'1.5rem'}
+        onClick={handleClose}
+        className="close-icon"
+      />
+
+      {content}
+      {!!noActions ? null : (
+        <div
+          className="confirmation-dialog-footer"
+          style={{ marginBottom: onCancel || onSubmit ? '1.5rem' : '1rem' }}
+        >
+          {onCancel && (
+            <Button
+              {...onCancel}
+              onClick={handleClose}
+              variant={onCancel.variant || 'outlined'}
+              color={onCancel.color || 'normal'}
+            >
+              {onCancel.text}
+            </Button>
+          )}
+          {onSubmit && (
+            <Button
+              {...onSubmit}
+              variant={onSubmit.variant || 'contained'}
+              color={onSubmit.color || 'secondary'}
+            >
+              {onSubmit.text}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      content={body}
+      fullWidth={false}
+      size={size}
+      id="common-dialog"
+    />
+  )
+}
+
+export default CommonDialog

package/src/components/dialog/style.scss

@@ -1,104 +1,188 @@
-#common-dialog {
-  &.dialog-content-wrapper {
-    overflow: visible !important;
-    max-height: 100%;
-    width: 22.1875rem;
-
-    .dialog-content-root {
-      overflow: visible !important;
-      border-radius: 0.625rem;
-      max-height: 100%;
-
-      .dialog-content {
-        padding: 0 1.875rem !important;
-        overflow: visible !important;
-        max-height: 100%;
-
-        .common-dialog {
-          position: relative;
-
-          .close-icon {
-            position: absolute;
-            z-index: 1;
-            top: 1.5rem;
-            right: 0;
-            transform: translate(0.625rem, -0.625rem);
-            cursor: pointer;
-          }
-
-          .confirmation-dialog-header {
-            display: flex;
-            padding-top: 0.5rem;
-            position: relative;
-
-            .icon {
-              margin-top: 1rem;
-              margin-bottom: 1.5rem;
-              margin-inline: auto;
-
-              &.info {
-                path {
-                  stroke: #12131a;
-                }
-
-                line {
-                  stroke: #12131a;
-
-                  & + path {
-                    fill: #12131a;
-                  }
-                }
-              }
-
-              &.warning {
-                path {
-                  stroke: #faad14;
-                }
-
-                line {
-                  stroke: #faad14;
-                }
-              }
-
-              &.error {
-                path {
-                  stroke: #da3f3f;
-                }
-
-                line {
-                  stroke: #da3f3f;
-
-                  & + path {
-                    fill: #da3f3f;
-                  }
-                }
-              }
-            }
-          }
-
-          .confirmation-title {
-            font-size: 1.5rem;
-            font-weight: 500;
-            line-height: 1.875rem;
-            text-align: center;
-            margin-bottom: 0.625rem;
-
-            &.error-title {
-              color: #da3f3f;
-            }
-
-            &.warning-title {
-              color: #faad14;
-            }
-          }
-
-          .confirmation-dialog-footer {
-            display: flex;
-            gap: 1.25rem;
-            margin-top: 1.875rem;
-          }
-        }
-      }
-    }
-  }
-}
+#common-dialog {
+  &.dialog-content-wrapper {
+    overflow: visible !important;
+    max-height: 100%;
+    width: 22.1875rem;
+
+    .dialog-content-root {
+      overflow: visible !important;
+      border-radius: 0.625rem;
+      max-height: 100%;
+
+      .dialog-content {
+        padding: 0 1.875rem !important;
+        overflow: visible !important;
+        max-height: 100%;
+
+        .common-dialog {
+          position: relative;
+
+          .close-icon {
+            position: absolute;
+            z-index: 1;
+            top: 1.5rem;
+            right: 0;
+            transform: translate(0.625rem, -0.625rem);
+            cursor: pointer;
+          }
+
+          .confirmation-dialog-header {
+            display: flex;
+            padding-top: 0.5rem;
+            position: relative;
+
+            .icon {
+              margin-top: 1rem;
+              margin-bottom: 1.5rem;
+              margin-inline: auto;
+
+              &.info {
+                path {
+                  stroke: #12131a;
+                }
+
+                line {
+                  stroke: #12131a;
+
+                  & + path {
+                    fill: #12131a;
+                  }
+                }
+              }
+
+              &.warning {
+                path {
+                  stroke: #faad14;
+                }
+
+                line {
+                  stroke: #faad14;
+                }
+              }
+
+              &.error {
+                path {
+                  stroke: #da3f3f;
+                }
+
+                line {
+                  stroke: #da3f3f;
+
+                  & + path {
+                    fill: #da3f3f;
+                  }
+                }
+              }
+            }
+          }
+
+          .confirmation-title {
+            font-size: 1.5rem;
+            font-weight: 500;
+            line-height: 1.875rem;
+            text-align: center;
+            margin-bottom: 0.625rem;
+
+            &.error-title {
+              color: #da3f3f;
+            }
+
+            &.warning-title {
+              color: #faad14;
+            }
+          }
+
+          .confirmation-dialog-footer {
+            display: flex;
+            gap: 1.25rem;
+            margin-top: 1.875rem;
+          }
+        }
+      }
+    }
+  }
+}
+.common-dialog {
+  position: relative;
+
+  .close-icon {
+    position: absolute !important;
+    z-index: 1 !important;
+    top: 0.75rem !important;
+    right: 0.4rem !important;
+    transform: translate(0.625rem, -0.625rem) !important;
+    cursor: pointer !important;
+  }
+
+  .confirmation-dialog-header {
+    display: flex;
+    padding-top: 0.5rem;
+    position: relative;
+
+    .icon {
+      margin-top: 1rem;
+      margin-bottom: 1.5rem;
+      margin-inline: auto;
+
+      &.info {
+        path {
+          stroke: #12131a;
+        }
+
+        line {
+          stroke: #12131a;
+
+          & + path {
+            fill: #12131a;
+          }
+        }
+      }
+
+      &.warning {
+        path {
+          stroke: #faad14;
+        }
+
+        line {
+          stroke: #faad14;
+        }
+      }
+
+      &.error {
+        path {
+          stroke: #da3f3f;
+        }
+
+        line {
+          stroke: #da3f3f;
+
+          & + path {
+            fill: #da3f3f;
+          }
+        }
+      }
+    }
+  }
+
+  .confirmation-title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 1.875rem;
+    text-align: center;
+    margin-bottom: 0.625rem;
+
+    &.error-title {
+      color: #da3f3f;
+    }
+
+    &.warning-title {
+      color: #faad14;
+    }
+  }
+
+  .confirmation-dialog-footer {
+    display: flex;
+    gap: 1.25rem;
+    margin-top: 1.875rem;
+  }
+}