feat: implement most diagnostics actions

fe-app-podkop/src/partials/button/renderButton.ts

@@ -0,0 +1,69 @@
+import { insertIf } from '../../helpers';
+import { renderLoaderCircleIcon24 } from '../../icons';
+
+interface IRenderButtonProps {
+  classNames?: string[];
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: () => SVGSVGElement;
+  onClick: () => void;
+  text: string;
+}
+
+export function renderButton({
+  classNames = [],
+  disabled,
+  loading,
+  onClick,
+  text,
+  icon,
+}: IRenderButtonProps) {
+  const hasIcon = !!loading || !!icon;
+
+  function getWrappedIcon() {
+    const iconWrap = E('span', {
+      class: 'pdk-partial-button__icon',
+    });
+
+    if (loading) {
+      iconWrap.appendChild(renderLoaderCircleIcon24());
+
+      return iconWrap;
+    }
+
+    if (icon) {
+      iconWrap.appendChild(icon());
+
+      return iconWrap;
+    }
+
+    return iconWrap;
+  }
+
+  function getClass() {
+    return [
+      'btn',
+      'pdk-partial-button',
+      ...insertIf(Boolean(disabled), ['pdk-partial-button--disabled']),
+      ...insertIf(Boolean(loading), ['pdk-partial-button--loading']),
+      ...insertIf(Boolean(hasIcon), ['pdk-partial-button--with-icon']),
+      ...classNames,
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }
+
+  function getDisabled() {
+    if (loading || disabled) {
+      return true;
+    }
+
+    return undefined;
+  }
+
+  return E(
+    'button',
+    { class: getClass(), disabled: getDisabled(), click: onClick },
+    [...insertIf(hasIcon, [getWrappedIcon()]), E('span', {}, text)],
+  );
+}

fe-app-podkop/src/partials/button/styles.ts

@@ -0,0 +1,33 @@
+// language=CSS
+export const styles = `
+.pdk-partial-button {
+    text-align: center;
+}
+
+.pdk-partial-button--with-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pdk-partial-button--loading {
+}
+
+.pdk-partial-button--disabled {
+}
+
+.pdk-partial-button__icon {
+    margin-right: 5px;
+}
+
+.pdk-partial-button__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pdk-partial-button__icon svg {
+    width: 16px;
+    height: 16px;
+}
+`;

fe-app-podkop/src/partials/index.ts

@@ -0,0 +1,7 @@
+import { styles as ButtonStyles } from './button/styles';
+
+export * from './button/renderButton';
+
+export const PartialStyles = `
+${ButtonStyles}
+`;