[refactor] rewrite Badge, Spinner, Jumbotron & Card components

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.3",
+    "version": "2.0.0-beta.4",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",

source/Badge.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { Color } from './type';
+
+export interface BadgeProps extends WebCellProps<HTMLAnchorElement> {
+    bg?: Color;
+    text?: Color;
+    pill?: boolean;
+}
+
+export const Badge: FC<BadgeProps> = ({
+    className,
+    bg,
+    text,
+    pill,
+    href,
+    children,
+    ...rest
+}) => {
+    const Class = classNames(
+        'badge',
+        bg && `text-bg-${bg}`,
+        text && `text-${text}`,
+        pill && `rounded-pill`,
+        href && 'text-decoration-none',
+        className
+    );
+
+    return href ? (
+        <a {...rest} className={Class} href={href}>
+            {children}
+        </a>
+    ) : (
+        <span {...rest} className={Class}>
+            {children}
+        </span>
+    );
+};

source/Card.tsx

@@ -0,0 +1,90 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { Image, ImageProps } from './Image';
+import { Color, PositionY } from './type';
+
+export interface CardProps extends WebCellProps<HTMLDivElement> {
+    bg?: Color;
+    text?: Color | 'white' | 'muted';
+    border?: Color;
+    body?: boolean;
+}
+
+export const Card: FC<CardProps> = ({
+    className,
+    bg,
+    text,
+    border,
+    body,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'card',
+            bg && `text-bg-${bg}`,
+            text && `text-${text}`,
+            border && `border-${border}`,
+            className
+        )}
+        {...props}
+    >
+        {body ? <CardBody>{children}</CardBody> : children}
+    </div>
+);
+
+export const CardHeader: FC<WebCellProps<HTMLDivElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`card-header ${className}`} {...props}>
+        {children}
+    </div>
+);
+
+export const CardBody: FC<WebCellProps<HTMLDivElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`card-body ${className}`} {...props}>
+        {children}
+    </div>
+);
+
+export const CardFooter: FC<WebCellProps<HTMLDivElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`card-footer ${className}`} {...props}>
+        {children}
+    </div>
+);
+
+export const CardTitle: FC<WebCellProps<HTMLHeadingElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <h5 className={`card-title ${className}`} {...props}>
+        {children}
+    </h5>
+);
+
+export interface CardImgProps extends ImageProps {
+    variant?: PositionY;
+}
+
+export const CardImg: FC<CardImgProps> = ({
+    className = '',
+    variant,
+    ...props
+}) => (
+    <Image
+        className={`card-img${variant ? `-${variant}` : ''} ${className}`}
+        {...props}
+    />
+);

source/Jumbotron.tsx

@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import { JsxChildren } from 'dom-renderer';
+import { FC, WebCellProps } from 'web-cell';
+
+import { BackgroundColor } from './type';
+import { Container, ContainerProps } from './Grid';
+
+export interface JumbotronProps
+    extends Omit<ContainerProps, 'title'>,
+        Record<'title' | 'description', JsxChildren> {
+    bg?: BackgroundColor;
+    rounded?: 0 | 1 | 2 | 3 | 4 | 5;
+}
+
+export const Jumbotron: FC<JumbotronProps> = ({
+    className,
+    fluid,
+    bg = 'body-tertiary',
+    rounded = fluid ? 0 : 3,
+    title,
+    description,
+    children,
+    ...props
+}) => {
+    const content = (
+        <>
+            <h1 className="display-4">{title}</h1>
+
+            <p className="lead">{description}</p>
+
+            {children && (
+                <>
+                    <hr className="my-4" />
+                    {children}
+                </>
+            )}
+        </>
+    );
+
+    return (
+        <header
+            className={classNames(
+                'py-5',
+                !fluid && 'px-5',
+                bg && `bg-${bg}`,
+                rounded && `rounded-${rounded}`,
+                className
+            )}
+            {...props}
+        >
+            {fluid ? <Container fluid={fluid}>{content}</Container> : content}
+        </header>
+    );
+};

source/Spinner.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { Color } from './type';
+
+export interface SpinnerProps extends WebCellProps<HTMLDivElement> {
+    variant?: Color;
+    size?: 'sm';
+    animation?: 'border' | 'grow';
+}
+
+export const Spinner: FC<SpinnerProps> = ({
+    className,
+    variant,
+    size,
+    animation = 'border',
+    children = 'Loading...',
+    ...props
+}) => (
+    <div
+        className={classNames(
+            `spinner-${animation}`,
+            size && `spinner-${animation}-${size}`,
+            variant && `text-${variant}`,
+            className
+        )}
+        role="status"
+        {...props}
+    >
+        <span className="visually-hidden">{children}</span>
+    </div>
+);
+
+export interface SpinnerBoxProps extends SpinnerProps {
+    cover?: boolean;
+}
+
+export const SpinnerBox: FC<SpinnerBoxProps> = ({
+    className = '',
+    cover,
+    variant,
+    size,
+    animation,
+    role,
+    children,
+    ...props
+}) => (
+    <div className={`position-relative ${className}`} {...props}>
+        {children}
+
+        {cover && (
+            <div className="modal-backdrop show d-flex justify-content-center align-items-center">
+                <Spinner
+                    {...{ variant, size, animation, role, ariaHidden: 'true' }}
+                />
+            </div>
+        )}
+    </div>
+);

source/index.ts

@@ -3,8 +3,12 @@ export * from './Ratio';
 export * from './Grid';
 export * from './Table';
 export * from './ScrollBoundary';
+export * from './Jumbotron';
+export * from './Card';
 export * from './Form';
 export * from './Button';
+export * from './Badge';
+export * from './Spinner';
 export * from './Icon';
 export * from './Image';
 export * from './Tooltip';

source/type.ts

@@ -1,18 +1,20 @@
 type Subtle<T extends string> = `${T}${'' | '-subtle'}`;
 
-export type Color =
-    | 'primary'
-    | 'secondary'
-    | 'success'
-    | 'danger'
-    | 'warning'
-    | 'info'
-    | 'light'
-    | 'dark';
+export enum Status {
+    primary = 'primary',
+    secondary = 'secondary',
+    tertiary = 'tertiary',
+    success = 'success',
+    info = 'info',
+    warning = 'warning',
+    danger = 'danger'
+}
+
+export type Color = Exclude<keyof typeof Status, 'tertiary'> | 'light' | 'dark';
 
 export type BackgroundColor =
     | Subtle<Color>
-    | `body${'' | '-secondary' | '-tertiary'}`
+    | `body${'' | '-emphasis' | '-secondary' | '-tertiary'}`
     | 'black'
     | 'white'
     | 'transparent';