@platformatic/ui-components 0.1.50 → 0.1.51

package/src/components/icons/AppIcon.jsx

@@ -1,38 +1,85 @@
-import React from 'react'
-export default function AppIcon () {
-  return (
-    <svg
-      width={32}
-      height={33}
-      viewBox='0 0 32 33'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <path
-        d='M12 6.75317H5C4.44772 6.75317 4 7.20089 4 7.75317V21.1132C4 21.6655 4.44772 22.1132 5 22.1132H27C27.5523 22.1132 28 21.6655 28 21.1132V7.75317C28 7.20089 27.5523 6.75317 27 6.75317H20'
-        stroke='#00283D'
-        strokeWidth={2}
-        strokeLinecap='round'
-      />
-      <rect
-        x={12}
-        y={22.1133}
-        width={8}
-        height={3.84}
-        stroke='#00283D'
-        strokeWidth={2}
-      />
-      <path
-        d='M8 26.9534C8 26.4011 8.44772 25.9534 9 25.9534H23C23.5523 25.9534 24 26.4011 24 26.9534V28.8334H8V26.9534Z'
-        stroke='#00283D'
-        strokeWidth={2}
-      />
-      <path
-        d='M16 4.83325L17.7961 10.14H23.6085L18.9062 13.4198L20.7023 18.7265L16 15.4468L11.2977 18.7265L13.0938 13.4198L8.39155 10.14H14.2039L16 4.83325Z'
-        stroke='#00283D'
-        strokeWidth={2}
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const AppIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M6 2.95996H3C2.44772 2.95996 2 3.40768 2 3.95996V9.63996C2 10.1922 2.44772 10.64 3 10.64H13C13.5523 10.64 14 10.1922 14 9.63996V3.95996C14 3.40768 13.5523 2.95996 13 2.95996H10' stroke='none' strokeLinecap='round' />
+          <rect x={6} y={10.64} width={4} height={1.92} stroke='none' />
+          <path d='M4 13.5601C4 13.0078 4.44772 12.5601 5 12.5601H11C11.5523 12.5601 12 13.0078 12 13.5601V14.0001H4V13.5601Z' stroke='none' />
+          <path d='M8 2L8.89806 4.65337H11.8042L9.45308 6.29325L10.3511 8.94662L8 7.30675L5.64886 8.94662L6.54692 6.29325L4.19577 4.65337H7.10194L8 2Z' stroke='none' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M9 4.43994H4C3.44772 4.43994 3 4.88766 3 5.43994V14.9599C3 15.5122 3.44772 15.9599 4 15.9599H20C20.5523 15.9599 21 15.5122 21 14.9599V5.43994C21 4.88766 20.5523 4.43994 20 4.43994H15' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <rect x={9} y={15.96} width={6} height={2.88} stroke='none' strokeWidth={1.5} />
+          <path d='M6 19.84C6 19.2877 6.44772 18.84 7 18.84H17C17.5523 18.84 18 19.2877 18 19.84V21H6V19.84Z' stroke='none' strokeWidth={1.5} />
+          <path d='M12 3L13.3471 6.98006H17.7063L14.1796 9.43988L15.5267 13.4199L12 10.9601L8.47329 13.4199L9.82037 9.43988L6.29366 6.98006H10.6529L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M15 7.40002H6C5.44772 7.40002 5 7.84774 5 8.40002V25.6C5 26.1523 5.44772 26.6 6 26.6H34C34.5523 26.6 35 26.1523 35 25.6V8.40002C35 7.84774 34.5523 7.40002 34 7.40002H25' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <rect x={15} y={26.6} width={10} height={4.8} stroke='none' strokeWidth={2} />
+          <path d='M10 32.4C10 31.8477 10.4477 31.4 11 31.4H29C29.5523 31.4 30 31.8477 30 32.4V35H10V32.4Z' stroke='none' strokeWidth={2} />
+          <path d='M20 5L22.2451 11.6334H29.5106L23.6327 15.7331L25.8779 22.3666L20 18.2669L14.1221 22.3666L16.3673 15.7331L10.4894 11.6334H17.7549L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
 }
+
+AppIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+AppIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default AppIcon

package/src/components/icons/ArrowDownFullIcon.jsx

@@ -0,0 +1,76 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowDownFullIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M7.29289 10.2929L3.70711 6.70711C3.07714 6.07714 3.52331 5 4.41421 5H11.5858C12.4767 5 12.9229 6.07714 12.2929 6.70711L8.70711 10.2929C8.31658 10.6834 7.68342 10.6834 7.29289 10.2929Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M11.2929 15.7929L4.70711 9.20711C4.07714 8.57714 4.52331 7.5 5.41421 7.5H18.5858C19.4767 7.5 19.9229 8.57714 19.2929 9.2071L12.7071 15.7929C12.3166 16.1834 11.6834 16.1834 11.2929 15.7929Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M19.2929 26.7929L6.70711 14.2071C6.07714 13.5771 6.52331 12.5 7.41421 12.5H32.5858C33.4767 12.5 33.9229 13.5771 33.2929 14.2071L20.7071 26.7929C20.3166 27.1834 19.6834 27.1834 19.2929 26.7929Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowDownFullIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+ArrowDownFullIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowDownFullIcon

package/src/components/icons/ArrowDownIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowDownIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M2 5L8 11L14 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M3 7L12 16L21 7' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M5 11.6667L20 26.6667L35 11.6667' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowDownIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+ArrowDownIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowDownIcon

package/src/components/icons/ArrowLeftIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowLeftIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M11 2L5 8L11 14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M16.5 3L7.5 12L16.5 21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M27.5 5L12.5 20L27.5 35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowLeftIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+ArrowLeftIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowLeftIcon

package/src/components/icons/ArrowRightIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowRightIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M5 14L11 8L5 2' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M7.5 21L16.5 12L7.5 3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M12.5 35L27.5 20L12.5 5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowRightIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+ArrowRightIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowRightIcon

package/src/components/icons/ArrowUpIcon.jsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const ArrowDownIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M14 11L8 5L2 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M21 16.5L12 7.5L3 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path d='M35 27.5L20 12.5L5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ArrowDownIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+ArrowDownIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default ArrowDownIcon

package/src/components/icons/Calendar1DayIcon.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const Calendar1DayIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path d='M2 7H5M14 7H11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={4.5} y1={5.5} x2={4.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <line x1={11.5} y1={5.5} x2={11.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <path d='M7.59712 13V6.5L8.21223 7.09L7.59712 8H7.5L6.5 9V7L7.5 6H9V13H7.59712Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={15} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M3 10.5H7.5M21 10.5H16.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={6.75} y1={8.25} x2={6.75} y2={3.75} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={17.25} y1={8.25} x2={17.25} y2={3.75} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M11.3957 19.5V9.75L12.3183 10.635L11.3957 12H11.25L9.75 13.5V10.5L11.25 9H13.5V19.5H11.3957Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={5} y={10} width={30} height={25} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 17.5H12.5M35 17.5H27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={11.5} y1={14} x2={11.5} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={29} y1={14} x2={29} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M18.9928 32.5V16.25L20.5306 17.725L18.9928 20H18.75L16.25 22.5V17.5L18.75 15H22.5V32.5H18.9928Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+Calendar1DayIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+Calendar1DayIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default Calendar1DayIcon

package/src/components/icons/Calendar7DaysIcon.jsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const Calendar7DaysIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path d='M2 7H4M14 7H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={4.5} y1={5.5} x2={4.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <line x1={11.5} y1={5.5} x2={11.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <path d='M6.46691 13L9.65441 6.52L10.0294 7.1H5.65074L6.33456 6.47V8.29H5V6H11V6.87L8 13H6.46691Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={15} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M3 10.5H6M21 10.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={6.75} y1={8.25} x2={6.75} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <line x1={17.25} y1={8.25} x2={17.25} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M9.70037 19.5L14.4816 9.78L15.0441 10.65H8.4761L9.50184 9.705V12.435H7.5V9H16.5V10.305L12 19.5H9.70037Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        ><rect x={5} y={10} width={30} height={25} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 17.5H10M35 17.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={11.5} y1={14} x2={11.5} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={29} y1={14} x2={29} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M16.1673 32.5L24.136 16.3L25.0735 17.75H14.1268L15.8364 16.175V20.725H12.5V15H27.5V17.175L20 32.5H16.1673Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+Calendar7DaysIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+Calendar7DaysIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default Calendar7DaysIcon