@documental-xyz/core 0.1.0

package/src/components/BigNumbers.astro

@@ -0,0 +1,83 @@
+---
+import Caption from "./Caption.astro";
+const { alignment = "caption-bottom", items } = Astro.props;
+//alignment recebe caption-bottom ou caption-top
+---
+
+<div class:list={["big-numbers", `big-numbers--${alignment}`]}>
+  <div class="big-numbers__holder">
+    {
+      items &&
+        items.map((item) => (
+          //item.number
+          //item.caption
+          <div class="big-numbers__item reveal--fadeInLeft">
+            {item?.number && (
+              <span class="big-numbers__number">{item.number}</span>
+            )}
+            {item?.caption && <Caption>{item.caption}</Caption>}
+          </div>
+        ))
+    }
+  </div>
+</div>
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+  @use "../assets/styles/globals/grrr" as *;
+
+  .big-numbers {
+    $self: &;
+    color: var(--clr-text);
+    @extend %grrr--board;
+    display: block;
+    
+    &:not(:first-child),
+    :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) & {
+      margin-top: var(--mt-m);
+    }
+    
+    &__holder {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      row-gap: 48px;
+      column-gap: var(--atnl-gutter);
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      border-top: 5px solid currentColor;
+      padding-top: 16px;   
+      
+      #{$self}--caption-top & {
+        flex-direction: column-reverse;
+      }
+    }
+
+    &__number {
+      @include type('d-xs');
+      font-weight: 500;
+    }
+
+    :global(.caption) {
+      margin-top: 0;
+    }
+    
+    :global(.group__content) > & {
+      @extend %grrr--board;
+
+      #{$self}__holder {
+        grid-column: board-full;
+
+        @include media-break-up(l) {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+    }
+  }
+
+</style>

package/src/components/Button.astro

@@ -0,0 +1,49 @@
+---
+const { link, icon, size } = Astro.props;
+// link: objeto do link com {url:..., target:..., text:... }
+// icon: html span do ícone escolhido da biblioteca do material symbols ex: "<span class="material-symbols-outlined">arrow_right_alt</span>}"
+// size: "wide" ou null
+---
+
+<a
+  class:list={["reveal--fadeInLeft", "button", size === "wide" && "button--wide"]}
+  target={link.target}
+  href={link.url}
+>
+  {link.text}
+  {icon ? <Fragment set:html={icon} /> : <span class="material-symbols-outlined">arrow_right_alt</span>}
+</a>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+
+  .button {
+    @include type('c-m');
+    font-weight: 600;
+    width: fit-content;
+    color: var(--clr-txt);
+    border: 2px solid var(--clr-txt);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 60px;
+    transition: .3s ease;
+
+    :global(+ .button) {
+      margin-top: 16px;
+    }
+
+    &:hover {
+      background-color: var(--clr-txt);
+      color: var(--clr-bg);
+    }
+    
+    &--wide {
+      width: 100%;
+      justify-content: space-between;
+      padding: 16px;
+    }
+  }
+</style>

package/src/components/Caption.astro

@@ -0,0 +1,15 @@
+<span class="caption"><slot /></span>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+
+  .caption {
+    @include type("b-s");
+    display: block;
+    margin-top: 20px;
+
+    &:empty {
+      display: none;
+    }
+  }
+</style>

package/src/components/Card.astro

@@ -0,0 +1,68 @@
+---
+import Button from "./Button.astro";
+const { link, title, text, icon, index } = Astro.props;
+---
+
+<div class="card reveal--fadeInLeft">
+  {icon && <div class="card__icon reveal--fadeInLeft" set:html={icon} />}
+  {title && <span class="card__title reveal--fadeInLeft">{title}</span>}
+  {text && <p class="card__text reveal--fadeInLeft">{text}</p>}
+  {link && <Button link={link} />}
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+
+  .card {
+    width: 100%;
+    color: var(--clr-txt);
+    border: 2px solid currentColor;
+    border-radius: 4px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    &__icon {
+      :global(span) {
+        font-size: 26px;
+        display: block;
+        width: fit-content;
+      }
+
+      + * {
+        margin-top: 10px;
+      }
+    }
+
+    &__title {
+      @include type('h-xs');
+      display: block;
+      
+      + * {
+        margin-top: 15px;
+      }
+    }
+
+    &__text {
+      @include type('b-s');
+      :global(+ *) {
+        margin-top: 20px;
+      }
+    }
+
+    :global(.button) {
+      @include type('c-s');
+      line-height: 1;
+      font-weight: 600;
+      margin-bottom: 4px;
+      padding: 2px 2px 0px 5px;
+      gap: 3px;
+      display: block;      
+      
+      :global(span) {
+        vertical-align: middle;
+        display: inline-block;
+      }
+    }
+  }
+</style>

package/src/components/Cards.astro

@@ -0,0 +1,66 @@
+---
+import Card from "./Card.astro";
+
+const { cards } = Astro.props;
+---
+
+<div class="cards">
+  <div class="cards__holder">
+  {
+    cards &&
+      cards.map((data) => (
+        <Card
+          icon={data.icon}
+          title={data.title}
+          text={data.text}
+          link={data.link}
+        />
+      ))
+  }
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .cards {
+    $self: &;
+    width: 100%;
+
+    &:not(:first-child),
+    & :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) > ) & {
+      margin-top: var(--mt-m);
+    }
+
+    @include media-break-up(m) {
+      flex-direction: row;
+    }
+
+    :global(.text > * +) & {
+      margin-top: var(--mt-m);
+    }
+    
+    :global(.group__content >) &,
+    :global(.group__content > .animation-disabled >) & {
+      padding-top: var(--mt-l);
+    }
+    
+    &__holder {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: var(--atnl-gutter);
+    }
+
+    :global(.group__content >) &,
+    :global(.group__content > .animation-disabled >) & {
+      @extend %grrr--board;
+      #{$self}__holder {
+        grid-column: board-full;
+      }
+    }
+    
+  }
+
+</style>

package/src/components/CardsCall.astro

@@ -0,0 +1,125 @@
+---
+import { Image } from 'astro:assets';
+import Caption from "./Caption.astro";
+
+const { cards } = Astro.props;
+// cards recebe um array com os objetos de cada, com os itens:
+// img: objeto da imagem { src, alt }
+// title: string
+// text: string
+// link: objeto do link {url:..., target:..., title:... }
+---
+
+<div class="cards-call">
+  <div class="cards-call__holder">
+  {
+    cards &&
+      cards.map((data, index) => (
+        <a
+          class="cards-call__item reveal--fadeInUp"
+          href={data.link.url}
+          title={data.link.title ? data.link.title : data?.title}
+          target={data.link?.target}
+          style={`animation-delay:${0.3 * index}s`}
+        >
+          <div class="cards-call__thumb">
+            {data.img.src && (
+              <Image
+                src={data.img.src}
+                alt={data.img.alt ? data.img.alt : data?.title}
+                width={data.img.width}
+                height={data.img.height}
+              />
+            )}
+          </div>
+          {data.title && <span class="cards-call__title">{data.title}</span>}
+          {data.text && (
+            <div class="card-caption">
+              <Caption>{data.text}</Caption>
+            </div>
+          )}
+        </a>
+      ))
+  }
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/utils/grrr/grrr" as *;
+
+  .cards-call {
+    $self: &;
+
+    &:not(:first-child),
+    & :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) >) & {
+      margin-top: var(--atnl-gutter);
+    }
+
+    :global(.group__content) > &,
+    :global(.group__content > .animation-disabled) > & {
+      @extend %grrr--board;
+    }
+
+    &__holder {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: var(--atnl-gutter);
+      
+      :global(.group__content) > #{$self} &,
+      :global(.group__content > .animation-disabled) > #{$self} & {
+        grid-column: board-full;
+        
+        @include media-break-up(l) {
+          grid-column: board-start 1 / board-end 12;
+        }
+        
+        @include media-break-up(x) {
+          grid-column: board-start 2 / board-end 11;
+        }
+      }
+    }
+
+    a {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+
+      &:hover {
+        img {
+          opacity: .8;
+        }
+      }
+    }
+
+    &__item {
+      container-name: card-grid;
+      container-type: inline-size;
+    }
+
+    &__thumb {
+      background-color: var(--clr-txt);
+      
+      img {
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1 / .6;
+        transition: .3s ease;
+        display: block;
+      }
+    }
+
+    &__title {
+      @include type("h-s");
+
+      @container card-grid (width < 350px) {
+        @include type("h-xs");
+      } 
+    }
+
+    :global(.caption) {
+      margin-top: 0;
+    }
+  }
+</style>

package/src/components/ChartBar.astro

@@ -0,0 +1,217 @@
+---
+import Caption from "./Caption.astro";
+const { title, notes, type, values } = Astro.props;
+
+function addNumberPercentToValues(values) {
+  // Ensure values is always a valid array
+  if (!values || !Array.isArray(values) || values.length === 0) {
+    return [];
+  }
+  
+  const numbers = values.map(value => value.number)
+  const largest = Math.max(...numbers);
+
+  return values.map((value) => {
+    return {
+      ...value,
+      number: type === 'proportion' ? value.number + '%' : value.number,
+      numberPercent: value.number / largest * 100
+    }
+  });
+}
+
+const chartValues = addNumberPercentToValues(values);
+
+---
+
+<div class:list={["chart-bar reveal--fadeInUp", type && `chart-bar--${type}`]}>
+  <div class="chart-bar__holder">
+
+    <span class="chart-bar__title">{title}</span>
+  
+    <div class="chart-bar__values">
+      <div class="chart-bar__bars">
+        {
+          chartValues &&
+            chartValues.map((data, index) => (
+              //valores:
+              //data.color
+              //data.number
+              //data.numberPercent
+              //data.label
+              <div
+                class="chart-bar__item"
+                style={`--clr-chart:${data.color}; --data-perc:${data.numberPercent}%; --index:${index};`}
+              >
+                <span class="chart-bar__label">{data.label}</span>
+                <div class="chart-bar__bar">
+                  <span class="chart-bar__number">{data.number}</span>
+                </div>
+              </div>
+            ))
+        }
+      </div>
+      <div class="chart-bar__ghost-values">
+        {
+          chartValues &&
+            chartValues.map((data) => (
+              <span class="chart-bar__number">{data.number}</span>
+            ))
+        }
+      </div>
+    </div>
+  
+    <div class="chart-bar__notes">
+      <Caption>{notes}</Caption>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/globals/grrr" as *;
+
+  :global(.animation-disabled:has(.chart-bar) + *) {
+    margin-top: var(--mt-m);
+  }
+
+  .chart-bar {
+    $self: &;
+    overflow: hidden;
+    
+    &:not(:first-child),
+    & :global(+ *:not(.column)),
+    :global(.animation-disabled:not(:first-child) > ) & {
+      margin-top: var(--mt-m);
+    }
+    
+    :global(.group__content >) &,
+    :global(.group__content > .animation-disabled >) & {
+      @extend %grrr--board;
+    }
+
+    &__holder {
+      :global(.group__content > .chart-bar) &,
+      :global(.group__content > .animation-disabled > .chart-bar) & {
+        grid-column: content;
+      }
+    }
+
+    &__title {
+      @include type("h-m");
+      display: block;
+      margin-bottom: 40px;
+
+      :global(.columns--33-66 .columns__column-1) &,
+      :global(.columns--66-33 .columns__column-2) & {
+        @include type("h-xs");
+      }
+    }
+
+    &__values {
+      display: flex;
+    }
+
+    &__number {
+      @include type("h-xs");
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: var(--data-perc);
+      transform: translate(0, -50%);
+      opacity: 0;
+      transition: 1s ease calc(.3s * (var(--index) + 1));
+
+      #{$self}--proportion & {
+        width: 4ch;
+        text-align: right;
+        left: 100%;
+      }
+      :global(.animation-disabled) &,
+      #{$self}.reveal & {
+        opacity: 1;
+        transform: translate(10px, -50%);
+      }
+    }
+
+    &__bars {
+      flex: 1;
+      padding-right: 10px;
+    }
+
+    &__ghost-values {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+
+      > span {
+        position: static;
+      }
+    }
+
+    &__item {
+      + .chart-bar__item {
+        margin-top: 24px;
+      }
+    }
+
+    &__label {
+      @include type("h-xs");
+      font-weight: 400;
+      display: block;
+      margin-bottom: 10px;
+
+      :global(.columns--33-66 .columns__column-1) &,
+      :global(.columns--66-33 .columns__column-2) & {
+        @include type("c-m");
+      }
+    }
+
+    &__bar {
+      width: 100%;
+      height: 20px;
+      position: relative;
+
+      &::after {
+        content: "";
+        width: 0;
+        height: 100%;
+        display: block;
+        background-color: var(--clr-chart, #000);
+        position: absolute;
+        top: 0;
+        left: 0;
+        transition: 1s ease-in calc(1s * (var(--index) * .2));
+      }
+
+      #{$self}--proportion & {
+        &::before {
+          content: "";
+          width: 100%;
+          height: 100%;
+          display: block;
+          background-color: color-mix(
+            in srgb,
+            var(--clr-chart, #000) 60%,
+            #ffffff 40%
+          );
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+
+      :global(.animation-disabled) &::after,
+      #{$self}.reveal &::after {
+        width: var(--data-perc);
+      }
+    }
+
+    &__notes {
+      margin-top: 40px;
+      display: block;
+    }
+
+  }
+  
+</style>