AB#9425 AuthorList and AuthorDetails simple variants

src/items/sxa-content/content/Verticals/Services/Home/Authors.yml

@@ -2,7 +2,7 @@
 ID: "83beea4e-5e8d-4c88-9da0-b6e2b3b421e0"
 Parent: "57f2e85d-d695-4e6c-8c89-947ce5443e2e"
 Template: "1226c3c7-2d1f-48f5-87b4-c1da459f05e5"
-Path: /sitecore/content/Verticals/Services/Home/authors
+Path: /sitecore/content/Verticals/Services/Home/Authors
 SharedFields:
 - ID: "1172f251-dad4-4efb-a329-0c63500e4f1e"
   Hint: __Masters
@@ -26,18 +26,29 @@ SharedFields:
         id="{FE5D7FDF-89C0-4D99-9AA3-B5FBD009C9F3}">
         <r
           uid="{049A0E7C-CBF3-482E-A979-9CB47F1C9B86}"
+          p:before="*"
           s:ds="8c2d6765-91be-4bd8-a0b3-4f81256e75a6"
           s:id="{69E8A90F-59CA-4638-B53E-BDCE65835230}"
           s:par="GridParameters=%7B7465D855-992E-4DC2-9855-A03250DFA74B%7D&amp;FieldNames&amp;Styles=%7C%7B7B072563-1F10-4500-8963-F2FE013CF51A%7D&amp;RenderingIdentifier&amp;CSSStyles&amp;DynamicPlaceholderId=1"
           s:ph="/headless-main/sxa-page-content/background-page-content-0-1" />
+        <r
+          uid="{7FA96229-2C53-4760-B72E-0F1BD5D4F260}"
+          p:after="r[@uid='{049A0E7C-CBF3-482E-A979-9CB47F1C9B86}']"
+          s:ds="local:/Data/Heading CTA 1"
+          s:id="{89E1D547-7CD6-4EF0-9A27-1E99410797DD}"
+          s:par="GridParameters=%7B7465D855-992E-4DC2-9855-A03250DFA74B%7D&amp;FieldNames=%7BB51C9BF5-3DC7-48A9-8B7A-EB1890FD95E6%7D&amp;Styles&amp;RenderingIdentifier&amp;CSSStyles&amp;DynamicPlaceholderId=3"
+          s:ph="headless-main" />
+        <r
+          uid="{39D26CCB-2CB5-42B1-BFA6-4D283967E86E}"
+          p:after="*[1=2]"
+          s:ds="83beea4e-5e8d-4c88-9da0-b6e2b3b421e0"
+          s:id="{69E8A90F-59CA-4638-B53E-BDCE65835230}"
+          s:par="GridParameters=%7B7465D855-992E-4DC2-9855-A03250DFA74B%7D&amp;FieldNames=%7BFDA63C49-B59D-402B-A260-99FD2C81F1BB%7D&amp;Styles=%7C%7B7EBB6C9F-C1B0-4FB3-9B52-AEEC8055D6F4%7D%7C%7BE86E740F-58D7-4151-9977-84B0382C458F%7D&amp;RenderingIdentifier&amp;CSSStyles&amp;DynamicPlaceholderId=2"
+          s:ph="headless-main" />
       </d>
     </r>
 Languages:
 - Language: en
-  Fields:
-  - ID: "b5e02ad9-d56f-4c41-a065-a133db87bdeb"
-    Hint: __Display name
-    Value: Authors
   Versions:
   - Version: 1
     Fields:
@@ -55,7 +66,7 @@ Languages:
       Value: Authors
     - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
       Hint: __Revision
-      Value: "8077af42-1c7a-4de4-95f1-c71a6f798043"
+      Value: "28d4abcb-3de5-4467-aa1a-17feb8646234"
 - Language: "fr-CA"
   Versions:
   - Version: 1

src/items/sxa-content/content/Verticals/Services/Presentation/Headless Variants/Author Details.yml

@@ -0,0 +1,13 @@
+---
+ID: "1f79dead-a422-4b15-a242-d55a20da91e9"
+Parent: "7a66a4de-85d6-4358-af3f-8c4b4aac7bd2"
+Template: "49c111d0-6867-4798-a724-1f103166e6e9"
+Path: /sitecore/content/Verticals/Services/Presentation/Headless Variants/Author Details
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "789ac7ec-d2f8-4222-b734-92b67246bf22"

src/items/sxa-content/content/Verticals/Services/Presentation/Headless Variants/Author Details/Simple.yml

@@ -0,0 +1,13 @@
+---
+ID: "5faaa36d-77f3-4b48-91d0-1b76f6e24a92"
+Parent: "1f79dead-a422-4b15-a242-d55a20da91e9"
+Template: "4d50cdae-c2d9-4de8-b080-8f992bfb1b55"
+Path: /sitecore/content/Verticals/Services/Presentation/Headless Variants/Author Details/Simple
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "b2109086-0f0d-4095-93a4-df1d66f3b1fb"

src/items/sxa-content/content/Verticals/Services/Presentation/Headless Variants/Author List/Simple.yml

@@ -0,0 +1,13 @@
+---
+ID: "fda63c49-b59d-402b-a260-99fd2c81f1bb"
+Parent: "66aff2d9-d6ba-4c10-a049-9b4047c29fc8"
+Template: "4d50cdae-c2d9-4de8-b080-8f992bfb1b55"
+Path: /sitecore/content/Verticals/Services/Presentation/Headless Variants/Author List/Simple
+Languages:
+- Language: en
+  Versions:
+  - Version: 1
+    Fields:
+    - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
+      Hint: __Revision
+      Value: "3950ef66-c5e5-46ea-ad74-1076a22c6103"

src/items/sxa-content/content/Verticals/Services/Presentation/Partial Designs/Author Content.yml

@@ -22,7 +22,7 @@ SharedFields:
           uid="{F59395FE-244D-4421-84E9-B681C40B8633}"
           p:before="*"
           s:id="{F7BB574A-E5C1-4475-A07E-0EBF590CC50E}"
-          s:par="FieldNames&RenderingIdentifier&Styles&CSSStyles&GridParameters=%7B7465D855-992E-4DC2-9855-A03250DFA74B%7D&DynamicPlaceholderId=1"
+          s:par="FieldNames=%7B5FAAA36D-77F3-4B48-91D0-1B76F6E24A92%7D&RenderingIdentifier&Styles&CSSStyles&GridParameters=%7B7465D855-992E-4DC2-9855-A03250DFA74B%7D&DynamicPlaceholderId=1"
           s:ph="headless-main" />
         <r
           uid="{4E94E9C6-404D-4A6D-B2C9-8228624577AC}"
@@ -37,9 +37,12 @@ Languages:
   Versions:
   - Version: 1
     Fields:
+    - ID: "001dd393-96c5-490b-924a-b0f25cd9efd8"
+      Hint: __Lock
+      Value: <r />
     - ID: "8cdc337e-a112-42fb-bbb4-4143751e123f"
       Hint: __Revision
-      Value: "0e6035ea-04de-4548-a3a8-d969f048fa2c"
+      Value: "a0c6be1e-9924-4452-acda-4d5f1577f4e9"
 - Language: "fr-CA"
   Versions:
   - Version: 1

src/sxastarter/src/assets/sass/components/_component-author-details.scss

@@ -24,4 +24,29 @@
   .author-bio {
     font-size: 125%;
   }
+
+  &-simple {
+    margin-top: 80px;
+    margin-bottom: 80px;
+
+    @include respond-to(mobile-large) {
+      margin-top: $component-margin;
+      padding-left: $size-padding;
+      padding-right: $size-padding;
+    }
+
+    .text-col {
+      max-width: 50rem;
+      margin-right: auto;
+    }
+
+    .img-col {
+      img {
+        border-radius: var(--roundness);
+        width: 100%;
+        aspect-ratio: 1/1;
+        object-fit: cover;
+      }
+    }
+  }
 }

src/sxastarter/src/assets/sass/components/author-list/_author-list.scss

@@ -80,4 +80,17 @@
       object-fit: cover;
     }
   }
+
+  &-simple {
+    p {
+      opacity: var(--author-position-opacity);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      aspect-ratio: 1/1;
+      object-fit: cover;
+    }
+  }
 }

src/sxastarter/src/components/PageContent/AuthorDetails.tsx

@@ -68,3 +68,33 @@ export const Default = (props: PageBackgroundProps): JSX.Element => {
     </div>
   );
 };
+
+export const Simple = (props: PageBackgroundProps): JSX.Element => {
+  const id = props.params?.RenderingIdentifier;
+  return (
+    <div
+      className={`component author-details-simple col-12 ${props.params?.styles?.trimEnd()}`}
+      id={id ? id : undefined}
+    >
+      <div className="container container-wide">
+        <div className="row g-5">
+          <div className="text-col col-lg-8">
+            <h6 className="eyebrow-accent">
+              <Text field={props.fields.Position} />
+            </h6>
+            <h1 className="display-2 fw-bold">
+              <Text field={props.fields.Name} />
+            </h1>
+
+            <div className="rich-content mb-4">
+              <RichText field={props.fields.Bio} />
+            </div>
+          </div>
+          <div className="img-col col-lg-4">
+            <Image field={props.fields.Photo} className="author-img img-fluid" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/sxastarter/src/components/PageContent/AuthorList.tsx

@@ -137,5 +137,47 @@ const AuthorListSlider = (props: AuthorListComponentProps): JSX.Element => {
   );
 };
 
+const AuthorListSimple = (props: AuthorListComponentProps): JSX.Element => {
+  const id = props.params.RenderingIdentifier;
+  const authors = props.fields?.items?.filter((item) => item.name !== 'Data');
+  const { sitecoreContext } = useSitecoreContext();
+  const isPageEditing = sitecoreContext.pageEditing;
+  const { t } = useI18n();
+
+  return (
+    <div
+      className={`component author-list author-list-simple ${props.params.styles.trimEnd()}`}
+      id={id ? id : undefined}
+    >
+      <div className="container">
+        <div className="row gx-5 row-gap-5 justify-content-between justify-content-lg-start">
+          {authors?.map((author) => (
+            <div key={author.url} className="col-sm-5 col-lg-3">
+              <div>
+                <Image field={author.fields.Photo} />
+              </div>
+              <div>
+                <h3 className="fs-4 mt-4 mb-1">
+                  <Text field={author.fields.Name}></Text>
+                </h3>
+                <h4 className="position fw-normal mb-3">
+                  <Text field={author.fields.Position} />
+                </h4>
+                <div className={`bio ${isPageEditing ? '' : 'clamped'}`}>
+                  <RichText field={author.fields.Bio}></RichText>
+                </div>
+                <Link href={author.url} className="button button-simple">
+                  {t('Read more') || 'Read more'}
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export const Default = withDatasourceCheck()<AuthorListComponentProps>(AuthorListDefault);
 export const Slider = withDatasourceCheck()<AuthorListComponentProps>(AuthorListSlider);
+export const Simple = withDatasourceCheck()<AuthorListComponentProps>(AuthorListSimple);