Merge pull request #307 from brionmario/fix-docs

fix(react): fix doc issues
wso2 · Nov 6, 2024 · 482894a · 482894a
2 parents e10a6e1 + 8795516
commit 482894a
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 43 deletions.
diff --git a/packages/primitives/src/design-tokens/oxygen/dark.tokens.json b/packages/primitives/src/design-tokens/oxygen/dark.tokens.json
@@ -3,23 +3,23 @@
     "colors": {
       "primary": {
         "lighter": {
-          "value": "#14b8a5",
+          "value": "#ff9666",
           "type": "color"
         },
         "light": {
-          "value": "#19e6ce",
+          "value": "#ff7433",
           "type": "color"
         },
         "default": {
-          "value": "#47ebd8",
+          "value": "#ff5100",
           "type": "color"
         },
         "dark": {
-          "value": "#75f0e1",
+          "value": "#cc4100",
           "type": "color"
         },
         "darker": {
-          "value": "#a3f5eb",
+          "value": "#993000",
           "type": "color"
         }
       },
@@ -63,7 +63,7 @@
           "type": "color"
         },
         "primary": {
-          "value": "#75f0e1",
+          "value": "#cc4100",
           "type": "color"
         }
       },
@@ -89,7 +89,7 @@
           "type": "color"
         },
         "primary": {
-          "value": "#47ebd8",
+          "value": "#ff5100",
           "type": "color"
         },
         "gray": {
@@ -228,7 +228,7 @@
           "background": {
             "primary": {
               "default": {
-                "value": "#47ebd8",
+                "value": "#ff5100",
                 "type": "color"
               }
             },
@@ -327,4 +327,4 @@
     "value": "https://raw.githubusercontent.com/brionmario/oxygen/main/examples/multi-brand-identity/public/assets/brands/oxygen/images/oxygen-logo-inverted.svg",
     "type": "asset"
   }
-}
+}
diff --git a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx
@@ -34,9 +34,9 @@ It includes the user's profile picture, name, email, account progress and accoun
     name="Overview"
     args={{
       title: <Typography variant="h5">Welcome Mathew</Typography>,
-      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, 
+      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>,
       user:{
-        image: '/assets/images/avatar-john.svg',
+        image: 'assets/images/avatar-john.svg',
         name: 'Matthew',
         email: '[email protected]'
       },
@@ -46,19 +46,19 @@ It includes the user's profile picture, name, email, account progress and accoun
         {
           title: 'Add your email address',
           description: 'You can add your email address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Email</Button>
         },
         {
           title: 'Add your phone number',
           description: 'You can add your phone number to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Phone</Button>
         },
         {
           title: 'Add your address',
           description: 'You can add your address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Address</Button>
         }
       ],
@@ -85,7 +85,7 @@ import AccountOverview from '@oxygen-ui/react/AccountOverview';\n
 function Demo() {
   return <AccountOverview
             user={{
-              image: '/assets/images/avatar-john.svg',
+              image: 'assets/images/avatar-john.svg',
               name: 'Matthew',
               email: '[email protected]',
             }}
@@ -104,9 +104,9 @@ function Demo() {
     name="Incomplete"
     args={{
       title: <Typography variant="h5">Welcome Mathew</Typography>,
-      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, 
+      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>,
       user:{
-        image: '/assets/images/avatar-john.svg',
+        image: 'assets/images/avatar-john.svg',
         name: 'Matthew',
         email: '[email protected]'
       },
@@ -116,19 +116,19 @@ function Demo() {
         {
           title: 'Add your email address',
           description: 'You can add your email address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Email</Button>
         },
         {
           title: 'Add your phone number',
           description: 'You can add your phone number to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Phone</Button>
         },
         {
           title: 'Add your address',
           description: 'You can add your address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Address</Button>
         }
       ],
@@ -145,15 +145,15 @@ function Demo() {
     name="Complete"
     args={{
       title: <Typography variant="h5">Welcome Mathew</Typography>,
-      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, 
+      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>,
       user:{
-        image: '/assets/images/avatar-john.svg',
+        image: 'assets/images/avatar-john.svg',
         name: 'Matthew',
         email: '[email protected]'
       },
       accountCompletionStepsTitle: "Complete your Profile. It's at 60%",
-      accountProgress: 100, 
-      illustration: <img src="/assets/images/action-card-image.svg" alt="image" /> 
+      accountProgress: 100,
+      illustration: <img src="assets/images/action-card-image.svg" alt="image" />
     }}
   >
     {Template.bind({})}

diff --git a/packages/react/src/components/ActionCard/ActionCard.stories.mdx b/packages/react/src/components/ActionCard/ActionCard.stories.mdx
@@ -28,7 +28,7 @@ Action cards can be used in overview pages or dashboards.
     description: "Configure additional authentications to sign in easily or to add an extra layer of security to your account.",
     actionText: "Setup MFA",
     onActionClick:() => {alert("Action clicked")},
-    image: <img src="/assets/images/action-card-image.svg" alt="action card" />,
+    image: <img src="assets/images/action-card-image.svg" alt="action card" />,
     variant: "outlined"
   }}>
     {Template.bind({})}
@@ -55,7 +55,7 @@ function Demo() {
       description="Action Card Description."
       actionText="Action Card Action Text"
       onActionClick={() => {alert("Action clicked")}}
-      image={<img src="/assets/images/action-card-image.svg" alt="action card" />}
+      image={<img src="assets/images/action-card-image.svg" alt="action card" />}
     />
   );
 }`}

diff --git a/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx b/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx
@@ -31,7 +31,7 @@ const ActionCardTestComponent: ReactElement = (
     }
     actionText="Setup MFA"
     onActionClick={onActionClick}
-    image={<img src="/assets/images/action-card-image.svg" alt="action card" />}
+    image={<img src="assets/images/action-card-image.svg" alt="action card" />}
   />
 );
 

diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ActionCard should match the snapshot 1`] = `
       >
         <img
           alt="action card"
-          src="/assets/images/action-card-image.svg"
+          src="assets/images/action-card-image.svg"
         />
         <h6
           class="MuiTypography-root MuiTypography-subtitle1 oxygen-typography css-n2qzog-MuiTypography-root"

diff --git a/packages/react/src/components/Avatar/Avatar.stories.mdx b/packages/react/src/components/Avatar/Avatar.stories.mdx
@@ -30,7 +30,7 @@ The Avatar can be used to mainly display profile pictures of users and can be us
 <Canvas>
   <Story
     name="Overview"
-    args={{src: '/assets/images/avatar-menu.svg'}}
+    args={{src: 'assets/images/avatar-menu.svg'}}
   >
     {Template.bind({})}
   </Story>

diff --git a/packages/react/src/components/Carousel/Carousel.stories.mdx b/packages/react/src/components/Carousel/Carousel.stories.mdx
@@ -33,16 +33,16 @@ Carousel can be used to slide through content.
               action: <Button variant="outlined" onClick={()=>{}}>Add First Name</Button>,
               title: "What is your first name?",
               description: "Start theming journey with Oxygen UI",
-              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
             },
             {
               action: <Button variant="outlined" onClick={()=>{}}>Add Last Name</Button>,
               title: "What is your last name?",
               description: "Start theming journey with Oxygen UI",
-              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
             }
       ],
-      title: <Typography>Complete your Profile. It’s at 60%</Typography> 
+      title: <Typography>Complete your Profile. It’s at 60%</Typography>
     }}
   >
     {Template.bind({})}
@@ -71,7 +71,7 @@ function Demo() {
               action: <Button variant="outlined" color="primary" onClick={()=>{}}>Add Last Name</Button>,
               title: "What is your first name?",
               description: "Start theming journey with Oxygen UI",
-              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
             }
         ]}
     />

diff --git a/.../react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx b/.../react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx
@@ -27,10 +27,10 @@ The Avatar with circular progress and badge.
     name="Overview"
     args={{color: 'warning',
     progress: 70,
-    badgeOptions: {color: 'primary', badgeContent: '70%'}, 
+    badgeOptions: {color: 'primary', badgeContent: '70%'},
     avatarOptions: {
-      src: '/assets/images/avatar-john.svg', 
-      alt:'avatar', 
+      src: 'assets/images/avatar-john.svg',
+      alt:'avatar',
       }
     }}
   >

diff --git a/packages/react/src/components/Header/Header.stories.mdx b/packages/react/src/components/Header/Header.stories.mdx
@@ -30,14 +30,14 @@ navigation, and actions.
 export const basicHeaderVariationOptions = {
   brand: {
     logo: {
-      desktop: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
-      mobile: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
+      desktop: <img src="assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
+      mobile: <img src="assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
     },
     onClick: () => null,
     title: 'OxygenUI',
   },
   user: {
-    image: '/assets/images/avatar-john.svg',
+    image: 'assets/images/avatar-john.svg',
     name: 'Matthew',
     email: '[email protected]',
   },

diff --git a/packages/react/src/components/Image/Image.stories.mdx b/packages/react/src/components/Image/Image.stories.mdx
@@ -26,7 +26,7 @@ Image.
 <Canvas>
   <Story
     name="Overview"
-    args={{src: 'https://oxygen-ui.vercel.app/assets/images/oxygen-ui/oxygen-ui-logo.svg'}}
+    args={{src: 'assets/images/oxygen-ui/oxygen-ui-logo.svg'}}
   >
     {Template.bind({})}
   </Story>

diff --git a/packages/react/src/components/SignIn/SignIn.stories.mdx b/packages/react/src/components/SignIn/SignIn.stories.mdx
@@ -25,7 +25,7 @@ export const Template = args => <SignIn {...args} />;
 Full-featured component to sign in users into your application.
 
 <Canvas>
-  <Story name="Overview" args={{logoUrl: '/assets/images/oxygen-ui-logo-mini.svg'}}>
+  <Story name="Overview" args={{logoUrl: 'assets/images/oxygen-ui-logo-mini.svg'}}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -56,7 +56,7 @@ function Demo() {
 A basic login box with username and password inputs.
 
 <Canvas>
-  <Story name="Basic" args={{logoUrl: '/assets/images/oxygen-ui-logo-mini.svg'}} />
+  <Story name="Basic" args={{logoUrl: 'assets/images/oxygen-ui-logo-mini.svg'}} />
 </Canvas>
 
 ### With Sign In Options
@@ -95,7 +95,7 @@ export const GoogleIcon = (props) => {
   <Story
     name="With Sign In Options"
     args={{
-      logoUrl: '/assets/images/oxygen-ui-logo-mini.svg',
+      logoUrl: 'assets/images/oxygen-ui-logo-mini.svg',
       signInOptions: (
         <>
           <Button