New illustrations and icons (#600)

* new illustrations and icons

* style: New illustrations and icons
New category for some illustrations called "instruction".
New icons for "Intercom" and "License reg"

---------

Co-authored-by: Rebecca Lindblom <rebecca.lindblom@axis.com>

Author: markuslindmark

README.md

@@ -89,6 +89,12 @@ Make sure you have node and pnpm installed.
    pnpm dev
    ```
 
+### Getting access for development
+To be able to push:
+* You need to be a member of the GitHub organization AxisCommunications. You can request that in ServiceNow, access to GitHub and choose "GitHub Cloud for open source development". Read more about the requirements in ServiceNow.
+* You need to be added to a writers group by a current admin, contact recent contributors in this repo.
+* You need to set up [signing for commits](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits).
+
 ### Development
 
 The following is one example of how to use a local version while developing.

biome.json

@@ -10,7 +10,12 @@
       "**/*.ts",
       "**/*.tsx"
     ],
-    "ignore": ["lib/", "lib-commonjs/", ".vscode/"]
+    "ignore": [
+      "lib/",
+      "lib-commonjs/",
+      ".vscode/",
+      "illustrations/src/illustrations/"
+    ]
   },
   "organizeImports": {
     "enabled": true,

components/empty-view/src/constants.ts

@@ -35,8 +35,6 @@ import {
   DocumentsLight,
   DoorErrorDark,
   DoorErrorLight,
-  DragMenuItemDark,
-  DragMenuItemLight,
   EmailSentDark,
   EmailSentLight,
   EmptyFolderDark,
@@ -55,6 +53,44 @@ import {
   GridLocationLight,
   ImportExcelDark,
   ImportExcelLight,
+  InstructionConditionalDark,
+  InstructionConditionalLight,
+  InstructionCrosslineCountingDark,
+  InstructionCrosslineCountingLight,
+  InstructionDragMenuItemDark,
+  InstructionDragMenuItemLight,
+  InstructionFallDetectionDark,
+  InstructionFallDetectionLight,
+  InstructionHardHatDetectionDark,
+  InstructionHardHatDetectionLight,
+  InstructionHighSpeedApproachingTrafficDark,
+  InstructionHighSpeedApproachingTrafficLight,
+  InstructionHighSpeedOneWayDark,
+  InstructionHighSpeedOneWayLight,
+  InstructionLineCrossingDark,
+  InstructionLineCrossingLight,
+  InstructionMenuItemFocusDark,
+  InstructionMenuItemFocusLight,
+  InstructionMigrateSystemDark,
+  InstructionMigrateSystemLight,
+  InstructionMotionInAreaDark,
+  InstructionMotionInAreaLight,
+  InstructionMotionLineCrossingDark,
+  InstructionMotionLineCrossingLight,
+  InstructionNewSystemDark,
+  InstructionNewSystemLight,
+  InstructionObjectInAreaDark,
+  InstructionObjectInAreaLight,
+  InstructionOccupancyInAreaDark,
+  InstructionOccupancyInAreaLight,
+  InstructionSearchDark,
+  InstructionSearchLight,
+  InstructionTailgatingDetectionDark,
+  InstructionTailgatingDetectionLight,
+  InstructionTimeInAreaDark,
+  InstructionTimeInAreaLight,
+  InstructionZoneCrossingDark,
+  InstructionZoneCrossingLight,
   LaunchDark,
   LaunchLight,
   LocationDark,
@@ -65,16 +101,10 @@ import {
   MediaErrorDark,
   MediaErrorLight,
   MediaLight,
-  MenuItemFocusDark,
-  MenuItemFocusLight,
-  MigrateSystemDark,
-  MigrateSystemLight,
   MilPermissionsDark,
   MilPermissionsLight,
   NavigationDark,
   NavigationLight,
-  NewSystemDark,
-  NewSystemLight,
   NoAccessDark,
   NoAccessLight,
   NoConnectionDark,
@@ -107,8 +137,6 @@ import {
   ProhibitedLight,
   ResetPasswordDark,
   ResetPasswordLight,
-  SearchDark,
-  SearchLight,
   SetPasswordDark,
   SetPasswordLight,
   SettingsDark,
@@ -149,13 +177,10 @@ export const Illustration: Record<
     AddUserProfileDark,
     AddUserProfileLight
   ),
-  "drag-menu": bundleIllustrationSmart(DragMenuItemDark, DragMenuItemLight),
+
   "media-error": bundleIllustrationSmart(MediaErrorDark, MediaErrorLight),
   "code-error": bundleIllustrationSmart(CodeErrorDark, CodeErrorLight),
-  "menu-item-focus": bundleIllustrationSmart(
-    MenuItemFocusDark,
-    MenuItemFocusLight
-  ),
+
   data: bundleIllustrationSmart(DataDark, DataLight),
   devices: bundleIllustrationSmart(DevicesDark, DevicesLight),
   "empty-folder": bundleIllustrationSmart(EmptyFolderDark, EmptyFolderLight),
@@ -253,10 +278,80 @@ export const Illustration: Record<
   "user-profile": bundleIllustrationSmart(UserProfileDark, UserProfileLight),
   "welcome-plane": bundleIllustrationSmart(WelcomePlaneDark, WelcomePlaneLight),
   "extend-system": bundleIllustrationSmart(ExtendSystemDark, ExtendSystemLight),
-  "migrate-system": bundleIllustrationSmart(
-    MigrateSystemDark,
-    MigrateSystemLight
+  "instruction-conditional": bundleIllustrationSmart(
+    InstructionConditionalDark,
+    InstructionConditionalLight
+  ),
+  "instruction-crossline-counting": bundleIllustrationSmart(
+    InstructionCrosslineCountingDark,
+    InstructionCrosslineCountingLight
+  ),
+  "instruction-drag-menu-item": bundleIllustrationSmart(
+    InstructionDragMenuItemDark,
+    InstructionDragMenuItemLight
+  ),
+  "instruction-fall-detection": bundleIllustrationSmart(
+    InstructionFallDetectionDark,
+    InstructionFallDetectionLight
+  ),
+  "instruction-hard-hat-detection": bundleIllustrationSmart(
+    InstructionHardHatDetectionDark,
+    InstructionHardHatDetectionLight
+  ),
+  "instruction-high-speed-approaching-traffic": bundleIllustrationSmart(
+    InstructionHighSpeedApproachingTrafficDark,
+    InstructionHighSpeedApproachingTrafficLight
+  ),
+  "instruction-high-speed-one-way": bundleIllustrationSmart(
+    InstructionHighSpeedOneWayDark,
+    InstructionHighSpeedOneWayLight
+  ),
+  "instruction-line-crossing": bundleIllustrationSmart(
+    InstructionLineCrossingDark,
+    InstructionLineCrossingLight
+  ),
+  "instruction-menu-item-focus": bundleIllustrationSmart(
+    InstructionMenuItemFocusDark,
+    InstructionMenuItemFocusLight
+  ),
+  "instruction-migrate-system": bundleIllustrationSmart(
+    InstructionMigrateSystemDark,
+    InstructionMigrateSystemLight
+  ),
+  "instruction-motion-in-area": bundleIllustrationSmart(
+    InstructionMotionInAreaDark,
+    InstructionMotionInAreaLight
+  ),
+  "instruction-motion-line-crossing": bundleIllustrationSmart(
+    InstructionMotionLineCrossingDark,
+    InstructionMotionLineCrossingLight
+  ),
+  "instruction-new-system": bundleIllustrationSmart(
+    InstructionNewSystemDark,
+    InstructionNewSystemLight
+  ),
+  "instruction-object-in-area": bundleIllustrationSmart(
+    InstructionObjectInAreaDark,
+    InstructionObjectInAreaLight
+  ),
+  "instruction-occupancy-in-area": bundleIllustrationSmart(
+    InstructionOccupancyInAreaDark,
+    InstructionOccupancyInAreaLight
+  ),
+  "instruction-search": bundleIllustrationSmart(
+    InstructionSearchDark,
+    InstructionSearchLight
+  ),
+  "instruction-tailgating-detection": bundleIllustrationSmart(
+    InstructionTailgatingDetectionDark,
+    InstructionTailgatingDetectionLight
+  ),
+  "instruction-time-in-area": bundleIllustrationSmart(
+    InstructionTimeInAreaDark,
+    InstructionTimeInAreaLight
+  ),
+  "instruction-zone-crossing": bundleIllustrationSmart(
+    InstructionZoneCrossingDark,
+    InstructionZoneCrossingLight
   ),
-  "new-system": bundleIllustrationSmart(NewSystemDark, NewSystemLight),
-  search: bundleIllustrationSmart(SearchDark, SearchLight),
 } as const;

components/empty-view/src/types.ts

@@ -21,8 +21,6 @@ export type IllustrationKind =
   | "settings"
   | "success"
   | "team"
-  | "menu-item-focus"
-  | "drag-menu"
   | "media-error"
   | "under-construction"
   | "add-user"
@@ -67,9 +65,25 @@ export type IllustrationKind =
   | "user-profile"
   | "welcome-plane"
   | "extend-system"
-  | "migrate-system"
-  | "new-system"
-  | "search";
+  | "instruction-conditional"
+  | "instruction-crossline-counting"
+  | "instruction-drag-menu-item"
+  | "instruction-fall-detection"
+  | "instruction-hard-hat-detection"
+  | "instruction-high-speed-approaching-traffic"
+  | "instruction-high-speed-one-way"
+  | "instruction-line-crossing"
+  | "instruction-menu-item-focus"
+  | "instruction-migrate-system"
+  | "instruction-motion-in-area"
+  | "instruction-motion-line-crossing"
+  | "instruction-new-system"
+  | "instruction-object-in-area"
+  | "instruction-occupancy-in-area"
+  | "instruction-search"
+  | "instruction-tailgating-detection"
+  | "instruction-time-in-area"
+  | "instruction-zone-crossing";
 
 export interface ContentProps {
   readonly body: ReactNode;