@platformatic/ui-components 0.1.31 → 0.1.33

package/src/components/Box.module.css

@@ -1,7 +1,7 @@
-.box {
-  @apply mx-24 my-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, 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>
+  )
+}

package/src/components/Button.module.css

@@ -1,21 +1,21 @@
-.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 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;
 }

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 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
 }

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-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>
+  )
+}

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-96;
+}
+
+.label {
+  @apply uppercase text-light-green
+}
+
+.icon {
+  @apply text-white ml-4
+}

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,9 @@
-'use strict'
-import React from 'react'
-export default function HorizontalSeparator () {
-  return <hr className='text-dark-green my-4' />
-}
+'use strict'
+import React from 'react'
+export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4 }) {
+  function getClassName () {
+    return 'text-dark-green ' + (marginTop === marginBottom ? `my-${marginTop}` : `mt-${marginTop} mb-${marginBottom}`)
+  }
+
+  return <hr className={getClassName()} />
+}

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
+}

package/src/components/List.jsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import styles from './List.module.css'
-
-export default function List ({ title, ...props }) {
-  return (
-    <div className={styles.container}>
-      {title &&
-        <div
-          className={styles.title}
-          data-testid='list-title'
-          {...props}
-        >
-          {title}
-        </div>}
-      <div className={styles.elements}>
-        {props.children}
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import styles from './List.module.css'
+
+export default function List ({ title, ...props }) {
+  return (
+    <div className={styles.container}>
+      {title &&
+        <div
+          className={styles.title}
+          data-testid='list-title'
+          {...props}
+        >
+          {title}
+        </div>}
+      <div className={styles.elements}>
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/src/components/List.module.css

@@ -1,11 +1,11 @@
-.title {
-  @apply text-light-green font-bold w-full text-left uppercase
-}
-
-.container {
-  @apply w-full
-}
-
-.elements {
-  @apply flex flex-col
-}
+.title {
+  @apply text-light-green font-bold w-full text-left uppercase
+}
+
+.container {
+  @apply w-full
+}
+
+.elements {
+  @apply flex flex-col
+}

package/src/components/ListElement.jsx

@@ -1,23 +1,23 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
-import styles from './ListElement.module.css'
-export default function List ({ title, detail }) {
-  return (
-    <div className={styles.container}>
-      <div className={styles.iconCol}>
-        <div data-testid='list-element-title-icon' className={styles.icon}>
-          <FontAwesomeIcon icon={faCircleCheck} />
-        </div>
-      </div>
-      <div className={styles.textCol}>
-        <div className={styles.title} data-testid='list-element-title'>
-          {title}
-        </div>
-        <div data-test-id='list-element-detail'>
-          {detail}
-        </div>
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import styles from './ListElement.module.css'
+export default function List ({ title, detail }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconCol}>
+        <div data-testid='list-element-title-icon' className={styles.icon}>
+          <FontAwesomeIcon icon={faCircleCheck} />
+        </div>
+      </div>
+      <div className={styles.textCol}>
+        <div className={styles.title} data-testid='list-element-title'>
+          {title}
+        </div>
+        <div data-test-id='list-element-detail'>
+          {detail}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/ListElement.module.css

@@ -1,23 +1,23 @@
-.container {
-  @apply flex flex-row my-4
-}
-
-.iconCol {
-  @apply flex flex-col w-6
-}
-
-.icon {
-  @apply text-light-green
-}
-
-.title {
-  @apply flex text-light-green font-bold w-full
-}
-
-.textCol {
-  @apply flex flex-col text-white text-justify w-full
-}
-
-.detailSpace {
-  @apply w-6
-}
+.container {
+  @apply flex flex-row my-4
+}
+
+.iconCol {
+  @apply flex flex-col w-6
+}
+
+.icon {
+  @apply text-light-green
+}
+
+.title {
+  @apply flex text-light-green font-bold w-full
+}
+
+.textCol {
+  @apply flex flex-col text-white text-justify w-full
+}
+
+.detailSpace {
+  @apply w-6
+}