@a-little-world/little-world-design-system 2.10.0

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,146 @@
+import { ButtonVariations } from '../Button/Button';
+import { EyeClosedIcon, EyeOpenIcon } from '../Icon';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import {
+  Input,
+  InputContainer,
+  InputWrapper,
+  ShowPasswordToggle,
+  TelephoneInput,
+} from './styles';
+import {
+  InputHeight,
+  InputWidth,
+  TextInputBaseProps,
+} from '@a-little-world/little-world-design-system-core';
+import React, { ChangeEvent } from 'react';
+
+const PASSWORD_TOGGLE_ICON_SIZE = 20;
+
+export { InputWidth, InputHeight };
+export interface Props
+  extends Omit<
+      React.ComponentPropsWithoutRef<'input'>,
+      'height' | 'onSubmit' | 'width'
+    >,
+    TextInputBaseProps {
+  inputRef?: React.RefObject<HTMLInputElement>;
+}
+
+const TextInput: React.FC<Props> = ({
+  error,
+  height,
+  id,
+  inline,
+  inputRef,
+  label,
+  labelTooltip,
+  onChange,
+  onSubmit,
+  onlyCountries,
+  type = 'text',
+  width = InputWidth.Large,
+  ...inputProps
+}: Props) => {
+  const [inputType, setInputType] = React.useState(type); // ['text', 'password'
+  const [showPassword, setShowPassword] = React.useState(false);
+  const { defaultValue, value, ...propsWithoutValues } = inputProps;
+  const defaultTelephoneVal = (value ?? defaultValue)?.toString() as
+    | string
+    | undefined;
+
+  const errorProps = inline ? { bottom: '-16px', right: '0px' } : {};
+
+  const handlePasswordVisibilityToggle = () => {
+    if (inputType === 'password') {
+      setInputType('text');
+      setShowPassword(true);
+    } else {
+      setInputType('password');
+      setShowPassword(false);
+    }
+  };
+
+  const handleTelephoneChange = (
+    value: string,
+    country: string,
+    e: ChangeEvent<HTMLInputElement>,
+  ) => {
+    onChange?.(e);
+  };
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (onSubmit && e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      await onSubmit();
+    }
+  };
+
+  return (
+    <InputWrapper $width={width}>
+      {label && (
+        <Label bold htmlFor={id} tooltipText={labelTooltip}>
+          {label}
+        </Label>
+      )}
+      <InputContainer>
+        {type === 'tel' ? (
+          <TelephoneInput
+            country="de"
+            onlyCountries={onlyCountries}
+            disableDropdown={onlyCountries?.length === 1}
+            onChange={handleTelephoneChange}
+            inputProps={{ ...propsWithoutValues, ref: inputRef }}
+            $hasError={!!error}
+            value={defaultTelephoneVal}
+            countryCodeEditable={false}
+            $height={height}
+          />
+        ) : (
+          <Input
+            ref={inputRef}
+            $hasError={Boolean(error)}
+            type={inputType}
+            id={id}
+            onChange={onChange}
+            onKeyDown={handleKeyDown}
+            $height={height}
+            {...inputProps}
+          />
+        )}
+        {type === 'password' && (
+          <ShowPasswordToggle
+            type="button"
+            variation={ButtonVariations.Icon}
+            onClick={handlePasswordVisibilityToggle}
+          >
+            {showPassword ? (
+              <EyeClosedIcon
+                label="show password"
+                width={PASSWORD_TOGGLE_ICON_SIZE}
+                height={PASSWORD_TOGGLE_ICON_SIZE}
+              />
+            ) : (
+              <EyeOpenIcon
+                label="hide password"
+                width={PASSWORD_TOGGLE_ICON_SIZE}
+                height={PASSWORD_TOGGLE_ICON_SIZE}
+              />
+            )}
+          </ShowPasswordToggle>
+        )}
+      </InputContainer>
+
+      <InputError
+        visible={Boolean(error)}
+        textAlign={width === InputWidth.Large ? 'right' : 'left'}
+        {...errorProps}
+      >
+        {error}
+      </InputError>
+    </InputWrapper>
+  );
+};
+
+export default TextInput;

package/src/components/TextInput/styles.tsx

@@ -0,0 +1,129 @@
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/style.css';
+import styled, { css } from 'styled-components';
+
+import Button from '../Button/Button';
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+import {
+  InputHeight,
+  InputWidth,
+} from '@a-little-world/little-world-design-system-core';
+import { pixelate } from '../../utils/styles';
+
+export const InputWrapper = styled.div<{ $width: InputWidth }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({ $width }) => pixelate($width)};
+  position: relative;
+`;
+
+export const InputContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const INPUT_CSS = css<{ $height?: InputHeight }>`
+  width: 100%;
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: ${({ theme, $height }) =>
+    $height === InputHeight.Small ? '5px 8px' : theme.spacing.xxsmall};
+
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+  font-size: 1rem;
+  height: unset;
+  line-height: 1.25;
+`;
+
+export const Input = styled.input<{
+  $hasError: boolean;
+  $height?: InputHeight;
+}>`
+  ${INPUT_CSS}
+`;
+
+export const TelephoneInput = styled(PhoneInput)<{
+  $hasError: boolean;
+  $height?: InputHeight;
+}>`
+  > input.form-control {
+    ${INPUT_CSS}
+    padding-left: 52px;
+
+    ${({ $hasError }) => $hasError && INPUT_ERROR_CSS}
+  }
+
+  .flag-dropdown {
+    overflow: hidden;
+    border: 2px solid
+      ${({ theme, $hasError }) =>
+        $hasError ? theme.color.border.error : theme.color.border.subtle};
+  }
+
+  .flag-dropdown.open {
+    overflow: visible;
+  }
+
+  .flag-dropdown,
+  .flag-dropdown.open {
+    background: none;
+    border-radius: 6px 0 0 6px;
+  }
+
+  .react-tel-input .country-list {
+    background: ${({ theme }) => theme.color.surface.elevated};
+    background-color: ${({ theme }) => theme.color.surface.elevated};
+    color: ${({ theme }) => theme.color.text.primary};
+    border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  }
+
+  .react-tel-input .country-list .country.highlight {
+    background-color: ${({ theme }) => theme.color.surface.quaternary};
+  }
+
+  .react-tel-input .flag-dropdown.open .selected-flag {
+    background: none;
+  }
+
+  .react-tel-input .selected-flag {
+    padding: 0 0 0 14px;
+    scale: 1.3;
+    width: 51px;
+    transition: background ease 0.2s;
+
+    > .flag {
+      margin-top: -6px;
+    }
+  }
+
+  .react-tel-input .selected-flag:focus {
+    background: none;
+  }
+
+  .flag-dropdown .selected-flag:hover {
+    background: ${({ theme }) => theme.color.border.subtle};
+  }
+
+  .react-tel-input .flag-dropdown.open .selected-flag {
+    &:hover {
+      background: none;
+      filter: brightness(0.8);
+    }
+  }
+
+  .react-tel-input .selected-flag,
+  .react-tel-input .flag-dropdown.open .selected-flag {
+    border-radius: 8px 0 0 8px;
+  }
+`;
+
+export const ShowPasswordToggle = styled(Button)`
+  position: absolute;
+  right: ${({ theme }) => theme.spacing.xxsmall};
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+`;

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ToastBaseProps } from '@a-little-world/little-world-design-system-core';
+import Button from '../Button/Button';
+import { Logo } from '../Icon';
+import Toast from './Toast';
+import { ToastProvider, ToastViewport } from './styles';
+
+export default {
+  component: Toast,
+  title: 'Components/Toast',
+};
+
+export const Default = args => {
+  const [open, setOpen] = React.useState(false);
+  const timerRef = React.useRef(0);
+
+  const props: ToastBaseProps = {
+    icon: <Logo label={'ToastLogoIcon'} />,
+    headline: 'This is the headline',
+    title: `This is the title`,
+    description: 'This is the description',
+    timestamp: new Date().toLocaleTimeString(),
+    actionText: 'Click me',
+    actionAltText: 'Click me',
+    duration: 3000,
+    onClose: () => console.log('toast onClose'),
+    onDismiss: () => console.log('toast onDismiss'),
+    onClick: () => console.log('toast onClick'),
+    onActionClick: () => {
+      console.log('toast onActionClick');
+    },
+  };
+
+  const showToast = () => {
+    setOpen(false);
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setOpen(true);
+    }, 100);
+  };
+
+  return (
+    <>
+      <Button onClick={() => showToast()}>Show Toast</Button>
+      <ToastProvider swipeDirection="right">
+        <ToastViewport />
+        {open && <Toast {...props}></Toast>}
+      </ToastProvider>
+    </>
+  );
+};
+
+Default.args = {
+  href: 'www.little-world.com',
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,139 @@
+import { Close } from '@radix-ui/react-toast';
+import React, { useState } from 'react';
+import {
+  ToastBaseProps,
+  TOAST_DEFAULT_DURATION,
+} from '@a-little-world/little-world-design-system-core';
+
+import Button, { ButtonSizes, ButtonVariations } from '../Button/Button';
+import { InfoIcon } from '../Icon';
+import {
+  ToastAction,
+  ToastCloseButton,
+  ToastCloseIcon,
+  ToastContent,
+  ToastDescription,
+  ToastHeader,
+  ToastHeadline,
+  ToastRoot,
+  ToastTitle,
+} from './styles';
+
+export const TOAST_ICON_SIZE = '24px';
+
+const Toast: React.FC<ToastBaseProps> = ({
+  className,
+  icon,
+  headline,
+  title,
+  description,
+  timestamp,
+  actionText,
+  actionAltText,
+  duration = TOAST_DEFAULT_DURATION,
+  onClose,
+  onDismiss,
+  onClick,
+  onActionClick,
+}: ToastBaseProps) => {
+  const actionWellDefined =
+    !!actionText === !!actionAltText && !!actionText === !!onActionClick;
+  if (!actionWellDefined) {
+    throw new Error(
+      'The action text, click event and alt text must all be set or unset',
+    );
+  }
+
+  const [open, setOpen] = useState(true);
+
+  function closeToast(): void {
+    setOpen(false);
+  }
+
+  function onClickInternal(
+    event: React.MouseEvent<HTMLLIElement, MouseEvent>,
+  ): void {
+    event.stopPropagation();
+    onClick?.();
+    closeToast();
+  }
+
+  function onDismissClick(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation(); // prevent toast onClick event from firing
+    onDismiss?.();
+    closeToast();
+  }
+
+  function onActionClickInternal(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    onActionClick?.();
+    closeToast();
+  }
+
+  function onOpenChange(open: boolean): void {
+    if (!open) {
+      onClose?.();
+      closeToast();
+    }
+  }
+
+  return (
+    <div className={className}>
+      <ToastRoot
+        className="ToastRoot"
+        open={open}
+        onOpenChange={onOpenChange}
+        duration={duration}
+        onClick={onClickInternal}
+      >
+        <Close asChild>
+          <ToastCloseButton
+            variation={ButtonVariations.Icon}
+            size={ButtonSizes.Small}
+            onClick={onDismissClick}
+          >
+            <ToastCloseIcon
+              label={'ToastCloseIcon'}
+              width={TOAST_ICON_SIZE}
+              height={TOAST_ICON_SIZE}
+            ></ToastCloseIcon>
+          </ToastCloseButton>
+        </Close>
+        <ToastHeader>
+          <ToastHeadline>
+            {icon ?? (
+              <InfoIcon
+                label={'ToastInfoIcon'}
+                width={TOAST_ICON_SIZE}
+                height={TOAST_ICON_SIZE}
+              />
+            )}
+            <span>{headline}</span>
+          </ToastHeadline>
+          <div>{timestamp}</div>
+        </ToastHeader>
+        <ToastContent>
+          {title && <ToastTitle className="ToastTitle">{title}</ToastTitle>}
+          {description && <ToastDescription>{description}</ToastDescription>}
+          {actionText && actionAltText && onActionClick && (
+            <ToastAction
+              className="ToastAction"
+              asChild
+              altText={actionAltText}
+            >
+              <Button
+                variation={ButtonVariations.Basic}
+                size={ButtonSizes.Small}
+                onClick={onActionClickInternal}
+              >
+                {actionText}
+              </Button>
+            </ToastAction>
+          )}
+        </ToastContent>
+      </ToastRoot>
+    </div>
+  );
+};
+
+export default Toast;

package/src/components/Toast/styles.tsx

@@ -0,0 +1,142 @@
+import * as RadixToast from '@radix-ui/react-toast';
+import styled, { keyframes } from 'styled-components';
+
+import Button from '../Button/Button';
+import { CloseIcon } from '../Icon';
+
+const slideIn = keyframes`
+	from {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+	to {
+		transform: translateX(0);
+	}
+`;
+
+const slideOut = keyframes`
+	from {
+    transform: translateX(0);
+	}
+	to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+`;
+
+const swipeOut = keyframes`
+	from {
+		transform: translateX(var(--radix-toast-swipe-end-x));
+	}
+	to {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+`;
+
+export const ToastProvider = styled(RadixToast.ToastProvider)``;
+
+export const ToastViewport = styled(RadixToast.Viewport)`
+  --viewport-padding: ${({ theme }) => theme.spacing.medium};
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--viewport-padding);
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 1000;
+  outline: none;
+`;
+
+export const ToastRoot = styled(RadixToast.Root)`
+  position: relative;
+  --border-radius: ${({ theme }) => theme.radius.xxsmall};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: var(--border-radius);
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+  &[data-state='open'] {
+    animation: ${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: ${slideOut} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: ${swipeOut} 100ms ease-out;
+  }
+`;
+
+export const ToastCloseButton = styled(Button)<{ $visible?: boolean }>`
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: ${({ theme }) => theme.radius.half};
+  background-color: ${({ theme }) => theme.color.surface.secondary};
+  width: 16px;
+  height: 16px;
+  box-shadow: 0px 0px 1px 1px ${({ theme }) => theme.color.border.subtle};
+`;
+
+export const ToastCloseIcon = styled(CloseIcon)`
+  scale: 0.8;
+`;
+
+export const ToastContent = styled.div`
+  padding: ${({ theme }) => theme.spacing.small};
+  display: grid;
+  grid-template-areas: 'headline headline' 'title action' 'description action';
+  grid-template-columns: auto max-content;
+  column-gap: ${({ theme }) => theme.spacing.small};
+  align-items: center;
+`;
+
+export const ToastHeader = styled.div<{ $backgroundColor?: string }>`
+  padding: ${({ theme }) =>
+    `${theme.spacing.xxxsmall} ${theme.spacing.xxsmall}`};
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ $backgroundColor, theme }) =>
+    $backgroundColor || theme.color.surface.secondary};
+  justify-content: space-between;
+`;
+
+export const ToastHeadline = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+`;
+
+export const ToastTitle = styled(RadixToast.ToastTitle)`
+  grid-area: title;
+  margin-bottom: ${({ theme }) => theme.spacing.xxxsmall};
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+
+export const ToastDescription = styled(RadixToast.ToastDescription)`
+  grid-area: description;
+  margin: 0;
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+
+export const ToastAction = styled(RadixToast.ToastAction)`
+  grid-area: action;
+`;

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Tooltip from './Tooltip';
+import Button, { ButtonVariations } from '../Button/Button';
+import { QuestionIcon } from '../Icon';
+
+export default {
+  component: Tooltip,
+  title: 'Components/Tooltip',
+  argTypes: {
+    open: { control: 'boolean' },
+    text: { control: 'text' },
+    side: { control: 'select', options: ['top', 'left', 'right', 'bottom'] },
+  },
+};
+
+export const Default = args => {
+  return (
+    <Tooltip
+      trigger={
+        <Button variation={ButtonVariations.Icon}>
+          <QuestionIcon label="questionIcon" />
+        </Button>
+      }
+      {...args}
+    />
+  );
+};
+
+Default.args = {
+  text: 'this is a descriptor tooltip',
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,48 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { StyledTooltipContent, StyledTooltipArrow } from './styles';
+
+type Props = {
+  text: string;
+  trigger?: React.ReactNode;
+} & RadixTooltip.TooltipProps &
+  RadixTooltip.TooltipContentProps;
+
+export const TooltipProvider = RadixTooltip.Provider;
+
+const DEFAULT_SIDE_OFFSET = 0; //px
+const DEFAULT_DELAY_DURATION = 300;
+
+const Tooltip: React.FC<Props> = ({
+  defaultOpen,
+  open,
+  side,
+  sideOffset = DEFAULT_SIDE_OFFSET,
+  trigger,
+  text,
+  ...rest
+}: Props) => (
+  <RadixTooltip.Provider>
+    <RadixTooltip.Root
+      defaultOpen={defaultOpen}
+      delayDuration={DEFAULT_DELAY_DURATION}
+      open={open}
+      {...rest}
+    >
+      {trigger && (
+        <RadixTooltip.Trigger asChild>{trigger}</RadixTooltip.Trigger>
+      )}
+      <RadixTooltip.Portal>
+        <StyledTooltipContent side={side} sideOffset={sideOffset}>
+          <StyledTooltipArrow />
+          <Text type={TextTypes.Body5}>{text}</Text>
+        </StyledTooltipContent>
+      </RadixTooltip.Portal>
+    </RadixTooltip.Root>
+  </RadixTooltip.Provider>
+);
+
+export default Tooltip;

package/src/components/Tooltip/styles.tsx

@@ -0,0 +1,20 @@
+import { TooltipArrow, TooltipContent } from '@radix-ui/react-tooltip';
+import styled from 'styled-components';
+
+export const StyledTooltipContent = styled(TooltipContent)`
+  background: ${({ theme }) => theme.color.surface.dim};
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  color: ${({ theme }) => theme.color.text.reversed};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+`;
+
+export const StyledTooltipArrow = styled(TooltipArrow)`
+  fill: ${({ theme }) => theme.color.surface.dim};
+`;