@4alldigital/foundation-ui--core 3.0.0

package/src/components/Image/Image.tsx

@@ -0,0 +1,71 @@
+import cx from 'classnames';
+import { Props } from './Image.types';
+import { createElement } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+const Image = ({
+  src,
+  alt,
+  title,
+  caption,
+  figure = false,
+  onLoad,
+  id,
+  className,
+  sizes = '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw',
+  testID,
+  ...rest
+}: Props) => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const nextImage = require('next/image').default;
+    if (!nextImage) throw new Error('Next.js Image not found');
+
+    const hasFill = !rest.width ? true : false;
+    const useSizes = hasFill ? { sizes } : {};
+    return createElement(nextImage, {
+      src: typeof src === 'string' ? src : src,
+      alt,
+      title,
+      fill: hasFill,
+      onLoad,
+      className,
+      ...useSizes,
+      ...rest,
+    });
+  } catch {
+    const figureClasses = cx('m-0');
+    const classes = twMerge(cx('w-full h-full', className));
+
+    /**
+     * Render as a figure.
+     */
+    if (figure || caption) {
+      return (
+        <figure data-testid={testID || id || 'Image'} className={figureClasses}>
+          <img onLoad={onLoad} src={src} alt={alt} title={title} className={classes} />
+          {caption && <figcaption>{caption}</figcaption>}
+        </figure>
+      );
+    }
+
+    /**
+     * Default render as an image.
+     */
+    return (
+      <img
+        data-testid={testID || id || 'Image'}
+        onLoad={onLoad}
+        src={src}
+        alt={alt}
+        title={title}
+        className={classes}
+      />
+    );
+  }
+};
+
+Image.displayName = 'Image';
+
+export default Image;
+export type { Props };

package/src/components/Image/Image.types.ts

@@ -0,0 +1,20 @@
+import { ImageProps } from 'next/image';
+
+export interface Props extends ImageProps {
+  src: string;
+  alt: string;
+  title?: string;
+  onLoad?: () => void;
+  /** Image caption, will display as a `figure` if set. */
+  caption?: string;
+  /** Display within a `figure`. */
+  figure?: boolean;
+  /** The image will take up the entire width of the container. */
+  fluid?: boolean;
+  /** The next/image sizes attribute. */
+  sizes?: string;
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  id?: string;
+  testID?: string;
+  className?: string;
+}

package/src/components/Image/index.ts

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

package/src/components/Label/Label.stories.tsx

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

package/src/components/Label/Label.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './Label.types';
+import { twMerge } from 'tailwind-merge';
+
+const Label = ({ children, id, transform, className }: Props) => {
+  return (
+    <label data-testid="Label" className={twMerge(cx('label mb-2 text-body-text dark:text-body-text-dark', transform, className))} htmlFor={id}>
+      {children}
+    </label>
+  );
+};
+
+Label.displayName = 'Label';
+
+export default Label;
+export type { Props };

package/src/components/Label/Label.types.ts

@@ -0,0 +1,9 @@
+import { COPY_TRANSFORM } from "../Copy/Copy.types";
+
+export interface Props {
+  children: React.ReactNode;
+  id?: string;
+  className?: string;
+  transform?: COPY_TRANSFORM;
+}
+

package/src/components/Label/index.ts

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

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Link from '.';
+
+const meta: Meta<typeof Link> = {
+  title: 'ATOMS/Link',
+  component: Link,
+};
+
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {
+  args: {
+    href: 'https://www.google.com',
+    children: 'Example Link text',
+  },
+};
+
+export const External: Story = {
+  args: {
+    href: 'https://www.google.com',
+    children: 'Example Link text',
+  },
+};
+
+export default meta;

package/src/components/Link/Link.tsx

@@ -0,0 +1,85 @@
+import cx from 'classnames';
+import { Props } from './Link.types';
+import React from 'react';
+import Icon from '../Icon';
+
+const Link = ({
+  href,
+  children,
+  onClick = () => {},
+  history,
+  target,
+  id,
+  testID,
+  className,
+  prefetch,
+  hideExternalIcon = false,
+}: Props) => {
+  // const linkClasses = cx('link cursor-pointer no-underline text-body-text dark:text-body-text-dark', className);
+  const linkClasses = cx('link cursor-pointer no-underline', className);
+
+  // Check if link is external
+  const isExternal = !hideExternalIcon && href && href.startsWith('http');
+  if (isExternal) {
+    return (
+      <span className="inline-flex flex-row gap-2 items-center">
+        <a
+          data-testid={testID || id || 'Link'}
+          className={cx(linkClasses)}
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer">
+          {children}
+        </a>
+        <Icon name="mdi:external-link" className="inline-block w-4 h-4 ml-1 mb-0" />
+      </span>
+    );
+  }
+
+  // Allow for non-next.js Application usage.
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const nextLink = require('next/link').default;
+    if (!nextLink) throw new Error('Next.js Link not found');
+
+    return React.createElement(
+      nextLink,
+      {
+        href: href || '#',
+        onClick: onClick,
+        'data-testid': testID || id || 'Link',
+        className: linkClasses,
+        target: target || '_self',
+        prefetch: prefetch || false,
+      },
+      children,
+    );
+  } catch {
+    const handleClick = (event: React.MouseEvent): void => {
+      if (onClick) {
+        onClick(event);
+        return;
+      }
+
+      if (event.defaultPrevented === true) {
+        return;
+      }
+
+      if (history && href) {
+        event.preventDefault();
+        history.push(href);
+      }
+    };
+
+    return (
+      <a data-testid={testID || id || 'Link'} className={linkClasses} href={href} onClick={handleClick} target={target}>
+        {children}
+      </a>
+    );
+  }
+};
+
+Link.displayName = 'Link';
+
+export default Link;
+export type { Props };

package/src/components/Link/Link.types.ts

@@ -0,0 +1,14 @@
+import { History } from 'history';
+
+export interface Props {
+  href?: string;
+  children: React.ReactNode;
+  history?: History;
+  target?: '_self' | '_blank' | '_parent' | '_top';
+  onClick?: React.MouseEventHandler;
+  id?: string;
+  testID?: string;
+  className?: string;
+  prefetch?: boolean;
+  hideExternalIcon?: boolean;
+}

package/src/components/Link/index.ts

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

package/src/components/List/List.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import List from '.';
+import ListItem from '../ListItem';
+import { ListTag } from './List.types';
+
+const meta: Meta<typeof List> = {
+  title: 'ATOMS/List',
+  component: List,
+};
+
+type Story = StoryObj<typeof List>;
+
+export const Default: Story = {
+  render: (args) => {
+    // const TYPE = select(listLabel, listOptions, listDefault);
+    const LI1 = args.as === ListTag.DL ? ListTag.DT : ListTag.LI;
+    const LI2 = args.as === ListTag.DL ? ListTag.DD : ListTag.LI;
+
+    return (
+      <List {...args}>
+        <ListItem as={LI1}>{args.as}</ListItem>
+        <ListItem as={LI2}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</ListItem>
+        <ListItem as={LI1}>Lorem ipsum dolor sit amet.</ListItem>
+        <ListItem as={LI2}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</ListItem>
+        <ListItem as={LI1}>Consetetur sadipscing elitr.</ListItem>
+        <ListItem as={LI2}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</ListItem>
+        <ListItem as={LI1}>Sit amet, consetetur sadipscing.</ListItem>
+        <ListItem as={LI2}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</ListItem>
+      </List>
+    );
+  },
+};
+Default.args = {
+  as: ListTag.DL,
+  variants: [],
+};
+
+export default meta;

package/src/components/List/List.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import { ListTag, Props } from './List.types';
+
+const List = ({ variants, children, as = ListTag.UL, id, testID, className }: Props) => {
+  const modifiers = variants ? variants.map((el) => `list--${el}`) : null;
+  const Tag = as;
+  return (
+    <Tag data-testid={testID || id || 'List'} className={cx(modifiers, className)}>
+      {children}
+    </Tag>
+  );
+};
+
+List.displayName = 'List';
+
+export default List;
+export type { Props };

package/src/components/List/List.types.ts

@@ -0,0 +1,27 @@
+export type VariantsTypes = 'unstyled' | 'inline' | 'small' | 'large';
+
+export enum Variants {
+  UNSTYLED = 'unstyled',
+  INLINE = 'inline',
+  SMALL = 'small',
+  LARGE = 'large',
+}
+
+export enum ListTag {
+  OL = 'ol',
+  UL = 'ul',
+  DL = 'dl',
+  DIV = 'div',
+  DT = 'dt',
+  DD = 'dd',
+  LI = 'li',
+}
+
+export type Props = {
+  variants?: Array<Variants>;
+  children: string | React.ReactNode | Array<React.ReactNode>;
+  as?: ListTag;
+  id?: string;
+  testID?: string;
+  className?: string;
+};

package/src/components/List/index.ts

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

package/src/components/ListItem/ListItem.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ListItem from '.';
+import Container from '../Container';
+import List from '../List';
+
+const meta: Meta<typeof ListItem> = {
+  title: 'MOLECULES/ListItem',
+  component: ListItem,
+};
+
+type Story = StoryObj<typeof ListItem>;
+
+export const Default: Story = {
+  args: {
+    as: 'div',
+    title: 'List item',
+    onClick: () => console.log('Pressed'),
+  },
+  render: args => (
+    <Container>
+      <ListItem {...args} />
+    </Container>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    as: 'div',
+    title: 'List item',
+    icon: 'account',
+    onClick: () => console.log('Pressed'),
+  },
+  render: args => {
+    return (
+      <Container>
+        <ListItem {...args} />
+      </Container>
+    );
+  },
+};
+
+export const FullList: Story = {
+  args: {
+    as: 'div',
+    title: 'List item',
+    onClick: () => console.log('Pressed'),
+  },
+  render: args => {
+    return (
+      <Container>
+        <List>
+          <ListItem {...args} />
+          <ListItem {...args} />
+          <ListItem {...args} />
+        </List>
+      </Container>
+    );
+  },
+};
+
+export default meta;

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,53 @@
+import cx from 'classnames';
+import { Props } from './ListItem.types';
+import Icon from '../Icon';
+import { HEADING_TAGS } from '../Heading/Heading.types';
+import Heading from '../Heading';
+import Button from '../Button';
+import { BTN_VARIANTS } from '../Button/Button.types';
+
+const ListItem = ({
+  onClick,
+  title,
+  icon,
+  children,
+  as: Tag = 'li',
+  id,
+  testID,
+  className,
+}: Props) => (
+  <Tag data-testid={testID || id || 'ListItem'} className={cx({ 'list-item': Tag !== 'div' }, className)}>
+    {onClick && (
+      <Button variant={BTN_VARIANTS.LINK} onClick={onClick}>
+        <div className="">
+          {icon && (
+            <div>
+              <Icon name={icon} size={24} />
+            </div>
+          )}
+          {title && (
+            <div>
+              <Heading flush tag={HEADING_TAGS.H4} singleLine>
+                {title}
+              </Heading>
+            </div>
+          )}
+          {children && <div>{children}</div>}
+        </div>
+        <div>
+          <Icon name="mdi:chevron-right" size={24} />
+        </div>
+      </Button>
+    )}
+    {!onClick && (
+      <div className="">
+        {children && <div>{children}</div>}
+      </div>
+    )}
+  </Tag>
+);
+
+ListItem.displayName = 'ListItem';
+
+export default ListItem;
+export type { Props };

package/src/components/ListItem/ListItem.types.ts

@@ -0,0 +1,10 @@
+export type Props = {
+  children?: string | Array<React.ReactNode> | React.ReactNode | Array<any> | any;
+  as: 'div' | 'li' | 'dt' | 'dd';
+  id?: string;
+  testID?: string;
+  className?: string;
+  title?: string;
+  icon?: string;
+  onClick?: (arg?: any) => void;
+};

package/src/components/ListItem/index.ts

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

package/src/components/Loader/Loader.stories.tsx

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

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,34 @@
+import { Props } from './Loader.types';
+
+const Loader = ({ color, size = 8, thickness = 4 }: Props) => {
+  const sizeClass = size ? `w-${size} h-${size}` : 'w-8 h-8';
+  return (
+    <div data-testid="Loader" className='flex items-center justify-center'>
+      <div role="status" className='flex items-center'>
+        <svg
+          className={`animate-spin ${sizeClass} fill-current`}
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24">
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke={color || 'currentColor'}
+            strokeWidth={thickness}></circle>
+          <path
+            className="opacity-75"
+            fill={color || 'currentColor'}
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span className="sr-only">Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+Loader.displayName = 'Loader';
+
+export default Loader;
+export type { Props };

package/src/components/Loader/Loader.types.ts

@@ -0,0 +1,5 @@
+export interface Props {
+  color?: string;
+  size?: number;
+  thickness?: number;
+}

package/src/components/Loader/index.ts

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

package/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Logo from '.';
+
+const meta: Meta<typeof Logo> = {
+  title: 'ATOMS/Logo',
+  component: Logo,
+};
+
+type Story = StoryObj<typeof Logo>;
+
+export const Default: Story = {
+  args: {
+    logo: '/assets/nrglogo.svg',
+  },
+};
+
+export default meta;

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './Logo.types';
+import Image from '../Image';
+
+const Logo = ({ testID, logo, className, aspectRatioClass = 'aspect-[1/1]' }: Props) => {
+  return (
+    <div data-testid={testID || 'Logo'} className={cx('relative w-full', aspectRatioClass, className)}>
+      <Image src={logo} alt="logo" fill sizes="(max-width: 600px) 100px, 200px" priority />
+    </div>
+  );
+};
+
+Logo.displayName = 'Logo';
+
+export default Logo;
+export type { Props };

package/src/components/Logo/Logo.types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+  testID?: string;
+  logo: string;
+  aspectRatioClass?: string;
+  className?: string;
+}

package/src/components/Logo/index.ts

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

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Menu from '.';
+
+const meta: Meta<typeof Menu> = {
+  title: 'MOLECULES/Menu',
+  component: Menu,
+};
+
+type Story = StoryObj<typeof Menu>;
+
+export const Default: Story = {
+  args: {
+    title: 'Menu',
+    links: [
+      {
+        id: '1',
+        title: 'Home',
+        url: '/',
+        // icon: 'mdi:home',
+      },
+      {
+        id: '2',
+        title: 'About',
+        url: '/about',
+        // icon: 'mdi:information',
+      },
+      {
+        id: '3',
+        title: 'Contact',
+        url: '/contact',
+        // icon: 'mdi:email',
+      },
+    ],
+  },
+};
+
+export default meta;