-
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[refactor] rewrite Badge, Spinner, Jumbotron & Card components
- Loading branch information
Showing
11 changed files
with
259 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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", | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} | ||
/> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.