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

package/src/components/Widget/AttachmentWidget.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import AttachmentWidget from './AttachmentWidget';
+
+export default {
+  title: 'Components/Widget/Attachment',
+  component: AttachmentWidget,
+};
+
+export const Default = args => <AttachmentWidget {...args} />;
+
+Default.args = {
+  imageSrc: 'https://patenmatch.de/_next/static/media/3.7cbb6de2.webp',
+};

package/src/components/Widget/AttachmentWidget.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import { AttachmentIcon, CameraIcon, DownloadIcon } from '../Icon';
+import Modal from '../Modal/Modal';
+import Text from '../Text/Text';
+import Widget, { Preview, WidgetProps, WidgetSizes } from './Widget';
+
+export const ImageSizes = {
+  xsmall: '72px',
+  small: '128px',
+  medium: '154px',
+  large: '180px',
+  flex: '100%',
+};
+
+const WidgetContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${WidgetSizes.Large};
+  height: auto;
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+const AttachmentDownload = styled.a`
+  display: inline-flex;
+  color: ${({ theme }) => theme.color.text.primary};
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  text-decoration: none;
+`;
+
+const ImageButton = styled.button`
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: 1rem;
+`;
+
+const Image = styled.img`
+  background-size: cover;
+  background-position: center;
+  border-radius: ${({ theme }) => theme.radius.small};
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  max-height: 100%;
+  max-width: 920px;
+`;
+
+const Caption = styled(Text)`
+  padding: 0 ${({ theme }) => theme.spacing.xxxsmall};
+  margin-top: ${({ theme }) => theme.spacing.xxxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+`;
+
+interface AttachmentWidgetProps extends Omit<WidgetProps, 'children'> {
+  attachmentTitle?: string;
+  attachmentLink?: string;
+  caption?: string;
+  imageSrc?: string;
+  isPreview?: boolean;
+}
+
+const AttachmentWidget = ({
+  attachmentTitle,
+  attachmentLink,
+  caption,
+  imageSrc,
+  isPreview,
+}: AttachmentWidgetProps) => {
+  const theme = useTheme();
+  const defaultTitle = imageSrc ? 'Photo' : 'File';
+  const title = attachmentTitle || defaultTitle;
+  const [viewImage, setViewImage] = React.useState(false);
+
+  if (isPreview)
+    return (
+      <Preview>
+        {imageSrc ? (
+          <CameraIcon label={'attachment icon'} width={16} />
+        ) : (
+          <AttachmentIcon label={'attachment icon'} width={12} />
+        )}
+        <Text disableParser>{title}</Text>
+      </Preview>
+    );
+
+  return (
+    <WidgetContainer>
+      <Widget width={WidgetSizes.Large} padding={imageSrc && '0px'}>
+        {imageSrc ? (
+          <>
+            <Modal open={viewImage} onClose={() => setViewImage(false)}>
+              <Image src={imageSrc} alt={title} />
+            </Modal>
+            <ImageButton onClick={() => setViewImage(true)}>
+              <Image src={imageSrc} alt={title} />
+            </ImageButton>
+          </>
+        ) : (
+          <ContentContainer>
+            <AttachmentIcon
+              label={'attachment icon'}
+              width={20}
+              height={20}
+              color={theme.color.text.tertiary}
+            />
+            <AttachmentDownload href={attachmentLink} download target="_blank">
+              <Text disableParser>{title}</Text>
+              <DownloadIcon
+                label={'download icon'}
+                width={20}
+                height={20}
+                color={theme.color.text.title}
+              />
+            </AttachmentDownload>
+          </ContentContainer>
+        )}
+      </Widget>
+      {caption && <Caption>{caption}</Caption>}
+    </WidgetContainer>
+  );
+};
+
+export default AttachmentWidget;

package/src/components/Widget/CallWidget.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import textParser from '../../utils/parser';
+import CallWidget from './CallWidget';
+
+export default {
+  title: 'Components/Widget/Call',
+  component: CallWidget,
+};
+
+export const Default = args => <CallWidget {...args} />;
+
+Default.args = {
+  header: 'Call',
+  description: '120 minutes',
+  isOutgoing: true,
+};
+
+export const Missed = args => (
+  <CallWidget header="Missed Call" isMissed description="Tap to call back" />
+);
+
+export const WithParser = args => (
+  <>
+    {textParser(
+      '<CallWidget { "header": "Call", "description": "20 mins", "isMissed": false }></CallWidget>',
+      {
+        customElements: [
+          {
+            tag: 'CallWidget',
+            Component: CallWidget,
+            props: { isOutgoing: true, returnCallLink: 'www.google.com' },
+          },
+        ],
+      },
+    )}
+  </>
+);

package/src/components/Widget/CallWidget.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import styled, { css, useTheme } from 'styled-components';
+
+import { CallIncomingIcon, CallOutgoingIcon } from '../Icon';
+import Text from '../Text/Text';
+import Widget, { Preview, WidgetProps, WidgetSizes } from './Widget';
+
+const CallDescription = styled(Text)`
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+
+const CallButton = styled.button`
+  display: flex;
+  align-items: center;
+  text-align: left;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  border-radius: ${({ theme }) => theme.radius.small};
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.color.text.primary};
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+
+const CallInfo = styled.div<{ $isPreview?: boolean }>`
+  ${({ $isPreview }) =>
+    !$isPreview &&
+    css`
+      margin-right: ${({ theme }) => theme.spacing.xsmall};
+    `}
+`;
+
+const CallIcon = ({
+  isPreview,
+  isOutgoing,
+  isMissed,
+}: {
+  isPreview?: boolean;
+  isOutgoing?: boolean;
+  isMissed?: boolean;
+}) => {
+  const theme = useTheme();
+
+  return isOutgoing ? (
+    <CallOutgoingIcon
+      label={''}
+      width={isPreview ? 12 : 20}
+      height={isPreview ? 12 : 20}
+      borderColor={theme.color.surface.secondary}
+      color={isMissed ? theme.color.status.error : theme.color.text.primary}
+      circular={!isPreview}
+    />
+  ) : (
+    <CallIncomingIcon
+      label={''}
+      width={isPreview ? 12 : 20}
+      height={isPreview ? 12 : 20}
+      borderColor={theme.color.surface.secondary}
+      color={isMissed ? theme.color.status.error : theme.color.text.primary}
+      circular={!isPreview}
+    />
+  );
+};
+
+interface CallWidgetProps extends Omit<WidgetProps, 'children'> {
+  description: string;
+  isPreview?: boolean;
+  isMissed?: boolean;
+  isOutgoing?: boolean;
+  onReturnCall?: () => void;
+}
+
+const CallWidget = ({
+  description,
+  header,
+  isMissed,
+  isOutgoing,
+  isPreview,
+  onReturnCall,
+  ...widgetProps
+}: CallWidgetProps) => {
+  if (isPreview)
+    return (
+      <Preview>
+        <CallIcon
+          isMissed={isMissed}
+          isOutgoing={isOutgoing}
+          isPreview={isPreview}
+        />
+        <Text>{header}</Text>
+      </Preview>
+    );
+
+  return (
+    <Widget width={WidgetSizes.Medium} {...widgetProps}>
+      <CallButton onClick={onReturnCall}>
+        <CallIcon isMissed={isMissed} isOutgoing={isOutgoing} />
+        <CallInfo>
+          <Text bold>{header}</Text>
+          {!isPreview && (
+            <CallDescription disableParser>
+              {description || 'N/A'}
+            </CallDescription>
+          )}
+        </CallInfo>
+      </CallButton>
+    </Widget>
+  );
+};
+
+export default CallWidget;

package/src/components/Widget/Widget.stories.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import Widget from './Widget';
+
+export default {
+  title: 'Components/Widget/Base',
+  component: Widget,
+};
+
+export const Default = args => <Widget {...args}>Blah Blah</Widget>;

package/src/components/Widget/Widget.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import { ValueOf } from '../../utils/types';
+import { TextTypes } from '@a-little-world/little-world-design-system-core';
+import {
+  WidgetDimensions,
+  WidgetSizes,
+} from '@a-little-world/little-world-design-system-core';
+
+export { WidgetSizes };
+
+const StyledWidget = styled.div<{
+  $borderColor?: string;
+  $height?: string;
+  $width?: WidgetSizes;
+  $padding?: string;
+}>`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${({ theme }) => theme.radius.medium};
+  background: rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 15px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: ${({ $width }) => ($width ? WidgetDimensions[$width] : '100%')};
+  height: ${({ $height }) => $height || 'auto'};
+  padding: ${({ theme, $padding }) => $padding || theme.spacing.xxsmall};
+`;
+
+const StyledWidgetHeader = styled.h3<{ $color?: string }>`
+  color: ${({ $color, theme }) => $color || theme.color.text.primary};
+  font-size: ${TextTypes.Heading4};
+  margin-bottom: ${({ theme }) => theme.spacing.xsmall};
+  text-align: center;
+`;
+
+export interface WidgetProps {
+  borderColor?: string;
+  children: React.ReactNode;
+  className?: string;
+  height?: string;
+  width?: ValueOf<typeof WidgetSizes>;
+  header?: string | React.ReactNode;
+  footer?: string | React.ReactNode;
+  padding?: string;
+}
+
+export const WidgetHeader: React.FC<{
+  align?: string;
+  children: React.ReactNode;
+  textColor?: string;
+}> = ({ children, textColor }) => (
+  <StyledWidgetHeader $color={textColor}>{children}</StyledWidgetHeader>
+);
+
+const Footer = styled.div<{ $align?: string }>`
+  display: flex;
+  order: 1;
+  margin-top: auto;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+
+  ${({ $align }) =>
+    $align &&
+    css`
+      justify-content: ${$align};
+    `};
+`;
+
+export const WidgetFooter: React.FC<{
+  align?: string;
+  children: React.ReactNode;
+}> = ({ children, align }) => <Footer $align={align}>{children}</Footer>;
+
+export const Preview = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+
+const Widget: React.FC<WidgetProps> = ({
+  borderColor,
+  children,
+  className,
+  footer,
+  header,
+  height,
+  padding,
+  width,
+}) => (
+  <StyledWidget
+    className={className}
+    $borderColor={borderColor}
+    $height={height}
+    $padding={padding}
+    $width={width}
+  >
+    {header && <WidgetHeader>{header}</WidgetHeader>}
+    {children}
+    {footer && <WidgetFooter>{footer}</WidgetFooter>}
+  </StyledWidget>
+);
+
+export default Widget;

package/src/globalStyles.ts

@@ -0,0 +1,68 @@
+// globalStyles.js
+import { createGlobalStyle } from 'styled-components';
+
+import { ThemeWeb } from '@a-little-world/little-world-design-system-core';
+
+const GlobalStyle = createGlobalStyle<{ theme: ThemeWeb }>`
+  html {
+    background: ${({ theme }) => theme.color.surface.background};
+  }  
+
+  body {
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    overflow-x: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: ${({ theme }) => theme.color.text.primary};
+    background: ${({ theme }) => theme.color.surface.background};
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+
+  button {
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    border: none;
+    font-size: 1rem;
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    margin: 0;
+    font-weight: normal;
+  }
+
+  ul {
+    margin-block-end: 0;
+    margin-block-start: 0;
+    list-style-type: none;
+    padding-inline-start: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  ::placeholder {
+    color: ${({ theme }) => theme.color.text.tertiary};
+  }
+`;
+
+export default GlobalStyle;

package/src/hooks/useAutosizeTextArea.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string,
+  expandable?: boolean,
+) => {
+  useEffect(() => {
+    if (textAreaRef && expandable) {
+      textAreaRef.style.height = '0px';
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      textAreaRef.style.height = scrollHeight + 'px';
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

package/src/index.ts

@@ -0,0 +1,107 @@
+import 'styled-components';
+import { ThemeWeb } from '@a-little-world/little-world-design-system-core';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends ThemeWeb {}
+}
+
+export {
+  default as Accordion,
+  AccordionContent,
+} from './components/Accordion/Accordion';
+export {
+  default as Button,
+  ButtonAppearance,
+  ButtonSizes,
+  ButtonVariations,
+} from './components/Button/Button';
+export { OPTION_BUTTON_CSS } from './components/Button/styles';
+export {
+  default as Card,
+  CardContent,
+  CardDimensions,
+  CardSizes,
+  CardFooter,
+  CardHeader,
+} from './components/Card/Card';
+export { default as Checkbox } from './components/Checkbox/Checkbox';
+export { default as CheckboxGrid } from './components/CheckboxGrid/CheckboxGrid';
+export { default as Dropdown } from './components/Dropdown/Dropdown';
+
+export { default as MultiDropdown } from './components/MultiDropdown/MultiDropdown';
+export * from './components/Icon';
+export * from './components/Illustrations';
+export { default as InputError } from './components/InputError/InputError';
+export { default as Label } from './components/Label/Label';
+export { default as Link } from './components/Link/Link';
+export { default as Loading, LoadingSizes } from './components/Loading/Loading';
+export { default as Modal } from './components/Modal/Modal';
+export { default as MultiCheckbox } from './components/MultiCheckbox/MultiCheckbox';
+export { default as MultiSelection } from './components/MultiSelection/MultiSelection';
+export {
+  NavigationMenu,
+  NavigationMenuCallout,
+  NavigationMenuContent,
+  NavigationMenuContentItem,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+  MenuContentLayout,
+} from './components/NavigationMenu/NavigationMenu';
+export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
+export { default as Popover } from './components/Popover/Popover';
+export { default as InfoPopover } from './components/Popover/InfoPopover';
+export { default as RadioGroup } from './components/RadioGroup/RadioGroup';
+export { default as Separator } from './components/Separator/Separator';
+export { default as Slider } from './components/Slider/Slider';
+export {
+  default as StarRating,
+  StarRatingSizes,
+} from './components/StarRating/StarRating';
+export { default as StatusMessage } from './components/StatusMessage/StatusMessage';
+export { default as Switch } from './components/Switch/Switch';
+export { default as Tags, Tag } from './components/Tags/Tags';
+export { default as Text } from './components/Text/Text';
+
+export {
+  default as TextArea,
+  TextAreaSize,
+} from './components/TextArea/TextArea';
+export {
+  default as TextContent,
+  ContentTypes,
+} from './components/TextContent/TextContent';
+export {
+  default as TextInput,
+  InputHeight,
+  InputWidth,
+} from './components/TextInput/TextInput';
+export { default as Toast } from './components/Toast/Toast';
+export { ToastProvider, ToastViewport } from './components/Toast/styles';
+export { default as Tooltip } from './components/Tooltip/Tooltip';
+export { default as CallWidget } from './components/Widget/CallWidget';
+export { default as Widget, WidgetSizes } from './components/Widget/Widget';
+export { default as AttachmentWidget } from './components/Widget/AttachmentWidget';
+
+export { CustomThemeProvider, themeContext } from './theme';
+export { default as GlobalStyles } from './globalStyles';
+export { default as textParser } from './utils/parser';
+export { pixelate } from './utils/styles';
+
+// types
+export type { TextStyle } from './components/Text/types';
+export type {
+  ThemeWeb,
+  ToastBaseProps,
+} from '@a-little-world/little-world-design-system-core';
+
+// export core elements
+export {
+  Gradients,
+  StatusTypes,
+  TagSizes,
+  TagAppearance,
+  TextTypes,
+  ThemeVariants,
+  tokensPixelated as tokens,
+} from '@a-little-world/little-world-design-system-core';

package/src/setupTests.ts

@@ -0,0 +1,8 @@
+// Polyfill for TextEncoder in Node.js environment
+if (typeof global.TextEncoder === 'undefined') {
+  const { TextEncoder, TextDecoder } = require('util');
+  global.TextEncoder = TextEncoder;
+  global.TextDecoder = TextDecoder;
+}
+
+import '@testing-library/jest-dom';