@platformatic/ui-components 0.19.1 → 0.19.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Button.jsx

@@ -12,7 +12,8 @@ import {
   ACTIVE_AND_INACTIVE_STATUS,
   TRANSPARENT
 } from './constants'
-// ${inactive ? styles.inactive : styles.active}
+import SpinnerCircularV2 from './loaders/SpinnerCircularV2'
+
 function Button ({
   textClass = '',
   paddingClass = '',
@@ -28,6 +29,7 @@ function Button ({
   platformaticIcon = null,
   platformaticIconAfter = null,
   selected = false,
+  loading = false,
   ...rest
 }) {
   let buttonClassName = textClass
@@ -39,7 +41,7 @@ function Button ({
   } else {
     contentClassName += `${styles['button-' + size]} `
   }
-  if (disabled) {
+  if (disabled || loading) {
     tmpBorderedClassName = commonStyles[`bordered--${color}-30`]
     buttonClassName += ` ${styles.disabled}`
   } else {
@@ -109,6 +111,8 @@ function Button ({
   return (
     <button className={`${buttonClassName} ${restClassName()} ${borderedClassName}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
       <div className={`${contentClassName} ${backgroundClassName}`}>
+        {loading ? <SpinnerCircularV2 className={styles.spinner} size={28} thickness={1} color={color} /> : null}
+
         {platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
         <span className={styles.label}>{label}</span>
         {platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}

package/src/components/Button.module.css

@@ -145,4 +145,7 @@
 }
 .cursorDefault {
   @apply cursor-default;
-}
+}
+.spinner {
+  @apply z-50 relative transform -translate-x-1/2 -translate-y-1/2
+}

package/src/components/LoadingSpinner.jsx

@@ -2,13 +2,13 @@ import React from 'react'
 import styles from './LoadingSpinner.module.css'
 import SpinnerCircular from './loaders/SpinnerCircular'
 
-function LoadingSpinner ({ loading = false }) {
+function LoadingSpinner ({ loading = false, size = 60 }) {
   // If null then loading not started, if true then loading, if false then done loading
   return loading
     ? (
       <div className={styles.container} data-testid='loading-spinner'>
         <div data-testid='loading-spinner-content' className={styles.relative}>
-          <SpinnerCircular className={styles.spinner} size={60} />
+          <SpinnerCircular className={styles.spinner} size={size} />
         </div>
       </div>
       )

package/src/components/loaders/SpinnerCircularV2.jsx

@@ -0,0 +1,31 @@
+// https://loading.io/css/
+import React from 'react'
+import styles from './SpinnerCircularV2.module.css'
+import { WHITE } from '../constants'
+
+function SpinnerCircular ({
+  className = '',
+  color = WHITE,
+  size = 60,
+  thickness = 4
+}) {
+  const styleRing = { width: `${size / 4}px`, height: `${size / 4}px` }
+  const styleDiv = {
+    width: `${size - 16}px`,
+    height: `${size - 16}px`,
+    margin: `${thickness}px`,
+    borderWidth: `${thickness}px`
+  }
+
+  const spinnerClassName = styles[`ring${color}`] + ` ${styles.ring} ${className}`
+  return (
+    <div className={spinnerClassName} style={styleRing}>
+      <div style={styleDiv} />
+      <div style={styleDiv} />
+      <div style={styleDiv} />
+      <div style={styleDiv} />
+    </div>
+  )
+}
+
+export default SpinnerCircular

package/src/components/loaders/SpinnerCircularV2.module.css

@@ -0,0 +1,34 @@
+.ringwhite {
+  color: white;
+}
+.ring,
+.ring div {
+  box-sizing: border-box;
+}
+.ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  border-style: solid;
+  border-color: currentColor;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: currentColor transparent transparent transparent;
+}
+.ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/stories/Button.stories.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Button from '../components/Button'
 import {
   ALTERNATE_RICH_BLACK,
@@ -670,3 +670,28 @@ export const FigmaTemplate = DesignSystem.bind({})
 FigmaTemplate.args = {
   label: 'Sample label'
 }
+
+export const LoadingButton = Template.bind({})
+LoadingButton.args = {
+  label: 'Loading Button',
+  loading: true
+}
+
+export const ClickToLoad = (args) => {
+  const [loading, setLoading] = useState(false)
+  return (
+    <Button
+      label='Click to Load'
+      loading={loading}
+      onClick={() => {
+        setLoading(true)
+        setTimeout(() => setLoading(false), 2000)
+      }}
+    />
+  )
+}
+
+ClickToLoad.args = {
+  label: 'Click to Load',
+  loading: false
+}