@platformatic/ui-components 0.1.26 → 0.1.29

package/package.json

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

package/src/components/Button.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 export default function Button (props) {
-  const { icon, label, primary, color } = props
+  const { icon, label, primary, color, disabled } = props
   let buttonClass = 'primary'
   if (!primary) {
     buttonClass = 'secondary'
@@ -15,7 +15,7 @@ export default function Button (props) {
     colorClass = 'red'
   }
   return (
-    <button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]}`} {...props}>
+    <button className={`${styles.button} ${styles[buttonClass + '-' + colorClass]} ${disabled ? styles.disabled : null}`} disabled={disabled} {...props}>
       {icon ? <FontAwesomeIcon icon={icon} className='mr-2' data-testid='button-icon' /> : null}
       <span>{label}</span>
     </button>

package/src/components/Button.module.css

@@ -14,4 +14,8 @@
 }
 .secondary-red {
   @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md font-normal;
+}
+
+.disabled {
+  @apply bg-opacity-30 cursor-default;
 }

package/src/components/Modal.module.css

@@ -9,7 +9,7 @@
   @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
 }
 .modal {
-  @apply bg-[#E9F7FF] p-4 rounded-md mx-auto my-auto min-w-[480px];
+  @apply bg-[#E9F7FF] p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-scroll;
 }
 .header {
   @apply flex justify-between items-center;

package/src/stories/Button.stories.jsx

@@ -1,5 +1,6 @@
 'use strict'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
 import Button from '../components/Button'
 
 export default {
@@ -69,3 +70,38 @@ SecondaryRed.args = {
   label: 'Secondary Red',
   color: 'red'
 }
+
+const DisabledTemplate = (args) => {
+  const [enabled, setEnabled] = useState(false)
+  return (
+    <div className='flex flex-col gap-y-6 text-white'>
+      <div>
+        <Button {...args} disabled={!enabled} onClick={() => alert('clicked')} />
+        <span className='ml-4 text-xl'>👈 This button is {enabled ? 'enabled' : 'disabled'}</span>
+      </div>
+      <div>
+        <Button label='Toggle Disabled' primary='true' onClick={() => setEnabled(!enabled)} />
+      </div>
+
+    </div>
+
+  )
+}
+
+export const DisabledGreen = DisabledTemplate.bind({})
+
+DisabledGreen.args = {
+  primary: true,
+  label: 'A simple button',
+  color: 'green',
+  disabeld: true
+}
+
+export const DisabledRed = DisabledTemplate.bind({})
+
+DisabledRed.args = {
+  primary: true,
+  label: 'A simple button',
+  color: 'red',
+  disabeld: true
+}

package/src/stories/Modal.stories.jsx

@@ -16,7 +16,7 @@ const Template = (args) => {
       <BorderedBox>This Is another Content</BorderedBox>
       <ContentThatLoads />
       <Button color='green' primary='true' onClick={() => setIsOpen(true)} label='Open Modal' />
-      {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
+      {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>{args.text}</Modal>}
     </main>
   )
 }
@@ -32,7 +32,17 @@ const ContentThatLoads = () => {
 
 export const Default = Template.bind({})
 Default.args = {
-  title: 'List Title'
+  title: 'List Title',
+  text: 'Hello World'
+}
+
+export const WithLongText = Template.bind({})
+
+WithLongText.args = {
+  title: 'Modal',
+  text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum, lorem nec tincidunt pellentesque, odio orci posuere lacus, et hendrerit turpis dolor nec metus. Nunc quis finibus enim. Vestibulum a mollis velit. Ut nec vestibulum urna. Phasellus ut odio nec leo hendrerit laoreet eget at turpis. Nulla facilisi. Vivamus accumsan arcu malesuada, imperdiet ligula vitae, varius elit. Morbi blandit eros nec eros rutrum mattis. Nulla nibh nisi, pellentesque a ornare at, ultrices sit amet felis. Nulla bibendum metus diam, vitae gravida dui semper iaculis.
+  
+  `.repeat(5)
 }
 
 const MenuTemplate = () => {