@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.4

package/src/components/dialog/dialog.ts

@@ -1,61 +1,54 @@
-import { JSX } from 'react'
-
-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
-  closeIcon?: JSX.Element
-}
+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
+}

package/src/components/dialog/index.tsx

@@ -1,88 +1,85 @@
-import React from 'react'
-// @ts-ignore
-import { Dialog, Button } 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,
-  closeIcon,
-}: 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>
-      )}
-      <div className="close-icon">
-        {closeIcon ?? (
-          <SVGLoader src={Closecircle} width={'1.5rem'} height={'1.5rem'} onClick={handleClose} />
-        )}
-      </div>
-
-      {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
+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

package/src/components/dialog/style.scss

@@ -1,188 +1,104 @@
-#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;
-  }
-}
+#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;
+          }
+        }
+      }
+    }
+  }
+}