@veracity/vui 1.0.0 → 1.1.1

package/src/button/button.tsx

@@ -10,16 +10,38 @@ import { buttonStateMapping } from './consts'
 import { ButtonProvider } from './context'
 
 const ContentWrapper = styled.span`
-	visibility: hidden;
+  visibility: hidden;
 `
 
 const StateWrapper = styled.span`
-	bottom: 0;
-	display: flex;
-	left: 0;
-	position: absolute;
-	right: 0;
-	top: 0;
+  bottom: 0;
+  display: flex;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+`
+
+export const ButtonBase = styled.buttonBox<ButtonProps>`
+  align-items: center;
+  border-radius: md;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-weight: medium;
+  justify-content: center;
+  line-height: normal;
+  overflow: hidden;
+  position: relative;
+  transition-duration: fast;
+  user-select: none;
+  width: fit-content;
+
+  &:focus,
+  &:focus:hover {
+    border-color: transparent;
+    outline: none;
+    z-index: 1;
+  }
 `
 /**
  * Triggers given actions on click. Supports multiple states, sizes and variants.
@@ -28,149 +50,125 @@ const StateWrapper = styled.span`
  *
  * Exposes some props to the children via context.
  */
-export const ButtonBase = styled.buttonBox<ButtonProps>`
-	align-items: center;
-	border-radius: md;
-	display: inline-flex;
-	flex-shrink: 0;
-	font-weight: medium;
-	justify-content: center;
-	line-height: normal;
-	overflow: hidden;
-	position: relative;
-	transition-duration: fast;
-	user-select: none;
-	width: fit-content;
-
-	&:focus,
-	&:focus:hover {
-		border-color: transparent;
-		outline: none;
-		z-index: 1;
-	}
-`
-
 export const Button = vui<'button', ButtonProps>((props, ref) => {
-	const buttonGroupProps = useButtonGroupContext()
-	const mergedProps = { ...buttonGroupProps, ...props }
-	const {
-		borderWidth: borderWidthProp,
-		children,
-		className,
-		colorScheme: colorSchemeProp,
-		disabled,
-		icon,
-		iconLeft,
-		iconRight,
-		isElevated,
-		isFullWidth,
+  const buttonGroupProps = useButtonGroupContext()
+  const mergedProps = { ...buttonGroupProps, ...props }
+  const {
+    borderWidth: borderWidthProp,
+    children,
+    className,
+    colorScheme: colorSchemeProp,
+    disabled,
+    icon,
+    iconLeft,
+    iconRight,
+    isElevated,
+    isFullWidth,
 		isLoading, // eslint-disable-line
-		isRound,
-		isSplit,
-		isTruncated,
-		size,
-		state = props.isLoading ? 'loading' : '',
-		stateMapping,
-		text,
-		variant,
-		...rest
-	} = mergedProps
-	const hasState = Boolean(state) && state !== 'idle'
-	const states = { ...buttonStateMapping, ...stateMapping }
-	const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {}
-	const colorScheme = filterUndefined({
-		colorScheme: states[state]?.colorScheme ?? colorSchemeProp
-	})
-
-	const styles = useStyleConfig('Button', { ...mergedProps, ...colorScheme })
-	const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container
-
-	const context = useMemo(
-		() => filterUndefined({ colorScheme, disabled, size, variant }),
-		[colorScheme, disabled, size, variant]
-	)
-
-	const Content = hasState ? ContentWrapper : React.Fragment
-
-	// Apply more space for text and less space for icons
-	const border = borderWidthProp ?? borderWidth ?? 0
-	const spaceXItem = spaceX - border
-	const spaceXText = spaceX * 2 - border
-	const iconLeftMr = spaceXItem + 1 + 'px'
-	const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px'
-	const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
-	const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
-
-	const disabledBorderColor = variant === 'outlined' ? 'disabled.border' : 'disabled.bg'
-
-	const disabledProps = disabled
-		? {
-				'aria-disabled': disabled,
-				activeBg: 'disabled.bg',
-				bg: 'disabled.bg',
-				borderColor: disabledBorderColor,
-				hoverBorderColor: disabledBorderColor,
-				color: 'disabled.color',
-				cursor: 'not-allowed',
-				hoverBg: 'disabled.bg'
-		  }
-		: {}
-
-	const aliasedProps = filterUndefined({
-		borderRadius: isRound ? h / 2 : undefined,
-		boxShadow: isElevated ? '2' : undefined,
-		minW: icon ? 0 : undefined,
-		pointerEvents: hasState ? 'none' : undefined,
-		w: isFullWidth ? '100%' : undefined
-	})
-
-	return (
-		<ButtonProvider value={context}>
-			<ButtonBase
-				borderWidth={border}
-				className={cs('vui-button', className)}
-				disabled={disabled}
-				focusRing={3}
-				h={h}
-				pl={pl}
-				pr={pr}
-				ref={ref}
-				type="button"
-				variant={variant}
-				{...buttonStyles}
-				{...disabledProps}
-				{...aliasedProps}
-				{...rest}
-			>
-				{hasState && (
-					<StateWrapper onClick={e => e.stopPropagation()} {...stateProps}>
-						<ButtonIcon m="auto" {...stateIconProps} />
-					</StateWrapper>
-				)}
-
-				<Content>
-					{isString(icon) ? <ButtonIcon name={icon} /> : icon}
-
-					{!icon && (
-						<>
-							{isString(iconLeft) ? <ButtonIcon mr={iconLeftMr} name={iconLeft} /> : iconLeft}
-
-							{children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
-
-							{isString(iconRight) ? <ButtonIcon ml={iconRightMl} name={iconRight} /> : iconRight}
-						</>
-					)}
-				</Content>
-			</ButtonBase>
-		</ButtonProvider>
-	)
+    isRound,
+    isSplit,
+    isTruncated,
+    size,
+    state = props.isLoading ? 'loading' : '',
+    stateMapping,
+    text,
+    variant,
+    ...rest
+  } = mergedProps
+  const hasState = Boolean(state) && state !== 'idle'
+  const states = { ...buttonStateMapping, ...stateMapping }
+  const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {}
+  const colorScheme = filterUndefined({
+    colorScheme: states[state]?.colorScheme ?? colorSchemeProp
+  })
+
+  const styles = useStyleConfig('Button', { ...mergedProps, ...colorScheme })
+  const { borderWidth, h, spaceX = 0, ...buttonStyles } = styles.container
+
+  const context = useMemo(
+    () => filterUndefined({ colorScheme, disabled, size, variant }),
+    [colorScheme, disabled, size, variant]
+  )
+
+  const Content = hasState ? ContentWrapper : React.Fragment
+
+  // Apply more space for text and less space for icons
+  const border = borderWidthProp ?? borderWidth ?? 0
+  const spaceXItem = spaceX - border
+  const spaceXText = spaceX * 2 - border
+  const iconLeftMr = spaceXItem + 1 + 'px'
+  const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px'
+  const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px'
+  const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px'
+
+  const disabledBorderColor = variant === 'outlined' ? 'disabled.border' : 'disabled.bg'
+
+  const disabledProps = disabled
+    ? {
+        'aria-disabled': disabled,
+        activeBg: 'disabled.bg',
+        bg: 'disabled.bg',
+        borderColor: disabledBorderColor,
+        hoverBorderColor: disabledBorderColor,
+        color: 'disabled.color',
+        cursor: 'not-allowed',
+        hoverBg: 'disabled.bg'
+      }
+    : {}
+
+  const aliasedProps = filterUndefined({
+    borderRadius: isRound ? h / 2 : undefined,
+    boxShadow: isElevated ? '2' : undefined,
+    minW: icon ? 0 : undefined,
+    pointerEvents: hasState ? 'none' : undefined,
+    w: isFullWidth ? '100%' : undefined
+  })
+
+  return (
+    <ButtonProvider value={context}>
+      <ButtonBase
+        borderWidth={border}
+        className={cs('vui-button', className)}
+        disabled={disabled}
+        focusRing={3}
+        h={h}
+        pl={pl}
+        pr={pr}
+        ref={ref}
+        type="button"
+        variant={variant}
+        {...buttonStyles}
+        {...disabledProps}
+        {...aliasedProps}
+        {...rest}
+      >
+        {hasState && (
+          <StateWrapper onClick={e => e.stopPropagation()} {...stateProps}>
+            <ButtonIcon m="auto" {...stateIconProps} />
+          </StateWrapper>
+        )}
+
+        <Content>
+          {isString(icon) ? <ButtonIcon name={icon} /> : icon}
+
+          {!icon && (
+            <>
+              {isString(iconLeft) ? <ButtonIcon mr={iconLeftMr} name={iconLeft} /> : iconLeft}
+
+              {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
+
+              {isString(iconRight) ? <ButtonIcon ml={iconRightMl} name={iconRight} /> : iconRight}
+            </>
+          )}
+        </Content>
+      </ButtonBase>
+    </ButtonProvider>
+  )
 }) as VuiComponent<'button', ButtonProps> & {
-	Icon: typeof ButtonIcon
-	Text: typeof ButtonText
+  Icon: typeof ButtonIcon
+  Text: typeof ButtonText
 }
 
-Button.displayName = 'Button'
-
 Button.Icon = ButtonIcon
 Button.Text = ButtonText
 

package/src/button/button.types.ts

@@ -4,37 +4,37 @@ import { ThemingProps } from '../theme'
 import { AnyString } from '../utils'
 
 export type ButtonProps = SystemProps &
-	ThemingProps<'Button'> & {
-		/** Available theme colors for this component. @default prussian */
-		colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red'
-		/** Icon that replaces any other content. */
-		icon?: IconProp | JSX.Element
-		/** Socket displaying icon on the left side. */
-		iconLeft?: IconProp | JSX.Element
-		/** Socket displaying icon on the right side. */
-		iconRight?: IconProp | JSX.Element
-		/** Adds box shadow style. @default false */
-		isElevated?: boolean
-		/** Makes the button take full width of the container. @deprecated */
-		isFullWidth?: boolean
-		/** Replaces content with a loading spinner. @default false */
-		isLoading?: boolean
-		/** Rounds the borders. @default false */
-		isRound?: boolean
-		/** Separates right icon from the content. @deprecated */
-		isSplit?: boolean
-		/** Modifies Button style and content based on the given state. */
-		state?: ButtonState
-		/** Object definition of styles and content for each state. */
-		stateMapping?: ButtonStateMapping
-		/** Socket placing text as alternative to children. */
-		text?: React.ReactNode
-	}
+  ThemingProps<'Button'> & {
+    /** Available theme colors for this component. @default prussian */
+    colorScheme?: 'blue' | 'green' | 'pink' | 'prussian' | 'red'
+    /** Icon that replaces any other content. */
+    icon?: IconProp | JSX.Element
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element
+    /** Adds box shadow style. @default false */
+    isElevated?: boolean
+    /** Makes the button take full width of the container. @deprecated */
+    isFullWidth?: boolean
+    /** Replaces content with a loading spinner. @default false */
+    isLoading?: boolean
+    /** Rounds the borders. @default false */
+    isRound?: boolean
+    /** Separates right icon from the content. @deprecated */
+    isSplit?: boolean
+    /** Modifies Button style and content based on the given state. */
+    state?: ButtonState
+    /** Object definition of styles and content for each state. */
+    stateMapping?: ButtonStateMapping
+    /** Socket placing text as alternative to children. */
+    text?: React.ReactNode
+  }
 export type ButtonState = 'error' | 'idle' | 'loading' | 'success' | AnyString
 
 export type ButtonStateMapping = Record<
-	string,
-	SystemProps & { colorScheme: ButtonProps['colorScheme']; iconProps: IconProps }
+  string,
+  SystemProps & { colorScheme: ButtonProps['colorScheme']; iconProps: IconProps }
 >
 
 /** Narrower prop definition for IconButton component */

package/src/button/buttonIcon.tsx

@@ -7,12 +7,10 @@ import { useButtonContext } from './context'
 
 /** Displays an icon within the Button. */
 export const ButtonIcon = vui<'svg', IconProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Button', useButtonContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Button', useButtonContext())
 
-	return <Icon className={cs('vui-buttonIcon', className)} ref={ref} {...styles.icon} {...rest} />
+  return <Icon className={cs('vui-buttonIcon', className)} ref={ref} {...styles.icon} {...rest} />
 })
 
-ButtonIcon.displayName = 'ButtonIcon'
-
 export default ButtonIcon

package/src/button/buttonText.tsx

@@ -7,12 +7,10 @@ import { useButtonContext } from './context'
 
 /** Displays the text label of the button. */
 export const ButtonText = vui<'span', TProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Button', useButtonContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Button', useButtonContext())
 
-	return <T className={cs('vui-buttonText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
+  return <T className={cs('vui-buttonText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
 })
 
-ButtonText.displayName = 'ButtonText'
-
 export default ButtonText

package/src/button/buttons.tsx

@@ -5,33 +5,33 @@ import Button from './button'
 import { ButtonProps, IconButtonProps } from './button.types'
 
 export const AppButton = vui<'button', ButtonProps>((props, ref) => (
-	<Button colorScheme="blue" ref={ref} variant="solid" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="solid" {...props} />
 ))
 
 export const BackButton = vui<'button', IconButtonProps>((props, ref) => (
-	<IconButton colorScheme="blue" icon="falArrowLeft" ref={ref} variant="text" {...props} />
+  <IconButton colorScheme="blue" icon="falArrowLeft" ref={ref} variant="text" {...props} />
 ))
 
 export const CloseButton = vui<'button', IconButtonProps>((props, ref) => (
-	<IconButton colorScheme="blue" icon="falTimes" ref={ref} variant="text" {...props} />
+  <IconButton colorScheme="blue" icon="falTimes" ref={ref} variant="text" {...props} />
 ))
 
 export const CTAButton = vui<'button', ButtonProps>((props, ref) => (
-	<Button colorScheme="green" ref={ref} variant="solid" {...props} />
+  <Button colorScheme="green" ref={ref} variant="solid" {...props} />
 ))
 
 export const DangerButton = vui<'button', ButtonProps>((props, ref) => (
-	<Button colorScheme="red" ref={ref} variant="solid" {...props} />
+  <Button colorScheme="red" ref={ref} variant="solid" {...props} />
 ))
 
 export const IconButton = vui<'button', IconButtonProps>((props, ref) => (
-	<Button colorScheme="blue" ref={ref} variant="text" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="text" {...props} />
 ))
 
 export const LineButton = vui<'button', ButtonProps>((props, ref) => (
-	<Button colorScheme="blue" ref={ref} variant="outlined" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="outlined" {...props} />
 ))
 
 export const TextButton = vui<'button', ButtonProps>((props, ref) => (
-	<Button colorScheme="blue" ref={ref} variant="text" {...props} />
+  <Button colorScheme="blue" ref={ref} variant="text" {...props} />
 ))

package/src/button/consts.ts

@@ -1,26 +1,26 @@
 import { ButtonStateMapping } from './button.types'
 
 export const buttonStateMapping: ButtonStateMapping = {
-	error: {
-		colorScheme: 'red',
-		iconProps: {
-			animation: 'fadeDown',
-			icon: 'falTimesCircle'
-		}
-	},
-	loading: {
-		colorScheme: 'blue',
-		iconProps: {
-			animation: 'vui-spin 0.6s linear infinite',
-			name: 'fadSpinnerThird',
-			pathFill: ['', 'transparent']
-		}
-	},
-	success: {
-		colorScheme: 'green',
-		iconProps: {
-			animation: 'fadeDown',
-			icon: 'falCheckCircle'
-		}
-	}
+  error: {
+    colorScheme: 'red',
+    iconProps: {
+      animation: 'fadeDown',
+      icon: 'falTimesCircle'
+    }
+  },
+  loading: {
+    colorScheme: 'blue',
+    iconProps: {
+      animation: 'vui-spin 0.6s linear infinite',
+      name: 'fadSpinnerThird',
+      pathFill: ['', 'transparent']
+    }
+  },
+  success: {
+    colorScheme: 'green',
+    iconProps: {
+      animation: 'fadeDown',
+      icon: 'falCheckCircle'
+    }
+  }
 }