@platformatic/ui-components 0.3.5 → 0.4.0

package/src/stories/Button.stories.jsx

@@ -1,7 +1,22 @@
 'use strict'
 import React from 'react'
 import Button from '../components/Button'
-import { ALTERNATE_RICH_BLACK, ANTI_FLASH_WHITE, BOX_SHADOW, CHANGE_BACKGROUND_COLOR, COLORS_BUTTON, ERROR_RED, FIRE_ENGINE_RED, HOVER_EFFECTS_BUTTONS, LARGE, RICH_BLACK, SIZES, WHITE, ACTIVE_AND_INACTIVE_STATUS, MEDIUM } from '../components/constants'
+import {
+  ALTERNATE_RICH_BLACK,
+  ANTI_FLASH_WHITE,
+  BOX_SHADOW,
+  CHANGE_BACKGROUND_COLOR,
+  COLORS_BUTTON,
+  ERROR_RED,
+  FIRE_ENGINE_RED,
+  HOVER_EFFECTS_BUTTONS,
+  LARGE,
+  RICH_BLACK,
+  SIZES,
+  WHITE,
+  ACTIVE_AND_INACTIVE_STATUS,
+  MEDIUM
+} from '../components/constants'
 
 const divStyle = {
   width: '100%',
@@ -73,12 +88,21 @@ OnlyLabel.args = {
 const AllBorderedTemplate = (args) => {
   return (
     <>
-      {COLORS_BUTTON.map(color => (
+      {COLORS_BUTTON.map((color) => (
         <React.Fragment key={color}>
           <div className='grid grid-cols-6 gap-2 items-center' key={color}>
             <span className='text-sm'>{color}</span>
-            <Button color={color} onClick={() => alert('clicked ' + color)} {...args} />
-            <Button color={color} onClick={() => alert('clicked ' + color)} disabled {...args} />
+            <Button
+              color={color}
+              onClick={() => alert('clicked ' + color)}
+              {...args}
+            />
+            <Button
+              color={color}
+              onClick={() => alert('clicked ' + color)}
+              disabled
+              {...args}
+            />
           </div>
           <br />
         </React.Fragment>
@@ -97,12 +121,21 @@ AllBordered.args = {
 const AllFilledTemplate = (args) => {
   return (
     <>
-      {COLORS_BUTTON.map(color => (
+      {COLORS_BUTTON.map((color) => (
         <React.Fragment key={color}>
           <div className='grid grid-cols-6 gap-2 items-center'>
             <span className='text-sm'>{color}</span>
-            <Button backgroundColor={color} onClick={() => alert('clicked ' + color)} {...args} />
-            <Button backgroundColor={color} onClick={() => alert('clicked ' + color)} disabled {...args} />
+            <Button
+              backgroundColor={color}
+              onClick={() => alert('clicked ' + color)}
+              {...args}
+            />
+            <Button
+              backgroundColor={color}
+              onClick={() => alert('clicked ' + color)}
+              disabled
+              {...args}
+            />
           </div>
           <br />
         </React.Fragment>
@@ -125,7 +158,9 @@ AllFilled.args = {
 const DesignSystem = (args) => {
   return (
     <div className='grid grid-cols-5 gap-2 items-center'>
-      <span className='text-sm text-white col-span-1'>Disabled with Background Color</span>
+      <span className='text-sm text-white col-span-1'>
+        Disabled with Background Color
+      </span>
       <div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
         <Button
           color={RICH_BLACK}
@@ -156,7 +191,9 @@ const DesignSystem = (args) => {
           bordered={false}
           disabled
           hoverEffect={CHANGE_BACKGROUND_COLOR}
-          hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
+          hoverEffectProperties={{
+            changeBackgroundColor: ALTERNATE_RICH_BLACK
+          }}
           {...args}
         />
         <Button
@@ -170,7 +207,9 @@ const DesignSystem = (args) => {
           {...args}
         />
       </div>
-      <span className='text-sm text-white col-span-1'>Default with Background Color</span>
+      <span className='text-sm text-white col-span-1'>
+        Default with Background Color
+      </span>
       <div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
         <Button
           color={RICH_BLACK}
@@ -198,7 +237,9 @@ const DesignSystem = (args) => {
           onClick={() => alert('clicked Default RICH_BLACK')}
           bordered={false}
           hoverEffect={CHANGE_BACKGROUND_COLOR}
-          hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
+          hoverEffectProperties={{
+            changeBackgroundColor: ALTERNATE_RICH_BLACK
+          }}
           {...args}
         />
         <Button
@@ -211,7 +252,9 @@ const DesignSystem = (args) => {
           {...args}
         />
       </div>
-      <span className='text-sm text-white col-span-1'>Disabled with Background Color 2</span>
+      <span className='text-sm text-white col-span-1'>
+        Disabled with Background Color 2
+      </span>
       <div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
         <Button
           color={RICH_BLACK}
@@ -221,8 +264,16 @@ const DesignSystem = (args) => {
           disabled
           hoverEffect={CHANGE_BACKGROUND_COLOR}
           hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
           {...args}
         />
         <Button
@@ -233,8 +284,16 @@ const DesignSystem = (args) => {
           disabled
           hoverEffect={CHANGE_BACKGROUND_COLOR}
           hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
       </div>
@@ -246,9 +305,19 @@ const DesignSystem = (args) => {
           bordered={false}
           disabled
           hoverEffect={CHANGE_BACKGROUND_COLOR}
-          hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          hoverEffectProperties={{
+            changeBackgroundColor: ALTERNATE_RICH_BLACK
+          }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
         <Button
@@ -259,12 +328,22 @@ const DesignSystem = (args) => {
           disabled
           hoverEffect={CHANGE_BACKGROUND_COLOR}
           hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
       </div>
-      <span className='text-sm text-white col-span-1'>Default with Background Color 2</span>
+      <span className='text-sm text-white col-span-1'>
+        Default with Background Color 2
+      </span>
       <div className='grid grid-cols-2 gap-x-2 bg-rich-black p-2 col-span-2'>
         <Button
           color={RICH_BLACK}
@@ -273,8 +352,16 @@ const DesignSystem = (args) => {
           hoverEffect={CHANGE_BACKGROUND_COLOR}
           hoverEffectProperties={{ changeBackgroundColor: ANTI_FLASH_WHITE }}
           bordered={false}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
           {...args}
         />
         <Button
@@ -284,8 +371,16 @@ const DesignSystem = (args) => {
           hoverEffect={CHANGE_BACKGROUND_COLOR}
           hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
           bordered={false}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
       </div>
@@ -296,9 +391,19 @@ const DesignSystem = (args) => {
           onClick={() => alert('clicked Default RICH_BLACK')}
           bordered={false}
           hoverEffect={CHANGE_BACKGROUND_COLOR}
-          hoverEffectProperties={{ changeBackgroundColor: ALTERNATE_RICH_BLACK }}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          hoverEffectProperties={{
+            changeBackgroundColor: ALTERNATE_RICH_BLACK
+          }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
         <Button
@@ -308,8 +413,16 @@ const DesignSystem = (args) => {
           hoverEffect={CHANGE_BACKGROUND_COLOR}
           hoverEffectProperties={{ changeBackgroundColor: FIRE_ENGINE_RED }}
           bordered={false}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
       </div>
@@ -400,8 +513,16 @@ const DesignSystem = (args) => {
           bordered={false}
           disabled
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
         <Button
@@ -411,8 +532,16 @@ const DesignSystem = (args) => {
           bordered={false}
           disabled
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
           {...args}
         />
       </div>
@@ -424,8 +553,16 @@ const DesignSystem = (args) => {
           bordered={false}
           disabled
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
           {...args}
         />
         <Button
@@ -435,8 +572,16 @@ const DesignSystem = (args) => {
           bordered={false}
           disabled
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
           {...args}
         />
       </div>
@@ -448,8 +593,16 @@ const DesignSystem = (args) => {
           onClick={() => alert('clicked Default WHITE')}
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
           bordered={false}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: WHITE }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: WHITE
+          }}
           {...args}
         />
         <Button
@@ -458,8 +611,16 @@ const DesignSystem = (args) => {
           onClick={() => alert('clicked Default ERROR_RED')}
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
           bordered={false}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
           {...args}
         />
       </div>
@@ -470,8 +631,16 @@ const DesignSystem = (args) => {
           onClick={() => alert('clicked Default RICH_BLACK')}
           bordered={false}
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: RICH_BLACK }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: RICH_BLACK
+          }}
           {...args}
         />
         <Button
@@ -480,8 +649,16 @@ const DesignSystem = (args) => {
           onClick={() => alert('clicked Default ERROR_RED')}
           hoverEffect={ACTIVE_AND_INACTIVE_STATUS}
           bordered={false}
-          platformaticIcon={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
-          platformaticIconAfter={{ iconName: 'GearIcon', size: MEDIUM, color: ERROR_RED }}
+          platformaticIcon={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
+          platformaticIconAfter={{
+            iconName: 'GearIcon',
+            size: MEDIUM,
+            color: ERROR_RED
+          }}
           {...args}
         />
       </div>

package/src/stories/ButtonFullRounded.stories.jsx

@@ -1,6 +1,12 @@
 'use strict'
 import ButtonFullRounded from '../components/ButtonFullRounded'
-import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE } from '../components/constants'
+import {
+  COLORS_ICON,
+  SIZES,
+  SMALL,
+  MEDIUM,
+  LARGE
+} from '../components/constants'
 import Icons from '../components/icons'
 
 const divStyle = {
@@ -62,7 +68,9 @@ SingleButton.args = {
 }
 
 const AllCircleButtonsTemplate = (args) => {
-  const icons = Object.keys(Icons).filter(icon => icon.indexOf('Circle') > -1)
+  const icons = Object.keys(Icons).filter(
+    (icon) => icon.indexOf('Circle') > -1
+  )
 
   return (
     <>
@@ -71,16 +79,33 @@ const AllCircleButtonsTemplate = (args) => {
         {icons.map((icon, index) => (
           <div style={row} key={index}>
             <div style={col}>
-              <p style={paragraph}>#{index + 1}: {icon}</p>
+              <p style={paragraph}>
+                #{index + 1}: {icon}
+              </p>
             </div>
             <div style={col}>
-              <ButtonFullRounded key={icon} iconName={icon} iconSize={SMALL} {...args} />
+              <ButtonFullRounded
+                key={icon}
+                iconName={icon}
+                iconSize={SMALL}
+                {...args}
+              />
             </div>
             <div style={col}>
-              <ButtonFullRounded key={icon} iconName={icon} iconSize={MEDIUM} {...args} />
+              <ButtonFullRounded
+                key={icon}
+                iconName={icon}
+                iconSize={MEDIUM}
+                {...args}
+              />
             </div>
             <div style={col}>
-              <ButtonFullRounded key={icon} iconName={icon} iconSize={LARGE} {...args} />
+              <ButtonFullRounded
+                key={icon}
+                iconName={icon}
+                iconSize={LARGE}
+                {...args}
+              />
             </div>
           </div>
         ))}

package/src/stories/ButtonOnlyIcon.stories.jsx

@@ -1,7 +1,15 @@
 'use strict'
 import React from 'react'
 import ButtonOnlyIcon from '../components/ButtonOnlyIcon'
-import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES, WHITE, RICH_BLACK, DULLS_BACKGROUND_COLOR, SMALL } from '../components/constants'
+import {
+  COLORS_BUTTON,
+  HOVER_EFFECTS_BUTTONS,
+  SIZES,
+  WHITE,
+  RICH_BLACK,
+  DULLS_BACKGROUND_COLOR,
+  SMALL
+} from '../components/constants'
 
 const divStyle = {
   width: '100%',
@@ -62,14 +70,16 @@ export default {
   }
 }
 
-const OnlyIconTemplate = (args) => (<ButtonOnlyIcon {...args} />)
+const OnlyIconTemplate = (args) => <ButtonOnlyIcon {...args} />
 
 export const OnlyIcon = OnlyIconTemplate.bind({})
 
 OnlyIcon.args = {
   color: WHITE,
   backgroundColor: RICH_BLACK,
-  onClick: () => { alert('hit!') },
+  onClick: () => {
+    alert('hit!')
+  },
   hoverEffect: DULLS_BACKGROUND_COLOR,
   platformaticIcon: { size: SMALL, iconName: 'RunningIcon', color: WHITE }
 }

package/src/stories/DropDown.stories.jsx

@@ -4,11 +4,17 @@ import BorderedBox from '../components/BorderedBox'
 import Button from '../components/Button'
 import HorizontalSeparator from '../components/HorizontalSeparator'
 import { useState } from 'react'
-import { BOX_SHADOW, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from '../components/constants'
+import {
+  BOX_SHADOW,
+  LIGHT_BLUE,
+  MAIN_DARK_BLUE,
+  RICH_BLACK,
+  WHITE
+} from '../components/constants'
 export default {
   title: 'Platformatic/DropDown',
   component: DropDown,
-  decorators: [dd => <div className='text-white'>{dd()}</div>]
+  decorators: [(dd) => <div className='text-white'>{dd()}</div>]
 }
 
 const Template = (args) => (
@@ -22,7 +28,11 @@ const Template = (args) => (
 const ContentThatLoads = () => {
   const [content, setContent] = useState(null)
   setTimeout(() => {
-    setContent(<div className='mt-4'><BorderedBox>This is rendered after</BorderedBox></div>)
+    setContent(
+      <div className='mt-4'>
+        <BorderedBox>This is rendered after</BorderedBox>
+      </div>
+    )
   }, 1000)
 
   return content
@@ -33,9 +43,15 @@ export const DefaultAlignment = Template.bind({})
 DefaultAlignment.args = {
   header: 'My Menu',
   items: [
-    <span className='text-white' key='1'>Menu 1</span>,
-    <span className='text-white' key='2'>Menu 2</span>,
-    <span className='text-white' key='3'>This is a very long menu item</span>
+    <span className='text-white' key='1'>
+      Menu 1
+    </span>,
+    <span className='text-white' key='2'>
+      Menu 2
+    </span>,
+    <span className='text-white' key='3'>
+      This is a very long menu item
+    </span>
   ]
 }
 
@@ -62,18 +78,19 @@ withButton.args = {
     <span key='2'>Menu 2</span>,
     <span key='3'>This is a very long menu item</span>
   ],
-  lastButton: <Button
-    backgroundColor={MAIN_DARK_BLUE}
-    color={WHITE}
-    label='Test'
-    platformaticIcon={{ iconName: 'WorkspaceStaticIcon', color: WHITE }}
-    fullWidth
-    bold
-    bordered={false}
-    hoverEffect={BOX_SHADOW}
-              />,
+  lastButton: (
+    <Button
+      backgroundColor={MAIN_DARK_BLUE}
+      color={WHITE}
+      label='Test'
+      platformaticIcon={{ iconName: 'WorkspaceStaticIcon', color: WHITE }}
+      fullWidth
+      bold
+      bordered={false}
+      hoverEffect={BOX_SHADOW}
+    />
+  ),
   borderColor: MAIN_DARK_BLUE
-
 }
 
 export const BlackVersion = Template.bind({})
@@ -83,8 +100,14 @@ BlackVersion.args = {
   backgroundColor: RICH_BLACK,
   borderColor: WHITE,
   items: [
-    <span className='text-white' key='1'>Menu 1</span>,
-    <span className='text-white' key='2'>Menu 2</span>,
-    <span className='text-white' key='3'>Menu3</span>
+    <span className='text-white' key='1'>
+      Menu 1
+    </span>,
+    <span className='text-white' key='2'>
+      Menu 2
+    </span>,
+    <span className='text-white' key='3'>
+      Menu3
+    </span>
   ]
 }

package/src/stories/InfoBox.stories.jsx

@@ -20,7 +20,11 @@ export default {
   ]
 }
 
-const Template = (args) => <InfoBox {...args}><p>this will be your custom title</p></InfoBox>
+const Template = (args) => (
+  <InfoBox {...args}>
+    <p>this will be your custom title</p>
+  </InfoBox>
+)
 export const InfoBoxSample = Template.bind({})
 InfoBoxSample.args = {
   iconName: 'UpgradeIcon',
@@ -32,11 +36,16 @@ InfoBoxSample.args = {
   }
 }
 
-const ContainedTemplate = (args) => <div style={{ maxWidth: '300px' }}><InfoBox {...args} /></div>
+const ContainedTemplate = (args) => (
+  <div style={{ maxWidth: '300px' }}>
+    <InfoBox {...args} />
+  </div>
+)
 export const InfoBoxContained = ContainedTemplate.bind({})
 InfoBoxContained.args = {
   iconName: 'UpgradeIcon',
-  helpText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.',
+  helpText:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.',
   buttonProps: {
     label: 'Sample button',
     color: 'white',