@semcore/button 17.0.0-prerelease.30 → 17.0.0-prerelease.31

package/src/component/Button/Button.tsx

@@ -1,13 +1,26 @@
-import { Box } from '@semcore/base-components';
-import { createComponent, sstyled, Root } from '@semcore/core';
+import { NeighborLocation, Box, Hint } from '@semcore/base-components';
+import { Component, CORE_INSTANCE, createComponent, Root, sstyled } from '@semcore/core';
+import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
+import hasLabels from '@semcore/core/lib/utils/hasLabels';
+import logger from '@semcore/core/lib/utils/logger';
 import { Text } from '@semcore/typography';
 import React from 'react';
 
 import style from './button.shadow.css';
-import type { ButtonAddonProps, ButtonComponent, ButtonTextProps } from './Button.type';
-import { AbstractButton } from '../AbstractButton/AbstractButton';
+import type { ButtonProps, ButtonAddonProps, ButtonTextProps, ButtonComponent } from './Button.type';
+import SpinButton from './SpinButton';
 
-class RootButton extends AbstractButton {
+export const MAP_USE_DEFAULT_THEME: Record<string, string> = {
+  primary: 'info',
+  secondary: 'muted',
+  tertiary: 'info',
+};
+
+type State = {
+  ariaLabelledByContent: null | string;
+};
+
+export class RootButton extends Component<ButtonProps, [], never, {}, State> {
   static displayName = 'Button';
   static style = style;
   static defaultProps = {
@@ -15,8 +28,132 @@ class RootButton extends AbstractButton {
     size: 'm',
   };
 
-  protected getTextColor(): string | undefined {
-    return undefined;
+  containerRef = React.createRef<HTMLButtonElement>();
+
+  state: State = {
+    ariaLabelledByContent: null,
+  };
+
+  getTextProps() {
+    const { size } = this.asProps;
+
+    return {
+      size,
+      'hint:triggerRef': this.containerRef,
+    };
+  }
+
+  getAddonProps() {
+    const { size } = this.asProps;
+    return {
+      size,
+    };
+  }
+
+  componentDidMount() {
+    if (process.env.NODE_ENV !== 'production') {
+      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,
+      );
+    }
+
+    const ariaLabelledby = this.asProps['aria-labelledby'];
+
+    if (ariaLabelledby) {
+      setTimeout(() => {
+        this.setState({
+          ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? '',
+        });
+      }, 0);
+    }
+  }
+
+  render() {
+    const {
+      styles,
+      use,
+      theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
+      loading,
+      disabled = loading,
+      size,
+      neighborLocation,
+      children,
+      title,
+      ['aria-label']: ariaLabel,
+      Children,
+      addonLeft: AddonLeft,
+      addonRight: AddonRight,
+      hintPlacement,
+    } = this.asProps;
+    const SButton = Root;
+    // @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 showHint = (children === undefined || title);
+
+    return (
+      <NeighborLocation.Detect neighborLocation={neighborLocation}>
+        {(neighborLocation) => {
+          return sstyled(styles)(
+            <>
+              <SButton
+                render={Box}
+                invertOutline={theme === 'invert'}
+                type='button'
+                tag='button'
+                tabIndex={0}
+                disabled={disabled}
+                use:theme={useTheme}
+                ref={this.containerRef}
+                aria-busy={loading}
+                __excludeProps={['title']}
+                aria-label={showHint ? buttonAriaLabel : undefined}
+                neighborLocation={neighborLocation}
+              >
+                {/* @ts-ignore */}
+                <SInner tag='span' loading={loading} data-ui-name={`${this.asProps['data-ui-name']}.InnerWrapper`}>
+                  {AddonLeft
+                    ? (
+                        <Button.Addon>
+                          <AddonLeft />
+                        </Button.Addon>
+                      )
+                    : null}
+                  {addonTextChildren(Children, Button.Text, Button.Addon)}
+                  {AddonRight
+                    ? (
+                        <Button.Addon>
+                          <AddonRight />
+                        </Button.Addon>
+                      )
+                    : null}
+                </SInner>
+                {loading && (
+                  <SSpin tag='span'>
+                    <SpinButton centered size={size} theme={useTheme} />
+                  </SSpin>
+                )}
+              </SButton>
+              {showHint && (
+                <Hint
+                  triggerRef={this.containerRef}
+                  timeout={[250, 50]}
+                  placement={hintPlacement}
+                >
+                  {buttonAriaLabel}
+                </Hint>
+              )}
+            </>,
+          );
+        }}
+      </NeighborLocation.Detect>
+    );
   }
 }
 

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

@@ -1,33 +1,48 @@
-import type { UnknownProperties, Intergalactic } from '@semcore/core';
-
-import type {
-  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' | 'brand' | 'danger' | 'muted' | 'invert';
-
-export type ButtonProps = AbstractButtonProps<ButtonSize, Use, Theme>;
-
-export type ButtonTextProps = AbstractButtonTextProps<ButtonSize>;
-
-export type ButtonAddonProps = AbstractButtonAddonProps<ButtonSize>;
-
-export type ButtonContext = AbstractButtonContext;
+import type { BoxProps, NeighborItemProps, SimpleHintPopperProps } from '@semcore/base-components';
+import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { TextProps } from '@semcore/typography';
+import type React from 'react';
+
+export type ButtonProps = BoxProps &
+  NeighborItemProps & {
+  /** 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?: SimpleHintPopperProps['placement'];
+
+    /** Button size.
+   * @default `m`
+   */
+    size?: 'l' | 'm';
+    /** Button usage.
+   * @default `primary`
+   */
+    use?: 'primary' | 'secondary' | 'tertiary';
+    /** Button theme.
+   * @default undefined
+   */
+    theme?: 'info' | 'success' | 'brand' | 'danger' | 'muted' | 'invert';
+  };
+
+export type ButtonTextProps = TextProps;
+
+export type ButtonAddonProps = BoxProps;
+
+export type ButtonContext = {
+  getTextProps: PropGetterFn;
+  getAddonProps: PropGetterFn;
+};
 
 export type ButtonChildren = {
   Text: Intergalactic.Component<'span', ButtonTextProps>;

package/src/component/ButtonLink/ButtonLink.tsx

@@ -1,42 +1,37 @@
-import { Box } from '@semcore/base-components';
-import { createComponent, sstyled, Root } from '@semcore/core';
-import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
-import { Text } from '@semcore/typography';
+import { createComponent, sstyled, Root, Component } from '@semcore/core';
+import Link from '@semcore/link';
 import React from 'react';
 
 import style from './buttonLink.shadow.css';
-import type { ButtonLinkAddonProps, ButtonLinkComponent, ButtonLinkTextProps } from './ButtonLink.type';
-import { AbstractButton } from '../AbstractButton/AbstractButton';
+import type { ButtonLinkComponent, ButtonLinkProps } from './ButtonLink.type';
 
-const enhance = {
-  resolveColor: resolveColorEnhance(),
-};
-
-class RootButtonLink extends AbstractButton {
+class RootButtonLink extends Component<ButtonLinkProps> {
   static displayName = 'ButtonLink';
-  static enhance = Object.values(enhance);
   static style = style;
   static defaultProps = {
     use: 'primary',
+    size: 200,
   };
 
-  protected getTextColor(): string | undefined {
-    const { color, resolveColor } = this.asProps as any;
-    return resolveColor(color);
-  }
-}
-
-function LinkText(props: ButtonLinkTextProps) {
-  const SText = Root;
-  return sstyled(props.styles)(<SText render={Text} />);
-}
+  render(): React.ReactNode {
+    const SButtonLink = Root;
+    const { disabled } = this.asProps;
 
-function Addon(props: ButtonLinkAddonProps) {
-  const SAddon = Root;
-  return sstyled(props.styles)(<SAddon render={Box} tag='span' />);
+    return sstyled(style)(
+      <SButtonLink
+        render={Link}
+        tag='button'
+        type='button'
+        use:disabled={disabled}
+        use:tabIndex={0}
+      />,
+    );
+  }
 }
 
 export const ButtonLink = createComponent(RootButtonLink, {
-  Text: LinkText,
-  Addon,
+  Text: Link.Text,
+  Addon: Link.Addon,
+}, {
+  parent: Link,
 }) as ButtonLinkComponent;

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

@@ -1,29 +1,21 @@
+import type { BoxProps } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
+import type { LinkProps } from '@semcore/link';
+import type { TextProps } from '@semcore/typography';
 
-import type {
-  AbstractButtonAddonProps,
-  AbstractButtonContext,
-  AbstractButtonTextProps,
-  AbstractButtonProps,
-} from '../AbstractButton/AbstractButton.type';
+import type { ButtonContext } from '../Button/Button.type';
 
-/**
- *  Button link size
- */
-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 ButtonLinkProps = Intergalactic.InternalTypings.EfficientOmit<LinkProps, 'enableVisited'> & {
+  /**
+   *  Button link type
+   * @default primary
+   */
+  use?: 'primary' | 'secondary';
+};
 
-export type ButtonLinkAddonProps = AbstractButtonAddonProps<ButtonLinkSize>;
+export type ButtonLinkTextProps = TextProps;
 
-export type ButtonLinkContext = AbstractButtonContext;
+export type ButtonLinkAddonProps = BoxProps;
 
 export type ButtonLinkChildren = {
   Text: Intergalactic.Component<'span', ButtonLinkTextProps>;
@@ -33,5 +25,5 @@ export type ButtonLinkChildren = {
 export type ButtonLinkComponent = Intergalactic.Component<
   'button',
   ButtonLinkProps,
-  ButtonLinkContext
+  ButtonContext
 > & ButtonLinkChildren;

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

@@ -1,59 +1,19 @@
-SButton {
-  display: inline-flex;
+SButtonLink {
+  border: none;
   font-family: inherit;
-  font-size: var(--intergalactic-fs-200, 14px);
+}
+
+SButtonLink[use='primary']:not([color]) {
   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;
-  background: none;
-  transition: color 0.15s ease-in-out;
 
+  &[active],
   &:active,
   &:hover {
-    text-decoration: none;
-  }
-
-  &::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-
-  &[active],
-  &:hover,
-  &:active {
     color: var(--intergalactic-text-link-hover-active, #044792);
-
-    & SText {
-      box-shadow: 0 1px 0 0 currentColor;
-    }
-  }
-
-  &[enableVisited]:visited,
-  &[enableVisited]:visited:hover {
-    color: var(--intergalactic-text-link-visited, #8649e1);
   }
-
-  SText {
-    box-shadow: 0 1px 0 0 transparent;
-    transition: box-shadow 0.15s ease-in-out;
-  }
-}
-
-SButton[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  cursor: default;
-  /* Disable link interactions */
-  pointer-events: none;
 }
 
-SButton[use='secondary'] {
+SButtonLink[use='secondary']:not([color]) {
   color: var(--intergalactic-text-hint, #6c6e79);
 
   &[active],
@@ -61,99 +21,9 @@ SButton[use='secondary'] {
   &:hover {
     color: var(--intergalactic-text-hint-hover-active, #484a54);
   }
-
-  SText {
-    box-shadow: none;
-    border-bottom-width: 1px;
-    border-bottom-style: dashed;
-    border-color: currentColor;
-  }
 }
 
-SInner {
-  display: inline-flex;
-  align-items: baseline;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-
-SAddon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: baseline;
-  vertical-align: middle;
-  pointer-events: none;
-  align-self: center;
-}
-
-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;
-    }
-  }
+SButtonLink[use='secondary'] SText {
+  text-decoration-style: dashed;
+  text-decoration-color: currentColor;
 }

package/src/index.ts

@@ -1,5 +1,4 @@
-export { default } from './component/Button/Button';
+export { default, MAP_USE_DEFAULT_THEME } 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';

package/lib/cjs/component/AbstractButton/AbstractButton.js

@@ -1,136 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MAP_USE_DEFAULT_THEME = exports.AbstractButton = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _core = require("@semcore/core");
-var _baseComponents = require("@semcore/base-components");
-var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
-var _hasLabels = _interopRequireDefault(require("@semcore/core/lib/utils/hasLabels"));
-var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
-var _react = _interopRequireDefault(require("react"));
-var _SpinButton = _interopRequireDefault(require("./SpinButton"));
-const MAP_USE_DEFAULT_THEME = exports.MAP_USE_DEFAULT_THEME = {
-  primary: 'info',
-  secondary: 'muted',
-  tertiary: 'info'
-};
-class AbstractButton extends _core.Component {
-  constructor(...args) {
-    super(...args);
-    (0, _defineProperty2.default)(this, "containerRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)(this, "state", {
-      ariaLabelledByContent: null
-    });
-  }
-  getTextProps(props) {
-    const {
-      size
-    } = this.asProps;
-
-    // `any` because we don't have typings for `use:PROPS`.
-    const textProps = {
-      size,
-      'use:hintProps': {
-        triggerRef: this.containerRef
-      }
-    };
-    if ('hintProps' in props) {
-      textProps['use:hintProps'] = {
-        triggerRef: this.containerRef,
-        ...props.hintProps
-      };
-    }
-    return textProps;
-  }
-  getAddonProps() {
-    const {
-      size
-    } = this.asProps;
-    return {
-      size
-    };
-  }
-  componentDidMount() {
-    if (process.env.NODE_ENV !== 'production') {
-      _logger.default.warn(this.containerRef.current && !(0, _hasLabels.default)(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'] || AbstractButton.displayName);
-      _logger.default.warn(this.asProps.theme === 'warning', 'Warning theme is deprecated and will be removed in the next major release.', this.asProps['data-ui-name'] || AbstractButton.displayName);
-    }
-    const ariaLabelledby = this.asProps['aria-labelledby'];
-    if (ariaLabelledby) {
-      setTimeout(() => {
-        this.setState({
-          ariaLabelledByContent: document.getElementById(ariaLabelledby)?.textContent ?? ''
-        });
-      }, 0);
-    }
-  }
-  render() {
-    var _ref = this.asProps;
-    const {
-      styles,
-      use,
-      theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],
-      loading,
-      disabled = loading,
-      size,
-      neighborLocation,
-      children,
-      title,
-      ['aria-label']: ariaLabel,
-      Children,
-      addonLeft: AddonLeft,
-      addonRight: AddonRight,
-      hintPlacement
-    } = this.asProps;
-    const SButton = _baseComponents.Box;
-    // @ts-ignore
-    const Button = this[_core.CORE_INSTANCE];
-    const useTheme = use && theme ? `${use}-${theme}` : false;
-    const SInner = _baseComponents.Box;
-    const SSpin = _baseComponents.Box;
-    const buttonAriaLabel = title ?? ariaLabel ?? this.state.ariaLabelledByContent ?? '';
-    const showHint = children === undefined || title;
-    return /*#__PURE__*/_react.default.createElement(_baseComponents.NeighborLocation.Detect, {
-      neighborLocation: neighborLocation
-    }, neighborLocation => {
-      var _ref2;
-      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SButton, _ref2.cn("SButton", {
-        ...(0, _core.assignProps)({
-          "invertOutline": theme === 'invert',
-          "type": 'button',
-          "tag": 'button',
-          "tabIndex": 0,
-          "disabled": disabled,
-          "use:theme": useTheme,
-          "ref": this.containerRef,
-          "text-color": this.getTextColor(),
-          "aria-busy": loading,
-          "__excludeProps": ['title'],
-          "aria-label": showHint ? buttonAriaLabel : undefined,
-          "neighborLocation": neighborLocation
-        }, _ref)
-      }), /*#__PURE__*/_react.default.createElement(SInner, _ref2.cn("SInner", {
-        "tag": 'span',
-        "loading": loading,
-        "data-ui-name": `${this.asProps['data-ui-name']}.InnerWrapper`
-      }), AddonLeft ? /*#__PURE__*/_react.default.createElement(Button.Addon, null, /*#__PURE__*/_react.default.createElement(AddonLeft, _ref2.cn("AddonLeft", {}))) : null, (0, _addonTextChildren.default)(Children, Button.Text, Button.Addon), AddonRight ? /*#__PURE__*/_react.default.createElement(Button.Addon, null, /*#__PURE__*/_react.default.createElement(AddonRight, _ref2.cn("AddonRight", {}))) : null), loading && /*#__PURE__*/_react.default.createElement(SSpin, _ref2.cn("SSpin", {
-        "tag": 'span'
-      }), /*#__PURE__*/_react.default.createElement(_SpinButton.default, _ref2.cn("SpinButton", {
-        "centered": true,
-        "size": size,
-        "theme": useTheme
-      })))), showHint && /*#__PURE__*/_react.default.createElement(_baseComponents.Hint, _ref2.cn("Hint", {
-        "triggerRef": this.containerRef,
-        "timeout": [250, 50],
-        "placement": hintPlacement
-      }), buttonAriaLabel));
-    });
-  }
-}
-exports.AbstractButton = AbstractButton;
-(0, _defineProperty2.default)(AbstractButton, "displayName", 'AbstractButton');
-//# sourceMappingURL=AbstractButton.js.map