@codeleap/web 3.18.8 → 3.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.18.8",
+  "version": "3.19.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/TextInput/index.tsx

@@ -25,6 +25,7 @@ import { StylesOf, HTMLProps, ComponentWithDefaultProps } from '../../types/util
 import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
 import { TextInputPresets } from './styles'
 import { getMaskInputProps, TextInputMaskingProps } from './mask'
+import { getTestId } from '../../lib/test'
 
 export * from './styles'
 export * from './mask'
@@ -53,8 +54,8 @@ export type TextInputProps =
   } & ComponentVariants<typeof TextInputPresets>
 
 type InputRef = {
-  isTextInput?: boolean,
-  focus: () => void,
+  isTextInput?: boolean
+  focus: () => void
   getInputRef: () => HTMLInputElement
 }
 
@@ -201,6 +202,8 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
 
   const inputBaseAction = isPressable ? 'onPress' : 'onClick'
 
+  const testId = getTestId(others)
+
   return (
     <InputBase
       innerWrapper={isPressable ? Touchable : undefined}
@@ -262,6 +265,7 @@ export const TextInputComponent = forwardRef<InputRef, TextInputProps>((props, i
         ]}
         {...maskProps}
         ref={innerInputRef}
+        data-testid={testId}
       />
     </InputBase>
   )

package/src/components/Tooltip/index.tsx

@@ -47,6 +47,7 @@ export type TooltipProps = PrimitiveTooltipProps & TooltipComponentProps & {
   onHover?: (hoverType: 'enter' | 'leave', value: boolean) => void
   onPress?: (value: boolean) => void
   children?: React.ReactNode
+  style?: React.CSSProperties
 } & ComponentVariants<typeof TooltipPresets> & ComponentCommonProps
 
 const defaultProps: Partial<TooltipProps> = {
@@ -91,6 +92,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
     responsiveVariants = {},
     styles = {},
     closeOnClickOutside,
+    style,
     ...rest
   } = allProps
 
@@ -105,7 +107,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
   const [visible, toggle] = hasStateProps ? [_visible, _toggle] : useState(false)
 
   const tooltipDirectionStyle = React.useMemo(() => {
-    return side ? variantsStyles[`wrapper:${side}`] : variantsStyles.wrapper
+    return side ? variantsStyles[`content:${side}`] : variantsStyles.content
   }, [side, variantsStyles])
 
   function handleToggle(_value: boolean, isToggle = true) {
@@ -161,6 +163,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
         open={visible}
         onOpenChange={onOpenChange}
         {...rest}
+        css={[variantsStyles.wrapper, style]}
       >
         <TooltipTrigger
           onClick={_onPress}
@@ -169,13 +172,18 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
           asChild
           ref={triggerRef}
           {...triggerProps}
+          style={variantsStyles.triggerWrapper}
         >
-          <TriggerWrapper {...allProps as any} {...triggerWrapperProps}>
+          <TriggerWrapper 
+            {...allProps as any} 
+            {...triggerWrapperProps}
+            style={variantsStyles.triggerInnerWrapper}
+          >
             {children}
           </TriggerWrapper>
         </TooltipTrigger>
         <TooltipPortal {...portalProps}>
-          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.wrapper]} sideOffset={2} side={side} {...contentProps}>
+          <TooltipContent ref={contentRef} css={[tooltipDirectionStyle, variantsStyles.content]} sideOffset={2} side={side} {...contentProps}>
             {
               TypeGuards.isFunction(Content)
                 ? <Content
@@ -186,7 +194,7 @@ export const Tooltip: ComponentWithDefaultProps<TooltipProps> = (props: TooltipP
                 />
                 : Content
             }
-            <TooltipArrow {...arrowProps} />
+            <TooltipArrow {...arrowProps} style={variantsStyles.arrow} />
           </TooltipContent>
         </TooltipPortal>
       </TooltipWrapper>

package/src/components/Tooltip/styles.ts

@@ -2,9 +2,14 @@ import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type TooltipSide = 'left' | 'right' | 'bottom' | 'top'
 export type TooltipState = 'delayed-open' | 'closed' | 'instant-open' | 'disabled'
-export type TooltipParts = 'wrapper' | 'arrow'
+export type TooltipParts = 
+  'wrapper' | 
+  'arrow' |
+  'content' |
+  'triggerWrapper' |
+  'triggerInnerWrapper'
 
-export type TooltipComposition = `wrapper:${TooltipSide}` | TooltipParts
+export type TooltipComposition = `content:${TooltipSide}` | TooltipParts
 
 const createTooltipStyle = createDefaultVariantFactory<TooltipComposition>()
 

package/src/components/Touchable/index.tsx

@@ -5,7 +5,7 @@ import { View } from '../View'
 import { TouchableComposition, TouchablePresets } from './styles'
 import { CSSInterpolation } from '@emotion/css'
 import { StylesOf, NativeHTMLElement } from '../../types'
-
+import { getTestId } from '../../lib/test'
 export * from './styles'
 
 export type TouchableProps<T extends ElementType = 'button'> = ComponentPropsWithRef<T> & {
@@ -147,6 +147,8 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
     style,
   ]), [variantStyles, disabled, style])
 
+  const testId = getTestId(mergedProps)
+
   return (
     <View
       component={Component || 'button'}
@@ -156,6 +158,7 @@ export const TouchableCP = <T extends NativeHTMLElement = 'button'>(
       onKeyDown={handleClick}
       ref={ref}
       css={_styles}
+      data-testid={testId}
     />
   )
 }

package/src/components/View/index.tsx

@@ -7,6 +7,7 @@ import { useMediaQuery } from '../../lib/hooks'
 import { NativeHTMLElement } from '../../types'
 import { motion } from 'framer-motion'
 import { ViewProps } from './types'
+import { getTestId } from '../../lib/test'
 
 export * from './styles'
 export * from './types'
@@ -80,6 +81,8 @@ export const ViewCP = (
     logger.log(debugName, { componentStyles, platformMediaQuery, matches })
   }
 
+  const testId = getTestId(viewProps)
+
   return (
     <Component
       css={componentStyles}
@@ -87,6 +90,7 @@ export const ViewCP = (
       {...onHoverProps}
       {...props}
       {...animatedProps}
+      data-testid={testId}
     >
       {children}
     </Component>

package/src/lib/test.ts

@@ -0,0 +1,11 @@
+import { TypeGuards } from '@codeleap/common'
+
+export const getTestId = (props: Record<string, any>) => {
+  let id = props.testId || props['data-testid'] || props.id || props.debugName
+
+  if (TypeGuards.isString(id)) {
+    id = id.replace(/\s/g, '_').toLowerCase()
+  }
+
+  return id
+}

package/src/lib/utils/index.ts

@@ -2,3 +2,4 @@ export * from './pollyfils/scroll'
 export * from './stopPropagation'
 export { default as url } from 'url-parse'
 export { default as Cookies } from './cookies'
+