@semcore/button 5.36.0 → 5.37.0

package/src/{Button.jsx → component/AbstractButton/AbstractButton.tsx}

@@ -1,38 +1,36 @@
 import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import { Box } from '@semcore/flex-box';
 import { Hint } from '@semcore/tooltip';
 import NeighborLocation from '@semcore/neighbor-location';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
 import logger from '@semcore/utils/lib/logger';
 import SpinButton from './SpinButton';
-
-import style from './style/button.shadow.css';
 import hasLabels from '@semcore/utils/lib/hasLabels';
+import { AbstractButtonProps } from './AbstractButton.type';
+import { Component, CORE_INSTANCE, Root, sstyled } from '@semcore/core';
 
-export const MAP_USE_DEFAULT_THEME = {
+export const MAP_USE_DEFAULT_THEME: Record<string, string> = {
   primary: 'info',
   secondary: 'muted',
   tertiary: 'info',
 };
 
-class RootButton extends Component {
-  static displayName = 'Button';
-  static enhance = [keyboardFocusEnhance()];
-  static style = style;
-  static defaultProps = {
-    use: 'secondary',
-    size: 'm',
-  };
-  containerRef = React.createRef();
+type Props = AbstractButtonProps<any, any, any>;
+
+export abstract class AbstractButton extends Component<Props, {}, {}> {
+  static displayName = 'AbstractButton';
+
+  containerRef = React.createRef<HTMLButtonElement>();
 
   state = {
     ariaLabelledByContent: null,
   };
 
+  protected abstract getTextColor(): string | undefined;
+
   getTextProps() {
     const { size } = this.asProps;
+
     return {
       size,
     };
@@ -50,21 +48,22 @@ class RootButton extends Component {
       logger.warn(
         this.containerRef.current && !hasLabels(this.containerRef.current) && !this.asProps.title,
         `'title' or 'aria-label' or 'aria-labelledby' are required props for buttons without text content`,
-        this.asProps['data-ui-name'] || RootButton.displayName,
+        this.asProps['data-ui-name'] || AbstractButton.displayName,
       );
     }
 
-    if (this.asProps['aria-labelledby']) {
+    const ariaLabelledby = this.asProps['aria-labelledby'];
+
+    if (ariaLabelledby) {
       setTimeout(() => {
         this.setState({
-          ariaLabelledByContent:
-            document.getElementById(this.asProps['aria-labelledby'])?.textContent ?? '',
+          ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? '',
         });
       }, 0);
     }
   }
 
-  renderButton({ buttonProps, children }) {
+  renderButton({ buttonProps, children }: any) {
     const { styles } = this.asProps;
     const SButton = Root;
 
@@ -75,7 +74,7 @@ class RootButton extends Component {
     );
   }
 
-  renderButtonWithHint({ buttonProps, children, hintProps }) {
+  renderButtonWithHint({ buttonProps, children, hintProps }: any) {
     const { styles } = this.asProps;
     const SButton = Root;
 
@@ -103,17 +102,20 @@ class RootButton extends Component {
       addonRight: AddonRight,
       hintPlacement,
     } = this.asProps;
+    // @ts-ignore
+    const Button = this[CORE_INSTANCE];
     const useTheme = use && theme ? `${use}-${theme}` : false;
     const SInner = Box;
     const SSpin = Box;
     const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
 
-    const buttonProps = {
+    const buttonProps: Record<string, any> = {
       type: 'button',
       tag: 'button',
       disabled,
       'use:theme': useTheme,
       ref: this.containerRef,
+      'text-color': this.getTextColor(),
       'aria-busy': loading,
       'aria-disabled': disabled,
       __excludeProps: ['title'],
@@ -132,6 +134,7 @@ class RootButton extends Component {
         {(neighborLocation) => {
           const children = sstyled(styles)(
             <>
+              {/* @ts-ignore */}
               <SInner tag='span' loading={loading}>
                 {AddonLeft ? (
                   <Button.Addon>
@@ -164,20 +167,3 @@ class RootButton extends Component {
     );
   }
 }
-
-function Text(props) {
-  const SText = Root;
-  return sstyled(props.styles)(<SText render={Box} tag='span' />);
-}
-
-function Addon(props) {
-  const SAddon = Root;
-  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);
-}
-
-const Button = createComponent(RootButton, {
-  Text,
-  Addon,
-});
-
-export default Button;

package/src/component/AbstractButton/AbstractButton.type.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { PropGetterFn } from '@semcore/core';
+import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { BoxProps } from '@semcore/flex-box';
+import { NeighborItemProps } from '@semcore/neighbor-location';
+import { TooltipHintProps } from '@semcore/tooltip';
+
+export type AbstractButtonProps<S, U, T> = BoxProps &
+  NeighborItemProps &
+  KeyboardFocusProps & {
+    /** Button activity state */
+    active?: boolean;
+    /** Disabled button state */
+    disabled?: boolean;
+    /** Loading button state */
+    loading?: boolean;
+    /** Tag for the left Addon */
+    addonLeft?: React.ElementType;
+    /** Tag for the right Addon */
+    addonRight?: React.ElementType;
+    /**
+     * Placement for hint
+     * @default top
+     */
+    hintPlacement?: TooltipHintProps['placement'];
+
+    /** Button type. Defined in Button.type or ButtonLink.type */
+    size?: S;
+    /** Button usage. Defined in Button.type or ButtonLink.type */
+    use?: U;
+    /** Button theme. Defined in Button.type or ButtonLink.type */
+    theme?: T;
+  };
+
+export type AbstractButtonAddonProps<S> = BoxProps & {
+  size?: S;
+};
+
+export type AbstractButtonTextProps<S> = BoxProps & {
+  size?: S;
+};
+
+export type AbstractButtonContext = {
+  getTextProps: PropGetterFn;
+  getAddonProps: PropGetterFn;
+};

package/src/{SpinButton.jsx → component/AbstractButton/SpinButton.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import Spin from '@semcore/spin';
 
-export const SPIN_SIZE_MAP = {
+export const SPIN_SIZE_MAP: Record<string, string> = {
   xl: 'm',
   l: 's',
   m: 'xs',
   s: 'xxs',
 };
 
-export default function SpinButton({ theme, size, ...others }) {
+export default function SpinButton({ theme, size, ...others }: any) {
   return (
     <Spin
       size={typeof size === 'string' ? SPIN_SIZE_MAP[size] : size}

package/src/component/Button/Button.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import createComponent, { sstyled, Root } from '@semcore/core';
+import { Box } from '@semcore/flex-box';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+
+import style from './button.shadow.css';
+import { AbstractButton } from '../AbstractButton/AbstractButton';
+import {
+  ButtonAddonProps,
+  ButtonChildren,
+  ButtonComponent,
+  ButtonProps,
+  ButtonTextProps,
+} from './Button.type';
+
+class RootButton extends AbstractButton {
+  static displayName = 'Button';
+  static enhance = [keyboardFocusEnhance()];
+  static style = style;
+  static defaultProps = {
+    use: 'secondary',
+    size: 'm',
+  };
+
+  protected getTextColor(): string | undefined {
+    return undefined;
+  }
+}
+
+function Text(props: ButtonTextProps) {
+  const SText = Root;
+  return sstyled(props.styles)(<SText render={Box} tag='span' />);
+}
+
+function Addon(props: ButtonAddonProps) {
+  const SAddon = Root;
+  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);
+}
+
+const Button = createComponent(RootButton, {
+  Text,
+  Addon,
+}) as ButtonComponent;
+
+export default Button;

package/src/component/Button/Button.type.ts

@@ -0,0 +1,48 @@
+import { UnknownProperties, Intergalactic } from '@semcore/core';
+
+import {
+  AbstractButtonAddonProps,
+  AbstractButtonContext,
+  AbstractButtonTextProps,
+  AbstractButtonProps,
+} from '../AbstractButton/AbstractButton.type';
+
+/**
+ *  Button size
+ * @default m
+ */
+export type ButtonSize = 'l' | 'm';
+/**
+ *  Button type
+ * @default secondary
+ */
+type Use = 'primary' | 'secondary' | 'tertiary';
+
+/** Button theme */
+type Theme = 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';
+
+/** @deprecated */
+export interface IButtonProps extends ButtonProps, UnknownProperties {}
+export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
+
+/** @deprecated */
+export interface IButtonTextProps extends ButtonTextProps, UnknownProperties {}
+export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
+
+/** @deprecated */
+export interface IButtonAddonProps extends ButtonAddonProps, UnknownProperties {}
+export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
+
+/** @deprecated */
+export interface IButtonContext extends ButtonContext, UnknownProperties {}
+export type ButtonContext = AbstractButtonContext;
+
+export type ButtonChildren = {
+  Text: Intergalactic.Component<'span', ButtonTextProps>;
+  Addon: Intergalactic.Component<'span', ButtonAddonProps>;
+};
+
+export type ButtonComponent = Intergalactic.Component<'button', ButtonProps, ButtonContext> & {
+  Text: Intergalactic.Component<'span', ButtonTextProps>;
+  Addon: Intergalactic.Component<'span', ButtonAddonProps>;
+};

package/src/{style → component/Button}/button.shadow.css

@@ -368,4 +368,4 @@ SAddon[size='l'] {
     margin-right: calc(3 * var(--intergalactic-spacing-1x, 4px) - 1px);
     /* -1px - for border width */
   }
-}
+}

package/src/component/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import createComponent, { sstyled, Root } from '@semcore/core';
+import style from './buttonLink.shadow.css';
+import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
+import { Box } from '@semcore/flex-box';
+import { AbstractButton } from '../AbstractButton/AbstractButton';
+import resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';
+import { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';
+
+const enhance = {
+  keyboardFocused: keyboardFocusEnhance(),
+  resolveColor: resolveColorEnhance(),
+};
+
+class RootButtonLink extends AbstractButton {
+  static displayName = 'ButtonLink';
+  static enhance = Object.values(enhance);
+  static style = style;
+  static defaultProps = {
+    use: 'primary',
+  };
+
+  protected getTextColor(): string | undefined {
+    const { color, resolveColor } = this.asProps as any;
+    return resolveColor(color);
+  }
+}
+
+function Text(props: ButtonLinkTextProps) {
+  const SText = Root;
+  return sstyled(props.styles)(<SText render={Box} tag='span' />);
+}
+
+function Addon(props: ButtonLinkAddonProps) {
+  const SAddon = Root;
+  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);
+}
+
+export const ButtonLink = createComponent(RootButtonLink, {
+  Text,
+  Addon,
+}) as ButtonLinkComponent;

package/src/component/ButtonLink/ButtonLink.type.ts

@@ -0,0 +1,41 @@
+import { UnknownProperties, Intergalactic } from '@semcore/core';
+
+import {
+  AbstractButtonAddonProps,
+  AbstractButtonContext,
+  AbstractButtonTextProps,
+  AbstractButtonProps,
+} from '../AbstractButton/AbstractButton.type';
+
+/**
+ *  Button link size
+ * @default m
+ */
+export type ButtonLinkSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
+/**
+ *  Button link type
+ * @default primary
+ */
+type Use = 'primary' | 'secondary';
+
+export type ButtonLinkProps = AbstractButtonProps<ButtonLinkSize, Use, never>;
+
+export type ButtonLinkTextProps = AbstractButtonTextProps<ButtonLinkSize>;
+
+export type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;
+
+export type ButtonLinkContext = AbstractButtonContext;
+
+export type ButtonLinkChildren = {
+  Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
+  Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
+};
+
+export type ButtonLinkComponent = Intergalactic.Component<
+  'button',
+  ButtonLinkProps,
+  ButtonLinkContext
+> & {
+  Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
+  Addon: Intergalactic.Component<'span', ButtonLinkAddonProps>;
+};

package/src/component/ButtonLink/buttonLink.shadow.css

@@ -0,0 +1,160 @@
+SButton {
+  display: inline-block;
+  font-family: inherit;
+  font-size: var(--intergalactic-fs-200, 14px);
+  color: var(--intergalactic-text-link, #006dca);
+  line-height: normal;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: 0;
+  background: none;
+  transition: color 0.15s ease-in-out;
+
+  &:active,
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: none;
+    padding: 0;
+  }
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--intergalactic-text-link-hover-active, #044792);
+
+    & SText {
+      border-color: currentColor;
+    }
+  }
+
+  &[enableVisited]:visited,
+  &[enableVisited]:visited:hover {
+    color: var(--intergalactic-text-link-visited, #8649e1);
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-color: transparent;
+    transition: border-bottom-color 0.15s ease-in-out;
+  }
+}
+
+SButton[keyboardFocused] {
+  outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
+  outline-style: solid;
+  outline-width: 3px;
+}
+
+SButton[visually-disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.3);
+  cursor: default;
+  /* Disable link interactions */
+  pointer-events: none;
+}
+
+SButton[use='secondary'] {
+  color: var(--intergalactic-text-hint, #6c6e79);
+
+  &[active],
+  &:active,
+  &:hover {
+    color: var(--intergalactic-text-hint-hover-active, #484a54);
+  }
+
+  SText {
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
+    border-color: currentColor;
+  }
+}
+
+SAddon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: var(--intergalactic-spacing-05x, 2px);
+  vertical-align: middle;
+}
+
+SButton SAddon {
+  &:not(:only-child):first-child {
+    margin-right: var(--intergalactic-spacing-1x, 4px);
+  }
+
+  &:not(:only-child):last-child {
+    margin-left: var(--intergalactic-spacing-1x, 4px);
+  }
+}
+
+SButton[text-color] {
+  color: var(--text-color);
+
+  &[active],
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    filter: brightness(0.8);
+  }
+}
+
+SButton[size='100'] {
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+}
+
+SButton[size='200'] {
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+}
+
+SButton[size='300'] {
+  font-size: var(--intergalactic-fs-300, 16px);
+  line-height: var(--intergalactic-lh-300, 150%);
+}
+
+SButton[size='400'] {
+  font-size: var(--intergalactic-fs-400, 20px);
+  line-height: var(--intergalactic-lh-400, 120%);
+}
+
+SButton[size='500'] {
+  font-size: var(--intergalactic-fs-500, 24px);
+  line-height: var(--intergalactic-lh-500, 117%);
+}
+
+SButton[size='600'] {
+  font-size: var(--intergalactic-fs-600, 32px);
+  line-height: var(--intergalactic-lh-600, 125%);
+}
+
+SButton[size='700'] {
+  font-size: var(--intergalactic-fs-700, 36px);
+  line-height: var(--intergalactic-lh-700, 110%);
+}
+
+SButton[size='800'] {
+  font-size: var(--intergalactic-fs-800, 48px);
+  line-height: var(--intergalactic-lh-800, 117%);
+}
+
+@media (prefers-reduced-motion) {
+  SButton {
+    transition: none;
+  }
+
+  SText {
+    transition: none;
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default } from './component/Button/Button';
+export * from './component/Button/Button.type';
+export * from './component/ButtonLink/ButtonLink';
+export * from './component/ButtonLink/ButtonLink.type';
+export { MAP_USE_DEFAULT_THEME } from './component/AbstractButton/AbstractButton';