feat: implement Modal component with overlay and dialog structure
This commit is contained in:
@@ -1,70 +1,31 @@
|
||||
@use '../../styles/tokens/typography' as *;
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.list-item {
|
||||
width: 350px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--nds-spacing-md);
|
||||
border-radius: var(--nds-radius-sm);
|
||||
background: var(--nds-background, #040B0B);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
gap: var(--nds-spacing-sm);
|
||||
padding: var(--nds-spacing-sm) var(--nds-spacing-md);
|
||||
border-radius: var(--nds-radius-md);
|
||||
transition: background-color 120ms ease;
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--nds-secondary) 25%, transparent);
|
||||
background-color: var(--nds-surface-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: color-mix(in srgb, var(--nds-accent) 25%, transparent);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-right: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-radius: var(--nds-radius-md);
|
||||
border-color: transparent;
|
||||
background:
|
||||
linear-gradient(var(--nds-background, #040B0B), var(--nds-background, #040B0B)) padding-box,
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 0%,
|
||||
transparent 20%,
|
||||
rgba(245, 250, 250, 0.08) 50%,
|
||||
rgba(245, 250, 250, 0.28) 100%
|
||||
) border-box;
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) padding-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: destination-out;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -1px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--nds-spacing-md);
|
||||
gap: var(--nds-spacing-3xs);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__subTitle {
|
||||
@include text-base;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include text-xl;
|
||||
@include text-label;
|
||||
color: var(--nds-text);
|
||||
margin: 0;
|
||||
}
|
||||
&__subtitle {
|
||||
@include text-sm;
|
||||
color: var(--nds-neutral);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,11 @@
|
||||
---
|
||||
import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
|
||||
export interface Props {}
|
||||
---
|
||||
<div class='list-item'>
|
||||
<div class='list-item__content'>
|
||||
<slot/>
|
||||
</div>
|
||||
<Arrow2
|
||||
size={24}
|
||||
orientation='right' />
|
||||
|
||||
<div class="list-item">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@use './listItem';
|
||||
@use "./_listItem.scss";
|
||||
</style>
|
||||
@@ -1,7 +1,11 @@
|
||||
<div class='list-item__subTitle'>
|
||||
<slot/>
|
||||
</div>
|
||||
---
|
||||
export interface Props {}
|
||||
---
|
||||
|
||||
<p class="list-item__subtitle">
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
<style lang="scss">
|
||||
@use './listItem';
|
||||
@use "./_listItem.scss";
|
||||
</style>
|
||||
@@ -1,7 +1,11 @@
|
||||
<div class='list-item__title'>
|
||||
<slot/>
|
||||
</div>
|
||||
---
|
||||
export interface Props {}
|
||||
---
|
||||
|
||||
<p class="list-item__title">
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
<style lang="scss">
|
||||
@use './listItem';
|
||||
@use "./_listItem.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,78 @@
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.modal {
|
||||
&__overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(2, 12, 12, 0.55);
|
||||
backdrop-filter: blur(3px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
padding: var(--nds-spacing-md);
|
||||
}
|
||||
&__dialog {
|
||||
width: min(460px, 100%);
|
||||
background-color: var(--nds-surface);
|
||||
border: var(--nds-border-width-thin) solid var(--nds-border);
|
||||
border-radius: var(--nds-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--nds-shadow-lg);
|
||||
animation: nds-modal-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
|
||||
}
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--nds-spacing-md) var(--nds-spacing-lg);
|
||||
border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
|
||||
}
|
||||
&__title {
|
||||
@include text-xl;
|
||||
color: var(--nds-text);
|
||||
}
|
||||
&__close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--nds-neutral);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: var(--nds-spacing-3xs);
|
||||
border-radius: var(--nds-radius-sm);
|
||||
transition:
|
||||
color 120ms ease,
|
||||
background-color 120ms ease;
|
||||
&:hover {
|
||||
color: var(--nds-text);
|
||||
background-color: var(--nds-surface-hover);
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
padding: var(--nds-spacing-lg);
|
||||
@include text-base;
|
||||
color: var(--nds-text);
|
||||
}
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: var(--nds-spacing-xs);
|
||||
padding: var(--nds-spacing-md) var(--nds-spacing-lg);
|
||||
border-top: var(--nds-border-width-thin) solid var(--nds-border);
|
||||
}
|
||||
}
|
||||
|
||||
nds-modal[data-open="true"] .modal__overlay {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@keyframes nds-modal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
import { CloseIcon } from "../Icons";
|
||||
|
||||
export interface Props {
|
||||
id: string;
|
||||
title?: string;
|
||||
open?: boolean;
|
||||
}
|
||||
const { id, title, open = false } = Astro.props;
|
||||
const hasFooter = Astro.slots.has("footer");
|
||||
---
|
||||
|
||||
<nds-modal id={id} class="modal" data-open={open ? "true" : undefined}>
|
||||
<div class="modal__overlay" data-modal-close>
|
||||
<div
|
||||
class="modal__dialog"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={title}
|
||||
>
|
||||
<div class="modal__head">
|
||||
<span class="modal__title">{title}</span>
|
||||
<button class="modal__close" data-modal-close aria-label="Close">
|
||||
<CloseIcon size={18} label="Close" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__body"><slot /></div>
|
||||
{
|
||||
hasFooter && (
|
||||
<div class="modal__footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</nds-modal>
|
||||
|
||||
<script>
|
||||
class NdsModal extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.addEventListener("click", (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (
|
||||
target.closest("[data-modal-close]") ===
|
||||
target.closest(".modal__dialog")
|
||||
) {
|
||||
// clicked dialog interior, ignore
|
||||
}
|
||||
if (
|
||||
target.matches("[data-modal-close]") ||
|
||||
target.classList.contains("modal__overlay")
|
||||
) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && this.dataset.open === "true") this.close();
|
||||
});
|
||||
}
|
||||
open() {
|
||||
this.dataset.open = "true";
|
||||
this.dispatchEvent(new CustomEvent("nds:open", { bubbles: true }));
|
||||
}
|
||||
close() {
|
||||
delete this.dataset.open;
|
||||
this.dispatchEvent(new CustomEvent("nds:close", { bubbles: true }));
|
||||
}
|
||||
}
|
||||
customElements.define("nds-modal", NdsModal);
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const trigger = (e.target as HTMLElement).closest<HTMLElement>(
|
||||
"[data-modal-open]",
|
||||
);
|
||||
if (!trigger) return;
|
||||
const modal = document.getElementById(trigger.dataset.modalOpen!) as any;
|
||||
modal?.open?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./_modal.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user