chore: extract button from core for error-boundary

Signed-off-by: Gabriel <gaccettola@mirantis.com>

packages/ui-components/button/src/button.scss

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+
+.Button {
+  position: relative;
+  overflow: hidden; // required for transition effect on hover
+  color: white;
+  font-family: var(--font-main);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  background: var(--buttonDefaultBackground);
+  padding: round(8px * .9) 8px * 1.5;
+  flex-shrink: 0;
+  line-height: 1;
+  font-size: var(--font-size);
+  user-select: none;
+
+  &[href] {
+    display: inline-block;
+  }
+
+  &.primary {
+    background: var(--buttonPrimaryBackground);
+  }
+
+  &.accent {
+    background: var(--buttonAccentBackground);
+  }
+
+  &.light {
+    background-color: var(--buttonLightBackground);
+    color: #505050;
+  }
+
+  &.plain {
+    color: inherit;
+    background: transparent;
+    box-shadow: none;
+
+    &:disabled {
+      background: none;
+      opacity: .5;
+    }
+
+    &.active,
+    &:focus:not(:active) {
+      color: var(--buttonPrimaryBackground);
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
+  &.outlined {
+    color: inherit;
+    background: transparent;
+
+    &.active,
+    &:focus {
+      color: inherit;
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
+  &.big {
+    font-size: 2.2 * 8px;
+    border-radius: 50px;
+    padding: .75em 1em;
+  }
+
+  &.round {
+    border-radius: 50%;
+    padding: .7em;
+  }
+
+  form:not([novalidate]):invalid &[type=submit]:not(.active),
+  &:disabled {
+    opacity: 50%;
+    pointer-events: none;
+  }
+
+  &.waiting {
+    pointer-events: none;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 0;
+      height: 100%;
+      background: transparentize(white, .85);
+      animation: waiting 1.5s infinite linear;
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus:not(:active) {
+    transition: box-shadow 350ms;
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
+  }
+
+  &:active:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: transparentize(white, .85);
+    transform-origin: left top;
+    transition: transform 150ms;
+    transform: rotate(0deg);
+    // hackfix: safari prevents clicks on button when click-target is a child element nor button itself
+    pointer-events: none;
+  }
+
+  &:before {
+    content: "";
+    transform: rotate(-90deg);
+  }
+}
+
+@keyframes waiting {
+  0% {
+    left: 0;
+    width: 0;
+  }
+  50% {
+    left: 25%;
+    width: 75%;
+  }
+  75% {
+    left: 100%;
+    width: 0;
+  }
+}

packages/ui-components/button/src/button.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./button.scss";
+import type { ButtonHTMLAttributes } from "react";
+import React from "react";
+import { cssNames } from "@k8slens/utilities";
+import { withTooltip } from "@k8slens/tooltip";
+
+export interface ButtonProps extends ButtonHTMLAttributes<any> {
+  label?: React.ReactNode;
+  waiting?: boolean;
+  primary?: boolean;
+  accent?: boolean;
+  light?: boolean;
+  plain?: boolean;
+  outlined?: boolean;
+  hidden?: boolean;
+  active?: boolean;
+  big?: boolean;
+  round?: boolean;
+  href?: string; // render as hyperlink
+  target?: "_blank"; // in case of using @href
+}
+
+export const Button = withTooltip((props: ButtonProps) => {
+  const {
+    waiting, label, primary, accent, plain, hidden, active, big,
+    round, outlined, light, children, ...btnProps
+  } = props;
+
+  if (hidden) return null;
+
+  btnProps.className = cssNames("Button", btnProps.className, {
+    waiting, primary, accent, plain, active, big, round, outlined, light,
+  });
+
+  // render as link
+  if (props.href) {
+    return (
+      <a {...btnProps}>
+        {label}
+        {children}
+      </a>
+    );
+  }
+
+  // render as button
+  return (
+    <button
+      type="button"
+      {...btnProps}
+      data-waiting={typeof waiting === "boolean" ? String(waiting) : undefined}
+    >
+      {label}
+      {children}
+    </button>
+  );
+});

packages/ui-components/button/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./button";