@payfit/unity-illustrations 2.55.21 → 2.55.23

package/src/components/lazy-illustration/figma/LazyIllustrationSmall.figma.ts

@@ -1,255 +0,0 @@
-// url=https://www.figma.com/design/NYcgOc3qMmcEDNqD6kD8J4?node-id=214-3597
-// component=LazyIllustration
-// source=https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/illustrations/src/components/lazy-illustration/LazyIllustration.tsx
-
-/**
- * AUTO-GENERATED - DO NOT EDIT
- *
- * Template file for Figma Code Connect - LazyIllustration component (Small)
- *
- * Handles dynamic mapping of:
- * - Name property -> PascalCase code name
- * - Type property -> "EmptyState" prefix for empty-state type
- * - With background property -> "WithBackground" suffix
- */
-
-import figma from 'figma'
-const instance = figma.selectedInstance
-
-const nameValue = instance.getEnum('Name', {
-  accounting: 'Accounting',
-  activation_button: 'ActivationButton',
-  activation_toggle: 'ActivationToggle',
-  add_employee: 'AddEmployee',
-  administrative_document: 'AdministrativeDocument',
-  alphabet_cube: 'AlphabetCube',
-  analysis: 'Analysis',
-  annual_taxes: 'AnnualTaxes',
-  automation_in_progress: 'AutomationInProgress',
-  baby_bottle: 'BabyBottle',
-  bell: 'Bell',
-  bicycle: 'Bicycle',
-  big_idea: 'BigIdea',
-  binoculars: 'Binoculars',
-  biscuit: 'Biscuit',
-  biscuit_crumbs: 'BiscuitCrumbs',
-  blank_payslip: 'BlankPayslip',
-  book: 'Book',
-  box: 'Box',
-  brainstorming: 'Brainstorming',
-  buoy: 'Buoy',
-  calculator: 'Calculator',
-  calendar: 'Calendar',
-  card: 'Card',
-  character_headphone: 'CharacterHeadphone',
-  chat: 'Chat',
-  checkbox: 'Checkbox',
-  christmas_sock: 'ChristmasSock',
-  christmas_sock_and_confettis: 'ChristmasSockAndConfettis',
-  clock: 'Clock',
-  closed_lock: 'ClosedLock',
-  collaboration: 'Collaboration',
-  collective_research: 'CollectiveResearch',
-  computer_documentation: 'ComputerDocumentation',
-  computer_mail: 'ComputerMail',
-  confetti_cannon: 'ConfettiCannon',
-  confettis: 'Confettis',
-  contact: 'Contact',
-  contract_signature: 'ContractSignature',
-  conversation: 'Conversation',
-  cross_legged: 'CrossLegged',
-  cup_of_coffee: 'CupOfCoffee',
-  dancing: 'Dancing',
-  dancing_people: 'DancingPeople',
-  dancing_skier: 'DancingSkier',
-  data: 'Data',
-  desert: 'Desert',
-  dialogue: 'Dialogue',
-  discount: 'Discount',
-  discussion: 'Discussion',
-  doctor: 'Doctor',
-  document: 'Document',
-  document_creation: 'DocumentCreation',
-  document_error: 'DocumentError',
-  document_filing: 'DocumentFiling',
-  document_scan: 'DocumentScan',
-  document_scanning: 'DocumentScanning',
-  e_signature: 'ESignature',
-  email_login: 'EmailLogin',
-  email_notification: 'EmailNotification',
-  emergency_contact: 'EmergencyContact',
-  employment_contract: 'EmploymentContract',
-  empty_document: 'EmptyDocument',
-  empty_folder: 'EmptyFolder',
-  empty_state: 'EmptyState',
-  evaluation: 'Evaluation',
-  exceeding_threshold: 'ExceedingThreshold',
-  exceptional_compensation: 'ExceptionalCompensation',
-  expenses: 'Expenses',
-  FAQ: 'FAQ',
-  field_glasses: 'FieldGlasses',
-  filing_documents: 'FilingDocuments',
-  flowchart: 'Flowchart',
-  free_share: 'FreeShare',
-  full_calendar: 'FullCalendar',
-  gear: 'Gear',
-  gift: 'Gift',
-  golden_ribbon: 'GoldenRibbon',
-  graph: 'Graph',
-  graphic: 'Graphic',
-  half_calendar: 'HalfCalendar',
-  hammer: 'Hammer',
-  hand_hello: 'HandHello',
-  hands: 'Hands',
-  happy_character: 'HappyCharacter',
-  health: 'Health',
-  health_insurance: 'HealthInsurance',
-  high_five: 'HighFive',
-  highlight_books: 'HighlightBooks',
-  holiday_voucher: 'HolidayVoucher',
-  idea: 'Idea',
-  identity_card: 'IdentityCard',
-  incident_panel: 'IncidentPanel',
-  indicate_something: 'IndicateSomething',
-  information_update: 'InformationUpdate',
-  JEI_JEU_JEC: 'JeiJeuJec',
-  jetlang_calculator: 'JetlangCalculator',
-  kanoon: 'Kanoon',
-  kpmg: 'Kpmg',
-  legal_help: 'LegalHelp',
-  letter_box: 'LetterBox',
-  library: 'Library',
-  light_bulb: 'LightBulb',
-  little_rocket: 'LittleRocket',
-  lunch_voucher: 'LunchVoucher',
-  magnifying_glass: 'MagnifyingGlass',
-  maintenance: 'Maintenance',
-  marteler: 'Marteler',
-  meal_plate: 'MealPlate',
-  meal_voucher: 'MealVoucher',
-  meal_voucher_card: 'MealVoucherCard',
-  mobility: 'Mobility',
-  money_lending: 'MoneyLending',
-  moon: 'Moon',
-  mug: 'Mug',
-  notes: 'Notes',
-  official_letter: 'OfficialLetter',
-  open_lock: 'OpenLock',
-  organismes_payment: 'OrganismesPayment',
-  paid_leave: 'PaidLeave',
-  panel: 'Panel',
-  paper_plane: 'PaperPlane',
-  party: 'Party',
-  payfitters_with_badge: 'PayfittersWithBadge',
-  payment_information: 'PaymentInformation',
-  payroll_error: 'PayrollError',
-  payslip: 'Payslip',
-  payslip_coins: 'PayslipCoins',
-  pen: 'Pen',
-  people: 'People',
-  performance: 'Performance',
-  performance_discussion: 'PerformanceDiscussion',
-  person: 'Person',
-  person_headphone: 'PersonHeadphone',
-  personal_details: 'PersonalDetails',
-  phone_message: 'PhoneMessage',
-  piggy_bank: 'PiggyBank',
-  piggy_bank_coins: 'PiggyBankCoins',
-  planet: 'Planet',
-  plant: 'Plant',
-  post_it: 'PostIt',
-  progression: 'Progression',
-  promotion: 'Promotion',
-  provident_scheme: 'ProvidentScheme',
-  puzzle: 'Puzzle',
-  puzzle_piece: 'PuzzlePiece',
-  reading_a_book: 'ReadingABook',
-  receiving_pay: 'ReceivingPay',
-  rehire_employee: 'RehireEmployee',
-  remote: 'Remote',
-  remote_work: 'RemoteWork',
-  report: 'Report',
-  research: 'Research',
-  rocket: 'Rocket',
-  safe_deposit_box: 'SafeDepositBox',
-  salary: 'Salary',
-  salary_advance: 'SalaryAdvance',
-  salary_payment: 'SalaryPayment',
-  salary_seizure: 'SalarySeizure',
-  sale: 'Sale',
-  sand_castle: 'SandCastle',
-  schedule: 'Schedule',
-  security_fields: 'SecurityFields',
-  set_up_task: 'SetUpTask',
-  setting_slider: 'SettingSlider',
-  sick_leave: 'SickLeave',
-  signature: 'Signature',
-  sitting_on_the_sofa: 'SittingOnTheSofa',
-  small_puzzle: 'SmallPuzzle',
-  smiling_character: 'SmilingCharacter',
-  solve_problem: 'SolveProblem',
-  speaker_fingertips: 'SpeakerFingertips',
-  speaker_welcome: 'SpeakerWelcome',
-  speaker_with_microphone: 'SpeakerWithMicrophone',
-  spreadsheet: 'Spreadsheet',
-  stack_of_book_2: 'StackOfBook2',
-  stair_treads: 'StairTreads',
-  stethoscope: 'Stethoscope',
-  stock_options: 'StockOptions',
-  stopwatch: 'Stopwatch',
-  sunshade: 'Sunshade',
-  taking_note: 'TakingNote',
-  target: 'Target',
-  task_to_do: 'TaskToDo',
-  team_building: 'TeamBuilding',
-  telescope: 'Telescope',
-  template: 'Template',
-  template_form: 'TemplateForm',
-  thumbsup: 'Thumbsup',
-  thumbtack: 'Thumbtack',
-  time_tracking: 'TimeTracking',
-  timer: 'Timer',
-  tips_jar: 'TipsJar',
-  to_do: 'ToDo',
-  toggle_off: 'ToggleOff',
-  toggle_on: 'ToggleOn',
-  token_coin: 'TokenCoin',
-  trophy: 'Trophy',
-  trophy_won: 'TrophyWon',
-  validation_window: 'ValidationWindow',
-  visually_impaired: 'VisuallyImpaired',
-  visually_impaired_winter: 'VisuallyImpairedWinter',
-  walking_people: 'WalkingPeople',
-  winter_party: 'WinterParty',
-  work_at_office: 'WorkAtOffice',
-  work_expense: 'WorkExpense',
-  work_from_anywhere: 'WorkFromAnywhere',
-  working_time: 'WorkingTime',
-  wrench: 'Wrench',
-  write_book: 'WriteBook',
-})
-
-const typeValue = instance.getEnum('Type', {
-  generic: 'generic',
-  specific: 'specific',
-  'empty-state': 'empty-state',
-})
-
-const withBackgroundValue = instance.getBoolean('With background')
-const nameWithType =
-  typeValue === 'empty-state' ? `EmptyState${nameValue ?? ''}` : nameValue
-const finalSrc = withBackgroundValue
-  ? `${nameWithType}WithBackground`
-  : nameWithType
-
-const code = figma.tsx`<LazyIllustration
-  src="${finalSrc}"
-  variant="picture"
-  alt="${finalSrc} illustration"
-/>`
-
-export default {
-  id: 'lazyillustration-small',
-  example: code,
-  imports: ["import { LazyIllustration } from '@payfit/unity-illustrations'"],
-}

package/src/docs/1-Introduction/1-Welcome.mdx

@@ -1,111 +0,0 @@
-import { Meta, Subtitle } from '@storybook/addon-docs/blocks'
-import { Card, CardWithCover, CardHeader, CardTitle, CardContent, CardActions, Link } from '../blocks/Cards'
-
-<Meta title="Introduction/1-Welcome" />
-
-<img src="/images/unity-illustrations-cover.jpg" alt="Unity illustrations cover" style={{ width: '100%', marginBottom: '2rem' }} />
-
-# Unity Illustrations
-
-<Subtitle>Unity Illustrations is the Illustration library for the Unity Design system. Illustrations are scalable graphics that can be used to represent concepts, objects, or actions, and create visual interest and appeal. They can be static or animated.</Subtitle>
-
-<section className="uy:grid uy:grid-cols-1 uy:gap-150 uy:sm:grid-cols-2">
-    <Card>
-        <CardHeader>
-            <CardTitle>Getting Started</CardTitle>
-        </CardHeader>
-        <CardContent>
-            <p className="sb-unstyled uy:m-0">Set up a new project with Unity Illustrations or add it to an existing project.</p>
-        </CardContent>
-        <CardActions>
-            <Link href="/?path=/docs/introduction-2-getting-started--docs">Get Started</Link>
-        </CardActions>
-    </Card>
-    <Card>
-        <CardHeader>
-            <CardTitle>Usage</CardTitle>
-        </CardHeader>
-        <CardContent>
-            <p className="sb-unstyled uy:m-0">Learn how to use the Illustrations in your project.</p>
-        </CardContent>
-        <CardActions>
-            <Link href="/?path=/docs/introduction-3-usage--docs">Learn to use</Link>
-        </CardActions>
-    </Card>
-</section>
-
-## Our approach
-
-### Performant
-
-Unity Illustrations are designed to be lightweight and tree-shakable, ensuring that you only bundle the illustrations you need.
-
-### Easy to use
-
-Unity Illustrations are easy to use and integrate into your project. You can use them in any React project.
-
-### Accessible
-
-Unity Illustrations are built with accessibility in mind and follow the best practices for creating accessible illustrations.
-
-## Related packages
-
-Unity Illustrations is part of the Unity Design System, and is particularly thought out to work with the Unity components library. Here are the main packages you might want to use in conjunction with Unity Illustrations:
-
-<section className="uy:grid uy:grid-cols-1 uy:gap-150 uy:sm:grid-cols-2">
-    <CardWithCover coverSrc="images/unity-themes-cover.png" coverAlt="Unity themes">
-        <CardHeader>
-            <CardTitle>Unity themes</CardTitle>
-        </CardHeader>
-        <CardContent>
-            <p className="sb-unstyled uy:m-0">
-                Unity themes provides the base implementation of the foundational principles of the Unity Design system as a TailwindCSS preset.
-            </p>
-        </CardContent>
-        <CardActions>
-            <Link href="https://unity-theme.payfit.io/" target="_blank" rel="noopener noreferrer">Visit Unity themes</Link>
-        </CardActions>
-    </CardWithCover>
-    <CardWithCover coverSrc="images/unity-components-cover.png" coverAlt="Unity components">
-        <CardHeader>
-            <CardTitle>Unity components</CardTitle>
-        </CardHeader>
-        <CardContent>
-            <p className="sb-unstyled uy:m-0">
-                Unity components is a library of React components that implement the Unity Design system.
-            </p>
-        </CardContent>
-        <CardActions>
-            <Link href="https://unity-components.payfit.io/" target="_blank" rel="noopener noreferrer">Visit Unity components</Link>
-        </CardActions>
-    </CardWithCover>
-</section>
-
-## Need help?
-
-If you have any questions or a request related to Unity Illustrations, feel free to reach out to the Frontend Framework team on Slack. If you need to know more about the foundations and guidelines of Unity, visit the design system's main documentation.
-
-<section className="uy:grid uy:grid-cols-1 uy:gap-150 uy:sm:grid-cols-2">
-    <Card>
-        <CardHeader>
-            <CardTitle>Contact the team</CardTitle>
-        </CardHeader>
-        <CardContent>
-            <p className="sb-unstyled uy:m-0">Send us any questions, help requests or bug reports to The Front-end Framework's team slack channel</p>
-        </CardContent>
-        <CardActions>
-            <Link href="https://payfit.slack.com/archives/C05UJ6A1FJT" target="_blank" rel="noopener noreferrer">#ask-frontend-framework</Link>
-        </CardActions>
-    </Card>
-    <Card>
-        <CardHeader>
-            <CardTitle>Payfit.design</CardTitle>
-        </CardHeader>
-        <CardContent>
-            <p className="sb-unstyled uy:m-0">Learn more about the design foundation and component usage guidelines of Unity</p>
-        </CardContent>
-        <CardActions>
-            <Link href="https://www.payfit.design/24f360409/p/35fcc1-payfit-design-system" target="_blank" rel="noopener noreferrer">Visit payfit.design</Link>
-        </CardActions>
-    </Card>
-</section>

package/src/docs/1-Introduction/2-Getting Started.mdx

@@ -1,25 +0,0 @@
-import {Meta} from "@storybook/addon-docs/blocks";
-
-<Meta title="Introduction/2-Getting Started" />
-
-# Getting Started
-
-## Installation
-
-Install the package in your project. We recommend you use this package alongside `@payfit/unity-themes`.
-
-```bash
-yarn add @payfit/unity-themes @payfit/unity-illustrations
-```
-
-Ensure that `react` and `react-dom` are also installed in your project:
-
-```bash
-yarn add react react-dom
-```
-
-You are now ready to use the illustrations in your application.
-
-## Browser Support
-
-This package supports all modern evergreen browsers. It does not support IE.

package/src/docs/1-Introduction/3-Usage.mdx

@@ -1,114 +0,0 @@
-import {Meta} from "@storybook/addon-docs/blocks";
-
-<Meta title="Introduction/3-Usage" />
-
-# Usage
-
-Unity illustrations has two main concepts:
-
-- Import the illustration asset you want to use from `@payfit/unity-illustrations` as a direct import
-- Render any illustration asset with the `Illustration` component
-- Render an illustration by name with `LazyIllustration` when you want the asset to be loaded on demand
-
-```tsx
-import { Illustration } from '@payfit/unity-illustrations'
-import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'
-
-function MyComponent() {
-  return <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" />
-}
-```
-
-You can customize the illustration's size and other properties using the class names from `@payfit/unity-themes`.
-
-```tsx
-import { Illustration } from '@payfit/unity-illustrations'
-import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'
-
-function MyComponent() {
-  // Square illustration with dimension --uy:spacing-600 (48px)
-  return <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" className="uy:size-600" />
-}
-```
-
-## API
-
-### Individual imports
-
-The illustrations library exports all the illustrations as named imports, referencing the underlying SVG or Image asset internally. This allows you to use the illustrations in your project without bundling the entire library, and to have better discoverability and type-safety over the assets that you can use.
-
-```tsx
-import { Illustration } from '@payfit/unity-illustrations'
-import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'
-
-function MyComponent() {
-  return <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" />
-}
-```
-
-### Brand-aware rendering
-
-Static SVG illustrations can carry legacy and rebrand URLs. `Illustration` reads the active Unity theme from `UnityThemeProvider` and chooses `asset.urls[theme]` when it exists, falling back to `asset.url`.
-
-```tsx
-import { UnityThemeProvider } from '@payfit/unity-themes'
-import { Illustration } from '@payfit/unity-illustrations'
-import DashboardIllustration from '@payfit/unity-illustrations/assets/Dashboard'
-
-function MyComponent() {
-  return (
-    <UnityThemeProvider theme="rebrand">
-      <Illustration src={DashboardIllustration} alt="Dashboard illustration" variant="picture" />
-    </UnityThemeProvider>
-  )
-}
-```
-
-The generated `asset.url` field is kept for backwards compatibility. For assets present in both catalogs, it points to the legacy/default SVG. For assets that exist only in rebrand, `asset.url`, `asset.urls.legacy`, and `asset.urls.rebrand` all point to the rebrand SVG. Use `Illustration` or `LazyIllustration` when the rendered image must follow the active Unity theme.
-
-`LazyIllustration` follows the same theme-aware behavior after it loads the requested asset by name.
-
-```tsx
-import { UnityThemeProvider } from '@payfit/unity-themes'
-import { LazyIllustration } from '@payfit/unity-illustrations'
-
-function MyComponent() {
-  return (
-    <UnityThemeProvider theme="rebrand">
-      <LazyIllustration name="Dashboard" alt="Dashboard illustration" variant="picture" />
-    </UnityThemeProvider>
-  )
-}
-```
-
-### Dynamic imports
-
-Use `LazyIllustration` to import illustrations on demand. This is useful if you want to load illustrations only when they are needed or under certain dynamic conditions.
-
-```tsx
-import { LazyIllustration } from '@payfit/unity-illustrations'
-
-function MyComponent() {
-  return <LazyIllustration name="Dashboard" alt="Dashboard illustration" variant="picture" className="uy:size-600" />
-}
-```
-
-> **Note:** Avoid using variables in dynamic imports, like `const Dashboard = await import('@payfit/unity-illustrations/${illustrationName}')`, as it will not be able to be tree-shaken.
-
-## TypeScript Support
-
-This package includes TypeScript definitions, and a list of all the available illustration names is exported as a type.
-
-```tsx
-import { type UnityIllustrationName, illustrationNames } from '@payfit/unity-illustrations'
-
-const myIllustrations: UnityIllustrationName[] = ['Dashboard', 'FAQ', 'Library']
-
-console.log(illustrationNames) // ['Dashboard', 'DashboardOutlined', ...+309 illustrations more]
-```
-
-## Asset layout
-
-The legacy catalog lives under `assets/legacy/`. Static rebrand SVGs live directly under `assets/rebrand/` and are paired with legacy assets by the same logical name derivation used for generated imports.
-
-Every legacy SVG must have a rebrand SVG with the same generated name. Extra rebrand-only SVGs are allowed and generate assets whose default, legacy, and rebrand URLs all use the rebrand source. Static brand-aware illustrations are SVG-only; raster density variants are out of scope for this launch. Animated WEBP illustrations keep their existing generated image contract and do not need theme-specific URLs.

package/src/docs/1-Introduction/4-Changelog.mdx

@@ -1,6 +0,0 @@
-import {Meta, Markdown} from "@storybook/addon-docs/blocks";
-import changelog from '../../../CHANGELOG.md?raw';
-
-<Meta title="Introduction/4-Changelog" />
-
-<Markdown>{changelog}</Markdown>

package/src/docs/2-Reference/1-Find my illustration.mdx

@@ -1,12 +0,0 @@
-import {Meta} from "@storybook/addon-docs/blocks";
-import IllustrationLibrary from "../blocks/IllustrationLibrary"
-
-<Meta title="Reference/Find my illustration" />
-
-# Find my illustration
-
-Unity Illustrations is made up of more than 200 SVG illustrations and animated images. Each illustration is referenced by its name in Pascal Case. You can look for the illustration you need in the table using the search field.
-
-Refer to the [Usage](/?path=/docs/introduction-3-usage--docs) section to learn how to use the names to render icons in your application.
-
-<IllustrationLibrary />

package/src/docs/2-Reference/2-Find my animation.mdx

@@ -1,14 +0,0 @@
-import {Meta} from "@storybook/addon-docs/blocks";
-import AnimationLibrary from "../blocks/AnimationLibrary"
-
-<Meta title="Reference/Find my animation" />
-
-# Find my animation
-
-Unity Illustrations includes a collection of animated illustrations in WEBP format. Each animated illustration has the `Animation` suffix in its name and follows the same usage patterns as static illustrations. You can browse and search for the animation you need in the gallery below.
-
-Animated illustrations are fluid and responsive, but capped at their original dimensions to prevent oversizing. They use CSS custom properties to maintain optimal aspect ratios across different screen sizes.
-
-Refer to the [Usage](/?path=/docs/introduction-3-usage--docs) section to learn how to use animation names to render them in your application.
-
-<AnimationLibrary />