@4alldigital/foundation-ui--core 3.0.0

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,487 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Card from '.';
+import { CardVariant } from './Card.types';
+import { COPY_ALIGN } from '../Copy/Copy.types';
+import Container from '../Container';
+
+const meta: Meta<typeof Card> = {
+  title: 'MOLECULES/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    data: {
+      id: '1',
+      title: 'Cardio & Stretch 30\'',
+      description: 'Card description',
+      image: {
+        src: 'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      onClick: event => console.log('Card clicked', event),
+    },
+  },
+};
+
+export const Basic: Story = {
+  args: {
+    variant: CardVariant.BASIC,
+    data: {
+      id: '1',
+      title: 'Card title',
+      description: 'Card description',
+      image: {
+        src: 'https://dpfuvkwgoe3ki.cloudfront.net/styles/large_16_9/s3/2024-04/Thumbnail_Lilium2.jpg.webp', // 'https://placehold.co/600x400',
+        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),
+        },
+      },
+      // padded: true,
+      // scaleOnHover: false,
+    },
+  },
+  render: args => {
+    return (
+      <div className="w-[800px] h-[350px] grid grid-cols-3 gap-4">
+        <div>
+          <Card {...args} />
+        </div>
+        <div>
+          <Card {...args} />
+        </div>
+        <div>
+          <Card {...args} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const BasicTitleOverlay: Story = {
+  args: {
+    variant: CardVariant.BASIC,
+    data: {
+      id: '1',
+      title: 'Card title',
+      image: {
+        src: 'https://dpfuvkwgoe3ki.cloudfront.net/styles/large_16_9/s3/2024-04/Thumbnail_Lilium2.jpg.webp', // 'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      titleOverlay: true,
+      scaleOnHover: true,
+    },
+  },
+  render: args => {
+    return (
+      <div className="w-[800px] h-[350px] grid grid-cols-3 gap-4">
+        <div>
+          <Card {...args} />
+        </div>
+        <div>
+          <Card {...args} />
+        </div>
+        <div>
+          <Card {...args} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Video: Story = {
+  args: {
+    variant: CardVariant.VIDEO,
+    data: {
+      id: '1',
+      title: 'Card title',
+      description: 'Card description',
+      image: {
+        src: 'https://dpfuvkwgoe3ki.cloudfront.net/styles/large_16_9/s3/2024-04/Thumbnail_Lilium2.jpg.webp', //'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      video: '../../../assets/sample-5s.mp4',
+      tags: ['tag1', 'tag2'],
+      metaData: ['meta1', 'meta2'],
+      actions: {
+        save: {
+          isActive: false,
+          onClick: event => console.log('Save clicked', event),
+        },
+        comment: {
+          count: 10,
+          isActive: true,
+          onClick: event => console.log('Comment clicked', event),
+        },
+        bookmark: {
+          isActive: true,
+          onClick: event => console.log('Bookmark clicked', event),
+        },
+      },
+    },
+  },
+};
+
+export const VideoOnly: Story = {
+  args: {
+    variant: CardVariant.VIDEO,
+    data: {
+      id: '1',
+      // title: 'Card title',
+      // description: 'Card description',
+      image: {
+        src: 'https://dpfuvkwgoe3ki.cloudfront.net/styles/large_16_9/s3/2024-04/Thumbnail_Lilium2.jpg.webp', //'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      video: '../../../assets/sample-5s.mp4',
+    },
+  },
+  render: args => {
+    return (
+      <Container>
+        <div className="min-w-[500px]">
+          <Card {...args} />
+        </div>
+      </Container>
+    );
+  },
+};
+
+export const Media: Story = {
+  args: {
+    variant: CardVariant.MEDIA,
+    data: {
+      id: '1',
+      title: 'Card & title 30',
+      description: 'Card description',
+      image: {
+        src: 'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      playCallback: (event: any) => console.log('Play clicked', event),
+      tags: ['tag1', 'tag2'],
+      metaData: ['meta1', 'meta2'],
+      actions: {
+        report: {
+          isActive: false,
+          onClick: event => console.log('Report clicked', event),
+        },
+        follow: {
+          isActive: true,
+          onClick: event => console.log('Follow clicked', event),
+        },
+        download: {
+          isActive: false,
+          onClick: event => console.log('Download clicked', event),
+        },
+        edit: {
+          isActive: true,
+          onClick: event => console.log('Edit clicked', event),
+        },
+        delete: {
+          isActive: false,
+          onClick: event => console.log('Delete clicked', event),
+        },
+      },
+    },
+  },
+};
+
+export const MediaMultiple: Story = {
+  render: args => {
+    return (
+      <div className="grid grid-cols-3 gap-4">
+        <Card
+          variant={args.variant}
+          data={{
+            ...args.data,
+            image: {
+              src: 'https://placehold.co/600x300/000000/FFF',
+              alt: 'Placeholder image',
+            },
+          }}
+        />
+        <Card
+          variant={args.variant}
+          data={{
+            ...args.data,
+            image: {
+              src: 'https://placehold.co/600x250/8899AA/FFF',
+              alt: 'Placeholder image',
+            },
+          }}
+        />
+        <Card
+          variant={args.variant}
+          data={{
+            ...args.data,
+            image: {
+              src: 'https://placehold.co/600x325/55DDAA/FFF',
+              alt: 'Placeholder image',
+            },
+          }}
+        />
+      </div>
+    );
+  },
+  args: {
+    variant: CardVariant.MEDIA,
+    data: {
+      id: '1',
+      title: 'Card title',
+      description: 'Card description',
+      image: {
+        src: 'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      playCallback: (event: any) => console.log('Play clicked', event),
+      tags: ['tag1', 'tag2'],
+      metaData: ['meta1', 'meta2'],
+      actions: {
+        report: {
+          isActive: false,
+          onClick: event => console.log('Report clicked', event),
+        },
+        follow: {
+          isActive: true,
+          onClick: event => console.log('Follow clicked', event),
+        },
+        download: {
+          isActive: false,
+          onClick: event => console.log('Download clicked', event),
+        },
+        edit: {
+          isActive: true,
+          onClick: event => console.log('Edit clicked', event),
+        },
+        delete: {
+          isActive: false,
+          onClick: event => console.log('Delete clicked', event),
+        },
+      },
+    },
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    variant: CardVariant.ICON,
+    data: {
+      id: '1',
+      icon: 'mdi:heart',
+      title: 'Monitor your diet easily',
+      moreTitle: 'Learn more',
+      description:
+        'The goal of a "monitor your diet easily" is to simplify the process of tracking and understanding nutritional intake',
+    },
+  },
+  render: args => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row gap-4">
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:heart',
+              align: COPY_ALIGN.LEFT,
+              onClick: event => console.log('Card clicked', event),
+              moreTitle: 'Learn more',
+            }}
+          />
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:star',
+              align: COPY_ALIGN.LEFT,
+              onClick: event => console.log('Card clicked', event),
+              moreTitle: 'Try now',
+            }}
+          />
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:chart-line',
+              align: COPY_ALIGN.LEFT,
+              onClick: event => console.log('Card clicked', event),
+              moreTitle: 'View stats',
+            }}
+          />
+        </div>
+        <div className="flex flex-row gap-4">
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:heart',
+              align: COPY_ALIGN.CENTER,
+            }}
+          />
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:star',
+              align: COPY_ALIGN.CENTER,
+            }}
+          />
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:chart-line',
+              align: COPY_ALIGN.CENTER,
+            }}
+          />
+        </div>
+        <div className="flex flex-row gap-4">
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:heart',
+              align: COPY_ALIGN.RIGHT,
+            }}
+          />
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:star',
+              align: COPY_ALIGN.RIGHT,
+            }}
+          />
+          <Card
+            variant={args.variant}
+            data={{
+              ...args.data,
+              icon: 'mdi:chart-line',
+              align: COPY_ALIGN.RIGHT,
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Horz: Story = {
+  args: {
+    variant: CardVariant.HORZ,
+    data: {
+      id: '1',
+      title: 'Daily fitness challenges',
+      description: 'Flexi gives you the ability to achieve specific goals.',
+      image: {
+        src: 'https://dpfuvkwgoe3ki.cloudfront.net/styles/large_16_9/s3/2024-04/Thumbnail_Lilium2.jpg.webp', // 'https://placehold.co/600x400',
+        alt: 'Placeholder image',
+      },
+      // padded: true,
+    },
+  },
+};
+
+export const HorzIcons: Story = {
+  args: {
+    variant: CardVariant.HORZ,
+    data: {
+      id: '1',
+      title: 'Daily fitness challenges',
+      description: 'Flexi gives you the ability to achieve specific goals.',
+      padded: true,
+    },
+  },
+  render: args => {
+    return (
+      <div className="flex flex-col w-[400px] gap-4">
+        <Card
+          variant={args.variant}
+          data={{
+            ...args.data,
+            icon: 'mdi:heart',
+          }}
+        />
+        <Card
+          variant={args.variant}
+          data={{
+            ...args.data,
+            icon: 'mdi:star',
+          }}
+        />
+        <Card
+          variant={args.variant}
+          data={{
+            ...args.data,
+            icon: 'mdi:chart-line',
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Data: Story = {
+  args: {
+    variant: CardVariant.DATA,
+    data: {
+      id: '1',
+      data: {
+        item: '+',
+        label: 'Export Coaches',
+        numberData: {
+          from: 0,
+          to: 140,
+          animationOptions: {
+            ease: 'easeInOut',
+          },
+        },
+        animateNumber: true,
+      },
+      // padded: true,
+    },
+  },
+};
+
+export const DataDecimals: Story = {
+  args: {
+    variant: CardVariant.DATA,
+    data: {
+      id: '1',
+      data: {
+        item: '/5',
+        label: 'Ratings',
+        numberData: {
+          from: 0,
+          to: 4.8,
+          animationOptions: {
+            ease: 'easeInOut',
+          },
+          numDecimals: 1,
+        },
+        animateNumber: true,
+      },
+      // padded: true,
+    },
+  },
+};
+
+export default meta;

package/src/components/Card/Card.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Props } from './Card.types';
+import CardBasic from './types/CardBasic';
+import CardMedia from './types/CardMedia';
+import CardVideo from './types/CardVideo';
+import CardIcon from './types/CardIcon';
+import CardHorz from './types/CardHorz';
+import CardData from './types/CardData';
+
+const Card = ({ variant, className, data, ...rest }: Props) => {
+  switch (variant) {
+    case 'basic':
+      return <CardBasic className={className} {...data} {...rest} />;
+    case 'media':
+      return <CardMedia className={className} {...data} {...rest} />;
+    case 'video':
+      return <CardVideo className={className} {...data} {...rest} />;
+    case 'icon':
+      return <CardIcon className={className} {...data} {...rest} />;
+    case 'horz':
+      return <CardHorz className={className} {...data} {...rest} />;
+    case 'data':
+      return <CardData className={className} {...data} {...rest} />;
+    default:
+      return <CardBasic className={className} {...data} {...rest} />;
+  }
+};
+
+Card.displayName = 'Card';
+
+export default Card;
+export type { Props };

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

@@ -0,0 +1,79 @@
+import { MouseEvent, ReactNode } from 'react';
+import { COPY_ALIGN } from '../Copy/Copy.types';
+import { NumberType } from './types/CardData/CardData.types';
+
+export enum CardVariant {
+  BASIC = 'basic',
+  MEDIA = 'media',
+  VIDEO = 'video',
+  ICON = 'icon',
+  HORZ = 'horz',
+  DATA = 'data',
+}
+
+export interface ImageData {
+  src: string;
+  alt: string;
+  title?: string;
+  width?: number;
+  height?: number;
+  aspectRatio?: 'aspect-[16/10]' | 'aspect-[16/9]' | 'aspect-[4/3]' | 'aspect-[1/1]' | 'aspect-[3/4]' | 'aspect-[9/16]';
+}
+
+type ActionItem = {
+  count?: number;
+  isActive: boolean;
+  onClick: (event: any) => void;
+};
+
+export interface Actions {
+  like?: ActionItem;
+  share?: ActionItem;
+  save?: ActionItem;
+  comment?: ActionItem;
+  bookmark?: ActionItem;
+  report?: ActionItem;
+  follow?: ActionItem;
+  download?: ActionItem;
+  edit?: ActionItem;
+  delete?: ActionItem;
+  completed?: ActionItem;
+  custom?: ReactNode[];
+}
+
+export interface CardData {
+  id: string;
+  title?: string;
+  subtitle?: string;
+  description?: string;
+  image?: ImageData;
+  video?: string;
+  link?: string;
+  tags?: string[];
+  moreTitle?: string;
+  metaData?: string[];
+  actions?: Actions;
+  onClick?: (data: any) => void;
+  playCallback?: (event: MouseEvent<HTMLButtonElement>) => void;
+  isMuted?: boolean;
+  icon?: string;
+  padded?: boolean;
+  scaleOnHover?: boolean;
+  data?: {
+    item: string;
+    label: string;
+    numberData: NumberType;
+    animateNumber?: boolean;
+  };
+  align?: COPY_ALIGN;
+  raised?: boolean;
+  htmlDetails?: boolean;
+  accessRestriced?: boolean;
+  titleOverlay?: boolean;
+}
+
+export interface Props {
+  variant?: CardVariant;
+  className?: string;
+  data: CardData;
+}

package/src/components/Card/constants/index.ts

@@ -0,0 +1,8 @@
+export const cardWrapperClasses =
+  'relative rounded-lg overflow-hidden shadow bg-card-bg text-card-text dark:bg-darkCardBackground dark:text-darkCardText group';
+
+  export const clickableCardWrapperClasses =
+  'relative rounded-lg overflow-hidden cursor-pointer hover:scale-105 shadow hover:shadow-lg bg-card-bg text-card-text dark:bg-darkCardBackground dark:text-darkCardText hover:bg-card-bgHover group';
+
+
+  export const animateClasses = 'transition duration-500 ease-in-out ';

package/src/components/Card/index.ts

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