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

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,151 @@
+import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
+import React, { HTMLProps, PropsWithChildren, ReactNode } from 'react';
+
+import { Logo } from '../Icon';
+import { LinkProps } from '../Link/Link';
+import {
+  Callout,
+  CalloutHeading,
+  CalloutText,
+  ContentList,
+  ListItemHeading,
+  ListItemLink,
+  ListItemText,
+  MenuTriggerIcon,
+  NavMenuContent,
+  NavMenuIndicator,
+  NavMenuIndicatorArrow,
+  NavMenuLink,
+  NavMenuList,
+  NavMenuRoot,
+  NavMenuTrigger,
+  NavMenuViewport,
+  ViewportPosition,
+} from './styles';
+
+export enum MenuContentLayout {
+  callout = 'callout',
+  calloutWithList = 'calloutWithList',
+  oneColumn = 'oneColumn',
+  twoColumns = 'twoColumns',
+  threeColumns = 'threeColumns',
+}
+
+interface NavigationMenuContentItemProps extends HTMLProps<HTMLAnchorElement> {
+  active?: boolean;
+  title?: string;
+  children?: ReactNode;
+}
+const NavigationMenuContentItem = React.forwardRef<
+  HTMLAnchorElement,
+  NavigationMenuContentItemProps
+>(({ active, className, children, title, ...props }, forwardedRef) => (
+  <li>
+    <RadixNavigationMenu.Link asChild active={active}>
+      <ListItemLink
+        className={className}
+        {...(props as LinkProps)}
+        ref={forwardedRef}
+        textDecoration={false}
+        active={active}
+      >
+        <ListItemHeading tag="h3">{title}</ListItemHeading>
+        <ListItemText className="ListItemText">{children}</ListItemText>
+      </ListItemLink>
+    </RadixNavigationMenu.Link>
+  </li>
+));
+
+const NavigationMenuList = NavMenuList;
+const NavigationMenuItem = RadixNavigationMenu.Item;
+const NavigationMenuLink = (
+  props: LinkProps & RadixNavigationMenu.NavigationMenuLinkProps,
+) => (
+  <RadixNavigationMenu.Link asChild>
+    <NavMenuLink {...props} textDecoration={false}>
+      {props.children}
+    </NavMenuLink>
+  </RadixNavigationMenu.Link>
+);
+
+const NavigationMenuTrigger = ({ children }: PropsWithChildren) => (
+  <NavMenuTrigger>
+    {children}
+    <MenuTriggerIcon width={12} height={12} label="menu trigger icon" />
+  </NavMenuTrigger>
+);
+
+interface CalloutProps {
+  heading: string;
+  description: string;
+  link: string;
+  Icon?: any;
+  to?: string;
+  href?: string;
+}
+const NavigationMenuCallout = ({
+  heading,
+  description,
+  Icon,
+  to,
+  href,
+}: CalloutProps) => (
+  <li style={{ gridRow: 'span 3' }}>
+    <RadixNavigationMenu.Link asChild>
+      <Callout to={to} href={href}>
+        {Icon ? (
+          <Icon width="48px" height="48px" label="Callout Icon" />
+        ) : (
+          <Logo
+            width="48px"
+            height="48px"
+            color="white"
+            label="Little World Icon"
+          />
+        )}
+        <CalloutHeading>{heading}</CalloutHeading>
+        <CalloutText>{description}</CalloutText>
+      </Callout>
+    </RadixNavigationMenu.Link>
+  </li>
+);
+
+const NavigationMenuContent = ({
+  layout,
+  children,
+}: PropsWithChildren<{
+  layout: keyof typeof MenuContentLayout;
+}>) => (
+  <NavMenuContent>
+    <ContentList $layout={layout}>{children}</ContentList>
+  </NavMenuContent>
+);
+
+const NavigationMenu = ({
+  children,
+  withShadow,
+}: PropsWithChildren<{
+  withShadow?: boolean;
+}>) => (
+  <NavMenuRoot>
+    <NavigationMenuList $withShadow={withShadow}>
+      {children}
+      <NavMenuIndicator>
+        <NavMenuIndicatorArrow />
+      </NavMenuIndicator>
+    </NavigationMenuList>
+    <ViewportPosition>
+      <NavMenuViewport />
+    </ViewportPosition>
+  </NavMenuRoot>
+);
+
+export {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuCallout,
+  NavigationMenuLink,
+  NavigationMenuContentItem,
+};

package/src/components/NavigationMenu/styles.tsx

@@ -0,0 +1,293 @@
+import * as RadixNavigationMenu from '@radix-ui/react-navigation-menu';
+import styled, { css } from 'styled-components';
+
+import {
+  enterFromLeft,
+  enterFromRight,
+  exitToLeft,
+  exitToRight,
+  scaleIn,
+  scaleOut,
+} from '../../utils/animations';
+import { ChevronDownIcon } from '../Icon';
+import Link from '../Link/Link';
+import Text from '../Text/Text';
+
+export const MenuTriggerIcon = styled(ChevronDownIcon)`
+  position: relative;
+  color: ${({ theme }) => theme.color.text.primary};
+  top: 1px;
+  transition: transform 250ms ease;
+`;
+
+export const NavMenuRoot = styled(RadixNavigationMenu.Root)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+
+  &[data-state='open'] > ${MenuTriggerIcon} {
+    transform: rotate(-180deg);
+  }
+`;
+
+export const NavMenuList = styled(RadixNavigationMenu.List)<{
+  $withShadow?: boolean;
+}>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  list-style: none;
+  margin: 0;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+
+  ${({ theme, $withShadow }) =>
+    $withShadow && `box-shadow: 0 2px 10px ${theme.color.surface.secondary};`}
+`;
+
+const MENU_ITEM_CSS = css`
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => `${theme.spacing.xsmall}`};
+  outline: none;
+  user-select: none;
+  font-weight: 500;
+  line-height: 1;
+  font-size: 15px;
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  color: ${({ theme }) => theme.color.text.primary};
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.surface.secondary};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.surface.secondary};
+  }
+`;
+
+export const NavMenuLink = styled(Link)`
+  display: block;
+  text-decoration: none;
+
+  ${MENU_ITEM_CSS}
+  ${({ active, theme }) =>
+    active &&
+    `
+   box-shadow: 0 0 0 2px ${theme.color.border.bold};  
+`}
+`;
+
+export const NavMenuTrigger = styled(RadixNavigationMenu.Trigger)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  ${MENU_ITEM_CSS}
+`;
+
+export const NavMenuContent = styled(RadixNavigationMenu.Content)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  animation-duration: 250ms;
+  animation-timing-function: ease;
+  z-index: 200;
+
+  &[data-motion='from-start'] {
+    animation-name: ${enterFromLeft};
+  }
+  &[data-motion='from-end'] {
+    animation-name: ${enterFromRight};
+  }
+  &[data-motion='to-start'] {
+    animation-name: ${exitToLeft};
+  }
+
+  &[data-motion='to-end'] {
+    animation-name: ${exitToRight};
+  }
+`;
+
+export const NavMenuIndicator = styled(RadixNavigationMenu.Indicator)`
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 10px;
+  top: 100%;
+  overflow: hidden;
+  z-index: 1;
+  transition:
+    width,
+    transform 250ms ease;
+
+  &[data-state='visible'] {
+    animation: fadeIn 200ms ease forward;
+  }
+
+  &[data-state='hidden'] {
+    animation: fadeOut 200ms ease forward;
+  }
+`;
+
+export const NavMenuIndicatorArrow = styled.div`
+  position: relative;
+  top: 70%;
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  transform: rotate(45deg);
+  border-top-left-radius: 2px;
+`;
+
+export const ViewportPosition = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  perspective: 2000px;
+`;
+
+export const NavMenuViewport = styled(RadixNavigationMenu.Viewport)`
+  position: relative;
+  transform-origin: top center;
+  margin-top: 10px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+  transition:
+    width,
+    height,
+    300ms ease;
+  height: var(--radix-navigation-menu-viewport-height);
+
+  &[data-state='open'] {
+    animation: ${scaleIn} 200ms ease;
+  }
+
+  &[data-state='closed'] {
+    animation: ${scaleOut} 200ms ease;
+  }
+`;
+
+export const ContentList = styled.ul<{ $layout: string }>`
+  display: grid;
+  padding: 22px;
+  margin: 0;
+  column-gap: 10px;
+  list-style: none;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+
+  ${({ $layout }) => {
+    if ($layout === 'callout')
+      return css`
+        width: 100%;
+        grid-template-columns: 1fr;
+      `;
+
+    if ($layout === 'calloutWithList')
+      return css`
+        width: 100%;
+        grid-template-columns: 0.75fr 1fr;
+      `;
+
+    if ($layout === 'oneColumn')
+      return css`
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(1, 1fr);
+      `;
+
+    if ($layout === 'twoColumns')
+      return css`
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(3, 1fr);
+      `;
+
+    if ($layout === 'threeColumns')
+      return css`
+        width: 100%;
+        grid-auto-flow: column;
+        grid-template-rows: repeat(2, 1fr);
+      `;
+  }}
+`;
+
+export const ListItemLink = styled(Link)`
+  display: block;
+  outline: none;
+  text-decoration: none;
+  user-select: none;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: 15px;
+  line-height: 1;
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.surface.secondary};
+  }
+  &:hover {
+    background-color: ${({ theme }) => theme.color.surface.secondary};
+  }
+
+  ${({ active, theme }) =>
+    active &&
+    `
+     box-shadow: 0 0 0 2px ${theme.color.border.bold};  
+  `}
+`;
+
+export const ListItemHeading = styled(Text)`
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 5px;
+`;
+
+export const ListItemText = styled(Text)`
+  color: ${({ theme }) => theme.color.text.primary};
+  line-height: 1.4;
+  font-weight: initial;
+`;
+
+export const Callout = styled(Link)`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) =>
+    `linear-gradient(135deg, ${theme.color.text.primary} 0%, ${theme.color.border.bold} 100%)`};
+  border-radius: 6px;
+  padding: 25px;
+  text-decoration: none;
+  outline: none;
+  user-select: none;
+  grid-row: 1 / -1; /* Span all rows */
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.color.text.primary};
+  }
+`;
+
+export const CalloutHeading = styled(Text)`
+  color: ${({ theme }) => theme.color.text.reversed};
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+`;
+
+export const CalloutText = styled(Text)`
+  color: ${({ theme }) => theme.color.text.reversed};
+  font-size: 14px;
+  line-height: 1.3;
+`;

package/src/components/Popover/InfoPopover.tsx

@@ -0,0 +1,40 @@
+import { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';
+import React from 'react';
+
+import Popover, { PopoverSizes } from './Popover';
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+
+type Props = {
+  text: string;
+  trigger?: React.ReactNode;
+} & PopoverProps &
+  PopoverContentProps;
+
+const DEFAULT_SIDE_OFFSET = 4; //px
+
+const InfoPopover: React.FC<Props> = ({
+  defaultOpen,
+  open,
+  side = 'top',
+  sideOffset = DEFAULT_SIDE_OFFSET,
+  trigger,
+  text,
+  ...rest
+}) => (
+  <Popover
+    asTooltip
+    defaultOpen={defaultOpen}
+    open={open}
+    side={side}
+    sideOffset={sideOffset}
+    showCloseButton
+    trigger={trigger}
+    width={PopoverSizes.Large}
+    {...rest}
+  >
+    <Text type={TextTypes.Body5}>{text}</Text>
+  </Popover>
+);
+
+export default InfoPopover;

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import Button, { ButtonVariations } from '../Button/Button';
+import { DotsIcon, QuestionIcon } from '../Icon';
+import Modal from '../Modal/Modal';
+import Popover from './Popover';
+import InfoPopover from './InfoPopover';
+
+const StyledOption = styled(Button)`
+  font-size: 16px;
+  font-weight: normal;
+  justify-content: flex-start;
+
+  &:not(:last-of-type) {
+    margin-bottom: 16px;
+  }
+`;
+
+export default {
+  component: Popover,
+  title: 'Components/Popover',
+  argTypes: {
+    open: { control: 'boolean' },
+    side: { control: 'select', options: ['top', 'left', 'right', 'bottom'] },
+    children: { control: 'text' },
+  },
+};
+
+export const Default = ({ children, ...args }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Popover
+        showCloseButton={false}
+        trigger={
+          <Button variation={ButtonVariations.Icon}>
+            <DotsIcon label="dotsIcon" />
+          </Button>
+        }
+        {...args}
+      >
+        {children || (
+          <>
+            <StyledOption
+              variation={ButtonVariations.Inline}
+              onClick={() => setOpen(true)}
+            >
+              Open Modal
+            </StyledOption>
+            <StyledOption variation={ButtonVariations.Inline}>
+              Unmatch
+            </StyledOption>
+          </>
+        )}
+      </Popover>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        Modal Open
+      </Modal>
+    </>
+  );
+};
+
+export const InfoPopoverComponent = args => {
+  return (
+    <InfoPopover
+      trigger={
+        <Button variation={ButtonVariations.Icon}>
+          <QuestionIcon label="questionIcon" />
+        </Button>
+      }
+      {...args}
+    />
+  );
+};
+
+InfoPopoverComponent.args = {
+  text: 'Ein Avatar ist ein gezeichnetes Profilbild, das du an Stelle eines echten Fotos von dir verwenden kannst. Um den Avatar dir ähnlich aussehen zu lassen, kannst du Merkmale wie Geschlecht, Nase, Haare, Augen etc. anpassen. Probier es doch einfach mal aus! Deinen Avatar kannst du später jederzeit wieder ändern.',
+};
+
+InfoPopoverComponent.argTypes = {
+  open: { control: 'boolean' },
+  text: { control: 'text' },
+  side: { control: 'select', options: ['top', 'left', 'right', 'bottom'] },
+};

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,68 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+
+import Button, { ButtonVariations } from '../Button/Button';
+import { CloseIcon } from '../Icon';
+import {
+  PopoverRoot,
+  StyledPopoverArrow,
+  StyledPopoverClose,
+  StyledPopoverContent,
+} from './styles';
+
+export enum PopoverSizes {
+  Small = '160px',
+  Medium = '240px',
+  Large = '360px',
+}
+
+type PopoverProps = {
+  asTooltip?: boolean;
+  children: React.ReactNode;
+  showCloseButton?: boolean;
+  trigger?: React.ReactNode;
+  width?: PopoverSizes;
+} & RadixPopover.PopoverProps &
+  RadixPopover.PopoverContentProps;
+
+const DEFAULT_SIDE_OFFSET = 4; //px
+
+const Popover: React.FC<PopoverProps> = ({
+  asTooltip,
+  defaultOpen,
+  children,
+  onFocusOutside,
+  open,
+  side,
+  sideOffset = DEFAULT_SIDE_OFFSET,
+  showCloseButton,
+  trigger,
+  width = PopoverSizes.Small,
+}) => (
+  <PopoverRoot defaultOpen={defaultOpen} open={open}>
+    {trigger && <RadixPopover.Trigger asChild>{trigger}</RadixPopover.Trigger>}
+    <RadixPopover.Portal>
+      <StyledPopoverContent
+        side={side}
+        sideOffset={sideOffset}
+        $asTooltip={asTooltip}
+        $width={width}
+        $extraPaddingTop={Boolean(!asTooltip && showCloseButton)}
+        collisionPadding={DEFAULT_SIDE_OFFSET}
+        onFocusOutside={onFocusOutside}
+      >
+        {children}
+        {showCloseButton && (
+          <StyledPopoverClose asChild $asTooltip={asTooltip}>
+            <Button variation={ButtonVariations.Icon}>
+              <CloseIcon label="popover close" width={12} height={12} />
+            </Button>
+          </StyledPopoverClose>
+        )}
+        <StyledPopoverArrow $asTooltip={asTooltip} />
+      </StyledPopoverContent>
+    </RadixPopover.Portal>
+  </PopoverRoot>
+);
+
+export default Popover;