@platformatic/ui-components 0.1.32 → 0.1.34

package/src/components/Box.module.css

@@ -1,7 +1,7 @@
-.box {
-  @apply p-5 m-0 md:p-0 md:m-24 flex flex-col;
-}
-
-.justifyCentered {
-  @apply justify-center;
-}
+.box {
+  @apply p-5 m-0 md:p-0 md:m-24 flex flex-col;
+}
+
+.justifyCentered {
+  @apply justify-center;
+}

package/src/components/Button.jsx

@@ -1,23 +1,23 @@
-'use strict'
-
-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'
-  }
-
-  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}
-      <span>{label}</span>
-    </button>
-  )
-}
+'use strict'
+
+import React from 'react'
+import styles from './Button.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+export default function Button (props) {
+  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}`
+
+  return (
+    <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
-}
-
-.primary-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;
-}
-
-.primary-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;
-}
-
-.disabled {
-  @apply bg-opacity-30 cursor-default;
-}
+.button {
+  @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;
+}
+.secondary-green {
+  @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;
+}
+.secondary-red {
+  @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 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/Common.module.css

@@ -1,7 +1,7 @@
-.padded {
-  @apply px-2 py-2.5;
-}
-
-.bordered {
-  @apply border border-solid box-border rounded-md;
-}
+.padded {
+  @apply px-2 py-2.5;
+}
+
+.bordered {
+  @apply border border-solid box-border rounded-md;
+}

package/src/components/DetailedMetric.jsx

@@ -1,32 +1,32 @@
-'use strict'
-
-import React from 'react'
-import SimpleMetric from './SimpleMetric'
-import HorizontalSeparator from './HorizontalSeparator'
-import VerticalSeparator from './VerticalSeparator'
-import styles from './DetailedMetric.module.css'
-import MetricValue from './MetricValue'
-export default function DetailedMetric (props) {
-  const { leftDetail, rightDetail } = props
-  return (
-    <SimpleMetric {...props}>
-      <HorizontalSeparator />
-      <div className={styles.detailContainer}>
-        <MetricValue
-          pre={leftDetail.pre}
-          unit={leftDetail.unit}
-          color={leftDetail.color}
-          value={leftDetail.value}
-        />
-        <VerticalSeparator />
-        <MetricValue
-          pre={rightDetail.pre}
-          unit={rightDetail.unit}
-          color={rightDetail.color}
-          value={rightDetail.value}
-        />
-      </div>
-    </SimpleMetric>
-
-  )
-}
+'use strict'
+
+import React from 'react'
+import SimpleMetric from './SimpleMetric'
+import HorizontalSeparator from './HorizontalSeparator'
+import VerticalSeparator from './VerticalSeparator'
+import styles from './DetailedMetric.module.css'
+import MetricValue from './MetricValue'
+export default function DetailedMetric (props) {
+  const { leftDetail, rightDetail } = props
+  return (
+    <SimpleMetric {...props}>
+      <HorizontalSeparator />
+      <div className={styles.detailContainer}>
+        <MetricValue
+          pre={leftDetail.pre}
+          unit={leftDetail.unit}
+          color={leftDetail.color}
+          value={leftDetail.value}
+        />
+        <VerticalSeparator />
+        <MetricValue
+          pre={rightDetail.pre}
+          unit={rightDetail.unit}
+          color={rightDetail.color}
+          value={rightDetail.value}
+        />
+      </div>
+    </SimpleMetric>
+
+  )
+}

package/src/components/DetailedMetric.module.css

@@ -1,3 +1,3 @@
-.detailContainer {
-  @apply flex items-center justify-around;
+.detailContainer {
+  @apply flex items-center justify-around;
 }

package/src/components/DropDown.jsx

@@ -1,35 +1,35 @@
-'use strict'
-
-import React, { useState } from 'react'
-import styles from './DropDown.module.css'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons'
-export default function DropDown (props) {
-  const { header, items, align = 'left' } = props
-  const [open, setOpen] = useState(false)
-  function handleOpen () {
-    setOpen(!open)
-  }
-  return (
-    <div className={`${styles.dropDown} ${styles[align]}`}>
-      <span className={styles.header} onClick={handleOpen}>
-        {header}
-        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronLeft} />}
-        {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
-      </span>
-      {open && (
-        <div className={styles.menu}>
-          {items.map((item, index) => {
-            return (
-              <div className={styles.item} key={index}>
-                {item}
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-    </div>
-
-  )
-}
+'use strict'
+
+import React, { useState } from 'react'
+import styles from './DropDown.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+export default function DropDown (props) {
+  const { header, items, align = 'left' } = props
+  const [open, setOpen] = useState(false)
+  function handleOpen () {
+    setOpen(!open)
+  }
+  return (
+    <div className={`${styles.dropDown} ${styles[align]}`}>
+      <span className={styles.header} onClick={handleOpen}>
+        {header}
+        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronLeft} />}
+        {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
+      </span>
+      {open && (
+        <div className={styles.menu}>
+          {items.map((item, index) => {
+            return (
+              <div className={styles.item} key={index}>
+                {item}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+    </div>
+
+  )
+}

package/src/components/DropDown.module.css

@@ -1,23 +1,23 @@
-.dropDown {
-  @apply mx-4 relative flex flex-col;
-}
-
-.right {
-  @apply items-end;
-}
-
-.left {
-  @apply items-start;
-}
-.arrow {
-  @apply ml-2;
-}
-.header {
-  @apply hover:cursor-pointer
-}
-.menu {
-  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md z-[999];
-}
-.item {
-  @apply mb-2
+.dropDown {
+  @apply mx-4 relative flex flex-col;
+}
+
+.right {
+  @apply items-end;
+}
+
+.left {
+  @apply items-start;
+}
+.arrow {
+  @apply absolute top-[50%] right-0 translate-y-[-50%];
+}
+.header {
+  @apply hover:cursor-pointer relative pr-6;
+}
+.menu {
+  @apply absolute border-solid border border-white p-3 bg-light-blue mt-8 rounded-md z-[999] text-sm;
+}
+.item {
+  @apply py-3 text-main-dark-blue border-t border-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer; 
 }

package/src/components/FollowUs.jsx

@@ -1,35 +1,35 @@
-import React from 'react'
-import styles from './FollowUs.module.css'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
-
-export default function FollowUs ({ label = 'FOLLOW US ON' }) {
-  return (
-    <div className={styles.container}>
-      <div className={styles.label}>
-        {label}
-      </div>
-      <div className={styles.icon}>
-        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faTwitter} className='mr-2 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' />
-        </a>
-      </div>
-      <div className={styles.icon}>
-        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
-        </a>
-      </div>
-      <div className={styles.icon}>
-        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
-        </a>
-      </div>
-
-    </div>
-  )
-}
+import React from 'react'
+import styles from './FollowUs.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
+
+export default function FollowUs ({ label = 'FOLLOW US ON' }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.label}>
+        {label}
+      </div>
+      <div className={styles.icon}>
+        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <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-3 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
+        </a>
+      </div>
+
+    </div>
+  )
+}

package/src/components/FollowUs.module.css

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

package/src/components/GHLoginButton.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import LoginButton from './LoginButton'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-
-export default function GHLoginButton ({ onClick, ...props }) {
-  return (
-    <LoginButton
-      label='Continue with Github'
-      onClick={onClick}
-      icon={faGithub}
-      {...props}
-    />
-  )
-}
+import React from 'react'
+import LoginButton from './LoginButton'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+export default function GHLoginButton ({ onClick, ...props }) {
+  return (
+    <LoginButton
+      label='Continue with Github'
+      onClick={onClick}
+      icon={faGithub}
+      {...props}
+    />
+  )
+}

package/src/components/HorizontalSeparator.jsx

@@ -1,5 +1,10 @@
-'use strict'
-import React from 'react'
-export default function HorizontalSeparator () {
-  return <hr className='text-dark-green my-4' />
-}
+'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 ? `${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/Input.jsx

@@ -1,11 +1,11 @@
-'use strict'
-import React from 'react'
-import styles from './Input.module.css'
-import commonStyles from './Common.module.css'
-export default function Input ({ placeholder, value, name }) {
-  return (
-    <div className={`${styles.inputContainer} ${commonStyles.padded}`}>
-      <input type='text' name={name} value={value} placeholder={placeholder} className='grow' />
-    </div>
-  )
-}
+'use strict'
+import React from 'react'
+import styles from './Input.module.css'
+import commonStyles from './Common.module.css'
+export default function Input ({ placeholder, value, name }) {
+  return (
+    <div className={`${styles.inputContainer} ${commonStyles.padded}`}>
+      <input type='text' name={name} value={value} placeholder={placeholder} className='grow' />
+    </div>
+  )
+}

package/src/components/Input.module.css

@@ -1,7 +1,7 @@
-.inputContainer {
-  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
-}
-
-.input {
-  @apply grow focus:outline-none
-}
+.inputContainer {
+  @apply flex justify-between w-full h-10  text-white border-main-green border border-solid box-border rounded-md;
+}
+
+.input {
+  @apply grow focus:outline-none
+}