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

package/src/components/Slider/styles.tsx

@@ -0,0 +1,57 @@
+import { Range, Root, Thumb, Track } from '@radix-ui/react-slider';
+import styled from 'styled-components';
+
+export const SliderWrapper = styled.div``;
+
+export const SliderRoot = styled(Root)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: 100%:
+  max-width: 400px;
+  height: 20px;
+`;
+
+export const SliderTrack = styled(Track)`
+  position: relative;
+  background-color: ${props => props.theme.color.surface.secondary};
+  flex-grow: 1;
+  border-radius: 9999px;
+  height: 3px;
+`;
+
+export const SliderRange = styled(Range)`
+  position: absolute;
+  background-color: ${props => props.theme.color.surface.bold};
+  border-radius: 9999px;
+  height: 100%;
+`;
+
+export const SliderThumb = styled(Thumb)`
+  display: block;
+  width: ${({ theme }) => theme.spacing.small};
+  height: ${({ theme }) => theme.spacing.small};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 10px;
+  border: 1px solid ${props => props.theme.color.border.moderate};
+
+  &:hover {
+    background-color: ${props => props.theme.color.surface.primary};
+    cursor: grab;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0px 4px ${props => props.theme.color.surface.contrast};
+  }
+`;
+
+export const Steps = styled.div`
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+`;

package/src/components/StarRating/StarRating.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import StarRating from './StarRating';
+
+export default {
+  component: StarRating,
+  title: 'Components/StarRating',
+  argTypes: {
+    step: { control: 'number' },
+  },
+};
+
+export const Default = args => {
+  return <StarRating {...args} />;
+};
+
+Default.args = {
+  maxRating: 5,
+  initialRating: 0,
+};

package/src/components/StarRating/StarRating.tsx

@@ -0,0 +1,212 @@
+import React, { KeyboardEvent, useCallback, useState } from 'react';
+import { useTheme } from 'styled-components';
+
+import { StarIcon } from '../Icon';
+import {
+  Rating,
+  RatingContainer,
+  StarContainer,
+  StarOverlay,
+  Stars,
+  TextRating,
+  VisuallyHidden,
+} from './styles';
+
+const roundToHalf = (value: number): number => {
+  const rounded = Math.round(value * 2) / 2;
+  return Math.max(0, Math.min(rounded, 5));
+};
+
+const DEFAULT_RATINGS = ['Poor', 'Fair', 'Average', 'Good', 'Excellent'];
+
+export enum StarRatingSizes {
+  Small = 24, // px
+  Medium = 32,
+  Large = 48,
+}
+export interface StarRatingProps {
+  className?: string;
+  color?: string;
+  displayNumber?: boolean;
+  displayTextRatings?: boolean;
+  enableHalfRatings?: boolean;
+  id?: string;
+  initialRating?: number;
+  ratings?: string[];
+  maxRating?: number;
+  name?: string;
+  onChange?: (rating: number) => void;
+  size?: StarRatingSizes;
+}
+
+const StarRating = ({
+  className,
+  color,
+  displayNumber = false,
+  displayTextRatings = false,
+  enableHalfRatings = false,
+  id = 'star-rating',
+  initialRating = 0,
+  name = 'rating',
+  maxRating = 5,
+  onChange,
+  ratings = DEFAULT_RATINGS,
+  size = StarRatingSizes.Small,
+}: StarRatingProps) => {
+  const [rating, setRating] = useState(initialRating);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [focusedStar, setFocusedStar] = useState<number | null>(null);
+  const theme = useTheme();
+  const ratingIncrement = enableHalfRatings ? 0.5 : 1;
+
+  const handleMouseMove = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    starIndex: number,
+  ) => {
+    const { left, width } = e.currentTarget.getBoundingClientRect();
+    const percent = (e.clientX - left) / width;
+    const newRating =
+      enableHalfRatings && percent <= 0.5 ? starIndex + 0.5 : starIndex + 1;
+    setHoverRating(roundToHalf(newRating));
+  };
+
+  const handleMouseLeave = () => {
+    setHoverRating(0);
+  };
+
+  const updateRating = useCallback(
+    (newRating: number) => {
+      const roundedRating = enableHalfRatings
+        ? roundToHalf(newRating)
+        : newRating;
+      setRating(roundedRating);
+      onChange?.(roundedRating);
+    },
+    [onChange],
+  );
+
+  const calculateRating = (starNumber: number) => {
+    // Toggle between whole, half, and unrated for clicked star
+    let newRating;
+
+    if (rating === starNumber) {
+      newRating = starNumber - ratingIncrement;
+    } else {
+      newRating = starNumber;
+    }
+
+    updateRating(newRating);
+  };
+
+  const handleKeyDown = (
+    e: KeyboardEvent<HTMLButtonElement>,
+    starIndex: number,
+  ) => {
+    let newRating = rating;
+    setHoverRating(0);
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        // If we're at a whole number, go down by 0.5, otherwise go down by 1
+        newRating =
+          Math.floor(rating) === rating
+            ? Math.max(0, rating - ratingIncrement)
+            : Math.max(0, Math.floor(rating));
+        updateRating(newRating);
+
+        setFocusedStar(Math.max(0, newRating - 1));
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        // If we're at a whole number, go up by 0.5, otherwise go up by 1
+        newRating =
+          Math.floor(rating) === rating
+            ? Math.min(maxRating, rating + ratingIncrement)
+            : Math.min(maxRating, Math.ceil(rating));
+
+        updateRating(newRating);
+        setFocusedStar(Math.min(maxRating - 1, newRating - 1));
+        break;
+      case ' ':
+      case 'Enter':
+        e.preventDefault();
+        calculateRating((focusedStar ?? starIndex) + 1);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const currentRating = hoverRating || rating;
+
+  return (
+    <RatingContainer
+      className={className}
+      role="group"
+      aria-label="Star rating"
+    >
+      <VisuallyHidden id={`${id}-label`}>
+        Rating: {currentRating} out of {maxRating} stars
+      </VisuallyHidden>
+      <Stars>
+        {[...Array(maxRating)].map((_, index) => {
+          const fillAmount = Math.max(0, Math.min(1, currentRating - index));
+          const starNumber = index + 1;
+          const handleClick = () => {
+            // tap devices cannot use hover rating
+            const crossDeviceFillAmount = hoverRating ? fillAmount : 1;
+            calculateRating(index + crossDeviceFillAmount);
+          };
+          return (
+            <StarContainer
+              key={index}
+              onClick={handleClick}
+              onMouseMove={e => handleMouseMove(e, index)}
+              onMouseLeave={handleMouseLeave}
+              onKeyDown={e => handleKeyDown(e, index)}
+              onFocus={() => setFocusedStar(index)}
+              onBlur={() => setFocusedStar(null)}
+              tabIndex={0}
+              role="radio"
+              aria-checked={rating >= starNumber}
+              aria-label={`${starNumber} star${starNumber === 1 ? '' : 's'}`}
+              aria-describedby={`${id}-label`}
+              name={name}
+              type="button"
+            >
+              {/* Background star */}
+              <StarIcon
+                label="background star"
+                width={size}
+                height={size}
+                color={theme.color.surface.disabled}
+                aria-hidden="true"
+              />
+
+              {/* Filled overlay star */}
+              <StarOverlay $fillAmount={fillAmount}>
+                <StarIcon
+                  label="filled star"
+                  width={size}
+                  height={size}
+                  color={color || theme.color.surface.selected}
+                  aria-hidden="true"
+                />
+              </StarOverlay>
+            </StarContainer>
+          );
+        })}
+        {displayNumber && (
+          <Rating aria-hidden="true" tag="span">
+            {currentRating || 0}
+          </Rating>
+        )}
+      </Stars>
+      {displayTextRatings && (
+        <TextRating>{ratings[Math.ceil(currentRating - 1)]}</TextRating>
+      )}
+    </RatingContainer>
+  );
+};
+
+export default StarRating;

package/src/components/StarRating/styles.ts

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+
+import Text from '../Text/Text';
+
+export const RatingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const Stars = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StarContainer = styled.button<{ isFocused?: boolean }>`
+  position: relative;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  f &:focus-visible {
+    box-shadow: 0 0 0 2px #4f46e5;
+  }
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+export const StarOverlay = styled.div<{
+  $fillAmount: number;
+}>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: ${props => props.$fillAmount * 100}%;
+  pointer-events: none;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+
+  transition: width 0.3s ease-in-out;
+  &:hover {
+    transition: width 1s ease-in-out;
+  }
+
+  > svg {
+    transition: width 0.3s ease-in-out;
+    ${({ $fillAmount }) =>
+      !$fillAmount &&
+      css`
+        transition: width 0.3s ease-in-out;
+        width: 0;
+      `}:
+  }
+`;
+
+export const Rating = styled(Text)`
+  margin-left: ${({ theme }) => theme.spacing.xxsmall};
+  width: 24px;
+`;
+
+export const TextRating = styled(Text)`
+  height: 16px;
+`;
+
+export const VisuallyHidden = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;

package/src/components/StatusMessage/StatusMessage.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import StatusMessage from './StatusMessage';
+import { StatusTypes } from '@a-little-world/little-world-design-system-core';
+
+const meta: Meta<typeof StatusMessage> = {
+  component: StatusMessage,
+  title: 'Components/StatusMessage',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StatusMessage>;
+
+export const Error: Story = {
+  args: {
+    visible: true,
+    type: StatusTypes.Error,
+    children: 'This is an error message to indicate something went wrong!',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    visible: true,
+    type: StatusTypes.Success,
+    children: 'This is a succes message to indicate something went right!',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    visible: true,
+    type: StatusTypes.Warning,
+    children: 'This is a warning message to indicate something went awry!',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    visible: true,
+    children: 'This is a info message to indicate some info',
+  },
+};

package/src/components/StatusMessage/StatusMessage.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import {
+  StatusBaseProps,
+  StatusTypes,
+} from '@a-little-world/little-world-design-system-core';
+import Text from '../Text/Text';
+import { ExclamationIcon } from '../Icon';
+
+const StatusMessageWrapper = styled.div<{
+  $type: StatusTypes;
+  $visible?: boolean;
+  $withBorder?: boolean;
+  $withIcon?: boolean;
+}>`
+  display: flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  width: 100%;
+  min-height: ${({ theme }) => theme.spacing.xlarge};
+  padding: ${({ theme, $withBorder }) =>
+    $withBorder ? theme.spacing.small : theme.spacing.xxsmall};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transition: ${({ $visible }) => ($visible ? 'opacity 1s' : 'none')};
+  text-align: ${({ $withIcon }) => ($withIcon ? 'left' : 'center')};
+  margin: ${({ theme, $withBorder }) =>
+      $withBorder ? 0 : theme.spacing.xxsmall}
+    0;
+  border-radius: ${({ theme, $withBorder }) =>
+    $withBorder ? theme.radius.xxsmall : 0};
+
+  ${({ $type, theme, $withBorder }) => {
+    if ($type === StatusTypes.Error)
+      return css`
+        background: ${theme.color.surface.error};
+        color: ${theme.color.text.error};
+        border: ${$withBorder
+          ? `1px solid ${theme.color.border.error}`
+          : 'none'};
+      `;
+
+    if ($type === StatusTypes.Success)
+      return css`
+        background: ${theme.color.surface.success};
+        color: ${theme.color.text.success};
+        border: ${$withBorder
+          ? `1px solid ${theme.color.border.success}`
+          : 'none'};
+      `;
+
+    if ($type === StatusTypes.Warning)
+      return css`
+        background: ${theme.color.surface.warning};
+        color: ${theme.color.text.warning};
+        border: ${$withBorder
+          ? `1px solid ${theme.color.border.warning}`
+          : 'none'};
+      `;
+
+    // default is Info type
+    return css`
+      background: ${theme.color.surface.subtle};
+      color: ${theme.color.text.info};
+      border: ${$withBorder ? `1px solid ${theme.color.border.info}` : 'none'};
+    `;
+  }})
+`;
+
+const StyledIcon = styled.svg`
+  flex-shrink: 0;
+  margin-top: 3px;
+`;
+
+const STATUS_ICONS = {
+  [StatusTypes.Error]: {
+    Icon: ExclamationIcon,
+    label: 'error icon',
+  },
+  [StatusTypes.Warning]: {
+    Icon: ExclamationIcon,
+    label: 'warning icon',
+  },
+};
+
+const StatusMessage = ({
+  className,
+  type,
+  visible,
+  children,
+  withBorder,
+}: StatusBaseProps) => {
+  const icon = STATUS_ICONS[type as keyof typeof STATUS_ICONS];
+  const Icon = withBorder && icon?.Icon;
+  return (
+    <StatusMessageWrapper
+      className={className}
+      $type={type}
+      $visible={visible}
+      $withBorder={withBorder}
+      $withIcon={!!Icon}
+    >
+      {Icon && (
+        <StyledIcon as={Icon} label={icon.label} width={18} height={18} />
+      )}
+      <Text>{children}</Text>
+    </StatusMessageWrapper>
+  );
+};
+
+export default StatusMessage;

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Switch from './Switch';
+
+export default {
+  component: Switch,
+  title: 'Components/Switch',
+};
+
+export const Default = args => {
+  return <Switch {...args} />;
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,83 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import React from 'react';
+
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import {
+  LabelContainer,
+  SwitchContainer,
+  SwitchRoot,
+  SwitchThumb,
+  SwitchWrapper,
+} from './styles';
+
+type Props = {
+  className?: string;
+  description?: string;
+  error?: string;
+  fullWidth?: boolean;
+  label?: string;
+  labelBold?: boolean;
+  labelInline?: boolean;
+  labelTooltip?: string;
+  inputRef: React.RefObject<HTMLButtonElement>;
+} & RadixSwitch.SwitchProps;
+
+const Switch: React.FC<Props> = ({
+  className,
+  description,
+  error,
+  fullWidth,
+  label,
+  labelBold = true,
+  labelInline,
+  labelTooltip,
+  inputRef,
+  checked,
+  onCheckedChange,
+  value,
+  ...rest
+}: Props) => (
+  <SwitchWrapper
+    className={className}
+    $fullWidth={fullWidth}
+    $labelInline={labelInline}
+    $labelAndDescription={Boolean(label && description)}
+  >
+    {(label || description) && (
+      <LabelContainer $inline={labelInline}>
+        {label && (
+          <Label
+            bold={labelBold}
+            htmlFor={label}
+            tooltipText={labelTooltip}
+            marginBottom="0"
+          >
+            {label}
+          </Label>
+        )}
+        {description && <Text>{description}</Text>}
+      </LabelContainer>
+    )}
+
+    <SwitchContainer>
+      <SwitchRoot
+        ref={inputRef}
+        checked={checked}
+        value={value}
+        name={label}
+        onCheckedChange={onCheckedChange}
+        $hasError={Boolean(error)}
+        {...rest}
+      >
+        <SwitchThumb />
+      </SwitchRoot>
+      <InputError visible={Boolean(error)} textAlign="left">
+        {error}
+      </InputError>
+    </SwitchContainer>
+  </SwitchWrapper>
+);
+
+export default Switch;

package/src/components/Switch/styles.tsx

@@ -0,0 +1,75 @@
+import * as Switch from '@radix-ui/react-switch';
+import styled, { css } from 'styled-components';
+
+export const SwitchWrapper = styled.div<{
+  $fullWidth?: boolean;
+  $labelInline?: boolean;
+  $labelAndDescription: boolean;
+}>`
+  ${({ theme, $fullWidth, $labelInline, $labelAndDescription }) =>
+    $labelInline &&
+    css`
+      display: flex;
+      gap: ${theme.spacing.small};
+      align-items: ${$labelAndDescription ? 'flex-start' : 'center'};
+      ${$fullWidth &&
+      css`
+        width: 100%;
+        justify-content: space-between;
+      `}
+    `}
+`;
+
+export const LabelContainer = styled.div<{ $inline?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin-bottom: ${({ theme, $inline }) =>
+    $inline ? '20px' : theme.spacing.xxsmall};
+`;
+
+export const SwitchRoot = styled(Switch.Root)<{ $hasError?: boolean }>`
+  width: 56px;
+  height: 32px;
+  background-color: ${({ theme }) => theme.color.border.subtle};
+  border-radius: 9999px;
+  position: relative;
+  -webkit-tap-highlight-color: ${({ theme }) => theme.color.surface.on};
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.minimal};
+  }
+
+  ${({ $hasError }) =>
+    $hasError &&
+    css`
+      box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.error};
+      background-color: ${({ theme }) => theme.color.surface.secondary};
+
+      &:focus {
+        box-shadow: 0 0 0 2px ${({ theme }) => theme.color.border.error};
+      }
+    `}
+
+  &[data-state='checked'] {
+    background-color: ${({ theme }) => theme.color.surface.on};
+  }
+`;
+
+export const SwitchContainer = styled.div``;
+
+export const SwitchThumb = styled(Switch.Thumb)`
+  display: block;
+  width: 24px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 9999px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  transition: transform 100ms;
+  transform: translateX(4px);
+  will-change: transform;
+
+  &[data-state='checked'] {
+    transform: translateX(28px);
+  }
+`;