@platformatic/ui-components 0.1.33 → 0.1.35

package/README.md

@@ -24,3 +24,7 @@ Storybook is still a work in progress, you can start it with
 ```
 $ npm run storybook
 ```
+
+## Storybook public link
+
+https://ui.platformatic.cloud/

package/dist/main.css

@@ -548,11 +548,6 @@ video {
   margin: 0.75rem;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -563,6 +558,10 @@ video {
   margin-bottom: 1.25rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }

package/index.js

@@ -4,6 +4,8 @@ import BorderedBox from './src/components/BorderedBox'
 import BorderedText from './src/components/BorderedText'
 import Box from './src/components/Box'
 import Button from './src/components/Button'
+import ButtonFullRounded from './src/components/ButtonFullRounded'
+import Checkbox from './src/components/Checkbox'
 import DetailedMetric from './src/components/DetailedMetric'
 import DropDown from './src/components/DropDown'
 import FollowUs from './src/components/FollowUs'
@@ -32,6 +34,8 @@ export {
   BorderedText,
   Box,
   Button,
+  ButtonFullRounded,
+  Checkbox,
   DetailedMetric,
   DropDown,
   FollowUs,

package/package.json

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

package/src/components/Box.module.css

@@ -1,5 +1,5 @@
 .box {
-  @apply p-5 m-0 md:p-0 md:m-24 flex flex-col;
+  @apply p-5 m-0 md:px-24 md:py-56 flex flex-col;
 }
 
 .justifyCentered {

package/src/components/Button.jsx

@@ -4,19 +4,19 @@ 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, disabled } = props
-  let buttonClass = 'primary'
-  if (!primary) {
-    buttonClass = 'secondary'
+  const { icon, label, buttonClass = 'secondary', color = 'green', disabled, size = 'large', bold = false, ...rest } = props
+  let className = `${styles.button} ${styles[buttonClass + '-' + color]} ${styles['button-' + size]}`
+  if (disabled) {
+    className += ` ${styles.disabled}`
+    if (buttonClass === 'transparent') {
+      className += ` ${styles['disabled-transparent']}`
+    }
   }
+  if (bold) className += ` ${styles.fontBold}`
 
-  let colorClass = 'green'
-  if (color === 'red') {
-    colorClass = 'red'
-  }
   return (
-    <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}
+    <button className={className} disabled={disabled} alt={label} {...rest}>
+      {icon ? <FontAwesomeIcon icon={icon} className={`${styles['margin-right-' + size]}`} data-testid='button-icon' /> : null}
       <span>{label}</span>
     </button>
   )

package/src/components/Button.module.css

@@ -1,21 +1,68 @@
 .button {
-  @apply py-2 px-2 rounded text-center cursor-pointer
+  @apply rounded text-center cursor-pointer font-normal;
+}
+.fontBold {
+  @apply font-semibold;
+}
+.button-small {
+  @apply p-1 text-sm;
+}
+.button-medium {
+  @apply p-1;
+}
+.button-large {
+  @apply p-2;
+}
+.button-extra-large {
+  @apply p-2 md:p-2.5;
+}
+
+.margin-right-medium,
+.margin-right-small {
+  @apply mr-1;
+}
+.margin-right-large {
+  @apply mr-2;
+}
+.margin-right-extra-large {
+  @apply mr-3;
 }
 
 .primary-green {
-  @apply  text-main-dark-blue bg-light-green;
+  @apply text-main-dark-blue bg-light-green;
 }
 .secondary-green {
-  @apply border-main-green text-main-green bg-none border border-solid box-border rounded-md font-normal;
+  @apply border-main-green text-main-green bg-none border border-solid box-border rounded-md;
+}
+.transparent-green {
+  @apply text-main-green border-0 bg-transparent hover:underline;
 }
 
+
 .primary-red {
-  @apply  text-main-dark-blue bg-error-red;
+  @apply text-main-dark-blue bg-error-red;
 }
 .secondary-red {
-  @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md font-normal;
+  @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md;
+}
+.transparent-red {
+  @apply text-error-red border-0 bg-transparent hover:underline;
+}
+
+.primary-white {
+  @apply text-main-dark-blue bg-white;
+}
+.secondary-white {
+  @apply border-white text-white bg-none border border-solid box-border rounded-md;
+}
+.transparent-white {
+  @apply text-white border-0 bg-transparent hover:underline;
 }
 
 .disabled {
-  @apply bg-opacity-30 cursor-default;
-}
+  @apply opacity-30 cursor-default;
+}
+
+.disabled-transparent {
+  @apply hover:no-underline;
+}

package/src/components/ButtonFullRounded.jsx

@@ -0,0 +1,17 @@
+'use strict'
+import React from 'react'
+import styles from './ButtonFullRounded.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+export default function ButtonFullRounded (props) {
+  // colorClass: white
+  // size: small|medium|large
+  const { icon, color = 'white', disabled, size = 'small' } = props
+  let className = `${styles.buttonRoundedFull} ${styles[color]} ${styles['button-' + size]}`
+  if (disabled) className += ` ${styles.disabled}`
+
+  return (
+    <button className={className} disabled={disabled} {...props}>
+      <FontAwesomeIcon icon={icon} data-testid='button-icon' />
+    </button>
+  )
+}

package/src/components/ButtonFullRounded.module.css

@@ -0,0 +1,28 @@
+.buttonRoundedFull {
+  @apply rounded-full flex justify-center cursor-pointer font-normal bg-main-dark-blue border items-center;
+}
+
+
+.button-small {
+  @apply p-0 text-sm h-5 w-5;
+}
+.button-medium {
+  @apply p-1 h-6 w-6;
+}
+.button-large {
+  @apply p-2 h-7 w-7;
+}
+
+.green {
+  @apply border-light-green text-light-green ;
+}
+.red {
+  @apply border-error-red text-error-red;
+}
+.white {
+  @apply border-white text-white;
+}
+
+.disabled {
+  @apply bg-opacity-30 cursor-default;
+}

package/src/components/Checkbox.jsx

@@ -0,0 +1,11 @@
+'use strict'
+import React from 'react'
+import styles from './Checkbox.module.css'
+export default function Checkbox (props) {
+  const { disabled, ...rest } = props
+  let className = `${styles.checkbox}`
+  if (disabled) className += ` ${styles.disabled}`
+  return (
+    <input type='checkbox' className={className} disabled={disabled} {...rest} />
+  )
+}

package/src/components/Checkbox.module.css

@@ -0,0 +1,18 @@
+.checkbox {
+  @apply border border-light-green p-2 rounded-sm bg-main-dark-blue relative inline-block h-2 w-2;
+  -webkit-appearance: none;
+}
+
+.checkbox:checked {
+	@apply bg-light-green text-main-dark-blue;
+}
+
+.checkbox:checked:after {
+	@apply absolute top-[-2px] left-[1px] h-full w-full;
+  content: '\2714';
+}
+
+.disabled {
+  @apply border-white;
+}
+

package/src/components/DropDown.module.css

@@ -10,14 +10,16 @@
   @apply items-start;
 }
 .arrow {
-  @apply ml-2;
+  @apply absolute top-[50%] right-0 translate-y-[-50%];
 }
 .header {
-  @apply hover:cursor-pointer
+  @apply hover:cursor-pointer relative pr-6;
 }
 .menu {
-  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md z-[999];
+  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-[999] text-sm min-w-[175px];
 }
 .item {
-  @apply mb-2
+  @apply py-3 px-3 text-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer tracking-[0.15em]; 
+  /* it's a workaround due to opacity... */
+  border-top: 1px solid rgba(0, 40, 61, 0.2);;
 }

package/src/components/FollowUs.jsx

@@ -11,12 +11,12 @@ export default function FollowUs ({ label = 'FOLLOW US ON' }) {
       </div>
       <div className={styles.icon}>
         <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faTwitter} className='mr-2 text-white' />
+          <FontAwesomeIcon icon={faTwitter} className='mr-3 text-white' />
         </a>
       </div>
       <div className={styles.icon}>
         <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faLinkedin} className='mr-2 text-white' />
+          <FontAwesomeIcon icon={faLinkedin} className='mr-3 text-white' />
         </a>
       </div>
       <div className={styles.icon}>

package/src/components/FollowUs.module.css

@@ -1,11 +1,11 @@
 .container {
-  @apply flex w-96;
+  @apply flex w-full items-center;
 }
 
 .label {
-  @apply uppercase text-light-green
+  @apply uppercase text-light-green tracking-[.15em] text-sm mr-8;
 }
 
 .icon {
-  @apply text-white ml-4
+  @apply text-white mx-4 text-xl;
 }

package/src/components/HorizontalSeparator.jsx

@@ -1,8 +1,9 @@
 'use strict'
 import React from 'react'
+import styles from './HorizontalSeparator.module.css'
 export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4 }) {
   function getClassName () {
-    return 'text-dark-green ' + (marginTop === marginBottom ? `my-${marginTop}` : `mt-${marginTop} mb-${marginBottom}`)
+    return 'text-dark-green ' + (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
   }
 
   return <hr className={getClassName()} />

package/src/components/HorizontalSeparator.module.css

@@ -0,0 +1,23 @@
+.marginY-4 {
+  @apply my-4;
+}
+
+.marginT-4 {
+  @apply mt-4;
+}
+
+.marginB-4 {
+  @apply mb-4;
+}
+
+.marginY-10 {
+  @apply my-10;
+}
+
+.marginT-10 {
+  @apply mt-10;
+}
+
+.marginB-10 {
+  @apply mb-10;
+}

package/src/components/Modal.jsx

@@ -1,29 +1,61 @@
-import React from 'react'
+import React, { useState } from 'react'
 import useEscapeKey from '../hooks/useEscapeKey'
 import CloseModalIcon from './icons/CloseModalIcon'
+import CloseModalGreenIcon from './icons/CloseModalGreenIcon'
+import CloseModalGreenHoverIcon from './icons/CloseModalGreenHoverIcon'
 import styles from './Modal.module.css'
 export default function Modal (props) {
-  const { setIsOpen, title } = props
+  const { setIsOpen, title, layout = 'info' } = props
+  const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
   useEscapeKey(() => setIsOpen(false))
-  return (
-    <>
-      <div className={styles.blur} onClick={() => setIsOpen(false)} />
-      <div className={`${styles.container} ${styles.centered}`}>
-        <div className={styles.modal}>
-          <div className={styles.header}>
-            <div className={styles.title}>{title}</div>
-            <div className={styles.close} onClick={() => setIsOpen(false)}>
-              <CloseModalIcon />
+
+  let whichModal = <></>
+  switch (layout) {
+    case 'info':
+      whichModal = (
+        <>
+          <div className={styles.blur} onClick={() => setIsOpen(false)} />
+          <div className={`${styles.container} ${styles.centered}`}>
+            <div className={`${styles.modal} ${styles.modalInfo}`}>
+              <div className={styles.header}>
+                <div className={styles.title}>{title}</div>
+                <div className={styles.close} onClick={() => setIsOpen(false)}>
+                  <CloseModalIcon />
+                </div>
+              </div>
+              <div>
+                {props.children}
+              </div>
             </div>
           </div>
-          <hr className={styles.hr} />
-          <div>
-            {props.children}
+        </>
+      )
+      break
+    case 'invite':
+      whichModal = (
+        <>
+          <div className={styles.blur} onClick={() => setIsOpen(false)} />
+          <div className={`${styles.container} ${styles.centered}`}>
+            <div className={`${styles.modal} ${styles.modalInvite}`}>
+              <div className={styles.headerInvite}>
+                <div
+                  className={styles.close}
+                  onClick={() => setIsOpen(false)}
+                  onMouseEnter={() => setIsHoverCloseModal(true)}
+                  onMouseLeave={() => setIsHoverCloseModal(false)}
+                >
+                  {isHoverCloseModal ? <CloseModalGreenHoverIcon /> : <CloseModalGreenIcon />}
+                </div>
+              </div>
+              <p className={styles.titleInvite}>{title}</p>
+              <div>{props.children}</div>
+            </div>
           </div>
-          <hr className={styles.hr} />
-        </div>
-      </div>
-    </>
-
-  )
+        </>
+      )
+      break
+    default:
+      break
+  }
+  return whichModal
 }

package/src/components/Modal.module.css

@@ -9,11 +9,20 @@
   @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] max-h-[85vh] overflow-y-auto;
+  @apply p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
+}
+.modalInfo {
+  @apply bg-light-blue;
+}
+.modalInvite {
+  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[432px] max-h-[300px];
 }
 .header {
   @apply flex justify-between items-center;
 }
+.headerInvite {
+  @apply flex justify-end;
+}
 .close {
   @apply hover:cursor-pointer;
 }
@@ -22,4 +31,7 @@
 }
 .title {
   @apply font-bold text-lg;
-}
+}
+.titleInvite {
+  @apply font-bold text-lg text-main-green text-center;
+}

package/src/components/TabbedWindow.jsx

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react'
 import styles from './TabbedWindow.module.css'
 
 export default function TabbedWindow (props) {
-  const [selected, setSelected] = useState(0)
-  const { tabs } = props
+  const { tabs, defaultSelected = 0, callbackSelected = () => {} } = props
+  const [selected, setSelected] = useState(defaultSelected)
   const headers = []
   const components = []
   tabs.forEach((tab) => {
@@ -17,12 +17,17 @@ export default function TabbedWindow (props) {
     currentComponent = components[selected]
   }, [selected])
 
+  function setCurrentTab (index) {
+    setSelected(index)
+    callbackSelected(index)
+  }
+
   return (
     <div className={styles['tabbed-container']}>
       <div className={styles['tabs-header']}>
         {headers.map((header, index) => {
           return (
-            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
+            <span onClick={() => setCurrentTab(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
               {header}
             </span>
           )

package/src/components/icons/CloseModalGreenHoverIcon.jsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+const CloseModalGreenHoverIcon = () => (
+  <svg
+    width={24}
+    height={24}
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle
+      cx={12}
+      cy={12}
+      r={11.25}
+      fill='#21FA90'
+      fillOpacity={0.2}
+      stroke='#21FA90'
+      strokeWidth={1.5}
+    />
+    <path
+      d='M6 6L18 18'
+      stroke='#21FA90'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M6 18L18 6'
+      stroke='#21FA90'
+      strokeWidth={1.5}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export default CloseModalGreenHoverIcon

package/src/components/icons/CloseModalGreenIcon.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+const CloseModalGreenIcon = () => (
+  <svg
+    width={24}
+    height={24}
+    viewBox='0 0 24 24'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle cx={12} cy={12} r={11.5} stroke='#21FA90' />
+    <path
+      d='M6 6L18 18'
+      stroke='#21FA90'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+    <path
+      d='M6 18L18 6'
+      stroke='#21FA90'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+export default CloseModalGreenIcon

package/src/components/icons/Icons.module.css

@@ -0,0 +1,15 @@
+.green > circle,
+.green > rect, 
+.green > path {
+    @apply stroke-main-green;
+}
+.red > circle,
+.red > rect,
+.red > path {
+    @apply stroke-error-red;
+}
+.white > circle,
+.white > rect,
+.white > path {
+    @apply stroke-white;
+}

package/src/components/icons/MetricsIcon.jsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const MetricsIcon = ({ color = 'white' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox='0 0 40 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <rect
+        x={10}
+        y={12.5}
+        width={5}
+        height={17.5}
+        rx={0.5}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <rect
+        x={20}
+        y={20}
+        width={5}
+        height={10}
+        rx={0.5}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <rect
+        x={30}
+        y={5}
+        width={5}
+        height={25}
+        rx={0.5}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <path
+        d='M5 5V35H35'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default MetricsIcon

package/src/components/icons/PullRequestIcon.jsx

@@ -1,31 +1,35 @@
 import * as React from 'react'
-
-const PullRequestIcon = () => (
-  <svg
-    width={40}
-    height={40}
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <circle cx={9.5} cy={30.5} r={4.5} stroke='#fff' strokeWidth={2} />
-    <circle cx={9.5} cy={9.5} r={4.5} stroke='#fff' strokeWidth={2} />
-    <path stroke='#fff' strokeWidth={2} d='M9 14v12' />
-    <circle cx={30.5} cy={30.5} r={4.5} stroke='#fff' strokeWidth={2} />
-    <path
-      d='M30.5 26V10.5a1 1 0 0 0-1-1H23'
-      stroke='#fff'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-    <path
-      d='m26 5-4.5 4.5L26 14'
-      stroke='#fff'
-      strokeWidth={2}
-      strokeLinecap='round'
-      strokeLinejoin='round'
-    />
-  </svg>
-)
+import styles from './Icons.module.css'
+const PullRequestIcon = ({ color = 'white' }) => {
+  const className = styles[`${color}`]
+  return (
+    <svg
+      width={40}
+      height={40}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={9.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
+      <circle cx={9.5} cy={9.5} r={4.5} stroke='none' strokeWidth={2} />
+      <path stroke='none' strokeWidth={2} d='M9 14v12' />
+      <circle cx={30.5} cy={30.5} r={4.5} stroke='none' strokeWidth={2} />
+      <path
+        d='M30.5 26V10.5a1 1 0 0 0-1-1H23'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='m26 5-4.5 4.5L26 14'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
 
 export default PullRequestIcon

package/src/components/icons/index.js

@@ -2,8 +2,11 @@ import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
 import CloseModalIcon from './CloseModalIcon'
+import CloseModalGreenIcon from './CloseModalGreenIcon'
+import CloseModalGreenHoverIcon from './CloseModalGreenHoverIcon'
+import MetricsIcon from './MetricsIcon'
 import PullRequestIcon from './PullRequestIcon'
 
 export default {
-  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, PullRequestIcon
+  ApiIcon, ApiIconClosed, ApiEmptyIcon, CloseModalIcon, CloseModalGreenIcon, CloseModalGreenHoverIcon, MetricsIcon, PullRequestIcon
 }

package/src/components/layouts/TwoColumnsLayout.module.css

@@ -6,5 +6,5 @@
     @apply grid grid-rows-2 gap-y-4;
 }
 .responsive {
-    @apply grid grid-rows-2 gap-y-4 md:grid-cols-2 md:gap-x-4;
+    @apply grid grid-rows-2 gap-y-4 md:grid-rows-none md:gap-y-0 md:grid-cols-2 md:gap-x-4;
 }

package/src/stories/Button.stories.jsx

@@ -11,14 +11,31 @@ export default {
       type: 'string',
       control: 'text'
     },
-    primary: {
+    bold: {
       type: 'boolean'
     },
+    buttonClass: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['primary', 'secondary', 'transparent']
+      }
+    },
     color: {
       type: 'string',
       control: {
         type: 'radio',
-        options: ['green', 'red']
+        options: ['green', 'red', 'white']
+      }
+    },
+    disabled: {
+      type: 'boolean'
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'extra-large']
       }
     }
   }
@@ -29,48 +46,48 @@ const Template = (args) => <Button {...args} />
 export const PrimaryGreen = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 PrimaryGreen.args = {
-  primary: true,
+  buttonClass: 'primary',
   label: 'Primary Green',
-  color: 'green'
+  color: 'green',
+  bold: true
 }
 
-export const SecondaryGreen = Template.bind({})
-SecondaryGreen.args = {
-  primary: false,
+export const SecondaryRed = Template.bind({})
+SecondaryRed.args = {
   label: 'Secondary Green',
-  color: 'green'
+  color: 'red'
+}
+
+export const TransparentWhite = Template.bind({})
+TransparentWhite.args = {
+  buttonClass: 'transparent',
+  label: 'Secondary Green',
+  color: 'white'
 }
 
 export const PrimaryWithIcon = Template.bind({})
 PrimaryWithIcon.args = {
-  primary: true,
+  buttonClass: 'primary',
   label: 'Primary with Icon',
   icon: faCheck
 }
 
 export const SecondaryWithIcon = Template.bind({})
 SecondaryWithIcon.args = {
-  primary: false,
+  buttonClass: 'secondary',
   label: 'Secondary with Icon',
-  icon: faCheck
-
+  icon: faCheck,
+  color: 'white'
 }
 
 export const PrimaryRed = Template.bind({})
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 PrimaryRed.args = {
-  primary: true,
+  buttonClass: 'primary',
   label: 'Primary Red',
   color: 'red'
 }
 
-export const SecondaryRed = Template.bind({})
-SecondaryRed.args = {
-  primary: false,
-  label: 'Secondary Red',
-  color: 'red'
-}
-
 const DisabledTemplate = (args) => {
   const [enabled, setEnabled] = useState(false)
   return (
@@ -91,17 +108,17 @@ const DisabledTemplate = (args) => {
 export const DisabledGreen = DisabledTemplate.bind({})
 
 DisabledGreen.args = {
-  primary: true,
+  buttonClass: 'primary',
   label: 'A simple button',
   color: 'green',
-  disabeld: true
+  disabled: true
 }
 
 export const DisabledRed = DisabledTemplate.bind({})
 
 DisabledRed.args = {
-  primary: true,
+  buttonClass: 'primary',
   label: 'A simple button',
   color: 'red',
-  disabeld: true
+  disabled: true
 }

package/src/stories/ButtonFullRounded.stories.jsx

@@ -0,0 +1,61 @@
+'use strict'
+import { faStop, faRefresh } from '@fortawesome/free-solid-svg-icons'
+import ButtonFullRounded from '../components/ButtonFullRounded'
+
+export default {
+  title: 'Platformatic/ButtonFullRounded',
+  component: ButtonFullRounded,
+  argTypes: {
+    label: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'red', 'white']
+      }
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+}
+
+const Template = (args) => <ButtonFullRounded {...args} />
+
+export const WhiteLarge = Template.bind({})
+WhiteLarge.args = {
+  icon: faStop,
+  size: 'large'
+}
+
+export const GreenSmall = Template.bind({})
+GreenSmall.args = {
+  icon: faStop,
+  color: 'green',
+  size: 'small'
+}
+
+export const Disabled = Template.bind({})
+
+Disabled.args = {
+  icon: faRefresh,
+  disabled: true
+}
+
+export const DisabledRed = Template.bind({})
+
+DisabledRed.args = {
+  icon: faRefresh,
+  color: 'red',
+  disabled: true
+}

package/src/stories/Checkbox.stories.jsx

@@ -0,0 +1,27 @@
+'use strict'
+import Checkbox from '../components/Checkbox'
+
+export default {
+  title: 'Platformatic/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    id: {
+      type: 'string',
+      control: 'text'
+    },
+    disabled: {
+      type: 'boolean'
+    }
+  }
+}
+
+const Template = (args) => <Checkbox {...args} />
+
+export const CheckboxRegular = Template.bind({})
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+CheckboxRegular.args = {}
+
+export const CheckboxDisabled = Template.bind({})
+CheckboxDisabled.args = {
+  disabled: true
+}

package/src/stories/Modal.stories.jsx

@@ -6,17 +6,39 @@ import DropDown from '../components/DropDown'
 import HorizontalSeparator from '../components/HorizontalSeparator'
 export default {
   title: 'Platformatic/Modal',
-  component: Modal
+  component: Modal,
+  argTypes: {
+    layout: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['info', 'invite']
+      }
+    }
+  }
 }
 
 const Template = (args) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const { text, ...rest } = args
+  return (
+    <main>
+      <BorderedBox>This Is another Content</BorderedBox>
+      <ContentThatLoads />
+      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      {isOpen && <Modal setIsOpen={setIsOpen} {...rest}>{text}</Modal>}
+    </main>
+  )
+}
+
+const TemplateInvite = (args) => {
   const [isOpen, setIsOpen] = useState(false)
   return (
     <main>
       <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'>{args.text}</Modal>}
+      <Button color='green' buttonClass='primary' onClick={() => setIsOpen(true)} label='Open Modal' />
+      {isOpen && <Modal setIsOpen={setIsOpen} {...args}><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</p><Button buttonClass='primary' onClick={() => setIsOpen(false)} label='Discard invite' /></Modal>}
     </main>
   )
 }
@@ -33,7 +55,8 @@ const ContentThatLoads = () => {
 export const Default = Template.bind({})
 Default.args = {
   title: 'List Title',
-  text: 'Hello World'
+  text: 'Hello World',
+  layout: 'info'
 }
 
 export const WithLongText = Template.bind({})
@@ -63,3 +86,9 @@ const MenuTemplate = () => {
   )
 }
 export const WithDropDown = MenuTemplate.bind({})
+
+export const InviteLayout = TemplateInvite.bind({})
+InviteLayout.args = {
+  title: 'Give me an invite',
+  layout: 'invite'
+}

package/src/stories/icons/PullRequestIcon.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PullRequestIcon from '../../components/icons/PullRequestIcon'
+
+export default {
+  title: 'Platformatic/Icons',
+  component: PullRequestIcon,
+  argTypes: {
+    color: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: ['green', 'white', 'red']
+      }
+    }
+  }
+}
+
+const Template = (args) => <PullRequestIcon {...args} />
+export const PullRequestIconDefault = Template.bind({})
+PullRequestIconDefault.args = {}

package/tailwind.config.cjs

@@ -9,7 +9,10 @@ module.exports = {
       screens: {
         'lg': '1440px',
         // => @media (min-width: 1440px) { ... }
-      },  
+      },
+      boxShadow: {
+        'wrap': '0px 0px 20px rgba(0, 0, 0, 0.6)'
+      }
     },
     colors: {
       'main-green': '#21FA90',
@@ -17,9 +20,11 @@ module.exports = {
       'light-green': '#21F190',
       'main-dark-blue': '#00283D',
       'dark-blue': '#00344F',
+      'light-blue': '#E9F7FF',
       white: '#FFFFFF',
       'error-red': '#FA2121',
-      'tertiary-blue': '#2588E4'
+      'tertiary-blue': '#2588E4',
+      'transparent': 'transparent'
     },
     fontFamily: {
       sans: ['Montserrat']