@platformatic/ui-components 0.1.80 → 0.1.82

package/src/stories/ButtonFullRounded.stories.jsx

@@ -1,6 +1,27 @@
 'use strict'
 import ButtonFullRounded from '../components/ButtonFullRounded'
-import { COLORS_ICON, SIZES } from '../components/constants'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE } from '../components/constants'
+import Icons from '../components/icons'
+
+const divStyle = {
+  width: '100%'
+}
+
+const row = {
+  display: 'flex',
+  width: '100%',
+  columnGap: '1rem',
+  alignItems: 'center'
+}
+
+const col = {
+  flex: 1
+}
+
+const paragraph = {
+  color: 'white',
+  fontSize: '12px'
+}
 
 export default {
   title: 'Platformatic/ButtonFullRounded',
@@ -13,49 +34,62 @@ export default {
     bold: {
       type: 'boolean'
     },
-    color: {
+    iconColor: {
       type: 'string',
       control: {
         type: 'radio',
         options: COLORS_ICON
       }
     },
-    size: {
+    iconSize: {
       type: 'string',
       control: {
         type: 'radio',
         options: SIZES
       }
+    },
+    selected: {
+      type: 'boolean'
     }
   }
 }
 
 const Template = (args) => <ButtonFullRounded {...args} />
 
-export const WhiteLarge = Template.bind({})
-WhiteLarge.args = {
-  iconName: 'PlayIcon',
-  iconSize: 'large'
+export const SingleButton = Template.bind({})
+SingleButton.args = {
+  iconName: 'PlayIcon'
 }
 
-export const GreenSmall = Template.bind({})
-GreenSmall.args = {
-  iconName: 'StopIcon',
-  iconColor: 'main-green',
-  iconSize: 'small'
-}
+const AllCircleButtonsTemplate = (args) => {
+  const icons = Object.values(Icons).filter(icon => icon.name.indexOf('Circle') > -1)
 
-export const Disabled = Template.bind({})
-
-Disabled.args = {
-  iconName: 'BellIcon',
-  disabled: true
+  return (
+    <>
+      <div style={divStyle}>
+        <p style={paragraph}>All Buttons with Circle Icons: {icons.length} </p>
+        {icons.map((IconComponent, index) => (
+          <div style={row} key={index}>
+            <div style={col}>
+              <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
+            </div>
+            <div style={col}>
+              <ButtonFullRounded key={IconComponent.name} iconName={IconComponent.name} iconSize={SMALL} {...args} />
+            </div>
+            <div style={col}>
+              <ButtonFullRounded key={IconComponent.name} iconName={IconComponent.name} iconSize={MEDIUM} {...args} />
+            </div>
+            <div style={col}>
+              <ButtonFullRounded key={IconComponent.name} iconName={IconComponent.name} iconSize={LARGE} {...args} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  )
 }
-
-export const DisabledRed = Template.bind({})
-
-DisabledRed.args = {
-  iconName: 'StopIcon',
-  iconColor: 'error-red',
-  disabled: true
+export const AllButtonFullRounded = AllCircleButtonsTemplate.bind({})
+AllButtonFullRounded.args = {
+  iconColor: 'white',
+  onClick: null
 }

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
 import Icons from '../components/icons'
-import { COLORS_ICON } from '../components/constants'
+import { COLORS_ICON, EXTRA_LARGE, EXTRA_SMALL, LARGE, MEDIUM, SMALL } from '../components/constants'
 
 const divStyle = {
   width: '100%'
@@ -64,16 +64,19 @@ const AllIconsTemplate = (args) => {
               <p style={paragraph}>#{index + 1}: {IconComponent.name}</p>
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='small' {...args} />
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={EXTRA_SMALL} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='medium' {...args} />
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={SMALL} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='large' {...args} />
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={MEDIUM} {...args} />
             </div>
             <div style={col}>
-              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size='extra-large' {...args} />
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={LARGE} {...args} />
+            </div>
+            <div style={col}>
+              <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} size={EXTRA_LARGE} {...args} />
             </div>
           </div>
         ))}

package/src/stories/TabbedWindow.stories.jsx

@@ -0,0 +1,28 @@
+'use strict'
+import TabbedWindow from '../components/TabbedWindow'
+import TextWithLabel from '../components/TextWithLabel'
+export default {
+  title: 'Platformatic/TabbedWindow',
+  component: TabbedWindow
+}
+const Template = (args) => {
+  return (
+    <>
+      <TabbedWindow {...args} />
+    </>
+
+  )
+}
+export const Default = Template.bind({})
+Default.args = {
+  tabs: [{
+    label: 'First',
+    component: () => <TextWithLabel label='First component' text='Lorem ipsum dolor sit amet, consectetur adipiscing elit.' />
+  }, {
+    label: 'Second',
+    component: () => <TextWithLabel label='Second component' text='Sed et dui facilisis, molestie urna sed, volutpat nibh' />
+  }, {
+    label: 'Third',
+    component: () => <TextWithLabel label='Third component' text='ivamus est nisl, maximus aliquet urna eu, consequat semper nisi' />
+  }]
+}