@os-design/core 1.0.198 → 1.0.200

package/src/BreadcrumbItem/index.tsx

@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+import { Right } from '@os-design/icons';
+import { ellipsisStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import React, { forwardRef } from 'react';
+import Link, { LinkProps } from '../Link';
+
+export interface BreadcrumbItemProps extends LinkProps {
+  /**
+   * Whether the item is the current page.
+   * @default false
+   */
+  currentPage?: boolean;
+  /**
+   * Whether the right arrow located to the right of the text is visible.
+   * @default false
+   */
+  hasRightArrow?: boolean;
+  /**
+   * The position of the breadcrumb item.
+   * @default undefined
+   */
+  position?: number;
+}
+
+const Container = styled.li`
+  list-style: none;
+`;
+
+const Name = styled.span`
+  max-width: 20em;
+  ${ellipsisStyles};
+`;
+
+const RightIcon = styled(Right)`
+  color: ${(p) => clr(p.theme.colorText)};
+  margin: 0 0.6em;
+  font-size: 0.6em;
+  opacity: 0.8;
+`;
+
+/**
+ * The item of the breadcrumb.
+ */
+const BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(
+  (
+    {
+      currentPage = false,
+      hasRightArrow = false,
+      position,
+      href,
+      children,
+      ...rest
+    },
+    ref
+  ) => (
+    <Container>
+      <Link
+        itemProp='itemListElement'
+        itemScope
+        itemType='https://schema.org/ListItem'
+        href={href}
+        {...(currentPage
+          ? {
+              underline: 'always',
+              'aria-current': 'page',
+            }
+          : {})}
+        {...rest}
+        ref={ref}
+      >
+        <link itemProp='item' href={href} />
+        {position && <meta itemProp='position' content={position.toString()} />}
+        <Name itemProp='name'>{children}</Name>
+      </Link>
+      {hasRightArrow && <RightIcon role='presentation' />}
+    </Container>
+  )
+);
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export default BreadcrumbItem;

package/src/Button/ButtonContent.tsx

@@ -0,0 +1,91 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { Loading } from '@os-design/icons';
+import { clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React from 'react';
+
+import { LoadingColors } from './utils/useButtonColors';
+
+interface ButtonContentProps {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  loading?: boolean;
+  loadingColors: LoadingColors;
+  children?: React.ReactNode;
+}
+
+const LeftAddon = styled.div`
+  display: inherit;
+  padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;
+`;
+
+const RightAddon = styled.div`
+  display: inherit;
+  padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;
+`;
+
+const Content = styled.span`
+  display: inherit;
+
+  & > svg {
+    transform: scale(${(p) => p.theme.buttonIconScaleFactor});
+    vertical-align: middle;
+  }
+`;
+
+const LoadingIcon = styled(Loading)`
+  font-size: 1.2em;
+`;
+
+const loadingFadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+interface LoadingContainerProps {
+  colors: LoadingColors;
+}
+const LoadingContainer = styled(
+  'div',
+  omitEmotionProps('colors')
+)<LoadingContainerProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: ${(p) => clr(p.colors.text)};
+  background-color: ${(p) => clr(p.colors.bg)};
+  animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;
+`;
+
+// Used by Button, LinkButton
+const ButtonContent: React.FC<ButtonContentProps> = ({
+  left,
+  right,
+  loading = false,
+  loadingColors,
+  children,
+}) => (
+  <>
+    {left && <LeftAddon>{left}</LeftAddon>}
+    <Content>{children}</Content>
+    {right && <RightAddon>{right}</RightAddon>}
+    {loading && (
+      <LoadingContainer colors={loadingColors}>
+        <LoadingIcon />
+      </LoadingContainer>
+    )}
+  </>
+);
+
+export default ButtonContent;

package/src/Button/index.tsx

@@ -0,0 +1,225 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+import {
+  resetButtonStyles,
+  sizeStyles,
+  transitionStyles,
+  WithSize,
+} from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import ButtonContent from './ButtonContent';
+import useButtonColors, { ButtonColors } from './utils/useButtonColors';
+
+type JsxButtonProps = Omit<
+  JSX.IntrinsicElements['button'],
+  'type' | 'color' | 'ref'
+>;
+
+// Used by Button, LinkButton
+export interface BaseButtonProps extends WithSize {
+  /**
+   * Type of button styles.
+   * @default primary
+   */
+  type?: 'primary' | 'outline' | 'ghost';
+  /**
+   * Sets the danger styles.
+   * @default false
+   */
+  danger?: boolean;
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+  /**
+   * Whether the button has full width.
+   * Possible values:
+   * `default` – the button has full width if the screen width is less than xs;
+   * `always` – the button always has full width;
+   * `never` – the button never has full width.
+   * @default default
+   */
+  wide?: 'default' | 'always' | 'never';
+  /**
+   * Shows the loading status and disables the button.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+export type ButtonProps = JsxButtonProps & BaseButtonProps;
+
+interface StyledButtonProps
+  extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {
+  btnType: ButtonProps['type'];
+  colors: ButtonColors;
+}
+
+const hoverStyles = (p) =>
+  !p.disabled &&
+  css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        background-color: ${clr(p.colors.bgHover)};
+      }
+    }
+  `;
+
+const primaryStyles = (p) =>
+  p.btnType === 'primary' &&
+  css`
+    color: ${clr(p.colors.text)};
+    background-color: ${clr(p.colors.bg)};
+    ${hoverStyles(p)};
+  `;
+
+const ghostStyles = (p) =>
+  p.btnType === 'ghost' &&
+  css`
+    color: ${clr(p.colors.text)};
+    background-color: transparent;
+    ${hoverStyles(p)};
+  `;
+
+const outlineStyles = (p) =>
+  p.btnType === 'outline' &&
+  css`
+    color: ${clr(p.colors.text)};
+    background-color: transparent;
+    border: 1px solid currentColor;
+    ${hoverStyles(p)};
+  `;
+
+const wideDefaultStyles = (p) =>
+  p.wide === 'default' &&
+  css`
+    ${m.max.xxs} {
+      width: 100%;
+    }
+  `;
+
+const wideAlwaysStyles = (p) =>
+  p.wide === 'always' &&
+  css`
+    width: 100%;
+  `;
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    cursor: not-allowed;
+  `;
+
+export const StyledButton = styled(
+  'button',
+  omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')
+)<StyledButtonProps>`
+  ${resetButtonStyles};
+  position: relative; // Because LoadingContainer has an absolute position
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box; // Important for LinkButton
+
+  // Disable multiline
+  white-space: nowrap;
+  overflow: hidden;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  height: ${(p) => p.theme.buttonHeight}em;
+  padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;
+
+  // Do not set inline-flex, otherwise the mobile safari cuts off
+  // the bottom border of the button (tested in iPhone 6)
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-weight: 500;
+  line-height: 1;
+
+  ${primaryStyles};
+  ${outlineStyles};
+  ${ghostStyles};
+
+  ${wideDefaultStyles};
+  ${wideAlwaysStyles};
+
+  ${disabledStyles};
+
+  ${sizeStyles};
+  ${transitionStyles('background-color', 'color')};
+`;
+
+/**
+ * Used to trigger the corresponding business logic.
+ */
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      type = 'primary',
+      danger = false,
+      left,
+      right,
+      wide = 'default',
+      loading = false,
+      disabled = false,
+      size,
+      children,
+      onMouseDown = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { buttonColors, loadingColors } = useButtonColors({
+      type,
+      danger,
+      disabled,
+    });
+
+    return (
+      <StyledButton
+        btnType={type}
+        colors={buttonColors}
+        wide={wide}
+        loading={loading}
+        disabled={disabled || loading}
+        size={size}
+        onMouseDown={(e) => {
+          onMouseDown(e);
+          e.preventDefault();
+        }}
+        aria-busy={loading}
+        {...rest}
+        ref={ref}
+      >
+        <ButtonContent
+          left={left}
+          right={right}
+          loading={loading}
+          loadingColors={loadingColors}
+        >
+          {children}
+        </ButtonContent>
+      </StyledButton>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/Button/utils/useButtonColors.ts

@@ -0,0 +1,84 @@
+import { Color, useTheme } from '@os-design/theming';
+import { useMemo } from 'react';
+
+interface Props {
+  type: 'primary' | 'outline' | 'ghost';
+  danger: boolean;
+  disabled: boolean;
+}
+
+export interface ButtonColors {
+  text: Color;
+  bg?: Color;
+  bgHover?: Color;
+}
+
+export interface LoadingColors {
+  text: Color;
+  bg: Color;
+}
+
+interface UseButtonColorsRes {
+  buttonColors: ButtonColors;
+  loadingColors: LoadingColors;
+}
+
+// Used by Button, LinkButton
+const useButtonColors = ({
+  type,
+  danger,
+  disabled,
+}: Props): UseButtonColorsRes => {
+  const { theme } = useTheme();
+
+  const prefix = useMemo<string>(() => {
+    if (danger) return 'Danger';
+    return '';
+  }, [danger]);
+
+  const buttonColors = useMemo<ButtonColors>(() => {
+    if (type === 'primary') {
+      return !disabled
+        ? {
+            text: theme[`button${prefix}PrimaryColorText`],
+            bg: theme[`button${prefix}PrimaryColorBg`],
+            bgHover: theme[`button${prefix}PrimaryColorBgHover`],
+          }
+        : {
+            text: theme.buttonDisabledPrimaryColorText,
+            bg: theme.buttonDisabledPrimaryColorBg,
+          };
+    }
+    return !disabled
+      ? {
+          text: theme[`button${prefix}GhostColorText`],
+          bgHover: theme[`button${prefix}GhostColorBgHover`],
+        }
+      : {
+          text: theme.buttonDisabledGhostColorText,
+        };
+  }, [type, disabled, theme, prefix]);
+
+  const loadingColors = useMemo<LoadingColors>(() => {
+    if (disabled) {
+      return {
+        text: theme.buttonDisabledPrimaryColorText,
+        bg: theme.buttonDisabledPrimaryColorBg,
+      };
+    }
+    if (type === 'primary') {
+      return {
+        text: theme[`button${prefix}PrimaryColorLoadingText`],
+        bg: theme[`button${prefix}PrimaryColorLoadingBg`],
+      };
+    }
+    return {
+      text: theme[`button${prefix}GhostColorLoadingText`],
+      bg: theme[`button${prefix}GhostColorLoadingBg`],
+    };
+  }, [disabled, type, theme, prefix]);
+
+  return { buttonColors, loadingColors };
+};
+
+export default useButtonColors;

package/src/Checkbox/index.tsx

@@ -0,0 +1,225 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Check } from '@os-design/icons';
+import {
+  resetFocusStyles,
+  sizeStyles,
+  transitionStyles,
+  WithSize,
+} from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+type JsxLabelProps = Omit<
+  JSX.IntrinsicElements['label'],
+  'defaultValue' | 'onChange' | 'onClick' | 'ref'
+>;
+export interface CheckboxProps extends JsxLabelProps, WithSize {
+  /**
+   * Whether the checkbox is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the checkbox is checked.
+   * @default false
+   */
+  value?: boolean;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: boolean;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: boolean) => void;
+}
+
+const uncheckedIconStyles = (p) =>
+  !p.checked &&
+  css`
+    background-color: ${clr(p.theme.checkboxUncheckedColorBg)};
+    border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};
+  `;
+
+const checkedIconStyles = (p) =>
+  p.checked &&
+  css`
+    background-color: ${clr(p.theme.checkboxCheckedColorBg)};
+    border-color: ${clr(p.theme.checkboxCheckedColorBg)};
+  `;
+
+const disabledIconStyles = (p) =>
+  p.disabled &&
+  css`
+    background-color: ${clr(p.theme.checkboxDisabledColorBg)};
+    color: ${clr(p.theme.checkboxDisabledColorIcon)};
+    border-color: ${clr(p.theme.checkboxDisabledColorBorder)};
+  `;
+
+interface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {
+  checked: Required<CheckboxProps['value']>;
+}
+const IconContainer = styled(
+  'span',
+  omitEmotionProps('disabled', 'checked')
+)<IconContainerProps>`
+  width: ${(p) => p.theme.checkboxSize}em;
+  height: ${(p) => p.theme.checkboxSize}em;
+  min-width: ${(p) => p.theme.checkboxSize}em;
+  min-height: ${(p) => p.theme.checkboxSize}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  box-sizing: border-box;
+  line-height: 1;
+
+  border: 1px solid transparent;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};
+  margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;
+
+  ${uncheckedIconStyles};
+  ${checkedIconStyles};
+  ${disabledIconStyles};
+  ${transitionStyles('background-color', 'color', 'border-color')};
+`;
+
+const hoverUncheckedIconStyles = (p) =>
+  !p.checked &&
+  css`
+    background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};
+  `;
+
+const hoverCheckedIconStyles = (p) =>
+  p.checked &&
+  css`
+    background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};
+    border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};
+  `;
+
+const hoverStyles = (p) =>
+  !p.disabled &&
+  css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        & > span {
+          ${hoverUncheckedIconStyles(p)};
+          ${hoverCheckedIconStyles(p)};
+        }
+      }
+    }
+  `;
+
+const disabledContainerStyles = (p) =>
+  p.disabled &&
+  css`
+    cursor: not-allowed;
+  `;
+
+interface ContainerProps
+  extends Required<Pick<CheckboxProps, 'disabled'>>,
+    Pick<CheckboxProps, 'size'> {
+  checked: Required<CheckboxProps['value']>;
+}
+const Container = styled(
+  'label',
+  omitEmotionProps('disabled', 'size', 'checked')
+)<ContainerProps>`
+  ${resetFocusStyles};
+  cursor: pointer;
+  user-select: none;
+
+  display: flex;
+  margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;
+
+  ${hoverStyles};
+  ${disabledContainerStyles};
+  ${sizeStyles};
+  ${transitionStyles('color')};
+`;
+
+const disabledTextStyles = (p) =>
+  p.disabled &&
+  css`
+    color: ${clr(p.theme.checkboxDisabledColorText)};
+  `;
+
+type TextProps = Required<Pick<CheckboxProps, 'disabled'>>;
+const Text = styled('div', omitEmotionProps('disabled'))<TextProps>`
+  margin-left: 0.4em;
+  color: ${(p) => clr(p.theme.colorText)};
+  ${disabledTextStyles};
+`;
+
+/**
+ * The checkbox that can be enabled or disabled.
+ */
+const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
+  (
+    {
+      disabled = false,
+      value,
+      defaultValue,
+      onChange = () => {},
+      size,
+      onKeyDown = () => {},
+      onMouseDown = () => {},
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    return (
+      <Container
+        disabled={disabled}
+        checked={forwardedValue}
+        size={size}
+        tabIndex={!disabled ? 0 : -1}
+        onClick={() => {
+          if (disabled) return;
+          setForwardedValue(!forwardedValue);
+        }}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if (['Enter', ' '].includes(e.key)) {
+            setForwardedValue(!forwardedValue);
+            e.preventDefault();
+          }
+          onKeyDown(e);
+        }}
+        onMouseDown={(e) => {
+          onMouseDown(e);
+          e.preventDefault();
+        }}
+        role='checkbox'
+        aria-checked={forwardedValue}
+        aria-disabled={disabled}
+        {...rest}
+        ref={ref}
+      >
+        <IconContainer disabled={disabled} checked={forwardedValue}>
+          {forwardedValue && <Check />}
+        </IconContainer>
+
+        {children && <Text disabled={disabled}>{children}</Text>}
+      </Container>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;