free-astro-components 1.0.13 → 1.1.1

package/README.md

@@ -32,6 +32,9 @@ Explore and utilize a variety of components that can help you build your web pro
   - **ModalHeader**: The header section of the modal, usually containing a title.
   - **ModalBody**: The main content area of the modal.
   - **ModalFooter**: The footer section of the modal, typically containing action buttons.
+- **Accordion**
+  - A component for creating collapsible content sections.
+  - **AccordionItem**: A subcomponent for individual accordion items.
 
 ## Getting Started
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "A collection of free Astro components",
   "author": "Denis Ventura",
   "type": "module",
-  "version": "1.0.13",
+  "version": "1.1.1",
   "exports": {
     ".": {
       "import": {

package/src/components/Accordion.astro

@@ -0,0 +1,111 @@
+---
+import '../css/main.css'
+import type { AccordionItem } from '../../.'
+
+interface Props {
+  variant?: 'light' | 'shadow' | 'bordered' | 'splitted'
+  class?: string
+  children: AccordionItem | AccordionItem[]
+}
+
+const { variant = 'light', class: className } = Astro.props
+const variantClasses = {
+  light: 'ac-accordion--light',
+  shadow: 'ac-accordion--shadow',
+  bordered: 'ac-accordion--bordered',
+  splitted: 'ac-accordion--splitted',
+}[variant]
+---
+
+<div class:list={['ac-accordion', variantClasses, className]}>
+  <slot />
+</div>
+
+<style>
+  :root {
+    --ac-accordion-background-color: rgb(var(--ac-color-100));
+    --ac-accordion-border-color: var(--ac-color-200);
+    --ac-accordion-border-width: var(--ac-border);
+    --ac-accordion-rounded: var(--ac-rounded-2xl);
+    --ac-accordion-spacing: var(--ac-spacing-4);
+  }
+
+  .ac-accordion {
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+
+    &.ac-accordion--light {
+      > * + * {
+        border-color: rgb(var(--ac-accordion-border-color));
+        border-top-width: var(--ac-accordion-border-width);
+      }
+    }
+
+    &.ac-accordion--shadow {
+      background-color: var(--ac-accordion-background-color);
+      border-radius: var(--ac-accordion-rounded);
+      border-width: var(--ac-accordion-border-width);
+      border-color: rgba(var(--ac-accordion-border-color), 0.5);
+      box-shadow:
+        0 10px 15px -3px rgb(0 0 0 / 0.1),
+        0 -5px 15px -4px rgb(0 0 0 / 0.05);
+      padding: 0 var(--ac-accordion-spacing);
+
+      > * + * {
+        border-color: rgb(var(--ac-accordion-border-color));
+        border-top-width: var(--ac-accordion-border-width);
+      }
+    }
+
+    &.ac-accordion--bordered {
+      border-color: rgb(var(--ac-accordion-border-color));
+      border-radius: var(--ac-accordion-rounded);
+      border-width: calc(var(--ac-accordion-border-width) * 2);
+      padding: 0 var(--ac-accordion-spacing);
+
+      > * + * {
+        border-color: rgb(var(--ac-accordion-border-color));
+        border-top-width: var(--ac-accordion-border-width);
+      }
+    }
+
+    &.ac-accordion--splitted {
+      gap: var(--ac-spacing-2);
+
+      > * {
+        background-color: var(--ac-accordion-background-color);
+        border-radius: var(--ac-accordion-rounded);
+        border-width: var(--ac-accordion-border-width);
+        border-color: rgba(var(--ac-accordion-border-color), 0.5);
+        padding: 0 var(--ac-accordion-spacing);
+        box-shadow:
+          0 10px 15px -3px rgb(0 0 0 / 0.1),
+          0 -5px 15px -4px rgb(0 0 0 / 0.05);
+      }
+    }
+  }
+</style>
+
+<script>
+  import {
+    DOMLoaded,
+    handleResize,
+    hasViewportWidthChanged,
+  } from '../utils/utils'
+  import { setAccordionHeight } from '../utils/accordion'
+
+  DOMLoaded(() => {
+    const accordions = document.querySelectorAll<HTMLDetailsElement>(
+      '[data-accordion-item]'
+    )
+
+    setAccordionHeight(accordions)
+
+    handleResize(() => {
+      if (hasViewportWidthChanged()) {
+        setAccordionHeight(accordions)
+      }
+    })
+  })
+</script>

package/src/components/AccordionItem.astro

@@ -0,0 +1,92 @@
+---
+import Icon from './Icon.astro'
+
+interface Props {
+  open?: boolean
+  title: string
+  name?: string
+  class?: string
+}
+
+const { open, title, name, class: className } = Astro.props
+---
+
+<details
+  data-accordion-item
+  class:list={['ac-accordion-item', className]}
+  name={name}
+  open={open}
+>
+  <summary class="ac-accordion-item-title">
+    <span>{title}</span>
+    <Icon icon="add" />
+  </summary>
+  <div class="ac-accordion-item-content">
+    <slot />
+  </div>
+</details>
+
+<style>
+  .ac-accordion-item {
+    margin: 0;
+    font-family: var(--ac-font-sans);
+    height: var(--ac-accordion-item-collapsed);
+    overflow: hidden;
+
+    &[open] {
+      height: var(--ac-accordion-item-expanded);
+
+      .ac-accordion-item-title {
+        color: rgb(var(--ac-color-700));
+
+        & > svg {
+          transform: rotate(-45deg);
+        }
+      }
+    }
+
+    &.accordion-item--animated {
+      transition: height 0.3s linear;
+    }
+  }
+
+  .ac-accordion-item-title {
+    align-items: center;
+    color: rgb(var(--ac-color-500));
+    cursor: pointer;
+    display: flex;
+    font-size: var(--ac-text-lg);
+    font-weight: var(--ac-font-medium);
+    gap: var(--ac-spacing-3);
+    justify-content: space-between;
+    line-height: var(--ac-leading-normal);
+    list-style-type: none;
+    padding: var(--ac-accordion-spacing) 0;
+    transition: color 0.3s ease-in-out;
+
+    &:hover,
+    &:focus {
+      color: rgb(var(--ac-color-700));
+    }
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    & > span {
+      flex: 1 1 auto;
+    }
+
+    & > svg {
+      width: var(--ac-spacing-6);
+      height: var(--ac-spacing-6);
+      transition: transform 0.3s ease-in-out;
+      color: rgb(var(--ac-color-400));
+    }
+  }
+
+  .ac-accordion-item-content {
+    padding: 0 0 var(--ac-accordion-spacing);
+  }
+</style>

package/src/components/Modal.astro

@@ -7,7 +7,11 @@ interface Props {
   id: string
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full'
   class?: string
-  children: ModalHeader | ModalBody | ModalFooter
+  children:
+    | ModalHeader
+    | ModalBody
+    | ModalFooter
+    | [ModalHeader, ModalBody, ModalFooter]
 }
 
 const { id, size = 'md', class: className } = Astro.props

package/src/index.js

@@ -14,4 +14,6 @@ export { default as ModalHeader } from './components/ModalHeader.astro'
 export { default as ModalBody } from './components/ModalBody.astro'
 export { default as ModalFooter } from './components/ModalFooter.astro'
 export { openModal } from './utils/modal.ts'
-export { closeModal } from './utils/modal.ts'
+export { closeModal } from './utils/modal.ts'
+export { default as Accordion } from './components/Accordion.astro'
+export { default as AccordionItem } from './components/AccordionItem.astro'

package/src/types/index.d.ts

@@ -65,3 +65,11 @@ export const openModal: openModal
 // closeModal function
 export type closeModal = typeof import('../index.js').closeModal
 export const closeModal: closeModal
+
+// Accordion component
+export type Accordion = typeof import('../index.js').Accordion
+export const Accordion: Accordion
+
+// AccordionItem component
+export type AccordionItem = typeof import('../index.js').AccordionItem
+export const AccordionItem: AccordionItem

package/src/utils/accordion.ts

@@ -0,0 +1,40 @@
+export const setAccordionHeight = (
+  accordions: NodeListOf<HTMLDetailsElement>,
+) => {
+  const originalStates = Array.from(accordions).map(
+    (accordion) => accordion.open,
+  )
+
+  accordions.forEach((accordion) => {
+    accordion.classList.remove('accordion-item--animated')
+    resetAccordionHeight(accordion)
+    assignHeight(accordion)
+  })
+
+  accordions.forEach((accordion, index) => {
+    accordion.open = originalStates[index]
+    accordion.classList.add('accordion-item--animated')
+  })
+}
+
+const resetAccordionHeight = (accordion: HTMLDetailsElement) => {
+  accordion.style.removeProperty('--ac-accordion-item-expanded')
+  accordion.style.removeProperty('--ac-accordion-item-collapsed')
+}
+
+const assignHeight = (accordion: HTMLDetailsElement) => {
+  accordion.open = false
+  const collapsedHeight = accordion.offsetHeight
+
+  accordion.open = true
+  const expandedHeight = accordion.scrollHeight
+
+  accordion.style.setProperty(
+    '--ac-accordion-item-expanded',
+    `${expandedHeight}px`,
+  )
+  accordion.style.setProperty(
+    '--ac-accordion-item-collapsed',
+    `${collapsedHeight}px`,
+  )
+}

package/src/utils/utils.ts

@@ -1,3 +1,5 @@
+let lastWidth: number;
+
 export const DOMLoaded = (callback: () => void) => {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', callback)
@@ -6,6 +8,39 @@ export const DOMLoaded = (callback: () => void) => {
   }
 }
 
+export const debounce = (callback: (...args: any[]) => void, delay: number) => {
+  let timeout: number
+
+  return (...args: any[]) => {
+    clearTimeout(timeout)
+    timeout = window.setTimeout(() => callback(...args), delay)
+  }
+}
+
+export const handleResize = (callback: () => void) => {
+  const debouncedCallback = debounce(callback, 300)
+  window.addEventListener('resize', debouncedCallback)
+
+  return () => {
+    window.removeEventListener('resize', debouncedCallback)
+  }
+}
+
 export const isTouchDevice = () => {
   return window.matchMedia('(pointer: coarse)').matches
 }
+
+export const hasViewportWidthChanged = (): boolean => {
+  if (typeof window !== 'undefined') {
+    const currentWidth = window.innerWidth;
+    const widthChanged = currentWidth !== lastWidth;
+
+    if (widthChanged) {
+      lastWidth = currentWidth;
+    }
+
+    return widthChanged;
+  }
+
+  return false;
+};