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

package/src/components/Icon/index.ts

@@ -0,0 +1,499 @@
+import {
+  accountIcon,
+  addToChatIcon,
+  appointmentIcon,
+  archiveIcon,
+  arrowLeftIcon,
+  attachmentIcon,
+  bellIcon,
+  calendarAddIcon,
+  calendarIcon,
+  callIncomingIcon,
+  callOutgoingIcon,
+  cameraIcon,
+  checkIcon,
+  checkInChatIcon,
+  chevronDownIcon,
+  chevronLeftIcon,
+  chevronRightIcon,
+  clockBackIcon,
+  clockDashedIcon,
+  clockIcon,
+  closeIcon,
+  copyIcon,
+  dashboardIcon,
+  dotsIcon,
+  downloadIcon,
+  exclamationIcon,
+  eyeClosedIcon,
+  eyeOpenIcon,
+  facebookIcon,
+  fullScreenExitIcon,
+  fullScreenIcon,
+  githubIcon,
+  groupChatIcon,
+  heartIcon,
+  imageIcon,
+  imageSearchIcon,
+  inclusiveIcon,
+  infoIcon,
+  instagramIcon,
+  linkedinIcon,
+  logoIcon,
+  logoutIcon,
+  mailIcon,
+  menuIcon,
+  messageIcon,
+  messageWithQuestionIcon,
+  micIcon,
+  mobileIcon,
+  moonIcon,
+  notesIcon,
+  pencilIcon,
+  phoneIcon,
+  phoneSlashIcon,
+  plusIcon,
+  profileChatIcon,
+  profileIcon,
+  puzzleIcon,
+  questionIcon,
+  sendIcon,
+  shareScreenIcon,
+  settingsIcon,
+  speakerIcon,
+  stackIcon,
+  starIcon,
+  sunIcon,
+  swapIcon,
+  telegramIcon,
+  tickDoubleIcon,
+  tickIcon,
+  tiktokIcon,
+  translatorIcon,
+  trashIcon,
+  twitterIcon,
+  uploadIcon,
+  userDisconnectedIcon,
+  userSearchIcon,
+  videoIcon,
+  webIcon,
+  whatsappIcon,
+  GradientTypes,
+} from '@a-little-world/little-world-design-system-core';
+
+import { createIconComponent } from './createIconComponent';
+
+export const AccountIcon = createIconComponent({
+  name: 'Account',
+  svgData: accountIcon,
+});
+
+export const AddToChatIcon = createIconComponent({
+  name: 'AddToChat',
+  svgData: addToChatIcon,
+  gradientType: GradientTypes.v3,
+});
+
+export const AppointmentIcon = createIconComponent({
+  name: 'Appointment',
+  svgData: appointmentIcon,
+});
+
+export const ArchiveIcon = createIconComponent({
+  name: 'Archive',
+  svgData: archiveIcon,
+});
+
+export const ArrowLeftIcon = createIconComponent({
+  name: 'ArrowLeft',
+  svgData: arrowLeftIcon,
+});
+
+export const AttachmentIcon = createIconComponent({
+  name: 'Attachment',
+  svgData: attachmentIcon,
+  gradientType: GradientTypes.v3,
+});
+
+export const BellIcon = createIconComponent({
+  name: 'Bell',
+  svgData: bellIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const CalendarIcon = createIconComponent({
+  name: 'Calendar',
+  svgData: calendarIcon,
+});
+
+export const CalendarAddIcon = createIconComponent({
+  name: 'CalendarAdd',
+  svgData: calendarAddIcon,
+});
+
+export const CallIncomingIcon = createIconComponent({
+  name: 'CallIncoming',
+  svgData: callIncomingIcon,
+});
+
+export const CallOutgoingIcon = createIconComponent({
+  name: 'CallOutgoing',
+  svgData: callOutgoingIcon,
+});
+
+export const CameraIcon = createIconComponent({
+  name: 'Camera',
+  svgData: cameraIcon,
+});
+
+export const CheckIcon = createIconComponent({
+  name: 'Check',
+  svgData: checkIcon,
+  gradientType: GradientTypes.v3,
+});
+
+export const CheckInChatIcon = createIconComponent({
+  name: 'CheckInChat',
+  svgData: checkInChatIcon,
+});
+
+export const ChevronDownIcon = createIconComponent({
+  name: 'ChevronDown',
+  svgData: chevronDownIcon,
+  gradientType: GradientTypes.v3,
+});
+
+export const ChevronLeftIcon = createIconComponent({
+  name: 'ChevronLeft',
+  svgData: chevronLeftIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const ChevronRightIcon = createIconComponent({
+  name: 'ChevronRight',
+  svgData: chevronRightIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const ClockIcon = createIconComponent({
+  name: 'Clock',
+  svgData: clockIcon,
+});
+
+export const ClockBackIcon = createIconComponent({
+  name: 'ClockBack',
+  svgData: clockBackIcon,
+});
+
+export const ClockDashedIcon = createIconComponent({
+  name: 'ClockDashed',
+  svgData: clockDashedIcon,
+});
+
+export const CloseIcon = createIconComponent({
+  name: 'Close',
+  svgData: closeIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const CopyIcon = createIconComponent({
+  name: 'Copy',
+  svgData: copyIcon,
+});
+
+export const DashboardIcon = createIconComponent({
+  name: 'Dashboard',
+  svgData: dashboardIcon,
+});
+
+export const DotsIcon = createIconComponent({
+  name: 'Dots',
+  svgData: dotsIcon,
+});
+
+export const DownloadIcon = createIconComponent({
+  name: 'Download',
+  svgData: downloadIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const ExclamationIcon = createIconComponent({
+  name: 'Exclamation',
+  svgData: exclamationIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const EyeClosedIcon = createIconComponent({
+  name: 'EyeClosed',
+  svgData: eyeClosedIcon,
+});
+
+export const EyeOpenIcon = createIconComponent({
+  name: 'EyeOpen',
+  svgData: eyeOpenIcon,
+});
+
+export const FacebookIcon = createIconComponent({
+  name: 'Facebook',
+  svgData: facebookIcon,
+});
+
+export const FullScreenExitIcon = createIconComponent({
+  name: 'FullScreenExit',
+  svgData: fullScreenExitIcon,
+});
+
+export const FullScreenIcon = createIconComponent({
+  name: 'FullScreen',
+  svgData: fullScreenIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const GithubIcon = createIconComponent({
+  name: 'Github',
+  svgData: githubIcon,
+});
+
+export const GroupChatIcon = createIconComponent({
+  name: 'GroupChat',
+  svgData: groupChatIcon,
+});
+
+export const HeartIcon = createIconComponent({
+  name: 'Heart',
+  svgData: heartIcon,
+});
+
+export const ImageIcon = createIconComponent({
+  name: 'Image',
+  svgData: imageIcon,
+});
+
+export const ImageSearchIcon = createIconComponent({
+  name: 'ImageSearch',
+  svgData: imageSearchIcon,
+});
+
+export const InclusiveIcon = createIconComponent({
+  name: 'Inclusive',
+  svgData: inclusiveIcon,
+});
+
+export const InfoIcon = createIconComponent({
+  name: 'Info',
+  svgData: infoIcon,
+});
+
+export const InstagramIcon = createIconComponent({
+  name: 'Instagram',
+  svgData: instagramIcon,
+});
+
+export const LinkedinIcon = createIconComponent({
+  name: 'Linkedin',
+  svgData: linkedinIcon,
+});
+
+export const Logo = createIconComponent({
+  name: 'Logo',
+  svgData: logoIcon,
+});
+
+export const LogoutIcon = createIconComponent({
+  name: 'Logout',
+  svgData: logoutIcon,
+});
+
+export const MailIcon = createIconComponent({
+  name: 'Mail',
+  svgData: mailIcon,
+});
+
+export const MenuIcon = createIconComponent({
+  name: 'Menu',
+  svgData: menuIcon,
+});
+
+export const MessageIcon = createIconComponent({
+  name: 'Message',
+  svgData: messageIcon,
+  gradientType: GradientTypes.v3,
+});
+
+export const MessageWithQuestionIcon = createIconComponent({
+  name: 'MessageWithQuestion',
+  svgData: messageWithQuestionIcon,
+  gradientType: GradientTypes.v3,
+});
+
+export const MicIcon = createIconComponent({
+  name: 'Mic',
+  svgData: micIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const MoonIcon = createIconComponent({
+  name: 'Moon',
+  svgData: moonIcon,
+});
+
+export const MobileIcon = createIconComponent({
+  name: 'Mobile',
+  svgData: mobileIcon,
+});
+
+export const NotesIcon = createIconComponent({
+  name: 'Notes',
+  svgData: notesIcon,
+});
+
+export const PencilIcon = createIconComponent({
+  name: 'Pencil',
+  svgData: pencilIcon,
+});
+
+export const PhoneIcon = createIconComponent({
+  name: 'Phone',
+  svgData: phoneIcon,
+});
+
+export const PhoneSlashIcon = createIconComponent({
+  name: 'PhoneSlash',
+  svgData: phoneSlashIcon,
+});
+
+export const PlusIcon = createIconComponent({
+  name: 'Plus',
+  svgData: plusIcon,
+});
+
+export const ProfileIcon = createIconComponent({
+  name: 'Profile',
+  svgData: profileIcon,
+});
+
+export const ProfileChatIcon = createIconComponent({
+  name: 'ProfileChat',
+  svgData: profileChatIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const PuzzleIcon = createIconComponent({
+  name: 'Puzzle',
+  svgData: puzzleIcon,
+});
+
+export const QuestionIcon = createIconComponent({
+  name: 'Question',
+  svgData: questionIcon,
+});
+
+export const SendIcon = createIconComponent({
+  name: 'Send',
+  svgData: sendIcon,
+});
+
+export const ScreenShareIcon = createIconComponent({
+  name: 'ScreenShare',
+  svgData: shareScreenIcon,
+});
+
+export const SettingsIcon = createIconComponent({
+  name: 'Settings',
+  svgData: settingsIcon,
+});
+
+export const SpeakerIcon = createIconComponent({
+  name: 'Speaker',
+  svgData: speakerIcon,
+});
+
+export const StackIcon = createIconComponent({
+  name: 'Stack',
+  svgData: stackIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const StarIcon = createIconComponent({
+  name: 'Star',
+  svgData: starIcon,
+});
+
+export const SunIcon = createIconComponent({
+  name: 'Sun',
+  svgData: sunIcon,
+});
+
+export const SwapIcon = createIconComponent({
+  name: 'Swap',
+  svgData: swapIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const TelegramIcon = createIconComponent({
+  name: 'Telegram',
+  svgData: telegramIcon,
+});
+
+export const TickDoubleIcon = createIconComponent({
+  name: 'TickDouble',
+  svgData: tickDoubleIcon,
+});
+
+export const TickIcon = createIconComponent({
+  name: 'Tick',
+  svgData: tickIcon,
+});
+
+export const TiktokIcon = createIconComponent({
+  name: 'Tiktok',
+  svgData: tiktokIcon,
+});
+
+export const TranslatorIcon = createIconComponent({
+  name: 'Translator',
+  svgData: translatorIcon,
+});
+
+export const TrashIcon = createIconComponent({
+  name: 'Trash',
+  svgData: trashIcon,
+});
+
+export const TwitterIcon = createIconComponent({
+  name: 'Twitter',
+  svgData: twitterIcon,
+});
+
+export const UploadIcon = createIconComponent({
+  name: 'Upload',
+  svgData: uploadIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const UserDisconnectedIcon = createIconComponent({
+  name: 'UserDisconnected',
+  svgData: userDisconnectedIcon,
+  gradientType: GradientTypes.v2,
+});
+
+export const UserSearchIcon = createIconComponent({
+  name: 'UserSearch',
+  svgData: userSearchIcon,
+});
+
+export const VideoIcon = createIconComponent({
+  name: 'Video',
+  svgData: videoIcon,
+  gradientType: GradientTypes.v1,
+});
+
+export const WebIcon = createIconComponent({
+  name: 'Web',
+  svgData: webIcon,
+});
+
+export const WhatsappIcon = createIconComponent({
+  name: 'Whatsapp',
+  svgData: whatsappIcon,
+});

package/src/components/Illustrations/Illustration.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { ImageLabel } from '../Icon/Icon';
+import { IllustrationProps } from '@a-little-world/little-world-design-system-core';
+
+export const Illustration = ({
+  children,
+  label,
+  labelVisible,
+  labelTop = '56px',
+}: IllustrationProps) => (
+  <>
+    {children}
+    <ImageLabel id={label} $visible={labelVisible} $top={labelTop}>
+      {label}
+    </ImageLabel>
+  </>
+);

package/src/components/Illustrations/Illustrations.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { tokensPixelated } from "@a-little-world/little-world-design-system-core";
+import Text from "../Text/Text";
+import * as allIllustrations from "./index";
+import styled from "styled-components";
+
+export default {
+  title: "Components/Illustrations",
+  argTypes: {
+    color: { control: "color" },
+    height: { control: "text" },
+    width: { control: "text" },
+  },
+};
+
+export const AllVariants = (args) => (
+  <div style={{ display: "flex", flexWrap: "wrap", gap: tokensPixelated.spacing.large }}>
+    {Object.entries(allIllustrations).map(([name, Component]) => (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: tokensPixelated.spacing.xxsmall,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "8px",
+          padding: "8px",
+          width: "200px",
+        }}
+        key={name}
+      >
+        <Component key={name} {...args} />
+        <Text>{name}</Text>
+      </div>
+    ))}
+  </div>
+);
+
+const StyledMatchSearching = styled(allIllustrations.MatchSearchingImage)`
+  height: 64px;
+  width: 64px;
+  background-color: red;
+`;
+
+export const StyledIllustration = (args) => {
+  return (
+    <div>
+      <Text>Icon should have custom styles applied: Red background and height of 64px</Text>
+      <StyledMatchSearching label="Stack Icon" />
+    </div>
+  )
+}

package/src/components/Illustrations/createIllustrationComponent.tsx

@@ -0,0 +1,39 @@
+import React, { SVGProps } from 'react';
+
+import { Illustration } from './Illustration';
+import { createReactSvg } from '../../utils/createReactSvg';
+import { SvgFactoryOptions } from '@a-little-world/little-world-design-system-core';
+
+export const createIllustrationComponent = ({
+  name,
+  svgData,
+}: SvgFactoryOptions) => {
+  const Component = ({
+    className,
+    color,
+    height,
+    width,
+    label,
+    labelVisible,
+  }: SVGProps<SVGElement> & {
+    label: string;
+    labelVisible?: boolean;
+    color?: string;
+  }) => {
+    return (
+      <Illustration label={label} labelVisible={labelVisible}>
+        {createReactSvg(svgData, {
+          className,
+          label,
+          width,
+          height,
+          color,
+        })}
+      </Illustration>
+    );
+  };
+
+  Component.displayName = `${name}Image`;
+
+  return Component;
+};

package/src/components/Illustrations/index.ts

@@ -0,0 +1,118 @@
+import {
+  brokenChainIllustration,
+  confettiIllustration,
+  friendshipIllustration,
+  groupHandsIllustration,
+  keyIllustration,
+  livingRoomIllustration,
+  laptopWithPhoneIllustration,
+  manOnRocketIllustration,
+  matchSearchingIllustration,
+  paperPlaneIllustration,
+  peopleTogetherIllustration,
+  questionMarksIllustration,
+  raisingMoneyIllustration,
+  teacherIllustration,
+  timeFlexibleIllustration,
+  unmatchedIllustration,
+  wavyLinesIllustration,
+  wavyBlockIllustration,
+  womanOnRocketIllustration,
+} from '@a-little-world/little-world-design-system-core';
+
+import { createIllustrationComponent } from './createIllustrationComponent';
+
+export const BrokenChainImage = createIllustrationComponent({
+  name: 'BrokenChain',
+  svgData: brokenChainIllustration,
+});
+
+export const ConfettiImage = createIllustrationComponent({
+  name: 'Confetti',
+  svgData: confettiIllustration,
+});
+
+export const FriendshipImage = createIllustrationComponent({
+  name: 'Friendship',
+  svgData: friendshipIllustration,
+});
+
+export const GroupHandsImage = createIllustrationComponent({
+  name: 'GroupHands',
+  svgData: groupHandsIllustration,
+});
+
+export const KeyImage = createIllustrationComponent({
+  name: 'Key',
+  svgData: keyIllustration,
+});
+
+export const LivingRoomImage = createIllustrationComponent({
+  name: 'LivingRoom',
+  svgData: livingRoomIllustration,
+});
+
+export const LaptopWithPhoneImage = createIllustrationComponent({
+  name: 'LaptopWithPhone',
+  svgData: laptopWithPhoneIllustration,
+});
+
+export const ManOnRocketImage = createIllustrationComponent({
+  name: 'ManOnRocket',
+  svgData: manOnRocketIllustration,
+});
+
+export const MatchSearchingImage = createIllustrationComponent({
+  name: 'MatchSearching',
+  svgData: matchSearchingIllustration,
+});
+
+export const PaperPlaneImage = createIllustrationComponent({
+  name: 'PaperPlane',
+  svgData: paperPlaneIllustration,
+});
+
+export const PeopleTogetherImage = createIllustrationComponent({
+  name: 'PeopleTogether',
+  svgData: peopleTogetherIllustration,
+});
+
+export const QuestionMarksImage = createIllustrationComponent({
+  name: 'QuestionMarks',
+  svgData: questionMarksIllustration,
+});
+
+export const RaisingMoneyImage = createIllustrationComponent({
+  name: 'RaisingMoney',
+  svgData: raisingMoneyIllustration,
+});
+
+export const TeacherImage = createIllustrationComponent({
+  name: 'Teacher',
+  svgData: teacherIllustration,
+});
+
+export const TimeFlexibleImage = createIllustrationComponent({
+  name: 'TimeFlexible',
+  svgData: timeFlexibleIllustration,
+});
+
+export const UnmatchedImage = createIllustrationComponent({
+  name: 'Unmatched',
+  svgData: unmatchedIllustration,
+});
+
+export const WavyBlockImage = createIllustrationComponent({
+  name: 'WavyBlock',
+  svgData: wavyBlockIllustration,
+});
+
+export const WavyLinesImage = createIllustrationComponent({
+  name: 'WavyLines',
+  svgData: wavyLinesIllustration,
+});
+
+export const WomanOnRocketImage = createIllustrationComponent({
+  name: 'WomanOnRocket',
+  svgData: womanOnRocketIllustration,
+});