From 99551e9a4164413acb7044802dbc7846c285e309 Mon Sep 17 00:00:00 2001 From: Eileen Guo Date: Tue, 14 Nov 2023 17:57:40 +0100 Subject: [PATCH 01/12] update notification component styles and structure --- .../components/Subscribe.tsx | 8 +- .../Notification/Notification.css.ts | 101 ++++++++---------- .../Notification/Notification.stories.tsx | 96 +++++++---------- .../Notification/NotificationActions.tsx | 11 -- .../Notification/NotificationContainer.tsx | 84 --------------- .../Notification/NotificationRoot.tsx | 67 ++++++++++++ .../NotificationSubComponents.tsx | 15 +++ .../src/components/Notification/index.ts | 25 ++--- .../libs/react-ui/src/components/index.ts | 3 +- packages/libs/react-ui/src/index.ts | 3 +- .../libs/react-ui/src/styles/sprinkles.css.ts | 2 +- 11 files changed, 180 insertions(+), 235 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/Notification/NotificationActions.tsx delete mode 100644 packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx create mode 100644 packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx create mode 100644 packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx index 0542601ce7..39073afa0e 100644 --- a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx +++ b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx @@ -49,16 +49,12 @@ export const Subscribe: FC = () => { {Boolean(message) && ( - - {message} - + {message} )} ) : ( Boolean(message) && ( - - {message} - + {message} ) )} diff --git a/packages/libs/react-ui/src/components/Notification/Notification.css.ts b/packages/libs/react-ui/src/components/Notification/Notification.css.ts index ecc9d3c6fd..6e7424370d 100644 --- a/packages/libs/react-ui/src/components/Notification/Notification.css.ts +++ b/packages/libs/react-ui/src/components/Notification/Notification.css.ts @@ -1,44 +1,31 @@ import { sprinkles } from '@theme/sprinkles.css'; +import { responsiveStyle } from '@theme/themeUtils'; import type { ColorType } from '@theme/vars.css'; import { vars } from '@theme/vars.css'; -import { style, styleVariants } from '@vanilla-extract/css'; +import { createVar, style, styleVariants } from '@vanilla-extract/css'; -export const colorVariants: Omit< - Record, - 'secondary' | 'tertiary' -> = { - info: 'info', - positive: 'positive', - warning: 'warning', - negative: 'negative', - primary: 'primary', -}; +const accentVar = createVar(); export const containerClass = style([ sprinkles({ display: 'flex', alignItems: 'flex-start', - borderStyle: 'solid', - justifyContent: 'center', - }), - { - borderLeftWidth: vars.sizes.$1, - }, -]); - -export const containerWrapperClass = style([ - sprinkles({ - padding: '$md', - display: 'flex', + padding: '$sm', + gap: '$sm', width: '100%', - alignItems: 'flex-start', - gap: '$md', }), - { - maxWidth: 1440, - }, ]); +export const colorVariants: Omit< + Record, + 'secondary' | 'tertiary' | 'inverted' | 'primary' +> = { + info: 'info', + positive: 'positive', + warning: 'warning', + negative: 'negative', +}; + export const cardColorVariants = styleVariants(colorVariants, (color) => { return [ sprinkles({ @@ -46,32 +33,26 @@ export const cardColorVariants = styleVariants(colorVariants, (color) => { borderColor: `$${color}ContrastInverted`, color: `$${color}ContrastInverted`, }), + { + vars: { + [accentVar]: vars.colors[`$${color}ContrastInverted`], + }, + }, ]; }); -export const expandVariants = styleVariants({ - true: [sprinkles({ width: '100%', maxWidth: '100%' })], - false: [sprinkles({ width: 'max-content', maxWidth: '$maxContentWidth' })], -}); - export const displayVariants = styleVariants({ - outlined: [sprinkles({ borderWidth: '$sm', borderRadius: '$sm' })], - standard: [sprinkles({ border: 'none', borderRadius: 0 })], -}); - -export const inlineVariants = styleVariants({ - true: [ + bordered: [ sprinkles({ - display: 'flex', - alignItems: { - md: 'flex-start', - }, - flexDirection: { - md: 'row', - }, + borderStyle: 'solid', + borderWidth: '$sm', + borderRadius: '$sm', }), + { + borderLeftWidth: vars.sizes.$1, + }, ], - false: [], + borderless: [], }); export const closeButtonClass = style([ @@ -87,10 +68,12 @@ export const closeButtonClass = style([ export const contentClass = style([ sprinkles({ + color: '$neutral6', + fontSize: '$base', display: 'flex', flexDirection: 'column', gap: '$xs', - width: '100%', + maxWidth: '$maxContentWidth', }), { marginTop: 2, @@ -99,25 +82,20 @@ export const contentClass = style([ export const titleClass = style([ sprinkles({ - color: 'inherit', fontSize: '$base', fontWeight: '$bold', }), -]); - -export const descriptionClass = style([ - sprinkles({ - color: '$neutral6', - fontSize: '$base', - }), + { + color: accentVar, + }, ]); export const actionsContainerClass = style([ sprinkles({ - marginTop: '$lg', + marginTop: '$md', display: 'flex', justifyContent: 'flex-start', - gap: '$12', + gap: '$xl', }), ]); @@ -148,3 +126,10 @@ export const actionButtonColorVariants = styleVariants( ]; }, ); + +export const iconClass = style([ + sprinkles({ + color: 'inherit', + size: '$6', + }), +]); diff --git a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx index 0d18a42878..b7658324a5 100644 --- a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx +++ b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx @@ -1,15 +1,15 @@ import { SystemIcon } from '@components/Icon'; -import type { INotificationProps } from '@components/Notification'; +import type { INotificationRootProps } from '@components/Notification'; import { Notification } from '@components/Notification'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { colorVariants, displayVariants } from './Notification.css'; -const meta: Meta< - { - text: string; - } & INotificationProps -> = { +type StoryType = { + heading: string; +} & INotificationRootProps; + +const meta: Meta = { title: 'Components/Notification', parameters: { status: { @@ -18,26 +18,20 @@ const meta: Meta< docs: { description: { component: - 'The Notification component renders a notification with an icon, title, and text. The color variant of the notification can be set with the `color` prop.', + 'The Notification component renders a notification with an icon, heading, body, and action buttons. This component is used to announce dynamic changes in the content of a live region by asserting a discreet alert or notification. The appropriate role should be used to ensure that assistive technologies announce these dynamic changes. In the case where a user wants to use the Notification component purely for visual purposes, the role can be set to `none`.', }, }, }, argTypes: { - variant: { - options: Object.keys(displayVariants) as (keyof typeof displayVariants)[], - control: { - type: 'select', - }, - }, - icon: { - options: Object.keys(SystemIcon) as (keyof typeof SystemIcon)[], + styleVariant: { + description: + 'The Notification component has bordered and borderless variants. The borderless variant is used for notifications that located within a card or content body, while the bordered variant can be used in all other cases. ', + options: Object.keys(displayVariants), control: { type: 'select', }, - }, - title: { - control: { - type: 'text', + table: { + defaultValue: { summary: 'bordered' }, }, }, color: { @@ -46,78 +40,62 @@ const meta: Meta< type: 'select', }, }, - expanded: { + hasCloseButton: { control: { type: 'boolean', }, }, - hasCloseButton: { + children: { control: { - type: 'boolean', + type: 'text', }, }, - inline: { + role: { + description: + "The Notification component has a role attribute that can be set to 'alert', 'status', or 'none'.", + options: ['alert', 'status', 'none'], control: { - type: 'boolean', + type: 'select', + }, + table: { + defaultValue: { summary: 'status' }, }, }, }, }; export default meta; -type Story = StoryObj< - { - text: string; - } & INotificationProps ->; - -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/7.0/react/api/csf - * to learn how to use render functions. - */ +type Story = StoryObj; export const Primary: Story = { name: 'Notification', args: { - icon: 'Information', - title: 'Notification title', + heading: 'Notification Heading', hasCloseButton: true, - expanded: false, color: undefined, - text: 'Notification text to inform users about the event that occurred!', - variant: 'standard', - inline: false, + children: + 'Notification children to inform users about the event that occurred!', + styleVariant: 'bordered', }, - render: ({ - icon, - title, - hasCloseButton, - expanded, - color, - text, - variant, - inline, - }) => { + render: ({ heading, hasCloseButton, color, children, styleVariant }) => { return ( { alert('Close button clicked'); }} - variant={variant} - inline={inline} + icon={} + styleVariant={styleVariant} + role="none" > - {text} + {heading} + {children} - + Accept - + Reject diff --git a/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx b/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx deleted file mode 100644 index 192647c0de..0000000000 --- a/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import type { FC } from 'react'; -import React from 'react'; -import { actionsContainerClass } from './Notification.css'; - -export interface INotificationActionsProps { - children: React.ReactNode; -} - -export const NotificationActions: FC = ({ - children, -}) =>
{children}
; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx b/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx deleted file mode 100644 index 61770afea7..0000000000 --- a/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx +++ /dev/null @@ -1,84 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/consistent-type-imports -import { SystemIcon } from '@components/Icon'; -import classNames from 'classnames'; -import type { FC } from 'react'; -import React from 'react'; -import type { colorVariants } from './Notification.css'; -import { - cardColorVariants, - closeButtonClass, - containerClass, - containerWrapperClass, - contentClass, - descriptionClass, - displayVariants, - expandVariants, - inlineVariants, - titleClass, -} from './Notification.css'; - -export interface INotificationProps { - icon?: keyof typeof SystemIcon; - title?: string; - children?: React.ReactNode; - expanded?: boolean; - color?: keyof typeof colorVariants; - hasCloseButton?: boolean; - onClose?: () => void; - variant?: keyof typeof displayVariants; - inline?: boolean; -} - -export const NotificationContainer: FC = ({ - icon, - title, - children, - hasCloseButton = false, - color = 'info', - expanded = false, - onClose, - variant = 'standard', - inline = false, -}) => { - const Icon = icon ? SystemIcon[icon] : SystemIcon.HelpCircle; - - const inlineVariantsClass = inlineVariants[inline ? 'true' : 'false']; - - const classList = classNames( - containerClass, - cardColorVariants[color], - displayVariants[variant], - expandVariants[expanded ? 'true' : 'false'], - inlineVariantsClass, - ); - - const contentClassList = classNames(contentClass, inlineVariantsClass); - - const descriptionClassList = classNames( - descriptionClass, - inlineVariantsClass, - ); - - return ( -
-
- - -
- {title && {title}} -
{children}
-
- - {hasCloseButton && ( - - )} -
-
- ); -}; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx b/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx new file mode 100644 index 0000000000..582ef46ef7 --- /dev/null +++ b/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx @@ -0,0 +1,67 @@ +// eslint-disable-next-line @typescript-eslint/consistent-type-imports +import { Close, HelpCircle } from '@components/Icon/System/SystemIcon'; +import classNames from 'classnames'; +import type { FC } from 'react'; +import React, { useState } from 'react'; +import { + cardColorVariants, + closeButtonClass, + containerClass, + contentClass, + displayVariants, + iconClass, +} from './Notification.css'; + +export interface INotificationRootProps { + children?: React.ReactNode; + color?: keyof typeof cardColorVariants; + styleVariant?: keyof typeof displayVariants; + hasCloseButton?: boolean; + onClose?: () => void; + icon?: React.ReactNode; + role: 'alert' | 'status' | 'none'; +} + +export const NotificationRoot: FC = ({ + children, + hasCloseButton = false, + color = 'info', + styleVariant = 'bordered', + onClose, + icon, + role, +}) => { + const [isClosed, setIsClosed] = useState(false); + const classList = classNames( + containerClass, + cardColorVariants[color], + displayVariants[styleVariant], + ); + + if (isClosed) return null; + + return ( +
+ {icon ? ( + {icon} + ) : ( + + )} + +
{children}
+ + {hasCloseButton && ( + + )} +
+ ); +}; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx b/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx new file mode 100644 index 0000000000..0422be87eb --- /dev/null +++ b/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx @@ -0,0 +1,15 @@ +import type { FC } from 'react'; +import React from 'react'; +import { actionsContainerClass, titleClass } from './Notification.css'; + +export interface IBaseProps { + children: React.ReactNode; +} + +export const NotificationHeading: FC = ({ children }) => ( + {children} +); + +export const NotificationActions: FC = ({ children }) => ( +
{children}
+); diff --git a/packages/libs/react-ui/src/components/Notification/index.ts b/packages/libs/react-ui/src/components/Notification/index.ts index 0217fe9b37..763ff8abc4 100644 --- a/packages/libs/react-ui/src/components/Notification/index.ts +++ b/packages/libs/react-ui/src/components/Notification/index.ts @@ -1,25 +1,26 @@ import type { FC } from 'react'; -import type { INotificationActionsProps } from './NotificationActions'; -import { NotificationActions } from './NotificationActions'; import type { INotificationButtonProps } from './NotificationButton'; import { NotificationButton } from './NotificationButton'; -import type { INotificationProps } from './NotificationContainer'; -import { NotificationContainer } from './NotificationContainer'; +import type { INotificationRootProps } from './NotificationRoot'; +import { NotificationRoot } from './NotificationRoot'; +import type { IBaseProps } from './NotificationSubComponents'; +import { + NotificationActions, + NotificationHeading, +} from './NotificationSubComponents'; -export type { - INotificationActionsProps, - INotificationButtonProps, - INotificationProps, -}; +export type { INotificationButtonProps, INotificationRootProps }; interface INotification { - Root: FC; - Actions: FC; + Root: FC; + Actions: FC; Button: FC; + Heading: FC; } export const Notification: INotification = { - Root: NotificationContainer, + Root: NotificationRoot, Actions: NotificationActions, Button: NotificationButton, + Heading: NotificationHeading, }; diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts index f054f4fb64..fdc9597625 100644 --- a/packages/libs/react-ui/src/components/index.ts +++ b/packages/libs/react-ui/src/components/index.ts @@ -44,9 +44,8 @@ export type { INavHeaderSelectProps, } from './NavHeader'; export type { - INotificationActionsProps, INotificationButtonProps, - INotificationProps, + INotificationRootProps, } from './Notification'; export type { IPaginationProps } from './Pagination'; export type { diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts index 962e4d0aa2..9a446889be 100644 --- a/packages/libs/react-ui/src/index.ts +++ b/packages/libs/react-ui/src/index.ts @@ -36,9 +36,8 @@ export type { INavHeaderNavigationProps, INavHeaderRootProps, INavHeaderSelectProps, - INotificationActionsProps, INotificationButtonProps, - INotificationProps, + INotificationRootProps, IPaginationProps, IProfileSummaryLinkProps, IProfileSummaryRootProps, diff --git a/packages/libs/react-ui/src/styles/sprinkles.css.ts b/packages/libs/react-ui/src/styles/sprinkles.css.ts index 6331fb85e8..e93a628529 100644 --- a/packages/libs/react-ui/src/styles/sprinkles.css.ts +++ b/packages/libs/react-ui/src/styles/sprinkles.css.ts @@ -28,6 +28,7 @@ const systemProperties = defineProperties({ top: vars.sizes, wordBreak: ['normal', 'keep-all', 'break-word', 'break-all'], zIndex: [-1, 0, 1], + whiteSpace: ['nowrap', 'break-spaces', 'normal', 'pre-wrap'], }, }); @@ -123,7 +124,6 @@ const responsiveProperties = defineProperties({ textAlign: ['left', 'center', 'right'], fontSize: vars.fontSizes, fontWeight: vars.fontWeights, - whiteSpace: ['nowrap', 'break-spaces', 'normal'], }, shorthands: { margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'], From da4c768d7b1da9c4043ce56d9c4e5e4b7643277d Mon Sep 17 00:00:00 2001 From: Eileen Guo Date: Wed, 15 Nov 2023 15:49:23 +0100 Subject: [PATCH 02/12] updating other apps --- .../components/Subscribe.tsx | 25 ++++++++++++++--- .../CookieConsent/CookieConsent.tsx | 16 ++++++----- .../MDNotification/MDNotification.tsx | 8 +++--- .../Markdown/MDNotification/utils.ts | 27 +++++++++---------- .../Search/components/SearchResults.tsx | 17 +++++------- .../Global/CloseableNotification/index.tsx | 24 ----------------- .../Global/FormStatusNotification/index.tsx | 17 ++++++------ .../tools/src/pages/faucet/existing/index.tsx | 12 ++++----- .../apps/tools/src/pages/faucet/new/index.tsx | 23 ++++++---------- .../cross-chain-transfer-tracker/index.tsx | 7 ++--- .../Notification/Notification.stories.tsx | 1 - .../Notification/NotificationRoot.tsx | 4 +-- .../NotificationSubComponents.tsx | 26 +++++++++++------- .../src/components/Notification/index.ts | 16 ++++++++--- .../libs/react-ui/src/components/index.ts | 2 ++ packages/libs/react-ui/src/index.ts | 2 ++ 16 files changed, 116 insertions(+), 111 deletions(-) delete mode 100644 packages/apps/tools/src/components/Global/CloseableNotification/index.tsx diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx index 39073afa0e..a342b7597b 100644 --- a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx +++ b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx @@ -1,4 +1,11 @@ -import { Button, Heading, Input, Notification, Stack } from '@kadena/react-ui'; +import { + Button, + Heading, + Input, + Notification, + Stack, + SystemIcon, +} from '@kadena/react-ui'; import type { FC } from 'react'; import React from 'react'; import { useSubscribe } from './useSubscribe'; @@ -49,12 +56,24 @@ export const Subscribe: FC = () => { {Boolean(message) && ( - {message} + } + > + {message} + )} ) : ( Boolean(message) && ( - {message} + } + > + {message} + ) )} diff --git a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx index a6f179b7f1..152f63a130 100644 --- a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx +++ b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx @@ -1,5 +1,5 @@ import { updateConsent } from '@/utils/analytics'; -import { Notification, Text } from '@kadena/react-ui'; +import { Notification, SystemIcon, Text } from '@kadena/react-ui'; import type { FC } from 'react'; import React, { useCallback, useEffect, useState } from 'react'; import { notificationClass } from './styles.css'; @@ -31,14 +31,16 @@ export const CookieConsent: FC = () => { if (cookieConsent !== null || !mounted) return null; return ( -
+
} + role="none" > + + Cookie Consent + This notification concerns the cookie policy requirement to ask users for their consent to use Google Analytics or other @@ -61,6 +63,6 @@ export const CookieConsent: FC = () => { -
+ ); }; diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx b/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx index ffebb7b097..15ca679393 100644 --- a/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx +++ b/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx @@ -1,4 +1,4 @@ -import { Notification } from '@kadena/react-ui'; +import { Notification, SystemIcon } from '@kadena/react-ui'; import classNames from 'classnames'; import type { FC, ReactNode } from 'react'; import React from 'react'; @@ -18,11 +18,11 @@ export const MDNotification: FC = ({ children, title = '', label }) => {
+ {title} {children}
diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/utils.ts b/packages/apps/docs/src/components/Markdown/MDNotification/utils.ts index 6939dbad03..c0801005a2 100644 --- a/packages/apps/docs/src/components/Markdown/MDNotification/utils.ts +++ b/packages/apps/docs/src/components/Markdown/MDNotification/utils.ts @@ -1,4 +1,5 @@ -import type { INotificationProps } from '@kadena/react-ui'; +import type { INotificationRootProps } from '@kadena/react-ui'; +import { SystemIcon } from '@kadena/react-ui'; export type LabelType = | 'info' @@ -7,14 +8,12 @@ export type LabelType = | 'caution' | 'danger' | 'warning'; -type IconType = 'Information' | 'Bell' | undefined; -export const getColor = (label?: LabelType): INotificationProps['color'] => { +export const getColor = ( + label?: LabelType, +): INotificationRootProps['color'] => { if (!label) return; switch (label) { - case 'note': - case 'info': - return 'primary'; case 'tip': return 'positive'; case 'danger': @@ -22,23 +21,23 @@ export const getColor = (label?: LabelType): INotificationProps['color'] => { return 'negative'; case 'caution': return 'warning'; + case 'note': + case 'info': default: - return 'primary'; + return 'info'; } }; -export const getIcon = (label?: LabelType): IconType => { +export const getIcon = (label?: LabelType): INotificationRootProps['icon'] => { if (!label) return undefined; switch (label) { - case 'note': - case 'info': - case 'tip': - return 'Information'; case 'caution': case 'warning': case 'danger': - return 'Bell'; - + return ; + case 'note': + case 'info': + case 'tip': default: return undefined; } diff --git a/packages/apps/docs/src/components/Search/components/SearchResults.tsx b/packages/apps/docs/src/components/Search/components/SearchResults.tsx index b31c1c2c41..fff0159c7f 100644 --- a/packages/apps/docs/src/components/Search/components/SearchResults.tsx +++ b/packages/apps/docs/src/components/Search/components/SearchResults.tsx @@ -8,6 +8,7 @@ import { Heading, Notification, Stack, + SystemIcon, Tabs, useModal, } from '@kadena/react-ui'; @@ -100,9 +101,8 @@ export const SearchResults: FC = ({ {semanticError ? ( } + role="status" > {semanticError} @@ -136,11 +136,8 @@ export const SearchResults: FC = ({ - + } role="none"> + QA search is in beta QA search our latest AI vector-based search, designed to provide instant answers to your queries.
@@ -166,8 +163,8 @@ export const SearchResults: FC = ({ {error && ( } + role="status" > {error} diff --git a/packages/apps/tools/src/components/Global/CloseableNotification/index.tsx b/packages/apps/tools/src/components/Global/CloseableNotification/index.tsx deleted file mode 100644 index c148683caf..0000000000 --- a/packages/apps/tools/src/components/Global/CloseableNotification/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import type { INotificationProps } from '@kadena/react-ui'; -import { Notification } from '@kadena/react-ui'; -import React from 'react'; - -export interface ICloseableNotificationProps - extends Omit {} - -export const CloseableNotification = ({ - onClose, - ...rest -}: ICloseableNotificationProps) => { - const [show, setShow] = React.useState(true); - if (!show) return null; - return ( - { - onClose?.(); - setShow(false); - }} - {...rest} - /> - ); -}; diff --git a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx index fe88942b59..33804e633e 100644 --- a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx +++ b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx @@ -1,5 +1,5 @@ import type { INotificationProps } from '@kadena/react-ui'; -import { Notification } from '@kadena/react-ui'; +import { Notification, SystemIcon } from '@kadena/react-ui'; import useTranslation from 'next-translate/useTranslation'; import type { FC } from 'react'; import React, { useCallback, useEffect, useState } from 'react'; @@ -18,10 +18,10 @@ const statusToColorMap: Record = { }; const statusToIconMap: Record = { - erroneous: 'AlertBox', - idle: 'AlertCircleOutline', - processing: 'Information', - successful: 'Check', + erroneous: , + idle: , + processing: , + successful: , }; export interface IFormStatusNotificationProps { @@ -79,11 +79,12 @@ export const FormStatusNotification: FC = ( color={statusToColorMap[status!]} hasCloseButton icon={statusToIconMap[status!]} - expanded - title={title ?? titles[status!]} onClose={onNotificationCloseClick} - variant="outlined" + role="status" > + {title ? ( + {titles[status!]} + ) : null} {body ?? bodies[status!]} {children} diff --git a/packages/apps/tools/src/pages/faucet/existing/index.tsx b/packages/apps/tools/src/pages/faucet/existing/index.tsx index 69330bc199..20cfbcb511 100644 --- a/packages/apps/tools/src/pages/faucet/existing/index.tsx +++ b/packages/apps/tools/src/pages/faucet/existing/index.tsx @@ -17,6 +17,7 @@ import { Card, Heading, Notification, + SystemIcon, } from '@kadena/react-ui'; import Trans from 'next-translate/Trans'; import useTranslation from 'next-translate/useTranslation'; @@ -143,13 +144,10 @@ const ExistingAccountFaucetPage: FC = () => { {t('Add Funds to Existing Account')}
{mainnetSelected ? ( - + + + {t('The Faucet is not available on Mainnet')} + { {t('Create and Fund New Account')}
{mainnetSelected ? ( - + + + {t('The Faucet is not available on Mainnet')} + { ) : null}
- + + {t(`Before you start`)} { />, ]} /> - +
{ onClose={() => { setTxError(''); }} - title="Warning" - icon={'AlertBox'} - variant="outlined" + icon={} + role="status" > + Warning {txError} { alert('Close button clicked'); }} - icon={} styleVariant={styleVariant} role="none" > diff --git a/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx b/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx index 582ef46ef7..84c35ef8a2 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx @@ -1,5 +1,5 @@ // eslint-disable-next-line @typescript-eslint/consistent-type-imports -import { Close, HelpCircle } from '@components/Icon/System/SystemIcon'; +import { Close, Information } from '@components/Icon/System/SystemIcon'; import classNames from 'classnames'; import type { FC } from 'react'; import React, { useState } from 'react'; @@ -45,7 +45,7 @@ export const NotificationRoot: FC = ({ {icon ? ( {icon} ) : ( - + )}
{children}
diff --git a/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx b/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx index 0422be87eb..a59c4af082 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx @@ -1,15 +1,23 @@ -import type { FC } from 'react'; +import type { ComponentPropsWithRef, FC } from 'react'; import React from 'react'; import { actionsContainerClass, titleClass } from './Notification.css'; -export interface IBaseProps { - children: React.ReactNode; -} +export interface INotificationHeadingProps + extends ComponentPropsWithRef<'h5'> {} -export const NotificationHeading: FC = ({ children }) => ( - {children} +export const NotificationHeading: FC = ({ + children, + ...restProps +}) => ( +
+ {children} +
); -export const NotificationActions: FC = ({ children }) => ( -
{children}
-); +export interface INotificationActionsProps { + children: React.ReactNode; +} + +export const NotificationActions: FC = ({ + children, +}) =>
{children}
; diff --git a/packages/libs/react-ui/src/components/Notification/index.ts b/packages/libs/react-ui/src/components/Notification/index.ts index 763ff8abc4..9e0ae921ab 100644 --- a/packages/libs/react-ui/src/components/Notification/index.ts +++ b/packages/libs/react-ui/src/components/Notification/index.ts @@ -3,19 +3,27 @@ import type { INotificationButtonProps } from './NotificationButton'; import { NotificationButton } from './NotificationButton'; import type { INotificationRootProps } from './NotificationRoot'; import { NotificationRoot } from './NotificationRoot'; -import type { IBaseProps } from './NotificationSubComponents'; +import type { + INotificationActionsProps, + INotificationHeadingProps, +} from './NotificationSubComponents'; import { NotificationActions, NotificationHeading, } from './NotificationSubComponents'; -export type { INotificationButtonProps, INotificationRootProps }; +export type { + INotificationActionsProps, + INotificationButtonProps, + INotificationHeadingProps, + INotificationRootProps, +}; interface INotification { Root: FC; - Actions: FC; + Actions: FC; Button: FC; - Heading: FC; + Heading: FC; } export const Notification: INotification = { diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts index fdc9597625..0ca8686c7f 100644 --- a/packages/libs/react-ui/src/components/index.ts +++ b/packages/libs/react-ui/src/components/index.ts @@ -44,7 +44,9 @@ export type { INavHeaderSelectProps, } from './NavHeader'; export type { + INotificationActionsProps, INotificationButtonProps, + INotificationHeadingProps, INotificationRootProps, } from './Notification'; export type { IPaginationProps } from './Pagination'; diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts index 9a446889be..e4dc6d5916 100644 --- a/packages/libs/react-ui/src/index.ts +++ b/packages/libs/react-ui/src/index.ts @@ -36,7 +36,9 @@ export type { INavHeaderNavigationProps, INavHeaderRootProps, INavHeaderSelectProps, + INotificationActionsProps, INotificationButtonProps, + INotificationHeadingProps, INotificationRootProps, IPaginationProps, IProfileSummaryLinkProps, From db4a171027ccc5c5a3162afe56e6f2f82f97fa8e Mon Sep 17 00:00:00 2001 From: Eileen Guo Date: Wed, 15 Nov 2023 15:57:14 +0100 Subject: [PATCH 03/12] update graph-client --- .../src/components/error-box/error-box.tsx | 8 ++++++-- .../account/overview/[module]/[account].tsx | 2 +- .../src/pages/transactions/[key].tsx | 19 +++++++++++++------ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/apps/graph-client/src/components/error-box/error-box.tsx b/packages/apps/graph-client/src/components/error-box/error-box.tsx index 18765a69d3..b7bffaa917 100644 --- a/packages/apps/graph-client/src/components/error-box/error-box.tsx +++ b/packages/apps/graph-client/src/components/error-box/error-box.tsx @@ -1,5 +1,5 @@ import type { ApolloError } from '@apollo/client'; -import { Box, Notification } from '@kadena/react-ui'; +import { Box, Notification, SystemIcon } from '@kadena/react-ui'; import React from 'react'; interface IErrorBoxProps { @@ -28,7 +28,11 @@ export const ErrorBox = (props: IErrorBoxProps): JSX.Element => { } return ( - + } + role="status" + > {errorTitle} {errorMessage} diff --git a/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx b/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx index 39371e5b23..49946b9e13 100644 --- a/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx +++ b/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx @@ -41,7 +41,7 @@ const Account: React.FC = () => { data?.account?.totalBalance === 0 && data?.account?.chainAccounts.length === 0 && ( <> - + We could not find any data on this account. Please check the module and account name. diff --git a/packages/apps/graph-client/src/pages/transactions/[key].tsx b/packages/apps/graph-client/src/pages/transactions/[key].tsx index 923966c77b..050c929989 100644 --- a/packages/apps/graph-client/src/pages/transactions/[key].tsx +++ b/packages/apps/graph-client/src/pages/transactions/[key].tsx @@ -2,7 +2,14 @@ import { useGetTransactionByRequestKeySubscription } from '@/__generated__/sdk'; import LoaderAndError from '@/components/LoaderAndError/loader-and-error'; import routes from '@/constants/routes'; import { formatCode, formatLisp } from '@/utils/formatter'; -import { Box, Breadcrumbs, Link, Notification, Table } from '@kadena/react-ui'; +import { + Box, + Breadcrumbs, + Link, + Notification, + SystemIcon, + Table, +} from '@kadena/react-ui'; import { useRouter } from 'next/router'; import React from 'react'; @@ -49,8 +56,8 @@ const RequestKey: React.FC = () => { {data?.transaction?.badResult && ( } + role="status" > Transaction failed with status:{' '} 
@@ -65,8 +72,8 @@ const RequestKey: React.FC = () => {
                   {data?.transaction?.goodResult && (
                     }
+                      role="status"
                     >
                       Transaction succeeded with status:
                       

@@ -75,7 +82,7 @@ const RequestKey: React.FC = () => {
                   )}
                   {!data?.transaction?.goodResult &&
                     !data?.transaction?.badResult && (
-                      
+                      
                         Unknown transaction status
                       
                     )}

From a7bb78d8b035e4a9ad6977ec99e665eda0596fcf Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Wed, 15 Nov 2023 15:58:33 +0100
Subject: [PATCH 04/12] add changeset

---
 .changeset/cool-buttons-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cool-buttons-happen.md

diff --git a/.changeset/cool-buttons-happen.md b/.changeset/cool-buttons-happen.md
new file mode 100644
index 0000000000..aa09bacf3c
--- /dev/null
+++ b/.changeset/cool-buttons-happen.md
@@ -0,0 +1,5 @@
+---
+'@kadena/react-ui': minor
+---
+
+Updated the Notification component API

From 49f71751611f12e77342ff54dfeb0b0a4d8c18d7 Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Wed, 15 Nov 2023 16:11:45 +0100
Subject: [PATCH 05/12] fixing build

---
 .../Markdown/MDNotification/{utils.ts => utils.tsx}       | 1 +
 .../components/Global/FormStatusNotification/index.tsx    | 8 ++++----
 packages/apps/tools/src/pages/faucet/new/index.tsx        | 2 --
 3 files changed, 5 insertions(+), 6 deletions(-)
 rename packages/apps/docs/src/components/Markdown/MDNotification/{utils.ts => utils.tsx} (97%)

diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/utils.ts b/packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx
similarity index 97%
rename from packages/apps/docs/src/components/Markdown/MDNotification/utils.ts
rename to packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx
index c0801005a2..f52c080cf9 100644
--- a/packages/apps/docs/src/components/Markdown/MDNotification/utils.ts
+++ b/packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx
@@ -1,5 +1,6 @@
 import type { INotificationRootProps } from '@kadena/react-ui';
 import { SystemIcon } from '@kadena/react-ui';
+import React from 'react';
 
 export type LabelType =
   | 'info'
diff --git a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
index 33804e633e..df3138ec9d 100644
--- a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
+++ b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
@@ -1,4 +1,4 @@
-import type { INotificationProps } from '@kadena/react-ui';
+import type { INotificationRootProps } from '@kadena/react-ui';
 import { Notification, SystemIcon } from '@kadena/react-ui';
 import useTranslation from 'next-translate/useTranslation';
 import type { FC } from 'react';
@@ -10,14 +10,14 @@ export type FormStatus = 'idle' | 'successful' | 'erroneous' | 'processing';
 export type Titles = Record;
 export type Bodies = Record;
 
-const statusToColorMap: Record = {
+const statusToColorMap: Record = {
   erroneous: 'negative',
   idle: 'warning',
   processing: 'info',
   successful: 'positive',
 };
 
-const statusToIconMap: Record = {
+const statusToIconMap: Record = {
   erroneous: ,
   idle: ,
   processing: ,
@@ -30,7 +30,7 @@ export interface IFormStatusNotificationProps {
   body?: React.ReactNode;
   statusTitles?: Partial;
   statusBodies?: Partial;
-  children?: INotificationProps['children'];
+  children?: INotificationRootProps['children'];
 }
 
 export const FormStatusNotification: FC = (
diff --git a/packages/apps/tools/src/pages/faucet/new/index.tsx b/packages/apps/tools/src/pages/faucet/new/index.tsx
index 5d2c380af0..eaf3447a4c 100644
--- a/packages/apps/tools/src/pages/faucet/new/index.tsx
+++ b/packages/apps/tools/src/pages/faucet/new/index.tsx
@@ -8,7 +8,6 @@ import {
   Heading,
   IconButton,
   Notification,
-  SystemIcon,
 } from '@kadena/react-ui';
 
 import {
@@ -34,7 +33,6 @@ import type { FormStatus } from '@/components/Global';
 import { ChainSelect, FormStatusNotification } from '@/components/Global';
 import { AccountHoverTag } from '@/components/Global/AccountHoverTag';
 import AccountNameField from '@/components/Global/AccountNameField';
-import { CloseableNotification } from '@/components/Global/CloseableNotification';
 import { HoverTag } from '@/components/Global/HoverTag';
 import type { PredKey } from '@/components/Global/PredKeysSelect';
 import { PredKeysSelect } from '@/components/Global/PredKeysSelect';

From 6843b3fbcc20c5dce47aa11b0d13d0da71b489b9 Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Wed, 15 Nov 2023 16:22:55 +0100
Subject: [PATCH 06/12] Fixing lint error

---
 packages/apps/tools/src/pages/faucet/existing/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/apps/tools/src/pages/faucet/existing/index.tsx b/packages/apps/tools/src/pages/faucet/existing/index.tsx
index 20cfbcb511..107c17c0e3 100644
--- a/packages/apps/tools/src/pages/faucet/existing/index.tsx
+++ b/packages/apps/tools/src/pages/faucet/existing/index.tsx
@@ -17,7 +17,6 @@ import {
   Card,
   Heading,
   Notification,
-  SystemIcon,
 } from '@kadena/react-ui';
 import Trans from 'next-translate/Trans';
 import useTranslation from 'next-translate/useTranslation';
@@ -25,7 +24,7 @@ import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { buttonContainerClass, notificationContainerStyle } from './styles.css';

From 8419a6a6ac7a53cbb50743ed3a123462e678735b Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Wed, 15 Nov 2023 16:55:47 +0100
Subject: [PATCH 07/12] fix styles

---
 .../components/Subscribe.tsx                  | 21 +-----
 .../CookieConsent/CookieConsent.tsx           | 70 ++++++++++---------
 .../components/CookieConsent/styles.css.ts    | 10 ++-
 3 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
index a342b7597b..72c0736bd0 100644
--- a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
+++ b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
@@ -1,11 +1,4 @@
-import {
-  Button,
-  Heading,
-  Input,
-  Notification,
-  Stack,
-  SystemIcon,
-} from '@kadena/react-ui';
+import { Button, Heading, Input, Notification, Stack } from '@kadena/react-ui';
 import type { FC } from 'react';
 import React from 'react';
 import { useSubscribe } from './useSubscribe';
@@ -56,22 +49,14 @@ export const Subscribe: FC = () => {
             
 
             {Boolean(message) && (
-              }
-              >
+              
                 {message}
               
             )}
           
         ) : (
           Boolean(message) && (
-            }
-            >
+            
               {message}
             
           )
diff --git a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
index 152f63a130..af0cc15f3e 100644
--- a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
+++ b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
@@ -1,8 +1,8 @@
 import { updateConsent } from '@/utils/analytics';
-import { Notification, SystemIcon, Text } from '@kadena/react-ui';
+import { Box, Notification, SystemIcon, Text } from '@kadena/react-ui';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
-import { notificationClass } from './styles.css';
+import { containerClass, notificationWrapperClass } from './styles.css';
 
 export const CookieConsent: FC = () => {
   const [cookieConsent, setCookieConsent] = useState(null);
@@ -31,38 +31,40 @@ export const CookieConsent: FC = () => {
   if (cookieConsent !== null || !mounted) return null;
 
   return (
-    

-      }
-        role="none"
-      >
-        
-          Cookie Consent
-        
-        
-          This notification concerns the cookie policy requirement to ask users
-          for their consent to use Google Analytics or other
-          tracking tools for better optimizations/performances.
-        
-        
-          
-            Accept
-          
-          
-            Reject
-          
-        
-      
+    

+      

+        }
+          role="none"
+        >
+          
+            Cookie Consent
+          
+          
+            This notification concerns the cookie policy requirement to ask
+            users for their consent to use Google Analytics or
+            other tracking tools for better optimizations/performances.
+          
+          
+            
+              Accept
+            
+            
+              Reject
+            
+          
+        
+      

     

   );
 };
diff --git a/packages/apps/docs/src/components/CookieConsent/styles.css.ts b/packages/apps/docs/src/components/CookieConsent/styles.css.ts
index dcd2ec2a3b..e45e7f439e 100644
--- a/packages/apps/docs/src/components/CookieConsent/styles.css.ts
+++ b/packages/apps/docs/src/components/CookieConsent/styles.css.ts
@@ -1,12 +1,20 @@
 import { sprinkles } from '@kadena/react-ui/theme';
 import { style } from '@vanilla-extract/css';
+import { $$pageWidth, globalClass } from '../Layout/global.css';
 
-export const notificationClass = style([
+export const containerClass = style([
   sprinkles({
     position: 'sticky',
     top: '$17',
+    bg: '$primarySurfaceInverted',
   }),
   {
     zIndex: 1000,
   },
 ]);
+
+export const notificationWrapperClass = style([
+  globalClass,
+  sprinkles({ marginX: 'auto' }),
+  { maxWidth: $$pageWidth },
+]);

From 993eded8c5d2cc96abfe22731b12da37838ff45e Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Thu, 16 Nov 2023 10:42:25 +0100
Subject: [PATCH 08/12] fix content style

---
 .../react-ui/src/components/Notification/Notification.css.ts   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/libs/react-ui/src/components/Notification/Notification.css.ts b/packages/libs/react-ui/src/components/Notification/Notification.css.ts
index 6e7424370d..a5e57bc117 100644
--- a/packages/libs/react-ui/src/components/Notification/Notification.css.ts
+++ b/packages/libs/react-ui/src/components/Notification/Notification.css.ts
@@ -70,8 +70,6 @@ export const contentClass = style([
   sprinkles({
     color: '$neutral6',
     fontSize: '$base',
-    display: 'flex',
-    flexDirection: 'column',
     gap: '$xs',
     maxWidth: '$maxContentWidth',
   }),
@@ -84,6 +82,7 @@ export const titleClass = style([
   sprinkles({
     fontSize: '$base',
     fontWeight: '$bold',
+    marginBottom: '$xs',
   }),
   {
     color: accentVar,

From 29de99ed4ec4b048c525b64e8a79c9f6abeb5512 Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Thu, 16 Nov 2023 10:52:31 +0100
Subject: [PATCH 09/12] pr updates

---
 .../src/components/Global/FormStatusNotification/index.tsx    | 4 +---
 packages/apps/tools/src/pages/faucet/existing/index.tsx       | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
index df3138ec9d..8ea8f3e918 100644
--- a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
+++ b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx
@@ -82,9 +82,7 @@ export const FormStatusNotification: FC = (
         onClose={onNotificationCloseClick}
         role="status"
       >
-        {title ? (
-          {titles[status!]}
-        ) : null}
+        {title ?? titles[status!]}
         {body ?? bodies[status!]}
         {children}
       
diff --git a/packages/apps/tools/src/pages/faucet/existing/index.tsx b/packages/apps/tools/src/pages/faucet/existing/index.tsx
index 107c17c0e3..1248453d06 100644
--- a/packages/apps/tools/src/pages/faucet/existing/index.tsx
+++ b/packages/apps/tools/src/pages/faucet/existing/index.tsx
@@ -24,7 +24,7 @@ import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';
-import { useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { buttonContainerClass, notificationContainerStyle } from './styles.css';

From 4e4ab6f4b9df38f72f784a5a28a1fe201b04c40c Mon Sep 17 00:00:00 2001
From: Eileen Guo 
Date: Thu, 16 Nov 2023 15:09:25 +0100
Subject: [PATCH 10/12] update component structure

---
 .../components/Subscribe.tsx                  |  8 ++--
 .../CookieConsent/CookieConsent.tsx           | 39 ++++++++++---------
 .../MDNotification/MDNotification.tsx         |  8 ++--
 .../Search/components/SearchResults.tsx       | 11 +++---
 .../src/components/error-box/error-box.tsx    |  8 +---
 .../account/overview/[module]/[account].tsx   |  4 +-
 .../src/pages/transactions/[key].tsx          | 12 +++---
 .../Global/FormStatusNotification/index.tsx   | 20 ++++++----
 .../tools/src/pages/faucet/existing/index.tsx |  9 +++--
 .../apps/tools/src/pages/faucet/new/index.tsx | 15 +++----
 .../cross-chain-transfer-tracker/index.tsx    | 19 +++++----
 .../Notification/Notification.stories.tsx     | 33 +++++++++-------
 ...{NotificationRoot.tsx => Notification.tsx} |  4 +-
 .../Notification/NotificationButton.tsx       |  6 ---
 .../NotificationSubComponents.tsx             |  4 +-
 .../src/components/Notification/index.ts      | 38 ++++--------------
 .../libs/react-ui/src/components/index.ts     | 11 ++++--
 packages/libs/react-ui/src/index.ts           |  7 +++-
 18 files changed, 125 insertions(+), 131 deletions(-)
 rename packages/libs/react-ui/src/components/Notification/{NotificationRoot.tsx => Notification.tsx} (93%)

diff --git a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
index 72c0736bd0..ac389afd88 100644
--- a/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
+++ b/packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx
@@ -49,16 +49,16 @@ export const Subscribe: FC = () => {
             
 
             {Boolean(message) && (
-              
+              
                 {message}
-              
+              
             )}
           
         ) : (
           Boolean(message) && (
-            
+            
               {message}
-            
+            
           )
         )}
       
diff --git a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
index af0cc15f3e..45cb619903 100644
--- a/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
+++ b/packages/apps/docs/src/components/CookieConsent/CookieConsent.tsx
@@ -1,5 +1,12 @@
 import { updateConsent } from '@/utils/analytics';
-import { Box, Notification, SystemIcon, Text } from '@kadena/react-ui';
+import {
+  Notification,
+  NotificationButton,
+  NotificationFooter,
+  NotificationHeading,
+  SystemIcon,
+  Text,
+} from '@kadena/react-ui';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { containerClass, notificationWrapperClass } from './styles.css';
@@ -33,37 +40,31 @@ export const CookieConsent: FC = () => {
   return (
     

       

-        }
           role="none"
         >
-          
+          
             Cookie Consent
-          
+          
           
             This notification concerns the cookie policy requirement to ask
             users for their consent to use Google Analytics or
             other tracking tools for better optimizations/performances.
           
-          
-            
+          
+            
               Accept
-            
-            
+              
+            
+            
               Reject
-            
-          
-        
+              
+            
+          
+        
       

     

   );
diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx b/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx
index 15ca679393..a81178a95d 100644
--- a/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx
+++ b/packages/apps/docs/src/components/Markdown/MDNotification/MDNotification.tsx
@@ -1,4 +1,4 @@
-import { Notification, SystemIcon } from '@kadena/react-ui';
+import { Notification, NotificationHeading } from '@kadena/react-ui';
 import classNames from 'classnames';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
@@ -16,15 +16,15 @@ interface IProps {
 export const MDNotification: FC = ({ children, title = '', label }) => {
   return (
     

-      
-        {title}
+        {title}
         {children}
-      
+      
     

   );
 };
diff --git a/packages/apps/docs/src/components/Search/components/SearchResults.tsx b/packages/apps/docs/src/components/Search/components/SearchResults.tsx
index fff0159c7f..7c6b9855b9 100644
--- a/packages/apps/docs/src/components/Search/components/SearchResults.tsx
+++ b/packages/apps/docs/src/components/Search/components/SearchResults.tsx
@@ -7,6 +7,7 @@ import {
   Button,
   Heading,
   Notification,
+  NotificationHeading,
   Stack,
   SystemIcon,
   Tabs,
@@ -136,8 +137,8 @@ export const SearchResults: FC = ({
 
         
           
-            } role="none">
-              QA search is in beta
+            } role="none">
+              QA search is in beta
               QA search our latest AI vector-based search, designed to provide
               instant answers to your queries.
               

@@ -152,7 +153,7 @@ export const SearchResults: FC = ({
                 collect valuable data that will aid us in refining and enhancing
                 the accuracy of our model’s responses in the future.
               

-            
+            
           
           

             {isLoading && (
@@ -161,13 +162,13 @@ export const SearchResults: FC = ({
               

             )}
             {error && (
-              }
                 role="status"
               >
                 {error}
-              
+              
             )}
 
             {conversation.history?.map((interaction, idx) => {
diff --git a/packages/apps/graph-client/src/components/error-box/error-box.tsx b/packages/apps/graph-client/src/components/error-box/error-box.tsx
index b7bffaa917..9d136bba2a 100644
--- a/packages/apps/graph-client/src/components/error-box/error-box.tsx
+++ b/packages/apps/graph-client/src/components/error-box/error-box.tsx
@@ -28,11 +28,7 @@ export const ErrorBox = (props: IErrorBoxProps): JSX.Element => {
   }
 
   return (
-    }
-      role="status"
-    >
+    } role="status">
       {errorTitle}
       
       {errorMessage}
@@ -42,6 +38,6 @@ export const ErrorBox = (props: IErrorBoxProps): JSX.Element => {
           {errorExtra}
         
       )}
-    
+    
   );
 };
diff --git a/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx b/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx
index 49946b9e13..eff0c54bff 100644
--- a/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx
+++ b/packages/apps/graph-client/src/pages/account/overview/[module]/[account].tsx
@@ -41,10 +41,10 @@ const Account: React.FC = () => {
         data?.account?.totalBalance === 0 &&
         data?.account?.chainAccounts.length === 0 && (
           <>
-            
+            
               We could not find any data on this account. Please check the
               module and account name.
-            
+            
             
           
         )}
diff --git a/packages/apps/graph-client/src/pages/transactions/[key].tsx b/packages/apps/graph-client/src/pages/transactions/[key].tsx
index 050c929989..7d96aadd11 100644
--- a/packages/apps/graph-client/src/pages/transactions/[key].tsx
+++ b/packages/apps/graph-client/src/pages/transactions/[key].tsx
@@ -54,7 +54,7 @@ const RequestKey: React.FC = () => {
                 
                 
                   {data?.transaction?.badResult && (
-                    }
                       role="status"
@@ -67,10 +67,10 @@ const RequestKey: React.FC = () => {
                           4,
                         )}
- + )} {data?.transaction?.goodResult && ( - } role="status" @@ -78,13 +78,13 @@ const RequestKey: React.FC = () => { Transaction succeeded with status: 
{formatCode(data?.transaction?.goodResult)}
- + )} {!data?.transaction?.goodResult && !data?.transaction?.badResult && ( - + Unknown transaction status - + )} diff --git a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx index 8ea8f3e918..781fcd7df0 100644 --- a/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx +++ b/packages/apps/tools/src/components/Global/FormStatusNotification/index.tsx @@ -1,5 +1,9 @@ -import type { INotificationRootProps } from '@kadena/react-ui'; -import { Notification, SystemIcon } from '@kadena/react-ui'; +import type { INotificationProps } from '@kadena/react-ui'; +import { + Notification, + NotificationHeading, + SystemIcon, +} from '@kadena/react-ui'; import useTranslation from 'next-translate/useTranslation'; import type { FC } from 'react'; import React, { useCallback, useEffect, useState } from 'react'; @@ -10,14 +14,14 @@ export type FormStatus = 'idle' | 'successful' | 'erroneous' | 'processing'; export type Titles = Record; export type Bodies = Record; -const statusToColorMap: Record = { +const statusToColorMap: Record = { erroneous: 'negative', idle: 'warning', processing: 'info', successful: 'positive', }; -const statusToIconMap: Record = { +const statusToIconMap: Record = { erroneous: , idle: , processing: , @@ -30,7 +34,7 @@ export interface IFormStatusNotificationProps { body?: React.ReactNode; statusTitles?: Partial; statusBodies?: Partial; - children?: INotificationRootProps['children']; + children?: INotificationProps['children']; } export const FormStatusNotification: FC = ( @@ -75,17 +79,17 @@ export const FormStatusNotification: FC = ( return (
- - {title ?? titles[status!]} + {title ?? titles[status!]} {body ?? bodies[status!]} {children} - +
); }; diff --git a/packages/apps/tools/src/pages/faucet/existing/index.tsx b/packages/apps/tools/src/pages/faucet/existing/index.tsx index 1248453d06..28aa584953 100644 --- a/packages/apps/tools/src/pages/faucet/existing/index.tsx +++ b/packages/apps/tools/src/pages/faucet/existing/index.tsx @@ -17,6 +17,7 @@ import { Card, Heading, Notification, + NotificationHeading, } from '@kadena/react-ui'; import Trans from 'next-translate/Trans'; import useTranslation from 'next-translate/useTranslation'; @@ -143,10 +144,10 @@ const ExistingAccountFaucetPage: FC = () => { {t('Add Funds to Existing Account')}
{mainnetSelected ? ( - - + + {t('The Faucet is not available on Mainnet')} - + { />, ]} /> - + ) : null}
diff --git a/packages/apps/tools/src/pages/faucet/new/index.tsx b/packages/apps/tools/src/pages/faucet/new/index.tsx index eaf3447a4c..ae4b94270b 100644 --- a/packages/apps/tools/src/pages/faucet/new/index.tsx +++ b/packages/apps/tools/src/pages/faucet/new/index.tsx @@ -8,6 +8,7 @@ import { Heading, IconButton, Notification, + NotificationHeading, } from '@kadena/react-ui'; import { @@ -250,10 +251,10 @@ const NewAccountFaucetPage: FC = () => { {t('Create and Fund New Account')}
{mainnetSelected ? ( - - + + {t('The Faucet is not available on Mainnet')} - + { />, ]} /> - + ) : null}
- - {t(`Before you start`)} + + {t(`Before you start`)} { />, ]} /> - +
{ {txError ? ( - { @@ -202,18 +205,18 @@ const CrossChainTransferTracker: FC = () => { icon={} role="status" > - Warning + Warning {txError} - - + {t('Retry')} - - - + + + + ) : null} = { title: 'Components/Notification', @@ -79,7 +84,7 @@ export const Primary: Story = { }, render: ({ heading, hasCloseButton, color, children, styleVariant }) => { return ( - { @@ -88,17 +93,19 @@ export const Primary: Story = { styleVariant={styleVariant} role="none" > - {heading} + {heading} {children} - - + + Accept - - + + + Reject - - - + + + + ); }, }; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx b/packages/libs/react-ui/src/components/Notification/Notification.tsx similarity index 93% rename from packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx rename to packages/libs/react-ui/src/components/Notification/Notification.tsx index 84c35ef8a2..84cabac755 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationRoot.tsx +++ b/packages/libs/react-ui/src/components/Notification/Notification.tsx @@ -12,7 +12,7 @@ import { iconClass, } from './Notification.css'; -export interface INotificationRootProps { +export interface INotificationProps { children?: React.ReactNode; color?: keyof typeof cardColorVariants; styleVariant?: keyof typeof displayVariants; @@ -22,7 +22,7 @@ export interface INotificationRootProps { role: 'alert' | 'status' | 'none'; } -export const NotificationRoot: FC = ({ +export const Notification: FC = ({ children, hasCloseButton = false, color = 'info', diff --git a/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx b/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx index 68f5450c2b..1e6f826f52 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx @@ -1,26 +1,20 @@ -import { SystemIcon } from '@components/Icon'; import type { FC } from 'react'; import React from 'react'; import { actionButtonColorVariants } from './Notification.css'; export interface INotificationButtonProps { - icon: keyof typeof SystemIcon; color: keyof typeof actionButtonColorVariants; onClick?: () => void; children: React.ReactNode; } export const NotificationButton: FC = ({ - icon, color, onClick, children, }) => { - const Icon = icon && SystemIcon[icon]; - return ( ); }; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx b/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx index a59c4af082..cf8e858098 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationSubComponents.tsx @@ -14,10 +14,10 @@ export const NotificationHeading: FC = ({ ); -export interface INotificationActionsProps { +export interface INotificationFooterProps { children: React.ReactNode; } -export const NotificationActions: FC = ({ +export const NotificationFooter: FC = ({ children, }) =>
{children}
; diff --git a/packages/libs/react-ui/src/components/Notification/index.ts b/packages/libs/react-ui/src/components/Notification/index.ts index 9e0ae921ab..ae080eda0c 100644 --- a/packages/libs/react-ui/src/components/Notification/index.ts +++ b/packages/libs/react-ui/src/components/Notification/index.ts @@ -1,34 +1,12 @@ -import type { FC } from 'react'; -import type { INotificationButtonProps } from './NotificationButton'; -import { NotificationButton } from './NotificationButton'; -import type { INotificationRootProps } from './NotificationRoot'; -import { NotificationRoot } from './NotificationRoot'; -import type { - INotificationActionsProps, - INotificationHeadingProps, -} from './NotificationSubComponents'; -import { - NotificationActions, +export { Notification } from './Notification'; +export type { INotificationProps } from './Notification'; +export { NotificationButton } from './NotificationButton'; +export type { INotificationButtonProps } from './NotificationButton'; +export { + NotificationFooter, NotificationHeading, } from './NotificationSubComponents'; - export type { - INotificationActionsProps, - INotificationButtonProps, + INotificationFooterProps, INotificationHeadingProps, - INotificationRootProps, -}; - -interface INotification { - Root: FC; - Actions: FC; - Button: FC; - Heading: FC; -} - -export const Notification: INotification = { - Root: NotificationRoot, - Actions: NotificationActions, - Button: NotificationButton, - Heading: NotificationHeading, -}; +} from './NotificationSubComponents'; diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts index 0ca8686c7f..afd6f29433 100644 --- a/packages/libs/react-ui/src/components/index.ts +++ b/packages/libs/react-ui/src/components/index.ts @@ -44,10 +44,10 @@ export type { INavHeaderSelectProps, } from './NavHeader'; export type { - INotificationActionsProps, INotificationButtonProps, + INotificationFooterProps, INotificationHeadingProps, - INotificationRootProps, + INotificationProps, } from './Notification'; export type { IPaginationProps } from './Pagination'; export type { @@ -99,7 +99,12 @@ export { maskValue } from './MaskedValue/utils'; export { Modal, ModalProvider, useModal } from './Modal'; export { NavFooter } from './NavFooter'; export { NavHeader } from './NavHeader'; -export { Notification } from './Notification'; +export { + Notification, + NotificationButton, + NotificationFooter, + NotificationHeading, +} from './Notification'; export { Pagination } from './Pagination'; export { ProfileSummary } from './ProfileSummary'; export { ProgressBar } from './ProgressBar'; diff --git a/packages/libs/react-ui/src/index.ts b/packages/libs/react-ui/src/index.ts index e4dc6d5916..544625376f 100644 --- a/packages/libs/react-ui/src/index.ts +++ b/packages/libs/react-ui/src/index.ts @@ -36,10 +36,10 @@ export type { INavHeaderNavigationProps, INavHeaderRootProps, INavHeaderSelectProps, - INotificationActionsProps, INotificationButtonProps, + INotificationFooterProps, INotificationHeadingProps, - INotificationRootProps, + INotificationProps, IPaginationProps, IProfileSummaryLinkProps, IProfileSummaryRootProps, @@ -88,6 +88,9 @@ export { NavFooter, NavHeader, Notification, + NotificationButton, + NotificationFooter, + NotificationHeading, Pagination, ProductIcon, ProfileSummary, From e061ef18cbbb428b88fa5172bbd68151e39539e3 Mon Sep 17 00:00:00 2001 From: Eileen Guo Date: Thu, 16 Nov 2023 18:23:59 +0100 Subject: [PATCH 11/12] fixing build errors --- .../docs/src/components/Markdown/MDNotification/utils.tsx | 8 +++----- .../src/components/Notification/Notification.css.ts | 1 - 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx b/packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx index f52c080cf9..1af910dbc5 100644 --- a/packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx +++ b/packages/apps/docs/src/components/Markdown/MDNotification/utils.tsx @@ -1,4 +1,4 @@ -import type { INotificationRootProps } from '@kadena/react-ui'; +import type { INotificationProps } from '@kadena/react-ui'; import { SystemIcon } from '@kadena/react-ui'; import React from 'react'; @@ -10,9 +10,7 @@ export type LabelType = | 'danger' | 'warning'; -export const getColor = ( - label?: LabelType, -): INotificationRootProps['color'] => { +export const getColor = (label?: LabelType): INotificationProps['color'] => { if (!label) return; switch (label) { case 'tip': @@ -29,7 +27,7 @@ export const getColor = ( } }; -export const getIcon = (label?: LabelType): INotificationRootProps['icon'] => { +export const getIcon = (label?: LabelType): INotificationProps['icon'] => { if (!label) return undefined; switch (label) { case 'caution': diff --git a/packages/libs/react-ui/src/components/Notification/Notification.css.ts b/packages/libs/react-ui/src/components/Notification/Notification.css.ts index a5e57bc117..5aeb7b6537 100644 --- a/packages/libs/react-ui/src/components/Notification/Notification.css.ts +++ b/packages/libs/react-ui/src/components/Notification/Notification.css.ts @@ -1,5 +1,4 @@ import { sprinkles } from '@theme/sprinkles.css'; -import { responsiveStyle } from '@theme/themeUtils'; import type { ColorType } from '@theme/vars.css'; import { vars } from '@theme/vars.css'; import { createVar, style, styleVariants } from '@vanilla-extract/css'; From fa59f35a205e1d5fd7926353662f839d7369ed51 Mon Sep 17 00:00:00 2001 From: Eileen Guo Date: Fri, 17 Nov 2023 15:35:05 +0100 Subject: [PATCH 12/12] fix build --- .../docs/src/components/Search/components/SearchResults.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/apps/docs/src/components/Search/components/SearchResults.tsx b/packages/apps/docs/src/components/Search/components/SearchResults.tsx index 7c6b9855b9..21f773fd35 100644 --- a/packages/apps/docs/src/components/Search/components/SearchResults.tsx +++ b/packages/apps/docs/src/components/Search/components/SearchResults.tsx @@ -100,13 +100,13 @@ export const SearchResults: FC = ({
)} {semanticError ? ( - } role="status" > {semanticError} - + ) : ( <>