@documental-xyz/core 0.1.0

package/src/components/Pullquote.astro

@@ -0,0 +1,46 @@
+---
+import Caption from "./Caption.astro";
+
+const hasByLine = Astro.slots.has('byline');
+---
+<div class="pullquote reveal--fadeInLeft">
+  <slot />
+  {
+    hasByLine && (
+      <Caption><slot name="byline" /></Caption>
+    )
+  }
+ 
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+
+  .pullquote {
+    @include type('h-m');
+    font-weight: 600;
+    
+    &:not(:first-child),
+    :global(+ *:not(.column)),
+    :global(.animation-disabled >) & {
+      margin-top: var(--mt-m);
+    }
+
+    @include media-break-down(l) {
+      @include type('h-s');
+      font-weight: 600;
+    }
+
+    &::before {
+      content: '';
+      display: block;
+      width: 24px;
+      height: 20px;
+      mask-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_494_4104)'%3E%3Cpath d='M0.0747069 12.4097C0.224121 4.45206 2.08703 0.146326 8.2734 0L9.46553 3.28456C5.96225 3.50405 5.14206 6.05853 5.14206 10.6569H9.76277V20H0C0 17.3724 0 14.7447 0.0747069 12.4082V12.4097ZM14.3104 12.4097C14.4598 4.45206 16.3227 0.146326 22.509 0L23.7012 3.28456C20.1979 3.50405 19.3777 6.05853 19.3777 10.6569H23.9984V20H14.2341C14.2341 17.3724 14.2341 14.7447 14.3088 12.4082L14.3104 12.4097Z' fill='%23FBBAA2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_494_4104'%3E%3Crect width='24' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      background-color: var(--clr-hl, #000000);
+      margin-bottom: 12px;
+    }
+  }
+</style>

package/src/components/Slider.astro

@@ -0,0 +1,223 @@
+---
+import "swiper/css";
+import "swiper/css/pagination";
+import { Image } from 'astro:assets';
+const { slides } = Astro.props;
+const id = Math.random().toString(36).slice(2, 11)
+---
+
+<div id={id} class="slider reveal--fadeInUp">
+  <div class="slider__holder">
+    <div class="swiper slider__swiper">
+      <div class="swiper-wrapper">
+        {
+          slides &&
+            slides.map((slide) => {
+              return (
+                <div class="swiper-slide">
+                  <figure class="slider__slide">
+                    <Image src={slide.image} alt={slide.caption} width="100%" height="100%" />
+                    <figcaption>{slide.caption}</figcaption>
+                  </figure>
+                </div>
+              );
+            })
+        }
+      </div>
+      <div class="swiper-button-prev">
+        <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22.3599 34.375L24.6293 32.2359L18.6722 26.5718H37.5V23.4282L18.6722 23.4282L24.6293 17.7734L22.3599 15.625L12.5 25L22.3599 34.375Z" fill="#424242"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M25 46.875C12.9188 46.875 3.125 37.0812 3.125 25C3.125 12.9188 12.9188 3.125 25 3.125C37.0812 3.125 46.875 12.9188 46.875 25C46.875 37.0812 37.0812 46.875 25 46.875ZM25 50C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50Z" fill="#424242"/>
+        </svg>
+      </div>
+      <div class="swiper-button-next">
+        <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M27.6401 34.375L25.3707 32.2359L31.3278 26.5718H12.5V23.4282L31.3278 23.4282L25.3707 17.7734L27.6401 15.625L37.5 25L27.6401 34.375Z" fill="#424242"/>
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M25 46.875C37.0812 46.875 46.875 37.0812 46.875 25C46.875 12.9188 37.0812 3.125 25 3.125C12.9188 3.125 3.125 12.9188 3.125 25C3.125 37.0812 12.9188 46.875 25 46.875ZM25 50C38.8071 50 50 38.8071 50 25C50 11.1929 38.8071 0 25 0C11.1929 0 0 11.1929 0 25C0 38.8071 11.1929 50 25 50Z" fill="#424242"/>
+        </svg>          
+      </div>
+      <span class="swiper-pagination"></span>
+    </div>
+    <div class="slider__footer">
+      <span class="slider__pagination"></span>
+      <span class="slider__caption"></span>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .slider {
+    @extend %grrr--board;
+    width: 100%;
+    overflow: hidden;
+
+    &:not(:first-child),
+    & :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) & {
+      margin-top: var(--mt-m);
+    }
+   
+    .swiper {
+      overflow: visible;
+      max-height: 100%;
+    }
+
+    .swiper-slide {
+      height: 100%;
+      max-height: 85vh;
+      aspect-ratio: 1 / 0.6;
+    }
+
+    .swiper-pagination {
+      display: none;
+    }
+
+    &__holder {
+      grid-column: board-full;
+
+      @include media-break-up(l) {
+        grid-column: board-start 2 / board-end 11;
+      }
+
+      .swiper-button-prev, .swiper-button-next {
+        width: fit-content;
+        height: fit-content;
+        position: absolute;
+        bottom: 0;
+        z-index: 2;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .8;  
+        }
+
+        @include media-break-down(l) {
+          display: none;
+        }
+        
+        &.swiper-button-disabled {
+          opacity: .2;
+          pointer-events: none;
+        }
+
+        svg {
+          display: block;
+        }
+
+        path {
+          fill: var(--clr-txt, black);
+        }
+      }
+
+      .swiper-button-prev {
+        left: calc(-1 * var(--atnl-gutter));
+        transform: translateX(-100%);
+      }
+      
+      .swiper-button-next {
+        right: calc(-1 * var(--atnl-gutter));
+        transform: translateX(100%);
+      }
+    }
+
+    &__slide {
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.05);
+      overflow: hidden;
+      transition: .5s ease;
+
+      @include media-break-up(l) {
+        .swiper-slide:not(.swiper-slide-active) & {
+          transform: scale(.8);
+        }
+
+        .swiper-slide-prev & {
+          transform-origin: right top;
+        }
+        
+        .swiper-slide-next & {
+          transform-origin: left top;
+        }
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      figcaption {
+        display: none;
+      }
+    }
+
+    &__footer {
+      @include type("b-s");
+      display: block;
+      margin-top: 20px;
+    }
+
+    &__pagination {
+      font-variant-numeric: tabular-nums;
+      font-weight: 700;
+    }
+  }
+</style>
+
+<script>
+  import Swiper from "swiper";
+  import { Navigation, Pagination } from "swiper/modules";
+
+  const swiper = new Swiper(".slider__swiper", {
+    spaceBetween: 10,
+    modules: [Navigation, Pagination],
+    navigation: {
+      prevEl: ".swiper-button-prev",
+      nextEl: ".swiper-button-next"
+    },
+    pagination: {
+      el: ".swiper-pagination",
+      type: "fraction",
+      renderFraction: function (currentClass, totalClass) {
+        return (
+          '<span class="' +
+          currentClass +
+          '"></span>' +
+          "/" +
+          '<span class="' +
+          totalClass +
+          '"></span>'
+        );
+      },
+    },
+    on: {
+      slideChange: updateCaption,
+      init: updateCaption,
+    },
+    breakpoints: {
+      991: {
+        spaceBetween: 40,
+      }
+    }
+  });
+
+  function updateCaption(swiper) {
+    const slider = swiper.el.closest(".slider");
+
+    let sliderPagination = slider.querySelector(".swiper-pagination");
+    
+
+    setTimeout(() => {
+      let pagination = slider.querySelector(".slider__pagination");
+      let caption = slider.querySelector(".slider__caption");
+      caption.innerHTML = " – " + slider.querySelector(
+        ".swiper-slide-active figcaption"
+      ).innerHTML;
+
+      pagination.innerText = sliderPagination.innerText;
+    }, 250);
+  }
+</script>

package/src/components/Spacer.astro

@@ -0,0 +1,25 @@
+---
+const {desktop, tablet, mobile} = Astro.props;
+---
+<div class="spacer"></div>
+
+<style lang="scss" define:vars={{ "spacer-d": desktop, "spacer-t": tablet, "spacer-m": mobile }}>
+  @use "../assets/styles/config/config" as *;
+
+  .spacer {
+    height: var(--spacer-m, var(--spacer-t, var(--spacer-d)));
+    
+    @include media-break-up(m) {
+      height: var(--spacer-t, var(--spacer-d));
+    }
+    
+    @include media-break-up(xl) {
+      height: var(--spacer-d);
+    }
+
+    &,
+    :global(+ *) {
+      margin-top: 0!important;
+    }
+  }
+</style>

package/src/components/Text.astro

@@ -0,0 +1,173 @@
+---
+const { hasDropCap } = Astro.props
+//hasDropCap recebe booleano
+---
+
+<div class:list={["text reveal--fadeInUp", hasDropCap && "text--has-dropcap"]}>
+  <slot />
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/list-styles/list-styles" as *;
+
+  .text {
+    &--has-dropcap {
+      :global(> p:first-of-type:first-letter) {
+        @include type('d-m');
+        font-weight: 500;
+        color: var(--clr-hl);
+        float: left;
+        margin-right: 5px;
+        margin-top: -4px;
+        margin-bottom: -10px;
+      }
+    }
+
+    :global(> * + *) {
+      margin-top: var(--mt-s, 40px);
+    }
+    
+    :global(* + h1), 
+    :global(* + h2), 
+    :global(* + h3) {
+      margin-top: var(--mt-m, 80px);
+    }
+
+    :global(> p) {
+      :global(+ p) {
+        margin-top: 1.5em;
+      }
+    }
+
+    :global(> h1) {
+      @include type('h-xxl');
+
+      @include media-break-down(l) {
+        @include type('h-l');
+      }
+
+      :global(+ *) {
+        margin-top: var(--mt-m, 80px);
+      }
+    }
+    
+    :global(> h2) {
+      @include type('h-xl');
+
+      @include media-break-down(l) {
+        @include type('h-m');
+      }
+
+      :global(+ h3),
+      :global(+ h4),
+      :global(+ h5),
+      :global(+ h6) {
+        margin-top: var(--mt-s, 40px);
+      }
+    }
+    
+    :global(> h3) {
+      @include type('h-l');
+
+      @include media-break-down(l) {
+        @include type('h-s');
+      }
+    }
+    
+    :global(> h4) {
+      @include type('h-m');
+      
+      @include media-break-down(l) {
+        @include type('h-xs');
+      }
+      
+    }
+    
+    :global(> h5) {
+      @include type('h-s');
+      
+      @include media-break-down(l) {
+        @include type('c-m');
+        font-weight: 700;
+      }
+    }
+    
+    :global(> h6) {
+      @include type('h-xs');
+      @include media-break-down(l) {
+        @include type('c-m');
+        font-weight: 700;
+      }
+    }
+
+    :global(> ul) {
+      @extend .atnl-ul;
+
+      :global(li::before) {
+        color: var(--clr-hl);
+      }
+
+      :global(li + li) {
+        margin-top: 8px;
+      }
+    }
+
+    :global(> ol) {
+      --li-marker-sep-end: ".";
+      @extend .atnl-ol;
+
+      :global(li::before) {
+        color: var(--clr-hl);
+      }
+
+      :global(li + li) {
+        margin-top: 8px;
+      }
+    }
+
+    :global(> blockquote) {
+      margin-inline: 0;
+      margin-bottom: 0;
+      padding-left: 1.5em;
+      position: relative;
+
+      &::before {
+        content: '';
+        display: block;
+        width: 4px;
+        height: calc(100% - 10px);
+        position: absolute;
+        left: 0;
+        top: 5px;
+        background-color: var(--clr-hl);
+      }
+    }
+
+    :global(> iframe) {
+      max-width: 100%;
+      height: auto;
+      aspect-ratio: 16 / 9;
+      display: block;
+      
+      &,
+      :global(+ *) {
+        margin-top: 80px;
+      }
+    }
+    
+     :global(a) {
+      text-decoration: underline;
+      text-decoration-color: var(--clr-hl);
+      text-decoration-thickness: 2px;
+      text-decoration-skip-ink: none;
+      text-underline-offset: 0;
+      transition: ease color 0.5s;
+
+      &:hover {
+        color: var(--clr-hl);
+      }
+    }
+
+  }
+</style>

package/src/components/TextPlaceholder.astro

@@ -0,0 +1,98 @@
+---
+// Exemplo de texto para teste
+---
+
+<h1>
+  Et voluptate dolor quis qui eiusmod fugiat in Lorem exercitation consequat ex
+  labore quis laboris.
+</h1>
+
+<p>
+  Soluptate est labore sit tempor exercitation nisi eiusmod pariatur magna est
+  aliqua. Magna laborum elit mollit ea occaecat incididunt Lorem Lorem
+  incididunt nisi esse fugiat anim exercitation. Mollit velit laboris
+  adipisicing enim ad eiusmod deserunt veniam nulla adipisicing amet pariatur
+  nostrud exercitation. Velit laborum occaecat nulla ex nulla esse laborum ex
+  duis duis magna. Ipsum laboris commodo do do eiusmod. Consectetur culpa fugiat
+  occaecat enim ullamco tempor amet velit duis culpa commodo dolor minim. Ea
+  sunt culpa id ea amet.
+</p>
+
+<p>
+  Voluptate est labore sit tempor exercitation nisi eiusmod pariatur magna est
+  aliqua. Magna laborum elit mollit ea occaecat incididunt Lorem Lorem
+  incididunt nisi esse fugiat anim exercitation. Mollit velit laboris
+  adipisicing enim ad eiusmod deserunt veniam nulla adipisicing amet pariatur
+  nostrud exercitation. Velit laborum occaecat nulla ex nulla esse laborum ex
+  duis duis magna. Ipsum laboris commodo do do eiusmod. Consectetur culpa fugiat
+  occaecat enim ullamco tempor amet velit duis culpa commodo dolor minim. Ea
+  sunt culpa id ea amet.
+</p>
+
+<ul>
+  <li>Lorem culpa nostrud magna ipsum.</li>
+  <li>Lorem culpa nostrud magna ipsum.</li>
+  <li>Lorem culpa nostrud magna ipsum.</li>
+  <li>
+    Lorem culpa nostrud magna ipsum. Lorem culpa nostrud magna ipsum. Lorem
+    culpa nostrud magna ipsum. Lorem culpa nostrud magna ipsum.
+  </li>
+</ul>
+
+<ol>
+  <li>Lorem culpa nostrud magna ipsum.</li>
+  <li>Lorem culpa nostrud magna ipsum.</li>
+  <li>Lorem culpa nostrud magna ipsum.</li>
+  <li>
+    Lorem culpa nostrud magna ipsum. Lorem culpa nostrud magna ipsum. Lorem
+    culpa nostrud magna ipsum. Lorem culpa nostrud magna ipsum.
+  </li>
+</ol>
+
+<p>
+  Ut esse sit aute ea eu. Pariatur est quis laboris sint. Consequat elit esse
+  ullamco laboris deserunt labore. Ut ut nisi ullamco minim incididunt ut
+  laborum ea reprehenderit dolor voluptate laboris non enim.
+</p>
+
+<h2>
+  Et magna excepteur est Lorem qui exercitation anim sunt sit pariatur mollit
+</h2>
+<h3>qui exercitation anim sunt sit pariatur</h3>
+<h4>qui exercitation anim sunt sit pariatur</h4>
+<h5>qui exercitation anim sunt sit pariatur</h5>
+<h6>qui exercitation anim sunt sit pariatur</h6>
+
+<p>
+  Minim consequat incididunt incididunt in laboris voluptate laboris velit. Sunt
+  pariatur dolore reprehenderit dolore ipsum voluptate velit ullamco nulla amet
+  irure aute enim sunt. Occaecat Lorem dolor exercitation non et. Reprehenderit
+  anim excepteur mollit id et mollit officia cillum aliquip aliqua aliquip. Et
+  magna excepteur est Lorem qui exercitation anim sunt sit pariatur mollit elit
+  ea deserunt ullamco. Nulla consectetur laborum incididunt nisi ea officia
+  excepteur nulla fugiat deserunt excepteur in veniam. Ullamco do sunt ad
+  consequat elit dolor proident veniam officia cupidatat irure commodo dolor. Eu
+  ex dolor fugiat nisi Lorem veniam proident dolor excepteur.
+</p>
+<blockquote>
+  Voluptate est labore sit tempor exercitation nisi eiusmod pariatur magna est
+  aliqua. Magna laborum elit mollit ea occaecat incididunt Lorem Lorem
+  incididunt nisi esse fugiat anim exercitation.
+</blockquote>
+<p>
+  Minim incididunt Lorem aliqua adipisicing nulla enim minim incididunt laboris
+  voluptate ea commodo sint elit. Sunt occaecat adipisicing aute eiusmod
+  reprehenderit do cupidatat irure laboris nostrud. Esse ullamco laborum in
+  veniam enim esse fugiat do. Eu velit pariatur tempor culpa enim laborum nisi
+  esse cupidatat cillum mollit adipisicing minim aliqua aute. Fugiat ex qui
+  velit exercitation anim eu. Duis labore nostrud commodo aute laboris ut culpa
+  et duis magna cupidatat tempor.
+</p>
+<p>
+  Irure fugiat laboris do. Velit sunt irure tempor sit ea quis aute. Laboris
+  sint sunt amet sunt nisi excepteur amet. Incididunt id anim proident non
+  irure. Ad ullamco esse cupidatat ut dolor adipisicing aute enim. Nostrud
+  consequat consequat ullamco id fugiat ipsum consequat cupidatat pariatur.
+  Fugiat ut nisi enim qui aliqua sunt ex ullamco incididunt eiusmod irure Lorem
+  velit nostrud.
+</p>

package/src/components/Timeline.astro

@@ -0,0 +1,73 @@
+<div class="timeline reveal--fadeIn" data-timeline>
+  <slot />
+</div>
+
+<style lang="scss">
+  .timeline {
+    padding-left: 32px;
+    position: relative;
+    
+    &:not(:first-child),
+    :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) & {
+      margin-top: var(--mt-m);
+    }
+   
+    &::after {
+      content: '';
+      width: 2px;
+      // min-height: 100vh;
+      height: 0;
+      display: block;
+      position: absolute;
+      left: 5px;
+      top: 5px;
+      background-color: var(--clr-txt);
+      transition: height 1s ease-out 1s;
+    }
+
+    :global(> div:not(:first-child)) {
+      margin-top: var(--mt-m);
+    }
+
+    :global(.animation-disabled) &::after, 
+    &.reveal::after {
+      height: 100%;
+    }
+
+    :global(.map__content) &:last-child {
+      &::after {
+        height: 120%;
+      }
+    }
+  }
+</style>
+<script>
+import ScrollObserver from "../assets/scripts/utils/ScrollObserver";
+
+function activeTimelineBullet() {
+  const timelineItems = document.querySelectorAll('[data-timeline-bullet]');
+    
+  timelineItems.forEach((item, index) => {
+    const scrollObserver = new ScrollObserver();
+
+    scrollObserver.observe(item, (data) => {
+      const { element, isVisible, boundingRect } = data;
+              
+      if(!isVisible) return;
+
+      const windowStartingPoint = window.innerHeight * .52;      
+      const isInRange = boundingRect.top <= windowStartingPoint && boundingRect.bottom >= 0;
+
+      if (isInRange) {
+        element.classList.add('active');
+      } else {
+        element.classList.remove('active');
+      }
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', activeTimelineBullet);
+
+</script>

package/src/components/TimelineBullet.astro

@@ -0,0 +1,67 @@
+---
+const {text} = Astro.props
+---
+<span class:list={["timeline__bullet", !text && "timeline__bullet--no-text"]} data-timeline-bullet>{text}</span>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+
+  .timeline__bullet {
+    @include type('c-s');
+    color: var(--clr-hl);
+    display: block;
+    margin-bottom: 8px;
+    position: relative;
+
+    &:not(:first-child) {
+      margin-top: var(--mt-m);
+    }
+
+    &::before, {
+      content: '';
+      display: block;
+      width: 12px;
+      height: 12px;
+      background-color: currentColor;
+      position: absolute;
+      left: -32px;
+      transform: translateY(2px);
+      z-index: 10;
+      transition: .5s ease;
+      scale: .5;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: 4px;
+      height: 4px;
+      background-color: var(--clr-txt);
+      position: absolute;
+      left: -28px;
+      top: 4px;
+      transform: translateY(2px);
+      opacity: 0;
+      z-index: 10;
+      transition: .5s ease;
+      scale: .5;
+    }
+
+    &.active {
+      &::before {
+        scale: 1;
+      }
+      &::after {
+        scale: 1;
+        opacity: 1;
+      }
+    }
+
+    &--no-text {
+      &::before,
+      &::after {
+        transform: translateY(5px);
+      }
+    }
+  }
+</style>