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

package/src/components/Popover/styles.tsx

@@ -0,0 +1,109 @@
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  Root,
+} from '@radix-ui/react-popover';
+import styled, { css } from 'styled-components';
+
+import {
+  slideDownAndFade,
+  slideLeftAndFade,
+  slideRightAndFade,
+  slideUpAndFade,
+} from '../../utils/animations';
+import { PopoverSizes } from './Popover';
+
+export const PopoverRoot = styled(Root)``;
+
+export const POPOVER_CONTENT_CSS = css`
+  border-radius: ${({ theme }) => theme.radius.small};
+  padding: ${({ theme }) => theme.spacing.small};
+  font-size: 16px;
+  line-height: 1.5;
+  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;
+  width: max-content;
+  max-width: 360px;
+
+  &[data-state='delayed-open'][data-side='top'] {
+    animation-name: ${slideDownAndFade};
+  }
+  &[data-state='delayed-open'][data-side='right'] {
+    animation-name: ${slideLeftAndFade};
+  }
+  &[data-state='delayed-open'][data-side='bottom'] {
+    animation-name: ${slideUpAndFade};
+  }
+  &[data-state='delayed-open'][data-side='left'] {
+    animation-name: ${slideRightAndFade};
+  }
+`;
+
+export const StyledPopoverContent = styled(PopoverContent)<{
+  $asTooltip?: boolean;
+  $extraPaddingTop: boolean;
+  $width: PopoverSizes;
+}>`
+  ${POPOVER_CONTENT_CSS}
+
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+
+  ${({ $width }) =>
+    $width &&
+    `
+      width: ${$width};
+    `}
+
+  ${({ $extraPaddingTop, theme }) =>
+    $extraPaddingTop &&
+    `
+    padding-top: ${theme.spacing.medium};
+  `}
+
+  ${({ $asTooltip, theme }) => css`
+    background-color: ${$asTooltip
+      ? theme.color.surface.bold
+      : theme.color.surface.elevated};
+    color: ${$asTooltip ? theme.color.text.reversed : theme.color.text.primary};
+    padding-right: ${$asTooltip ? theme.spacing.medium : theme.spacing.small};
+  `}
+    
+
+  &[data-state='open'][data-side='top'] {
+    animation-name: ${slideDownAndFade};
+  }
+  &[data-state='open'][data-side='right'] {
+    animation-name: ${slideLeftAndFade};
+  }
+  &[data-state='open'][data-side='bottom'] {
+    animation-name: ${slideUpAndFade};
+  }
+  &[data-state='open'][data-side='left'] {
+    animation-name: ${slideRightAndFade};
+  }
+`;
+
+export const StyledPopoverClose = styled(PopoverClose)<{
+  $asTooltip?: boolean;
+}>`
+  position: absolute;
+  top: ${({ theme }) => theme.spacing.xsmall};
+  right: ${({ theme }) => theme.spacing.xsmall};
+  color: ${({ $asTooltip, theme }) =>
+    $asTooltip ? theme.color.text.reversed : theme.color.text.primary};
+`;
+
+export const StyledPopoverArrow = styled(PopoverArrow)<{
+  $asTooltip?: boolean;
+}>`
+  fill: ${({ $asTooltip, theme }) =>
+    $asTooltip ? theme.color.surface.bold : theme.color.surface.elevated};
+`;

package/src/components/ProgressBar/ProgressBar.stories.tsx

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

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,76 @@
+import * as Progress from '@radix-ui/react-progress';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+
+const ProgressRoot = styled(Progress.Root)`
+  position: relative;
+  overflow: hidden;
+  border-radius: 99999px;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  width: 300px;
+  height: 8px;
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+`;
+
+const ProgressIndicator = styled(Progress.Indicator)`
+  background-color: ${({ theme }) => theme.color.surface.indicator};
+  width: 100%;
+  height: 100%;
+  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
+`;
+
+const ProgressBarWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.small};
+  font-family: 'Work Sans';
+`;
+
+type ProgressBarProps = {
+  className: string;
+  max: number;
+  value: number;
+};
+
+const calculateProgress = (max: number, value: number) => {
+  return (value / max) * 100;
+};
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  className,
+  max,
+  value = 0,
+}) => {
+  const [progress, setProgress] = useState(calculateProgress(max, value));
+
+  useEffect(() => {
+    setProgress(calculateProgress(max, value));
+  }, [max, value]);
+
+  return (
+    <ProgressBarWrapper className={className}>
+      <Text id="progressBarIndicator" tag="span" type={TextTypes.Body6}>
+        {value}/{max}
+      </Text>
+      <ProgressRoot
+        aria-labelledby="progressBarIndicator"
+        value={value}
+        max={max}
+      >
+        <ProgressIndicator
+          className="ProgressIndicator"
+          style={{ transform: `translateX(-${100 - progress}%)` }}
+        />
+      </ProgressRoot>
+    </ProgressBarWrapper>
+  );
+};
+
+export default ProgressBar;

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { RadioGroupVariations } from '@a-little-world/little-world-design-system-core';
+import RadioGroup from './RadioGroup';
+
+export default {
+  component: RadioGroup,
+  title: 'Components/RadioGroup',
+};
+
+export const Default = args => {
+  const items = [
+    { value: 'love', id: 'love', label: 'Love' },
+    { value: 'dreams', id: 'dreams', label: 'Dreams' },
+    { value: 'hope', id: 'hope', label: 'Hope' },
+  ];
+
+  return (
+    <RadioGroup items={items} {...args}>
+      Blah Blah
+    </RadioGroup>
+  );
+};
+
+export const Pill = args => {
+  const [value, setValue] = useState('love');
+  const items = [
+    { value: 'love', id: 'love', label: 'Love' },
+    { value: 'dreams', id: 'dreams', label: 'Dreams' },
+    { value: 'hope', id: 'hope', label: 'Hope' },
+  ];
+
+  return (
+    <RadioGroup
+      items={items}
+      type={RadioGroupVariations.Pill}
+      value={value}
+      onValueChange={setValue}
+      label="Select an option"
+      {...args}
+    />
+  );
+};

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,91 @@
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import React from 'react';
+
+import {
+  RadioGroupVariations,
+  RadioGroupBaseProps,
+} from '@a-little-world/little-world-design-system-core';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import {
+  ItemContainer,
+  PillItem,
+  PillRoot,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupRoot,
+  RadioGroupWrapper,
+} from './styles';
+
+type Props = {
+  error?: string;
+  label?: string;
+  labelTooltip?: string;
+  items: Array<{ id: string; label?: string; value: string }>;
+  inputRef: React.RefObject<HTMLInputElement>;
+} & RadixRadioGroup.RadioGroupProps &
+  RadioGroupBaseProps;
+
+const RadioGroup: React.FC<Props> = ({
+  error,
+  items,
+  label,
+  labelTooltip,
+  inputRef,
+  type = RadioGroupVariations.Classic,
+  value,
+  ...rest
+}: Props) => {
+  const isPill = type === RadioGroupVariations.Pill;
+
+  return (
+    <RadioGroupWrapper>
+      {label && (
+        <Label bold htmlFor={label} tooltipText={labelTooltip}>
+          {label}
+        </Label>
+      )}
+      {isPill ? (
+        <>
+          <PillRoot ref={inputRef} value={value} name={label} {...rest}>
+            {items?.map(item => (
+              <PillItem
+                key={item.id}
+                value={item.value}
+                id={item.id}
+                $hasError={Boolean(error)}
+              >
+                {item.label}
+              </PillItem>
+            ))}
+          </PillRoot>
+          <InputError visible={Boolean(error)} textAlign="left">
+            {error}
+          </InputError>
+        </>
+      ) : (
+        <RadioGroupRoot ref={inputRef} value={value} name={label} {...rest}>
+          {items?.map(item => (
+            <ItemContainer key={item.id}>
+              <RadioGroupItem
+                value={item.value}
+                id={item.id}
+                $hasError={Boolean(error)}
+              >
+                <RadioGroupIndicator />
+              </RadioGroupItem>
+              {item.label && (
+                <Label htmlFor={item.id} inline>
+                  {item.label}
+                </Label>
+              )}
+            </ItemContainer>
+          ))}
+          <InputError visible={Boolean(error)}>{error}</InputError>
+        </RadioGroupRoot>
+      )}
+    </RadioGroupWrapper>
+  );
+};
+
+export default RadioGroup;

package/src/components/RadioGroup/styles.tsx

@@ -0,0 +1,100 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import styled, { css } from 'styled-components';
+
+const ITEM_WIDTH = '13px';
+
+export const RadioGroupWrapper = styled.div``;
+
+export const RadioGroupRoot = styled(RadioGroup.Root)`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: flex-start;
+  width: 100%;
+`;
+
+export const PillRoot = styled(RadioGroup.Root)`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: center;
+  width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing.xxxsmall};
+`;
+
+export const PillItem = styled(RadioGroup.Item)<{ $hasError: boolean }>`
+  all: unset;
+  font-family: 'Signika Negative';
+  font-weight: 600;
+  background: ${({ theme }) => theme.color.surface.primary};
+  border-radius: ${({ theme }) => theme.radius.small};
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.03);
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  padding: ${({ theme }) => `${theme.spacing.xxsmall} ${theme.spacing.xsmall}`};
+  min-width: 60px;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: filter 0.2s ease-in-out;
+
+  ${({ theme }) => css`
+    @media (min-width: ${theme.breakpoints.small}) {
+      padding: ${theme.spacing.xsmall} ${theme.spacing.small};
+      min-width: 80px;
+    }
+  `}
+
+  &[data-state='checked'] {
+    border-color: ${({ $hasError, theme }) =>
+      $hasError ? theme.color.border.error : theme.color.border.selected};
+  }
+
+  &:hover {
+    filter: brightness(0.97);
+    transition: filter 0.2s ease-in-out;
+  }
+`;
+
+export const RadioGroupItem = styled(RadioGroup.Item)<{ $hasError: boolean }>`
+  all: unset;
+  background: ${({ theme }) => theme.color.surface.primary};
+  box-sizing: border-box;
+  border: 1px solid ${({ theme }) => theme.color.surface.contrast};
+  width: ${ITEM_WIDTH};
+  height: ${ITEM_WIDTH};
+  border-radius: 100%;
+  margin-right: ${({ theme }) => theme.spacing.xxsmall};
+
+  &:focus {
+    box-shadow: 0 0 0 2px
+      ${({ $hasError, theme }) =>
+        $hasError ? theme.color.border.error : '#eeb612'};
+  }
+`;
+
+export const ItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const RadioGroupIndicator = styled(RadioGroup.Indicator)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.color.text.primary};
+  }
+`;

package/src/components/Separator/Separator.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import Separator from './Separator';
+
+export default {
+  component: Separator,
+  title: 'Components/Separator',
+};
+
+export const Default = args => (
+  <div>
+    <Text tag="h3" type={TextTypes.Heading4}>
+      Little World
+    </Text>
+    <div className="Text">Let's separate our content.</div>
+    <Separator />
+    <div style={{ display: 'flex', height: 20, alignItems: 'center' }}>
+      <div className="Text">Blog</div>
+      <Separator orientation="vertical" />
+      <div className="Text">Docs</div>
+      <Separator orientation="vertical" />
+      <div className="Text">Source</div>
+    </div>
+  </div>
+);

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,52 @@
+import * as RadixSeparator from '@radix-ui/react-separator';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledSeparator = styled(RadixSeparator.Root)<{
+  $background?: string;
+  $spacing?: string;
+}>`
+  margin: ${({ theme, $spacing }) => $spacing || theme.spacing.small} 0;
+  background: ${({ theme, $background }) =>
+    $background || theme.color.border.contrast};
+
+  &[data-orientation='vertical'] {
+    height: 100%;
+    width: 1px;
+    margin: 0 ${({ theme, $spacing }) => $spacing || theme.spacing.medium};
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 1px;
+    width: 100%;
+    margin: ${({ theme, $spacing }) => $spacing || theme.spacing.medium} 0;
+  }
+`;
+
+export interface SeparatorProps {
+  background?: string;
+  className?: string;
+  color?: string;
+  orientation?: 'horizontal' | 'vertical';
+  size?: 'small' | 'medium' | 'large';
+  spacing?: string;
+}
+
+const Separator = ({
+  background,
+  className,
+  orientation = 'horizontal',
+  spacing,
+}: SeparatorProps) => {
+  return (
+    <StyledSeparator
+      className={className}
+      orientation={orientation}
+      decorative
+      $background={background}
+      $spacing={spacing}
+    />
+  );
+};
+
+export default Separator;

package/src/components/Separator/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/Slider/Slider.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Slider from './Slider';
+
+export default {
+  component: Slider,
+  title: 'Components/Slider',
+  argTypes: {
+    step: { control: 'number' },
+  },
+};
+
+export const Default = args => {
+  return <Slider {...args} />;
+};
+
+Default.args = {
+  ariaLabel: 'German Level Slider',
+  label: 'How good is your German?',
+  steps: [
+    'No chance',
+    'I introduce myself',
+    'I can order a coffee',
+    'I talk about my day',
+    'I can have a debate',
+    'I am a pro',
+  ],
+};

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,61 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import React from 'react';
+
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import {
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderWrapper,
+  Steps,
+} from './styles';
+
+type SliderProps = {
+  ariaLabel: string;
+  error?: string;
+  label?: string;
+  labelTooltip?: string;
+  inputRef: React.RefObject<HTMLInputElement>;
+  steps: string[];
+} & RadixSlider.SliderProps;
+
+const Slider = ({
+  ariaLabel,
+  defaultValue,
+  inputRef,
+  label,
+  labelTooltip,
+  onValueChange,
+  value,
+  steps,
+}: SliderProps) => (
+  <SliderWrapper>
+    {label && (
+      <Label bold htmlFor={label} tooltipText={labelTooltip}>
+        {label}
+      </Label>
+    )}
+    <SliderRoot
+      aria-label={ariaLabel}
+      ref={inputRef}
+      defaultValue={defaultValue}
+      max={steps.length - 1}
+      onValueChange={onValueChange}
+      value={value || defaultValue}
+    >
+      <SliderTrack>
+        <SliderRange />
+      </SliderTrack>
+      <SliderThumb aria-label={ariaLabel} />
+    </SliderRoot>
+    <Steps>
+      {steps.map(step => (
+        <Text key={step}>{step}</Text>
+      ))}
+    </Steps>
+  </SliderWrapper>
+);
+
+export default Slider;