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

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,112 @@
+import { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
+import React from 'react';
+
+import { CheckIcon } from '../Icon';
+import InputError from '../InputError/InputError';
+import {
+  CheckboxButtonContainer,
+  CheckboxContainer,
+  CheckboxIndicator,
+  CheckboxRoot,
+  CheckboxWrapper,
+  NonInteractiveCheckbox,
+  StyledLabel,
+} from './styles';
+
+type CheckboxProps = {
+  className?: string;
+  color?: string;
+  error?: string;
+  id?: string;
+  inputRef?: React.RefObject<HTMLButtonElement>;
+  label?: string;
+  readOnly?: boolean;
+  required?: boolean;
+} & RadixCheckboxProps;
+
+export const CheckboxButton: React.FC<CheckboxProps> = ({
+  checked,
+  className,
+  color,
+  error,
+  id,
+  inputRef,
+  label,
+  onCheckedChange,
+  value,
+  ...rest
+}) => (
+  <CheckboxButtonContainer
+    className={className}
+    ref={inputRef}
+    id={id}
+    checked={checked}
+    onCheckedChange={onCheckedChange}
+    value={value}
+    $hasError={Boolean(error)}
+    {...rest}
+  >
+    <NonInteractiveCheckbox $color={color} checked={checked}>
+      {checked && <CheckIcon label="check icon" width={10} />}
+    </NonInteractiveCheckbox>
+    {label && (
+      <StyledLabel htmlFor={id} inline>
+        {label}
+      </StyledLabel>
+    )}
+  </CheckboxButtonContainer>
+);
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked,
+  className,
+  color,
+  error,
+  required = true,
+  id,
+  inputRef,
+  label,
+  onCheckedChange,
+  readOnly,
+  value,
+  ...rest
+}) => {
+  return (
+    <CheckboxWrapper className={className}>
+      <CheckboxContainer>
+        {readOnly ? (
+          <NonInteractiveCheckbox $color={color} checked={checked}>
+            {checked && <CheckIcon label="check icon" width={10} />}
+          </NonInteractiveCheckbox>
+        ) : (
+          <CheckboxRoot
+            ref={inputRef}
+            id={id}
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            value={value}
+            $hasError={Boolean(error)}
+            $color={color}
+            {...rest}
+          >
+            <CheckboxIndicator>
+              <CheckIcon label="check icon" width={10} />
+            </CheckboxIndicator>
+          </CheckboxRoot>
+        )}
+        {label && (
+          <StyledLabel htmlFor={id} inline>
+            {label}
+          </StyledLabel>
+        )}
+      </CheckboxContainer>
+      {required && (
+        <InputError visible={Boolean(error)} textAlign="left">
+          {error}
+        </InputError>
+      )}
+    </CheckboxWrapper>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/styles.tsx

@@ -0,0 +1,96 @@
+import * as Checkbox from '@radix-ui/react-checkbox';
+import styled, { css } from 'styled-components';
+
+import Label from '../Label/Label';
+
+const ITEM_WIDTH = '16px';
+
+export const CheckboxWrapper = styled.div``;
+
+export const CheckboxButtonContainer = styled(Checkbox.Root)<{
+  $hasError?: boolean;
+}>`
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  display: flex;
+  align-items: center;
+  border: 1px solid
+    ${({ theme, checked, $hasError }) =>
+      checked
+        ? $hasError
+          ? theme.color.border.error
+          : theme.color.border.selected
+        : theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  background: ${({ checked, $hasError, theme }) =>
+    checked
+      ? $hasError
+        ? theme.color.surface.error
+        : theme.color.surface.accent
+      : theme.color.surface.secondary};
+
+  label {
+    cursor: pointer;
+  }
+`;
+
+export const CheckboxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin: ${({ theme }) => theme.spacing.xxxxsmall} 0;
+  cursor: pointer;
+`;
+
+const CHECKBOX_STYLES = css<{
+  $hasError?: boolean;
+  $color?: string;
+  checked: Checkbox.CheckboxProps['checked'];
+}>`
+  all: unset;
+  cursor: pointer;
+  background: ${({ theme }) => theme.color.surface.primary};
+  box-sizing: border-box;
+  border: 1px solid ${({ theme }) => theme.color.border.contrast};
+  color: ${({ theme }) => theme.color.text.primary};
+  width: ${ITEM_WIDTH};
+  height: ${ITEM_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: ${({ $hasError, theme }) =>
+    $hasError ? theme.color.border.error : theme.color.border.contrast};
+
+  ${({ $color, checked, theme }) =>
+    $color &&
+    checked &&
+    css`
+      background: ${$color};
+      border-color: ${$color};
+      color: ${theme.color.text.reversed};
+    `}
+`;
+
+export const CheckboxRoot = styled(Checkbox.Root)<{
+  $hasError?: boolean;
+  $color?: string;
+  checked: Checkbox.CheckboxProps['checked'];
+}>`
+  ${CHECKBOX_STYLES}
+`;
+
+export const NonInteractiveCheckbox = styled.div<{
+  $color?: string;
+  checked: Checkbox.CheckboxProps['checked'];
+}>`
+  ${CHECKBOX_STYLES}
+`;
+
+export const CheckboxIndicator = styled(Checkbox.Indicator)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StyledLabel = styled(Label)`
+  margin-left: ${({ theme }) => theme.spacing.xxsmall};
+`;

package/src/components/CheckboxGrid/CheckboxGrid.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import CheckboxGrid from './CheckboxGrid';
+
+export default {
+  component: CheckboxGrid,
+  title: 'Components/CheckboxGrid',
+};
+
+export const Default = args => <CheckboxGrid {...args} />;
+
+const columnHeadingsDummy = [
+  'Uhrzeit',
+  'Monday',
+  'Teusday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
+];
+
+const rowHeadingsDummy = [
+  '8 bis 10 Uhr',
+  '10 bis 12 Uhr',
+  '12 bis 14 Uhr',
+  '14 bis 16 Uhr',
+  '16 bis 18 Uhr',
+  '18 bis 20 Uhr',
+  '20 bis 22 Uhr',
+];
+
+const checkboxesByColumn = JSON.parse(
+  '[[{"name":"8 to 10 a.m.","value":"08_10","key":"mo"},{"name":"10 to 12 p.m.","value":"10_12","key":"mo"},{"name":"12 to 2 p.m.","value":"12_14","key":"mo"},{"name":"2 to 4 p.m.","value":"14_16","key":"mo"},{"name":"4 to 6 p.m.","value":"16_18","key":"mo"},{"name":"6 to 8 p.m.","value":"18_20","key":"mo"},{"name":"8 to 10 p.m.","value":"20_22","key":"mo"}],[{"name":"8 to 10 a.m.","value":"08_10","key":"tu"},{"name":"10 to 12 p.m.","value":"10_12","key":"tu"},{"name":"12 to 2 p.m.","value":"12_14","key":"tu"},{"name":"2 to 4 p.m.","value":"14_16","key":"tu"},{"name":"4 to 6 p.m.","value":"16_18","key":"tu"},{"name":"6 to 8 p.m.","value":"18_20","key":"tu"},{"name":"8 to 10 p.m.","value":"20_22","key":"tu"}],[{"name":"8 to 10 a.m.","value":"08_10","key":"we"},{"name":"10 to 12 p.m.","value":"10_12","key":"we"},{"name":"12 to 2 p.m.","value":"12_14","key":"we"},{"name":"2 to 4 p.m.","value":"14_16","key":"we"},{"name":"4 to 6 p.m.","value":"16_18","key":"we"},{"name":"6 to 8 p.m.","value":"18_20","key":"we"},{"name":"8 to 10 p.m.","value":"20_22","key":"we"}],[{"name":"8 to 10 a.m.","value":"08_10","key":"th"},{"name":"10 to 12 p.m.","value":"10_12","key":"th"},{"name":"12 to 2 p.m.","value":"12_14","key":"th"},{"name":"2 to 4 p.m.","value":"14_16","key":"th"},{"name":"4 to 6 p.m.","value":"16_18","key":"th"},{"name":"6 to 8 p.m.","value":"18_20","key":"th"},{"name":"8 to 10 p.m.","value":"20_22","key":"th"}],[{"name":"8 to 10 a.m.","value":"08_10","key":"fr"},{"name":"10 to 12 p.m.","value":"10_12","key":"fr"},{"name":"12 to 2 p.m.","value":"12_14","key":"fr"},{"name":"2 to 4 p.m.","value":"14_16","key":"fr"},{"name":"4 to 6 p.m.","value":"16_18","key":"fr"},{"name":"6 to 8 p.m.","value":"18_20","key":"fr"},{"name":"8 to 10 p.m.","value":"20_22","key":"fr"}],[{"name":"8 to 10 a.m.","value":"08_10","key":"sa"},{"name":"10 to 12 p.m.","value":"10_12","key":"sa"},{"name":"12 to 2 p.m.","value":"12_14","key":"sa"},{"name":"2 to 4 p.m.","value":"14_16","key":"sa"},{"name":"4 to 6 p.m.","value":"16_18","key":"sa"},{"name":"6 to 8 p.m.","value":"18_20","key":"sa"},{"name":"8 to 10 p.m.","value":"20_22","key":"sa"}],[{"name":"8 to 10 a.m.","value":"08_10","key":"su"},{"name":"10 to 12 p.m.","value":"10_12","key":"su"},{"name":"12 to 2 p.m.","value":"12_14","key":"su"},{"name":"2 to 4 p.m.","value":"14_16","key":"su"},{"name":"4 to 6 p.m.","value":"16_18","key":"su"},{"name":"6 to 8 p.m.","value":"18_20","key":"su"},{"name":"8 to 10 p.m.","value":"20_22","key":"su"}]]',
+);
+
+Default.args = {
+  id: 'multi selector id',
+  onSelection: () => null,
+  columnHeadings: columnHeadingsDummy,
+  rowHeadings: rowHeadingsDummy,
+  checkboxesByColumn,
+  highlightCells: {
+    mo: ['10_12'],
+    sa: ['12_14'],
+    th: ['08_10'],
+    we: ['16_18', '18_20', '20_22'],
+  },
+};

package/src/components/CheckboxGrid/CheckboxGrid.tsx

@@ -0,0 +1,126 @@
+import { CheckedState } from '@radix-ui/react-checkbox';
+import React, { useState } from 'react';
+import { useTheme } from 'styled-components';
+
+import InputError from '../InputError/InputError';
+import Text from '../Text/Text';
+import {
+  BelowGrid,
+  CheckboxGridWrapper,
+  ColumnHeading,
+  Grid,
+  Legend,
+  RowHeading,
+  ScrollableWrapper,
+  Square,
+  StyledCheckbox,
+} from './styles';
+
+type SelectedType = { [x: string]: string[] };
+
+type CheckboxGridProps = {
+  columnHeadings: string[];
+  rowHeadings: string[];
+  highlightCells: SelectedType;
+  checkboxesByColumn: { name: string; value: string; key: string }[][];
+  onSelection: (selected: SelectedType) => void;
+  preSelected?: SelectedType;
+  legendText?: string;
+  error?: string;
+  name: string;
+  readOnly?: boolean;
+};
+
+const CheckboxGrid: React.FC<CheckboxGridProps> = ({
+  columnHeadings,
+  error,
+  highlightCells,
+  legendText,
+  rowHeadings,
+  checkboxesByColumn,
+  preSelected,
+  onSelection,
+  name,
+  readOnly,
+}) => {
+  const theme = useTheme();
+  const [selected, setSelected] = useState<SelectedType>(preSelected || {});
+
+  const onSelect = ({
+    key,
+    state,
+    value,
+  }: {
+    value: string;
+    key: string;
+    state: CheckedState;
+  }) => {
+    const oldValues = selected[key] || [];
+    const newValues = state
+      ? [...oldValues, value]
+      : oldValues.filter(el => el !== value);
+    const newTotalSelection = { ...selected, [key]: newValues };
+
+    setSelected(newTotalSelection);
+    onSelection(newTotalSelection);
+  };
+
+  return (
+    <CheckboxGridWrapper>
+      <Grid
+        $columns={columnHeadings.length}
+        $rows={rowHeadings.length}
+        $hasError={!!error}
+      >
+        <>
+          {/* on mobile, first column is fixed */}
+          <ColumnHeading tag="span" bold index={0}>
+            {columnHeadings[0]}
+          </ColumnHeading>
+          {rowHeadings.map((row, index) => (
+            <RowHeading tag="span" key={row} index={index}>
+              {row}
+            </RowHeading>
+          ))}
+          <ScrollableWrapper>
+            {columnHeadings.slice(1).map((column, index) => (
+              <ColumnHeading key={column} tag="span" bold index={index + 1}>
+                {column}
+              </ColumnHeading>
+            ))}
+            {checkboxesByColumn.map((column, columnIndex) =>
+              column.map(({ value, key }, rowIndex) => {
+                return (
+                  <StyledCheckbox
+                    key={key + value + rowIndex}
+                    checked={selected[key]?.includes(value)}
+                    name={name}
+                    onCheckedChange={state => onSelect({ value, key, state })}
+                    value={value}
+                    color={theme.color.surface.selected}
+                    $row={rowIndex + 2}
+                    $column={columnIndex + 2}
+                    $highlight={!!highlightCells?.[key]?.includes(value)}
+                    readOnly={readOnly}
+                  />
+                );
+              }),
+            )}
+          </ScrollableWrapper>
+        </>
+      </Grid>
+      <BelowGrid>
+        {legendText && highlightCells && (
+          <Legend>
+            <Square />
+            <Text tag="span">=</Text>
+            <Text tag="span">{legendText}</Text>
+          </Legend>
+        )}
+        <InputError visible={Boolean(error)}>{error}</InputError>
+      </BelowGrid>
+    </CheckboxGridWrapper>
+  );
+};
+
+export default CheckboxGrid;

package/src/components/CheckboxGrid/styles.tsx

@@ -0,0 +1,122 @@
+import styled, { css } from 'styled-components';
+
+import Checkbox from '../Checkbox/Checkbox';
+import Text from '../Text/Text';
+
+export const CheckboxGridWrapper = styled.div`
+  width: 100%;
+`;
+
+export const Grid = styled.div<{
+  $columns: number;
+  $rows: number;
+  $hasError: boolean;
+}>`
+  display: grid;
+  width: 100%;
+  row-gap: ${({ theme }) => theme.spacing.xsmall};
+  column-gap: ${({ theme }) => theme.spacing.xxsmall};
+  grid-template-columns: ${({ $columns }) =>
+    `repeat(${$columns}, minmax(max-content, 1fr))`};
+  grid-template-rows: ${({ $rows }) => `repeat(${$rows}, 1fr)`};
+  grid-auto-rows: 27.5px;
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  padding-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  overflow-x: scroll;
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  align-items: center;
+  border-bottom: 1px solid
+    ${({ $hasError, theme }) =>
+      $hasError ? theme.color.border.error : theme.color.surface.primary};
+`;
+
+export const ColumnHeading = styled(Text)<{ index: number }>`
+  grid-column-start: ${({ index }) => index + 1};
+  grid-column-end: ${({ index }) => index + 1};
+  grid-row-start: 1;
+  grid-row-end: 1;
+  text-align: center;
+  max-width: 100%;
+  padding: ${({ theme }) => theme.spacing.xxxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ index }) =>
+    !index &&
+    `
+    position: sticky;
+    left: 0;
+  `}
+`;
+
+export const RowHeading = styled(Text)<{ index: number }>`
+  grid-column-start: 1;
+  grid-column-end: 1;
+  grid-row-start: ${({ index }) => index + 2};
+  grid-row-end: ${({ index }) => index + 2};
+  text-align: center;
+  position: sticky;
+  left: 0;
+  background: ${({ theme }) => theme.color.surface.primary};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const ScrollableWrapper = styled.div`
+  overflow: scroll-x;
+  width: 100%;
+  display: contents;
+`;
+
+export const StyledCheckbox = styled(Checkbox)<{
+  checked: boolean;
+  $row: number;
+  $column: number;
+  $highlight: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  grid-row-start: ${({ $row }) => $row};
+  grid-column-start: ${({ $column }) => $column};
+  height: 100%;
+
+  ${({ checked, theme }) =>
+    checked &&
+    css`
+      border-color: ${theme.color.border.selected};
+    `};
+
+  ${({ $highlight, theme }) =>
+    $highlight &&
+    css`
+      background: ${theme.color.surface.accent};
+    `};
+`;
+
+export const BelowGrid = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Legend = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+export const Square = styled.div`
+  ${({ theme }) => css`
+    width: 20px;
+    height: 16px;
+    background: ${theme.color.surface.accent};
+    border: 1px solid ${theme.color.border.contrast};
+  `};
+`;

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import Dropdown from './Dropdown';
+
+export default {
+  component: Dropdown,
+  title: 'Components/Dropdown',
+};
+
+export const Default = args => <Dropdown {...args} />;
+
+Default.args = {
+  label: 'Demo dropdown',
+  id: 'multi selector id',
+  onValueChange: () => null,
+  placeholder: 'out of town',
+  value: undefined,
+  disabled: false,
+  required: false,
+  options: [
+    { label: 'English', value: 'english' },
+    { label: 'German', value: 'german' },
+    { label: 'Spanish', value: 'spanish' },
+    { label: 'French', value: 'french' },
+    { label: 'Italian', value: 'italian' },
+    { label: 'Dutch', value: 'dutch' },
+    { label: 'Portuguese', value: 'portuguese' },
+    { label: 'Russian', value: 'russian' },
+    { label: 'Chinese', value: 'chinese' },
+    { label: 'Japanese', value: 'japanese' },
+    { label: 'Korean', value: 'korean' },
+    { label: 'Arabic', value: 'arabic' },
+    { label: 'Turkish', value: 'turkish' },
+    { label: 'Swedish', value: 'swedish' },
+    { label: 'Polish', value: 'polish' },
+    { label: 'Danish', value: 'danish' },
+    { label: 'Norwegian', value: 'norwegian' },
+    { label: 'Finnish', value: 'finnish' },
+    { label: 'Greek', value: 'greek' },
+    { label: 'Czech', value: 'czech' },
+    { label: 'Hungarian', value: 'hungarian' },
+    { label: 'Romanian', value: 'romanian' },
+    { label: 'Indonesian', value: 'indonesian' },
+    { label: 'Hebrew', value: 'hebrew' },
+    { label: 'Thai', value: 'thai' },
+    { label: 'Vietnamese', value: 'vietnamese' },
+    { label: 'Ukrainian', value: 'ukrainian' },
+    { label: 'Slovak', value: 'slovak' },
+    { label: 'Croatian', value: 'croatian' },
+    { label: 'Serbian', value: 'serbian' },
+    { label: 'Bulgarian', value: 'bulgarian' },
+    { label: 'Lithuanian', value: 'lithuanian' },
+    { label: 'Latvian', value: 'latvian' },
+    { label: 'Estonian', value: 'estonian' },
+    { label: 'Persian', value: 'persian' },
+    { label: 'Afrikaans', value: 'afrikaans' },
+    { label: 'Swahili', value: 'swahili' },
+  ],
+};

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,128 @@
+import * as Select from '@radix-ui/react-select';
+import React from 'react';
+
+import { CheckIcon, ChevronDownIcon } from '../Icon';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import { InputHeight } from '../TextInput/TextInput';
+import {
+  DropdownWrapper,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from './styles';
+
+type Options = { value: string; label: string }[];
+
+export type DropdownProps = {
+  ariaLabel?: string;
+  cannotError?: boolean;
+  error?: string;
+  height?: InputHeight;
+  label?: string;
+  labelTooltip?: string;
+  lockedValue?: string;
+  maxWidth?: string;
+  options: Options;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+  value?: string;
+  disabled?: boolean;
+  required?: boolean;
+  inputRef?: React.RefObject<HTMLButtonElement>;
+};
+
+const ARROW_DOWN_WIDTH = 13;
+const ARROW_DOWN_HEIGHT = 8;
+
+const isValidValue = (value: string, options: Options) =>
+  options.some(option => option.value === value);
+
+const Option: React.FC<{ children: string; value: string }> = ({
+  children,
+  value,
+}) => {
+  return (
+    <SelectItem value={value}>
+      <Select.SelectItemText>
+        <Text>{children}</Text>
+      </Select.SelectItemText>
+      <SelectItemIndicator>
+        <CheckIcon label="selected item" width="10px" />
+      </SelectItemIndicator>
+    </SelectItem>
+  );
+};
+
+const Dropdown: React.FC<DropdownProps> = ({
+  ariaLabel,
+  error,
+  cannotError,
+  disabled,
+  height,
+  inputRef,
+  label,
+  labelTooltip,
+  lockedValue,
+  maxWidth,
+  onValueChange,
+  options,
+  placeholder,
+  required,
+  value,
+}) => {
+  const defaultValue =
+    lockedValue || (value && isValidValue(value, options) ? value : undefined);
+  const canError = !lockedValue && !cannotError;
+
+  return (
+    <DropdownWrapper $maxWidth={maxWidth}>
+      {label && (
+        <Label bold htmlFor={ariaLabel} tooltipText={labelTooltip}>
+          {label}
+        </Label>
+      )}
+      <Select.Root
+        disabled={disabled || !!lockedValue}
+        onValueChange={onValueChange}
+        required={required}
+        defaultValue={defaultValue}
+      >
+        <SelectTrigger
+          aria-label={ariaLabel || label}
+          ref={inputRef}
+          $hasError={Boolean(error)}
+          $height={height}
+        >
+          <SelectValue placeholder={placeholder} />
+          {!lockedValue && (
+            <SelectIcon>
+              <ChevronDownIcon
+                width={ARROW_DOWN_WIDTH}
+                height={ARROW_DOWN_HEIGHT}
+                label="dropdown icon"
+              />
+            </SelectIcon>
+          )}
+        </SelectTrigger>
+        <SelectContent position="popper">
+          <SelectViewport>
+            {options.map(option => (
+              <Option key={option.label} value={option.value}>
+                {option.label}
+              </Option>
+            ))}
+          </SelectViewport>
+        </SelectContent>
+      </Select.Root>
+      {canError && <InputError visible={Boolean(error)}>{error}</InputError>}
+    </DropdownWrapper>
+  );
+};
+
+export default Dropdown;