feat(tablekit-core): add bare and disabled-bare, update info styling …

…in input-alert
tablecheck · Dec 5, 2023 · c1078c9 · c1078c9
1 parent cfadf67
commit c1078c9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 17 deletions.
diff --git a/system/core/src/components/InputAlert.ts b/system/core/src/components/InputAlert.ts
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 export const element = 'span';
 export const className = 'input-alert';
 
-const variants = ['info', 'error', 'warning'] as const;
+const variants = ['info', 'error', 'warning', 'bare', 'disabled'] as const;
 
 export type InputAlertVariant = (typeof variants)[number];
 
@@ -28,13 +28,14 @@ export const baseStyles = css`
   }
 
   &[data-variant='error'],
-  &[data-variant='warning'] {
+  &[data-variant='warning'],
+  &[data-variant='info'] {
     border-radius: var(--border-radius-small);
     padding: var(--spacing-l2) var(--spacing-l3);
   }
 
-  &[data-variant='info'] > svg:first-child {
-    color: var(--info);
+  &[data-variant='disabled'] {
+    color: var(--text-disabled);
   }
 
   &[data-variant='error'] {
@@ -46,4 +47,9 @@ export const baseStyles = css`
     background: var(--warning-surface);
     color: var(--warning-text);
   }
+
+  &[data-variant='info'] {
+    background: var(--info-surface);
+    color: var(--info-text);
+  }
 `;
diff --git a/system/react-css/src/structuredComponents/InputAlert.tsx b/system/react-css/src/structuredComponents/InputAlert.tsx
@@ -6,12 +6,16 @@ export interface Props extends inputAlert.Props {
   children: React.ReactNode;
 }
 
-const inputAlertIconMap: Record<inputAlert.Props['data-variant'], JSX.Element> =
-  {
-    info: <Information size={16} />,
-    error: <WarningAltFilled size={16} />,
-    warning: <WarningAlt size={16} />
-  };
+const inputAlertIconMap: Record<
+  inputAlert.Props['data-variant'],
+  JSX.Element | null
+> = {
+  info: <Information size={16} />,
+  error: <WarningAltFilled size={16} />,
+  warning: <WarningAlt size={16} />,
+  bare: null,
+  disabled: null
+};
 
 export const InputAlert = React.forwardRef<
   HTMLSpanElement,

diff --git a/system/react/src/structuredComponents/InputAlert.tsx b/system/react/src/structuredComponents/InputAlert.tsx
@@ -11,12 +11,16 @@ export const InputAlertInner = styled(inputAlert.element)<Props>`
   ${inputAlert.baseStyles}
 `;
 
-const inputAlertIconMap: Record<inputAlert.Props['data-variant'], JSX.Element> =
-  {
-    info: <Information size={16} />,
-    error: <WarningAltFilled size={16} />,
-    warning: <WarningAlt size={16} />
-  };
+const inputAlertIconMap: Record<
+  inputAlert.Props['data-variant'],
+  JSX.Element | null
+> = {
+  info: <Information size={16} />,
+  error: <WarningAltFilled size={16} />,
+  warning: <WarningAlt size={16} />,
+  bare: null,
+  disabled: null
+};
 
 export const InputAlert = React.forwardRef<
   HTMLSpanElement,

diff --git a/system/stories/src/InputAlert.stories.tsx b/system/stories/src/InputAlert.stories.tsx
@@ -6,7 +6,9 @@ import * as css from '@tablecheck/tablekit-react-css';
 const contentVariants: emotion.InputAlertProps[] = [
   { id: '1', 'data-variant': 'info', children: 'Info' },
   { id: '2', 'data-variant': 'warning', children: 'Warning' },
-  { id: '3', 'data-variant': 'error', children: 'Error' }
+  { id: '3', 'data-variant': 'error', children: 'Error' },
+  { id: '4', 'data-variant': 'bare', children: 'Bare' },
+  { id: '5', 'data-variant': 'disabled', children: 'Disabled' }
 ];
 
 export default {