Add priority prop; add docs

packages/ui/src/ValueViewComponent/index.stories.tsx

@@ -39,5 +39,6 @@ export const Basic: Story = {
     valueView: PENUMBRA_VALUE_VIEW,
     context: 'default',
     size: 'sparse',
+    priority: 'primary',
   },
 };

packages/ui/src/ValueViewComponent/index.tsx

@@ -7,10 +7,16 @@ import { AssetIcon } from './AssetIcon';
 import { getMetadata } from '@penumbra-zone/getters/value-view';
 import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
 
-const Root = styled.div`
-  display: flex;
+const Root = styled.span<{ $context: 'default' | 'table'; $priority: 'primary' | 'secondary' }>`
+  display: inline-flex;
   gap: ${props => props.theme.spacing(2)};
   align-items: center;
+
+  border-bottom: 2px dashed
+    ${props =>
+      props.$context === 'table' && props.$priority === 'secondary'
+        ? props.theme.color.other.tonalStroke
+        : 'transparent'};
 `;
 
 const PillMarginOffsets = styled.div<{ $size: 'dense' | 'sparse' }>`
@@ -33,20 +39,26 @@ export interface ValueViewComponentProps {
    * A `ValueViewComponent` will be rendered differently depending on which
    * context it's rendered in. By default, it'll be rendered in a pill. But in a
    * table context, it'll be rendered as just an icon and text.
-   *
-   * Default: `default`
    */
   context?: 'default' | 'table';
   size?: 'dense' | 'sparse';
+  /**
+   * Use `primary` in most cases, or `secondary` when this value view
+   * represents a secondary value, such as when it's an equivalent value of a
+   * numeraire.
+   */
+  priority?: 'primary' | 'secondary';
 }
 
 /**
  * `ValueViewComponent` renders a `ValueView` — its amount, icon, and symbol.
+ * Use this anywhere you would like to render a `ValueView`.
  */
 export const ValueViewComponent = ({
   valueView,
   context = 'default',
   size = 'sparse',
+  priority = 'primary',
 }: ValueViewComponentProps) => {
   const formattedAmount = getFormattedAmtFromValueView(valueView, true);
   const metadata = getMetadata.optional()(valueView);
@@ -58,12 +70,12 @@ export const ValueViewComponent = ({
     <ConditionalWrap
       if={context === 'default'}
       then={children => (
-        <Pill size={size}>
+        <Pill size={size} priority={priority}>
           <PillMarginOffsets $size={size}>{children}</PillMarginOffsets>
         </Pill>
       )}
     >
-      <Root>
+      <Root $context={context} $priority={priority}>
         <AssetIcon metadata={metadata} size={size} />
 
         <Content>