@documental-xyz/core 0.1.0

package/src/components/ChartPercentage.astro

@@ -0,0 +1,137 @@
+---
+import Caption from "./Caption.astro";
+
+const { title, notes, values } = Astro.props;
+---
+
+<div class="chart-percentage reveal--fadeInUp">
+  <div class="chart-percentage__holder">
+
+    <span class="chart-percentage__title reveal--fadeInUp">{title}</span>
+    <div class="chart-percentage__bars">
+      {
+        values &&
+          values.map((data, index) => (
+            <div
+              class="chart-percentage__bar"
+              style={`--clr-chart:${data.color}; --data-perc:${data.number}%; --index:${index}`}
+            />
+          ))
+      }
+    </div>
+    <div class="chart-percentage__captions">
+      {
+        values &&
+          values.map((data, index) => (
+            <div
+              class="chart-percentage__caption"
+              style={`--clr-chart:${data.color}; --index:${index}`}
+            >
+              <span class="chart-percentage__label">
+                {data?.label ? data.label + " - " : ""}
+                <strong>{data.number + "%"}</strong>
+              </span>
+            </div>
+          ))
+      }
+    </div>
+    <div class="chart-percentage__notes reveal--fadeInUp">
+      <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-percentage) + *) {
+    margin-top: var(--mt-m);
+  }
+
+  .chart-percentage {
+    $self: &;
+    &: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-percentage) &,
+      :global(.group__content > .animation-disabled > .chart-percentage) & {
+        grid-column: content;
+      }
+    }
+
+    &__title {
+      @include type("h-m");
+      display: block;
+      margin-bottom: 40px;
+    }
+
+    &__bars {
+      display: flex;
+    }
+
+    &__bar {
+      flex-basis: 0;
+      height: 100px;
+      background-color: var(--clr-chart);
+      transition: 1s ease .5s;
+
+      :global(.animation-disabled) &,
+      #{$self}.reveal & {
+        flex-basis: var(--data-perc);
+      }
+    }
+
+    &__captions {
+      margin-top: 24px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      row-gap: 10px;
+      column-gap: 32px;
+    }
+
+    &__caption {
+      @include type("c-m");
+      width: fit-content;
+      display: grid;
+      grid-template-columns: 16px auto;
+      gap: 8px;
+      opacity: 0;
+      transform: translateY(30px);
+      transition: 1s ease .5s;
+
+      :global(.animation-disabled) &,
+      #{$self}.reveal & {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      &::before {
+        content: "";
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background-color: var(--clr-chart);
+        margin-top: 1px;
+        transform: translateY(2px);
+      }
+    }
+
+    &__label {
+      display: inline-block;
+    }
+
+    &__notes {
+      margin-top: 40px;
+    }
+  }
+</style>

package/src/components/Column.astro

@@ -0,0 +1,54 @@
+---
+const { paddingTop, paddingBottom } = Astro.props;
+---
+
+<section
+  class:list={[
+    "column",
+    {
+      'column--has-pdt': paddingTop,
+      'column--has-pdb': paddingBottom
+    }
+  ]}
+>
+  <div class="column__holder">
+    <slot />
+  </div>
+</section>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/globals/grrr" as *;
+
+  .column {
+    $self: &;
+    @extend %grrr--content;
+
+    &__holder {
+      --padding-block: 120px;
+      padding-top: var(--padding-top, var(--padding-block));
+      padding-bottom: var(--padding-bottom, var(--padding-block));
+      grid-column: content;
+  
+      @include media-break-down(m) {
+        --padding-block: 40px;
+      }
+  
+      #{$self}--has-pdt & {
+        --padding-top: 225px;
+  
+        @include media-break-down(m) {
+          --padding-top: 90px;
+        }
+      }
+      
+      #{$self}--has-pdb & {
+        --padding-bottom: 225px;
+  
+        @include media-break-down(m) {
+          --padding-bottom: 90px;
+        }
+      }
+    }
+  }
+</style>

package/src/components/ColumnSticky.astro

@@ -0,0 +1,129 @@
+---
+const { layout, paddingTop, paddingBottom } = Astro.props;
+
+// layout deve receber "text-bigger" ou "title-bottom".
+
+---
+
+<header
+  class:list={[
+    "column-sticky",
+    layout && `column-sticky--${layout}`,
+    {
+      'column-sticky--has-pdt': paddingTop,
+      'column-sticky--has-pdb': paddingBottom
+    }
+  ]}
+>
+  <div class="column-sticky__holder">
+    <div class="column-sticky__title">
+      <slot name="title" />
+    </div>
+    <div class="column-sticky__content">
+      <slot />
+    </div>
+  </div>
+</header>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/globals/grrr" as *;
+
+  .column-sticky {
+    $self: &;
+
+    &__holder {
+      @extend %grrr--board;
+      --padding-block: 120px;
+      padding-top: var(--padding-top, var(--padding-block));
+      padding-bottom: var(--padding-bottom, var(--padding-block));
+
+      @include media-break-down(m) {
+        --padding-block: 40px;
+        display: block;
+        padding-inline: var(--atnl-margin);
+      }
+
+      #{$self}--has-pdt & {
+        --padding-top: 225px;
+
+        @include media-break-down(m) {
+          --padding-top: 90px;
+        }
+      }
+      
+      #{$self}--has-pdb & {
+        --padding-bottom: 225px;
+
+        @include media-break-down(m) {
+          --padding-bottom: 90px;
+        }
+      }
+    }
+
+    &__title {
+      @include type('d-s');
+      font-weight: 600;
+      grid-column: board-start 1 / board-end 6;
+      text-wrap: balance;
+      
+      @include media-break-up(l) {
+        grid-column: board-start 2 / board-end 7;
+      }
+      
+      :global(> *) {
+        position: sticky;
+        top: var(--padding-block);
+        font-weight: inherit;
+      }
+
+      #{$self}--text-bigger & {
+        @include type('d-xl');
+        font-weight: 600;
+        
+        @include media-break-up(l) {
+          grid-column: board-start 2 / board-end 5;
+        }
+      }
+
+      @include media-break-down(x) {
+        #{$self} & {
+          @include type('h-xxl');
+          font-weight: 600;
+        }
+      }
+
+      @include media-break-down(l) {
+        #{$self} & {
+          @include type('h-l');
+          margin-bottom: 36px;
+        }
+      }
+    }
+
+    &__content {
+      animation-delay: .5s;
+      grid-column: board-start 7 / board-end 12;
+      
+      @include media-break-up(l) {
+        grid-column: board-start 8 / board-end 11;
+      }
+      
+      @include media-break-up(x) {
+        grid-column: board-start 9 / board-end 11;
+      }
+
+      #{$self}--text-bigger & {
+        @include media-break-up(l) {
+          grid-column: board-start 6 / board-end 11;
+        }
+      }
+
+      :global(> *:first-child),
+      :global(> .text > *:first-child) {
+        margin-top: 0;
+      }
+    }
+  }
+
+</style>

package/src/components/Columns.astro

@@ -0,0 +1,139 @@
+---
+const { paddingTop, paddingBottom, invertOnMobile, alignment } = Astro.props;
+
+//alignment recebe '33-66' (primeira coluna menor) ou false (padrão no css fica para primera coluna maior);
+---
+
+<section
+  class:list={[
+    "columns",
+    {
+      'columns--has-pdt': paddingTop,
+      'columns--has-pdb': paddingBottom,
+      'columns--invert-on-mobile': invertOnMobile,
+    },
+    
+    alignment && `columns--${alignment}`
+  ]}
+>
+  <div class="columns__holder">
+    <div class="columns__column-1">
+      <slot name="column-1" />
+    </div>
+    <div class="columns__column-2">
+      <slot name="column-2" />
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  @use "../assets/styles/config/config" as *;
+  @use "../assets/styles/globals/grrr" as *;
+
+  .columns {
+    $self: &;
+   
+    &:has(.gallery-modal[aria-hidden="false"]) {
+      position: relative;
+      z-index: 99999;  
+    }
+    
+    &__holder {
+      @extend %grrr--board;
+      align-items: start;
+
+      --padding-block: 120px;
+      padding-top: var(--padding-top, var(--padding-block));
+      padding-bottom: var(--padding-bottom, var(--padding-block));
+  
+      @include media-break-down(m) {
+        --padding-block: 40px;
+        row-gap: 60px;
+      }
+
+      #{$self}--has-pdt & {
+        --padding-top: 225px;
+  
+        @include media-break-down(m) {
+          --padding-top: 90px;
+        }
+      }
+      
+      #{$self}--has-pdb & {
+        --padding-bottom: 225px;
+  
+        @include media-break-down(m) {
+          --padding-bottom: 90px;
+        }
+      }
+    }
+
+    &__column-1 {
+      grid-column: board-start 2 / board-end 7;
+
+      @include media-break-down(x) {
+        grid-column: board-start 1 / board-end 7;
+      }
+
+      @include media-break-down(m) {
+        grid-column: board-full;
+      }
+      
+      #{$self}--33-66 & {
+        grid-column: board-start 2 / board-end 4;
+        
+        @include media-break-down(x) {
+          grid-column: board-start 1 / board-end 4;
+        }
+
+        @include media-break-down(l) {
+          grid-column: board-start 1 / board-end 5;
+        }
+      
+        @include media-break-down(m) {
+          grid-column: board-full;
+        }
+      }
+    }
+    
+    &__column-2 {
+      grid-column: board-start 9 / board-end 11;
+      animation-delay: .5s;
+
+      @include media-break-down(x) {
+        grid-column: board-start 9 / board-end 12;
+      }
+     
+      @include media-break-down(l) {
+        grid-column: board-start 8 / board-end 12;
+      }
+
+      @include media-break-down(m) {
+        grid-column: board-full;
+
+        #{$self}--invert-on-mobile & {
+          grid-row: 1;
+        }
+      }
+      
+      #{$self}--33-66 & {
+        grid-column: board-start 6 / board-end 11;
+
+        @include media-break-down(x) {
+          grid-column: board-start 6 / board-end 12;
+        }
+        
+        @include media-break-down(m) {
+          grid-column: board-full;
+        }
+      }
+    }
+
+    &__column-1,
+    &__column-2 {
+      :global(> *:first-child) {
+        margin-top: 0;
+      }
+    }  
+  }
+</style>