feat: adding Badge, Breadcrumb, Checkbox et Radio components
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-2xs);
|
||||
padding: 3px var(--nds-spacing-xs);
|
||||
border-radius: var(--nds-radius-full);
|
||||
@include text-sm;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
&__primary {
|
||||
--c: var(--nds-primary);
|
||||
--on: var(--nds-on-primary);
|
||||
--soft: var(--nds-primary-soft);
|
||||
}
|
||||
&__neutral {
|
||||
--c: var(--nds-neutral);
|
||||
--on: var(--nds-surface);
|
||||
--soft: color-mix(in srgb, var(--nds-neutral) 16%, transparent);
|
||||
}
|
||||
&__success {
|
||||
--c: var(--nds-success-medium);
|
||||
--on: #fff;
|
||||
--soft: var(--nds-success-low);
|
||||
}
|
||||
&__warning {
|
||||
--c: var(--nds-warning-medium);
|
||||
--on: #fff;
|
||||
--soft: var(--nds-warning-low);
|
||||
}
|
||||
&__error {
|
||||
--c: var(--nds-error-medium);
|
||||
--on: #fff;
|
||||
--soft: var(--nds-error-low);
|
||||
}
|
||||
&__info {
|
||||
--c: var(--nds-info-medium);
|
||||
--on: #fff;
|
||||
--soft: var(--nds-info-low);
|
||||
}
|
||||
&--soft {
|
||||
background-color: var(--soft);
|
||||
color: var(--c);
|
||||
}
|
||||
&--solid {
|
||||
background-color: var(--c);
|
||||
color: var(--on);
|
||||
}
|
||||
&__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--nds-radius-full);
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
export interface Props {
|
||||
type?: "primary" | "neutral" | "success" | "warning" | "error" | "info";
|
||||
variant?: "soft" | "solid";
|
||||
}
|
||||
const { type = "primary", variant = "soft" } = Astro.props;
|
||||
---
|
||||
|
||||
<span class={`badge badge__${type} badge--${variant}`}>
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./_badge.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-xs);
|
||||
@include text-base;
|
||||
|
||||
&__item {
|
||||
text-decoration: none;
|
||||
color: var(--nds-neutral);
|
||||
transition: color 120ms ease;
|
||||
&:hover {
|
||||
color: var(--nds-text);
|
||||
}
|
||||
&:not(:first-child)::before {
|
||||
content: "/";
|
||||
color: var(--nds-disabled);
|
||||
margin-right: var(--nds-spacing-xs);
|
||||
}
|
||||
&--current {
|
||||
color: var(--nds-text);
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
export interface Props {}
|
||||
---
|
||||
|
||||
<nav class="breadcrumb" aria-label="Breadcrumb">
|
||||
<slot />
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./_breadcrumb.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
export interface Props {
|
||||
href?: string;
|
||||
current?: boolean;
|
||||
}
|
||||
const { href = "#", current = false } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
href={href}
|
||||
class={`breadcrumb__item ${current ? "breadcrumb__item--current" : ""}`}
|
||||
aria-current={current ? "page" : undefined}
|
||||
>
|
||||
<slot />
|
||||
</a>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./_breadcrumb.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-xs);
|
||||
cursor: pointer;
|
||||
@include text-base;
|
||||
color: var(--nds-text);
|
||||
&__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
&__box {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: var(--nds-border-width-medium) solid var(--nds-border-strong);
|
||||
border-radius: var(--nds-radius-sm);
|
||||
background-color: var(--nds-surface);
|
||||
color: var(--nds-on-primary);
|
||||
transition: all 130ms ease;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
transition: all 130ms ease;
|
||||
}
|
||||
}
|
||||
&__input:checked + &__box {
|
||||
background-color: var(--nds-primary);
|
||||
border-color: var(--nds-primary);
|
||||
svg {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&__input:focus-visible + &__box {
|
||||
box-shadow: 0 0 0 3px var(--nds-ring);
|
||||
}
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
export interface Props {
|
||||
id: string;
|
||||
name?: string;
|
||||
checked?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
const { id, name, checked = false, disabled = false } = Astro.props;
|
||||
---
|
||||
|
||||
<label class={`checkbox ${disabled ? "checkbox--disabled" : ""}`} for={id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
name={name}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
class="checkbox__input"
|
||||
/>
|
||||
<span class="checkbox__box" aria-hidden="true">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="checkbox__label"><slot /></span>
|
||||
</label>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./_checkbox.scss";
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.radio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--nds-spacing-xs);
|
||||
cursor: pointer;
|
||||
@include text-base;
|
||||
color: var(--nds-text);
|
||||
&__input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
&__dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: var(--nds-border-width-medium) solid var(--nds-border-strong);
|
||||
border-radius: var(--nds-radius-full);
|
||||
background-color: var(--nds-surface);
|
||||
transition: border-color 130ms ease;
|
||||
&::after {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--nds-radius-full);
|
||||
background-color: var(--nds-primary);
|
||||
transform: scale(0);
|
||||
transition: transform 130ms cubic-bezier(0.34, 1.4, 0.6, 1);
|
||||
}
|
||||
}
|
||||
&__input:checked + &__dot {
|
||||
border-color: var(--nds-primary);
|
||||
&::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&__input:focus-visible + &__dot {
|
||||
box-shadow: 0 0 0 3px var(--nds-ring);
|
||||
}
|
||||
&--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
export interface Props {
|
||||
id: string;
|
||||
name: string;
|
||||
value?: string;
|
||||
checked?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
const { id, name, value, checked = false, disabled = false } = Astro.props;
|
||||
---
|
||||
|
||||
<label class={`radio ${disabled ? "radio--disabled" : ""}`} for={id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={id}
|
||||
name={name}
|
||||
value={value}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
class="radio__input"
|
||||
/>
|
||||
<span class="radio__dot" aria-hidden="true"></span>
|
||||
<span class="radio__label"><slot /></span>
|
||||
</label>
|
||||
|
||||
<style lang="scss">
|
||||
@use "./_radio.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user