chore: add style id to react sdk (#782)

## Related Issues related descope/etc#4875 ## Related PRs #744 ## Description - add styleId to react sdk - add test - add readme details ## Must - [ ] Tests - [ ] Documentation (if applicable) --------- Signed-off-by: Bar Saar <[email protected]> Co-authored-by: nirgur <[email protected]>
descope · Aug 22, 2024 · 64034a2 · 64034a2
1 parent 2ed965e
commit 64034a2
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/packages/sdks/react-sdk/README.md b/packages/sdks/react-sdk/README.md
@@ -153,6 +153,11 @@ const App = () => {
             // ...
             // logger={logger}
             // ...
+
+
+            // Use a custom style name or keep empty to use the default style.
+            // styleId="my-awesome-style"
+
         />
     )
 }

diff --git a/packages/sdks/react-sdk/src/components/Descope.tsx b/packages/sdks/react-sdk/src/components/Descope.tsx
@@ -50,10 +50,11 @@ const DescopeWC = lazy(async () => {
       redirectUrl,
       client,
       form,
+      styleId,
       autoFocus,
       validateOnBlur,
     }) => (
-      <descope-wc
+	<descope-wc
         project-id={projectId}
         flow-id={flowId}
         base-url={baseUrl}
@@ -65,6 +66,7 @@ const DescopeWC = lazy(async () => {
         debug={debug}
         client={client}
         form={form}
+        style-id={styleId}
         redirect-url={redirectUrl}
         auto-focus={autoFocus}
         validate-on-blur={validateOnBlur}
@@ -92,6 +94,7 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
       autoFocus,
       validateOnBlur,
       errorTransformer,
+      styleId,
     },
     ref,
   ) => {
@@ -193,9 +196,9 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
        * it can be removed once this issue will be solved
        * https://bugs.chromium.org/p/chromium/issues/detail?id=1404106#c2
        */
-      <form>
-        <Suspense fallback={null}>
-          <DescopeWC
+	<form>
+		<Suspense fallback={null}>
+			<DescopeWC
             projectId={projectId}
             flowId={flowId}
             baseUrl={baseUrl}
@@ -210,14 +213,15 @@ const Descope = React.forwardRef<HTMLElement, DescopeProps>(
             telemetryKey={telemetryKey}
             redirectUrl={redirectUrl}
             autoFocus={autoFocus}
+            styleId={styleId}
             validateOnBlur={validateOnBlur}
             storeLastAuthenticatedUser={storeLastAuthenticatedUser}
             keepLastAuthenticatedUserAfterLogout={
               keepLastAuthenticatedUserAfterLogout
             }
           />
-        </Suspense>
-      </form>
+		</Suspense>
+	</form>
     );
   },
 );

diff --git a/packages/sdks/react-sdk/src/types.ts b/packages/sdks/react-sdk/src/types.ts
@@ -88,6 +88,7 @@ export interface IContext {
   isSessionFetched: boolean;
   projectId: string;
   baseUrl?: string;
+  styleId?: string;
   baseStaticUrl?: string;
   storeLastAuthenticatedUser?: boolean;
   keepLastAuthenticatedUserAfterLogout?: boolean;
@@ -117,6 +118,7 @@ export type DescopeProps = {
   form?: Record<string, any>;
   // use to override client context in flow execution
   client?: Record<string, any>;
+  styleId?: string;
 };
 
 export type UserManagementProps = WidgetProps;

diff --git a/packages/sdks/react-sdk/test/components/Descope.test.tsx b/packages/sdks/react-sdk/test/components/Descope.test.tsx
@@ -252,4 +252,14 @@ describe('Descope', () => {
       );
     });
   });
+
+  it('should render web-component with style id when provided', async () => {
+    renderWithProvider(<Descope flowId="flow-1" styleId="test" />);
+    await waitFor(() => {
+      expect(document.querySelector('descope-wc')).toHaveAttribute(
+        'style-id',
+        'test',
+      );
+    });
+  });
 });
diff --git a/packages/sdks/web-component/README.md b/packages/sdks/web-component/README.md
@@ -81,7 +81,7 @@ NOTE: This package is a part of a monorepo. so if you make changes in a dependen
 | storage-prefix                            | **String** - A prefix to add to the key of the local storage when persisting tokens                                                                                                                                                        | **""**        |
 | store-last-authenticated-user             | **"true"** - Stores last-authenticated user details in local storage when flow is completed</br>**"false"** - Do not store last-auth user details. Disabling this flag may cause last-authenticated user features to not function properly | **"true"**    |
 | keep-last-authenticated-user-after-logout | **"true"** - Do not clear the last authenticated user details from the browser storage after logout</br>**"false"** - Clear the last authenticated user details from the browser storage after logout                                      | **"false"**   |
-|                                           |                                                                                                                                                                                                                                            |               |
+| style-id                                  | **"String"** - Set a specific style to load rather then the default style                                                                                                                                                             | **""**        |
 
 ## Optional Properties
-Original file line number
+Diff line change
@@ Expand Up / @@ -153,6 +153,11 @@ const App = () => { @@
                 // ...
                 // logger={logger}
                 // ...
+                // Use a custom style name or keep empty to use the default style.
+                // styleId="my-awesome-style"
             />
         )
     }
@@ Expand Down @@