@4alldigital/foundation-ui--core 3.0.0

package/src/components/Card/types/CardBasic/CardBasic.tsx

@@ -0,0 +1,262 @@
+import React, { MouseEvent, useContext } from 'react';
+import cx from 'classnames';
+import Image from '../../../Image';
+import { Props } from './CardBasic.types';
+import Heading from '../../../Heading';
+import { HEADING_TAGS } from '../../../Heading/Heading.types';
+import Copy from '../../../Copy';
+import { COPY_TAG } from '../../../Copy/Copy.types';
+import Button from '../../../Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../../../Button/Button.types';
+import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
+import { twMerge } from 'tailwind-merge';
+import HtmlContent from '../../../HtmlContent';
+import { truncateString } from '../../../../utils';
+import { AppContext } from '../../../../context';
+
+const CardBasic = ({
+  id,
+  title,
+  description,
+  image,
+  className,
+  metaData,
+  actions,
+  padded,
+  scaleOnHover,
+  onClick,
+  htmlDetails,
+  titleOverlay,
+}: Props) => {
+  const appContext = useContext(AppContext);
+  const cardClasses = onClick ? clickableCardWrapperClasses : cardWrapperClasses;
+  return (
+    <div
+      id={id}
+      data-testid="CardBasic"
+      className={twMerge(
+        cx(animateClasses, cardClasses, { 'p-4': padded }, { 'hover:scale-100': !scaleOnHover }, className),
+      )}
+      onClick={onClick}>
+      {image && (
+        <div
+          className={twMerge(
+            cx('relative w-full overflow-hidden aspect-[16/9]', { rounded: padded }, image.aspectRatio),
+          )}>
+          <Image
+            fill
+            src={image?.src ?? appContext?.images?.placeholder}
+            sizes="100vh"
+            alt={image?.alt}
+            className={cx('absolute inset-0 object-cover group-hover:scale-110 dura', animateClasses)}
+          />
+        </div>
+      )}
+      {titleOverlay && title && (
+        <div className="absolute inset-0 w-full h-full z-10 flex items-center justify-center bg-black bg-opacity-30">
+          <Heading tag={HEADING_TAGS.H4} singleLine flush className='text-white'>
+            {title}
+          </Heading>
+        </div>
+      )}
+      {(!titleOverlay && (title || htmlDetails || description)) && (
+        <div className="w-full flex flex-col gap-1">
+          <div className={cx({ 'p-3': !padded }, { 'pt-3': padded })}>
+            <div>
+              {title && (
+                <Heading tag={HEADING_TAGS.H4} singleLine flush>
+                  {title}
+                </Heading>
+              )}
+            </div>
+            {!htmlDetails && description && (
+              <div>
+                <Copy className="mb-0">{truncateString(description)}</Copy>
+              </div>
+            )}
+            {htmlDetails && description && (
+              <div>
+                <HtmlContent className="mb-0" data={truncateString(description)} />
+              </div>
+            )}
+            <div className="flex items-center justify-between gap-2">
+              {metaData && (
+                <div className="flex shrink-0 mt-2">
+                  {metaData.map((meta, index) => {
+                    if(metaData.length === 1) {
+                      return (
+                        <Copy key={meta} className="text-xs" as={COPY_TAG.SMALL}>
+                          {meta}
+                        </Copy>
+                      );
+                    }
+                    if (index === 0) {
+                      return (
+                        <Copy key={meta} className="text-xs" as={COPY_TAG.SMALL}>
+                          {meta}&nbsp;&middot;
+                        </Copy>
+                      );
+                    }
+                    // If last item, don't add the middot
+                    if (index === metaData.length - 1) {
+                      return (
+                        <Copy key={meta} className="text-xs" as={COPY_TAG.SMALL}>
+                          &nbsp;{meta}
+                        </Copy>
+                      );
+                    }
+                    return (
+                      <Copy key={meta} className="text-xs" as={COPY_TAG.SMALL}>
+                        &nbsp;{meta}&nbsp;&middot;
+                      </Copy>
+                    );
+                  })}
+                </div>
+              )}
+              {actions && (
+                <div className="flex items-center gap-1 flex-wrap flex-1 justify-end">
+                  {actions.like && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.like.isActive ? 'mdi:like' : 'mdi:like-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.like?.onClick && typeof actions.like.onClick === 'function') {
+                          actions.like.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.share && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.share.isActive ? 'mdi:share' : 'mdi:share-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.share?.onClick && typeof actions.share.onClick === 'function') {
+                          actions.share.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.save && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.save.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.save?.onClick && typeof actions.save.onClick === 'function') {
+                          actions.save.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.comment && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.comment.isActive ? 'mdi:comment' : 'mdi:comment-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.comment?.onClick && typeof actions.comment.onClick === 'function') {
+                          actions.comment.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.bookmark && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.bookmark.isActive ? 'mdi:bookmark' : 'mdi:bookmark-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.bookmark?.onClick && typeof actions.bookmark.onClick === 'function') {
+                          actions.bookmark.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.report && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.report.isActive ? 'mdi:flag' : 'mdi:flag-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.report?.onClick && typeof actions.report.onClick === 'function') {
+                          actions.report.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.follow && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.follow.isActive ? 'mdi:account-plus' : 'mdi:account-plus-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.follow?.onClick && typeof actions.follow.onClick === 'function') {
+                          actions.follow.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.download && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.download.isActive ? 'mdi:download' : 'mdi:download-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.download?.onClick && typeof actions.download.onClick === 'function') {
+                          actions.download.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.edit && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.edit.isActive ? 'mdi:pencil' : 'mdi:pencil-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.edit?.onClick && typeof actions.edit.onClick === 'function') {
+                          actions.edit.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.delete && (
+                    <Button
+                      variant={BTN_VARIANTS.PRIMARY}
+                      icon={actions.delete.isActive ? 'mdi:delete' : 'mdi:delete-outline'}
+                      size={BTN_SIZES.SMALL}
+                      onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                        event.stopPropagation();
+                        if (actions?.delete?.onClick && typeof actions.delete.onClick === 'function') {
+                          actions.delete.onClick({ id });
+                        }
+                      }}
+                    />
+                  )}
+                  {actions.custom && actions.custom.map((action, index) => <div key={index}>{action}</div>)}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+CardBasic.displayName = 'CardBasic';
+
+export default CardBasic;
+export type { Props };

package/src/components/Card/types/CardBasic/CardBasic.types.ts

@@ -0,0 +1,7 @@
+import { CardData } from "../../Card.types";
+
+export interface Props extends CardData {
+  className?: string;
+  padded?: boolean;
+  scaleOnHover?: boolean;
+}

package/src/components/Card/types/CardBasic/index.ts

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

package/src/components/Card/types/CardData/CardData.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import cx from 'classnames';
+import { animate, motionValue } from 'framer-motion';
+import { Props } from './CardData.types';
+import Heading from '../../../Heading';
+import { HEADING_TAGS } from '../../../Heading/Heading.types';
+import Copy from '../../../Copy';
+import AnimationCounter from '../../../AnimationCounter';
+import { twMerge } from 'tailwind-merge';
+import { animateClasses, cardWrapperClasses } from '../../constants';
+
+const CardData = ({ testID, className, data, padded = true, shadow = true }: Props) => {
+  const x = motionValue(0);
+
+  useEffect(() => {
+    // TODO; make this global
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return;
+    }
+    animate(x, 200, { duration: 0.5 });
+  }, [x]);
+
+  if (!data) {
+    return <></>;
+  }
+  return (
+    <div
+      data-testid={testID || 'CardData'}
+      className={twMerge(
+        cx(
+          animateClasses,
+          cardWrapperClasses,
+          //'relative rounded-lg overflow-hidden flex flex-col items-center gap-4 p-2 bg-body-bg dark:bg-body-bg-dark w-full',
+          { 'p-4': padded },
+          { shadow: shadow },
+          className,
+        ),
+      )}>
+      <div className='min-w-[110px] flex flex-col flex-1 items-center justify-center'>
+        {data?.animateNumber && (
+          <div className="font-heading text-4xl md:text-4xl lg:text-4xl font-bold">
+            <AnimationCounter
+              from={data.numberData.from}
+              to={data.numberData.to}
+              numDecimals={data.numberData.numDecimals}
+            />
+            <span>{data?.item}</span>
+          </div>
+        )}
+        {!data?.animateNumber && (
+          <div className="text-lg">
+            <Heading tag={HEADING_TAGS.H2} flush>
+              {data?.item}
+            </Heading>
+          </div>
+        )}
+        <div className="flex flex-1 items-center justify-center">
+          <Copy className="mb-0">{data?.label}</Copy>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CardData.displayName = 'CardData';
+
+export default CardData;
+export type { Props };

package/src/components/Card/types/CardData/CardData.types.ts

@@ -0,0 +1,21 @@
+import { KeyframeOptions } from 'framer-motion';
+import { CardData } from '../../Card.types';
+
+export interface NumberType {
+  from: number;
+  to: number;
+  animationOptions?: KeyframeOptions;
+  numDecimals?: number;
+}
+
+export interface Props extends CardData {
+  testID?: string;
+  className?: string;
+  data?: {
+    item: string;
+    label: string;
+    numberData: NumberType;
+    animateNumber?: boolean;
+  };
+  shadow?: boolean;
+}

package/src/components/Card/types/CardData/index.ts

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

package/src/components/Card/types/CardHorz/CardHorz.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './CardHorz.types';
+import { twMerge } from 'tailwind-merge';
+import Image from '../../../Image';
+import Heading from '../../../Heading';
+import { HEADING_TAGS } from '../../../Heading/Heading.types';
+import Copy from '../../../Copy';
+import Icon from '../../../Icon';
+import HtmlContent from '../../../HtmlContent';
+import { truncateString } from '../../../../utils';
+import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
+
+const CardHorz = ({
+  testID,
+  id,
+  title,
+  description,
+  image,
+  onClick,
+  className,
+  padded,
+  icon,
+  raised = true,
+  htmlDetails,
+}: Props) => {
+  const cardClasses = onClick ? clickableCardWrapperClasses : cardWrapperClasses;
+
+  return (
+    <div
+      id={id}
+      data-testid={testID || 'CardHorz'}
+      className={cx(
+        'relative rounded-lg overflow-hidden flex gap-4 cursor-pointer',
+        { 'p-4': padded },
+        { 'shadow hover:shadow-lg': raised },
+        animateClasses,
+        cardClasses,
+        className,
+      )}
+      onClick={onClick}>
+      {image && (
+        <div className="w-1/3 aspect-[1/1]">
+          <div className={twMerge(cx('relative w-full overflow-hidden h-full', image.aspectRatio))}>
+            <Image fill src={image?.src} alt={image?.alt} className="absolute inset-0 object-cover" />
+          </div>
+        </div>
+      )}
+      {icon && !image && (
+        <div className="py-2 pl-2">
+          <Icon name={icon} size={30} />
+        </div>
+      )}
+      <div className="flex flex-1 overflow-hidden h-min">
+        <div className="flex-col gap-2 py-2 pr-2 overflow-hidden">
+          {title && (
+            <div className="">
+              <Heading tag={HEADING_TAGS.H4}>{title}</Heading>
+            </div>
+          )}
+          {!htmlDetails && description && (
+            <div>
+              <Copy className="mb-0">{truncateString(description)}</Copy>
+            </div>
+          )}
+          {htmlDetails && description && (
+            <div>
+              <HtmlContent className="mb-0" data={truncateString(description)} />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CardHorz.displayName = 'CardHorz';
+
+export default CardHorz;
+export type { Props };

package/src/components/Card/types/CardHorz/CardHorz.types.ts

@@ -0,0 +1,8 @@
+import { CardData } from "../../Card.types";
+
+export interface Props extends CardData {
+  testID?: string;
+  className?: string;
+  padded?: boolean;
+  icon?: string;
+}

package/src/components/Card/types/CardHorz/index.ts

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

package/src/components/Card/types/CardIcon/CardIcon.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './CardIcon.types';
+import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
+import Heading from '../../../Heading';
+import { HEADING_TAGS } from '../../../Heading/Heading.types';
+import Copy from '../../../Copy';
+import Button from '../../../Button';
+import Icon from '../../../Icon';
+import { BTN_VARIANTS } from '../../../Button/Button.types';
+import { twMerge } from 'tailwind-merge';
+
+const CardIcon = ({
+  id,
+  title,
+  subtitle,
+  description,
+  icon,
+  className,
+  onClick = undefined,
+  moreTitle,
+  align,
+}: Props) => {
+  const cardClasses = onClick ? clickableCardWrapperClasses : cardWrapperClasses;
+  return (
+    <div
+      id={id}
+      data-testid="CardIcon"
+      className={twMerge(
+        cx(
+          animateClasses,
+          cardClasses,
+          'p-8 group gap-4 flex flex-col cursor-default',
+          { 'items-start': align === 'left' },
+          { 'items-center': align === 'center' },
+          { 'items-end': align === 'right' },
+          className,
+        ),
+      )}>
+      {icon && (
+        <div className={cx('relative')}>
+          <Icon name={icon} size={48} />
+        </div>
+      )}
+      <div
+        className={cx(
+          { 'text-left': align === 'left' },
+          { 'text-center': align === 'center' },
+          { 'text-right': align === 'right' },
+        )}>
+        <div>
+          {title && (
+            <Heading tag={HEADING_TAGS.H5} singleLine>
+              {title}
+            </Heading>
+          )}
+          {subtitle && <Copy bold>{subtitle}</Copy>}
+        </div>
+        <div>{description && <Copy align={align}>{description}</Copy>}</div>
+      </div>
+      {onClick && (
+        <Button
+          variant={BTN_VARIANTS.LINK}
+          onClick={onClick}
+          className="absolute left-0 top-0 w-full h-full cursor-pointer border border-solid">
+          {moreTitle}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+CardIcon.displayName = 'CardIcon';
+
+export default CardIcon;
+export type { Props };

package/src/components/Card/types/CardIcon/CardIcon.types.ts

@@ -0,0 +1,8 @@
+import { CardData } from '../../Card.types';
+
+import { COPY_ALIGN } from '../../../Copy/Copy.types';
+
+export interface Props extends CardData {
+  className?: string;
+  align?: COPY_ALIGN;
+}

package/src/components/Card/types/CardIcon/index.ts

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