@platformatic/ui-components 0.1.92 → 0.1.93

package/src/components/logos/ProLogo.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { MAIN_DARK_BLUE, WHITE } from '../constants'
+
+function ProLogo ({ backgroundColor, width, height }) {
+  let icon = (
+    <svg width={width} height={height} viewBox='0 0 370 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M187.437 64.9734H332.966C353.06 64.9734 369.349 81.2623 369.349 101.356V101.356C369.349 121.449 353.06 137.738 332.966 137.738H187.437L214.697 123.185L223.609 97.1978L208.406 75.3684L187.437 64.9734Z' fill='#00283D' />
+      <path d='M65.0386 133.582H192.308V133.542C197.131 133.317 201.842 132.015 206.094 129.73C210.347 127.446 214.032 124.238 216.878 120.342C219.725 116.446 221.66 111.962 222.542 107.221C223.424 102.479 223.23 97.5995 221.974 92.9426C220.718 88.2856 218.432 83.9694 215.285 80.3119C212.137 76.6544 208.209 73.7487 203.789 71.8088C199.368 69.8689 194.569 68.9443 189.743 69.1031C184.918 69.2618 180.189 70.4999 175.906 72.7261C173.263 66.6304 169.262 61.2174 164.209 56.8992C159.155 52.5811 153.182 49.4715 146.744 47.8071M37.7368 47.8071C28.3653 50.221 20.0632 55.6791 14.1368 63.3224C8.21047 70.9657 4.99627 80.3604 5 90.0283C5.00373 99.6962 8.22517 109.088 14.1574 116.727C20.0897 124.366 28.396 129.818 37.7694 132.224' stroke='#00283D' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M88.0831 74.5394L71.1029 80.4998L78.5755 96.3318' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M71.4855 80.7804C79.2282 85.3286 88.2586 87.1933 97.1719 86.0844C106.085 84.9755 114.382 80.9551 120.771 74.6488C127.161 68.3424 131.285 60.1034 132.502 51.2135C133.719 42.3235 131.961 33.281 127.502 25.4922C123.042 17.7035 116.131 11.6053 107.843 8.14612C99.5555 4.68696 90.3556 4.06077 81.6746 6.36495C72.9937 8.66913 65.3183 13.7745 59.8424 20.887C54.3665 27.9995 51.397 36.7203 51.3959 45.693V106.391' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+      <path opacity={0.2} d='M51.3959 170.56V177.651' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+      <path opacity={0.4} d='M51.4611 148.247V159.448' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+      <path opacity={0.7} d='M51.3959 117.925V136.652' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+      <path d='M240.018 119.958V83.2607H255.903C259.188 83.2607 262.019 83.8024 264.395 84.8858C266.772 85.9343 268.607 87.4546 269.9 89.4467C271.193 91.4388 271.839 93.8154 271.839 96.5764C271.839 99.3025 271.193 101.662 269.9 103.654C268.607 105.646 266.772 107.184 264.395 108.267C262.019 109.316 259.188 109.84 255.903 109.84H244.736L248.511 106.013V119.958H240.018ZM248.511 106.956L244.736 102.92H255.431C258.052 102.92 260.009 102.361 261.302 101.242C262.595 100.124 263.242 98.5685 263.242 96.5764C263.242 94.5494 262.595 92.9766 261.302 91.8582C260.009 90.7399 258.052 90.1807 255.431 90.1807H244.736L248.511 86.144V106.956ZM277.326 119.958V91.7534H285.137V99.7219L284.036 97.4152C284.875 95.4231 286.221 93.9203 288.073 92.9067C289.925 91.8582 292.18 91.334 294.836 91.334V98.8831C294.486 98.8481 294.172 98.8307 293.892 98.8307C293.612 98.7957 293.315 98.7782 293.001 98.7782C290.764 98.7782 288.947 99.4248 287.549 100.718C286.186 101.976 285.504 103.951 285.504 106.642V119.958H277.326ZM312.863 120.377C309.857 120.377 307.184 119.748 304.842 118.49C302.536 117.232 300.701 115.519 299.338 113.352C298.01 111.15 297.346 108.651 297.346 105.856C297.346 103.025 298.01 100.526 299.338 98.3588C300.701 96.157 302.536 94.4445 304.842 93.2213C307.184 91.9631 309.857 91.334 312.863 91.334C315.834 91.334 318.49 91.9631 320.832 93.2213C323.173 94.4445 325.008 96.1396 326.336 98.3064C327.664 100.473 328.328 102.99 328.328 105.856C328.328 108.651 327.664 111.15 326.336 113.352C325.008 115.519 323.173 117.232 320.832 118.49C318.49 119.748 315.834 120.377 312.863 120.377ZM312.863 113.667C314.226 113.667 315.449 113.352 316.533 112.723C317.616 112.094 318.472 111.203 319.102 110.049C319.731 108.861 320.045 107.463 320.045 105.856C320.045 104.213 319.731 102.815 319.102 101.662C318.472 100.508 317.616 99.617 316.533 98.9879C315.449 98.3589 314.226 98.0443 312.863 98.0443C311.5 98.0443 310.277 98.3589 309.193 98.9879C308.11 99.617 307.236 100.508 306.572 101.662C305.943 102.815 305.629 104.213 305.629 105.856C305.629 107.463 305.943 108.861 306.572 110.049C307.236 111.203 308.11 112.094 309.193 112.723C310.277 113.352 311.5 113.667 312.863 113.667Z' fill='white' />
+
+    </svg>
+  )
+
+  if (backgroundColor === MAIN_DARK_BLUE) {
+    icon = (
+      <svg width={width} height={height} viewBox='0 0 370 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path d='M187.437 64.9734H332.966C353.06 64.9734 369.349 81.2623 369.349 101.356V101.356C369.349 121.449 353.06 137.738 332.966 137.738H187.437L214.697 123.185L223.609 97.1978L208.406 75.3684L187.437 64.9734Z' fill='white' />
+        <path d='M65.0386 133.582H192.308V133.542C197.131 133.317 201.842 132.015 206.094 129.73C210.347 127.446 214.032 124.238 216.878 120.342C219.725 116.446 221.66 111.962 222.542 107.221C223.424 102.479 223.23 97.5995 221.974 92.9426C220.718 88.2856 218.432 83.9694 215.285 80.3119C212.137 76.6544 208.209 73.7487 203.789 71.8088C199.368 69.8689 194.569 68.9443 189.743 69.1031C184.918 69.2618 180.189 70.4999 175.906 72.7261C173.263 66.6304 169.262 61.2174 164.209 56.8992C159.155 52.5811 153.182 49.4715 146.744 47.8071M37.7368 47.8071C28.3653 50.221 20.0632 55.6791 14.1368 63.3224C8.21047 70.9657 4.99627 80.3604 5 90.0283C5.00373 99.6962 8.22517 109.088 14.1574 116.727C20.0897 124.366 28.396 129.818 37.7694 132.224' stroke='white' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+        <path d='M88.0831 74.5394L71.1029 80.4998L78.5755 96.3318' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+        <path d='M71.4855 80.7804C79.2282 85.3286 88.2586 87.1933 97.1719 86.0844C106.085 84.9755 114.382 80.9551 120.771 74.6488C127.161 68.3424 131.285 60.1034 132.502 51.2135C133.719 42.3235 131.961 33.281 127.502 25.4922C123.042 17.7035 116.131 11.6053 107.843 8.14612C99.5555 4.68696 90.3556 4.06077 81.6746 6.36495C72.9937 8.66913 65.3183 13.7745 59.8424 20.887C54.3665 27.9995 51.397 36.7203 51.3959 45.693V106.391' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+        <path opacity={0.2} d='M51.3959 170.56V177.651' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+        <path opacity={0.4} d='M51.4611 148.247V159.448' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+        <path opacity={0.7} d='M51.3959 117.925V136.652' stroke='#21FA90' strokeWidth={8.38788} strokeLinecap='round' strokeLinejoin='round' />
+        <path d='M240.018 119.958V83.2607H255.903C259.188 83.2607 262.019 83.8024 264.395 84.8858C266.772 85.9343 268.607 87.4546 269.9 89.4467C271.193 91.4388 271.839 93.8154 271.839 96.5764C271.839 99.3025 271.193 101.662 269.9 103.654C268.607 105.646 266.772 107.184 264.395 108.267C262.019 109.316 259.188 109.84 255.903 109.84H244.736L248.511 106.013V119.958H240.018ZM248.511 106.956L244.736 102.92H255.431C258.052 102.92 260.009 102.361 261.302 101.242C262.595 100.124 263.242 98.5685 263.242 96.5764C263.242 94.5494 262.595 92.9766 261.302 91.8582C260.009 90.7399 258.052 90.1807 255.431 90.1807H244.736L248.511 86.144V106.956ZM277.326 119.958V91.7534H285.137V99.7219L284.036 97.4152C284.875 95.4231 286.221 93.9203 288.073 92.9067C289.925 91.8582 292.18 91.334 294.836 91.334V98.8831C294.486 98.8481 294.172 98.8307 293.892 98.8307C293.612 98.7957 293.315 98.7782 293.001 98.7782C290.764 98.7782 288.947 99.4248 287.549 100.718C286.186 101.976 285.504 103.951 285.504 106.642V119.958H277.326ZM312.863 120.377C309.857 120.377 307.184 119.748 304.842 118.49C302.536 117.232 300.701 115.519 299.338 113.352C298.01 111.15 297.346 108.651 297.346 105.856C297.346 103.025 298.01 100.526 299.338 98.3588C300.701 96.157 302.536 94.4445 304.842 93.2213C307.184 91.9631 309.857 91.334 312.863 91.334C315.834 91.334 318.49 91.9631 320.832 93.2213C323.173 94.4445 325.008 96.1396 326.336 98.3064C327.664 100.473 328.328 102.99 328.328 105.856C328.328 108.651 327.664 111.15 326.336 113.352C325.008 115.519 323.173 117.232 320.832 118.49C318.49 119.748 315.834 120.377 312.863 120.377ZM312.863 113.667C314.226 113.667 315.449 113.352 316.533 112.723C317.616 112.094 318.472 111.203 319.102 110.049C319.731 108.861 320.045 107.463 320.045 105.856C320.045 104.213 319.731 102.815 319.102 101.662C318.472 100.508 317.616 99.617 316.533 98.9879C315.449 98.3589 314.226 98.0443 312.863 98.0443C311.5 98.0443 310.277 98.3589 309.193 98.9879C308.11 99.617 307.236 100.508 306.572 101.662C305.943 102.815 305.629 104.213 305.629 105.856C305.629 107.463 305.943 108.861 306.572 110.049C307.236 111.203 308.11 112.094 309.193 112.723C310.277 113.352 311.5 113.667 312.863 113.667Z' fill='#00283D' />
+
+      </svg>
+    )
+  }
+
+  return icon
+}
+
+ProLogo.propTypes = {
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
+  /**
+   * width
+   */
+  width: PropTypes.number,
+  /**
+   * height
+   */
+  height: PropTypes.number
+}
+
+ProLogo.defaultProps = {
+  backgroundColor: WHITE,
+  width: 370,
+  height: 182
+}
+
+export default ProLogo

package/src/components/logos/index.js

@@ -1,7 +1,11 @@
+import AdvancedLogo from './AdvancedLogo'
 import BasicLogo from './BasicLogo'
 import FreeLogo from './FreeLogo'
+import ProLogo from './ProLogo'
 
 export default {
+  AdvancedLogo,
   BasicLogo,
-  FreeLogo
+  FreeLogo,
+  ProLogo
 }

package/src/stories/LogoDropDown.stories.jsx

@@ -0,0 +1,43 @@
+'use strict'
+import React, { useState } from 'react'
+import LogoDropDown from '../components/LogoDropDown'
+export default {
+  title: 'Platformatic/LogoDropDown',
+  component: LogoDropDown,
+  decorators: [dd => <div className='text-white'>{dd()}</div>]
+}
+
+const Template = ({ items }) => {
+  const [selected, setSelected] = useState('1')
+
+  function getItems () {
+    return items.map(item => ({ handleClick: () => setSelected(item.id), ...item }))
+  }
+  return (
+    <div>
+      <LogoDropDown items={getItems()} itemSelected={selected} />
+    </div>
+
+  )
+}
+
+export const Default = Template.bind({})
+
+Default.args = {
+  items: [{
+    id: '1',
+    name: 'Organization-name-1'
+  }, {
+    id: '2',
+    name: 'Organization-name-name-name-name-name-name-2'
+  }, {
+    id: '3',
+    name: 'Organization-name-3'
+  }, {
+    id: '4',
+    name: 'Short-name'
+  }, {
+    id: '5',
+    name: 'abc'
+  }]
+}