@4alldigital/foundation-ui--core 3.0.0

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

@@ -0,0 +1,277 @@
+import React, { MouseEvent, useContext } from 'react';
+import cx from 'classnames';
+import { Props } from './CardMedia.types';
+import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
+import Image from '../../../Image';
+import Heading from '../../../Heading';
+import { HEADING_TAGS } from '../../../Heading/Heading.types';
+import Copy from '../../../Copy';
+import { COPY_TAG, COPY_TRANSFORM } from '../../../Copy/Copy.types';
+import Button from '../../../Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../../../Button/Button.types';
+import HtmlContent from '../../../HtmlContent';
+import { truncateString } from '../../../../utils';
+import { useLanguage } from '../../../../hooks';
+import { AppContext } from '../../../../context';
+
+const CardMedia = ({
+  id,
+  title,
+  description,
+  image,
+  className,
+  metaData,
+  actions,
+  onClick,
+  playCallback,
+  htmlDetails,
+  accessRestriced,
+}: Props) => {
+  const T = useLanguage();
+  const appContext = useContext(AppContext);
+  const cardClasses = onClick ? clickableCardWrapperClasses : cardWrapperClasses;
+  return (
+    <div id={id} data-testid="CardBasic" className={cx(animateClasses, cardClasses, className)} onClick={onClick}>
+      {image && (
+        <div className={cx('relative w-full overflow-hidden aspect-[16/9]', 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', animateClasses)}
+          />
+          {accessRestriced && (
+            <div className="absolute top-0 left-0 right-0 bottom-0 bg-body-bg bg-opacity-50 flex items-center justify-center">
+              <Copy bold transform={COPY_TRANSFORM.UPPERCASE}>
+                {T.UI.PURCHASE_TO_ACCESS}
+              </Copy>
+            </div>
+          )}
+          {playCallback && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Button
+                variant={BTN_VARIANTS.PRIMARY}
+                icon="mdi:play"
+                size={BTN_SIZES.LARGE}
+                onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                  event.stopPropagation();
+                  if (typeof playCallback === 'function') {
+                    playCallback(event);
+                  }
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+      <div className="w-full flex flex-col gap-1">
+        <div className="p-3">
+          <div>
+            {title && (
+              <Heading tag={HEADING_TAGS.H5} 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">
+                {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 (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">
+                {actions.completed && (
+                  <Button
+                    variant={BTN_VARIANTS.PRIMARY}
+                    icon={actions.completed.isActive ? 'mdi:check' : 'mdi:check-outline'}
+                    size={BTN_SIZES.SMALL}
+                    onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                      event.stopPropagation();
+                      if (actions?.completed?.onClick && typeof actions.completed.onClick === 'function') {
+                        actions.completed.onClick({ id });
+                      }
+                    }}
+                  />
+                )}
+                {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 });
+                      }
+                    }}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CardMedia.displayName = 'CardMedia';
+
+export default CardMedia;
+export type { Props };

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

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

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

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

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

@@ -0,0 +1,262 @@
+import React, { MouseEvent } from 'react';
+import cx from 'classnames';
+import HoverVideoPlayer from 'react-hover-video-player';
+import { Props } from './CardVideo.types';
+import Image from '../../../Image';
+import Loader from '../../../Loader';
+import Button from '../../../Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../../../Button/Button.types';
+import Copy from '../../../Copy';
+import { COPY_TAG } from '../../../Copy/Copy.types';
+import Heading from '../../../Heading';
+import { HEADING_TAGS } from '../../../Heading/Heading.types';
+import { animateClasses, cardWrapperClasses, clickableCardWrapperClasses } from '../../constants';
+import { truncateString } from '../../../../utils';
+import HtmlContent from '../../../HtmlContent';
+
+const CardVideo = ({
+  video,
+  isMuted = true,
+  id,
+  title,
+  description,
+  image,
+  className,
+  metaData,
+  actions,
+  onClick,
+  htmlDetails,
+}: Props) => {
+  const cardClasses = onClick ? clickableCardWrapperClasses : cardWrapperClasses;
+  return (
+    <div id={id} data-testid="CardVideo" className={cx(animateClasses, cardClasses, className)} onClick={onClick}>
+      {image && video && (
+        <div className={cx('', image.aspectRatio)}>
+          <HoverVideoPlayer
+            key={`${id}--card`}
+            videoId={`video--${id}`}
+            playbackStartDelay={1000}
+            videoSrc={<source src={video} type="video/mp4" />}
+            videoClassName={cx('hls-hover-video w-full aspect-[16/9]', image.aspectRatio)}
+            sizingMode="overlay"
+            preload="none"
+            loop={false}
+            muted={isMuted}
+            className={cx('w-full !block', image.aspectRatio)}
+            pausedOverlay={
+              <div className={cx('relative w-full aspect-[16/9]', image.aspectRatio)}>
+                <Image src={image?.src} alt={image?.alt} />
+              </div>
+            }
+            loadingOverlay={
+              <div className={cx('w-full flex items-center justify-center aspect-[16/9]', image.aspectRatio)}>
+                <div className="">
+                  <Loader color="#FFF" />
+                </div>
+              </div>
+            }
+          />
+        </div>
+      )}
+
+      {(title || htmlDetails || description || metaData || actions) && (
+        <div className="w-full flex flex-col">
+          <div className="p-3">
+            {title && (
+              <div>
+                <Heading tag={HEADING_TAGS.H5} 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>
+            )}
+            {(metaData || actions) && (
+              <div className="flex items-center justify-between gap-2">
+                {metaData && (
+                  <div className="flex shrink-0">
+                    {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 (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">
+                    {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 });
+                          }
+                        }}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+CardVideo.displayName = 'CardVideo';
+
+export default CardVideo;
+export type { Props };

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

@@ -0,0 +1,11 @@
+import { CardData } from '../../Card.types';
+
+export interface Props extends CardData {
+  className?: string;
+  // video?: string;
+  // isMuted?: boolean;
+  // withStyles?: boolean;
+  // promoCards?: boolean;
+  // isOriginal?: boolean;
+  // customPath?: string;
+}

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

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

package/src/components/CardGrid/CardGrid.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import CardGrid from '.';
+import { CardVariant } from '../Card/Card.types';
+import Container from '../Container';
+import Screen from '../Screen';
+import Button from '../Button';
+import { BTN_SIZES, BTN_VARIANTS } from '../Button/Button.types';
+import { useState } from 'react';
+
+const meta: Meta<typeof CardGrid> = {
+  title: 'ORGANISMS/CardGrid',
+  component: CardGrid,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+type Story = StoryObj<typeof CardGrid>;
+
+const CustomAction = () => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    console.log('Custom action clicked', event);
+    event.stopPropagation();
+    setIsActive(!isActive);
+  };
+
+  return (
+    <Button
+      variant={BTN_VARIANTS.PRIMARY}
+      icon={isActive ? 'mdi:heart' : 'mdi:heart-outline'}
+      size={BTN_SIZES.SMALL}
+      onClick={handleOnClick}
+    />
+  );
+};
+
+export const Default: Story = {
+  args: {
+    onPressCallback: (id: string) => console.log('Card clicked', id),
+    data: [
+      {
+        variant: CardVariant.BASIC,
+        data: {
+          id: '1',
+          title: 'Card title',
+          description: 'Card description',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          tags: ['tag1', 'tag2'],
+          metaData: ['meta1', 'meta2'],
+          actions: {
+            like: {
+              count: 10,
+              isActive: false,
+              onClick: event => console.log('Like clicked', event),
+            },
+            share: {
+              isActive: true,
+              onClick: event => console.log('Share clicked', event),
+            },
+          },
+          scaleOnHover: false,
+          onClick: arg => console.log('Card clicked', arg),
+        },
+      },
+      {
+        variant: CardVariant.BASIC,
+        data: {
+          id: '2',
+          title: 'Card Title',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+          actions: {
+            custom: [<CustomAction key="custom-action-1" />],
+          },
+        },
+      },
+      {
+        variant: CardVariant.BASIC,
+        data: {
+          id: '3',
+          title: 'Card Title',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+      {
+        variant: CardVariant.BASIC,
+        data: {
+          id: '4',
+          title: 'Card Title',
+          description: 'Card Body',
+          image: {
+            src: 'https://picsum.photos/600/400',
+            alt: 'Placeholder image',
+          },
+        },
+      },
+    ],
+  },
+  render: ({ data, onPressCallback }) => {
+    return (
+      <Screen>
+        <Container padded>
+          <CardGrid data={data} onPressCallback={onPressCallback} />
+        </Container>
+      </Screen>
+    );
+  },
+};
+
+export default meta;