From 8184ed122316ce55537d7d1204858b172fcc1274 Mon Sep 17 00:00:00 2001 From: Alice Clausen <42611957+alicemacl@users.noreply.github.com> Date: Thu, 22 Aug 2024 09:55:07 +0200 Subject: [PATCH] Warning content type (#1247) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * added variant for service message * added correct colors for service variant * added icon for service variant * added notification prop * Changed onActive-color for service variant * Fixed potential error with string/number comparison * Added new color and padding for service-variant * Changed size of icon to 24x24 * Added serviceAlert * Added AlertService * Added white color when variant is "service" * Removed previous edits for service-variant * Added seperate component for serviceAlert * Removed edit to service-variant * Created style for ServiceAlert * Updated design * Updated design * Changed padding * Fixed prettier style * Fixed camelcase styling * Fixed Prettier style * Updated padding * FIx flex direction and missing style for children paragraphs * Add changeset * Replace pixels values with rem unit * Change description in change set * New changeset * Change changeset * Add changeset --------- Co-authored-by: Marte Solli Vågen Co-authored-by: cibietici --- .changeset/purple-emus-switch.md | 8 + packages/spor-react/src/alert/AlertIcon.tsx | 9 + packages/spor-react/src/alert/BaseAlert.tsx | 8 +- .../spor-react/src/alert/ExpandableAlert.tsx | 10 +- .../spor-react/src/alert/ServiceAlert.tsx | 162 ++++++++++++++++++ packages/spor-react/src/alert/index.tsx | 1 + .../src/theme/components/alert-expandable.ts | 10 ++ .../src/theme/components/alert-service.ts | 53 ++++++ .../spor-react/src/theme/components/alert.ts | 6 + .../spor-react/src/theme/components/index.ts | 1 + 10 files changed, 264 insertions(+), 4 deletions(-) create mode 100644 .changeset/purple-emus-switch.md create mode 100644 packages/spor-react/src/alert/ServiceAlert.tsx create mode 100644 packages/spor-react/src/theme/components/alert-service.ts diff --git a/.changeset/purple-emus-switch.md b/.changeset/purple-emus-switch.md new file mode 100644 index 000000000..6592115c9 --- /dev/null +++ b/.changeset/purple-emus-switch.md @@ -0,0 +1,8 @@ +--- +"@vygruppen/spor-react": minor +--- + +### New component + +- ServiceAlert added to the bunch +- Alert: New variant "service" diff --git a/packages/spor-react/src/alert/AlertIcon.tsx b/packages/spor-react/src/alert/AlertIcon.tsx index dc1f11759..232c62357 100644 --- a/packages/spor-react/src/alert/AlertIcon.tsx +++ b/packages/spor-react/src/alert/AlertIcon.tsx @@ -4,6 +4,7 @@ import { InformationOutline24Icon, SuccessOutline24Icon, WarningOutline24Icon, + WarningFill24Icon, } from "@vygruppen/spor-icon-react"; import React from "react"; import { createTexts, useTranslation } from "../i18n"; @@ -38,6 +39,8 @@ const getIcon = (variant: BaseAlertProps["variant"]) => { return AltTransportOutline24Icon; case "error": return ErrorOutline24Icon; + case "service": + return WarningFill24Icon; } }; @@ -72,4 +75,10 @@ const texts = createTexts({ sv: "Alternativ transport", en: "Alternative transport", }, + service: { + nb: "Driftsmelding", + nn: "Driftsmelding", + sv: "Servicemeddelande", + en: "Service message", + }, }); diff --git a/packages/spor-react/src/alert/BaseAlert.tsx b/packages/spor-react/src/alert/BaseAlert.tsx index 94288eb52..5ce57aac7 100644 --- a/packages/spor-react/src/alert/BaseAlert.tsx +++ b/packages/spor-react/src/alert/BaseAlert.tsx @@ -3,7 +3,13 @@ import React from "react"; export type BaseAlertProps = BoxProps & { /** The color scheme and icon of the alert */ - variant: "info" | "success" | "warning" | "alt-transport" | "error"; + variant: + | "info" + | "success" + | "warning" + | "alt-transport" + | "error" + | "service"; /** The body content of the alert */ children: React.ReactNode; /** The title of the alert */ diff --git a/packages/spor-react/src/alert/ExpandableAlert.tsx b/packages/spor-react/src/alert/ExpandableAlert.tsx index c377609d4..31f3c97c4 100644 --- a/packages/spor-react/src/alert/ExpandableAlert.tsx +++ b/packages/spor-react/src/alert/ExpandableAlert.tsx @@ -73,15 +73,19 @@ export const ExpandableAlert = ({ WebkitLineClamp: "1", WebkitBoxOrient: "vertical", }} - color="darkGrey" + color={variant === "service" ? "white" : "darkGrey"} > {title} - + - {children} + + {children} + diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx new file mode 100644 index 000000000..4ead9ebae --- /dev/null +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -0,0 +1,162 @@ +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Flex, + Stack, + Text, + useMultiStyleConfig, +} from "@chakra-ui/react"; +import React from "react"; +import { AlertIcon } from "./AlertIcon"; +import { BaseAlert, BaseAlertProps } from "./BaseAlert"; +import { createTexts, useTranslation } from "../i18n"; + +type ServiceAlertProps = BaseAlertProps & { + /** The title string */ + title: string; + /** The number of notifications when there is a list of multiple alerts */ + notification: number; + /** The maximum width to display the service message + * + * Defaults to container.md */ + contentWidth: string; + /** Callback for when the expandable panel is opened or closed */ + onToggle?: (isOpen: boolean) => void; + /** Whether or not the default state of the alert is open */ + defaultOpen?: boolean; + /** + * The HTML element used for the `title` prop. + * + * Defaults to h3 */ + headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"; +}; +/** + * A service alert component. + * + * A regular alert with an expandable body, used to show service messages. The expandable body can be used to provide more information about the alert(s). + * + * ```tsx + * + * Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead. + * + * ``` + */ +export const ServiceAlert = ({ + variant, + children, + title, + notification, + contentWidth = "container.md", + headingLevel = "h3", + defaultOpen = false, + onToggle = () => {}, + ...boxProps +}: ServiceAlertProps) => { + variant = "service"; + const { t } = useTranslation(); + const styles = useMultiStyleConfig("AlertService"); + return ( + + + onToggle(expandedIndex === 0)} + defaultIndex={defaultOpen ? 0 : -1} + allowToggle + flexGrow="1" + > + + + + + + + + + {title} + + + + + {notification && ( + + {t(texts.notification(notification))} + + )} + + + + + + + + + + + {children} + + + + + + + + ); +}; + +const texts = createTexts({ + notification: (notification) => { + const numNotification = Number(notification); + return { + nb: `${numNotification} varsel`, + nn: `${numNotification} varsel`, + sv: `${numNotification} ${numNotification > 1 ? "underrättelser" : "underrättelse"}`, + en: `${numNotification} ${numNotification > 1 ? "notifications" : "notification"}`, + }; + }, +}); diff --git a/packages/spor-react/src/alert/index.tsx b/packages/spor-react/src/alert/index.tsx index 36016d55e..8a98af125 100644 --- a/packages/spor-react/src/alert/index.tsx +++ b/packages/spor-react/src/alert/index.tsx @@ -1,3 +1,4 @@ export * from "./ClosableAlert"; export * from "./ExpandableAlert"; export * from "./StaticAlert"; +export * from "./ServiceAlert"; diff --git a/packages/spor-react/src/theme/components/alert-expandable.ts b/packages/spor-react/src/theme/components/alert-expandable.ts index 610caa6c9..6583f3ba9 100644 --- a/packages/spor-react/src/theme/components/alert-expandable.ts +++ b/packages/spor-react/src/theme/components/alert-expandable.ts @@ -71,6 +71,16 @@ const config = helpers.defineMultiStyleConfig({ }, }, }, + service: { + container: { + _hover: { + outlineColor: "blueGreen", + }, + _active: { + backgroundColor: "pine", + }, + }, + }, }, defaultProps: { variant: "info", diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts new file mode 100644 index 000000000..53475f328 --- /dev/null +++ b/packages/spor-react/src/theme/components/alert-service.ts @@ -0,0 +1,53 @@ +import { anatomy } from "@chakra-ui/anatomy"; +import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"; + +const parts = anatomy("alertService").parts( + "container", + "box", + "notificationText", + "serviceMessageContent", +); +const helpers = createMultiStyleConfigHelpers(parts.keys); + +const config = helpers.defineMultiStyleConfig({ + baseStyle: { + container: { + paddingX: 0, + paddingY: 2, + fontSize: "inherit", + transitionProperty: "outline, border-radius", + transitionDuration: "fast", + borderTopRadius: "none", + borderBottomRadius: "18px", + _hover: { + outline: "2px solid", + outlineColor: "blueGreen", + }, + _active: { + backgroundColor: "pine", + outlineColor: "pine", + }, + }, + box: { + outline: "1px solid", + outlineColor: "blueGreen", + backgroundColor: "darkTeal", + borderBottomRadius: "1.125rem", + borderTopRadius: "none", + }, + notificationText: { + color: "white", + fontWeight: "400", + fontSize: "1rem", + pr: "0.375rem", + }, + serviceMessageContent: { + paddingX: "0.75rem", + paddingTop: "0.375rem", + paddingBottom: "0.9375rem", + color: "white", + }, + }, +}); + +export default config; diff --git a/packages/spor-react/src/theme/components/alert.ts b/packages/spor-react/src/theme/components/alert.ts index 5bab660fc..b661cf98e 100644 --- a/packages/spor-react/src/theme/components/alert.ts +++ b/packages/spor-react/src/theme/components/alert.ts @@ -51,6 +51,12 @@ const config = helpers.defineMultiStyleConfig({ backgroundColor: "banana", }, }, + service: { + container: { + backgroundColor: "darkTeal", + color: "white", + }, + }, }, defaultProps: { variant: "info", diff --git a/packages/spor-react/src/theme/components/index.ts b/packages/spor-react/src/theme/components/index.ts index f9777804a..8e10ebe32 100644 --- a/packages/spor-react/src/theme/components/index.ts +++ b/packages/spor-react/src/theme/components/index.ts @@ -1,6 +1,7 @@ export { default as Accordion } from "./accordion"; export { default as Alert } from "./alert"; export { default as AlertExpandable } from "./alert-expandable"; +export { default as AlertService } from "./alert-service"; export { default as Badge } from "./badge"; export { default as Breadcrumb } from "./breadcrumb"; export { default as Button } from "./button";