@os-design/core 1.0.199 → 1.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.199",
+  "version": "1.0.200",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,15 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx",
+    "!**/*.emotion.d.ts"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,16 +37,16 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/date-picker-utils": "^1.0.16",
-    "@os-design/icons": "^1.0.47",
-    "@os-design/input-number-utils": "^1.0.21",
-    "@os-design/media": "^1.0.18",
-    "@os-design/menu-utils": "^1.0.14",
-    "@os-design/portal": "^1.0.10",
-    "@os-design/styles": "^1.0.44",
-    "@os-design/theming": "^1.0.42",
-    "@os-design/time-picker-utils": "^1.0.7",
-    "@os-design/utils": "^1.0.61",
+    "@os-design/date-picker-utils": "^1.0.17",
+    "@os-design/icons": "^1.0.48",
+    "@os-design/input-number-utils": "^1.0.22",
+    "@os-design/media": "^1.0.19",
+    "@os-design/menu-utils": "^1.0.15",
+    "@os-design/portal": "^1.0.11",
+    "@os-design/styles": "^1.0.45",
+    "@os-design/theming": "^1.0.43",
+    "@os-design/time-picker-utils": "^1.0.8",
+    "@os-design/utils": "^1.0.62",
     "@os-team/password-score": "^1.0.4",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.9.4",
@@ -58,5 +66,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "bbd193f118a3128033d4d99ffcb4e96fe06f0dba"
+  "gitHead": "3d6b264027712ef81a75379fe3fde3c76c3079af"
 }

package/src/@types/emotion.d.ts

@@ -0,0 +1,7 @@
+import '@emotion/react';
+import { Theme as BaseTheme } from '@os-design/theming';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends BaseTheme {}
+}

package/src/Alert/index.tsx

@@ -0,0 +1,112 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface AlertProps extends JsxDivProps, WithSize {
+  /**
+   * Type of styles.
+   */
+  type: 'info' | 'success' | 'error';
+}
+
+const infoContainerStyles = (p) =>
+  p.type === 'info' &&
+  css`
+    background-color: ${clr(p.theme.alertInfoColorBg)};
+  `;
+
+const successContainerStyles = (p) =>
+  p.type === 'success' &&
+  css`
+    background-color: ${clr(p.theme.alertSuccessColorBg)};
+  `;
+
+const errorContainerStyles = (p) =>
+  p.type === 'error' &&
+  css`
+    background-color: ${clr(p.theme.alertErrorColorBg)};
+  `;
+
+type ContainerProps = Pick<AlertProps, 'type' | 'size'>;
+const Container = styled(
+  'div',
+  omitEmotionProps('type', 'size')
+)<ContainerProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: 1em;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  color: ${(p) => clr(p.theme.colorText)};
+
+  ${infoContainerStyles};
+  ${successContainerStyles};
+  ${errorContainerStyles};
+  ${sizeStyles};
+`;
+
+const infoIconContainerStyles = (p) =>
+  p.type === 'info' &&
+  css`
+    color: ${clr(p.theme.alertInfoColorIcon)};
+  `;
+
+const successIconContainerStyles = (p) =>
+  p.type === 'success' &&
+  css`
+    color: ${clr(p.theme.alertSuccessColorIcon)};
+  `;
+
+const errorIconContainerStyles = (p) =>
+  p.type === 'error' &&
+  css`
+    color: ${clr(p.theme.alertErrorColorIcon)};
+  `;
+
+type IconContainerProps = Pick<AlertProps, 'type'>;
+const IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`
+  display: flex;
+  align-items: center;
+
+  margin-right: 0.3em;
+  font-size: 1.4em;
+
+  ${infoIconContainerStyles};
+  ${successIconContainerStyles};
+  ${errorIconContainerStyles};
+`;
+
+const typeIconMap = {
+  info: InfoCircle,
+  success: CheckCircle,
+  error: CloseCircle,
+};
+
+/**
+ * The component for feedback.
+ */
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ type, size, children, ...rest }, ref) => {
+    const Icon = useMemo(() => typeIconMap[type], [type]);
+
+    return (
+      <Container size={size} type={type} role='alert' {...rest} ref={ref}>
+        <IconContainer type={type}>
+          <Icon />
+        </IconContainer>
+        <span>{children}</span>
+      </Container>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
+
+export default Alert;

package/src/Avatar/index.tsx

@@ -0,0 +1,173 @@
+import styled from '@emotion/styled';
+import { User } from '@os-design/icons';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { Color, clr, useTheme } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import Image, { ImageProps } from '../Image';
+
+import nameToInitials from './utils/nameToInitials';
+import strToHue from './utils/strToHue';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface AvatarProps extends JsxDivProps, WithSize {
+  /**
+   * Used to render the first letter if the image URL is not specified.
+   * @default undefined
+   */
+  firstName?: string;
+  /**
+   * Used to render the second letter if the image URL is not specified.
+   * @default undefined
+   */
+  lastName?: string;
+  /**
+   * The URL of the image.
+   * @default undefined
+   */
+  image?: string;
+  /**
+   * The props of the image.
+   * @default undefined
+   */
+  imageProps?: Omit<ImageProps, 'url'>;
+  /**
+   * Whether the user is online.
+   * @default false
+   */
+  online?: boolean;
+}
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  position: relative;
+  width: 1em;
+  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
+  ${sizeStyles};
+`;
+
+interface AvatarContainerProps {
+  bgColor: Color;
+}
+
+const AvatarContainer = styled(
+  'div',
+  omitEmotionProps('bgColor')
+)<AvatarContainerProps>`
+  width: 100%;
+  height: 100%;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+
+  font-weight: 500;
+  line-height: 1;
+
+  color: hsl(0, 0%, 100%);
+  background-color: ${(p) => clr(p.bgColor)};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  white-space: nowrap; // To disable multiline text
+  overflow: hidden; // To trim the image corners
+
+  ${sizeStyles};
+`;
+
+const UserIcon = styled(User)`
+  font-size: 0.6em;
+`;
+
+const Initials = styled.div`
+  font-size: 0.35em;
+`;
+
+const INNER_SIZE = 0.25;
+const OUTER_SIZE = INNER_SIZE * 1.2;
+
+const Online = styled.span`
+  position: absolute;
+  right: -0.05em;
+  bottom: -0.05em;
+  width: ${OUTER_SIZE}em;
+  height: ${OUTER_SIZE}em;
+  border-radius: 50%;
+  background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;
+    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;
+    width: ${INNER_SIZE}em;
+    height: ${INNER_SIZE}em;
+    border-radius: 50%;
+    background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};
+  }
+`;
+
+/**
+ * Avatar can be used to represent people.
+ */
+const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      firstName,
+      lastName,
+      image,
+      imageProps = {},
+      online = false,
+      size = '2em',
+      ...rest
+    },
+    ref
+  ) => {
+    const { theme } = useTheme();
+
+    const bgColor = useMemo<Color>(() => {
+      const parts: string[] = [];
+      if (firstName) parts.push(firstName);
+      if (lastName) parts.push(lastName);
+      if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];
+      return theme.avatarDefaultColorBg;
+    }, [firstName, lastName, theme.avatarDefaultColorBg]);
+
+    const fullName = useMemo(
+      () => [firstName, lastName].filter((i) => i).join(' ') || undefined,
+      [firstName, lastName]
+    );
+
+    const renderChildren = useCallback(() => {
+      // Render the image if the image property was specified
+      if (image) return <Image url={image} cropped {...imageProps} />;
+
+      // Render the initials of the name if either firstName or lastName was specified
+      const initials = nameToInitials({ firstName, lastName });
+      if (initials) return <Initials>{initials}</Initials>;
+
+      // Otherwise render the user icon
+      return <UserIcon />;
+    }, [image, imageProps, firstName, lastName]);
+
+    return (
+      <Container size={size}>
+        <AvatarContainer
+          bgColor={bgColor}
+          role='img'
+          aria-label={fullName || 'User'}
+          {...rest}
+          ref={ref}
+        >
+          {renderChildren()}
+        </AvatarContainer>
+        {online && <Online />}
+      </Container>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;

package/src/Avatar/utils/nameToInitials.ts

@@ -0,0 +1,12 @@
+interface Name {
+  firstName?: string;
+  lastName?: string;
+}
+
+const nameToInitials = ({ firstName, lastName }: Name): string => {
+  const first = firstName ? firstName.charAt(0) : '';
+  const second = lastName ? lastName.charAt(0) : '';
+  return `${first}${second}`.toUpperCase();
+};
+
+export default nameToInitials;

package/src/Avatar/utils/strToHue.ts

@@ -0,0 +1,13 @@
+/**
+ * Return the hue of the color by string.
+ */
+const strToHue = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    // eslint-disable-next-line no-bitwise
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash % 360;
+};
+
+export default strToHue;

package/src/AvatarSkeleton/index.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton from '../Skeleton';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export type AvatarSkeletonProps = JsxDivProps & WithSize;
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  ${sizeStyles};
+`;
+
+/**
+ * Provides an avatar placeholder while a user waits for the content to load.
+ */
+const AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(
+  ({ size = '2em', ...rest }, ref) => (
+    <Container size={size} {...rest} ref={ref}>
+      <Skeleton width='1em' />
+    </Container>
+  )
+);
+
+AvatarSkeleton.displayName = 'AvatarSkeleton';
+
+export default AvatarSkeleton;

package/src/Breadcrumb/index.tsx

@@ -0,0 +1,93 @@
+import styled from '@emotion/styled';
+import { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, ReactElement, useMemo } from 'react';
+import BreadcrumbItem from '../BreadcrumbItem';
+
+type JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;
+export interface BreadcrumbProps extends JsxOlProps, WithSize {
+  'aria-label'?: string;
+}
+
+const Container = styled('ol', omitEmotionProps('size'))<WithSize>`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: ${(p) => clr(p.theme.colorText)};
+
+  ${enableScrollingStyles('x', false)};
+  ${sizeStyles};
+`;
+
+let childIndex = 0;
+
+/**
+ * Displays the current location within the hierarchical structure.
+ * Implements the Schema.org markup for breadcrumbs.
+ * See https://schema.org/BreadcrumbList
+ */
+const Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(
+  ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {
+    const breadcrumbItems = useMemo(() => {
+      const items: ReactElement[] = [];
+      const childrenArray = React.Children.toArray(children);
+      childrenArray.forEach((child, index) => {
+        if (!React.isValidElement(child)) return;
+
+        let element;
+        const breadcrumbItemProps = {
+          key: childIndex,
+          position: index + 1,
+          hasRightArrow: index < childrenArray.length - 1,
+        };
+
+        if (child.type === BreadcrumbItem) {
+          element = React.cloneElement(child, breadcrumbItemProps);
+        } else if (
+          React.isValidElement(child.props.children) &&
+          child.props.children.type === BreadcrumbItem
+        ) {
+          const breadcrumbItem = React.cloneElement(
+            child.props.children,
+            breadcrumbItemProps
+          );
+          element = React.cloneElement(
+            child,
+            {
+              ...(child.props || {}),
+              key: childIndex,
+            },
+            breadcrumbItem
+          );
+        }
+        if (!element) return;
+
+        items.push(element);
+        childIndex += 1;
+      });
+      return items;
+    }, [children]);
+
+    if (breadcrumbItems.length === 0) return null;
+
+    return (
+      <nav aria-label={ariaLabel}>
+        <Container
+          itemScope
+          itemType='https://schema.org/BreadcrumbList'
+          {...rest}
+          ref={ref}
+        >
+          {breadcrumbItems}
+        </Container>
+      </nav>
+    );
+  }
+);
+
+Breadcrumb.displayName = 'Breadcrumb';
+
+export default Breadcrumb;

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;