Merge pull request #5358 from Sandeep-FED/dev-new

pnp · Jan 13, 2025 · 6f75d1f · 6f75d1f
2 parents 4f2eded + eed28bb
commit 6f75d1f
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 27 deletions.
diff --git a/samples/react-modern-carousel/README.md b/samples/react-modern-carousel/README.md
@@ -54,7 +54,7 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
 | Version | Date             | Comments                            |
 | ------- | ---------------- | ----------------------------------- |
 | 1.0     | March 16, 2024   | Initial release                     |
-| 1.1     | October 19, 2024 | Upgrade to SPFx 1.20 & misc changes |
+| 1.1     | October 19, 2024 | Upgrade to SPFx 1.20 & misc. changes |
 | 2.0     | November 1, 2024 | New feature: card styles & animations |
 
 ## Minimal Path to Awesome⚡
@@ -85,7 +85,7 @@ Key features demonstrated by this solution:
 ## References
 
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development.
-- [SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 - [PnP JS](https://pnp.github.io/pnpjs/)
 - [PnP React Hooks](https://superioone.github.io/pnp-react-hooks/)
 - [SwiperJS](https://swiperjs.com)

diff --git a/samples/react-modern-carousel/src/components/Carousel.tsx b/samples/react-modern-carousel/src/components/Carousel.tsx
@@ -57,7 +57,20 @@ export const Carousel = (): JSX.Element => {
   const moduleType =
     contextInfo.cardType === "coverEffect" ? EffectCoverflow : EffectCards
 
-  console.log("module type", moduleType)
+  console.log("card style", contextInfo.cardStyle)
+
+  const cardStyles =
+    contextInfo.cardStyle === "rounded"
+      ? {
+          width: "400px",
+          height: "400px",
+          borderRadius: "100%",
+        }
+      : {
+          width: "300px",
+          height: "400px",
+          borderRadius: "9px",
+        }
 
   return (
     <div className={styles.container}>
@@ -76,8 +89,8 @@ export const Carousel = (): JSX.Element => {
           coverflowEffect={{
             rotate: 0,
             stretch: 0,
-            depth: 100,
-            modifier: 2.5,
+            depth: 120,
+            modifier: 3.5,
           }}
           keyboard={{ enabled: true }}
           mousewheel={{
@@ -100,13 +113,7 @@ export const Carousel = (): JSX.Element => {
         >
           {awardList?.map((user, index) => (
             <SwiperSlide key={index}>
-              <Card
-                style={{
-                  width: "300px",
-                  height: "400px",
-                  borderRadius: "8px",
-                }}
-              >
+              <Card style={cardStyles}>
                 <CardPreview style={{ height: "inherit" }}>
                   <img src={user.ImageUrl} alt={user.Title} />
                 </CardPreview>

diff --git a/samples/react-modern-carousel/src/components/Content.tsx b/samples/react-modern-carousel/src/components/Content.tsx
@@ -1,31 +1,35 @@
-import * as React from "react";
-import { Text } from "@fluentui/react-components";
-import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
+import * as React from "react"
+import { Text } from "@fluentui/react-components"
+import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
 import { ContentProps } from "../types/ContentProps"
-import { useContext } from "react";
-import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition";
+import { useContext } from "react"
+import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition"
 
 export const Content = ({ user }: ContentProps): JSX.Element => {
-  const contextInfo = useContext(WebpartContext);
+  const contextInfo = useContext(WebpartContext)
 
   return (
     <section className={styles.contentWrapper}>
-      <Text size={600} weight="semibold">
+      <Text size={600} weight='semibold' className={styles.webpartTitle}>
         {contextInfo.webpartTitle}
       </Text>
       <div className={styles.contentDescriptionWrapper}>
-        <Text size={400} weight="semibold" className={styles.contentTitle}>
+        <Text size={400} weight='semibold' className={styles.contentTitle}>
           {contextInfo.contentTitle}
         </Text>
-        <Text size={300}>{contextInfo.contentDescription}</Text>
+        <Text size={300} className={styles.contentDescription}>
+          {contextInfo.contentDescription}
+        </Text>
       </div>
 
       <div className={styles.userInfo}>
-        <Text size={800} weight="semibold" className={styles.userName}>
+        <Text size={800} weight='semibold' className={styles.userName}>
           {user?.Title}
         </Text>
-        <Text size={400}>{user?.Designation}</Text>
+        <Text size={400} className={styles.designation}>
+          {user?.Designation}
+        </Text>
       </div>
     </section>
-  );
-};
+  )
+}
diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/AwardRecognitionWebPart.ts b/samples/react-modern-carousel/src/webparts/awardRecognition/AwardRecognitionWebPart.ts
@@ -24,6 +24,7 @@ export interface IAwardRecognitionWebPartProps {
   hookOptions: PnpHookGlobalOptions
   animationChoice: string
   cardType: string
+  cardStyle: string
 }
 
 export default class AwardRecognitionWebPart extends BaseClientSideWebPart<IAwardRecognitionWebPartProps> {
@@ -42,6 +43,7 @@ export default class AwardRecognitionWebPart extends BaseClientSideWebPart<IAwar
         userDisplayName: this.context.pageContext.user.displayName,
         animationChoice: this.properties.animationChoice,
         cardType: this.properties.cardType,
+        cardStyle: this.properties.cardStyle,
       })
 
     // Use helper function to create React elements.
@@ -177,6 +179,18 @@ export default class AwardRecognitionWebPart extends BaseClientSideWebPart<IAwar
                 }),
               ],
             },
+            {
+              groupName: strings.CardsStyleGroupName,
+              groupFields: [
+                PropertyPaneChoiceGroup("cardStyle", {
+                  label: "Choose card styles",
+                  options: [
+                    { key: "rounded", text: "Rounded" },
+                    { key: "roundedSquare", text: "Rounded Square" },
+                  ],
+                }),
+              ],
+            },
           ],
         },
       ],

diff --git a/...act-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.module.scss b/...act-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.module.scss
@@ -12,14 +12,21 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
 .container {
   display: flex;
 }
-
+.webpartTitle {
+  font-family: var(--fontFamilyCustomFont1500, var(--fontFamilyBase));
+}
 .contentWrapper {
   display: grid;
   gap: 3rem;
 }
 .contentTitle,
 .userName {
   color: $primaryColor;
+  font-family: var(--fontFamilyCustomFont1500, var(--fontFamilyBase));
+}
+.contentDescription,
+.designation {
+  font-family: var(--fontFamilyCustomFont800, var(--fontFamilyBase));
 }
 .asideWrapper {
   width: 30%;

diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx b/samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.tsx
@@ -13,7 +13,7 @@ export const AwardRecognition = (
     <WebpartContext.Provider value={props}>
       <FluentProvider
         theme={webLightTheme}
-        style={{ width: "100%", background: "none" }}
+        style={{ width: "100%", background: "none", margin: "0 2rem" }}
       >
         <Carousel />
       </FluentProvider>

diff --git a/.../react-modern-carousel/src/webparts/awardRecognition/components/IAwardRecognitionProps.ts b/.../react-modern-carousel/src/webparts/awardRecognition/components/IAwardRecognitionProps.ts
@@ -8,4 +8,5 @@ export interface IAwardRecognitionProps {
   userDisplayName: string
   animationChoice: string
   cardType: string
+  cardStyle: string
 }
diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/loc/en-us.js b/samples/react-modern-carousel/src/webparts/awardRecognition/loc/en-us.js
@@ -3,6 +3,7 @@ define([], function () {
     PropertyPaneDescription: "Configure this webpart",
     BasicGroupName: "Basic settings",
     CarouselControlsGroupName: "Control carousel settings",
+    CardsStyleGroupName: "Card styles",
     WebpartFieldLabel: "Heading",
     ContentTitleFieldLabel: "Sub heading",
     ContentDescriptionFieldLabel: "Sub heading description",

diff --git a/samples/react-modern-carousel/src/webparts/awardRecognition/loc/mystrings.d.ts b/samples/react-modern-carousel/src/webparts/awardRecognition/loc/mystrings.d.ts
@@ -2,6 +2,7 @@ declare interface IAwardRecognitionWebPartStrings {
   PropertyPaneDescription: string
   BasicGroupName: string
   CarouselControlsGroupName: string
+  CardsStyleGroupName: string
   ContentDescriptionFieldLabel: string
   ContentTitleFieldLabel: string
   WebpartFieldLabel: string