@4alldigital/foundation-ui--core 3.0.0

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useState } from 'react';
+import Collapsible from '.';
+import Icon from '../Icon';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Copy from '../Copy';
+
+const meta: Meta<typeof Collapsible.Root> = {
+  title: 'ATOMS/Collapsible',
+  component: Collapsible.Root,
+};
+
+type Story = StoryObj<typeof Collapsible.Root>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible.Root>
+      <Collapsible.Trigger>
+        <div className="flex items-center justify-between w-full">
+          <Heading tag={HEADING_TAGS.H4} flush>
+            Click to expand
+          </Heading>
+          <Icon name="mdi:chevron-down" />
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div className="p-4">
+          <Copy>
+            This is the collapsible content. It can contain any React components or HTML elements.
+          </Copy>
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setOpen(!open)}
+          className="px-4 py-2 bg-primary text-white rounded">
+          {open ? 'Close' : 'Open'} from external control
+        </button>
+        <Collapsible.Root open={open} onOpenChange={setOpen}>
+          <Collapsible.Trigger>
+            <div className="flex items-center justify-between w-full">
+              <Heading tag={HEADING_TAGS.H4} flush>
+                Controlled Collapsible
+              </Heading>
+              <Icon name={open ? 'mdi:chevron-up' : 'mdi:chevron-down'} />
+            </div>
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div className="p-4">
+              <Copy>
+                This collapsible is controlled by external state. Try using the button above to toggle it.
+              </Copy>
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      </div>
+    );
+  },
+};
+
+export const WithCustomStyling: Story = {
+  render: () => (
+    <Collapsible.Root className="border-2 border-primary rounded-lg overflow-hidden">
+      <Collapsible.Trigger className="w-full bg-primary-lighter hover:bg-primary p-4">
+        <div className="flex items-center justify-between">
+          <Heading tag={HEADING_TAGS.H4} flush className="text-white">
+            Custom Styled Collapsible
+          </Heading>
+          <Icon name="mdi:chevron-down" className="text-white" />
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Content className="bg-grey-50 dark:bg-grey-900">
+        <div className="p-4">
+          <Copy>
+            This collapsible demonstrates custom styling applied via className props.
+          </Copy>
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="space-y-2">
+      {['First', 'Second', 'Third'].map((item) => (
+        <Collapsible.Root key={item}>
+          <Collapsible.Trigger>
+            <div className="flex items-center justify-between w-full">
+              <Heading tag={HEADING_TAGS.H5} flush>
+                {item} Item
+              </Heading>
+              <Icon name="mdi:chevron-down" />
+            </div>
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div className="p-4">
+              <Copy>Content for {item.toLowerCase()} collapsible item.</Copy>
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      ))}
+    </div>
+  ),
+};
+
+export const DefaultOpen: Story = {
+  render: () => (
+    <Collapsible.Root defaultOpen>
+      <Collapsible.Trigger>
+        <div className="flex items-center justify-between w-full">
+          <Heading tag={HEADING_TAGS.H4} flush>
+            Open by default
+          </Heading>
+          <Icon name="mdi:chevron-down" />
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <div className="p-4">
+          <Copy>
+            This collapsible is open by default using the `defaultOpen` prop.
+          </Copy>
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  ),
+};
+
+export default meta;

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,75 @@
+import { forwardRef } from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
+import { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleContentProps } from './Collapsible.types';
+
+const CollapsibleRoot = forwardRef<HTMLDivElement, CollapsibleRootProps>(
+  ({ className, testID, children, ...props }, ref) => {
+    return (
+      <CollapsiblePrimitive.Root
+        ref={ref}
+        data-testid={testID || 'Collapsible'}
+        className={twMerge(cx('collapsible-root', className))}
+        {...props}>
+        {children}
+      </CollapsiblePrimitive.Root>
+    );
+  },
+);
+
+CollapsibleRoot.displayName = 'CollapsibleRoot';
+
+const CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <CollapsiblePrimitive.Trigger
+        ref={ref}
+        className={twMerge(
+          cx(
+            !className && 'collapsible-trigger',
+            'transition duration-500 ease-in-out',
+            className,
+          ),
+        )}
+        {...props}>
+        {children}
+      </CollapsiblePrimitive.Trigger>
+    );
+  },
+);
+
+CollapsibleTrigger.displayName = 'CollapsibleTrigger';
+
+const CollapsibleContent = forwardRef<HTMLDivElement, CollapsibleContentProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <CollapsiblePrimitive.Content
+        ref={ref}
+        className={twMerge(
+          cx(
+            'collapsible-content',
+            'transition-all duration-500 ease-in-out',
+            'data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down',
+            'overflow-hidden',
+            className,
+          ),
+        )}
+        {...props}>
+        {children}
+      </CollapsiblePrimitive.Content>
+    );
+  },
+);
+
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+const Collapsible = {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent,
+};
+
+export default Collapsible;
+export { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent };
+export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleContentProps };

package/src/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,14 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+export interface CollapsibleRootProps extends CollapsiblePrimitive.CollapsibleProps {
+  testID?: string;
+  className?: string;
+}
+
+export interface CollapsibleTriggerProps extends CollapsiblePrimitive.CollapsibleTriggerProps {
+  className?: string;
+}
+
+export interface CollapsibleContentProps extends CollapsiblePrimitive.CollapsibleContentProps {
+  className?: string;
+}

package/src/components/Collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Collapsible';
+export { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+export type { CollapsibleRootProps, CollapsibleTriggerProps, CollapsibleContentProps } from './Collapsible.types';

package/src/components/Container/Container.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Container from '.';
+
+const meta: Meta<typeof Container> = {
+  title: 'LAYOUTS/Container',
+  component: Container,
+};
+
+type Story = StoryObj<typeof Container>;
+
+export const Default: Story = {};
+
+Default.args = {
+  children: <div>Container</div>,
+};
+
+export default meta;

package/src/components/Container/Container.tsx

@@ -0,0 +1,51 @@
+import cx from 'classnames';
+import { CONTAINER_DIRECTION, Props } from './Container.types';
+import { twMerge } from 'tailwind-merge';
+
+const Container = ({
+  children,
+  className,
+  spacing,
+  padded,
+  isNarrow,
+  isCentered,
+  isFlush,
+  direction = CONTAINER_DIRECTION.COLUMN,
+}: Props) => {
+  const classes = twMerge(
+    cx(
+      'container relative mx-auto my-0',
+      { 'px-2 md:px-4 lg:px-4': padded },
+      { 'py-40': spacing === 'feature' },
+      { 'py-24': spacing === 'component' },
+      { 'py-16': spacing === 'module' },
+      { 'py-10': spacing === 'element' },
+      { 'py-4': spacing === 'atom' },
+      { 'py-0': spacing === 'none' },
+      { 'max-w-3xl': isNarrow },
+      { 'flex items-center justify-center flex-col flex-1': isCentered },
+      { 'px-0 max-w-full mx-0': isFlush },
+      { 'flex flex-col': direction === CONTAINER_DIRECTION.COLUMN },
+      { 'flex-row': direction === CONTAINER_DIRECTION.ROW },
+    ),
+  );
+
+  const contentClasses = cx(
+    'w-full h-full',
+    // {
+    //   'w-full': !isCentered,
+    // },
+    className,
+  );
+
+  return (
+    <div data-testid="Container" className={classes}>
+      <div className={contentClasses}>{children}</div>
+    </div>
+  );
+};
+
+Container.displayName = 'Container';
+
+export default Container;
+export type { Props };

package/src/components/Container/Container.types.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+export enum CONTAINER_DIRECTION {
+  ROW = 'row',
+  COLUMN = 'column',
+}
+
+export interface Props {
+  children: ReactNode;
+  spacing?: 'feature' | 'component' | 'module' | 'element' | 'atom' | 'none';
+  padded?: boolean;
+  isNarrow?: boolean;
+  isCentered?: boolean;
+  isFlush?: boolean;
+  direction?: CONTAINER_DIRECTION;
+  className?: string;
+}

package/src/components/Container/index.ts

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

package/src/components/ContentPageLayout/ContentPageLayout.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ContentPageLayout from '.';
+
+const meta: Meta<typeof ContentPageLayout> = {
+  title: 'LAYOUTS/ContentPageLayout',
+  component: ContentPageLayout,
+};
+
+type Story = StoryObj<typeof ContentPageLayout>;
+
+export const Default: Story = {};
+
+Default.args = {
+  children: <div>ContentPageLayout</div>,
+};
+
+export default meta;

package/src/components/ContentPageLayout/ContentPageLayout.tsx

@@ -0,0 +1,38 @@
+import cx from 'classnames';
+import { Props, CPL_SPACING } from './ContentPageLayout.types';
+
+const ContentPageLayout = ({
+  spacing = CPL_SPACING.DEFAULT,
+  children,
+  narrow,
+  flush,
+  className,
+}: Props) => {
+  const classes = cx(
+    'flex',
+    'flex-col',
+    'flex-1',
+    'relative',
+    { 'py-40': spacing === 'feature' },
+    { 'py-24': spacing === 'component' },
+    { 'py-16': spacing === 'module' },
+    { 'py-10': spacing === 'element' },
+    { 'py-8': spacing === 'default' },
+    { 'py-4': spacing === 'atom' },
+    { 'py-0': spacing === 'none' },
+    { 'max-w-5xl': narrow },
+    { 'p-0': flush },
+    className,
+  );
+
+  return (
+    <div data-testid="ContentPageLayout" className={classes}>
+      {children}
+    </div>
+  );
+};
+
+ContentPageLayout.displayName = 'ContentPageLayout';
+
+export default ContentPageLayout;
+export type { Props };

package/src/components/ContentPageLayout/ContentPageLayout.types.ts

@@ -0,0 +1,17 @@
+export enum CPL_SPACING {
+  NONE = 'none',
+  ATOM = 'atom',
+  DEFAULT = 'default',
+  ELEMENT = 'element',
+  COMPONENT = 'component',
+  MODULE = 'module',
+  FEATURE = 'feature',
+}
+
+export interface Props {
+  children: React.ReactNode;
+  narrow?: boolean;
+  flush?: boolean;
+  spacing?: CPL_SPACING;
+  className?: string;
+}

package/src/components/ContentPageLayout/index.ts

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

package/src/components/ContentRowsLayout/ContentRowsLayout.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ContentRowsLayout from '.';
+import { CRL_SIZE } from './ContentRowsLayout.types';
+
+const meta: Meta<typeof ContentRowsLayout> = {
+  title: 'LAYOUTS/ContentRowsLayout',
+  component: ContentRowsLayout,
+};
+
+type Story = StoryObj<typeof ContentRowsLayout>;
+
+export const Default: Story = {};
+
+Default.args = {
+  size: CRL_SIZE.DEFAULT,
+  children: <>ContentRowsLayout</>,
+};
+
+export default meta;

package/src/components/ContentRowsLayout/ContentRowsLayout.tsx

@@ -0,0 +1,30 @@
+import cx from 'classnames';
+import { Props, CRL_SIZE } from './ContentRowsLayout.types';
+
+const ContentRowsLayout = ({ className, children, size = CRL_SIZE.DEFAULT }: Props) => {
+  const classes = cx(
+    'grid',
+    'auto-rows-min',
+    'grid-cols-1',
+    'gap-x-4',
+    { 'gap-y-0 mb-0': size === 'none' },
+    { 'gap-y-2 mb-2': size === 'atom' },
+    { 'gap-y-4 mb-4': size === 'default' },
+    { 'gap-y-8 mb-8': size === 'element' },
+    { 'gap-y-16 mb-16': size === 'module' },
+    { 'gap-y-24 mb-24': size === 'component' },
+    { 'gap-y-40 mb-40': size === 'feature' },
+    className,
+  );
+
+  return (
+    <div data-testid="ContentRowsLayout" className={classes}>
+      {children}
+    </div>
+  );
+};
+
+ContentRowsLayout.displayName = 'ContentRowsLayout';
+
+export default ContentRowsLayout;
+export type { Props };

package/src/components/ContentRowsLayout/ContentRowsLayout.types.ts

@@ -0,0 +1,15 @@
+export enum CRL_SIZE {
+  NONE = 'none',
+  ATOM = 'atom',
+  DEFAULT = 'default',
+  ELEMENT = 'element',
+  COMPONENT = 'component',
+  MODULE = 'module',
+  FEATURE = 'feature',
+}
+
+export interface Props {
+  className?: string;
+  children: React.ReactNode;
+  size?: CRL_SIZE;
+}

package/src/components/ContentRowsLayout/index.ts

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

package/src/components/Copy/Copy.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Copy from '.';
+import { COPY_ALIGN, COPY_TAG } from './Copy.types';
+
+const meta: Meta<typeof Copy> = {
+  title: 'ATOMS/Copy',
+  component: Copy,
+};
+
+type Story = StoryObj<typeof Copy>;
+
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <>
+        <Copy {...args} />
+      </>
+    );
+  },
+};
+Default.args = {
+  as: COPY_TAG.P,
+  align: COPY_ALIGN.LEFT,
+  children:
+    'Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.',
+};
+
+export default meta;

package/src/components/Copy/Copy.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import { twMerge } from 'tailwind-merge';
+import { Props, COPY_TAG } from './Copy.types';
+
+const Copy = ({
+  children,
+  as: Tag = COPY_TAG.P,
+  size,
+  bold,
+  align,
+  transform,
+  underlined,
+  id,
+  className,
+  testID,
+  // inverted = false,
+  // maxLength = false,
+}: Props) => {
+  const classes = cx(
+    { [`text-${align}`]: align },
+    { 'font-bold': bold },
+    { 'text-base mb-3 mt-0': Tag === 'p' },
+    { 'text-sm': Tag === 'small' },
+    { 'text-sm': size === 'small' },
+    { 'text-base': size === 'medium' },
+    { 'text-lg': size === 'large' },
+    { 'text-2xl': size === 'intro' },
+    { 'underline': underlined },
+    transform,
+    className,
+  );
+
+  return (
+    <Tag data-testid={testID || id || 'Copy'} className={twMerge(classes)}>
+      {children}
+    </Tag>
+  );
+};
+
+Copy.displayName = 'Copy';
+
+export default Copy;
+export type { Props };

package/src/components/Copy/Copy.types.tsx

@@ -0,0 +1,53 @@
+export enum COPY_ALIGN {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+  JUSTIFY = 'justify',
+  NOWRAP = 'nowrap',
+}
+
+export enum COPY_TRANSFORM {
+  LOWERCASE = 'lowercase',
+  UPPERCASE = 'uppercase',
+  CAPITALIZE = 'capitalize',
+}
+
+export enum COPY_CONTEXTUAL {
+  INVERTED = 'inverted',
+  MUTED = 'muted',
+}
+
+export enum COPY_SIZE {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  INTRO = 'intro',
+}
+
+export enum COPY_TAG {
+  P = 'p',
+  SPAN = 'span',
+  DIV = 'div',
+  SMALL = 'small',
+}
+
+export interface Props {
+  children:
+    | string
+    | Array<React.ReactNode>
+    | React.ReactNode
+    | string
+    | undefined;
+  align?: COPY_ALIGN;
+  size?: COPY_SIZE;
+  bold?: boolean;
+  underlined?: boolean;
+  transform?: COPY_TRANSFORM;
+  contextual?: COPY_CONTEXTUAL;
+  inverted?: boolean;
+  maxLength?: boolean;
+  as?: COPY_TAG;
+  id?: string;
+  testID?: string;
+  className?: string;
+}

package/src/components/Copy/index.tsx

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

package/src/components/DisplayHeading/DisplayHeading.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import DisplayHeading from '.';
+
+const meta: Meta<typeof DisplayHeading> = {
+  title: 'MOLECULES/DisplayHeading',
+  component: DisplayHeading,
+};
+
+type Story = StoryObj<typeof DisplayHeading>;
+
+export const Default: Story = {
+  args: {
+    text: 'Display Heading',
+  },
+};
+
+export default meta;

package/src/components/DisplayHeading/DisplayHeading.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './DisplayHeading.types';
+import Heading from '../Heading';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+
+const DisplayHeading = ({ text, flush, tag = HEADING_TAGS.H1, colorOverride }: Props) => {
+  // split the text into an array of words
+  const arrayOfWords = text?.split(' ');
+  return (
+    <div data-testid="DisplayHeading" className={cx('relative display-heading-wrapper', colorOverride)}>
+      <Heading tag={tag} flush={flush} className="font-display font-extrabold">
+        {arrayOfWords.map((word, index) => {
+          // if last word.
+          const isLastWord = arrayOfWords.length > 1 && index === arrayOfWords.length - 1;
+          const dhKey = `${word}-${index}`;
+          return (
+            <span key={dhKey}>
+              <span
+                className={cx({ 'display-heading relative': !isLastWord }, { 'inline-block relative': isLastWord })}>
+                <>
+                  {isLastWord && (
+                    <>
+                      <div className="display-heading--emphasis z-0" />
+                      <span className={cx('display-heading--lastword relative', colorOverride)}>{word}</span>
+                    </>
+                  )}
+                  {!isLastWord && <span className="relative z-10">{word}</span>}
+                </>
+              </span>
+              {!isLastWord && ' '}
+            </span>
+          );
+        })}
+      </Heading>
+    </div>
+  );
+};
+
+DisplayHeading.displayName = 'DisplayHeading';
+
+export default DisplayHeading;
+export type { Props };

package/src/components/DisplayHeading/DisplayHeading.types.ts

@@ -0,0 +1,8 @@
+import { HEADING_TAGS } from "../Heading/Heading.types";
+
+export interface Props {
+  text: string;
+  tag?: HEADING_TAGS;
+  flush?: boolean;
+  colorOverride?: string;
+}

package/src/components/DisplayHeading/index.ts

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