APP-3921: Add custom part status icon (viamrobotics#486)

Kschappacher · Mar 4, 2024 · 2c7ad0f · 2c7ad0f
1 parent b406cb0
commit 2c7ad0f
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 20 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.93",
+  "version": "0.0.94",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/icon/icon.svelte b/packages/core/src/lib/icon/icon.svelte
@@ -30,7 +30,7 @@ const sizes: Record<Size, string> = {
 
 <script lang="ts">
 import cx from 'classnames';
-import { paths, type IconName } from './icons';
+import { paths, type IconName, type CustomIcon } from './icons';
 
 /** The name of the icon. */
 export let name: IconName;
@@ -41,22 +41,41 @@ export let size: Size = 'base';
 /** Additional CSS classes to pass to the svg. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
+
+let allPaths: CustomIcon[] = [];
+
+$: {
+  const pathValue = paths[name];
+
+  if (typeof pathValue === 'string') {
+    allPaths = [{ path: pathValue }];
+  } else if (Array.isArray(pathValue)) {
+    allPaths = pathValue.map((icon) => ({
+      path: icon.path,
+      opacity: icon.opacity,
+    }));
+  }
+}
 </script>
 
 <!--
   Accessibility approach for icon svgs taken from:
   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
 -->
+
 <svg
   class={cx(sizes[size], extraClasses)}
   viewBox="0 0 24 24"
   aria-hidden="true"
   focusable="false"
   {...$$restProps}
 >
-  <path
-    d={paths[name]}
-    fill-rule="evenodd"
-    fill="currentColor"
-  />
+  {#each allPaths as { path: dAttribute, opacity }}
+    <path
+      d={dAttribute}
+      {opacity}
+      fill-rule="evenodd"
+      fill="currentColor"
+    />
+  {/each}
 </svg>
diff --git a/packages/core/src/lib/icon/icons.ts b/packages/core/src/lib/icon/icons.ts
@@ -1,10 +1,19 @@
 import * as MDI from '@mdi/js';
 
+type Path = string;
+
+export interface CustomIcon {
+  path: string;
+  opacity?: number | undefined;
+}
+
+export type IconPath = Path | CustomIcon[];
+
 /**
  * Keys should match MDI name
  * e.g. 'account-multiple' for MDI.mdiAccountMultiple
  */
-export const paths = {
+export const paths: Record<string, IconPath> = {
   'account-group-outline': MDI.mdiAccountGroupOutline,
   'account-multiple': MDI.mdiAccountMultiple,
   'alert-circle-outline': MDI.mdiAlertCircleOutline,
@@ -116,6 +125,15 @@ export const paths = {
     'M17 22v-2h3v-3h2v3.5c0 .4-.2.7-.5 1-.3.3-.6.5-1 .5H17ZM7 22H3.5c-.4 0-.7-.2-1-.5-.3-.3-.5-.6-.5-1V17h2v3h3v2ZM17 2h3.5c.4 0 .7.2 1 .5.3.3.5.6.5 1V7h-2V4h-3V2ZM7 2v2H4v3H2V3.5c0-.4.2-.7.5-1 .3-.3.6-.5 1-.5H7Zm6 15.3 4-2.4v-4.5l-4 2.3v4.6Zm-1-6.4 4-2.3-4-2.3-4 2.3 4 2.3Zm-5 4 4 2.3v-4.5l-4-2.3v4.5Zm11.2-7.3c.5.3.8.7.8 1.3v6.3c0 .6-.3 1-.8 1.4l-5.4 3.1c-.6.4-1 .4-1.6 0l-5.4-3.1c-.5-.4-.8-.8-.8-1.4V9c0-.6.3-1 .8-1.3l5.5-3.2a1.6 1.6 0 0 1 1.4 0l5.5 3.2Z',
   'viam-local-module':
     'M3 3v18h18V3H3Zm5.6 9.9H5V5h8v3.6H8.6V13Zm-3.6 6h14V5h-4v5.6h-4.4V15H5v4Z',
+  'viam-mixed-part-status': [
+    {
+      path: 'M12 11c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 2c0-3.31-2.69-6-6-6s-6 2.69-6 6c0 2.22 1.21 4.15 3 5.19l1-1.74c-1.19-.7-2-1.97-2-3.45 0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.48-.81 2.75-2 3.45l1 1.74c1.79-1.04 3-2.97 3-5.19Z',
+    },
+    {
+      path: 'M12 3C6.48 3 2 7.48 2 13c0 3.7 2.01 6.92 4.99 8.65l1-1.73C5.61 18.53 4 15.96 4 13c0-4.42 3.58-8 8-8s8 3.58 8 8c0 2.96-1.61 5.53-4 6.92l1 1.73c2.99-1.73 5-4.95 5-8.65 0-5.52-4.48-10-10-10Z',
+      opacity: 0.5,
+    },
+  ],
   'viam-ml-model':
     'M22 4.3a2.3 2.3 0 0 1-3 2.2L16.2 10a2.6 2.6 0 0 1-.2 3l3.1 4.5a2.3 2.3 0 1 1-1.6 3h-11a2.3 2.3 0 1 1-1-2.8l6.1-5.1a2.6 2.6 0 0 1 0-2l-6-4.4a2 2 0 0 1-1.3.4 2.3 2.3 0 1 1 2.2-3.1h11a2.3 2.3 0 0 1 4.6.8ZM14 14c-.4 0-.8 0-1.2-.2l-6.2 5h11l.2-.4-3.2-4.4H14Zm0-5.2c-.6 0-1 .2-1.5.4L7 5.2h10.7l.1.3L15 9l-1-.2Z',
   'viam-process':

diff --git a/packages/core/src/lib/input/slider-input.svelte b/packages/core/src/lib/input/slider-input.svelte
@@ -79,7 +79,7 @@ $: handlePointerMove = (event: PointerEvent) => {
     isNumber ? stepDecimalDigits : 0
   );
 
-  const inputValue = input!.value;
+  const inputValue = input?.value;
   const delta = parseNumericInputValue(deltaString, type);
   const next = parseNumericInputValue(
     (startValue + delta * step).toFixed(getDecimals(inputValue)),
@@ -126,7 +126,7 @@ const handlePointerDown = async (event: PointerEvent) => {
   startValue = value;
   isDragging = true;
 
-  input!.focus();
+  input?.focus();
 
   await tick();
 

diff --git a/packages/core/src/lib/pill.svelte b/packages/core/src/lib/pill.svelte
@@ -31,7 +31,7 @@ export let removable = true;
 export let variant: 'default' | 'outlined' = 'default';
 
 /** The icon shown in the button. */
-export let icon: IconName | '' = '';
+export let icon: IconName = '';
 
 /** Additional CSS classes to pass to the pill. */
 let extraClasses: cx.Argument = '';

diff --git a/packages/core/src/lib/select/multiselect.svelte b/packages/core/src/lib/select/multiselect.svelte
@@ -160,8 +160,11 @@ const handleEnter = (event: KeyboardEvent) => {
     }
   } else {
     // if the user has used arrow keys to navigate options, enter should add/remove item
-    const { option } = searchedOptions[$navigationIndex]!;
-    handleOptionSelect(option);
+    const navigationOption = searchedOptions[$navigationIndex];
+    if (navigationOption) {
+      const { option } = navigationOption;
+      handleOptionSelect(option);
+    }
   }
 };
 

diff --git a/packages/core/src/lib/switch.svelte b/packages/core/src/lib/switch.svelte
@@ -65,7 +65,7 @@ const toggle = () => {
 >
   <div
     class={cx(
-      'relative inline-flex h-5 w-11 flex-shrink-0 border duration-200 ease-in-out focus:outline-none motion-safe:transition-colors',
+      'relative inline-flex h-5 w-11 shrink-0 border duration-200 ease-in-out focus:outline-none motion-safe:transition-colors',
       {
         'border-gray-6 bg-gray-6': !on && !disabled,
         'border-success-dark bg-success-dark': on && !disabled,
@@ -75,7 +75,7 @@ const toggle = () => {
   >
     <span
       class={cx(
-        'pointer-events-none relative ml-px mt-px inline-block h-4 w-4 transform bg-white ring-0 duration-200 ease-in-out motion-safe:transition-transform',
+        'pointer-events-none relative ml-px mt-px inline-block h-4 w-4 bg-white ring-0 duration-200 ease-in-out motion-safe:transition-transform',
         {
           'border-gray-4': disabled,
           'translate-x-0': !on,

diff --git a/packages/core/src/lib/tabs.svelte b/packages/core/src/lib/tabs.svelte
@@ -39,9 +39,7 @@ const handleClick = (option: string) => {
 };
 </script>
 
-<div
-  class={cx('border-b-border-2 flex w-full border-b bg-medium', extraClasses)}
->
+<div class={cx('flex w-full border-b bg-medium', extraClasses)}>
   {#each tabs as tab, index (tab)}
     <button
       class={cx('px-4 py-1 text-sm first:ml-6', {

diff --git a/packages/storybook/src/stories/icon.stories.svelte b/packages/storybook/src/stories/icon.stories.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { Meta, Story } from '@storybook/addon-svelte-csf';
-import { Icon, Tooltip, type IconName } from '@viamrobotics/prime-core';
+import { Icon, Tooltip } from '@viamrobotics/prime-core';
 
 import { paths } from '../../../core/src/lib/icon/icons';
 
-const pathsKeys = Object.keys(paths) as IconName[];
+const pathsKeys = Object.keys(paths);
 </script>
 
 <Meta title="Elements/Icon" />