Merge pull request #369 from ericsanner/feature/30-textimage

Create text and image component
Sitecore · Feb 23, 2024 · 2c3c6a2 · 2c3c6a2
2 parents ef8878b + f511818
commit 2c3c6a2
Show file tree

Hide file tree

Showing 13 changed files with 1,221 additions and 0 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/public/images/urn_aaid_sc_US.png b/src/Project/Sugcon2024/Sugcon/public/images/urn_aaid_sc_US.png
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/TextImage.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/TextImage.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box, Heading, Text, Image, Flex } from '@chakra-ui/react';
+import { Field, ImageField } from '@sitecore-jss/sitecore-jss-nextjs';
+
+// Define the type of props that TextImage will accept
+interface Fields {
+  /** Title of the TextImage */
+  Headline: Field<string>;
+
+  /** Richtext of the TextImage */
+  Text: Field<string>;
+
+  /** Image of the TextImage */
+  Image: ImageField;
+}
+
+export type TextImageProps = {
+  params: { [key: string]: string };
+  fields: Fields;
+};
+
+export const Default = (props: TextImageProps): JSX.Element => {
+  return (
+    <Flex
+      direction={{ base: 'column', md: 'row' }}
+      w="100vw"
+      my="20"
+      mx={{ base: '20px', md: '0' }}
+    >
+      <Flex
+        direction="column"
+        margin="0 auto" // Center the content box
+        flexGrow={1}
+        minWidth="50%"
+      >
+        <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
+          <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
+            {props.fields.Headline?.value}
+          </Heading>
+          {props.fields.Text?.value !== '' && (
+            <Text mb={6} fontSize="18px">
+              {props.fields.Text?.value}
+            </Text>
+          )}
+        </Box>
+      </Flex>
+      <Box flex="1" position="relative" minWidth="50%" maxHeight="400px" alignItems="center">
+        {' '}
+        <Image
+          src={props.fields.Image?.value?.src}
+          //alt={props.fields.Image?.value?.alt}
+          width="400px"
+          height="100%"
+          borderRadius={15}
+          margin="0 auto"
+        />
+      </Box>
+    </Flex>
+  );
+};
diff --git a/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/TextImage.stories.ts b/src/Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/TextImage.stories.ts
@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Default as TextImage } from '../../../components/Basic Components/TextImage';
+const meta = {
+  title: 'Components/TextImage',
+  component: TextImage,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof TextImage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const TextAndImage: Story = {
+  name: 'Text and Image',
+  args: {
+    params: {
+      styles: '',
+    },
+    fields: {
+      Text: {
+        value:
+          'The Sitecore User Group Conference is a community event, which brings the develop community together and provides the perfect platform to gain knowledge and get inspired by the potential within Sitecore Experience Cloud, Experience Commerce and more.',
+      },
+      Image: {
+        value: {
+          src: 'images/urn_aaid_sc_US.png',
+          alt: '',
+          width: '1600',
+          height: '1065',
+        },
+      },
+      Headline: {
+        value: 'An Event from the Community for the Community',
+      },
+    },
+  },
+};
diff --git a/src/Project/Sugcon2024/items/Renderings/Sugcon2024/Basic Components/Text and Image.yml b/src/Project/Sugcon2024/items/Renderings/Sugcon2024/Basic Components/Text and Image.yml
@@ -0,0 +1,142 @@
+---
+ID: "ab87f73e-6532-41cd-8234-d0e40de84d90"
+Parent: "ddc6ed3d-2e47-4945-a316-9a5304a0db3b"
+Template: "04646a89-996f-4ee7-878a-ffdbf1f0ef0d"
+Path: /sitecore/layout/Renderings/Project/Sugcon2024/Basic Components/Text and Image
+SharedFields:
+- ID: "037fe404-dd19-4bf7-8e30-4dadf68b27b0"
+  Hint: componentName
+  Value: TextImage
+- ID: "06d5295c-ed2f-4a54-9bf2-26228d113318"
+  Hint: __Icon
+  Value: Office/32x32/newspaper.png
+- ID: "1a7c85e5-dc0b-490d-9187-bb1dbcb4c72f"
+  Hint: Datasource Template
+  Value: /sitecore/templates/Project/Sugcon2024/Basic Components/Text and Image
+- 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: "{A2E46B3A-3B3F-4096-AB3B-89A5EF2E00C6}"
+- ID: "b5b27af1-25ef-405c-87ce-369b3a004016"
+  Hint: Datasource Location
+  Value: "query:$site/*[@@name='Data']/*[@@templatename='Text and Image Folder']|query:$sharedSites/*[@@name='Data']/*[@@templatename='Text and Image 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: "a6cfdb16-0f25-4c13-a3a1-ff776d7a7ec8"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240220T150827Z
+- 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/...n2024/items/Templates/Sugcon2024/Basic Components/Rendering Parameters/Text and Image.yml b/...n2024/items/Templates/Sugcon2024/Basic Components/Rendering Parameters/Text and Image.yml
@@ -0,0 +1,131 @@
+---
+ID: "a2e46b3a-3b3f-4096-ab3b-89a5ef2e00c6"
+Parent: "386b9c07-16a9-4475-b1c1-6a18cb694635"
+Template: "ab86861a-6030-46c5-b394-e8f99e8b87db"
+Path: /sitecore/templates/Project/Sugcon2024/Basic Components/Rendering Parameters/Text and Image
+SharedFields:
+- ID: "06d5295c-ed2f-4a54-9bf2-26228d113318"
+  Hint: __Icon
+  Value: office/32x32/star.png
+- ID: "12c33f3f-86c5-43a5-aeb4-5598cec45116"
+  Hint: __Base template
+  Value: |
+    {4247AAD4-EBDE-4994-998F-E067A51B1FE4}
+    {5C74E985-E055-43FF-B28C-DB6C6A6450A2}
+    {44A022DB-56D3-419A-B43B-E27E4D8E9C41}
+    {3DB3EB10-F8D0-4CC9-BE26-18CE7B139EC8}
+- ID: "9c6106ea-7a5a-48e2-8cad-f0f693b1e2d4"
+  Hint: __Read Only
+  Value: 0
+- ID: "f7d48a55-2158-4f02-9356-756654404f73"
+  Hint: __Standard values
+  Value: "{B3D6330A-19DA-47C7-B389-C91CCFAFEE8F}"
+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: 20211012T120926Z
+    - ID: "5dd74568-4d4b-44c1-b513-0af5f4cda34f"
+      Hint: __Created by
+      Value: |
+        sitecore\JssImport
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "ede72ad3-c07b-4673-829f-d9b0c86ad320"
+    - ID: "badd9cf9-53e0-4d0c-bcc0-2d784c282f6a"
+      Hint: __Updated by
+      Value: |
+        sitecore\UOUBIWQRx7
+    - ID: "d9cf14b1-fa16-4ba6-9288-e8a174d4d522"
+      Hint: __Updated
+      Value: 20240220T150145Z
+- 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