db26e21b88
Export a new util method `getThemesFromGlobals` to easily generate theme with its variant only by providing a partial globals object. By default it returns both available theme variants (light & dark). Through options you can prefix variant property keys, only generate theme with a subset of variant and also overrides/extend theme.
74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import React from "react";
|
||
import {
|
||
Button,
|
||
Modal,
|
||
ModalSize,
|
||
useModal,
|
||
} from "@gouvfr-lasuite/cunningham-react";
|
||
|
||
const Onboarding = () => {
|
||
const modal = useModal({
|
||
isOpenDefault: !sessionStorage.getItem("onboarded"),
|
||
});
|
||
|
||
const handleClose = () => {
|
||
sessionStorage.setItem("onboarded", "1");
|
||
modal.close();
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
size={ModalSize.MEDIUM}
|
||
isOpen={modal.isOpen}
|
||
onClose={handleClose}
|
||
closeOnClickOutside
|
||
rightActions={
|
||
<div className="onboarding__footer">
|
||
<Button
|
||
color="brand"
|
||
variant="primary"
|
||
iconPosition="right"
|
||
fullWidth={true}
|
||
onClick={handleClose}
|
||
>
|
||
Let's go!
|
||
</Button>
|
||
<Button
|
||
href="https://suitenumerique.github.io/cunningham/storybook"
|
||
color="brand"
|
||
variant="tertiary"
|
||
size="small"
|
||
icon={<span className="material-icons">open_in_new</span>}
|
||
fullWidth={true}
|
||
>
|
||
Go to the documentation
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
<header className="mb-b">
|
||
<span className="onboarding__title-icon">👋</span>
|
||
<h2 className="onboarding__title">Hey there!</h2>
|
||
<p>Welcome on the Cunningham Design System showcase.</p>
|
||
</header>
|
||
<section className="onboarding__content">
|
||
<p>
|
||
👀 Through this demo, you will be able to discover{" "}
|
||
<strong>a bunch of Cunningham components</strong>. Take a look at the{" "}
|
||
<a href="https://suitenumerique.github.io/cunningham/storybook">
|
||
documentation
|
||
</a>{" "}
|
||
to see how to use them.
|
||
</p>
|
||
<p>
|
||
🖌️ You will also discover the <strong>theme feature</strong> of the
|
||
Cunningham Design System. You can switch theme through the components
|
||
in the top right corner.
|
||
</p>
|
||
</section>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default Onboarding;
|