Merge pull request #378 from platformatic/feature/new-color-and-copy-…

…paste-props

Feature/new color and copy paste props

src/components/Button.module.css

@@ -69,6 +69,9 @@
 .color-black-russian {
   @apply text-black-russian border-black-russian;
 }
+.color-fluorescent-cyan {
+  @apply text-fluorescent-cyan border-fluorescent-cyan;
+}
 .no-border {
   @apply border-0;
 }
@@ -108,6 +111,9 @@
 .hover-box-shadow-black-russian {
   @apply hover:shadow-black-russian;
 }
+.hover-box-shadow-fluorescent-cyan {
+  @apply hover:shadow-fluorescent-cyan;
+}
 
 .underline-effect {
   @apply hover:underline;

src/components/ButtonOnlyIcon.module.css

@@ -69,6 +69,9 @@
 .color-black-russian{
   @apply text-black-russian border-black-russian;
 }
+.color-fluorescent-cyan{
+  @apply text-fluorescent-cyan border-fluorescent-cyan;
+}
 
 .no-border {
   @apply border-0;
@@ -109,6 +112,9 @@
 .hover-box-shadow-black-russian {
   @apply hover:shadow-black-russian;
 }
+.hover-box-shadow-fluorescent-cyan {
+  @apply hover:shadow-fluorescent-cyan;
+}
 
 .underline-effect {
   @apply hover:underline;

src/components/Common.module.css

@@ -28,6 +28,9 @@
 .bordered--black-russian {
   @apply border-black-russian;
 }
+.bordered--fluorescent-cyan {
+  @apply border-fluorescent-cyan;
+}
 .bordered--transparent {
   @apply border-none;
 }
@@ -58,6 +61,9 @@
 .bordered--black-russian-100 {
   @apply border-black-russian/100;
 }
+.bordered--fluorescent-cyan-100 {
+  @apply border-fluorescent-cyan/100;
+}
 .bordered--main-green-70 {
   @apply border-main-green/70;
 }
@@ -85,6 +91,9 @@
 .bordered--black-russian-70 {
   @apply border-black-russian/70;
 }
+.bordered--fluorescent-cyan-70 {
+  @apply border-fluorescent-cyan/70;
+}
 .bordered--main-green-30 {
   @apply border-main-green/30;
 }
@@ -109,6 +118,9 @@
 .bordered--black-russian-30 {
   @apply border-black-russian/30;
 }
+.bordered--fluorescent-cyan-30 {
+  @apply border-fluorescent-cyan/30;
+}
 .bordered--tertiary-blue-30 {
   @apply border-tertiary-blue/30;
 }
@@ -136,6 +148,9 @@
 .bordered--black-russian-20 {
   @apply border-black-russian/20;
 }
+.bordered--fluorescent-cyan-20 {
+  @apply border-fluorescent-cyan/20;
+}
 .bordered--tertiary-blue-20 {
   @apply border-tertiary-blue/20;
 }
@@ -151,6 +166,9 @@
 .bordered--black-russian-15 {
   @apply border-black-russian/15;
 }
+.bordered--fluorescent-cyan-15 {
+  @apply border-fluorescent-cyan/15;
+}
 .bordered--tertiary-blue-15 {
   @apply border-tertiary-blue/15;
 }
@@ -166,6 +184,9 @@
 .bordered--black-russian-10 {
   @apply border-black-russian/10;
 }
+.bordered--fluorescent-cyan-10 {
+  @apply border-fluorescent-cyan/10;
+}
 .bordered--tertiary-blue-10 {
   @apply border-tertiary-blue/10;
 }
@@ -224,12 +245,18 @@
 .text--black-russian {
   @apply text-black-russian;
 }
+.text--fluorescent-cyan {
+  @apply text-fluorescent-cyan;
+}
 .text--rich-black-70 {
   @apply text-rich-black/70;
 }
 .text--black-russian-70 {
   @apply text-black-russian/70;
 }
+.text--fluorescent-cyan-70 {
+  @apply text-fluorescent-cyan/70;
+}
 
 .text--base {
   @apply text-base
@@ -271,6 +298,9 @@
 .background-color-rich-black {
   @apply bg-rich-black ;
 }
+.background-color-fluorescent-cyan {
+  @apply bg-fluorescent-cyan ;
+}
 .background-color-black-russian {
   @apply bg-black-russian ;
 }
@@ -361,6 +391,9 @@
 .hover-background-color-opaque-black-russian{
   @apply hover:bg-black-russian hover:bg-opacity-15;
 }
+.hover-background-color-opaque-fluorescent-cyan{
+  @apply hover:bg-fluorescent-cyan hover:bg-opacity-15;
+}
 .hover-background-color-opaque-night{
   @apply hover:bg-night hover:bg-opacity-15;
 }
@@ -388,6 +421,9 @@
 .selected-background-color-black-russian {
   @apply !bg-black-russian bg-opacity-15;
 }
+.selected-background-color-fluorescent-cyan {
+  @apply !bg-fluorescent-cyan bg-opacity-15;
+}
 .selected-background-color-night {
   @apply !bg-night bg-opacity-15;
 }

src/components/CopyAndPaste.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 import TooltipAbsolute from './TooltipAbsolute'
+import Tooltip from './Tooltip'
 
 function CopyAndPaste ({
   value = 'app',
@@ -13,7 +14,8 @@ function CopyAndPaste ({
   size = MEDIUM,
   tooltipClassName = '',
   position = POSITION_CENTER,
-  internalOverHandling = false
+  internalOverHandling = false,
+  tooltipFixed = false
 }) {
   const [copied, setCopied] = useState(false)
 
@@ -25,9 +27,30 @@ function CopyAndPaste ({
     }, timeout)
   }
 
-  return !copied
-    ? (<PlatformaticIcon size={size} iconName='CopyPasteIcon' color={color} onClick={() => copy()} internalOverHandling={internalOverHandling} />)
-    : (
+  function renderTooltip () {
+    if (tooltipFixed) {
+      return (
+        <Tooltip
+          tooltipClassName={tooltipClassName}
+          content={(<span>{tooltipLabel}</span>)}
+          delay={100}
+          direction={DIRECTION_TOP}
+          offset={24}
+          activeDependsOnVisible
+          visible={copied}
+          position={position}
+        >
+          <PlatformaticIcon
+            size={size}
+            iconName={!copied ? 'CopyPasteIcon' : 'CircleCheckMarkIcon'}
+            color={color}
+            onClick={() => !copied ? copy() : {}}
+            internalOverHandling={internalOverHandling}
+          />
+        </Tooltip>
+      )
+    }
+    return (
       <TooltipAbsolute
         tooltipClassName={tooltipClassName}
         content={(<span>{tooltipLabel}</span>)}
@@ -38,9 +61,18 @@ function CopyAndPaste ({
         visible={copied}
         position={position}
       >
-        <PlatformaticIcon size={size} iconName='CircleCheckMarkIcon' color={color} onClick={null} />
+        <PlatformaticIcon
+          size={size}
+          iconName={!copied ? 'CopyPasteIcon' : 'CircleCheckMarkIcon'}
+          color={color}
+          onClick={() => !copied ? copy() : {}}
+          internalOverHandling={internalOverHandling}
+        />
       </TooltipAbsolute>
-      )
+    )
+  }
+
+  return renderTooltip()
 }
 
 CopyAndPaste.propTypes = {
@@ -75,7 +107,11 @@ CopyAndPaste.propTypes = {
   /**
    * position
    */
-  position: PropTypes.oneOf(POSITIONS)
+  position: PropTypes.oneOf(POSITIONS),
+  /**
+   * tooltipFixed
+   */
+  tooltipFixed: PropTypes.bool
 }
 
 export default CopyAndPaste

src/components/constants.js

@@ -15,6 +15,7 @@ export const NIGHT = 'night'
 export const ANTI_FLASH_WHITE = 'anti-flash-white'
 export const FIRE_ENGINE_RED = 'fire-engine-red'
 export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
+export const FLUORESCENT_CYAN = 'fluorescent-cyan'
 
 export const NONE = 'none'
 export const MINI = 'mini'
@@ -37,9 +38,9 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERL
 export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
 
-export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK]
-export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
-export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN]
+export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN]
+export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN]
+export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN]
 
 export const MODAL_POPUP = 'popup'
 export const MODAL_POPUP_V2 = 'popup-v2'

src/components/icons/Icons.module.css

@@ -110,6 +110,23 @@
   @apply !stroke-white;
 }
 
+.fluorescent-cyan > circle,
+.fluorescent-cyan > ellipse,
+.fluorescent-cyan > rect,
+.fluorescent-cyan > line, 
+.fluorescent-cyan > path {
+  @apply stroke-fluorescent-cyan;
+}
+
+.important-fluorescent-cyan > circle,
+.important-fluorescent-cyan > ellipse,
+.important-fluorescent-cyan > rect,
+.important-fluorescent-cyan > line, 
+.important-fluorescent-cyan > path {
+  @apply !stroke-fluorescent-cyan;
+}
+
+
 .filled-rich-black {
   @apply fill-rich-black;
 }
@@ -131,6 +148,10 @@
 .filled-tertiary-blue {
   @apply fill-tertiary-blue;
 }
+.filled-fluorescent-cyan {
+  @apply fill-fluorescent-cyan;
+}
+
 
 .fill-circle-green > circle {
   @apply fill-white;

tailwind.config.cjs

@@ -26,6 +26,7 @@ module.exports = {
         'tertiary-blue': '0px 0px 4px rgba(37, 136, 228, 0.5)',
         'rich-black': '0px 0px 4px rgba(0, 5, 11, 1)',
         'black-russian': '0px 0px 4px rgba(0, 9, 14, 23)',
+        'fluorescent-cyan': '0px 0px 4px rgba(68, 255, 236, 23)',
         white: '0px 0px 4px rgba(255, 255, 255, 0.5)'
       },
       opacity: {
@@ -50,7 +51,8 @@ module.exports = {
       'electric-purple': '#C61BE2',
       'anti-flash-white': '#EDEDED',
       'fire-engine-red': '#D71919',
-      'alternate-rich-black': '#12171D'
+      'alternate-rich-black': '#12171D',
+      'fluorescent-cyan': '#44FFEC'
     },
     fontFamily: {
       sans: ['Montserrat'],