@4alldigital/foundation-ui--core 3.0.0

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,60 @@
+import cx from 'classnames';
+import { Props } from './Banner.types';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Copy from '../Copy';
+import Icon from '../Icon';
+import Link from '../Link';
+
+const Banner = ({ id, testID, title, text, icon, href, className }: Props) => {
+  const classes = cx(
+    'rounded-lg p-6 shadow-sm',
+    'bg-tertiary text-card-text border-gray-200',
+    'dark:bg-darkCardBackground dark:text-darkCardText dark:border-gray-700',
+    className,
+  );
+
+  const content = (
+    <div className="flex gap-4 items-start">
+      {icon && (
+        <div className="flex-shrink-0 mt-1">
+          <Icon name={icon} className="w-6 h-6" />
+        </div>
+      )}
+      <div className="flex-1">
+        {title && (
+          <Heading tag={HEADING_TAGS.H4} className="mb-2">
+            {title}
+          </Heading>
+        )}
+        <Copy className="mb-0">{text}</Copy>
+      </div>
+      {href && (
+        <div className="flex-shrink-0">
+          <Icon name="mdi:chevron-right" className="w-6 h-6" />
+        </div>
+      )}
+    </div>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className="block no-underline hover:no-underline" testID={testID || id || 'Banner'}>
+        <div className={cx(classes, 'hover:shadow-md transition-shadow duration-200 cursor-pointer')}>
+          {content}
+        </div>
+      </Link>
+    );
+  }
+
+  return (
+    <div data-testid={testID || id || 'Banner'} className={classes}>
+      {content}
+    </div>
+  );
+};
+
+Banner.displayName = 'Banner';
+
+export default Banner;
+export type { Props };

package/src/components/Banner/Banner.types.ts

@@ -0,0 +1,9 @@
+export interface Props {
+  id?: string;
+  testID?: string;
+  title?: string;
+  text: string;
+  icon?: string;
+  href?: string;
+  className?: string;
+}

package/src/components/Banner/index.ts

@@ -0,0 +1 @@
+export { default } from './Banner';

package/src/components/Blockquote/Blockquote.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Blockquote from '.';
+
+const meta: Meta<typeof Blockquote> = {
+  title: 'ATOMS/Blockquote',
+  component: Blockquote,
+};
+
+type Story = StoryObj<typeof Blockquote>;
+
+export const Default: Story = {
+  args: {
+    showIcon: true,
+    citation: 'Joe BloggsVille',
+    citationAttribute: 'CEO of WFO',
+    text: 'Lorem ipsum dolor sit amet, elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+  },
+};
+
+export default meta;

package/src/components/Blockquote/Blockquote.tsx

@@ -0,0 +1,32 @@
+import cx from 'classnames';
+import { Props } from './Blockquote.types';
+import Icon from '../Icon';
+
+const Blockquote = ({
+  text,
+  citation,
+  className,
+  citationAttribute,
+  showIcon = true,
+}: Props) => {
+  const classes = cx('text-xl italic font-bold', className);
+  return (
+    <blockquote data-testid="Blockquote" className={classes}>
+      {showIcon && <Icon name="mdi:comment-quote" size={42} />}
+      <div>{text}</div>
+      {citation && (
+        <figcaption className="flex flex-start items-center mt-6 space-x-3">
+          <div className="flex items-center divide-x-2">
+            <cite className="pr-3 font-medium">{citation}</cite>
+            {citationAttribute && <cite className="pl-3 text-sm font-light">{citationAttribute}</cite>}
+          </div>
+        </figcaption>
+      )}
+    </blockquote>
+  );
+};
+
+Blockquote.displayName = 'Blockquote';
+
+export default Blockquote;
+export type { Props };

package/src/components/Blockquote/Blockquote.types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  text: string | Array<string>,
+  className?: string,
+  citation?: string,
+  citationAttribute?: string,
+  showIcon?: boolean,
+}
+

package/src/components/Blockquote/index.ts

@@ -0,0 +1 @@
+export { default } from './Blockquote';

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Button from '.';
+import { BTN_VARIANTS } from './Button.types';
+
+type Story = StoryObj<typeof Button>;
+
+const meta: Meta<typeof Button> = {
+  title: 'ATOMS/Button',
+  component: Button,
+};
+
+export default meta;
+
+/* STORIES */
+export const Default: Story = {
+  args: {
+    children: <>Default Btn</>,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    variant: BTN_VARIANTS.PRIMARY,
+    children: <>Example Btn</>,
+    icon: 'carbon:arrow-right',
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    variant: BTN_VARIANTS.PRIMARY,
+    icon: 'carbon:arrow-right',
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    variant: BTN_VARIANTS.LINK,
+    children: <>Example Link</>,
+    icon: 'carbon:arrow-right',
+  },
+};
+
+export const LoadingButton: Story = {
+  args: {
+    variant: BTN_VARIANTS.PRIMARY,
+    children: <>Example Btn</>,
+    isLoading: true,
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,117 @@
+import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
+import { BTN_SIZES, BTN_TYPES, BTN_VARIANTS, Props } from './Button.types';
+import Icon from '../Icon';
+import Loader from '../Loader';
+
+const Button = ({
+  variant = BTN_VARIANTS.PRIMARY,
+  size = BTN_SIZES.MEDIUM,
+  type = BTN_TYPES.BUTTON,
+  wide = false,
+  rounded = false,
+  raised = false,
+  uppercase,
+  children,
+  id,
+  disabled,
+  ariaLabel,
+  onClick,
+  icon,
+  external,
+  iconFirst,
+  outline,
+  testID,
+  className,
+  isLoading,
+  offsetFont = false,
+}: Props) => {
+  const smallX = wide ? 'px-5' : 'px-3';
+  const mediumX = wide ? 'px-8' : 'px-4';
+  const largeX = wide ? 'px-11' : 'px-5';
+
+  const sizes = {
+    small: {
+      x: children && !rounded ? smallX : children ? 'px-3' : 'px-1',
+      y: 'py-1',
+      space: 'space-x-2',
+      text: 'text-sm',
+      icon: 'w-3 h-3',
+    },
+    medium: {
+      x: children && !rounded ? mediumX : children ? 'px-4' : 'px-2',
+      y: 'py-2',
+      space: 'space-x-3',
+      text: 'text-base',
+      icon: 'w-5 h-5',
+    },
+    large: {
+      x: children && !rounded ? largeX : children ? 'px-5' : 'px-3',
+      y: 'py-3',
+      space: 'space-x-4',
+      text: 'text-lg',
+      icon: 'w-6 h-6',
+    },
+  };
+
+  const classes = twMerge(
+    cx(
+      'button rounded-btnBorderRadius',
+      { shadow: raised },
+      { uppercase: uppercase },
+      { 'auto-cols-auto grid-cols-2 gap-4': isLoading || icon || external },
+      { 'flex-row-reverse': iconFirst },
+      { 'opacity-50 cursor-not-allowed': disabled },
+      `${sizes?.[size]?.y} ${sizes?.[size]?.x} ${sizes?.[size]?.text}`,
+      { 'text-white border-primary bg-primary hover:bg-primary-darker': variant === BTN_VARIANTS.PRIMARY },
+      { 'text-white border-secondary bg-secondary hover:bg-secondary-darker': variant === BTN_VARIANTS.SECONDARY },
+      { 'text-black border-tertiary bg-tertiary hover:bg-tertiary-darker': variant === BTN_VARIANTS.TERTIARY },
+      { 'border-primary bg-transparent text-body-text dark:text-body-text-dark hover:bg-opacity-30': outline },
+      { 'border-primary-300 dark:border-primary-400 hover:border-primary-400 dark:hover:border-primary-500': outline },
+      {
+        'px-0 text-body-text dark:text-body-text-dark border-transparent bg-transparent hover:bg-transparent shadow-none group-hover:invert':
+          variant === BTN_VARIANTS.LINK,
+      },
+      { 'rounded-full leading-none': rounded },
+      className,
+    ),
+  );
+
+  const iconClasses = cx(sizes?.[size]?.icon);
+
+  return (
+    <button
+      id={id}
+      data-testid={testID || id || 'Button'}
+      onClick={onClick}
+      className={classes}
+      type={type}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      role="button">
+      <>
+        {offsetFont ? <span className="brand-font-offset">{children}</span>: children}
+        {icon && !external && (
+          <span className="flex items-center">
+            <Icon name={icon} className={iconClasses} />
+          </span>
+        )}
+        {external && (
+          <span className="flex items-center">
+            <Icon name="carbon:launch" className={iconClasses} />
+          </span>
+        )}
+        {isLoading && (
+          <div className="flex items-center">
+            <Loader size={4} />
+          </div>
+        )}
+      </>
+    </button>
+  );
+};
+
+Button.displayName = 'Button';
+
+export default Button;
+export type { Props };

package/src/components/Button/Button.types.ts

@@ -0,0 +1,43 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+export enum BTN_TYPES {
+  SUBMIT = 'submit',
+  RESET = 'reset',
+  BUTTON = 'button',
+}
+
+export enum BTN_VARIANTS {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  LINK = 'link',
+}
+
+export enum BTN_SIZES {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+export interface Props {
+  variant?: BTN_VARIANTS;
+  size?: BTN_SIZES;
+  uppercase?: boolean;
+  children?: ReactNode;
+  type?: BTN_TYPES;
+  disabled?: boolean;
+  ariaLabel?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  icon?: string;
+  external?: boolean;
+  iconFirst?: boolean;
+  raised?: boolean;
+  outline?: boolean;
+  wide?: boolean;
+  rounded?: boolean;
+  id?: string;
+  testID?: string;
+  className?: string;
+  isLoading?: boolean;
+  iconOnly?: boolean;
+  offsetFont?: boolean;
+}

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ButtonGroup from '.';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'MOLECULES/ButtonGroup',
+  component: ButtonGroup,
+};
+
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const Default: Story = {
+  args: {
+    buttonData: [
+      {
+        id: 'button1',
+        variant: BTN_VARIANTS.PRIMARY,
+        children: 'Button 1',
+      },
+      {
+        id: 'button2',
+        variant: BTN_VARIANTS.PRIMARY,
+        children: 'Button 2',
+      },
+      {
+        id: 'button3',
+        variant: BTN_VARIANTS.PRIMARY,
+        children: 'Button 3',
+      },
+    ],
+  },
+};
+
+export const SecondaryButtons: Story = {
+  args: {
+    buttonData: [
+      {
+        id: 'button1',
+        variant: BTN_VARIANTS.SECONDARY,
+        children: 'Button Small',
+        size: BTN_SIZES.SMALL,
+      },
+      {
+        id: 'button2',
+        variant: BTN_VARIANTS.SECONDARY,
+        children: 'Button 2',
+        size: BTN_SIZES.SMALL,
+      },
+      {
+        id: 'button3',
+        variant: BTN_VARIANTS.SECONDARY,
+        children: 'Button 3',
+        size: BTN_SIZES.SMALL,
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './ButtonGroup.types';
+import Button from '../Button/Button';
+
+const ButtonGroup = ({ testID, buttonData }: Props) => {
+  return (
+    <div data-testid={testID || 'ButtonGroup'} className="inline-flex rounded" role="group">
+      {buttonData?.map((data, index) => {
+        const isNotFirstOrLast = index > 0 && index < buttonData.length - 1;
+        const isFirst = index === 0;
+        const isLast = index === buttonData.length - 1;
+        const buttonClasses = cx(
+          { 'rounded-none': isNotFirstOrLast },
+          {
+            'rounded-r': isFirst,
+            'rounded-l': isLast,
+          },
+        );
+        return (
+          <div key={data.id}>
+            <Button {...data} className={buttonClasses}>
+              {data.children}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;
+export type { Props };

package/src/components/ButtonGroup/ButtonGroup.types.ts

@@ -0,0 +1,5 @@
+import { Props as ButtonProps } from '../Button/Button.types';
+export interface Props {
+  testID?: string;
+  buttonData: ButtonProps[];
+}

package/src/components/ButtonGroup/index.ts

@@ -0,0 +1 @@
+export { default } from './ButtonGroup';

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState } from 'react';
+import Calendar from '.';
+import { addDays, subDays } from 'date-fns';
+
+const meta: Meta<typeof Calendar> = {
+  title: 'ATOMS/Calendar',
+  component: Calendar,
+};
+
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(new Date());
+    
+    return (
+      <Calendar
+        selected={selected}
+        onSelect={setSelected}
+      />
+    );
+  },
+};
+
+export const WithHighlightedDates: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(new Date());
+    const today = new Date();
+    
+    // Simulate dates with classes
+    const datesWithClasses = [
+      today,
+      addDays(today, 1),
+      addDays(today, 2),
+      addDays(today, 5),
+      subDays(today, 2),
+      subDays(today, 5),
+    ];
+    
+    return (
+      <div className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">
+            Calendar with Classes
+          </h3>
+          <p className="text-sm text-gray-600 mb-4">
+            Highlighted dates have scheduled classes
+          </p>
+        </div>
+        <Calendar
+          selected={selected}
+          onSelect={setSelected}
+          datesWithContent={datesWithClasses}
+        />
+        {selected && (
+          <div className="mt-4 p-4 bg-grey-100 dark:bg-grey-800 rounded">
+            <p className="text-sm">
+              Selected: {selected.toLocaleDateString()}
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithDisabledDates: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(new Date());
+    const today = new Date();
+    
+    return (
+      <Calendar
+        selected={selected}
+        onSelect={setSelected}
+        disabled={[
+          { before: today },
+          { dayOfWeek: [0, 6] }, // Disable weekends
+        ]}
+      />
+    );
+  },
+};
+
+export const MultipleMonths: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Date | undefined>(new Date());
+    
+    return (
+      <Calendar
+        selected={selected}
+        onSelect={setSelected}
+        numberOfMonths={2}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { twMerge } from 'tailwind-merge';
+import { CalendarProps } from './Calendar.types';
+import Icon from '../Icon';
+
+const Calendar = ({
+  testID,
+  className,
+  classNames,
+  selected,
+  onSelect,
+  datesWithContent = [],
+  disabled,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) => {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <div data-testid={testID || 'Calendar'} className="flex justify-center">
+      <DayPicker
+        mode="single"
+        selected={selected}
+        onSelect={onSelect}
+        disabled={disabled}
+        showOutsideDays={showOutsideDays}
+        modifiers={{
+          hasContent: datesWithContent,
+        }}
+        modifiersClassNames={{
+          hasContent: 'has-content-date',
+        }}
+        className={twMerge('p-3 w-fit', className)}
+        classNames={{
+          root: twMerge('w-fit', defaultClassNames.root),
+          months: twMerge('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+          month: twMerge('flex w-full flex-col gap-4', defaultClassNames.month),
+          nav: twMerge(
+            'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
+            defaultClassNames.nav,
+          ),
+          button_previous: twMerge(
+            'inline-flex items-center justify-center rounded-md h-9 w-9 bg-transparent p-0 opacity-50 hover:opacity-100 transition-opacity',
+            defaultClassNames.button_previous,
+          ),
+          button_next: twMerge(
+            'inline-flex items-center justify-center rounded-md h-9 w-9 bg-transparent p-0 opacity-50 hover:opacity-100 transition-opacity',
+            defaultClassNames.button_next,
+          ),
+          month_caption: twMerge('flex h-9 w-full items-center justify-center px-9', defaultClassNames.month_caption),
+          caption_label: twMerge('select-none font-medium text-sm', defaultClassNames.caption_label),
+          weekdays: twMerge('flex', defaultClassNames.weekdays),
+          weekday: twMerge(
+            'text-grey-600 dark:text-grey-400 flex-1 select-none rounded-md text-[0.8rem] font-normal',
+            defaultClassNames.weekday,
+          ),
+          week: twMerge('mt-2 flex w-full', defaultClassNames.week),
+          day: twMerge(
+            defaultClassNames.day,
+            'relative aspect-square h-full w-full select-none p-0 text-center [&[data-selected="true"]>button]:border-grey-800',
+          ),
+          day_button: twMerge(
+            defaultClassNames.day_button,
+            'h-9 w-9 p-0 font-normal inline-flex items-center justify-center rounded-md text-body-text dark:text-body-text-dark',
+            'hover:bg-grey-100 dark:hover:bg-grey-800 hover:text-body-text dark:hover:text-body-text-dark',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+            'disabled:pointer-events-none disabled:opacity-50',
+            'data-[today=true]:bg-grey-100 data-[today=true]:dark:bg-grey-800',
+          ),
+          outside: twMerge('text-grey-400 dark:text-grey-600 opacity-50', defaultClassNames.outside),
+          disabled: twMerge('text-grey-400 dark:text-grey-600 opacity-50', defaultClassNames.disabled),
+          hidden: twMerge('invisible', defaultClassNames.hidden),
+          ...classNames,
+        }}
+        components={{
+          Chevron: ({ orientation }: { orientation?: 'up' | 'down' | 'left' | 'right' }) => (
+            <Icon name={orientation === 'left' ? 'mdi:chevron-left' : 'mdi:chevron-right'} className="h-4 w-4" />
+          ),
+        }}
+        {...props}
+      />
+    </div>
+  );
+};
+
+Calendar.displayName = 'Calendar';
+
+export default Calendar;
+export type { CalendarProps };

package/src/components/Calendar/Calendar.types.ts

@@ -0,0 +1,10 @@
+import { DayPickerProps, Matcher } from 'react-day-picker';
+
+export interface CalendarProps extends Omit<DayPickerProps, 'mode'> {
+  testID?: string;
+  className?: string;
+  selected?: Date;
+  onSelect?: (date: Date | undefined) => void;
+  datesWithContent?: Date[];
+  disabled?: Matcher | Matcher[];
+}

package/src/components/Calendar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Calendar';
+export type { CalendarProps } from './Calendar.types';