Merge pull request #352 from ericsanner/feature/31-featured-speaker

Create people grid component and person datasource

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/index.scss

@@ -1,17 +1,19 @@
-@import "component-column-splitter";
-@import "component-container";
-@import "component-image";
-@import "component-navigation";
-@import "component-promo";
-@import "_component-richtext-content";
+@import 'component-column-splitter';
+@import 'component-container';
+@import 'component-image';
+@import 'component-navigation';
+@import 'component-promo';
+@import '_component-richtext-content';
+
+@import 'common';
+@import 'container';
+@import 'layout';
+@import 'spacing';
+@import 'promo';
+@import 'spacing';
+@import 'title';
+@import 'image';
+@import 'link-list';
+@import 'rich-text';
+@import 'people-grid';
 
-@import "common";
-@import "container";
-@import "layout";
-@import "spacing";
-@import "promo";
-@import "spacing";
-@import "title";
-@import "image";
-@import "link-list";
-@import "rich-text";

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/_red-linear-gradient.scss

@@ -0,0 +1,8 @@
+.red-linear-gradient {
+  background-image: linear-gradient(135deg, #ec1f1f, #6f102c);
+  color: white;
+
+  & a {
+    color: white;
+  }
+}

src/Project/Sugcon2024/Sugcon/src/assets/sass/components/people-grid/index.scss

@@ -0,0 +1 @@
+@import 'red-linear-gradient';

src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Person.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, Heading, Text, Image, Link } from '@chakra-ui/react';
+import { Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
+
+// Define the type of props that Hero will accept
+export interface PersonFields {
+  /** URL for the image */
+  Image: ImageField;
+
+  /** Person's full name */
+  Name: Field<string>;
+
+  /** Person's job role */
+  JobRole: Field<string>;
+
+  /** Person's company */
+  Company: Field<string>;
+
+  /** Person's Biography */
+  Biography: Field<string>;
+
+  /** Linkedin Link */
+  Linkedin: LinkField;
+
+  /** Twitter Link */
+  Twitter: LinkField;
+}
+
+export type PersonProps = {
+  params: { [key: string]: string };
+  fields: PersonFields;
+};
+
+export const Default = (props: PersonProps): JSX.Element => {
+  return (
+    <Box mb={30}>
+      <Image src={props.fields.Image?.value?.src} w={200} borderRadius={15} mb={10} />
+      <Heading as="h3" size="md" mt={2}>
+        {props.fields.Name?.value}
+      </Heading>
+      <Text fontSize="12px" mb={0}>
+        {props.fields.JobRole?.value}
+      </Text>
+      <Text fontSize="12px" mb={0}>
+        {props.fields.Company?.value}
+      </Text>
+      {props.params?.DisplaySocialLinks == '1' && props.fields.Linkedin?.value?.href !== '' && (
+        <Link
+          href={props.fields.Linkedin?.value?.href}
+          isExternal={props.fields.Linkedin?.value?.target == '_blank'}
+          fontSize="12px"
+          mt={3}
+          textDecoration="underline"
+          color="#28327D"
+        >
+          Linkedin
+        </Link>
+      )}
+      {props.params?.DisplaySocialLinks == '1' &&
+        props.fields.Linkedin?.value?.href !== '' &&
+        props.fields.Twitter?.value?.href !== '' && <Box display="inline"> / </Box>}
+      {props.params?.DisplaySocialLinks == '1' && props.fields.Twitter?.value?.href !== '' && (
+        <Link
+          href={props.fields.Twitter?.value?.href}
+          isExternal={props.fields.Twitter?.value?.target == '_blank'}
+          fontSize="12px"
+          mt={3}
+          textDecoration="underline"
+          color="#28327D"
+        >
+          Twitter
+        </Link>
+      )}
+    </Box>
+  );
+};

src/Project/Sugcon2024/Sugcon/src/components/List Components/PeopleGrid.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Box, Heading, SimpleGrid } from '@chakra-ui/react';
+import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+import { PersonFields, PersonProps, Default as Person } from '../Basic Components/Person';
+
+// Define the type of props that People Grid will accept
+interface Fields {
+  /** Headline */
+  Headline: Field<string>;
+
+  /** Multilist of People */
+  People: Array<Person>;
+}
+
+// Define the type of props for an Person
+interface Person {
+  /** Display name of the person item */
+  displayName: string;
+
+  /** The details of a person */
+  fields: PersonFields;
+
+  /** The item id of the person item */
+  id: string;
+
+  /** Name of the person item */
+  name: string;
+
+  /** Url of the person item */
+  url: string;
+}
+
+export type PeopleGridProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+export const Default = (props: PeopleGridProps): JSX.Element => {
+  const styles = props.params && props.params.Styles ? props.params.Styles : '';
+  const cols = props.params && props.params.Columns ? parseInt(props.params.Columns) : 4;
+
+  return (
+    <Box w="100%" mt={20} className={styles}>
+      <Box w="80%" pt={10} m="auto">
+        {props.fields?.Headline?.value !== '' && (
+          <Heading as="h2" size="lg">
+            {props.fields?.Headline?.value}
+          </Heading>
+        )}
+        <SimpleGrid columns={{ base: 1, md: cols }} mt={10}>
+          {props.fields?.People.map((person, idx) => {
+            const pp: PersonProps = {
+              params: props.params,
+              fields: person.fields,
+            };
+            return <Person key={idx} {...pp}></Person>;
+          })}
+        </SimpleGrid>
+      </Box>
+    </Box>
+  );
+};

src/Project/Sugcon2024/Sugcon/src/stories/components/List Components/PeopleGrid.stories.ts

@@ -0,0 +1,193 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Default as PeopleGrid } from '../../../components/List Components/PeopleGrid';
+import '../../../assets/sass/components/people-grid/index.scss';
+const meta = {
+  title: 'Components/PeopleGrid',
+  component: PeopleGrid,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof PeopleGrid>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Teaser: Story = {
+  name: 'People Grid',
+  args: {
+    params: {
+      Columns: '4',
+      DisplaySocialLinks: '1',
+      Styles: 'red-linear-gradient',
+    },
+    fields: {
+      People: [
+        {
+          id: 'd6f5b3e8-1c83-44b2-b381-ccb74d1bc6c2',
+          url: 'http://cm/Data/People/Eric-Sanner',
+          name: 'Eric Sanner',
+          displayName: 'Eric Sanner',
+          fields: {
+            Twitter: {
+              value: {
+                href: 'https://blogs.perficient.com/author/esanner',
+                text: 'Blogs',
+                linktype: 'external',
+                url: 'https://blogs.perficient.com/author/esanner',
+                anchor: '',
+                target: '',
+              },
+            },
+            Company: {
+              value: 'Perficient',
+            },
+            Name: {
+              value: 'Eric Sanner',
+            },
+            JobRole: {
+              value: 'Solution Architect',
+            },
+            Biography: {
+              value: 'This is a test',
+            },
+            Linkedin: {
+              value: {
+                href: 'https://www.linkedin.com/in/ericsanner/',
+                text: 'Linkedin',
+                linktype: 'external',
+                url: 'https://www.linkedin.com/in/ericsanner/',
+                anchor: '',
+                target: '',
+              },
+            },
+            Image: {
+              value: {
+                src: '../../../../images/EricSanner.png',
+                alt: '',
+                width: '400',
+                height: '400',
+              },
+            },
+          },
+        },
+        {
+          id: '43f0cff6-cd6f-4799-9b97-2acb0452fec7',
+          url: 'http://cm/Data/People/Chet-Potvin',
+          name: 'Chet Potvin',
+          displayName: 'Chet Potvin',
+          fields: {
+            Twitter: {
+              value: {
+                href: '',
+              },
+            },
+            Company: {
+              value: 'Merkle',
+            },
+            Name: {
+              value: 'Chet Potvin',
+            },
+            JobRole: {
+              value: 'Technical Architect',
+            },
+            Biography: {
+              value: '',
+            },
+            Linkedin: {
+              value: {
+                href: '',
+              },
+            },
+            Image: {
+              value: {
+                src: '../../../../images/ChetPotvin.png',
+                alt: '',
+                width: '512',
+                height: '512',
+              },
+            },
+          },
+        },
+        {
+          id: '5312c099-92b6-41ac-9b5a-5a6166c2ba5d',
+          url: 'http://cm/Data/People/Dave-Ambrose',
+          name: 'Dave Ambrose',
+          displayName: 'Dave Ambrose',
+          fields: {
+            Twitter: {
+              value: {
+                href: '',
+              },
+            },
+            Company: {
+              value: 'Perficient',
+            },
+            Name: {
+              value: 'Dave Ambrose',
+            },
+            JobRole: {
+              value: 'Solutions Architect',
+            },
+            Biography: {
+              value: '',
+            },
+            Linkedin: {
+              value: {
+                href: '',
+              },
+            },
+            Image: {
+              value: {
+                src: '../../../../images/DaveAmbrose.jpg',
+                alt: '',
+                width: '512',
+                height: '512',
+              },
+            },
+          },
+        },
+        {
+          id: '7448c4dd-f5a0-4af8-90e3-0cd9946b71ef',
+          url: 'http://cm/Data/People/Joshua-Hoover',
+          name: 'Joshua Hoover',
+          displayName: 'Joshua Hoover',
+          fields: {
+            Twitter: {
+              value: {
+                href: '',
+              },
+            },
+            Company: {
+              value: 'Perficient',
+            },
+            Name: {
+              value: 'Joshua Hover',
+            },
+            JobRole: {
+              value: 'Director',
+            },
+            Biography: {
+              value: '',
+            },
+            Linkedin: {
+              value: {
+                href: '',
+              },
+            },
+            Image: {
+              value: {
+                src: '../../../../images/JoshuaHover.jpg',
+                alt: '',
+                width: '512',
+                height: '512',
+              },
+            },
+          },
+        },
+      ],
+      Headline: {
+        value: 'Featured Speakers',
+      },
+    },
+  },
+};