Role editor: hierarchical validation and tabs

web/packages/design/src/Alert/Alert.tsx

@@ -22,6 +22,8 @@ import { style, color, ColorProps } from 'styled-system';
 
 import { IconProps } from 'design/Icon/Icon';
 
+import { StatusIcon, StatusKind } from 'design/StatusIcon';
+
 import { space, SpaceProps, width, WidthProps } from '../system';
 import { Theme } from '../theme';
 import * as Icon from '../Icon';
@@ -193,7 +195,12 @@ export const Alert = ({
     <OuterContainer bg={bg} kind={kind} {...otherProps}>
       <InnerContainer kind={kind}>
         <IconContainer kind={kind}>
-          <AlertIcon kind={kind} customIcon={icon} size={alertIconSize} />
+          <StatusIcon
+            kind={iconKind(kind)}
+            customIcon={icon}
+            size={alertIconSize}
+            color="inherit"
+          />
         </IconContainer>
         <Box
           flex="1"
@@ -249,36 +256,6 @@ const InnerContainer = styled.div<AlertPropsWithRequiredKind>`
   ${backgroundColor}
 `;
 
-const AlertIcon = ({
-  kind,
-  customIcon: CustomIcon,
-  ...otherProps
-}: {
-  kind: AlertKind | BannerKind;
-  customIcon?: React.ComponentType<IconProps>;
-} & IconProps) => {
-  const commonProps = { role: 'graphics-symbol', ...otherProps };
-  if (CustomIcon) {
-    return <CustomIcon {...commonProps} />;
-  }
-  switch (kind) {
-    case 'success':
-      return <Icon.Checks aria-label="Success" {...commonProps} />;
-    case 'danger':
-    case 'outline-danger':
-      return <Icon.WarningCircle aria-label="Danger" {...commonProps} />;
-    case 'info':
-    case 'outline-info':
-      return <Icon.Info aria-label="Info" {...commonProps} />;
-    case 'warning':
-    case 'outline-warn':
-      return <Icon.Warning aria-label="Warning" {...commonProps} />;
-    case 'neutral':
-    case 'primary':
-      return <Icon.Notification aria-label="Note" {...commonProps} />;
-  }
-};
-
 const iconContainerStyles = ({
   kind,
   theme,
@@ -468,7 +445,12 @@ export const Banner = ({
       gap={3}
       alignItems="center"
     >
-      <AlertIcon kind={kind} customIcon={icon} size="large" color={iconColor} />
+      <StatusIcon
+        kind={iconKind(kind)}
+        customIcon={icon}
+        size="large"
+        color={iconColor}
+      />
       <Box flex="1">
         <Text typography="h3">{children}</Text>
         {details}
@@ -525,3 +507,18 @@ const bannerColors = (theme: Theme, kind: BannerKind) => {
       };
   }
 };
+
+const iconKind = (kind: AlertKind | BannerKind): StatusKind => {
+  switch (kind) {
+    case 'outline-danger':
+      return 'danger';
+    case 'outline-warn':
+      return 'warning';
+    case 'outline-info':
+      return 'info';
+    case 'primary':
+      return 'neutral';
+    default:
+      return kind;
+  }
+};

web/packages/design/src/SlideTabs/SlideTabs.story.tsx

@@ -21,7 +21,7 @@ import React, { useState } from 'react';
 import * as Icon from 'design/Icon';
 import Flex from 'design/Flex';
 
-import { SlideTabs } from './SlideTabs';
+import { SlideTabs, TabSpec } from './SlideTabs';
 
 export default {
   title: 'Design/SlideTabs',
@@ -120,9 +120,33 @@ export const Small = () => {
     <Flex flexDirection="column" gap={3}>
       <SlideTabs
         tabs={[
-          { key: 'alarm', icon: Icon.AlarmRing, ariaLabel: 'alarm' },
-          { key: 'bots', icon: Icon.Bots, ariaLabel: 'bots' },
-          { key: 'check', icon: Icon.Check, ariaLabel: 'check' },
+          {
+            key: 'alarm',
+            icon: Icon.AlarmRing,
+            ariaLabel: 'alarm',
+            tooltip: {
+              content: 'ring ring',
+              position: 'bottom',
+            },
+          },
+          {
+            key: 'bots',
+            icon: Icon.Bots,
+            ariaLabel: 'bots',
+            tooltip: {
+              content: 'beep boop',
+              position: 'bottom',
+            },
+          },
+          {
+            key: 'check',
+            icon: Icon.Check,
+            ariaLabel: 'check',
+            tooltip: {
+              content: 'Do or do not. There is no try.',
+              position: 'right',
+            },
+          },
         ]}
         size="small"
         appearance="round"
@@ -154,14 +178,33 @@ export const Small = () => {
   );
 };
 
-export const LoadingTab = () => {
+export const StatusIcons = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const tabs: TabSpec[] = [
+    { key: 'warning', title: 'warning', status: { kind: 'warning' } },
+    { key: 'danger', title: 'danger', status: { kind: 'danger' } },
+    { key: 'neutral', title: 'neutral', status: { kind: 'neutral' } },
+  ];
   return (
-    <SlideTabs
-      tabs={threeSimpleTabs}
-      onChange={() => null}
-      activeIndex={1}
-      isProcessing={true}
-    />
+    <Flex flexDirection="column" gap={3}>
+      <SlideTabs
+        tabs={tabs}
+        activeIndex={activeIndex}
+        onChange={setActiveIndex}
+        isProcessing={true}
+      />
+      <SlideTabs
+        tabs={tabs}
+        activeIndex={activeIndex}
+        onChange={setActiveIndex}
+      />
+      <SlideTabs
+        tabs={tabs}
+        hideStatusIconOnActiveTab
+        activeIndex={activeIndex}
+        onChange={setActiveIndex}
+      />
+    </Flex>
   );
 };
 

web/packages/design/src/SlideTabs/SlideTabs.test.tsx

@@ -21,6 +21,8 @@ import { screen } from '@testing-library/react';
 
 import { render, userEvent } from 'design/utils/testing';
 
+import * as Icon from 'design/Icon';
+
 import { SlideTabs, SlideTabsProps } from './SlideTabs';
 
 describe('design/SlideTabs', () => {
@@ -87,7 +89,12 @@ describe('design/SlideTabs', () => {
       <Component
         tabs={[
           { key: 'id1', title: 'first', controls: 'tabpanel-1' },
-          { key: 'id2', title: 'second', controls: 'tabpanel-2' },
+          {
+            key: 'id2',
+            icon: Icon.Check,
+            ariaLabel: 'second',
+            controls: 'tabpanel-2',
+          },
         ]}
       />
     );