@4alldigital/foundation-ui--core 3.0.0

package/src/components/Header/Header.tsx

@@ -0,0 +1,170 @@
+import { useState } from 'react';
+import cx from 'classnames';
+import { Props } from './Header.types';
+import { useAppContext } from '../../context/App';
+import Logo from '../Logo';
+import Button from '../Button';
+import Menu from '../Menu';
+import { BTN_VARIANTS } from '../Button/Button.types';
+// import Copy from '../Copy';
+import Link from '../Link';
+import { useLanguage } from '../../hooks';
+import Container from '../Container';
+import { twMerge } from 'tailwind-merge';
+import Cart from '../Cart';
+// import Avatar from '../Avatar';
+
+const Header = ({
+  testID,
+  // loginCallback,
+  // logoutCallback,
+  // isAuthenticated = false,
+  hideMenu = false,
+  className,
+  // logoOnly,
+  // userPicture,
+}: Props) => {
+  const context = useAppContext();
+  const T = useLanguage();
+
+  const [mobileMenuClass, mobileMenuIcon] = useState('hidden');
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  const toggleMenuClass = () => {
+    if (mobileMenuClass === 'hidden') {
+      mobileMenuIcon('block');
+    } else {
+      mobileMenuIcon('hidden');
+    }
+  };
+
+  const defaultHeaderStyles = 'relative z-10 w-full m-auto py-4 bg-header-bg dark:bg-darkHeaderBackground';
+
+  if (context?.brand?.logoOnly) {
+    return (
+      <header data-testid={testID || '"Header"'} className={twMerge(cx(defaultHeaderStyles, className))}>
+        <div className="relative w-full flex flex-col md:flex-row justify-center items-center">
+          {context?.brand?.logo && (
+            <div className={cx('relative w-16 md:w-24', context?.brand?.logoAspectRatio)}>
+              <Link href="/">
+                <Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
+              </Link>
+            </div>
+          )}
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header
+      data-testid={testID || '"Header"'}
+      className={twMerge(cx(defaultHeaderStyles, ' text-header-text dark:text-darkHeaderText', className))}>
+      <Container padded>
+        <div className="relative w-full flex">
+          {context?.brand?.logo && (
+            <div className={cx('relative h-12', context?.brand?.logoAspectRatio)}>
+              <Link href="/">
+                <Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
+              </Link>
+            </div>
+          )}
+          <div className="flex-1 hidden md:flex items-center justify-center">
+            {context?.app?.isAuthenticated && context?.header?.authNav && (
+              <Menu links={context.header.authNav} separators />
+            )}
+            {!context?.app?.isAuthenticated && context?.header?.anonNav && (
+              <Menu links={context.header.anonNav} separators />
+            )}
+          </div>
+          {/* <!-- tablet/desktop --> */}
+          <div className="hidden md:flex items-center justify-center">
+            {!context?.app?.isAuthenticated && context?.app?.loginCallback && (
+              <div className="w-32 flex justify-end">
+                <Button onClick={context?.app?.loginCallback}>{T.UI.LOGIN}</Button>
+              </div>
+            )}
+            {!context?.app?.isAuthenticated && !context?.app?.loginCallback && (
+              <div className="w-32 flex justify-end" />
+            )}
+            {context?.app?.isAuthenticated && (
+              <div className="relative">
+                <Button
+                  onClick={() => setShowDropdown(!showDropdown)}
+                  icon={!showDropdown ? 'mdi:user' : 'mdi:user-outline'}
+                />
+                <div
+                  onClick={() => setShowDropdown(false)}
+                  className={cx(
+                    'absolute bg-body-bg dark:bg-body-bg-dark shadow rounded py-2 px-6 right-0 top-12 z-20 text-body-text dark:text-body-text-dark text-right',
+                    { hidden: !showDropdown },
+                  )}>
+                  {context?.header?.profile && <Menu links={context.header.profile} inline={false} />}
+                </div>
+              </div>
+            )}
+            {context?.app?.showCart && <Cart />}
+          </div>
+          {/* <!-- mobile --> */}
+          <div className="flex md:hidden flex-col justify-center flex-1 items-end">
+            <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:menu" onClick={toggleMenuClass} />
+          </div>
+        </div>
+        <div className={cx('navbar-menu relative z-50', mobileMenuClass, { hidden: hideMenu })}>
+          {/* <!-- Mobile Menu --> */}
+          <div className="navbar-backdrop fixed inset-0 bg-black opacity-25"></div>
+          <nav className="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-4 px-4 bg-body-bg dark:bg-body-bg-dark border-r overflow-y-auto">
+            <div className="flex justify-between">
+              <div className="relative w-32">
+                {context?.brand?.logo && (
+                  <div className="relative w-32">
+                    <Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
+                  </div>
+                )}
+              </div>
+              <div>
+                <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:close" onClick={toggleMenuClass} />
+              </div>
+            </div>
+            <div className="flex flex-col flex-1 gap-4">
+              <div className="flex flex-1 justify-center pt-4">
+                {context?.app?.isAuthenticated && context?.header?.authNav && (
+                  <Menu links={context.header.authNav} separators />
+                )}
+                {!context?.app?.isAuthenticated && context?.header?.anonNav && (
+                  <Menu links={context.header.anonNav} separators />
+                )}
+              </div>
+              <div className="flex flex-1 justify-center pt-4">
+                {context?.app?.isAuthenticated && context?.header?.profile && (
+                  <Menu links={context.header.profile} separators />
+                )}
+              </div>
+              {context?.app?.isAuthenticated && (
+                <div className="md:hidden flex justify-center">
+                  <Button onClick={context?.app?.logoutCallback}>{T.UI.LOGOUT}</Button>
+                </div>
+              )}
+              {!context?.app?.isAuthenticated && (
+                <div className="md:hidden flex justify-center">
+                  <Button
+                    onClick={() => {
+                      context?.app?.loginCallback?.();
+                      toggleMenuClass();
+                    }}>
+                    {T.UI.LOGIN}
+                  </Button>
+                </div>
+              )}
+            </div>
+          </nav>
+        </div>
+      </Container>
+    </header>
+  );
+};
+
+Header.displayName = 'Header';
+
+export default Header;
+export type { Props };

package/src/components/Header/Header.types.ts

@@ -0,0 +1,11 @@
+
+export interface Props {
+  testID?: string;
+  loginCallback?: () => void;
+  logoutCallback?: () => void;
+  isAuthenticated?: boolean;
+  hideMenu?: boolean;
+  logoOnly?: boolean;
+  className?: string;
+  userPicture?: string;
+}

package/src/components/Header/index.ts

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

package/src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Heading from '.';
+import { HEADING_TAGS } from './Heading.types';
+
+const meta: Meta<typeof Heading> = {
+  title: 'ATOMS/Heading',
+  component: Heading,
+};
+
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {
+  args: {
+    tag: HEADING_TAGS.H1,
+    children: 'Default Heading',
+  },
+};
+
+
+export const Examples: Story = {
+  args: {
+    bold: false,
+  },
+  render: args => {
+    return (
+      <>
+        <div>
+          <Heading {...args} tag={HEADING_TAGS.H1}>
+            Heading 1
+          </Heading>
+        </div>
+        <div>
+          <Heading {...args} tag={HEADING_TAGS.H2}>
+            Heading 2
+          </Heading>
+        </div>
+        <div>
+          <Heading {...args} tag={HEADING_TAGS.H3}>
+            Heading 3
+          </Heading>
+        </div>
+        <div>
+          <Heading {...args} tag={HEADING_TAGS.H4}>
+            Heading 4
+          </Heading>
+        </div>
+        <div>
+          <Heading {...args} tag={HEADING_TAGS.H5}>
+            Heading 5
+          </Heading>
+        </div>
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,47 @@
+import cx from 'classnames';
+import { HEADING_TAGS, Props } from './Heading.types';
+import { twMerge } from 'tailwind-merge';
+
+const Heading = ({ children, tag = HEADING_TAGS.H2, transform, align, id, testID, flush, className, singleLine, bold = true }: Props) => {
+  const fontSize = () => {
+    switch (tag) {
+      case 'h1':
+        return 'text-3xl md:text-4xl lg:text-5xl';
+      case 'h2':
+        return 'text-3xl md:text-4xl lg:text-4xl';
+      case 'h3':
+        return 'text-xl md:text-2xl lg:text-2xl';
+      case 'h4':
+        return 'text-lg md:text-lg lg:text-xl';
+      case 'h5':
+        return 'text-base md:text-base lg:text-lg';
+      default:
+        return 'text-2xl md:text-2xl lg:text-4xl';
+    }
+  };
+
+  const size = fontSize();
+
+  const Tag = tag;
+  const classes = cx(
+    `m-0 p-0 font-heading ${size}`,
+    { 'font-bold': bold },
+    { [`text-${align}`]: align },
+    { 'mb-2': !flush },
+    { 'm-0': flush },
+    { 'whitespace-nowrap text-ellipsis overflow-hidden': singleLine },
+    transform,
+    className,
+  );
+
+  return (
+    <Tag data-testid={testID || id || 'Heading'} className={twMerge(classes)}>
+      {children}
+    </Tag>
+  );
+};
+
+Heading.displayName = 'Heading';
+
+export default Heading;
+export type { Props };

package/src/components/Heading/Heading.types.ts

@@ -0,0 +1,35 @@
+export enum HEADING_TAGS {
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+}
+
+export enum HEADING_ALIGN {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+  JUSTIFY = 'justify',
+  NOWRAP = 'nowrap',
+}
+
+export enum HEADING_TRANSFORM {
+  LOWERCASE = 'lowercase',
+  UPPERCASE = 'uppercase',
+  CAPITALIZE = 'capitalize',
+  NORMAL_CASE = 'normal-case',
+}
+
+export interface Props {
+  children: string | React.ReactNode;
+  tag?: HEADING_TAGS;
+  align?: HEADING_ALIGN;
+  transform?: HEADING_TRANSFORM;
+  id?: string;
+  testID?: string;
+  flush?: boolean;
+  className?: string;
+  singleLine?: boolean;
+  bold?: boolean;
+}

package/src/components/Heading/index.ts

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

package/src/components/Hero/Hero.stories.tsx

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

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './Hero.types';
+import Container from '../Container';
+
+const Hero = ({ testID, children, withBg = true, inversed = false }: Props) => {
+  return (
+    <div data-testid={testID || 'PanelHero'} className="relative py-8 m-auto w-full flex flex-none flex-nowrap">
+      {withBg && (
+        <div
+          className={cx(
+            'rounded-full blur-[200px] flex flex-none aspect-square absolute w-[700px] opacity-20 bg-gradient-to-r from-primary-700 to-primary-300 z-0',
+            {
+              '-bottom-24 right-0': !inversed,
+              '-top-24 left-0': inversed,
+            },
+          )}
+        />
+      )}
+      <Container>{children}</Container>
+    </div>
+  );
+};
+
+Hero.displayName = 'Hero';
+
+export default Hero;
+export type { Props };

package/src/components/Hero/Hero.types.ts

@@ -0,0 +1,17 @@
+export enum SPACING {
+  NONE = 'py-0',
+  ATOM = 'py-8',
+  DEFAULT = 'py-16',
+  ELEMENT = 'py-24',
+  COMPONENT = 'py-32',
+  MODULE = 'py-40',
+  FEATURE = 'py-64',
+}
+
+export interface Props {
+  testID?: string;
+  children: React.ReactNode;
+  withBg?: boolean;
+  inversed?: boolean;
+  spacing: SPACING;
+}

package/src/components/Hero/index.ts

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

package/src/components/Hr/Hr.stories.tsx

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

package/src/components/Hr/Hr.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import { Props } from './Hr.types';
+
+const Hr = ({ size = 'small' }: Props) => (
+  <hr
+    className={cx('border-0 border-b border-body-text-dark dark:border-body-text-dark', {
+      'mt-4 mb-4': size === 'small',
+      'mt-8 mb-8': size === 'medium',
+      'mt-16 mb-16 ': size === 'large',
+    })}
+  />
+);
+
+Hr.displayName = 'Hr';
+
+export default Hr;

package/src/components/Hr/Hr.types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  size?: 'small' | 'medium' | 'large';
+} 

package/src/components/Hr/index.ts

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

package/src/components/HtmlContent/HtmlContent.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import HtmlContent from '.';
+
+const meta: Meta<typeof HtmlContent> = {
+  title: 'MOLECULES/HtmlContent',
+  component: HtmlContent,
+};
+
+type Story = StoryObj<typeof HtmlContent>;
+
+export const Default: Story = {
+  args: {
+    data: '<p>Some HTML content</p>',
+  },
+};
+
+export const MultipleParagraphs: Story = {
+  args: {
+    data: '<p>Some HTML content</p><div>test</div><p>With multiple paragraphs</p><div>test</div>',
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    data: '<p>Some HTML content with a <a href="https://www.google.com">link</a>. New Content sentence and then <br> some content after a line break </br></p><p>New content in a new para.</p>',
+  },
+};
+
+export default meta;

package/src/components/HtmlContent/HtmlContent.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import cx from 'classnames';
+import parse from 'html-react-parser';
+import { Props } from './HtmlContent.types';
+import { options } from '../../utils/htmlParser';
+
+const HtmlContent = ({ testID, data, align, className }: Props) => {
+  if (!data) {
+    return <></>;
+  }
+
+  return (
+    <span
+      data-testid={testID || '"HtmlContent"'}
+      className={cx(
+        'relative',
+        {
+          'text-right': align === 'right',
+        },
+        {
+          'text-center': align === 'center',
+        },
+        {
+          'text-left': align === 'left',
+        },
+        className,
+      )}>
+      {parse(data, options)}
+    </span>
+  );
+};
+
+HtmlContent.displayName = 'HtmlContent';
+
+export default HtmlContent;
+export type { Props };

package/src/components/HtmlContent/HtmlContent.types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+  testID?: string;
+  data: string;
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+}

package/src/components/HtmlContent/index.ts

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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Icon from '.';
+
+const meta: Meta<typeof Icon> = {
+  title: 'ATOMS/Icon',
+  component: Icon,
+};
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+  args: {
+    name: 'heroicons:backspace', // https://icon-sets.iconify.design
+    size: 24,
+  },
+};
+
+export const Colored: Story = {
+  args: {
+    name: 'mdi:home',
+    size: 24,
+    color: 'red',
+  },
+};
+
+export default meta;

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,24 @@
+import { Icon as IconifyIcon } from '@iconify/react';
+import { Props } from './Icon.types';
+
+/**
+ * Icon component
+ * List of supported icons can be found at https://icon-sets.iconify.design.
+ */
+const Icon = ({ name, size = 24, color, id, className, testID }: Props) => {
+  return (
+    <IconifyIcon
+      data-testid={testID || id || 'Icon'}
+      icon={name}
+      width={size}
+      height={size}
+      color={color || 'currentColor'}
+      className={className}
+    />
+  );
+};
+
+Icon.displayName = 'Icon';
+
+export default Icon;
+export type { Props };

package/src/components/Icon/Icon.types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  name: string;
+  size?: number;
+  color?: string;
+  id?: string;
+  testID?: string;
+  className?: string;
+}

package/src/components/Icon/index.ts

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

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Image from '.';
+
+const meta: Meta<typeof Image> = {
+  title: 'ATOMS/Image',
+  component: Image,
+};
+
+type Story = StoryObj<typeof Image>;
+
+export const Default: Story = {
+  args: {
+    src: 'http://via.placeholder.com/450x200',
+    width: 450,
+    height: 200,
+    alt: 'Placeholder image',
+  },
+};
+
+export const NextExample: Story = {
+  args: {
+    src: 'http://via.placeholder.com/450x400',
+    width: 0,
+    height: 0,
+    fill: true,
+    sizes: '100vh',
+    alt: 'Placeholder image',
+    className: 'object-cover',
+  },
+};
+
+export default meta;