Create video text component

Sitecore · Feb 22, 2024 · 8ead8b1 · 8ead8b1
1 parent cdd69cf
commit 8ead8b1
Show file tree

Hide file tree

Showing 15 changed files with 1,340 additions and 0 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/VideoText.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Box, Heading, Text, Flex } from '@chakra-ui/react';
+import { Field } from '@sitecore-jss/sitecore-jss-nextjs';
+
+// Define the type of props that VideoText will accept
+interface Fields {
+  /** Title of the VideoText */
+  Headline: Field<string>;
+
+  /** Youtube Video Id (not the full youtube.com url)*/
+  YoutubeVideoId: Field<string>;
+
+  /** Text headline of the VideoText */
+  TextHeadline: Field<string>;
+
+  /** Richtext of the VideoText */
+  Text: Field<string>;
+}
+
+export type VideoTextProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+export const Default = (props: VideoTextProps): JSX.Element => {
+  return (
+    <Box w={{ base: '100vw', md: '80vw' }} my="20" mx={{ base: '20px', md: 'auto' }}>
+      {props.fields.Headline?.value !== '' && (
+        <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
+          {props.fields.Headline?.value}
+        </Heading>
+      )}
+
+      <Flex direction={{ base: 'column', md: 'row' }} flexGrow={1} columnGap="20" rowGap="10">
+        <Box w={{ base: '100%', md: '50%' }} position="relative">
+          <iframe
+            width="100%"
+            height="100%"
+            src={`https://www.youtube.com/embed/${props.fields.YoutubeVideoId?.value}`}
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+            style={{ borderRadius: '15px', position: 'absolute' }}
+          ></iframe>
+          <Box pt="56.25%" display="block">
+            {' '}
+          </Box>
+        </Box>
+        <Box w={{ base: '100%', md: '50%' }}>
+          {props.fields.TextHeadline?.value !== '' && (
+            <Heading as="h3" fontWeight="bold" mb={{ base: '10px', md: '20px' }}>
+              {props.fields.TextHeadline?.value}
+            </Heading>
+          )}
+          {props.fields.Text?.value !== '' && (
+            <Text mb={6} fontSize="18px">
+              {props.fields.Text?.value}
+            </Text>
+          )}
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/VideoText.stories.ts b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/VideoText.stories.ts
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Default as VideoText } from '../../../components/Basic Components/VideoText';
+const meta = {
+  title: 'Components/VideoText',
+  component: VideoText,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof VideoText>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const VideoAndText: Story = {
+  name: 'Video and Text',
+  args: {
+    params: {
+      styles: '',
+    },
+    fields: {
+      Headline: {
+        value: 'Sitecore Sessions',
+      },
+      Text: {
+        value:
+          "Megan Jensen leads a panel discussion with Perficient's Newest Sitecore MVPs: Emily Lord, Eric Sanner and Tiffany Laster about their experience in becoming new MVPs",
+      },
+      YoutubeVideoId: {
+        value: 'uPyuI5UtmJc',
+      },
+      TextHeadline: {
+        value: 'Episode 4',
+      },
+    },
+  },
+};
diff --git a/...4/Basic Components/Basic Components Headless Site Setup/Add Video and Texts Data Item.yml b/...4/Basic Components/Basic Components Headless Site Setup/Add Video and Texts Data Item.yml
@@ -0,0 +1,41 @@
+---
+ID: "73e07615-9c28-42a1-a8f5-19f07d4118e1"
+Parent: "6f3393fc-0bcf-43fa-9ee2-47dcff255efc"
+Template: "3aea335c-d06d-45b1-841a-cbc8d2d1ce40"
+Path: /sitecore/system/Settings/Project/Sugcon2024/Basic Components/Basic Components Headless Site Setup/Add Video and Texts Data Item
+SharedFields:
+- ID: "52c91c75-6698-4701-a8a2-242ace59a8d6"
+  Hint: Location
+  Value: "{BA2F959D-A614-4C92-8B57-F1FC1A323ABE}"
+- ID: "7868e6bc-525c-4fce-ab8a-77da3e09b171"
+  Hint: Name
+  Value: Video and Text
+- ID: "e62c28f0-9d3b-46e2-8bec-a5e120542499"
+  Hint: Template
+  Value: "{6EEC8E87-D79B-4BE9-B09E-62891791EFC6}"
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240221T193838Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "fb64d392-7fd2-47c9-8792-065ba3e45493"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240221T193838Z
diff --git a/src/Project/Sugcon2024/items/Renderings/Sugcon2024/Basic Components/Video and Text.yml b/src/Project/Sugcon2024/items/Renderings/Sugcon2024/Basic Components/Video and Text.yml
@@ -0,0 +1,142 @@
+---
+ID: "53238441-0a66-46b8-bae6-34a771bff798"
+Parent: "ddc6ed3d-2e47-4945-a316-9a5304a0db3b"
+Template: "04646a89-996f-4ee7-878a-ffdbf1f0ef0d"
+Path: /sitecore/layout/Renderings/Project/Sugcon2024/Basic Components/Video and Text
+SharedFields:
+- ID: "037fe404-dd19-4bf7-8e30-4dadf68b27b0"
+  Hint: componentName
+  Value: VideoText
+- ID: "06d5295c-ed2f-4a54-9bf2-26228d113318"
+  Hint: __Icon
+  Value: Office/32x32/movie_camera.png
+- ID: "1a7c85e5-dc0b-490d-9187-bb1dbcb4c72f"
+  Hint: Datasource Template
+  Value: /sitecore/templates/Project/Sugcon2024/Basic Components/Video and Text
+- ID: "7d8ae35f-9ed1-43b5-96a2-0a5f040d4e4e"
+  Hint: Open Properties after Add
+  Value: 0
+- ID: "9c6106ea-7a5a-48e2-8cad-f0f693b1e2d4"
+  Hint: __Read Only
+  Value: 0
+- ID: "a77e8568-1ab3-44f1-a664-b7c37ec7810d"
+  Hint: Parameters Template
+  Value: "{F9F63B78-8E22-41C9-8E40-CD8BAF3A69AC}"
+- ID: "b5b27af1-25ef-405c-87ce-369b3a004016"
+  Hint: Datasource Location
+  Value: "query:$site/*[@@name='Data']/*[@@templatename='Video and Text Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Video and Text Folder']"
+- ID: "c39a90ce-0035-41bb-90f6-3c8a6ea87797"
+  Hint: AddFieldEditorButton
+  Value: 
+- ID: "e829c217-5e94-4306-9c48-2634b094fdc2"
+  Hint: OtherProperties
+  Value: IsRenderingsWithDynamicPlaceholders=true
+Languages:
+- Language: "de-DE"
+  Fields:
+  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
+    Hint: __Display name
+    Value: Promo
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240125T152634Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\Admin
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\Admin
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "c5100b7f-97cb-4d5a-9601-9d07dafe7323"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\Admin
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240125T152634Z
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20211012T120931Z
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\JssImport
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "0705ac93-1bc4-4f5b-b43e-1f473704ea02"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240221T194300Z
+- Language: "ja-JP"
+  Fields:
+  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
+    Hint: __Display name
+    Value: プロモ
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240125T152634Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\Admin
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\Admin
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "c5100b7f-97cb-4d5a-9601-9d07dafe7323"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\Admin
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240125T152634Z
+- Language: "zh-CN"
+  Fields:
+  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
+    Hint: __Display name
+    Value: 促销
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240125T152634Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\Admin
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\Admin
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "c5100b7f-97cb-4d5a-9601-9d07dafe7323"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\Admin
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240125T152634Z
diff --git a/src/Project/Sugcon2024/items/SiteShared/Shared/Data/Video and Text.yml b/src/Project/Sugcon2024/items/SiteShared/Shared/Data/Video and Text.yml
@@ -0,0 +1,31 @@
+---
+ID: "595c364e-4813-4934-89b3-b65f30231cd6"
+Parent: "0c5c8db1-5dc6-4a54-a232-750f004bfb84"
+Template: "6eec8e87-d79b-4be9-b09e-62891791efc6"
+Path: /sitecore/content/Sugcon2024/Shared/Data/Video and Text
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "25bed78c-4957-4165-998a-ca1b52f67497"
+      Hint: __Created
+      Value: 20240221T194851Z
+    - ID: "52807595-0f8f-4b20-8d2a-cb71d28c6103"
+      Hint: __Owner
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "888847b7-3d6b-4677-bff0-cb71564f5412"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240221T194851Z