fulldev-ui 0.3.16 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/components/_Component.astro

@@ -85,6 +85,7 @@ const render =
   @import '../css/space.scss';
 
   @include component('full') {
+    z-index: 1;
     box-sizing: border-box;
   }
 </style>

package/src/components/base/Avatar.astro

@@ -11,7 +11,7 @@ const { radius = 'auto', variant = 'ghost', ...rest } = Astro.props
 ---
 
 <Image
-  class="avatar"
+  class:list={'avatar'}
   {variant}
   {radius}
   {...rest}
@@ -24,8 +24,10 @@ const { radius = 'auto', variant = 'ghost', ...rest } = Astro.props
     display: block;
     border: 1px solid var(--border);
     border-radius: var(--radius-3);
-    width: calc(var(--text-1) + 2 * var(--space-4));
-    height: calc(var(--text-1) + 2 * var(--space-4));
+    // width: calc(var(--text-1) + 2 * var(--space-4)) !important;
+    // height: calc(var(--text-1) + 2 * var(--space-4)) !important;
+    width: calc(4.4 * var(--space-3)) !important;
+    height: calc(4.4 * var(--space-3)) !important;
     object-fit: cover;
 
     &.radius-none {

package/src/components/base/Button.astro

@@ -1,6 +1,9 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
+import Label from '../typography/Label.astro'
+import Text from '../typography/Text.astro'
+import Avatar from './Avatar.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
@@ -12,6 +15,8 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> & {
   html?: string
   text?: string
   icon?: string
+  label?: string
+  avatar?: string
 }
 
 const {
@@ -20,6 +25,10 @@ const {
   radius = 'auto',
   contrast,
   icon,
+  label,
+  avatar,
+  text,
+  html,
   ...rest
 } = Astro.props
 ---
@@ -32,8 +41,19 @@ const {
   {radius}
   {...rest}
 >
+  <Label
+    as="span"
+    style={{ color: 'inherit' }}
+    html={label || text || html}
+  />
+
+  <!-- <Text
+    as="span"
+    html={text}
+  /> -->
   <slot />
   <Icon name={icon} />
+  <Avatar src={avatar} />
 </Component>
 
 <style is:global lang="scss">
@@ -45,14 +65,11 @@ const {
     justify-content: center;
     align-items: center;
     vertical-align: top;
-    gap: var(--space-2);
     transition: background-color var(--transition);
     cursor: pointer;
     outline: none !important;
     border: 1px solid var(--border);
     background-color: var(--background);
-    padding-right: var(--space-4);
-    padding-left: var(--space-4);
     height: calc(var(--text-1) + 2 * var(--space-4));
     color: var(--text);
     font-weight: var(--button-font-weight);
@@ -63,6 +80,29 @@ const {
     text-decoration: none;
     white-space: nowrap;
 
+    span {
+      padding-right: var(--space-4);
+      padding-left: var(--space-4);
+    }
+
+    .icon {
+      width: calc(var(--text-1) + 2 * var(--space-4)) !important;
+      height: calc(var(--text-1) + 2 * var(--space-4)) !important;
+
+      svg {
+        heigt: 70% !important;
+        width: 70% !important;
+      }
+    }
+
+    .avatar {
+      margin-left: -2px;
+      margin-left: calc(-1 * (var(--space-1) / 3));
+      padding: calc(var(--space-1) / 3);
+      width: calc(var(--text-1) + 2 * var(--space-4)) !important;
+      height: calc(var(--text-1) + 2 * var(--space-4)) !important;
+    }
+
     &:focus-visible {
       outline: 2px solid var(--focus) !important;
       outline-offset: 2px;

package/src/components/base/Image.astro

@@ -79,12 +79,15 @@ const {
     }
 
     &.mask-md {
+      -webkit-mask-image: linear-gradient(to top, transparent 0%, black 65%);
+      mask-image: linear-gradient(to top, transparent 0%, black 65%);
+    }
+
+    &.mask-lg {
       -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
       mask-image: linear-gradient(to top, transparent 0%, black 100%);
     }
 
-    
-
     &.radius-none {
       border-radius: 0;
     }

package/src/components/base/Rating.astro

@@ -1,18 +1,37 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
 import Component from '../_Component.astro'
+import Column from '../structure/Column.astro'
+import Row from '../structure/Row.astro'
+import Heading from '../typography/Heading.astro'
+import Label from '../typography/Label.astro'
+import Avatar from './Avatar.astro'
 import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> & {
   color?: 'base' | 'brand'
+  radius?: 'none' | 'auto' | 'full'
   value?: number
   size?: string
   compact?: boolean
+  avatars?: string[]
+  label?: string
+  heading: string
 }
 
-const { size, compact, value = 5, ...rest } = Astro.props
+const {
+  color = 'brand',
+  radius = 'full',
+  compact = true,
+  value,
+  heading,
+  avatars,
+  label,
+  ...rest
+} = Astro.props
 
 const getIcon = (count: number) => {
+  if (!value) return
   const difference = value - count
   if (difference >= -0.25) return 'star-filled'
   if (difference >= -0.75) return 'star-half-filled'
@@ -22,18 +41,39 @@ const getIcon = (count: number) => {
 
 <Component
   class:list={['rating']}
+  {compact}
   {...rest}
 >
   {
-    [1, 2, 3, 4, 5].map((_, i) => (
-      <>
-        <Icon
-          name={getIcon(i + 1)}
-          class:list={'rating-icon-solid'}
-        />
-      </>
+    avatars?.map((avatar) => (
+      <Avatar
+        {radius}
+        src={avatar}
+      />
     ))
   }
+  <Column>
+    <Row>
+      {
+        value &&
+          [1, 2, 3, 4, 5].map((_, i) => (
+            <Icon
+              {color}
+              name={getIcon(i + 1)}
+              class:list={'rating-icon-solid'}
+            />
+          ))
+      }
+    </Row>
+    <Label
+      color="base"
+      html={label}
+    />
+    <Heading
+      level={6}
+      html={heading}
+    />
+  </Column>
 </Component>
 
 <style is:global lang="scss">
@@ -41,7 +81,23 @@ const getIcon = (count: number) => {
 
   @include component('rating') {
     display: inline-flex;
-    position: relative;
-    gap: var(--space-2);
+    align-items: center;
+
+    .avatar {
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    * + .column {
+      margin-left: var(--space-4);
+    }
+
+    .label,
+    .heading {
+      margin-top: var(--space-2) !important;
+    }
+
+    .avatar + .avatar {
+      margin-left: calc(-1 * var(--space-5));
+    }
   }
 </style>

package/src/components/segment/Card.astro

@@ -52,7 +52,6 @@ const {
 
   @include component('card') {
     position: relative;
-    overflow: hidden;
     text-decoration: none;
 
     &[href] {
@@ -92,6 +91,7 @@ const {
       border: 1px solid var(--border);
       background-color: var(--background);
       padding: var(--inner-y) var(--inner-x);
+      overflow: hidden;
 
       &.radius-none {
         border-radius: 0;

package/src/components/segment/Section.astro

@@ -80,6 +80,7 @@ const {
 
       border: 1px solid var(--border);
       border-radius: var(--radius-3);
+      overflow: hidden;
     }
   }
 </style>

package/src/css/space.scss

@@ -32,12 +32,12 @@
     }
 
     .full + .label,
+    .icon + .icon,
     .label + .full {
       margin-left: var(--space-2);
     }
 
-    .image + .full,
-    .icon + .full {
+    .image + .full {
       margin-left: var(--space-6);
     }
   }
@@ -61,7 +61,6 @@
     }
 
     .full + .heading,
-    .full + .label,
     .full + .link,
     .full + .list,
     .full + .paragraph,
@@ -85,6 +84,7 @@
     .label + .input,
     .variant-link + .variant-link,
     .label + .textarea,
+    .full + .label,
     .label + .select {
       margin-top: var(--space-2);
     }