fulldev-ui 0.3.0-beta.3 → 0.3.3

package/src/components/segment/Header.astro

@@ -1,21 +1,20 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    structure?: 'spread' | 'group' | 'column'
-    position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
-    variant?: 'base' | 'raised'
-    frame?: 'wrapper' | 'container' | 'panel'
-    align?: 'start' | 'center' | 'end'
-  }
+type Props<As extends HTMLTag = 'header'> = Polymorphic<{ as: As }> & {
+  structure?: 'spread' | 'row' | 'column'
+  position?: 'relative' | 'sticky' | 'fixed' | 'absolute'
+  variant?: 'ghost' | 'subtle' | 'soft' | 'surface' | 'outline'
+  frame?: 'fill' | 'panel'
+  align?: 'start' | 'center' | 'end'
+}
 
 const {
   as = 'header',
   structure = 'spread',
-  density = 'compact',
-  frame = 'wrapper',
+  frame = 'fill',
+  variant = 'subtle',
   compact = true,
   ...rest
 } = Astro.props
@@ -24,9 +23,10 @@ const {
 <Component
   class:list={['header']}
   {as}
-  {density}
   {frame}
   {compact}
+  {structure}
+  {variant}
   {...rest}
 >
   <slot />
@@ -36,7 +36,8 @@ const {
   @import '../../css/utils.scss';
 
   @include component('header') {
-    --inner: var(--element-3);
+    --screen: 1536px;
+    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
 
     display: flex;
     top: 0;
@@ -45,14 +46,30 @@ const {
     justify-content: space-between;
     align-items: center;
     z-index: 10;
-    background: var(--background);
-    padding-top: var(--element-3);
-    padding-bottom: var(--element-3);
+    border-bottom: 1px solid var(--border);
+    background-color: var(--background);
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-4);
     width: 100%;
 
-    // &.panel {
-    //   margin-top: var(--inner);
-    // }
+    &.frame-fill {
+      padding-top: var(--space-4);
+      padding-right: var(--gutter);
+      padding-bottom: var(--space-4);
+      padding-left: var(--gutter);
+    }
+
+    &.frame-panel {
+      margin-top: var(--space-2);
+      margin-right: var(--gutter);
+      margin-left: var(--gutter);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-3);
+      padding-top: var(--space-2);
+      padding-right: var(--space-4);
+      padding-bottom: var(--space-2);
+      padding-left: var(--space-4);
+    }
 
     &.position-fixed {
       position: fixed;
@@ -65,5 +82,17 @@ const {
     &.position-sticky {
       position: sticky;
     }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
   }
 </style>

package/src/components/segment/Section.astro

@@ -1,32 +1,24 @@
 ---
-import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
 
-type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> &
-  ComponentProps<typeof Component> & {
-    scheme?: 'light' | 'dark'
-    color?: 'base' | 'brand'
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
-    compact?: boolean
-    frame?: 'container' | 'wrapper' | 'panel' | 'viewport' | 'none'
-    variant?: 'fill' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
-    align?: 'start' | 'center' | 'end' | 'stretch'
-    structure?:
-      | 'row'
-      | 'column'
-      | 'split'
-      | 'spread'
-      | 'grid'
-      | 'bento'
-      | 'masonry'
-      | 'carousel'
-  }
+type Props<As extends HTMLTag = 'section'> = Polymorphic<{ as: As }> & {
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  frame?: 'fill' | 'viewport' | 'contain' | 'panel'
+  variant?: 'ghost' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
+  align?: 'start' | 'center' | 'end'
+  structure?: 'column' | 'split' | 'spread' | 'row'
+}
 
 const {
-  frame = 'wrapper',
-  structure = 'column',
-  variant = frame === 'panel' ? 'subtle' : 'fill',
   as = 'div',
+  frame = 'fill',
+  structure = 'column',
+  variant = 'ghost',
+  align = 'start',
   ...rest
 } = Astro.props
 ---
@@ -36,6 +28,7 @@ const {
   {as}
   {frame}
   {variant}
+  {align}
   {structure}
   {...rest}
 >
@@ -46,23 +39,64 @@ const {
   @import '../../css/utils.scss';
 
   @include component('section') {
-    --inner-y: var(--space-6);
+    --screen: 1536px;
+    --gutter: max(4vw, calc(100vw - var(--screen)) / 2);
 
     position: relative;
-    padding-top: var(--inner-y);
-    padding-bottom: var(--inner-y);
+    margin: var(--outer-y) var(--outer-x);
+    background-color: var(--background);
+    padding: var(--inner-y) var(--inner-x);
+    width: 100%;
+    max-width: calc(100% - (2 * var(--outer-x)));
+
+    &.frame-fill {
+      --inner-x: var(--gutter);
+      --outer-x: 0;
+      --inner-y: var(--space-7);
+      --outer-y: 0;
+    }
+
+    &.frame-viewport {
+      --inner-x: var(--gutter);
+      --outer-x: 0;
+      --inner-y: var(--space-7);
+      --outer-y: 0;
+
+      min-height: 100vh;
+    }
 
-    &.frame-wrapper {
-      background-color: var(--background);
+    &.frame-contain {
+      --inner-x: max(4vw, var(--space-7));
+      --outer-x: max(0px, calc(var(--gutter) - var(--inner-x)));
+      --inner-y: var(--space-7);
+      --outer-y: 0;
     }
 
     &.frame-panel {
-      margin-top: var(--inner-y);
-      margin-bottom: var(--inner-y);
+      --inner-x: min(4vw, var(--space-7));
+      --outer-x: var(--gutter);
+      --inner-y: var(--space-7);
+      --outer-y: var(--space-7);
+
+      border: 1px solid var(--border);
+      border-radius: var(--radius-3);
+    }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+      text-align: center;
+
+      & > * > * {
+        text-align: left;
+      }
     }
 
-    &:not(.frame-panel) {
-      box-shadow: none !important;
+    &.align-end {
+      align-items: flex-end;
     }
   }
 </style>

package/src/components/segment/_regels.md

@@ -0,0 +1,32 @@
+Kan je een collectie Section maken? Ja: Hero, Cta etc
+Kan je een collectie Cards maken? Ja: Product, Post etc
+
+Kan je een collectie ... maken? Zo ja = segment.
+Segments omschrijven super duidelijk de content.
+Group is een voorbeeld van een slechte section, want niemand wat hier in zit. 
+
+Deze segments willen we uiteindelijk hebben:
+
+- Card
+- Section
+- Header
+- Banner
+- Sidebar
+- Layout
+- Deck
+- Footer
+
+Denk aan ProductCard, ProductSection, ProductLayout
+
+Denk aan een block library met Sections, Cards, Sidebars, Header, Banners, Footer
+
+Ze omschrijven ALLEMAAL duidelijk wat de content is.
+
+Beschrijft het niet duidelijk de content? Beschrijft het wel duidelijk de structuur? >> structure
+
+Waar structures 1 slot hebben, moeten segments meerdere slots krijgen. reden is dat de conten t hier bepalen is! Anders klopt de segment naam sws niet.
+
+Section heeft bijv segment, writeup, actions, media.
+Deck heeft bijv segment, writeup, actions, cards
+
+Een segment kan goed uit meerdere structures bestaan, waar iedere slot een eigen structure heeft. Als segction structure spread bijv heeft wordt niet perse de hele section spread, maar de segment wel. Of kan ook met align stretch ipv structure

package/src/components/structure/Bento.astro

@@ -0,0 +1,38 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['bento']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('bento') {
+    display: grid;
+    position: relative;
+    grid-template-columns: 1fr;
+    width: 100%;
+
+    @media (min-width: 1024px) {
+      grid-template-columns: 1fr 1fr 1fr;
+
+      & > *:nth-child(2n) {
+        grid-column-start: span 2;
+      }
+    }
+  }
+</style>

package/src/components/structure/Box.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  scheme?: 'light' | 'dark'
+  color?: 'base' | 'brand'
+  size?: 'sm' | 'md' | 'lg'
+  compact?: boolean
+  frame?: 'container' | 'wrapper' | 'panel' | 'viewport' | 'card' | 'none'
+  variant?: 'fill' | 'subtle' | 'outline' | 'soft' | 'solid' | 'surface'
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['box']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('box') {
+    position: relative;
+  }
+</style>

package/src/components/structure/Carousel.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  position?: 'inset'
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['carousel']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('carousel') {
+    --column-width: calc(16 * var(--space-4));
+
+    display: flex;
+    position: relative;
+    position: relative;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--space-4);
+    padding-bottom: var(--space-4);
+    width: 100%;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+
+    > .full {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: var(--column-width);
+      scroll-snap-align: center;
+    }
+
+    &.position-inset {
+      margin-right: calc(var(--inner-x) * -1);
+      margin-left: calc(var(--inner-x) * -1);
+      padding-right: var(--inner-x);
+      padding-left: var(--inner-x);
+      width: calc(100% + var(--inner-x) * 2);
+    }
+  }
+</style>

package/src/components/structure/Column.astro

@@ -0,0 +1,46 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+const { align = 'start', ...rest } = Astro.props
+---
+
+<Component
+  class:list={['column']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+  @import '../../css/space.scss';
+
+  @include component('column') {
+    @include space-y;
+
+    display: flex;
+    position: relative;
+    flex-direction: column;
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/structure/Grid.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['grid']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('grid') {
+    --column-width: calc(15 * var(--space-4));
+
+    display: grid;
+    position: relative;
+    grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
+    gap: var(--space-4);
+    width: 100%;
+  }
+</style>

package/src/components/structure/Masonry.astro

@@ -0,0 +1,42 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+}
+
+const { ...rest } = Astro.props
+---
+
+<Component
+  class:list={['masonry']}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('masonry') {
+    --column-width: calc(16 * var(--space-4));
+    --gap: var(--space-4);
+
+    position: relative;
+    column-gap: var(--gap);
+    column-fill: balance;
+    column-width: var(--column-width);
+    column-count: 6;
+    break-inside: avoid;
+    width: 100%;
+
+    & > .full + .full {
+      break-inside: avoid;
+      margin-top: var(--gap);
+      margin-bottom: var(--gap);
+    }
+  }
+</style>

package/src/components/structure/Row.astro

@@ -0,0 +1,44 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+const { align = 'center', ...rest } = Astro.props
+---
+
+<Component
+  class:list={['row']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+  @import '../../css/space.scss';
+
+  @include component('row') {
+    @include space-x;
+
+    display: flex;
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/structure/Split.astro

@@ -0,0 +1,54 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+const { align = 'center', ...rest } = Astro.props
+---
+
+<Component
+  class:list={['split']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+  @import '../../css/space.scss';
+
+  @include component('split') {
+    display: grid;
+    grid-template-columns: 1fr;
+    column-gap: var(--space-6);
+    width: 100%;
+
+    @media (max-width: 1023.9999px) {
+      @include space-y;
+    }
+
+    @media (min-width: 1024px) {
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+    }
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>

package/src/components/structure/Spread.astro

@@ -0,0 +1,45 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+import Component from '../_Component.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  compact?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+const { align = 'center', ...rest } = Astro.props
+---
+
+<Component
+  class:list={['spread']}
+  {align}
+  {...rest}
+>
+  <slot />
+</Component>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('spread') {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--space-5);
+    width: 100%;
+
+    &.align-start {
+      align-items: flex-start;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+  }
+</style>