@payfit/unity-illustrations 2.49.1 → 2.50.1

package/src/components/illustration/figma/IllustrationSmall.figma.ts

@@ -0,0 +1,258 @@
+// url=https://www.figma.com/design/NYcgOc3qMmcEDNqD6kD8J4?node-id=214-3597
+// component=Illustration
+// source=https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/illustrations/src/components/illustration/Illustration.tsx
+
+/**
+ * AUTO-GENERATED - DO NOT EDIT
+ *
+ * Template file for Figma Code Connect - Illustration 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`<Illustration
+  src={${finalSrc}}
+  variant="picture"
+  alt="${finalSrc} illustration"
+/>`
+
+export default {
+  id: 'illustration-small',
+  example: code,
+  imports: [
+    "import { Illustration } from '@payfit/unity-illustrations'",
+    `import ${finalSrc} from '@payfit/unity-illustrations/assets/${finalSrc}'`,
+  ],
+}

package/src/components/lazy-illustration/LazyIllustration.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
+import { UnityThemeProvider } from '@payfit/unity-themes'
+
 import { LazyIllustration } from './LazyIllustration'
 
 /**
@@ -138,6 +140,45 @@ export const IconVariant: Story = {
   },
 }
 
+/**
+ * LazyIllustration keeps the same logical name API while still resolving theme-aware illustration URLs.
+ * The loaded asset is delegated to Illustration, so switching the active Unity theme updates the rendered source when a themed variant exists.
+ */
+export const ThemeVariants: Story = {
+  render: () => {
+    return (
+      <div className="uy:flex uy:flex-wrap uy:items-start uy:gap-400">
+        <UnityThemeProvider theme="legacy">
+          <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
+            <LazyIllustration
+              name="FAQ"
+              variant="icon"
+              size="lg"
+              alt="FAQ legacy icon"
+            />
+            <span className="uy:typography-caption uy:text-content-secondary">
+              legacy
+            </span>
+          </div>
+        </UnityThemeProvider>
+        <UnityThemeProvider theme="rebrand">
+          <div className="uy:flex uy:flex-col uy:items-center uy:gap-150">
+            <LazyIllustration
+              name="FAQ"
+              variant="icon"
+              size="lg"
+              alt="FAQ rebrand icon"
+            />
+            <span className="uy:typography-caption uy:text-content-secondary">
+              rebrand
+            </span>
+          </div>
+        </UnityThemeProvider>
+      </div>
+    )
+  },
+}
+
 /**
  * You can create responsive illustrations that adapt to different screen sizes
  * by using responsive Tailwind classes in the className prop.

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

@@ -0,0 +1,255 @@
+// url=https://www.figma.com/design/NYcgOc3qMmcEDNqD6kD8J4?node-id=216-3916
+// 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 (Large)
+ *
+ * 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-large',
+  example: code,
+  imports: ["import { LazyIllustration } from '@payfit/unity-illustrations'"],
+}