From 797d6f3968b8cdd208667fd4725afbf8757986e2 Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Mon, 26 Jun 2023 15:19:32 +0200 Subject: [PATCH 01/10] add close button to alert --- @navikt/core/css/alert.css | 9 +++ @navikt/core/react/src/alert/Alert.tsx | 67 ++++++++++++++----- .../core/react/src/alert/alert.stories.tsx | 43 ++++++++++++ 3 files changed, 101 insertions(+), 18 deletions(-) diff --git a/@navikt/core/css/alert.css b/@navikt/core/css/alert.css index 893cd23337..979882c10f 100644 --- a/@navikt/core/css/alert.css +++ b/@navikt/core/css/alert.css @@ -73,3 +73,12 @@ border: none; padding: 0; } + +.navds-alert > .navds-alert__button-wrapper { + align-self: flex-start; + justify-self: flex-end; + flex: 1; + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; +} diff --git a/@navikt/core/react/src/alert/Alert.tsx b/@navikt/core/react/src/alert/Alert.tsx index 1824d91284..c0eced8f57 100644 --- a/@navikt/core/react/src/alert/Alert.tsx +++ b/@navikt/core/react/src/alert/Alert.tsx @@ -3,10 +3,12 @@ import { CheckmarkCircleFillIcon, ExclamationmarkTriangleFillIcon, XMarkOctagonFillIcon, + XMarkIcon, } from "@navikt/aksel-icons"; import cl from "clsx"; import React, { forwardRef } from "react"; import { BodyLong } from "../typography/BodyLong"; +import { Button } from "../button"; export interface AlertProps extends React.HTMLAttributes { /** @@ -32,6 +34,17 @@ export interface AlertProps extends React.HTMLAttributes { * @default false */ inline?: boolean; + /** + * Removes close-button(X) when false + * Requires onClose to be set + * @default true + */ + closeButton?: boolean; + /** + * Callback for alert wanting to close + * requires closeButton to be true + */ + onClose?: () => void; } const Icon = ({ variant, ...props }) => { @@ -71,27 +84,45 @@ export const Alert = forwardRef( size = "medium", fullWidth = false, inline = false, + closeButton = false, + onClose, ...rest }, ref - ) => ( -
- - - {children} - -
- ) + ) => { + return ( +
+ + + {children} + + {closeButton && !inline && ( +
+
+ )} +
+ ); + } ); export default Alert; diff --git a/@navikt/core/react/src/alert/alert.stories.tsx b/@navikt/core/react/src/alert/alert.stories.tsx index 7e99a8b2b9..59bf9db9bf 100644 --- a/@navikt/core/react/src/alert/alert.stories.tsx +++ b/@navikt/core/react/src/alert/alert.stories.tsx @@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react"; import React from "react"; import { Alert } from "."; import { BodyLong, Heading as DsHeading, Link } from ".."; +import { within, userEvent } from "@storybook/testing-library"; +import { expect } from "@storybook/jest"; const meta: Meta = { title: "ds-react/Alert", @@ -147,3 +149,44 @@ export const Links = () => { ); }; + +const CloseButton = ({ children }: { children?: React.ReactNode }) => { + let [show, setShow] = React.useState(true); + + return ( + show && ( + setShow(false)}> + {children || "Content"} + + ) + ); +}; + +export const WithCloseButton: Story = { + render: () => { + return ( +
+ + + + Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui + laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat + sint commodo consequat eu aute. + + Id elit esse enim reprehenderit + +
+ ); + }, + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + const buttons = canvas.getAllByTitle("Lukk Alert"); + + await step("click button", async () => { + await userEvent.click(buttons[0]); + }); + + const buttonsAfter = canvas.getAllByTitle("Lukk Alert"); + expect(buttonsAfter.length).toBe(1); + }, +}; From 3459e5403bc44bcc9cb15ecda485f221f224396b Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Mon, 26 Jun 2023 15:35:59 +0200 Subject: [PATCH 02/10] add closeButton boolean to Default story --- @navikt/core/react/src/alert/alert.stories.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/@navikt/core/react/src/alert/alert.stories.tsx b/@navikt/core/react/src/alert/alert.stories.tsx index 59bf9db9bf..7f2541baf6 100644 --- a/@navikt/core/react/src/alert/alert.stories.tsx +++ b/@navikt/core/react/src/alert/alert.stories.tsx @@ -28,6 +28,7 @@ export const Default: Story = { size={props.size} fullWidth={props.fullWidth} inline={props.inline} + closeButton={props.closeButton} > {props.children} @@ -38,6 +39,7 @@ export const Default: Story = { fullWidth: false, variant: "info", size: "medium", + closeButton: false, }, argTypes: { variant: { @@ -52,6 +54,9 @@ export const Default: Story = { }, options: ["medium", "small"], }, + closeButton: { + type: "boolean", + }, }, }; From 484b5a1af103aa1520d50db4ba1d9fa0eec98a5a Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Mon, 26 Jun 2023 16:00:05 +0200 Subject: [PATCH 03/10] add alert icon padding (center on text w/ closeButton) --- @navikt/core/css/alert.css | 1 + @navikt/core/css/tokens.json | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/@navikt/core/css/alert.css b/@navikt/core/css/alert.css index 979882c10f..eb8a20d262 100644 --- a/@navikt/core/css/alert.css +++ b/@navikt/core/css/alert.css @@ -24,6 +24,7 @@ font-size: 1.5rem; align-self: flex-start; height: var(--a-font-line-height-xlarge); + margin: var(--ac-alert-padding-icon, var(--a-spacing-1)); background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent); } diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json index ed2bb98800..514359bccb 100644 --- a/@navikt/core/css/tokens.json +++ b/@navikt/core/css/tokens.json @@ -11,7 +11,8 @@ "--ac-alert-icon-info-color": "--a-icon-info", "--ac-alert-success-border": "--a-border-success", "--ac-alert-success-bg": "--a-surface-success-subtle", - "--ac-alert-icon-success-color": "--a-icon-success" + "--ac-alert-icon-success-color": "--a-icon-success", + "--ac-alert-padding-icon": "--a-spacing-1" }, "accordion": { "--ac-accordion-header-bg": "--a-surface-transparent", From 5e398d5f166107f7174fb0df2d5d6fcafb86090e Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Tue, 27 Jun 2023 14:31:09 +0200 Subject: [PATCH 04/10] remove styling for white border on :active tertiary buttons --- @navikt/core/css/alert.css | 3 +-- @navikt/core/css/button.css | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/@navikt/core/css/alert.css b/@navikt/core/css/alert.css index eb8a20d262..6f7e191a7f 100644 --- a/@navikt/core/css/alert.css +++ b/@navikt/core/css/alert.css @@ -75,9 +75,8 @@ padding: 0; } -.navds-alert > .navds-alert__button-wrapper { +.navds-alert__button-wrapper { align-self: flex-start; - justify-self: flex-end; flex: 1; display: flex; flex-flow: row nowrap; diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css index 36c9d3694b..b0446224b3 100644 --- a/@navikt/core/css/button.css +++ b/@navikt/core/css/button.css @@ -294,7 +294,6 @@ .navds-button--tertiary:active { color: var(--ac-button-tertiary-active-text, var(--a-text-on-action)); background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active)); - box-shadow: inset 0 0 0 1px var(--a-surface-default); } .navds-button--tertiary:active:hover { @@ -346,7 +345,6 @@ .navds-button--tertiary-neutral:active { color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral)); background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active)); - box-shadow: inset 0 0 0 1px var(--a-surface-default); } .navds-button--tertiary-neutral:active:hover { From 89bbcef3f81ef3ff9b1131d426369cb683d4ba6c Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Tue, 27 Jun 2023 14:41:06 +0200 Subject: [PATCH 05/10] changeset --- .changeset/six-ducks-eat.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/six-ducks-eat.md diff --git a/.changeset/six-ducks-eat.md b/.changeset/six-ducks-eat.md new file mode 100644 index 0000000000..3687eb025d --- /dev/null +++ b/.changeset/six-ducks-eat.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-css": minor +"@navikt/ds-react": minor +--- + +:sparkles: Add close button to Alert component From 4e7cb2d01cf42794bde9c2f8558dde11ca1c04b4 Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Thu, 29 Jun 2023 09:36:27 +0200 Subject: [PATCH 06/10] Update @navikt/core/react/src/alert/Alert.tsx --- @navikt/core/react/src/alert/Alert.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/alert/Alert.tsx b/@navikt/core/react/src/alert/Alert.tsx index c0eced8f57..ac6b0aa2ed 100644 --- a/@navikt/core/react/src/alert/Alert.tsx +++ b/@navikt/core/react/src/alert/Alert.tsx @@ -112,7 +112,7 @@ export const Alert = forwardRef( {closeButton && !inline && (