feat: improve the timeline component and add content prop (#98)

HamzaAmar · Nov 14, 2024 · f499464 · f499464
1 parent 5eeb08c
commit f499464
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 27 deletions.
diff --git a/packages/pillar-core/src/core/avatar/_avatar.css b/packages/pillar-core/src/core/avatar/_avatar.css
@@ -10,6 +10,7 @@
   min-width: var(--eq-s);
   /* aspect-ratio: 1; */
   max-height: var(--eq-s);
+  overflow: hidden;
 
   /* Default Value set by the Client */
   border-radius: var(--avatar-rad, 10em);

diff --git a/packages/pillar-core/src/core/chips/_chips.css b/packages/pillar-core/src/core/chips/_chips.css
@@ -1,6 +1,7 @@
 .ci- {
   max-width: 35ch;
-  padding: 0.125em;
+  padding: 0.175em 0.2em;
+  line-height: 1.2;
 
   /*
     These properties serve as fallbacks. If the corresponding utility functions are

diff --git a/packages/pillar-core/src/core/skeleton/index.tsx b/packages/pillar-core/src/core/skeleton/index.tsx
@@ -3,6 +3,7 @@ import { forwardRef } from 'react'
 import type { ForwardRefComponent } from '../../types/polymorphic.type'
 import type * as ST from './skeleton.type'
 import type { CSSProperties } from 'react'
+import { cx } from '../cx'
 
 /*
 ///////////////////////////////////////////////////////////////////////////////////////////////////
@@ -77,10 +78,11 @@ SkeletonButton.displayName = 'SkeletonButton'
 */
 
 export const Skeleton = forwardRef((props, ref) => {
-  const { height = '10rem', as: Tag = 'div', className, isLoading, children, ...rest } = props
-  const _style = { '--height': height } as CSSProperties
+  const { height, as: Tag = 'div', className, isLoading, children, ...rest } = props
 
-  return isLoading ? <Tag ref={ref} style={_style} className={`sk- sk-B ${className}`} {...rest} /> : children
+  const classNames = cx(`sk- sk-B ${className}`, { [`Sh-${height}`]: height })
+
+  return isLoading ? <Tag ref={ref} className={classNames} {...rest} /> : children
 }) as ForwardRefComponent<'div', ST.SkeletonProps>
 
 Skeleton.displayName = 'Skeleton'

diff --git a/packages/pillar-core/src/core/timeline/_timeline.css b/packages/pillar-core/src/core/timeline/_timeline.css
@@ -1,26 +1,37 @@
 .ti- {
+  --tic: clamp(2px, 0.09em, 3px);
   position: relative;
-  font-size: var(--timeline-size, 1rem);
+  font-size: var(--timeline-size, var(--F5));
 }
 
 .ti-L {
-  border-inline-start: var(--c9) 0.15em var(--ti-v);
+  border-inline-start: var(--c9) var(--tic) var(--ti-v);
   width: 0.15em;
 }
-
+.ti-I:last-child .ti-L {
+  border-inline-start: none;
+}
 .ti-I {
   position: relative;
 }
 
 .ti-B {
-  width: 1em;
-  height: 1em;
+  --ts: clamp(0.85rem, 2.25em, 2.75rem);
+  width: var(--ts);
+  height: var(--ts);
   background: var(--B1);
-  border: var(--c9) 0.15em solid;
+  border: transparent var(--tic) solid;
   transform: translateX(-50%) translateX(-0.08em);
   overflow: hidden;
-  border-radius: var(--border-radius, 0);
-  margin-top: 0.375rem;
+  font-size: min(0.75em, 1.5rem);
+
+  & svg {
+    width: 1.25em;
+  }
+}
+
+.ti-C {
+  padding-bottom: 1rem;
 }
 
 /* 

diff --git a/packages/pillar-core/src/core/timeline/index.tsx b/packages/pillar-core/src/core/timeline/index.tsx
@@ -11,21 +11,28 @@ const [TimelineProvider, useTimeline] = context<TimelineContextProps>({
 
 export const TimelineItem = (props: TimelineItemProps) => {
   const context = useTimeline()
-  const { children, corner = context?.corner ?? 'circle', variant = context?.variant ?? 'solid', bullet } = props
+  const {
+    children,
+    corner = context?.corner ?? '2',
+    variant = 'mixed',
+    line = context?.line ?? 'solid',
+    color = context?.color ?? 'b',
+    content,
+  } = props
 
   return (
-    <Grid grid="1.25em 1fr" gap="4" className={`ti-I  ti-I-${variant}`}>
-      <div className="ti-L">
-        <div className={`ti-B R-${corner} F-c`}>{bullet}</div>
+    <Grid grid=".85em 1fr" gap="4" className={`ti-I ti-I-${line}`}>
+      <div className={`ti-L C-${color}`}>
+        <div className={`ti-B R-${corner} V-${variant} F-c`}>{content}</div>
       </div>
-      <div>{children}</div>
+      <div className="ti-C">{children}</div>
     </Grid>
   )
 }
 
-export const Timeline = ({ color = 'b', size = '4', children, ...rest }: TimelineProps) => {
+export const Timeline = ({ size = '4', children, ...rest }: TimelineProps) => {
   return (
-    <div className={`ti- Fs-${size} C-${color}`}>
+    <div className={`ti- Fs-${size}`}>
       <TimelineProvider {...rest}>{children}</TimelineProvider>
     </div>
   )

diff --git a/packages/pillar-core/src/core/timeline/timeline.type.ts b/packages/pillar-core/src/core/timeline/timeline.type.ts
@@ -1,22 +1,23 @@
-import type { Color, Corner, Size } from '../../types'
-import type { ReactElement, ReactNode } from 'react'
+import type { Color, Corner, Size, Variant } from '../../types'
+import type { ReactNode } from 'react'
 
-type Variant = 'solid' | 'dotted' | 'dashed'
+type Line = 'solid' | 'dotted' | 'dashed'
 
 export interface TimelineBase {
   corner?: Corner
   size?: Size
+  line?: Line
   variant?: Variant
+  content?: ReactNode
+  color?: Color
 }
 
 export interface TimelineProps extends TimelineBase {
-  color?: Color
   children: ReactNode
 }
 
 export interface TimelineItemProps extends TimelineBase {
   children: ReactNode
-  bullet?: ReactElement
 }
 
 export interface TimelineContextProps extends TimelineBase {}

diff --git a/packages/pillar-core/src/css/utilities/_variants.css b/packages/pillar-core/src/css/utilities/_variants.css
@@ -17,12 +17,12 @@
 }
 
 .V-soft {
-  background: var(--c3);
+  background: var(--c4);
 }
 
 .V-mixed {
-  border-color: var(--c8);
-  background: var(--c3);
+  border-color: var(--c9);
+  background: var(--c4);
 }
 
 .V-text {