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

package/src/components/Text/typography.mdx

@@ -0,0 +1,91 @@
+import { Meta, Unstyled } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../../theme';
+
+import { TypographyItem } from '../../storybook/Components';
+import Text from './Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+
+<Meta title="Foundations/Typography" />
+
+<CustomThemeProvider>
+  # Typography
+
+  All accepted Typography across the Little World appliction is stored in `TextTypes`, which is comprised of two different types: Heading & Body.
+  All font-sizes use the [rem]()
+
+  ## Headings
+
+  Headings are used to summmarize and highlight a particular section on a page.
+  Font-family: 'Signika Negative'
+  Font-family: 'Work Sans'
+
+  Here are the following Heading sizes that we use across the app:
+
+  <Unstyled>
+
+  <TypographyItem
+    item={<Text type={TextTypes.Heading1}>Heading1</Text>}
+    details={'Font Size: Mobile: 4rem, Desktop: 5rem'}
+  />
+
+  <TypographyItem
+    item={<Text type={TextTypes.Heading2}>Heading2</Text>}
+    details={'Font Size: Mobile: 3.5rem, Desktop: 4rem'}
+  />
+
+  <TypographyItem
+    item={<Text type={TextTypes.Heading3}>Heading3</Text>}
+    details={'Font Size: Mobile: 2.5rem, Desktop: 3rem'}
+  />
+
+  <TypographyItem
+    item={<Text type={TextTypes.Heading4}>Heading4</Text>}
+    details={'Font Size: Mobile: 2rem, Desktop: 2rem'}
+  />
+
+  <TypographyItem
+    item={<Text type={TextTypes.Heading5}>Heading5</Text>}
+    details={'Font Size: Mobile: 1.5rem, Desktop: 1.5rem'}
+  />
+
+  <TypographyItem item={<Text type={TextTypes.Heading6}>Heading6</Text>} details={'Font Size: Mobile: 1rem, Desktop: 1rem'} />
+  </Unstyled>
+
+  ## Body
+
+  Font-family: 'Signika Negative'
+
+  Here are the following Body sizes that we use across the app:
+
+  <Unstyled>
+      <TypographyItem
+      item={<Text type={TextTypes.Body1}>Body1</Text>}
+      details={'Font Size: Mobile: 2rem, Desktop: 2.5rem'}
+      />
+
+      <TypographyItem
+      item={<Text type={TextTypes.Body2}>Body2</Text>}
+      details={'Font Size: Mobile: 1.75rem, Desktop: 2rem'}
+      />
+
+      <TypographyItem
+      item={<Text type={TextTypes.Body3}>Body3</Text>}
+      details={'Font Size: Mobile: 1.5rem, Desktop: 1.5rem'}
+      />
+
+      <TypographyItem
+      item={<Text type={TextTypes.Body4}>Body4</Text>}
+      details={'Font Size: Mobile: 1.25rem, Desktop: 1.25rem'}
+      />
+
+      <TypographyItem
+      item={<Text type={TextTypes.Body5}>Body5</Text>}
+      details={'Font Size: Mobile: 1rem, Desktop: 1rem'}
+      />
+
+      <TypographyItem item={<Text type={TextTypes.Body6}>Body6</Text>} details={'Font Size: Mobile: 0.8725rem, Desktop: 0.8725rem'} />
+
+      <TypographyItem item={<Text type={TextTypes.Body7}>Body7</Text>} details={'Font Size: Mobile: 0.75rem, Desktop: 0.75rem'} />
+
+  </Unstyled>
+</CustomThemeProvider>

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import TextArea, { TextAreaSize, TextAreaProps } from './TextArea';
+
+export default {
+  component: TextArea,
+  title: 'Components/TextArea',
+};
+
+export const Default = (args: TextAreaProps) => <TextArea {...args} />;
+
+Default.args = {
+  placeholder: 'Insert your text',
+  id: 'text input id',
+  label: 'Text Input',
+  readOnly: false,
+};
+
+export const MessageBox = (args: TextAreaProps) => <TextArea {...args} />;
+
+MessageBox.args = {
+  placeholder: 'Insert your message',
+  id: 'message box id',
+  expandable: true,
+  size: TextAreaSize.Xsmall,
+};

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,117 @@
+import React, { Ref, useEffect, useRef, useState } from 'react';
+
+import useAutosizeTextArea from '../../hooks/useAutosizeTextArea';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import {
+  TextAreaSize,
+  TextTypes,
+} from '@a-little-world/little-world-design-system-core';
+import { Area, AreaWrapper, Counter } from './styles';
+
+export { TextAreaSize };
+
+export interface TextAreaProps
+  extends React.ComponentPropsWithoutRef<'textarea'> {
+  displayCount?: boolean;
+  error?: string;
+  expandable?: boolean;
+  id?: string;
+  inputRef?: Ref<HTMLFormElement>;
+  label?: string;
+  labelTooltip?: string;
+  maxLength?: number;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onSubmit?: () => boolean;
+  size?: TextAreaSize;
+  value?: string;
+}
+
+const TextArea: React.FC<TextAreaProps> = ({
+  displayCount = true,
+  error,
+  expandable,
+  id,
+  inputRef,
+  label,
+  labelTooltip,
+  maxLength,
+  onChange,
+  onSubmit,
+  readOnly,
+  size = TextAreaSize.Small,
+  value,
+  ...areaProps
+}) => {
+  const [internalValue, setInternalValue] = useState(value ?? '');
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+  const isTouchDeviceRef = useRef(
+    typeof window !== 'undefined' &&
+      ('ontouchstart' in window || navigator.maxTouchPoints > 0),
+  );
+  useAutosizeTextArea(textAreaRef.current, internalValue, expandable);
+  const [textAreaCount, setTextAreaCount] = useState(0);
+
+  useEffect(() => {
+    setTextAreaCount(value?.length || 0);
+    setInternalValue(value || '');
+  }, [value]);
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange?.(e);
+    setTextAreaCount(e.target.value.length);
+    setInternalValue(e.target.value);
+  };
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (
+      onSubmit &&
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      !isTouchDeviceRef.current
+    ) {
+      e.preventDefault();
+      const submitSuccessful = await onSubmit();
+      if (submitSuccessful) setInternalValue('');
+    }
+  };
+
+  return (
+    <AreaWrapper $size={size}>
+      {label && (
+        <Label bold htmlFor={id} tooltipText={labelTooltip}>
+          {label}
+        </Label>
+      )}
+      {Boolean(displayCount && !readOnly && maxLength) && (
+        <Counter
+          type={TextTypes.Body7}
+        >{`${textAreaCount}/${maxLength}`}</Counter>
+      )}
+      <Area
+        ref={e => {
+          // @ts-ignore
+          inputRef?.(e);
+          textAreaRef.current = e;
+        }}
+        id={id}
+        $hasError={Boolean(error)}
+        $size={size}
+        $expandable={Boolean(expandable)}
+        maxLength={maxLength}
+        onChange={handleOnChange}
+        onKeyDown={handleKeyDown}
+        readOnly={readOnly}
+        value={value}
+        {...areaProps}
+      />
+      {!readOnly && (
+        <InputError visible={Boolean(error)} textAlign="left">
+          {error}
+        </InputError>
+      )}
+    </AreaWrapper>
+  );
+};
+
+export default TextArea;

package/src/components/TextArea/styles.tsx

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components';
+
+import { INPUT_ERROR_CSS } from '../InputError/InputError';
+import Text from '../Text/Text';
+import {
+  TextAreaDimensions,
+  TextAreaSize,
+} from '@a-little-world/little-world-design-system-core';
+
+export const AreaWrapper = styled.div<{ $size?: TextAreaSize }>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${({ $size }) =>
+    $size === TextAreaSize.Small ? '500px' : '100%'};
+  position: relative;
+`;
+
+export const Area = styled.textarea<{
+  $expandable: boolean;
+  $hasError: boolean;
+  $size: TextAreaSize;
+}>`
+  width: 100%;
+  font-family: 'Signika Negative', sans-serif;
+  font-size: 1rem;
+  height: ${({ $size }) => TextAreaDimensions[$size]};
+  border: 1px solid ${({ theme }) => theme.color.border.moderate};
+  border-radius: ${({ $size, theme }) =>
+    $size === TextAreaSize.Xsmall ? theme.radius.large : theme.radius.xxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  padding: ${({ $size, theme }) =>
+    $size === TextAreaSize.Small
+      ? theme.spacing.xxsmall
+      : $size === TextAreaSize.Xsmall
+        ? '11px 14px'
+        : theme.spacing.small};
+  box-sizing: border-box;
+  margin-bottom: ${({ theme, readOnly }) =>
+    readOnly ? 0 : theme.spacing.xxxxsmall};
+  resize: none;
+
+  ${({ $expandable, $size }) =>
+    $expandable &&
+    css`
+      min-height: ${TextAreaDimensions[$size]};
+      max-height: 13rem;
+      max-height: 25dvh;
+    `}
+  ${({ $hasError }) => $hasError && INPUT_ERROR_CSS};
+`;
+
+export const Counter = styled(Text)`
+  position: absolute;
+  bottom: 0px;
+  right: ${({ theme }) => theme.spacing.xxxxsmall};
+`;

package/src/components/TextContent/TextContent.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { ManOnRocketImage, WavyLinesImage } from '../Illustrations';
+import TextPage, { ContentTypes } from './TextContent';
+
+export default {
+  component: Text,
+  title: 'Components/TextContent',
+};
+
+export const Default = args => (
+  <div>
+    <TextPage
+      content={[
+        { text: 'Type: Heading', type: ContentTypes.Heading },
+        { text: 'Type: Title', type: ContentTypes.Title },
+        { text: 'Type: Subtitle', type: ContentTypes.Subtitle },
+        { text: 'Type: Paragraph', type: ContentTypes.Paragraph },
+        { text: 'Type: Sentence', type: ContentTypes.Sentence },
+        {
+          text: 'Type: Image',
+          type: ContentTypes.Image,
+          Image: ManOnRocketImage,
+          imageWidth: '50%',
+          imageMaxWidth: '200px',
+        },
+        { text: 'Type: List Item (below)', type: ContentTypes.Emphasize },
+        {
+          text: 'Type: List',
+          type: ContentTypes.List,
+          listItems: ['Example 1', 'Example 2', 'Example 3'],
+        },
+        { text: 'Type: Ordered List (below)', type: ContentTypes.Emphasize },
+        {
+          text: 'Type: OrderedList',
+          type: ContentTypes.OrderedList,
+          listItems: ['Example 1', 'Example 2', 'Example 3'],
+          style: { color: 'red' },
+        },
+        {
+          text: 'Type: Emphasize',
+          type: ContentTypes.Emphasize,
+          style: { marginBottom: '32px' },
+        },
+        {
+          text: 'Type: Image',
+          type: ContentTypes.Image,
+          Image: WavyLinesImage,
+        },
+      ]}
+      {...args}
+    />
+  </div>
+);

package/src/components/TextContent/TextContent.tsx

@@ -0,0 +1,154 @@
+import React, { CSSProperties } from 'react';
+
+import Text from '../Text/Text';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import { ContentWrapper, ImageWrapper, List, ListItem } from './styles';
+
+export enum ContentTypes {
+  Paragraph = 'paragraph',
+  List = 'list',
+  OrderedList = 'orderedList',
+  Title = 'title',
+  Subtitle = 'subtitle',
+  Heading = 'heading',
+  Emphasize = 'emphasize',
+  Sentence = 'sentence',
+  Image = 'image',
+}
+
+type Props = {
+  content: {
+    center?: boolean;
+    type: ContentTypes;
+    text?: string;
+    listItems?: string[];
+    color?: string;
+    Image?: React.ElementType;
+    imageWidth?: string;
+    imageMaxWidth?: string;
+    style?: CSSProperties;
+  }[];
+  marginBottom?: string;
+};
+
+const TextPage = ({ content, marginBottom }: Props) => {
+  return (
+    <ContentWrapper $marginBottom={marginBottom}>
+      {content.map(
+        ({
+          color,
+          center,
+          text,
+          type,
+          listItems,
+          Image,
+          imageWidth,
+          imageMaxWidth,
+          style,
+        }) => {
+          if (type === ContentTypes.Heading)
+            return (
+              <Text
+                style={style}
+                key={text}
+                tag="h2"
+                type={TextTypes.Heading3}
+                color={color}
+                center={center}
+              >
+                {text}
+              </Text>
+            );
+
+          if (type === ContentTypes.Title)
+            return (
+              <Text
+                style={style}
+                key={text}
+                tag="h3"
+                type={TextTypes.Body2}
+                bold
+                color={color}
+                center={center}
+              >
+                {text}
+              </Text>
+            );
+
+          if (type === ContentTypes.Subtitle)
+            return (
+              <Text
+                style={style}
+                key={text}
+                tag="h4"
+                type={TextTypes.Body3}
+                bold
+                color={color}
+                center={center}
+              >
+                {text}
+              </Text>
+            );
+
+          if (type === ContentTypes.Paragraph)
+            return (
+              <Text style={style} key={text} center={center}>
+                {text}
+              </Text>
+            );
+
+          if (type === ContentTypes.Sentence)
+            return (
+              <Text style={style} key={text} center={center}>
+                {text}
+              </Text>
+            );
+
+          if (type === ContentTypes.List)
+            return (
+              <List key={listItems?.[0]} style={style}>
+                {listItems?.map(item => (
+                  <ListItem key={item} tag="li">
+                    {item}
+                  </ListItem>
+                ))}
+              </List>
+            );
+
+          if (type === ContentTypes.OrderedList)
+            return (
+              <List key={listItems?.[0]} as="ol" $ordered style={style}>
+                {listItems?.map(item => (
+                  <ListItem key={item} tag="li">
+                    {item}
+                  </ListItem>
+                ))}
+              </List>
+            );
+
+          if (type === ContentTypes.Emphasize)
+            return (
+              <Text style={style} key={text} bold color={color} center={center}>
+                {text}
+              </Text>
+            );
+
+          if (type === ContentTypes.Image)
+            return (
+              Image && (
+                <ImageWrapper
+                  $width={imageWidth}
+                  $maxWidth={imageMaxWidth}
+                  $marginBottom={marginBottom}
+                >
+                  <Image color={color} {...style} />
+                </ImageWrapper>
+              )
+            );
+        },
+      )}
+    </ContentWrapper>
+  );
+};
+
+export default TextPage;

package/src/components/TextContent/styles.tsx

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+
+import Text from '../Text/Text';
+
+export const ContentWrapper = styled.div<{ $marginBottom?: string }>`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  ${({ $marginBottom }) =>
+    $marginBottom &&
+    css`
+      margin-bottom: ${$marginBottom};
+    `}
+`;
+
+export const List = styled.ul<{ $ordered?: boolean }>`
+  padding-inline-start: ${({ theme }) => theme.spacing.small};
+  margin-block-start: 0;
+  margin-block-end: ${({ theme }) => theme.spacing.xxsmall};
+  list-style: ${({ $ordered }) => ($ordered ? 'decimal' : 'disc')};
+
+  > li:not(:last-child) {
+    margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  }
+`;
+
+export const ListItem = styled(Text)`
+  display: list-item;
+`;
+
+export const ImageWrapper = styled.div<{
+  $marginBottom?: string;
+  $width?: string;
+  $maxWidth?: string;
+}>`
+  margin: 0 auto;
+  width: ${({ $width }) => $width || '100%'};
+  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
+
+  ${({ $marginBottom }) =>
+    $marginBottom &&
+    css`
+      margin-bottom: ${$marginBottom};
+    `};
+`;

package/src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import TextInput from './TextInput';
+
+export default {
+  component: TextInput,
+  title: 'Components/TextInput',
+  argTypes: {
+    defaultValue: { control: 'text' },
+  },
+};
+
+export const Default = args => <TextInput {...args} />;
+
+export const TelephoneInput = args => {
+  return (
+    <>
+      <TextInput label="Enter your number" type="tel" {...args} />
+      <TextInput
+        label="Only German numbers permitted"
+        type="tel"
+        {...args}
+        onlyCountries={['de']}
+      />
+    </>
+  );
+};
+
+export const InputWithOnSubmit = args => (
+  <TextInput
+    {...args}
+    onSubmit={() => {
+      return true;
+    }}
+  />
+);
+
+Default.args = {
+  placeholder: 'Insert your text',
+  id: 'text input id',
+  label: 'Text Input',
+  type: 'text',
+};