remove status + add variant

cultureamp · Sep 2, 2024 · 767312c · 767312c
1 parent 1054201
commit 767312c
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 143 deletions.
diff --git a/packages/components/src/FieldMessage/FieldMessage.module.css b/packages/components/src/FieldMessage/FieldMessage.module.css
@@ -0,0 +1,75 @@
+.message {
+  display: flex;
+  position: relative;
+  align-items: center;
+  gap: var(--spacing-6);
+  background-color: var(--message-background-color);
+
+  .text {
+    --text-color: var(--message-text-color);
+  }
+}
+
+.default {
+  &.reversed {
+    --message-text-color: var(--color-white);
+  }
+}
+
+.success {
+  &.reversed {
+    --message-text-color: var(--color-white);
+  }
+}
+
+.caution,
+.cautionary {
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-8);
+
+  --message-background-color: var(--color-yellow-100);
+
+  .icon {
+    color: var(--color-yellow-700);
+  }
+
+  &.reversed {
+    --message-text-color: var(--color-purple-800);
+    --message-background-color: var(--color-yellow-400);
+  }
+}
+
+.error,
+.warning {
+  border-radius: var(--border-solid-border-radius);
+  padding: var(--spacing-8);
+
+  --message-background-color: var(--color-red-100);
+
+  .icon {
+    color: var(--color-red-500);
+  }
+
+  &.reversed {
+    --message-text-color: var(--color-purple-800);
+    --message-background-color: var(--color-red-300);
+  }
+}
+
+.positionBottom {
+  margin-top: var(--spacing-6);
+}
+
+.positionTop {
+  margin-bottom: var(--spacing-6);
+}
+
+.icon {
+  display: inline-flex;
+  width: 1.25rem;
+  align-self: flex-start;
+
+  .reversed & {
+    color: var(--color-purple-800);
+  }
+}
diff --git a/packages/components/src/FieldMessage/FieldMessage.module.scss b/packages/components/src/FieldMessage/FieldMessage.module.scss
diff --git a/packages/components/src/FieldMessage/FieldMessage.tsx b/packages/components/src/FieldMessage/FieldMessage.tsx
@@ -3,13 +3,28 @@ import classnames from "classnames"
 import { CautionWhiteIcon, ExclamationWhiteIcon } from "~components/Icon"
 import { Text } from "~components/Text"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import styles from "./FieldMessage.module.scss"
+import styles from "./FieldMessage.module.css"
 
 export type FieldMessageStatus = "default" | "success" | "error" | "caution"
 
+export type FieldMessageVariant =
+  | "default"
+  | "success"
+  | "warning"
+  | "cautionary"
+
 export type FieldMessageProps = {
   message?: React.ReactNode
-  /** @default "default" */
+  /**
+   * If transitioning from `status`:
+   * - `error` -> `warning`
+   * - `caution` -> `cautionary`
+   * @default "success"
+   */
+  variant?: FieldMessageVariant
+  /**
+   * @deprecated Use `variant` instead
+   */
   status?: FieldMessageStatus
   /** @default "bottom" */
   position?: "top" | "bottom"
@@ -18,23 +33,20 @@ export type FieldMessageProps = {
 
 export const FieldMessage = ({
   message,
+  variant = "default",
   status = "default",
   position = "bottom",
   reversed = false,
   classNameOverride,
   ...restProps
 }: FieldMessageProps): JSX.Element => {
-  const textColor =
-    status === "default" || status === "success"
-      ? reversed
-        ? "white-reduced-opacity"
-        : "dark-reduced-opacity"
-      : "dark"
+  const textColor = variant === "default" ? "dark" : "light"
 
   return (
     <div
       className={classnames(
         styles.message,
+        styles[variant],
         styles[status],
         classNameOverride,
         reversed && styles.reversed,
@@ -43,32 +55,35 @@ export const FieldMessage = ({
       )}
       {...restProps}
     >
-      {(status === "error" || status === "caution") && (
-        <span className={styles.warningIcon}>
-          {status === "error" ? (
-            <ExclamationWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          ) : (
-            <CautionWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
+      {variant && (
+        <>
+          {(variant === "cautionary" || status === "caution") && (
+            <span className={styles.icon}>
+              <CautionWhiteIcon
+                role="img"
+                inheritSize={false}
+                aria-label={`${variant} message`}
+              />
+            </span>
+          )}
+          {(variant === "warning" || status === "error") && (
+            <span className={styles.icon}>
+              <ExclamationWhiteIcon
+                role="img"
+                inheritSize={false}
+                aria-label={`${variant} message`}
+              />
+            </span>
           )}
-        </span>
+        </>
       )}
-      <div className={styles.message}>
-        <Text
-          variant="small"
-          tag={typeof message === "string" ? "p" : "div"}
-          color={textColor}
-        >
-          {message}
-        </Text>
-      </div>
+      <Text
+        variant="small"
+        tag={typeof message === "string" ? "p" : "div"}
+        classNameOverride={styles.text}
+      >
+        {message}
+      </Text>
     </div>
   )
 }

diff --git a/packages/components/src/FieldMessage/_docs/FieldMessage.mdx b/packages/components/src/FieldMessage/_docs/FieldMessage.mdx
@@ -37,11 +37,11 @@ Simple `string`s will be wrapped in a `p` tag with the default `small` text styl
 Note that when using this for helper text, the component should not recieve `status` - this is reserved for validation messages.
 
 
-### Status
+### Variant
 
-`status` can used to create form validation message that provide additional context to a form field's state, ie: `error`, `caution` or `success`.
+`variant` can used to create form validation message that provide additional context to a form field's state, ie: `warning`, `cautionary` or `success`.
 
-<Canvas of={FieldMessageStories.Error} />
+<Canvas of={FieldMessageStories.Warning} />
 
 <Canvas of={FieldMessageStories.Cautionary} />
 

diff --git a/packages/components/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx b/packages/components/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx
@@ -20,27 +20,58 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed, ...otherProps }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header
-        headings={["Default", "Success", "Error", "Caution"]}
-      />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <FieldMessage {...otherProps} reversed={isReversed} />
-          <FieldMessage
-            {...otherProps}
-            reversed={isReversed}
-            status="success"
-          />
-          <FieldMessage {...otherProps} reversed={isReversed} status="error" />
-          <FieldMessage
-            {...otherProps}
-            reversed={isReversed}
-            status="caution"
-          />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
-    </StickerSheet>
+    <>
+      <StickerSheet isReversed={isReversed} heading="Status (Deprecated)">
+        <StickerSheet.Header
+          headings={["Default", "Success", "Error", "Caution"]}
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <FieldMessage {...otherProps} reversed={isReversed} />
+            <FieldMessage
+              {...otherProps}
+              reversed={isReversed}
+              status="success"
+            />
+            <FieldMessage
+              {...otherProps}
+              reversed={isReversed}
+              status="error"
+            />
+            <FieldMessage
+              {...otherProps}
+              reversed={isReversed}
+              status="caution"
+            />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+      <StickerSheet isReversed={isReversed} heading="Variant">
+        <StickerSheet.Header
+          headings={["Default", "Success", "Warning", "Cautionary"]}
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <FieldMessage {...otherProps} reversed={isReversed} />
+            <FieldMessage
+              {...otherProps}
+              reversed={isReversed}
+              variant="success"
+            />
+            <FieldMessage
+              {...otherProps}
+              reversed={isReversed}
+              variant="warning"
+            />
+            <FieldMessage
+              {...otherProps}
+              reversed={isReversed}
+              variant="cautionary"
+            />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
   ),
 }