-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: initial set up * chore: add close * chore: add close modal icon * chore: style modal for docs * chore: dark mode * chore: replace dialog with modal * chore: add docs * chore: modal open bg colour * chore: add description * chore: remove animations * chore: use correct shadow opacity * chore: remove closemodal icon * chore: remove close modal icon * fix: text-foreground-muted * chore: add component attributes * chore: update docs
- Loading branch information
1 parent
422bb26
commit 4a7cb7c
Showing
11 changed files
with
666 additions
and
23 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 @@ | ||
import { create } from '@storybook/theming/create'; | ||
import { create } from '@storybook/theming/create' | ||
|
||
export default create({ | ||
base: 'light', | ||
brandTitle: 'NearForm Quantum' | ||
}); | ||
}) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,135 @@ | ||
'use client' | ||
|
||
import * as React from 'react' | ||
import * as DialogPrimitive from '@radix-ui/react-dialog' | ||
import { CloseIcon } from '@/assets' | ||
|
||
import { cn } from '@/lib/utils' | ||
|
||
const Modal = DialogPrimitive.Root | ||
|
||
const ModalTrigger = DialogPrimitive.Trigger | ||
|
||
const ModalPortal = DialogPrimitive.Portal | ||
|
||
const ModalCloseFooter = DialogPrimitive.Close | ||
|
||
const ModalOverlay = React.forwardRef< | ||
React.ElementRef<typeof DialogPrimitive.Overlay>, | ||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> | ||
>(({ className, ...props }, ref) => ( | ||
<DialogPrimitive.Overlay | ||
ref={ref} | ||
className={cn('fixed inset-0 z-50 bg-background/80', className)} | ||
{...props} | ||
/> | ||
)) | ||
ModalOverlay.displayName = DialogPrimitive.Overlay.displayName | ||
|
||
const ModalContent = React.forwardRef< | ||
React.ElementRef<typeof DialogPrimitive.Content>, | ||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> | ||
>(({ className, children, ...props }, ref) => ( | ||
<ModalPortal> | ||
<ModalOverlay /> | ||
<DialogPrimitive.Content | ||
ref={ref} | ||
className={cn( | ||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 shadow-lg bg-background dark:bg-foreground duration-200 sm:rounded-lg', | ||
className | ||
)} | ||
{...props} | ||
> | ||
{children} | ||
</DialogPrimitive.Content> | ||
</ModalPortal> | ||
)) | ||
ModalContent.displayName = DialogPrimitive.Content.displayName | ||
|
||
const ModalHeader = ({ | ||
className, | ||
...props | ||
}: React.HTMLAttributes<HTMLDivElement>) => ( | ||
<div | ||
className={cn( | ||
'flex items-center justify-between p-6 space-y-1.5 text-center sm:text-left', | ||
className | ||
)} | ||
{...props} | ||
/> | ||
) | ||
ModalHeader.displayName = 'ModalHeader' | ||
|
||
const ModalFooter = ({ | ||
className, | ||
...props | ||
}: React.HTMLAttributes<HTMLDivElement>) => ( | ||
<div | ||
className={cn( | ||
'flex flex-col-reverse p-6 sm:flex-row sm:justify-start sm:space-x-2', | ||
className | ||
)} | ||
{...props} | ||
/> | ||
) | ||
ModalFooter.displayName = 'ModalFooter' | ||
|
||
const ModalTitle = React.forwardRef< | ||
React.ElementRef<typeof DialogPrimitive.Title>, | ||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> | ||
>(({ className, ...props }, ref) => ( | ||
<DialogPrimitive.Title | ||
ref={ref} | ||
className={cn( | ||
'text-lg font-semibold leading-none tracking-tight text-foreground dark:text-foreground-inverse', | ||
className | ||
)} | ||
{...props} | ||
/> | ||
)) | ||
ModalTitle.displayName = DialogPrimitive.Title.displayName | ||
|
||
const ModalClose = React.forwardRef< | ||
React.ElementRef<typeof DialogPrimitive.Close>, | ||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> | ||
>(({ className, ...props }, ref) => ( | ||
<DialogPrimitive.Close | ||
ref={ref} | ||
className={cn( | ||
'rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-foreground-muted', | ||
className | ||
)} | ||
{...props} | ||
> | ||
<div className="text-foreground dark:text-foreground-inverse"> | ||
<CloseIcon className="w-5 h-5" strokeWidth={0.833} /> | ||
</div> | ||
<span className="sr-only">Close</span> | ||
</DialogPrimitive.Close> | ||
)) | ||
|
||
const ModalDescription = React.forwardRef< | ||
React.ElementRef<typeof DialogPrimitive.Description>, | ||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> | ||
>(({ className, ...props }, ref) => ( | ||
<DialogPrimitive.Description | ||
ref={ref} | ||
className={cn('text-sm px-6 text-foreground-muted', className)} | ||
{...props} | ||
/> | ||
)) | ||
ModalDescription.displayName = DialogPrimitive.Description.displayName | ||
|
||
export { | ||
Modal, | ||
ModalPortal, | ||
ModalOverlay, | ||
ModalClose, | ||
ModalCloseFooter, | ||
ModalTrigger, | ||
ModalContent, | ||
ModalHeader, | ||
ModalFooter, | ||
ModalTitle, | ||
ModalDescription | ||
} |
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
Oops, something went wrong.