@byline/ui 0.9.3 → 0.10.1

package/src/widgets/timeline/timeline.module.css

@@ -0,0 +1,102 @@
+@layer byline-base,
+  byline-functional,
+  byline-utilities,
+  byline-theme,
+  byline-typography,
+  byline-components;
+
+@layer byline-components {
+  .timeline,
+  :global(.infonomic-timeline) {
+    margin-left: var(--spacing-8);
+  }
+
+  .timeline-root,
+  :global(.infonomic-timeline-root) {
+    position: relative;
+    list-style: none;
+    margin-left: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    border-left-width: var(--border-width-thin);
+    border-left-color: var(--border-color);
+    border-left-style: var(--border-style-solid);
+  }
+
+  .timeline-item,
+  :global(.infonomic-timeline-item) {
+    margin: 0 0 var(--spacing-16) var(--spacing-20);
+  }
+
+  /* 'absolute block flex items-center justify-center w-[36px] h-[36px] rounded-full -mt-[3px] sm:mt-0 -left-[18px] border-[6px] bg-secondary-600 dark:bg-secondary-900 border-gray-50 dark:border-canvas-600', */
+  .timeline-icon,
+  :global(.infonomic-timeline-icon) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-top: -3px;
+    left: -18px;
+    border-width: 6px;
+    color: white;
+    background-color: var(--primary-600);
+    border-color: var(--gray-50);
+  }
+
+  .timeline-icon svg,
+  :global(.infonomic-timeline-icon svg) {
+    display: block;
+    width: 60%;
+    color: white;
+  }
+
+  /* 'text-[1.5rem] sm:text-[1.57rem] leading-[1.2] !m-0 font-semibold' */
+  .timeline-heading,
+  :global(.infonomic-timeline-heading) {
+    font-size: 1.5rem;
+    line-height: 1.2;
+    margin: 0;
+    font-weight: var(--font-weight-semibold);
+  }
+
+  /* 'block mt-2 mb-2 text-[0.9em] font-medium leading-none text-gray-900 dark:text-gray-100' */
+  .timeline-date,
+  :global(.infonomic-timeline-date) {
+    display: block;
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+    font-size: 0.9em;
+    font-weight: var(--font-weight-medium);
+    line-height: 0;
+    color: var(--gray-600);
+  }
+
+  /* '[&_p]:m-0 [&_p]:mb-4 [&_p]:sm:m-0 [&_p]:sm:mb-4 text-lg font-normal text-gray-900 dark:text-gray-300' */
+  .timeline-content,
+  :global(.infonomic-timeline-content) {
+    margin: 0;
+    margin-bottom: var(--spacing-16);
+    font-size: 1.125rem;
+    font-weight: var(--font-weight-normal);
+
+    & p {
+      margin: 0;
+      margin-bottom: var(--spacing-16);
+    }
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    :global(.infonomic-timeline-icon),
+    .timeline-icon {
+      border-color: var(--canvas-600);
+    }
+  }
+}

package/src/widgets/timeline/timeline.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import type React from 'react'
+
+import cx from 'classnames'
+
+import styles from './timeline.module.css'
+
+// Timeline Container
+export interface TimelineProps {
+  id?: string
+  className?: string
+  'aria-label'?: string
+  children?: React.ReactNode
+}
+
+export const Timeline = ({
+  id,
+  className,
+  children,
+  ...rest
+}: TimelineProps): React.JSX.Element => {
+  return (
+    <div id={id} className={cx(styles.timeline, 'timeline', className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+// Timeline Root
+type RootElement = React.ComponentRef<'ol'>
+type PrimitiveRootProps = React.ComponentPropsWithoutRef<'ol'>
+interface RootProps extends PrimitiveRootProps {
+  className?: string
+}
+const Root = function TimelineRoot({
+  ref,
+  children,
+  className,
+  ...props
+}: RootProps & {
+  ref?: React.RefObject<RootElement>
+}) {
+  const classes = cx(styles['timeline-root'], 'timeline-root', className)
+  return (
+    <ol ref={ref} {...props} className={classes}>
+      {children}
+    </ol>
+  )
+}
+
+// Timeline Item
+type ItemElement = React.ComponentRef<'li'>
+type PrimitiveItemProps = React.ComponentPropsWithoutRef<'li'>
+interface ItemProps extends PrimitiveItemProps {
+  className?: string
+}
+const Item = function TimelineItem({
+  ref,
+  children,
+  className,
+  ...props
+}: ItemProps & {
+  ref?: React.RefObject<ItemElement>
+}) {
+  return (
+    <li ref={ref} {...props} className={cx(styles['timeline-item'], 'timeline-item', className)}>
+      {children}
+    </li>
+  )
+}
+
+// Timeline Item Icon
+type IconElement = React.ComponentRef<'span'>
+type PrimitiveIconProps = React.ComponentPropsWithoutRef<'span'>
+interface IconProps extends PrimitiveIconProps {
+  className?: string
+}
+const Icon = function TimelineIcon({
+  ref,
+  children,
+  className,
+  ...props
+}: IconProps & {
+  ref?: React.RefObject<IconElement>
+}) {
+  return (
+    <span ref={ref} {...props} className={cx(styles['timeline-icon'], 'time-line-icon', className)}>
+      <svg
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
+      </svg>
+    </span>
+  )
+}
+
+// Timeline Item Heading
+type HeadingElement = React.ComponentRef<'h3'>
+type PrimitiveHeadingProps = React.ComponentPropsWithoutRef<'h3'>
+interface HeadingProps extends PrimitiveHeadingProps {
+  className?: string
+}
+const Heading = function TimelineHeading({
+  ref,
+  children,
+  className,
+  ...props
+}: HeadingProps & {
+  ref?: React.RefObject<HeadingElement>
+}) {
+  return (
+    <h3
+      ref={ref}
+      {...props}
+      className={cx(styles['timeline-heading'], 'timeline-heading', className)}
+    >
+      {children}
+    </h3>
+  )
+}
+
+// Timeline Item Date
+type DateElement = React.ComponentRef<'time'>
+type PrimitiveDateProps = React.ComponentPropsWithoutRef<'time'>
+interface DateProps extends PrimitiveDateProps {
+  className?: string
+}
+const DateItem = function TimelineDate({
+  ref,
+  children,
+  className,
+  ...props
+}: DateProps & {
+  ref?: React.RefObject<DateElement>
+}) {
+  return (
+    <time ref={ref} {...props} className={cx(styles['timeline-date'], 'timeline-date', className)}>
+      {children}
+    </time>
+  )
+}
+
+// Timeline Item Content
+type ContentElement = React.ComponentRef<'p'>
+type PrimitiveContentProps = React.ComponentPropsWithoutRef<'div'>
+interface ContentProps extends PrimitiveContentProps {
+  className?: string
+}
+const Content = function TimelineContent({
+  ref,
+  children,
+  className,
+  ...props
+}: ContentProps & {
+  ref?: React.RefObject<ContentElement>
+}) {
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cx(styles['timeline-content'], 'timeline-content', className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+Timeline.Root = Root
+Timeline.Item = Item
+Timeline.Icon = Icon
+Timeline.Heading = Heading
+Timeline.Date = DateItem
+Timeline.Content = Content