feat(Alert): require labelClose when closable is true

BREAKING CHANGE: Alert component now requires `labelClose` prop
if `closable` is enabled. This will be converted into button aria-label
attribute, make sure the passed value is properly translated.

Author: mvidalgarcia

packages/orbit-components/src/Alert/Alert.ct-story.tsx

@@ -47,6 +47,7 @@ export function TestAlert() {
             type={type}
             icon={false}
             closable
+            labelClose="Close"
             inlineActions={
               <AlertButton type={type} href="#">
                 Link
@@ -65,6 +66,7 @@ export function TestAlert() {
             type={type}
             icon={<Icons.Ai />}
             closable
+            labelClose="Close"
             inlineActions={
               <AlertButton type={type} href="#">
                 Link
@@ -90,7 +92,7 @@ export function TestAlert() {
       <h2>With multiline text, closable, without icon</h2>
       <div className="gap-400 flex flex-col items-stretch">
         {Object.values(TYPE_OPTIONS).map(type => (
-          <Alert type={type} closable icon={false}>
+          <Alert type={type} closable icon={false} labelClose="Close">
             <p>
               <TextLink type="primary">This is</TextLink> a primary textlink.
               <br />

packages/orbit-components/src/Alert/Alert.stories.tsx

@@ -31,6 +31,7 @@ const meta: Meta<typeof Alert> = {
     closable: false,
     spaceAfter: SPACINGS_AFTER.SMALL,
     suppressed: false,
+    labelClose: "Close",
   },
 
   argTypes: {
@@ -295,7 +296,7 @@ export const Rtl: Story = {
                 Make sure you know your visa requirements for these countries:
               </Heading>
               <List>
-                <ListItem icon={<CountryFlag code="pl" name="Poland" />}>Poland</ListItem>
+                <ListItem icon={<CountryFlag code="pl" />}>Poland</ListItem>
               </List>
             </Stack>
             <AlertButton type="info">Check Visa Requirements</AlertButton>

packages/orbit-components/src/Alert/README.md

@@ -26,7 +26,7 @@ The table below contains all types of the props available in Alert component.
 | inlineActions | `React.Node`                    |          | Renders action to a right side of a Alert. [See Functional specs](#functional-specs)   |
 | onClose       | `() => void \| Promise`         |          | Function for handling Alert onClose.                                                   |
 | spaceAfter    | `enum`                          |          | Additional `margin-bottom` after component.                                            |
-| title         | `Translation`                   |          | The title of the Alert.                                                                |
+| title         | `string`                        |          | The title of the Alert.                                                                |
 | **type**      | [`enum`](#enum)                 | `"info"` | The type of Alert.                                                                     |
 | suppressed    | `boolean`                       |          | If `suppressed` is on, Alert will not have colored background                          |
 | labelClose    | `string`                        |          | The label of the close button.                                                         |

packages/orbit-components/src/Alert/__tests__/index.test.tsx

@@ -21,7 +21,7 @@ describe("Alert", () => {
   it("should be closable", async () => {
     const onClose = jest.fn();
     render(
-      <Alert onClose={onClose} closable>
+      <Alert onClose={onClose} closable labelClose="Close">
         {message}
       </Alert>,
     );

packages/orbit-components/src/Alert/index.tsx

@@ -130,6 +130,7 @@ const Alert = (props: Props) => {
   return (
     <div
       className={cx(
+        "orbit-alert",
         "rounded-150 text-ink-dark font-base text-normal p-300 relative box-border flex w-full border border-t-[3px] leading-normal",
         "lm:border-s-[3px] lm:border-t",
         "tb:rounded-100",

packages/orbit-components/src/Alert/types.d.ts

@@ -6,14 +6,22 @@ import type * as React from "react";
 import type * as Common from "../common/types";
 
 export type Type = "info" | "success" | "warning" | "critical";
-export interface Props extends Common.Globals, Common.SpaceAfter {
-  readonly type?: Type;
-  readonly children?: React.ReactNode;
-  readonly title?: Common.Translation;
-  readonly icon?: React.ReactNode;
-  readonly closable?: boolean;
-  readonly inlineActions?: React.ReactNode;
-  readonly labelClose?: string;
-  readonly onClose?: Common.Callback;
-  readonly suppressed?: boolean;
-}
+export type Props = Common.Globals &
+  Common.SpaceAfter & {
+    readonly type?: Type;
+    readonly children?: React.ReactNode;
+    readonly title?: Common.Translation;
+    readonly icon?: React.ReactNode;
+    readonly inlineActions?: React.ReactNode;
+    readonly onClose?: Common.Callback;
+    readonly suppressed?: boolean;
+    /**
+     * When closable is true, labelClose is required.
+     */
+  } & (
+    | {
+        readonly closable: true;
+        readonly labelClose: string;
+      }
+    | { readonly closable?: false; readonly labelClose?: string }
+  );