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

package/src/components/MultiDropdown/MultiDropdown.tsx

@@ -0,0 +1,247 @@
+import { isEmpty } from 'lodash';
+import React, { useEffect, useState } from 'react';
+
+import Button, { ButtonSizes, ButtonVariations } from '../Button/Button';
+import Dropdown, { DropdownProps } from '../Dropdown/Dropdown';
+import { PlusIcon, TrashIcon } from '../Icon';
+import Label from '../Label/Label';
+import Text from '../Text/Text';
+import {
+  AddMore,
+  AddMoreButton,
+  DeleteButton,
+  MultiDropdownWrapper,
+  Segment,
+} from './styles';
+import { useTheme } from 'styled-components';
+
+const DELETE_SEGMENT = 'delete segment';
+
+interface DropdownInstanceProps extends Omit<DropdownProps, 'onValueChange'> {
+  lockedValue?: string;
+  dataField: string;
+  values: string[];
+  ariaLabel: string;
+  errors: string[];
+}
+
+type Props = {
+  addMoreLabel: string;
+  error?: string;
+  label?: string;
+  labelTooltip?: string;
+  locked?: boolean;
+  defaultSegments?: number;
+  maxSegments?: number;
+  onValueChange: (value: { [x: string]: string }[]) => void;
+  firstDropdown: DropdownInstanceProps;
+  secondDropdown: DropdownInstanceProps;
+  restrictions?: { [key: string]: string[] };
+};
+
+const formatValues = (
+  values: string[][],
+  firstDataField: string,
+  secondDataField: string,
+) =>
+  values[0].reduce((newValues: { [x: string]: string }[], firstVal, index) => {
+    // only push the value if both values exist
+    if (firstVal && values[1][index]) {
+      newValues.push({
+        [firstDataField]: firstVal,
+        [secondDataField]: values[1][index],
+      });
+    }
+    return newValues;
+  }, []);
+
+const setDropdownValues = (
+  firstDropdown: DropdownInstanceProps,
+  secondDropdown: DropdownInstanceProps,
+) => {
+  const first =
+    (firstDropdown.lockedValue
+      ? [firstDropdown.lockedValue, ...(firstDropdown.values.slice(1) || [])]
+      : firstDropdown.values) || [];
+  const second =
+    (secondDropdown.lockedValue
+      ? [secondDropdown.lockedValue, ...(secondDropdown.values.slice(1) || [])]
+      : secondDropdown.values) || [];
+
+  return [first, second];
+};
+
+const MultiDropdown: React.FC<Props> = ({
+  addMoreLabel = 'Add more rows',
+  label,
+  labelTooltip,
+  locked,
+  firstDropdown,
+  secondDropdown,
+  onValueChange,
+  defaultSegments = 1,
+  maxSegments = 4,
+  restrictions,
+}) => {
+  const [segments, setSegments] = useState(
+    Math.max(
+      firstDropdown?.values?.length ?? 0,
+      secondDropdown?.values?.length ?? 0,
+      defaultSegments,
+    ),
+  );
+
+  const [values, setValues] = useState(
+    setDropdownValues(firstDropdown, secondDropdown),
+  );
+
+  const theme = useTheme();
+
+  useEffect(() => {
+    setValues(setDropdownValues(firstDropdown, secondDropdown));
+    setSegments(
+      Math.max(
+        firstDropdown?.values?.length ?? 0,
+        secondDropdown?.values?.length ?? 0,
+        defaultSegments,
+      ),
+    );
+  }, [firstDropdown?.values, secondDropdown?.values]);
+
+  const handleValueChange = (
+    value: string,
+    position: number,
+    index: number,
+  ) => {
+    setValues(values => {
+      const newValues = [...values];
+      newValues[position][index] = value;
+
+      if (values[position || 0])
+        onValueChange(
+          formatValues(
+            newValues,
+            firstDropdown.dataField,
+            secondDropdown.dataField,
+          ),
+        );
+      return newValues;
+    });
+  };
+
+  const handleDelete = (index: number) => {
+    setValues(values => {
+      const newValues = [...values];
+      (newValues[0].splice(index, 1),
+        newValues[1].splice(index, 1),
+        onValueChange(
+          formatValues(
+            newValues,
+            firstDropdown.dataField,
+            secondDropdown.dataField,
+          ),
+        ));
+      return newValues;
+    });
+    setSegments(currentNumber => currentNumber - 1);
+  };
+
+  return (
+    <MultiDropdownWrapper>
+      {label && (
+        <Label
+          bold
+          htmlFor={firstDropdown.label}
+          marginBottom={theme.spacing.xsmall}
+          tooltipText={labelTooltip}
+        >
+          {label}
+        </Label>
+      )}
+      {Array(segments)
+        .fill('')
+        .map((_, index) => {
+          const isFirstSegment = index === 0;
+          const firstSegmentLockedVal1 = isFirstSegment
+            ? firstDropdown.lockedValue
+            : undefined;
+          const firstSegmentLockedVal2 = isFirstSegment
+            ? secondDropdown.lockedValue
+            : undefined;
+          const deletable = !!index && !locked;
+
+          return (
+            <Segment
+              $locked={locked}
+              key={`MultiDropdown Segment ${index}${values[0][index]}${values[1][index]}`}
+            >
+              <Dropdown
+                ariaLabel={firstDropdown.ariaLabel + index}
+                placeholder={firstDropdown.placeholder}
+                onValueChange={val => handleValueChange(val, 0, index)}
+                options={firstDropdown.options}
+                value={values[0][index]}
+                lockedValue={
+                  firstSegmentLockedVal1 ||
+                  (locked ? values[0][index] : undefined)
+                }
+                required={Boolean(values[1][index])}
+                error={firstDropdown.errors?.[index]}
+              />
+              <Dropdown
+                ariaLabel={secondDropdown.ariaLabel + index}
+                placeholder={secondDropdown.placeholder}
+                onValueChange={val => handleValueChange(val, 1, index)}
+                options={
+                  isEmpty(restrictions?.[values[0][index]])
+                    ? secondDropdown.options
+                    : secondDropdown.options.filter(option =>
+                        restrictions?.[values[0][index]]?.includes(
+                          option.value,
+                        ),
+                      )
+                }
+                value={values[1][index]}
+                lockedValue={
+                  firstSegmentLockedVal2 ||
+                  (locked ? values[1][index] : undefined)
+                }
+                required={Boolean(values[0][index])}
+                error={secondDropdown.errors?.[index]}
+              />
+              {deletable && (
+                <DeleteButton
+                  variation={ButtonVariations.Icon}
+                  onClick={() => handleDelete(index)}
+                  size={ButtonSizes.Small}
+                >
+                  <TrashIcon label={DELETE_SEGMENT} color="orange" />
+                </DeleteButton>
+              )}
+            </Segment>
+          );
+        })}
+      {!locked && (
+        <AddMore>
+          <AddMoreButton
+            variation={ButtonVariations.Icon}
+            disabled={segments === maxSegments}
+            onClick={() => setSegments(currentNumber => currentNumber + 1)}
+            size={ButtonSizes.Small}
+          >
+            <PlusIcon label="add more dropdowns" width={10} />
+          </AddMoreButton>
+          <Button
+            variation={ButtonVariations.Inline}
+            disabled={segments === maxSegments}
+            onClick={() => setSegments(currentNumber => currentNumber + 1)}
+          >
+            <Text>{addMoreLabel}</Text>
+          </Button>
+        </AddMore>
+      )}
+    </MultiDropdownWrapper>
+  );
+};
+
+export default MultiDropdown;

package/src/components/MultiDropdown/styles.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+import Button from '../Button/Button';
+import { DROPDOWN_MAX_WIDTH } from '../Dropdown/styles';
+
+export const MultiDropdownWrapper = styled.div``;
+
+export const AddMore = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+export const AddMoreButton = styled(Button)`
+  color: ${({ theme }) => theme.color.text.highlight};
+
+  &:disabled {
+    color: ${({ theme }) => theme.color.text.disabled};
+  }
+`;
+
+export const Segment = styled.section<{ $locked?: boolean }>`
+  display: grid;
+  max-width: calc(
+    ${DROPDOWN_MAX_WIDTH} * 2 + ${({ theme }) => theme.spacing.small}
+  );
+  grid-template-columns: ${({ $locked, theme }) =>
+    $locked
+      ? 'repeat(2, minmax(0, 1fr))'
+      : `repeat(2, minmax(0, 1fr)) minmax(
+      ${theme.spacing.medium},
+      auto
+    )`};
+  align-items: start;
+  gap: ${({ theme }) => theme.spacing.small};
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+export const DeleteButton = styled(Button)`
+  top: ${({ theme }) => theme.spacing.xxsmall};
+  margin-left: calc(
+    ${({ theme }) => theme.spacing.xxsmall} -
+      ${({ theme }) => theme.spacing.small}
+  );
+`;

package/src/components/MultiSelection/MultiSelection.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import MultiSelection from './MultiSelection';
+
+export default {
+  component: MultiSelection,
+  title: 'Components/MultiSelection',
+};
+
+export const Default = args => <MultiSelection {...args} />;
+
+Default.args = {
+  id: 'multi selector id',
+  label: 'Select your interests',
+  onSelection: () => null,
+  options: [
+    { tag: 'Love', value: 'love' },
+    { tag: 'Cherish', value: 'cherish' },
+  ],
+};

package/src/components/MultiSelection/MultiSelection.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { MultiSelectionWrapper, Options, Option } from './styles';
+
+import Label from '../Label/Label';
+import InputError from '../InputError/InputError';
+
+type Props = {
+  error?: string;
+  id: string;
+  label: string;
+  labelTooltip?: string;
+  options: { tag: string; value: string }[];
+  preSelected?: string[];
+  onSelection: (selected: string[]) => void;
+  withBackground?: boolean;
+};
+
+const MultiSelection: React.FC<Props> = ({
+  error,
+  label,
+  labelTooltip,
+  id,
+  options,
+  preSelected = [],
+  onSelection,
+  withBackground = true,
+}: Props) => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  useEffect(() => {
+    setSelected(preSelected);
+  }, [JSON.stringify([preSelected])]);
+
+  const handleOnClick = (newSelection: string[]) => {
+    setSelected(newSelection);
+    onSelection(newSelection);
+  };
+
+  return (
+    <MultiSelectionWrapper>
+      {label && (
+        <Label bold htmlFor={id} tooltipText={labelTooltip}>
+          {label}
+        </Label>
+      )}
+      <Options $hasError={Boolean(error)} $withBackground={withBackground}>
+        {options.map(option => {
+          const isSelected = selected?.some(el => el === option.value);
+
+          return (
+            <Option
+              key={option.value}
+              $selected={isSelected}
+              $withBackground={withBackground}
+              onClick={() =>
+                handleOnClick(
+                  isSelected
+                    ? selected.filter(el => el !== option.value)
+                    : [...selected, option.value],
+                )
+              }
+              type="button"
+            >
+              {option.tag}
+            </Option>
+          );
+        })}
+      </Options>
+      <InputError visible={Boolean(error)}>{error}</InputError>
+    </MultiSelectionWrapper>
+  );
+};
+
+export default MultiSelection;

package/src/components/MultiSelection/styles.tsx

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+
+export const MultiSelectionWrapper = styled.div`
+  width: 100%:
+`;
+
+export const Options = styled.div<{
+  $hasError: boolean;
+  $withBackground: boolean;
+}>`
+  display: flex;
+  border-radius: 15px;
+  align-items: center;
+  text-align: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: 0px;
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  white-space: pre-line;
+
+  ${({ theme, $withBackground }) =>
+    $withBackground &&
+    css`
+      background: ${theme.color.surface.secondary};
+      border: 1px solid ${theme.color.border.subtle};
+      padding: ${theme.spacing.xxsmall};
+
+      @media (min-width: ${theme.breakpoints.small}) {
+        padding: ${theme.spacing.small};
+      }
+    `}
+
+  ${({ $hasError }) => $hasError && INPUT_ERROR_CSS}
+`;
+
+export const Option = styled.button<{
+  $selected: boolean;
+  $withBackground: boolean;
+}>`
+  font-family: 'Signika Negative';
+  color: ${({ theme, $selected, $withBackground }) =>
+    $withBackground || $selected
+      ? theme.color.text.primary
+      : theme.color.text.disabled};
+  background: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 10px;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.03);
+  border-radius: 1000px;
+  border: 2px solid
+    ${({ theme, $withBackground }) =>
+      $withBackground
+        ? theme.color.border.reversed
+        : theme.color.border.subtle};
+  padding: ${({ theme }) =>
+    `${theme.spacing.xxxsmall} ${theme.spacing.xsmall}`};
+  min-width: 60px;
+  height: 33px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  ${({ theme }) => css`
+    @media (min-width: ${theme.breakpoints.small}) {
+      padding: ${theme.spacing.xxsmall} ${theme.spacing.small};
+      min-width: 80px;
+      height: 45px;
+    }
+  `}
+
+  ${({ $selected, theme }) =>
+    $selected &&
+    css`
+      border-color: ${theme.color.border.selected};
+    `}
+`;

package/src/components/NavigationMenu/NavigationMenu.stories.tsx

@@ -0,0 +1,108 @@
+import { Meta } from '@storybook/react-webpack5';
+import React from 'react';
+import { withRouter } from 'storybook-addon-remix-react-router';
+
+import {
+  MenuContentLayout,
+  NavigationMenu,
+  NavigationMenuCallout,
+  NavigationMenuContent,
+  NavigationMenuContentItem,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+} from './NavigationMenu';
+
+const meta: Meta<typeof NavigationMenu> = {
+  component: NavigationMenu,
+  title: 'Components/NavigationMenu',
+  decorators: [withRouter],
+};
+
+export default meta;
+
+export const Default = () => (
+  <div style={{ height: '500px', width: '100%' }}>
+    <NavigationMenu>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Callout With List</NavigationMenuTrigger>
+        <NavigationMenuContent layout={MenuContentLayout.calloutWithList}>
+          <NavigationMenuCallout
+            heading="New to Little World"
+            description="Amazing new feature offered by Little World. Go there now"
+            link="/"
+          />
+          <NavigationMenuContentItem href="/" title="Stitches" active>
+            CSS-in-JS with best-in-class developer experience.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem href="/" title="Colors">
+            Beautiful, thought-out palettes with auto dark mode.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem href="/" title="Icons">
+            A crisp set of 15x15 icons, balanced and consistent.
+          </NavigationMenuContentItem>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Callout</NavigationMenuTrigger>
+        <NavigationMenuContent layout={MenuContentLayout.callout}>
+          <NavigationMenuCallout
+            heading="New to Little World"
+            description="Amazing new feature offered by Little World. Go there now"
+            link="/"
+          />
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>One Column</NavigationMenuTrigger>
+        <NavigationMenuContent layout={MenuContentLayout.oneColumn}>
+          <NavigationMenuContentItem title="Introduction" href="/">
+            Build high-quality, accessible design systems and web apps.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem title="Getting started" href="/">
+            A quick tutorial to get you up and running with LW.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem
+            title="Styling"
+            href="/primitives/docs/guides/styling"
+          >
+            Unstyled and compatible with any styling solution.
+          </NavigationMenuContentItem>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
+        <NavigationMenuContent layout={MenuContentLayout.twoColumns}>
+          <NavigationMenuContentItem title="Introduction" href="/">
+            Build high-quality, accessible design systems and web apps.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem title="Getting started" href="/">
+            A quick tutorial to get you up and running with LW.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem title="Styling" href="/">
+            Unstyled and compatible with any styling solution.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem title="Animation" href="/">
+            Use CSS keyframes or any animation library of your choice.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem title="Accessibility" href="/">
+            Tested in a range of browsers and assistive technologies.
+          </NavigationMenuContentItem>
+          <NavigationMenuContentItem title="Releases" href="/">
+            Releases and their changelogs.
+          </NavigationMenuContentItem>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuItem>
+        <NavigationMenuLink href="" active>
+          Link
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenu>
+    <div style={{ zIndex: 100 }}>Z-index Test: 100</div>
+  </div>
+);