Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react): fix doc issues #307

Merged
merged 2 commits into from
Nov 6, 2024
Merged

fix(react): fix doc issues #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4130784
fix(primitives): update invalid default dark primary color
brionmario Nov 5, 2024
8795516
chore(react): update asset base paths
brionmario Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions packages/primitives/src/design-tokens/oxygen/dark.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
},
Expand Down Expand Up @@ -63,7 +63,7 @@
"type": "color"
},
"primary": {
"value": "#75f0e1",
"value": "#cc4100",
"type": "color"
}
},
Expand All @@ -89,7 +89,7 @@
"type": "color"
},
"primary": {
"value": "#47ebd8",
"value": "#ff5100",
"type": "color"
},
"gray": {
Expand Down Expand Up @@ -228,7 +228,7 @@
"background": {
"primary": {
"default": {
"value": "#47ebd8",
"value": "#ff5100",
"type": "color"
}
},
Expand Down Expand Up @@ -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"
}
}
}
30 changes: 15 additions & 15 deletions packages/react/src/components/AccountOverview/AccountOverview.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]'
},
Expand All @@ -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>
}
],
Expand All @@ -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]',
}}
Expand All @@ -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]'
},
Expand All @@ -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>
}
],
Expand All @@ -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({})}
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/ActionCard/ActionCard.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({})}
Expand All @@ -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" />}
/>
);
}`}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />}
/>
);

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Avatar/Avatar.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions packages/react/src/components/Carousel/Carousel.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({})}
Expand Down Expand Up @@ -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" />,
}
]}
/>
Expand Down
6 changes: 3 additions & 3 deletions .../react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
}}
>
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/Header/Header.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]',
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Image/Image.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions packages/react/src/components/SignIn/SignIn.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
Loading