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

package/src/components/InputError/InputError.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+
+export const INPUT_ERROR_CSS = css`
+  border: 1px solid ${({ theme }) => theme.color.border.error};
+
+  &:focus,
+  &:focus-visible {
+    outline: ${({ theme }) => theme.color.border.error} 1px auto;
+  }
+`;
+
+const ErrorText = styled(Text)<{
+  $top?: string;
+  $bottom?: string;
+  $right?: string;
+  $left?: string;
+  $textAlign: 'left' | 'center' | 'right';
+  $visible: boolean;
+}>`
+  color: ${({ theme }) => theme.color.text.error};
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility 1s,
+    opacity 1s;
+  min-height: ${({ theme }) => theme.spacing.small};
+  padding-left: 1px;
+  text-align: ${({ $textAlign }) => $textAlign};
+
+  ${({ $top, $bottom, $right, $left }) =>
+    ($top || $right || $bottom || $left) &&
+    `
+    position: absolute;
+    top: ${$top};
+    bottom: ${$bottom};
+    right: ${$right};
+    left: ${$left};
+  `};
+
+  ${({ $visible }) =>
+    $visible &&
+    `
+    visibility: visible;
+    opacity: 1;
+  `};
+`;
+
+type Props = {
+  children: React.ReactNode;
+  top?: string;
+  bottom?: string;
+  right?: string;
+  left?: string;
+  visible: boolean;
+  textAlign?: 'left' | 'center' | 'right';
+  textType?: TextTypes;
+};
+
+const InputError: React.FC<Props> = ({
+  children,
+  top,
+  bottom,
+  right,
+  left,
+  textAlign = 'right',
+  textType = TextTypes.Body7,
+  visible,
+}) => (
+  <ErrorText
+    type={textType}
+    $visible={visible}
+    $top={top}
+    $bottom={bottom}
+    $right={right}
+    $left={left}
+    $textAlign={textAlign}
+  >
+    {children}
+  </ErrorText>
+);
+
+export default InputError;

package/src/components/Label/Label.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Label from './Label';
+
+export default {
+  component: Label,
+  title: 'Components/Label',
+  argTypes: {
+    text: { control: 'text' },
+  },
+};
+
+export const Default = ({ text, ...args }) => {
+  return <Label {...args}>{text}</Label>;
+};
+
+Default.args = {
+  text: 'Default Label',
+};

package/src/components/Label/Label.tsx

@@ -0,0 +1,76 @@
+import * as RadixLabel from '@radix-ui/react-label';
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import textParser from '../../utils/parser';
+import Button, { ButtonSizes, ButtonVariations } from '../Button/Button';
+import { QuestionIcon } from '../Icon';
+import { BODY_5_CSS } from '../Text/styles';
+import InfoPopover from '../Popover/InfoPopover';
+
+const StyledLabel = styled(RadixLabel.Root)<{
+  $bold?: boolean;
+  $inline?: boolean;
+  $marginBottom?: string | number;
+}>`
+  ${BODY_5_CSS}
+  width: fit-content;
+
+  ${({ $bold, $inline, $marginBottom, theme }) => css`
+    ${$bold && 'font-weight: bold;'}
+    display: ${$inline ? 'inline-flex' : 'block'};
+    margin-bottom: ${$marginBottom ?? theme.spacing.xxsmall};
+    gap: ${theme.spacing.xxxsmall};
+    align-items: center;
+  `}
+`;
+
+const InfoPopoverTrigger = styled(Button)`
+  color: ${({ theme }) => theme.color.surface.bold};
+`;
+
+type LabelProps = RadixLabel.LabelProps & {
+  bold?: boolean;
+  inline?: boolean;
+  marginBottom?: string | number;
+  tooltipText?: string;
+};
+
+const Label: React.FC<LabelProps> = ({
+  bold,
+  className,
+  children,
+  inline,
+  marginBottom,
+  asChild,
+  htmlFor,
+  tooltipText,
+}) => {
+  return (
+    <StyledLabel
+      $bold={bold}
+      $inline={Boolean(inline || tooltipText)}
+      $marginBottom={inline ? '0px' : marginBottom}
+      className={className}
+      asChild={asChild}
+      htmlFor={htmlFor}
+    >
+      {typeof children === 'string' ? textParser(children) : children}
+      {tooltipText && (
+        <InfoPopover
+          trigger={
+            <InfoPopoverTrigger
+              variation={ButtonVariations.Icon}
+              size={ButtonSizes.Small}
+            >
+              <QuestionIcon label="questionIcon" />
+            </InfoPopoverTrigger>
+          }
+          text={tooltipText}
+        />
+      )}
+    </StyledLabel>
+  );
+};
+
+export default Label;

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Link from './Link';
+
+export default {
+  component: Link,
+  title: 'Components/Link',
+};
+
+export const Default = args => <Link {...args}>Blah Blah</Link>;
+
+Default.args = {
+  href: 'www.little-world.com',
+};

package/src/components/Link/Link.test.tsx

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import React from 'react';
+
+import { render, renderWithUser, screen } from '../../testUtils';
+import Link from './Link';
+
+export const MOCK_TEXT = 'Great content';
+export const MOCK_SLUG = '/home';
+
+test('Link renders correctly when "href" provided', () => {
+  render(<Link href={MOCK_SLUG}>{MOCK_TEXT}</Link>);
+  const link = screen.getByRole('link');
+  expect(link.textContent).toEqual(MOCK_TEXT);
+  expect(link).toHaveAttribute('href', MOCK_SLUG);
+});
+
+test('Link on click should call function', async () => {
+  const onClick = jest.fn();
+  const { user } = renderWithUser(
+    <Link href={MOCK_SLUG} onClick={onClick}>
+      {MOCK_TEXT}
+    </Link>,
+  );
+  const link = screen.getByRole('link');
+  await user.click(link);
+  expect(onClick).toHaveBeenCalled();
+});

package/src/components/Link/Link.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+import { LinkProps as RouterLinkProps } from 'react-router-dom';
+
+import {
+  LinkBaseProps,
+  TextTypes,
+} from '@a-little-world/little-world-design-system-core';
+import { Anchor, AnchorText, RouterLink } from './styles';
+
+export type LinkProps = Omit<RouterLinkProps, 'to'> & LinkBaseProps;
+
+const Variants = {
+  href: Anchor,
+  to: RouterLink,
+};
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      active,
+      bold,
+      buttonAppearance,
+      buttonSize,
+      children,
+      className,
+      href,
+      onClick,
+      state,
+      style,
+      target,
+      to,
+      textType,
+      textDecoration = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const Component = Variants[href ? 'href' : 'to'] as React.ElementType;
+
+    return (
+      <Component
+        {...(href ? { href } : { to })}
+        className={className}
+        ref={ref}
+        $active={active}
+        onClick={onClick}
+        $buttonAppearance={buttonAppearance}
+        $size={buttonSize}
+        state={state}
+        style={style}
+        target={target}
+        $textDecoration={textDecoration}
+        {...props}
+      >
+        <AnchorText
+          as="span"
+          $type={textType || TextTypes.Body5}
+          $bold={Boolean(bold)}
+          $center={false}
+        >
+          {children}
+        </AnchorText>
+      </Component>
+    );
+  },
+);
+
+export default Link;

package/src/components/Link/styles.tsx

@@ -0,0 +1,86 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+import { ButtonAppearance, ButtonSizes } from '../Button/Button';
+import { PrimaryButtonCss, SecondaryButtonCss } from '../Button/styles';
+import { StyledElement } from '../Text/styles';
+
+export const LINK_HOVER_CSS = css`
+  transition: all 0.3s ease-in-out;
+  background: transparent;
+
+  // underline hover effect
+  &::before {
+    content: '';
+    background: currentColor;
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    width: 0;
+    height: 1px;
+    transition: all 0.3s ease-in-out;
+  }
+`;
+
+const LINK_CSS = css<{
+  $color?: string;
+  $buttonAppearance?: ButtonAppearance;
+  $textDecoration: boolean;
+}>`
+  position: relative;
+  display: inline-flex;
+  text-decoration: none;
+  border: none;
+
+  > span {
+    color: currentColor;
+  }
+
+  ${({ theme, $buttonAppearance, $color, $textDecoration }) =>
+    $buttonAppearance
+      ? css`
+          ${$buttonAppearance === ButtonAppearance.Primary
+            ? PrimaryButtonCss
+            : SecondaryButtonCss}
+          box-sizing: border-box;
+          align-items: center;
+          justify-content: center;
+        `
+      : css`
+          color: ${$color || theme.color.text.link};
+
+          ${$textDecoration && LINK_HOVER_CSS}
+
+          &:hover {
+            cursor: pointer;
+            background-position: 0;
+
+            &::before {
+              width: 100%;
+            }
+          }
+        `}
+`;
+
+export const RouterLink = styled(Link)<{
+  $active?: boolean;
+  $color?: string;
+  $buttonAppearance?: ButtonAppearance;
+  $size?: keyof typeof ButtonSizes;
+  $textDecoration: boolean;
+}>`
+  ${LINK_CSS}
+`;
+
+export const Anchor = styled.a<{
+  $active?: boolean;
+  $color?: string;
+  $buttonAppearance?: ButtonAppearance;
+  $size?: keyof typeof ButtonSizes;
+  $textDecoration: boolean;
+}>`
+  ${LINK_CSS}
+`;
+
+export const AnchorText = styled(StyledElement)``;

package/src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Loading, { LoadingSizes, LoadingType } from './Loading';
+
+export default {
+  component: Loading,
+  title: 'Components/Loading',
+};
+
+export const Default = args => (
+  <div>
+    <div>Love</div>
+    <Loading {...args} />
+    <div>Love</div>
+  </div>
+);
+
+Default.args = {
+  href: 'www.little-world.com',
+};
+
+export const Logo = args => (
+  <div>
+    <Loading {...args} type={LoadingType.Logo} size={LoadingSizes.XXLarge} />
+  </div>
+);

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  LoadingBaseProps,
+  LoadingSizes,
+  LoadingType,
+} from '@a-little-world/little-world-design-system-core';
+
+import { LoadingContainer, LoadingElement, LogoContainer } from './styles';
+import LoadingLogo from './LoadingLogo';
+
+// Re-export enum for easy access
+export { LoadingSizes, LoadingType };
+
+export const LOADING_RING_ID = 'loadingRing';
+export const LOADING_LOGO_ID = 'loadingLogo';
+
+export interface LoadingProps extends LoadingBaseProps {
+  className?: string;
+}
+
+const Loading: React.FC<LoadingProps> = ({
+  align,
+  className,
+  color,
+  inline = false,
+  size = LoadingSizes.Small,
+  type = LoadingType.Ring,
+}) => {
+  if (type === LoadingType.Logo) {
+    return (
+      <LoadingContainer
+        className={className}
+        $align={align}
+        $color={color}
+        $inline={inline}
+        $size={size}
+        $type={type}
+        data-testid={LOADING_LOGO_ID}
+      >
+        <LogoContainer $size={size}>
+          <LoadingLogo size={size} />
+        </LogoContainer>
+      </LoadingContainer>
+    );
+  }
+
+  return (
+    <LoadingContainer
+      className={className}
+      $align={align}
+      $color={color}
+      $inline={inline}
+      $size={size}
+      $type={type}
+      data-testid={LOADING_RING_ID}
+    >
+      <LoadingElement $color={color} $size={size} />
+      <LoadingElement $color={color} $size={size} />
+      <LoadingElement $color={color} $size={size} />
+      <LoadingElement $color={color} $size={size} />
+    </LoadingContainer>
+  );
+};
+
+export default Loading;

package/src/components/Loading/LoadingLogo.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+
+import {
+  LoadingDimensions,
+  LoadingSizes,
+} from '@a-little-world/little-world-design-system-core';
+
+export interface LoadingLogoProps {
+  size?: LoadingSizes;
+  label?: string;
+}
+
+const LoadingLogo: React.FC<LoadingLogoProps> = ({
+  size = LoadingSizes.Small,
+  label = 'Loading logo',
+}) => {
+  const dimension = LoadingDimensions[size];
+
+  return (
+    <svg
+      aria-label={label}
+      role="img"
+      fill="none"
+      focusable={false}
+      width={dimension}
+      height={dimension}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-0.01 0 100.38 66.86"
+    >
+      <defs>
+        {/* Animated orange gradient – opacity wave left → right → left */}
+        <linearGradient
+          id="loadingOrangeGradient"
+          y1="35.21"
+          x2="80"
+          y2="35.21"
+          gradientUnits="userSpaceOnUse"
+        >
+          {/* Left edge – start already faint */}
+          <stop offset="0" stopColor="#d85509" stopOpacity="0.25">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+
+          {/* Left/middle – start already faint */}
+          <stop offset="0.14" stopColor="#df6510" stopOpacity="0.25">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              begin="0.2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+
+          {/* Central overlap – start already faint */}
+          <stop offset="0.49" stopColor="#ed861f" stopOpacity="0.25">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              begin="0.4s"
+              repeatCount="indefinite"
+            />
+          </stop>
+
+          {/* Right side – start already faint */}
+          <stop offset="0.67" stopColor="#f39325" stopOpacity="0.25">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              begin="0.6s"
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+
+        {/* Animated blue gradient – same phased opacity wave */}
+        <linearGradient
+          id="loadingBlueGradient"
+          x1="20.41"
+          y1="31.58"
+          x2="100.41"
+          y2="31.58"
+          gradientUnits="userSpaceOnUse"
+        >
+          {/* Left blue */}
+          <stop offset="0.18" stopColor="#36a9e1" stopOpacity="0.4">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+
+          {/* Central blue */}
+          <stop offset="0.56" stopColor="#1f8bcc" stopOpacity="0.4">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              begin="0.2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+
+          {/* Right blue */}
+          <stop offset="1" stopColor="#0063af" stopOpacity="0.4">
+            <animate
+              attributeName="stop-opacity"
+              values="0.25;1;0.25"
+              dur="2s"
+              begin="0.4s"
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+      </defs>
+
+      {/* Blue shape */}
+      <path
+        fill="url(#loadingBlueGradient)"
+        d="M66.69,8.56H50.2a24.68,24.68,0,0,1,9.39,1.85c-.33.32-.65.65-1,1a1.38,1.38,0,0,0-.29,1.72c.17.35.38.68.57,1a8.33,8.33,0,0,0,1.66,1.94A1.61,1.61,0,0,1,61,17.68c-.09.36.12.71-.08,1,0,.06,0,.22.1.33.4.82.74,1,1.65.75a7.1,7.1,0,0,1,2.47-.17,1.76,1.76,0,0,1,1.56,1.05c.1.23.17.46.27.68a1.28,1.28,0,0,0,1.43.9,3,3,0,0,0,2.08-1.09c.25-.31.49-.64.73-1a24.69,24.69,0,0,1,2.5,21,2.7,2.7,0,0,0-.93-.46,1.74,1.74,0,0,1-1-2.71c.06-.1.14-.19.2-.3A1.19,1.19,0,0,0,72,36.37a6.42,6.42,0,0,0-.38-.53,1.24,1.24,0,0,0-2-.17A5.79,5.79,0,0,1,67.35,37c-.93.27-1.87.54-2.81.78a3.77,3.77,0,0,0-1.5.74,1.6,1.6,0,0,1-1.28.44,14.53,14.53,0,0,0-2.09-.23,3.28,3.28,0,0,0-3.29,1.45,2.3,2.3,0,0,1-1.84,1.15l-.22,0a1.23,1.23,0,0,0-.94,1.09,2.67,2.67,0,0,0,1.34,2.8,9.66,9.66,0,0,1,2.51,2.12,4.25,4.25,0,0,1,1.15,1.69c.33,1.14.28,1.77-.62,2.29a10.91,10.91,0,0,0-1.54,1.91A3.1,3.1,0,0,0,56,55.63c.16.58.28,1.17.4,1.75a24.84,24.84,0,0,1-6.2.79H29.8a24.81,24.81,0,1,1,0-49.61h3.92a29.6,29.6,0,0,1,16.48-5H29.8A29.77,29.77,0,0,0,6.94,52.45L4.83,66.86,15,59.22A29.61,29.61,0,0,0,29.8,63.16H50.2A29.79,29.79,0,0,0,66.69,8.56Z"
+      />
+
+      {/* Orange shape */}
+      <path
+        fill="url(#loadingOrangeGradient)"
+        d="M91.65,12.29,93.45,0,84.26,6.89A29.57,29.57,0,0,0,70.61,3.57H50.2a29.79,29.79,0,0,0-16.48,54.6H50.2a24.79,24.79,0,0,1-23-34.09,2.36,2.36,0,0,0,.59.24,8,8,0,0,1,1,.33c0,.1,0,.13,0,.15a.87.87,0,0,0,.32,1.12,1.43,1.43,0,0,1,.31,2,3.33,3.33,0,0,1-.43.67,4.31,4.31,0,0,0-1,3.61,6.84,6.84,0,0,0,.34,1.42A2.43,2.43,0,0,0,29.59,35a2.32,2.32,0,0,0,2.1.06,3.41,3.41,0,0,1,.76-.26,1.15,1.15,0,0,1,1.41.62c.28.48.56,1,.83,1.46a20.21,20.21,0,0,0,2.55,3.91,2.13,2.13,0,0,1,.49,1.33,1.67,1.67,0,0,1-.56,1.14,13,13,0,0,0-1.77,2.23,1.35,1.35,0,0,0,0,1.58c.35.47.8.57,1.52.36A8.92,8.92,0,0,1,38,47.14a12.34,12.34,0,0,0,2.8-.82,3.68,3.68,0,0,0,2.33-2.56,9.66,9.66,0,0,0,.21-2.84c-.06-1-.09-2.09-.11-3.14a.81.81,0,0,1,.22-.52,7.71,7.71,0,0,1,1.26-1.1,6.71,6.71,0,0,0,1.38-1A1.51,1.51,0,0,0,46.61,34c0-.39,0-.78-.09-1.16-.07-.81-.16-1.61-.2-2.41a2.34,2.34,0,0,1,1.31-2.48,1,1,0,0,0,.61-1.12c-.15-1-.28-2-.49-3a14.88,14.88,0,0,1-.38-3,4.85,4.85,0,0,0-.07-.55h-.83c-.62,0-1.23,0-1.84,0-.4,0-.63-.35-.44-.63a3.46,3.46,0,0,0,.4-1.89,1,1,0,0,0-.81-1c-.61,0-1.22,0-1.83.05a8,8,0,0,1-1.09.08,1.47,1.47,0,0,1-.79-.3,6.3,6.3,0,0,1-1.86-2.58,13.63,13.63,0,0,1-.53-1.82s0-.05,0-.09A24.64,24.64,0,0,1,50.2,8.56H70.61a24.81,24.81,0,0,1,0,49.61H66.69a29.61,29.61,0,0,1-16.49,5H70.61a29.78,29.78,0,0,0,21-50.87Z"
+      />
+    </svg>
+  );
+};
+
+export default LoadingLogo;