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

package/src/storybook/radius.mdx

@@ -0,0 +1,48 @@
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../theme';
+
+import RadiusSection from './RadiusDocumentation';
+
+<Meta title="Foundations/Border Radius" />
+
+<CustomThemeProvider>
+  # Border Radius System
+
+  The border radius system provides consistent border radius values across the Little World Design System. These values are used to create rounded corners on various UI elements, from subtle to dramatic effects.
+
+  ## Border Radius Tokens
+
+  <Unstyled>
+    <RadiusSection />
+  </Unstyled>
+
+  ## Usage Guidelines
+
+  - **xxxsmall (4px)**: Use for subtle rounding on small elements like buttons
+  - **xxsmall (8px)**: Use for standard rounding on cards and containers
+  - **xsmall (12px)**: Use for comfortable rounding on medium-sized elements
+  - **small (16px)**: Use for noticeable rounding on larger elements
+  - **medium (20px)**: Use for prominent rounding on major UI elements
+  - **large (24px)**: Use for generous rounding on hero sections
+  - **xlarge (32px)**: Use for substantial rounding on large containers
+  - **xxlarge (40px)**: Use for maximum rounding on very large elements
+  - **massive (100px)**: Use for dramatic rounding on special elements
+  - **half (50%)**: Use for creating circular elements
+  - **full (100%)**: Use for creating fully rounded elements
+
+  ## Implementation
+
+  ```tsx
+  // Use radius tokens in styled-components
+  const Card = styled.div`
+    border-radius: ${({ theme }) => theme.radius.medium};
+    padding: ${({ theme }) => theme.spacing.medium};
+  `;
+
+  const Circle = styled.div`
+    border-radius: ${({ theme }) => theme.radius.half};
+    width: 100px;
+    height: 100px;
+  `;
+  ```
+</CustomThemeProvider> 

package/src/storybook/spacing.mdx

@@ -0,0 +1,45 @@
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../theme';
+
+import SpacingSection from './SpacingDocumentation';
+
+<Meta title="Foundations/Spacing" />
+
+<CustomThemeProvider>
+  # Spacing System
+
+  The spacing system provides consistent spacing values across the Little World Design System. All spacing values are based on an 8px base unit and follow a systematic scale.
+
+  ## Spacing Scale
+
+  Our spacing system uses a base unit of 8px, with values calculated as multiples of this base unit. This ensures consistency and makes it easy to maintain proportional spacing throughout the application.
+
+  ## Spacing Tokens
+
+  <Unstyled>
+    <SpacingSection />
+  </Unstyled>
+
+  ## Usage Guidelines
+
+  - **xxxxsmall (2px)**: Use for minimal spacing, such as between closely related elements
+  - **xxxsmall (4px)**: Use for tight spacing in compact layouts
+  - **xxsmall (8px)**: Use for standard spacing between related elements
+  - **xsmall (12px)**: Use for comfortable spacing in most layouts
+  - **small (16px)**: Use for standard spacing between sections
+  - **medium (24px)**: Use for breathing room between major sections
+  - **large (32px)**: Use for generous spacing between page sections
+  - **xlarge (40px)**: Use for substantial spacing in spacious layouts
+  - **xxlarge (64px)**: Use for maximum spacing in hero sections
+  - **massive (120px)**: Use for dramatic spacing in large layouts
+
+  ## Implementation
+
+  ```tsx
+  // Use spacing tokens in styled-components
+  const Container = styled.div`
+    padding: ${({ theme }) => theme.spacing.medium};
+    margin-bottom: ${({ theme }) => theme.spacing.large};
+  `;
+  ```
+</CustomThemeProvider> 

package/src/testUtils.tsx

@@ -0,0 +1,49 @@
+// @ts-nocheck
+import React, { ReactNode } from "react";
+import "@testing-library/jest-dom/extend-expect";
+import {
+  render as defaultRender,
+  RenderOptions,
+  RenderResult,
+} from "@testing-library/react";
+import userEvent, { UserEvent } from "@testing-library/user-event";
+import { ThemeProvider } from "styled-components";
+import { themes } from "./theme";
+
+interface CustomRenderOptions extends Omit<RenderOptions, "wrapper"> {
+  wrapper?: React.ComponentType<{ children: ReactNode }>;
+  router?: unknown;
+  mocks?: unknown[];
+}
+
+function render(
+  ui: ReactNode,
+  {
+    wrapper: CustomWrapper,
+    router,
+    mocks = [],
+    ...options
+  }: CustomRenderOptions = {}
+): RenderResult {
+  const Wrapper =
+    CustomWrapper ||
+    (({ children }: { children: ReactNode }) => (
+      <ThemeProvider theme={themes.light}>{children}</ThemeProvider>
+    ));
+
+  return defaultRender(ui, { wrapper: Wrapper, ...options });
+}
+
+function renderWithUser(
+  ui: ReactNode,
+  options?: CustomRenderOptions
+): RenderResult & { user: UserEvent } {
+  return {
+    user: userEvent.setup(),
+    ...render(ui, options),
+  };
+}
+
+// Re-export everything
+export * from "@testing-library/react";
+export { render, renderWithUser };

package/src/theme/index.tsx

@@ -0,0 +1,98 @@
+import React, {
+  ReactNode,
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { DefaultTheme, ThemeProvider } from 'styled-components';
+
+import {
+  ThemeVariants,
+  ThemeContextType,
+  defaultThemeVariant,
+  tokensPixelated,
+} from '@a-little-world/little-world-design-system-core';
+
+export const lightTheme: DefaultTheme = {
+  ...tokensPixelated,
+  color: tokensPixelated.color.theme.light,
+};
+
+export const darkTheme: DefaultTheme = {
+  ...tokensPixelated,
+  color: tokensPixelated.color.theme.dark,
+};
+
+export const defaultTheme = lightTheme;
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+} as const;
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  defaultMode?: ThemeVariants;
+  enableDarkMode?: boolean;
+}
+
+export const themeContext = createContext<ThemeContextType>({
+  toggleMode: () => {},
+  setMode: (_mode: ThemeVariants) => {},
+  currentMode: defaultThemeVariant,
+});
+
+const { Provider } = themeContext;
+
+export const CustomThemeProvider = ({
+  children,
+  defaultMode = defaultThemeVariant,
+  enableDarkMode = false,
+}: ThemeProviderProps) => {
+  const [currentMode, setCurrentMode] = useState<ThemeVariants>(defaultMode);
+
+  useEffect(() => {
+    if (enableDarkMode && typeof window !== 'undefined') {
+      const savedTheme = localStorage.getItem('theme') as ThemeVariants;
+      const prefersDark =
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (savedTheme && ['dark', 'light'].includes(savedTheme)) {
+        setCurrentMode(savedTheme);
+      } else if (prefersDark) {
+        setCurrentMode(ThemeVariants.dark);
+      }
+    }
+  }, [enableDarkMode]);
+
+  const toggleMode = useCallback(() => {
+    setCurrentMode((currentMode: ThemeVariants) =>
+      currentMode === ThemeVariants.light
+        ? ThemeVariants.dark
+        : ThemeVariants.light,
+    );
+  }, []);
+
+  const setMode = useCallback((mode: ThemeVariants) => {
+    setCurrentMode(mode);
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      currentMode,
+      toggleMode,
+      setMode,
+    }),
+    [currentMode, toggleMode, setMode],
+  );
+
+  return (
+    <Provider value={contextValue}>
+      <ThemeProvider theme={themes[currentMode] || defaultTheme}>
+        {children}
+      </ThemeProvider>
+    </Provider>
+  );
+};

package/src/utils/animations.ts

@@ -0,0 +1,129 @@
+import { keyframes } from 'styled-components';
+
+export const enterFromRight = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  `;
+
+export const enterFromLeft = keyframes`
+    from {
+        opacity: 0;
+        transform: translateX(-200px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+  `;
+
+export const exitToRight = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  `;
+
+export const exitToLeft = keyframes`
+from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+`;
+
+export const slideUpAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+export const slideRightAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+
+export const slideDownAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+export const slideLeftAndFade = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+
+export const scaleIn = keyframes`
+ from {
+    opacity: 0;
+    transform: rotateX(-30deg) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+ `;
+
+export const scaleOut = keyframes`
+from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+  }
+`;
+
+export const fadeIn = keyframes`
+from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+export const fadeOut = keyframes`
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+`;

package/src/utils/createReactSvg.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import {
+  SvgTransformOptions,
+  ParsedSvg,
+  SvgElement,
+  Gradients,
+  GradientTypes,
+} from '@a-little-world/little-world-design-system-core';
+import IconGradient from '../components/Icon/IconGradient';
+
+// Helper function to generate unique keys
+const generateUniqueKey = (element: SvgElement, index: string | number) => {
+  return `${element.type}-${index}-${Math.random()
+    .toString(36)
+    .substring(2, 11)}`;
+};
+
+// Helper function to safely render children, filtering out null values
+const renderChildren = (
+  children: SvgElement[],
+  options: SvgTransformOptions,
+  parentIndex: string | number,
+) => {
+  return children
+    .map((child, i) => renderSvgElement(child, options, `${parentIndex}-${i}`))
+    .filter(Boolean); // Filter out null elements
+};
+
+// Renders SVG elements recursively
+const renderSvgElement = (
+  element: SvgElement,
+  options: SvgTransformOptions,
+  index: string | number,
+) => {
+  const { gradient, gradientId, color } = options;
+
+  // Get all attributes and override fill for path elements if needed
+  const attrs = { ...element.attributes };
+
+  // Handle color attributes for SVG elements based on the colorAttribute property
+  // If element has color set that isn't #000 - do not override
+  if (element.colorAttribute && element.colorAttribute !== 'none') {
+    if (attrs[element.colorAttribute] === '#000') {
+      attrs[element.colorAttribute] = gradient
+        ? `url(#${gradientId})`
+        : color || 'currentColor';
+    } else {
+      attrs[element.colorAttribute] =
+        attrs[element.colorAttribute] || color || 'currentColor';
+    }
+  }
+
+  // Add unique key attribute
+  const elementKey = generateUniqueKey(element, index);
+
+  switch (element.type) {
+    case 'path':
+      return <path key={elementKey} {...attrs} />;
+    case 'g':
+      return (
+        <g key={elementKey} {...attrs}>
+          {renderChildren(element.children, options, index)}
+        </g>
+      );
+    case 'defs':
+      return (
+        <defs key={elementKey} {...attrs}>
+          {renderChildren(element.children, options, index)}
+        </defs>
+      );
+    case 'linearGradient':
+      return (
+        <linearGradient key={elementKey} {...attrs}>
+          {renderChildren(element.children, options, index)}
+        </linearGradient>
+      );
+    case 'clipPath':
+      return (
+        <clipPath key={elementKey} {...attrs}>
+          {renderChildren(element.children, options, index)}
+        </clipPath>
+      );
+    case 'stop':
+      return <stop key={elementKey} {...attrs} />;
+    case 'circle':
+      return <circle key={elementKey} {...attrs} />;
+    case 'rect':
+      return <rect key={elementKey} {...attrs} />;
+    case 'line':
+      return <line key={elementKey} {...attrs} />;
+    case 'polygon':
+      return <polygon key={elementKey} {...attrs} />;
+    case 'polyline':
+      return <polyline key={elementKey} {...attrs} />;
+    case 'ellipse':
+      return <ellipse key={elementKey} {...attrs} />;
+    default:
+      console.warn(`Unsupported SVG element type: ${element.type}`);
+      return null;
+  }
+};
+
+export const createReactSvg = (
+  svgData: ParsedSvg,
+  options: SvgTransformOptions,
+) => {
+  const {
+    className,
+    width,
+    height,
+    gradient,
+    gradientId,
+    gradientType,
+    label,
+  } = options;
+
+  return (
+    <svg
+      aria-labelledby={label}
+      fill="none"
+      focusable={false}
+      width={width}
+      height={height}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={svgData.viewBox}
+    >
+      {svgData.elements.map((element, index) =>
+        renderSvgElement(element, options, index),
+      )}
+      {gradient && (
+        <IconGradient
+          variation={gradient as Gradients}
+          type={gradientType as GradientTypes}
+          id={gradientId as string}
+        />
+      )}
+    </svg>
+  );
+};

package/src/utils/parser.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../theme';
+
+<Meta title="Foundations/Text Parser" />
+
+<CustomThemeProvider>
+  # Text Parser
+
+  The Little World Text Parser allows for copy to include pre-defined tags that allows the rendered text to contain certain styling or functional elements.
+  The Parser automatically converts html links included in the text into clickable html anchors, unless they are included as part of a pre-defined tag.
+
+  ```
+  https://little-world.com and little-world.com // both will be converted into html anchors
+  ```
+
+  Tags follow the html tag format and must be written as such:
+
+  ```
+  <highlight>This text will be highlighted</highlight>
+  <bold>This text will be bold in the current color</bold>
+  ```
+
+  When using tags that correspond to html elements, attributes for that element can be included in a JSON object within the opening tag:
+
+  ```
+  <a {"href": "little-world"}>this is an anchor</a>
+  <button {"data-cal-link":"www.validlink.com", "data-cal-config":"{ layout: stacked }"}>Click Me</button>
+  ```
+
+  The [Text](?path=/story/components-text--default) component has the text parser baked into it.
+  Therefore it always recommended to wrap all text in the Text Component to benefit from the parser (plus get the correctly styling and types).
+
+  ## Valid Little World tags
+
+  | Tag       | Output                                | Requires       |
+  | --------- | ------------------------------------- | -------------- |
+  | a         | html anchor tag                       | href attribute |
+  | button    | html button element                   |                |
+  | bold      | bold text                             |                |
+  | highlight | html strong tag and "highlight" color | -              |
+</CustomThemeProvider>