147 lines
4.6 KiB
TypeScript
147 lines
4.6 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Icon with Background — https://app.subframe.com/f023064a5ca0/library?component=Icon+with+Background_4a18e9fc-cea3-46ca-8c53-2412462342ad
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCircleDashed } from "@subframe/core";
|
|
import { FeatherFlag } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface IconFeedbackIconProps
|
|
extends React.ComponentProps<typeof SubframeCore.IconWrapper> {
|
|
variant?:
|
|
| "primary"
|
|
| "secondary"
|
|
| "tertiary"
|
|
| "destructive"
|
|
| "neutral"
|
|
| "success"
|
|
| "warning"
|
|
| "information";
|
|
size?: "medium" | "small" | "large";
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const IconFeedbackIcon = React.forwardRef<
|
|
React.ElementRef<typeof SubframeCore.IconWrapper>,
|
|
IconFeedbackIconProps
|
|
>(function IconFeedbackIcon(
|
|
{
|
|
variant = "primary",
|
|
size = "medium",
|
|
icon = <FeatherFlag />,
|
|
className,
|
|
...otherProps
|
|
}: IconFeedbackIconProps,
|
|
ref
|
|
) {
|
|
return icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"group/8e5c09be text-body-large-0 font-body-large-0 text-icon-neutral-primary relative",
|
|
{
|
|
"text-heading-0 font-heading-0": size === "large",
|
|
"text-body-default-regular-0 font-body-default-regular-0":
|
|
size === "small",
|
|
"text-icon-feedback-information": variant === "information",
|
|
"text-icon-feedback-warning": variant === "warning",
|
|
"text-icon-feedback-positive": variant === "success",
|
|
"text-icon-feedback-negative": variant === "destructive",
|
|
"text-icon-neutral-tertiary": variant === "tertiary",
|
|
"text-icon-neutral-secondary": variant === "secondary",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null;
|
|
});
|
|
|
|
export interface IconWithBackgroundRootProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?:
|
|
| "primary"
|
|
| "secondary"
|
|
| "tertiary"
|
|
| "destructive"
|
|
| "neutral"
|
|
| "success"
|
|
| "warning"
|
|
| "information";
|
|
size?: "extra-small" | "small" | "medium" | "large" | "extra-large";
|
|
round?: boolean;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const IconWithBackgroundRoot = React.forwardRef<
|
|
HTMLDivElement,
|
|
IconWithBackgroundRootProps
|
|
>(function IconWithBackgroundRoot(
|
|
{
|
|
variant = "primary",
|
|
size = "medium",
|
|
round = false,
|
|
icon = <FeatherCircleDashed />,
|
|
className,
|
|
...otherProps
|
|
}: IconWithBackgroundRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/4a18e9fc flex flex-col items-center justify-center gap-2 rounded-sm bg-brand-brand-surface-subtle-default px-1 py-1",
|
|
{
|
|
"rounded-round": round,
|
|
"bg-surface-feedback-subtle-information": variant === "information",
|
|
"bg-surface-feedback-subtle-warning": variant === "warning",
|
|
"bg-surface-feedback-subtle-positive": variant === "success",
|
|
"bg-surface-feedback-subtle-neutral": variant === "neutral",
|
|
"bg-surface-feedback-subtle-negative": variant === "destructive",
|
|
"bg-surface-neutral-tertiary": variant === "tertiary",
|
|
"bg-surface-neutral-secondary": variant === "secondary",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-large-0 font-body-large-0 text-icon-neutral-primary relative",
|
|
{
|
|
"text-subtitle-0 font-subtitle-0": size === "extra-large",
|
|
"text-heading-0 font-heading-0": size === "large",
|
|
"text-body-default-regular-0 font-body-default-regular-0":
|
|
size === "small",
|
|
"text-body-small-semibold-0 font-body-small-semibold-0":
|
|
size === "extra-small",
|
|
"text-icon-feedback-information": variant === "information",
|
|
"text-icon-feedback-warning": variant === "warning",
|
|
"text-icon-feedback-positive": variant === "success",
|
|
"text-icon-feedback-negative": variant === "destructive",
|
|
"text-icon-neutral-tertiary": variant === "tertiary",
|
|
"text-icon-neutral-secondary": variant === "secondary",
|
|
}
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const IconWithBackground = Object.assign(IconWithBackgroundRoot, {
|
|
IconFeedbackIcon,
|
|
});
|