@integry/sdk 4.5.2 → 4.5.4

package/src/components/MultipurposeField/styles.module.scss

@@ -0,0 +1,56 @@
+.multipurposeFieldContainer {
+  position: relative;
+  .multipurposeField {
+    textarea {
+      height: 112px;
+      font-size: 12px;
+      line-height: 20px;
+      border-radius: 4px;
+      padding: 12px;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 166.667% */
+
+      &:focus {
+        outline: none;
+      }
+
+      &::placeholder {
+        color: var(--black-and-grey-draft-and-tooltip-desc, #999);
+        font-family: Inter;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 166.667% */
+      }
+    }
+    fieldset {
+      margin-bottom: 16px !important;
+    }
+    tags {
+      width: 100%;
+      max-width: 682px;
+      font-family: 'Inter';
+      height: 40px;
+      padding-top: 5px;
+      overflow: auto;
+      span {
+        font-size: 12px;
+      }
+      [class^='tagify__input'] {
+        padding: 5px 10px;
+        white-space: nowrap;
+      }
+
+      [class^='tagify__tag'] {
+        z-index: 0;
+      }
+      --tag-bg: #bfdaff;
+      --tag-hover: #bfdaff;
+      --tag-remove-bg: #8cbdff;
+      --tag-inset-shadow-size: 1.2em;
+    }
+  }
+}

package/src/components/NewModal/index.ts

@@ -0,0 +1,69 @@
+import { html, Component } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+interface ModalProps {
+  isOpen: boolean;
+  CustomCloseElement?: any;
+  onClose: () => void;
+  customClass?: string;
+}
+
+class NewModal extends Component<ModalProps> {
+  render() {
+    const { isOpen, CustomCloseElement } = this.props;
+    const { customClass } = this.props;
+    return html`
+      <div
+        class=${`${styles.modal} ${isOpen ? `${styles.open}` : ''} ${(customClass && styles[customClass]) ? `${styles[customClass]}` : ''}`}
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div class=${styles.modalContainer}>
+          <div class=${styles.inset} aria-hidden="true"></div>
+
+          <span class=${styles.span} aria-hidden="true"></span>
+
+          <div
+            class=${`${styles.contentWrap} ${isOpen ? `${styles.open}` : ''}`}
+          >
+            <div class=${styles.content}>
+              ${CustomCloseElement
+                ? html` <div onclick=${this.props.onClose}>
+                    <${CustomCloseElement} />
+                  </div>`
+                : html`
+                    <div onclick=${this.props.onClose} class=${styles.close}>
+                      <svg
+                        width="20"
+                        height="22"
+                        viewBox="0 0 20 22"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14.2426 16.1822L5.75732 6.86328"
+                          stroke="#999999"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                        />
+                        <path
+                          d="M14.2426 6.86328L5.75732 16.1822"
+                          stroke="#999999"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                    </div>
+                  `}
+              ${this.props.isOpen && html` ${this.props.children} `}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export { NewModal };

package/src/components/NewModal/styles.module.scss

@@ -0,0 +1,70 @@
+.modal {
+  display: none;
+  z-index: 99;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow-y: auto;
+  &.open {
+    position: fixed;
+    display: block;
+  }
+  .modalContainer {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 0;
+    .inset {
+      position: fixed;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      opacity: 0.75;
+      background-color: rgba(17, 24, 39, 1);
+    }
+    .span {
+      display: inline-block;
+      height: 100vh;
+      vertical-align: middle;
+    }
+    .contentWrap {
+      display: none;
+      position: relative;
+      background: white;
+      border-radius: 4px;
+      text-align: left;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      &.open {
+        display: inline-block;
+        margin-top: 15vh;
+      }
+      width: auto;
+      max-width: 730px;
+      // max-width: 40vw;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      // vertical-align: middle;
+      .content {
+        position: relative;
+        background: white;
+        // padding-bottom: 30px;
+        border-radius: 4px;
+      }
+      .close {
+        position: absolute;
+        cursor: pointer;
+        top: 10px;
+        right: 10px;
+      }
+    }
+  }
+}
+
+.authConnectionFormModal {
+  [class^="styles-module_contentWrap_"] {
+    max-width: 100% !important;
+  }
+}

package/src/components/OverflowTooltip/index.tsx

@@ -0,0 +1,59 @@
+import { html } from 'htm/preact';
+import { Hint } from '@/components/Tooltip';
+import { useRef, useState, useEffect } from 'preact/hooks';
+
+interface OverflowTooltipProps {
+  className?: string;
+  text: string;
+  onClick?: () => void;
+}
+
+const OverflowTooltip = ({
+  className,
+  text,
+  onClick = () => ({}),
+}: OverflowTooltipProps) => {
+  const [hoverStatus, setHover] = useState(false);
+  const textElementRef = useRef<HTMLElement>();
+  const compareSize = () => {
+    if (textElementRef?.current?.scrollWidth === undefined) return;
+    const compare =
+      textElementRef?.current?.scrollWidth > textElementRef.current.clientWidth;
+    setHover(compare);
+  };
+
+  // compare once and add resize listener on "componentDidMount"
+  useEffect(() => {
+    compareSize();
+    window.addEventListener('resize', compareSize);
+  }, []);
+
+  // remove resize listener again on "componentWillUnmount"
+  useEffect(
+    () => () => {
+      window.removeEventListener('resize', compareSize);
+    },
+    [],
+  );
+
+  // Define state and function to update the value
+
+  return html`<${Hint} dismissOnClick=${false}>
+    <div
+      ref=${textElementRef}
+      style=${{
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        cursor: hoverStatus ? 'pointer' : '',
+      }}
+      className=${`${className}`}
+      onClick=${`${onClick}`}
+      data-hint=${hoverStatus ? text : ''}
+    >
+      ${text}
+    </div>
+  <//>`;
+};
+
+export { OverflowTooltip };

package/src/components/PopUp/ConfirmationPopUp/index.ts

@@ -0,0 +1,58 @@
+import { html } from 'htm/preact';
+import { Modal } from '@/components/Modal';
+import { Button } from '@/components/Button';
+import styles from './styles.module.scss';
+
+interface ConfirmationPopUpProps {
+    isOpen: boolean;
+    title: string;
+    description: string;
+    buttonLabel: string;
+    cancelButtonLabel: string;
+    handleButtonClick?: () => void;
+    handleCancelClick?: () => void;
+    icon?: string;
+}
+
+const ConfirmationPopUp = (props: ConfirmationPopUpProps) => {
+    const { isOpen, title, description, buttonLabel, handleButtonClick, icon, cancelButtonLabel, handleCancelClick } = props;
+    return html`
+        <${Modal}
+        isOpen=${isOpen}
+        onClose=${handleButtonClick}
+        className="confirmation-pop-up"
+        >
+            <div class="${styles.popUpSetup} ${'integry-container__success-pop-up'}">
+            <div class="${styles.popUpContentWrap}">
+                <div class="${styles.icon}">    
+                    ${icon? html`<img class="${styles.iconImg}" src=${icon} alt="icon" />` : ''}
+                </div>
+                <div class="${styles.rightContentWrap}">
+                <div class="${styles.title}">
+                    ${title}
+                </div>
+                <div class="${styles.description}">
+                    ${description}
+                </div>
+                <div class="${styles.buttonWrap}">
+                <${Button} label="${cancelButtonLabel}"
+                    className="integry-btn-grey"
+                    onClick=${handleCancelClick} 
+                    width="123px"
+                    height="40px"
+                    />    
+                <${Button} label="${buttonLabel}"
+                    className="integry-primary-btn"
+                    onClick=${handleButtonClick} 
+                    width="114px"
+                    height="40px"
+                    />
+                </div>
+                </div>
+            </div>
+            </div>
+        <//>
+        `;
+};
+
+export { ConfirmationPopUp }

package/src/components/PopUp/ConfirmationPopUp/styles.module.scss

@@ -0,0 +1,49 @@
+.popUpSetup {
+    padding: 32px;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 0px;
+    .popUpContentWrap {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 15px;
+    }
+    .icon {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        .iconImg {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            object-fit: contain;
+        }
+    }
+    .title {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 30px;
+        color: #333333;
+        margin-bottom: 16px;
+        display: flex;
+        justify-content: flex-start;
+    }
+    .description {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 28px;
+        color: #666666;
+        margin-bottom: 32px;
+    }
+    .buttonWrap {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 10px;
+    }
+}

package/src/components/PopUp/SuccessPopUp/index.ts

@@ -0,0 +1,62 @@
+import { html } from 'htm/preact';
+import { Modal } from '@/components/Modal';
+import { Button } from '@/components/Button';
+import styles from './styles.module.scss';
+
+
+const SuccessIcon = () => html`
+    <svg width="88" height="77" viewBox="0 0 88 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_752_45417)">
+    <path d="M42.6428 61.132C42.5667 61.132 42.4906 61.132 42.4145 61.132C40.3851 61.132 38.4318 60.3202 36.9859 58.8743L18.8481 40.4574C15.9054 37.4641 15.9308 32.6442 18.9242 29.7016C21.9176 26.759 26.7374 26.7843 29.68 29.7777L42.0594 42.3346L66.9449 13.6947C59.9689 5.55169 49.6189 0.376709 38.0513 0.376709C17.047 0.376709 0 17.4237 0 38.428C0 59.4324 17.047 76.4793 38.0513 76.4793C59.0556 76.4793 76.1026 59.4324 76.1026 38.428C76.1026 34.8258 75.5699 31.3505 74.6313 28.0527L48.1476 58.5191C46.7524 60.1173 44.7737 61.0812 42.6428 61.132Z" fill="#5ED78A"/>
+    <path d="M85.3875 4.07996C82.2166 1.34026 77.4221 1.64467 74.657 4.84098L66.9453 13.7196C70.4714 17.8292 73.1096 22.6997 74.6317 28.0776L86.1485 14.8358C88.9136 11.6395 88.5585 6.81965 85.3875 4.07996Z" fill="#FCC700"/>
+    <path d="M42.0596 42.335L29.6802 29.7781C26.7376 26.7847 21.9177 26.7594 18.9244 29.702C15.931 32.6446 15.9056 37.4645 18.8483 40.4578L37.0114 58.8747C38.432 60.3206 40.3853 61.1324 42.4401 61.1324C42.5162 61.1324 42.5923 61.1324 42.6684 61.1324C44.7993 61.0563 46.7779 60.1177 48.1731 58.5195L74.6569 28.0531C73.1348 22.7005 70.4966 17.83 66.9705 13.6951L42.0596 42.335Z" fill="white"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_752_45417">
+    <rect width="88" height="76.1026" fill="white" transform="translate(0 0.376709)"/>
+    </clipPath>
+    </defs>
+    </svg>`;
+
+interface SuccessPopUpProps {
+    isOpen: boolean;
+    title: string;
+    description: string;
+    buttonLabel: string;
+    handleButtonClick?: () => void;
+}
+
+const SuccessPopUp = (props: SuccessPopUpProps) => {
+    const { isOpen, title, description, buttonLabel, handleButtonClick } = props;
+    return html`
+        <${Modal}
+        isOpen=${isOpen}
+        onClose=${handleButtonClick}
+        className="success-pop-up"
+        >
+            <div class="${styles.popUpSetup} ${'integry-container__success-pop-up'}">
+            <div class="${styles.popUpContentWrap}">
+                <div class="${styles.icon}">    
+                    <${SuccessIcon} />
+                </div>
+                <div class="${styles.title}">
+                    ${title}
+                </div>
+                <div class="${styles.description}">
+                    ${description}
+                </div>
+                <div class="${styles.buttonWrap}">
+                    <${Button} label="${buttonLabel}"
+                    className="integry-primary-btn"
+                    onClick=${handleButtonClick} 
+                    width="117px"
+                    height="44px"
+                    />
+                </div>
+            </div>
+            </div>
+        <//>
+        `;
+};
+
+export { SuccessPopUp }

package/src/components/PopUp/SuccessPopUp/styles.module.scss

@@ -0,0 +1,38 @@
+.popUpSetup {
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 10px;
+    .icon {
+        margin-bottom: 35px;
+        display: flex;
+        justify-content: center;
+    }
+    .title {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 29px;
+        color: #1C1A27;
+        margin-bottom: 14px;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+    }
+    .description {
+        font-family: inherit;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 27px;
+        color: #7E7A8F;
+        margin-bottom: 33px;
+        text-align: center;
+    }
+    .buttonWrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

package/src/components/RadioGroup/Radio.ts

@@ -0,0 +1,129 @@
+import { html } from 'htm/preact';
+import { Hint } from '@/components/Tooltip';
+
+import styles from './styles.module.scss';
+
+export interface RadioProps extends HTMLInputElement {
+  description?: string;
+  value: string;
+  isChecked?: boolean;
+  onChange?: (id: string) => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+}
+
+/**
+ * Radio component
+ *
+ */
+export const Radio = (props: RadioProps) => {
+  const {
+    id,
+    description = null,
+    value,
+    isChecked = false,
+    onChange = () => null,
+    isDisabled = false,
+    isReadOnly = false,
+    className = '',
+  } = props;
+
+  const handleRadioChange = (e: MouseEvent) => {
+    e.preventDefault();
+    if (!isDisabled) {
+      if (e.currentTarget instanceof HTMLDivElement) {
+        onChange(id);
+      }
+    }
+  };
+
+  return html`
+  <${Hint} dismissOnClick=${false} position="fixed" deltaY=${15}>
+  ${isReadOnly && html `<span class=${styles.readonlyHint} data-hint=${isReadOnly ? `Cannot modify user selection` : ''}></span>`}
+    <div class=${`${styles.radio} ${className ? styles[className] : ''}`}>
+      <input
+        id=${value}
+        type="radio"
+        name=${id}
+        value=${value}
+        checked=${isChecked}
+        disabled=${isDisabled}
+      />
+      <div class=${styles.labelDiv} onclick=${handleRadioChange}>
+        <label for=${value} class=${isDisabled ? styles.disabled : ''}>
+          <div class=${styles.button}>
+            ${isChecked
+              ? html`
+                ${isDisabled ?
+                    html`
+                      <svg
+                      width="15"
+                      height="15"
+                      viewBox="0 0 15 15"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
+                        fill="white"
+                        stroke="#C8C8C8"
+                        stroke-width="2"
+                      />
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11Z"
+                        fill="#C8C8C8"
+                      />
+                    </svg>
+                    ` : 
+                    html `<svg
+                      width="15"
+                      height="15"
+                      viewBox="0 0 15 15"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
+                        fill="white"
+                        stroke="#4250f0"
+                        stroke-width="2"
+                      />
+                      <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M7.5 11C9.433 11 11 9.433 11 7.5C11 5.567 9.433 4 7.5 4C5.567 4 4 5.567 4 7.5C4 9.433 5.567 11 7.5 11Z"
+                        fill="#4250f0"
+                      />
+                    </svg>
+                  `}
+                `
+              : html`
+                  <svg
+                    width="15"
+                    height="15"
+                    viewBox="0 0 15 15"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5Z"
+                      fill="white"
+                      stroke="#E2E0DB"
+                      stroke-width="2"
+                    />
+                  </svg>
+                `}
+          </div>
+          <div class=${styles.textDiv}>
+            <div class=${styles.text}>${value}</div>
+            ${description &&
+            html`<div class=${styles.description}>${description}</div>`}
+          </div>
+        </label>
+      </div>
+    </div>
+    <//>
+  `;
+};