@platformatic/ui-components 0.1.48 → 0.1.50

package/src/components/Box.jsx

@@ -1,14 +1,14 @@
-'use strict'
-
-import styles from './Box.module.css'
-import React from 'react'
-export default function Box ({ justifyCentered, children }) {
-  let className = `${styles.box}`
-  if (justifyCentered) className += ` ${styles.justifyCentered}`
-
-  return (
-    <div className={className}>
-      {children}
-    </div>
-  )
-}
+'use strict'
+
+import styles from './Box.module.css'
+import React from 'react'
+export default function Box ({ justifyCentered, children }) {
+  let className = `${styles.box}`
+  if (justifyCentered) className += ` ${styles.justifyCentered}`
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  )
+}

package/src/components/Box.module.css

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

package/src/components/Button.jsx

@@ -1,95 +1,95 @@
-'use strict'
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Button.module.css'
-import PlatformaticIcon from './PlatformaticIcon'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
-function Button (props) {
-  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, platformaticIcon, ...rest } = props
-  let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
-  if (!bordered) className += ` ${styles['no-border']}`
-  if (disabled) {
-    className += ` ${styles.disabled}`
-  } else {
-    if (hoverEffect === 'hover') {
-      className += ` ${styles['hover-' + backgroundColor]}`
-    } else {
-      className += ` ${styles['underline-effect']}`
-    }
-  }
-  if (bold) className += ` ${styles.fontBold}`
-  if (fullWidth) className += ` ${styles.fullWidth}`
-  return (
-    <button className={className} disabled={disabled} alt={label} {...rest}>
-      {icon ? <FontAwesomeIcon icon={icon} className={`${styles['margin-right-' + size]}`} data-testid='button-icon' /> : null}
-      {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
-      <span>{label}</span>
-    </button>
-  )
-}
-
-Button.propTypes = {
-  /**
-   * Icon
-   */
-  icon: PropTypes.object,
-  /**
-   * label
-   */
-  label: PropTypes.string,
-  /**
-   * color of text, icon and borders
-   */
-  color: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
-  /**
-   * background color of the button
-   */
-  backgroundColor: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
-  /**
-   * Size
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Bold
-   */
-  bold: PropTypes.bool,
-  /**
-   * Effect on hover
-   */
-  hoverEffect: PropTypes.oneOf(['hover', 'underline']),
-  /**
-   * Apply border: default true
-   */
-  bordered: PropTypes.bool,
-  /**
-   * Full Width: default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * platformaticIcon: should be removed once we use totally our icons
-   */
-  platformaticIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string
-  })
-}
-
-Button.defaultProps = {
-  label: '',
-  color: 'main-dark-blue',
-  backgroundColor: 'transparent',
-  disabled: false,
-  size: 'large',
-  bold: false,
-  hoverEffect: 'hover',
-  bordered: true,
-  fullWidth: false,
-  platformaticIcon: null
-}
-
-export default Button
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Button.module.css'
+import PlatformaticIcon from './PlatformaticIcon'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+function Button (props) {
+  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, platformaticIcon, ...rest } = props
+  let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
+  if (!bordered) className += ` ${styles['no-border']}`
+  if (disabled) {
+    className += ` ${styles.disabled}`
+  } else {
+    if (hoverEffect === 'hover') {
+      className += ` ${styles['hover-' + backgroundColor]}`
+    } else {
+      className += ` ${styles['underline-effect']}`
+    }
+  }
+  if (bold) className += ` ${styles.fontBold}`
+  if (fullWidth) className += ` ${styles.fullWidth}`
+  return (
+    <button className={className} disabled={disabled} alt={label} {...rest}>
+      {icon ? <FontAwesomeIcon icon={icon} className={`${styles['margin-right-' + size]}`} data-testid='button-icon' /> : null}
+      {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
+      <span>{label}</span>
+    </button>
+  )
+}
+
+Button.propTypes = {
+  /**
+   * Icon
+   */
+  icon: PropTypes.object,
+  /**
+   * label
+   */
+  label: PropTypes.string,
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Bold
+   */
+  bold: PropTypes.bool,
+  /**
+   * Effect on hover
+   */
+  hoverEffect: PropTypes.oneOf(['hover', 'underline']),
+  /**
+   * Apply border: default true
+   */
+  bordered: PropTypes.bool,
+  /**
+   * Full Width: default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * platformaticIcon: should be removed once we use totally our icons
+   */
+  platformaticIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  })
+}
+
+Button.defaultProps = {
+  label: '',
+  color: 'main-dark-blue',
+  backgroundColor: 'transparent',
+  disabled: false,
+  size: 'large',
+  bold: false,
+  hoverEffect: 'hover',
+  bordered: true,
+  fullWidth: false,
+  platformaticIcon: null
+}
+
+export default Button

package/src/components/Button.module.css

@@ -1,128 +1,128 @@
-.button {
-  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border flex items-center justify-center gap-x-2;
-}
-.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;
-}
-.background-color-main-green {
-  @apply bg-main-green !important;
-}
-.background-color-light-green {
-  @apply bg-light-green !important;
-}
-.background-color-dark-green {
-  @apply bg-dark-green !important;
-}
-.background-color-main-dark-blue{
-  @apply bg-main-dark-blue !important;
-}
-.background-color-dark-blue {
-  @apply bg-dark-blue !important;
-}
-.background-color-light-blue {
-  @apply bg-light-blue !important;
-}
-.background-color-white{
-  @apply bg-white !important;
-}
-.background-color-error-red{
-  @apply bg-error-red !important;
-}
-.background-color-tertiary-blue{
-  @apply bg-tertiary-blue !important;
-}
-.background-color-transparent{
-  @apply bg-transparent;
-}
-.color-main-green {
-  @apply text-main-green border-main-green;
-}
-.color-light-green {
-  @apply text-light-green border-light-green;
-}
-.color-dark-green {
-  @apply text-dark-green border-dark-green;
-}
-.color-main-dark-blue {
-  @apply text-main-dark-blue border-main-dark-blue;
-}
-.color-dark-blue{
-  @apply text-dark-blue border-dark-blue;
-}
-.color-light-blue{
-  @apply text-light-blue border-light-blue;
-}
-.color-white{
-  @apply text-white border-white;
-}
-.color-error-red{
-  @apply text-error-red border-error-red;
-}
-.color-tertiary-blue{
-  @apply text-tertiary-blue border-tertiary-blue;
-}
-.color-transparent{
-  @apply text-transparent border-transparent;
-}
-.no-border {
-  @apply border-0;
-}
-.disabled {
-  @apply opacity-30 cursor-default;
-}
-.hover-main-green {
-  @apply hover:shadow-main-green;
-}
-.hover-light-green {
-  @apply hover:shadow-light-green;
-}
-.hover-dark-green {
-  @apply hover:shadow-dark-green;
-}
-.hover-main-dark-blue {
-  @apply hover:shadow-main-dark-blue;
-}
-.hover-dark-blue {
-  @apply hover:shadow-dark-blue;
-}
-.hover-light-blue {
-  @apply hover:shadow-light-blue;
-}
-.hover-white{
-  @apply hover:shadow-wrap;
-}
-.hover-error-red {
-  @apply hover:shadow-error-red;
-}
-.hover-tertiary-blue {
-  @apply hover:shadow-tertiary-blue;
-}
-.underline-effect {
-  @apply hover:underline;
-}
-.fullWidth {
-  @apply w-full;
+.button {
+  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border flex items-center justify-center gap-x-2;
+}
+.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;
+}
+.background-color-main-green {
+  @apply bg-main-green !important;
+}
+.background-color-light-green {
+  @apply bg-light-green !important;
+}
+.background-color-dark-green {
+  @apply bg-dark-green !important;
+}
+.background-color-main-dark-blue{
+  @apply bg-main-dark-blue !important;
+}
+.background-color-dark-blue {
+  @apply bg-dark-blue !important;
+}
+.background-color-light-blue {
+  @apply bg-light-blue !important;
+}
+.background-color-white{
+  @apply bg-white !important;
+}
+.background-color-error-red{
+  @apply bg-error-red !important;
+}
+.background-color-tertiary-blue{
+  @apply bg-tertiary-blue !important;
+}
+.background-color-transparent{
+  @apply bg-transparent;
+}
+.color-main-green {
+  @apply text-main-green border-main-green;
+}
+.color-light-green {
+  @apply text-light-green border-light-green;
+}
+.color-dark-green {
+  @apply text-dark-green border-dark-green;
+}
+.color-main-dark-blue {
+  @apply text-main-dark-blue border-main-dark-blue;
+}
+.color-dark-blue{
+  @apply text-dark-blue border-dark-blue;
+}
+.color-light-blue{
+  @apply text-light-blue border-light-blue;
+}
+.color-white{
+  @apply text-white border-white;
+}
+.color-error-red{
+  @apply text-error-red border-error-red;
+}
+.color-tertiary-blue{
+  @apply text-tertiary-blue border-tertiary-blue;
+}
+.color-transparent{
+  @apply text-transparent border-transparent;
+}
+.no-border {
+  @apply border-0;
+}
+.disabled {
+  @apply opacity-30 cursor-default;
+}
+.hover-main-green {
+  @apply hover:shadow-main-green;
+}
+.hover-light-green {
+  @apply hover:shadow-light-green;
+}
+.hover-dark-green {
+  @apply hover:shadow-dark-green;
+}
+.hover-main-dark-blue {
+  @apply hover:shadow-main-dark-blue;
+}
+.hover-dark-blue {
+  @apply hover:shadow-dark-blue;
+}
+.hover-light-blue {
+  @apply hover:shadow-light-blue;
+}
+.hover-white{
+  @apply hover:shadow-wrap;
+}
+.hover-error-red {
+  @apply hover:shadow-error-red;
+}
+.hover-tertiary-blue {
+  @apply hover:shadow-tertiary-blue;
+}
+.underline-effect {
+  @apply hover:underline;
+}
+.fullWidth {
+  @apply w-full;
 }

package/src/components/ButtonFullRounded.jsx

@@ -1,17 +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>
-  )
-}
+'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

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

@@ -1,11 +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} />
-  )
-}
+'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

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