- type
+ title
- 'info' | 'confirm' | 'warning' | 'error'
+ string
+
+ Title of the alert.
+ -
+
+
+ message
+
+
+ {"{ messageText: string; onClose: () => void }"}
+
+
+
+ Object used to define the message of the alert and the onClose function related to it. If defined, a close
+ button will be displayed and this function will be executed when the action is clicked. (When{" "}
+ mode="modal" this function will also be executed when the background overlay is clicked. The
+ user has the responsibility of hiding the modal, otherwise it will remain visible.???)
+
+ -
+
+
+ semantic
+
+ 'success' | 'info' | 'warning' | 'error'
- Uses one of the available alert types.
+ Uses one of the available alert semantic types.
'info'
@@ -35,20 +63,22 @@ const sections = [
mode
- 'inline' | 'modal'
+ 'inline' | 'modal' | 'banner'
Uses one of the available alert modes:
- inline: Renders as a regular component, following the natural order of the elements in the
- document tree.
+ inline:
modal: The alert will be displayed in the middle of the screen with an overlay layer behind. In
this mode, the user has the responsibility of hiding the alert with the onClose event,
otherwise the overlaid modal will remain visible.
+
+ banner:
+
@@ -56,53 +86,20 @@ const sections = [
- inlineText
-
- string
-
- Message of the alert.
- -
-
-
- onClose
-
- {"() => void"}
-
-
- If defined, a close button will be displayed and this function will be executed when the action is
- clicked. When mode="modal" this function will also be executed when the background overlay is
- clicked. The user has the responsibility of hiding the modal, otherwise it will remain visible.
-
- -
-
-
- children
-
- React.ReactNode
-
- The details section of the alert. Can be used to render custom content in this area.
- -
-
-
- margin
+ primaryAction
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
+ {"{ label: string; icon?: string | SVG; onClick: () => void; }"}
-
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
-
- -
+ Primary action.
+ -
- size
+ secondaryAction
- 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'
-
- Size of the component.
-
- 'fitContent'
+ {"{ label: string; icon?: string | SVG; onClick: () => void; }"}
+ Secondary action.
+ -
tabIndex
@@ -127,21 +124,66 @@ const sections = [
title: "Basic usage",
content:
-
);
};
diff --git a/apps/website/screens/components/alert/code/examples/actions.ts b/apps/website/screens/components/alert/code/examples/actions.ts
new file mode 100644
index 0000000000..2e3ddf545f
--- /dev/null
+++ b/apps/website/screens/components/alert/code/examples/actions.ts
@@ -0,0 +1,34 @@
+import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ {} }}
+ secondaryAction={{ label: "Back", onClick: () => {} }}
+ />
+ {} }}
+ secondaryAction={{ label: "Back", onClick: () => {} }}
+ />
+ {} }}
+ secondaryAction={{ label: "Cancel", onClick: () => {} }}
+ />
+ {} }}
+ secondaryAction={{ label: "Back", onClick: () => {} }}
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/banner.ts b/apps/website/screens/components/alert/code/examples/banner.ts
new file mode 100644
index 0000000000..752787a3e1
--- /dev/null
+++ b/apps/website/screens/components/alert/code/examples/banner.ts
@@ -0,0 +1,16 @@
+import { DxcAlert, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/basicUsage.ts b/apps/website/screens/components/alert/code/examples/basicUsage.ts
index db107c767d..c7813578c3 100644
--- a/apps/website/screens/components/alert/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/alert/code/examples/basicUsage.ts
@@ -3,7 +3,7 @@ import { DxcAlert, DxcInset } from "@dxc-technology/halstack-react";
const code = `() => {
return (
-
);
}`;
diff --git a/apps/website/screens/components/alert/code/examples/modal.ts b/apps/website/screens/components/alert/code/examples/modal.ts
index e2c740f080..487e5c08f7 100644
--- a/apps/website/screens/components/alert/code/examples/modal.ts
+++ b/apps/website/screens/components/alert/code/examples/modal.ts
@@ -12,10 +12,9 @@ const code = `() => {
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/severalMessages.ts b/apps/website/screens/components/alert/code/examples/severalMessages.ts
new file mode 100644
index 0000000000..3ba04ae41a
--- /dev/null
+++ b/apps/website/screens/components/alert/code/examples/severalMessages.ts
@@ -0,0 +1,53 @@
+import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [messages, setMessages] = useState([
+ {
+ messageText:
+ "Your document as been auto-saved. You can continue working without worry, as all changes are being saved automatically.",
+ onClose: () => handleAlertClose(0),
+ },
+ {
+ messageText: "Your document as been auto-saved. You can continue working without worry, as all changes are being saved automatically.",
+ onClose: () => handleAlertClose(1),
+ },
+ {
+ messageText:
+ "Your document as been auto-saved. You can continue working without worry, as all changes are being saved automatically.",
+ onClose: () => handleAlertClose(0),
+ },
+ {
+ messageText:
+ "Your document as been auto-saved. You can continue working without worry, as all changes are being saved automatically.",
+ onClose: () => handleAlertClose(0),
+ },
+ ]);
+
+ const handleAlertClose = (index) => {
+ setMessages((prevMessages) => {
+ const updatedMessages = prevMessages.filter((_, i) => i !== index);
+ return updatedMessages;
+ });
+ };
+
+ return (
+
+
+ {} }}
+ secondaryAction={{ label: "Back", onClick: () => {} }}
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx b/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx
index d49e114d6f..bb5f8381e8 100644
--- a/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx
+++ b/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx
@@ -1,37 +1,33 @@
import Image from "@/common/Image";
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
+import { DxcLink, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Figure from "@/common/Figure";
import AlertAnatomyImage from "./images/alert_anatomy.png";
-import AlertStatesImage from "./images/alert_states.png";
-import AlertSpecsImage from "./images/alert_specs.png";
+import BannerAlertSpecsImage from "./images/alert_banner_specs.png";
+import InlineAlertSpecsImage from "./images/alert_inline_specs.png";
+import ModalAlertSpecsImage from "./images/alert_modal_specs.png";
const sections = [
{
title: "Specifications",
- content: (
-
-
- ),
- },
- {
- title: "States",
content: (
<>
-
- States for the close action of the alert component: enabled , hover ,{" "}
- focus , and active .
-
-
-
+
+
+
+
+
),
},
+
{
title: "Anatomy",
content: (
@@ -41,11 +37,11 @@ const sections = [
Container
Icon
Title
- Inline text
- Close action
-
- Content (Optional)
-
+ Pagination
+ Divider
+ Close action icon
+ Buttons
+ Description
),
@@ -68,49 +64,29 @@ const sections = [
- infoIconColor
-
- Icon
-
- color-blue-800
-
- #0067b3
-
-
-
- successIconColor
-
- Icon
-
- color-green-700
-
- #24a148
-
-
-
- warningIconColor
+ overlayColor
- Icon
+ Overlay
- color-yellow-700
+ color-grey-800-a
- #c59f07
+ #000000b3
- errorIconColor
+ modalBackgroundColor
- Icon
+ Container (modal)
- color-red-700
+ color-white
- #d0011b
+ #ffffff
infoBackgroundColor
- Container background
+ Container (info)
color-blue-100
@@ -120,7 +96,7 @@ const sections = [
successBackgroundColor
- Container background
+ Container (success)
color-green-100
@@ -130,7 +106,7 @@ const sections = [
warningBackgroundColor
- Container background
+ Container (warning)
color-yellow-100
@@ -140,7 +116,7 @@ const sections = [
errorBackgroundColor
- Container background
+ Container (error)
color-red-100
@@ -148,19 +124,19 @@ const sections = [
- infoBorderColor
+ infoIconColor
- Container border
+ Icon (info)
- color-blue-800
+ color-blue-700
- #0067b3
+ #0086e6
- successBorderColor
+ successIconColor
- Container border
+ Icon (success)
color-green-700
@@ -168,7 +144,7 @@ const sections = [
- warningBorderColor
+ warningIconColor
Container border
@@ -178,9 +154,9 @@ const sections = [
- errorBorderColor
+ errorIconColor
- Container border
+ Icon (error)
color-red-700
@@ -192,59 +168,29 @@ const sections = [
Title
- color-black
-
- #000000
-
-
-
- inlineTextFontColor
-
- Inline text
-
- color-black
-
- #000000
-
-
-
- hoverActionBackgroundColor
-
- Action:hover
-
- color-grey-100-a
-
- #0000000d
-
-
-
- activeActionBackgroundColor
-
- Action:active
-
- color-grey-200-a
+ color-grey-900
- #0000001a
+ #333333
- focusActionBorderColor
+ messageFontColor
- Action:focus
+ Message
- color-blue-600
+ color-grey-900
- #0095ff
+ #333333
- overlayColor
+ navigationTextFontColor
- Overlay
+ Navigation text
- color-grey-800-a
+ color-black
- #000000b3
+ #000000
@@ -279,9 +225,29 @@ const sections = [
Title
- font-scale-01
+ font-scale-02
- 0.75rem / 12px
+ 0.875rem / 14px
+
+
+
+ modalTitleFontSize
+
+ Title (modal)
+
+ font-scale-05
+
+ 1.5rem / 24px
+
+
+
+ titleFontStyle
+
+ Title
+
+ font-normal
+
+ normal
@@ -291,13 +257,13 @@ const sections = [
font-bold
- 600
+ bold
- inlineTextFontFamily
+ messageFontFamily
- Inline text
+ Message
font-family-sans
@@ -305,9 +271,49 @@ const sections = [
- inlineTextFontSize
+ messageFontSize
+
+ Message
+
+ font-scale-02
+
+ 0.875rem / 14px
+
+
+
+ messageFontStyle
+
+ Message
+
+ font-normal
+
+ 400
+
+
+
+ messageFontWeight
+
+ Message
+
+ font-regular
+
+ 400
+
+
+
+ navigationTextFontFamily
- Inline text
+ Navigation text
+
+ font-family-sans
+
+ 'Open Sans', sans-serif
+
+
+
+ navigationTextFontSize
+
+ Navigation text
font-scale-01
@@ -315,9 +321,19 @@ const sections = [
- inlineTextFontWeight
+ navigationTextFontStyle
+
+ Message
+
+ font-normal
+
+ normal
+
+
+
+ navigationTextFontWeight
- Inline text
+ Message
font-regular
@@ -352,23 +368,53 @@ const sections = [
- borderThickness
+ boxShadowOffsetX
- Container border
+ Container shadow
- border-width-1
+ -
1px
- borderStyle
+ boxShadowOffsetY
- Container border
+ Container shadow
+
+ -
+
+ 4px
+
+
+
+ boxShadowBlur
+
+ Container shadow
- border-style-solid
+ -
- solid
+ 6px
+
+
+
+ boxShadowSpreadRadius
+
+ Container shadow
+
+ -
+
+ 0px
+
+
+
+ boxShadowColor
+
+ Container shadow
+
+
+
@@ -389,17 +435,57 @@ const sections = [