@audira/carbon-react-native 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/notification/callout/warning/Warning.tsx

@@ -0,0 +1,78 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useWarning,
+} from "../../_status-hooks"
+
+import {
+	CalloutVariant,
+} from "../../_variants"
+
+import type {
+	WarningProps,
+} from "./WarningProps"
+
+import type {
+	WarningRef,
+} from "./WarningRef"
+
+export const Warning = forwardRef<WarningRef, WarningProps>(
+	function Warning(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useWarning({
+				color,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<CalloutVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/callout/warning/WarningProps.ts

@@ -0,0 +1,14 @@
+import type {
+	CalloutVariantProps,
+} from "../../_variants/callout"
+
+export interface WarningProps extends Omit<CalloutVariantProps, "Icon"> {
+	iconProps?: Omit<
+		NonNullable<CalloutVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<CalloutVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/callout/warning/WarningRef.ts

@@ -0,0 +1,6 @@
+import type {
+	CalloutVariantRef,
+} from "../../_variants/callout"
+
+export interface WarningRef extends CalloutVariantRef {
+}

package/src/components/notification/callout/warning/index.ts

@@ -0,0 +1,3 @@
+export * from "./Warning"
+export * from "./WarningProps"
+export * from "./WarningRef"

package/src/components/notification/index.ts

@@ -0,0 +1,14 @@
+import * as Actionable from "./actionable"
+import * as Callout from "./callout"
+import * as Toast from "./toast"
+
+export {
+	Actionable,
+	Callout,
+	Toast,
+}
+
+export * from "./base"
+export * from "./NotificationColor"
+export * from "./subtitle"
+export * from "./subtitle-link"

package/src/components/notification/subtitle/Subtitle.tsx

@@ -0,0 +1,75 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+import {
+	Text,
+} from "../../text"
+
+import type {
+	NotificationColor,
+} from "../NotificationColor"
+
+import {
+	VariantContext,
+} from "../_variant-context"
+
+import type {
+	SubtitleProps,
+} from "./SubtitleProps"
+
+import type {
+	SubtitleRef,
+} from "./SubtitleRef"
+
+export const Subtitle = forwardRef<SubtitleRef, SubtitleProps>(
+	function Subtitle(
+		{
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		useContext(ThemeContext)
+
+		const
+			variantContext =
+				useContext(VariantContext)
+
+		return (
+			<Text
+				{ ...props }
+				ref={ ref }
+				type="body_compact_01"
+				style={ [
+					mapTextColorStyle[variantContext.color],
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	mapTextColorStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, {
+			color: string
+		}>>({
+			low_contrast: {
+				color: CarbonStyleSheet.color.text_primary,
+			},
+			high_contrast: {
+				color: CarbonStyleSheet.color.text_inverse,
+			},
+		})

package/src/components/notification/subtitle/SubtitleProps.ts

@@ -0,0 +1,6 @@
+import type {
+	TextProps,
+} from "../../text/TextProps"
+
+export interface SubtitleProps extends Omit<TextProps, "type"> {
+}

package/src/components/notification/subtitle/SubtitleRef.ts

@@ -0,0 +1,6 @@
+import type {
+	TextRef,
+} from "../../text/TextRef"
+
+export interface SubtitleRef extends TextRef {
+}

package/src/components/notification/subtitle/index.ts

@@ -0,0 +1,3 @@
+export * from "./Subtitle"
+export * from "./SubtitleProps"
+export * from "./SubtitleRef"

package/src/components/notification/subtitle-link/SubtitleLink.tsx

@@ -0,0 +1,74 @@
+import {
+	forwardRef,
+	useContext,
+} from "react"
+
+import {
+	CarbonStyleSheet,
+} from "../../../carbon-style-sheet"
+
+import {
+	ThemeContext,
+} from "../../../contexts"
+
+
+import type {
+	NotificationColor,
+} from "../NotificationColor"
+
+import {
+	VariantContext,
+} from "../_variant-context"
+import {
+	Subtitle,
+} from "../subtitle"
+
+import type {
+	SubtitleLinkProps,
+} from "./SubtitleLinkProps"
+
+import type {
+	SubtitleLinkRef,
+} from "./SubtitleLinkRef"
+
+export const SubtitleLink = forwardRef<SubtitleLinkRef, SubtitleLinkProps>(
+	function SubtitleLink(
+		{
+			style,
+			...props
+		},
+		ref,
+	) {
+
+		useContext(ThemeContext)
+
+		const
+			variantContext =
+				useContext(VariantContext)
+
+		return (
+			<Subtitle
+				{ ...props }
+				ref={ ref }
+				style={ [
+					mapTextColorStyle[variantContext.color],
+					style,
+				] }
+			/>
+		)
+
+	},
+)
+
+const
+	mapTextColorStyle =
+		CarbonStyleSheet.create<Record<NotificationColor, {
+			color: string
+		}>>({
+			low_contrast: {
+				color: CarbonStyleSheet.color.link_primary,
+			},
+			high_contrast: {
+				color: CarbonStyleSheet.color.link_inverse,
+			},
+		})

package/src/components/notification/subtitle-link/SubtitleLinkProps.ts

@@ -0,0 +1,6 @@
+import type {
+	SubtitleProps,
+} from "../subtitle/SubtitleProps"
+
+export interface SubtitleLinkProps extends SubtitleProps {
+}

package/src/components/notification/subtitle-link/SubtitleLinkRef.ts

@@ -0,0 +1,6 @@
+import type {
+	SubtitleRef,
+} from "../subtitle/SubtitleRef"
+
+export interface SubtitleLinkRef extends SubtitleRef {
+}

package/src/components/notification/subtitle-link/index.ts

@@ -0,0 +1,3 @@
+export * from "./SubtitleLink"
+export * from "./SubtitleLinkProps"
+export * from "./SubtitleLinkRef"

package/src/components/notification/toast/error/Error.tsx

@@ -0,0 +1,78 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useError,
+} from "../../_status-hooks"
+
+import {
+	ToastVariant,
+} from "../../_variants"
+
+import type {
+	ErrorProps,
+} from "./ErrorProps"
+
+import type {
+	ErrorRef,
+} from "./ErrorRef"
+
+export const Error = forwardRef<ErrorRef, ErrorProps>(
+	function Error(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useError({
+				color,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<ToastVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/toast/error/ErrorProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ToastVariantProps,
+} from "../../_variants/toast"
+
+export interface ErrorProps extends Omit<ToastVariantProps, "Icon"> {
+	iconProps?: Omit<
+		NonNullable<ToastVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ToastVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/toast/error/ErrorRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ToastVariantRef,
+} from "../../_variants/toast"
+
+export interface ErrorRef extends ToastVariantRef {
+}

package/src/components/notification/toast/error/index.ts

@@ -0,0 +1,3 @@
+export * from "./Error"
+export * from "./ErrorProps"
+export * from "./ErrorRef"

package/src/components/notification/toast/index.ts

@@ -0,0 +1,4 @@
+export * from "./error"
+export * from "./informational"
+export * from "./success"
+export * from "./warning"

package/src/components/notification/toast/informational/Informational.tsx

@@ -0,0 +1,78 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useInformational,
+} from "../../_status-hooks"
+
+import {
+	ToastVariant,
+} from "../../_variants"
+
+import type {
+	InformationalProps,
+} from "./InformationalProps"
+
+import type {
+	InformationalRef,
+} from "./InformationalRef"
+
+export const Informational = forwardRef<InformationalRef, InformationalProps>(
+	function Informational(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useInformational({
+				color,
+				transparentBorderColor: true,
+			})
+
+		return (
+			<ToastVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/toast/informational/InformationalProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ToastVariantProps,
+} from "../../_variants/toast"
+
+export interface InformationalProps extends Omit<ToastVariantProps, "Icon"> {
+	iconProps?: Omit<
+		NonNullable<ToastVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ToastVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/toast/informational/InformationalRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ToastVariantRef,
+} from "../../_variants/toast"
+
+export interface InformationalRef extends ToastVariantRef {
+}

package/src/components/notification/toast/informational/index.ts

@@ -0,0 +1,3 @@
+export * from "./Informational"
+export * from "./InformationalProps"
+export * from "./InformationalRef"

package/src/components/notification/toast/success/Success.tsx

@@ -0,0 +1,78 @@
+import {
+	forwardRef,
+} from "react"
+
+import {
+	useSuccess,
+} from "../../_status-hooks"
+
+import {
+	ToastVariant,
+} from "../../_variants"
+
+import type {
+	SuccessProps,
+} from "./SuccessProps"
+
+import type {
+	SuccessRef,
+} from "./SuccessRef"
+
+export const Success = forwardRef<SuccessRef, SuccessProps>(
+	function Success(
+		{
+			color,
+			iconProps,
+			iconCloseProps,
+			titleStyle: titleStyleProp,
+			leftBarStyle: leftBarStyleProp,
+			style: styleProp,
+			...props
+		},
+		ref,
+	) {
+
+		const {
+			Icon,
+			iconProps: iconPropsData,
+			iconCloseProps: iconClosePropsData,
+			titleStyle,
+			leftBarStyle,
+			style,
+		} =
+			useSuccess({
+				color,
+				transparentBorderColor: false,
+			})
+
+		return (
+			<ToastVariant
+				{ ...props }
+				color={ color }
+				Icon={ Icon }
+				iconProps={{
+					...iconProps,
+					...iconPropsData,
+				}}
+				iconCloseProps={{
+					...iconCloseProps,
+					...iconClosePropsData,
+				}}
+				titleStyle={ [
+					titleStyle,
+					titleStyleProp,
+				] }
+				leftBarStyle={ [
+					leftBarStyle,
+					leftBarStyleProp,
+				] }
+				style={ [
+					style,
+					styleProp,
+				] }
+				ref={ ref }
+			/>
+		)
+
+	},
+)

package/src/components/notification/toast/success/SuccessProps.ts

@@ -0,0 +1,14 @@
+import type {
+	ToastVariantProps,
+} from "../../_variants/toast"
+
+export interface SuccessProps extends Omit<ToastVariantProps, "Icon"> {
+	iconProps?: Omit<
+		NonNullable<ToastVariantProps["iconProps"]>,
+		| "color"
+	>,
+	iconCloseProps?: Omit<
+		NonNullable<ToastVariantProps["iconCloseProps"]>,
+		| "color"
+	>,
+}

package/src/components/notification/toast/success/SuccessRef.ts

@@ -0,0 +1,6 @@
+import type {
+	ToastVariantRef,
+} from "../../_variants/toast/ToastVariantRef"
+
+export interface SuccessRef extends ToastVariantRef {
+}

package/src/components/notification/toast/success/index.ts

@@ -0,0 +1,3 @@
+export * from "./Success"
+export * from "./SuccessProps"
+export * from "./SuccessRef"