1094 lines
33 KiB
TypeScript
1094 lines
33 KiB
TypeScript
import Alert, { EAlertVariant } from "@Front/Components/DesignSystem/Alert";
|
|
import Autocomplete from "@Front/Components/DesignSystem/Autocomplete";
|
|
import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect";
|
|
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
import CheckboxesInputElement from "@Front/Components/DesignSystem/CheckBox";
|
|
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
|
|
import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
|
|
import Dropdown from "@Front/Components/DesignSystem/Dropdown";
|
|
import Footer from "@Front/Components/DesignSystem/Footer";
|
|
import Form from "@Front/Components/DesignSystem/Form";
|
|
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
|
|
import TextField from "@Front/Components/DesignSystem/Form/TextField";
|
|
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
|
|
import Menu from "@Front/Components/DesignSystem/Menu";
|
|
import Modal from "@Front/Components/DesignSystem/Modal";
|
|
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
|
|
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
|
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
|
|
import DropdownNavigation from "@Front/Components/DesignSystem/SearchBlockList/DropdownNavigation";
|
|
import Separator, { ESeperatorColor, ESeperatorDirection } from "@Front/Components/DesignSystem/Separator";
|
|
import Table from "@Front/Components/DesignSystem/Table";
|
|
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
|
|
import Toggle, { EToggleSize } from "@Front/Components/DesignSystem/Toggle";
|
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import NumberPicker from "@Front/Components/Elements/NumberPicker";
|
|
import Tabs from "@Front/Components/Elements/Tabs";
|
|
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
|
import useOpenable from "@Front/Hooks/useOpenable";
|
|
import {
|
|
ArchiveBoxIcon,
|
|
ArrowLongLeftIcon,
|
|
ArrowLongRightIcon,
|
|
EllipsisHorizontalIcon,
|
|
PencilSquareIcon,
|
|
UsersIcon,
|
|
XMarkIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
import { useCallback, useMemo, useState } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import { ToasterService } from "@Front/Components/DesignSystem/Toaster";
|
|
|
|
export default function DesignSystem() {
|
|
const { isOpen, open, close } = useOpenable();
|
|
const userDb = useMemo(
|
|
() => [
|
|
{
|
|
username: "Maxime",
|
|
id: 1,
|
|
},
|
|
{
|
|
username: "Vincent",
|
|
id: 2,
|
|
},
|
|
{
|
|
username: "Massi",
|
|
id: 3,
|
|
},
|
|
{
|
|
username: "Maxime",
|
|
id: 4,
|
|
},
|
|
{
|
|
username: "Arnaud",
|
|
id: 5,
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
const userDbArray = useMemo(
|
|
() =>
|
|
userDb.map((user) => ({
|
|
label: user.username,
|
|
key: user.id.toString(),
|
|
value: user,
|
|
})),
|
|
[userDb],
|
|
);
|
|
|
|
const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);
|
|
|
|
const onSelect = useCallback((value: (typeof userDb)[number]) => {
|
|
setSelectedTab(value);
|
|
}, []);
|
|
|
|
return (
|
|
<DefaultTemplate title={"DesignSystem"}>
|
|
<Newsletter isOpen={false} />
|
|
<div className={classes["root"]}>
|
|
<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
|
|
<div className={classes["components"]}>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Toast</Typography>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().text({ title: "Title toaster", description: "Description" })}>
|
|
Send Toast
|
|
</Button>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().info({ title: "Title toaster", description: "Description" })}>
|
|
Send Toast Info
|
|
</Button>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().success({ title: "Title toaster", description: "Description" })}>
|
|
Send Toast Success
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().warning({ title: "Title toaster", description: "Description" })}>
|
|
Send Toast Warning
|
|
</Button>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().error({ title: "Title toaster", description: "Description" })}>
|
|
Send Toast Error
|
|
</Button>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().loading({ title: "Title toaster", description: "Description" })}>
|
|
Send Toast Loading
|
|
</Button>
|
|
</div>
|
|
<Button
|
|
size={EButtonSize.SM}
|
|
onClick={() => ToasterService.getInstance().loggedOut({ title: "Title toaster", description: "Description" })}>
|
|
Logged Out
|
|
</Button>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Drag and Drop</Typography>
|
|
<DragAndDrop name="test" title="Upload de document" description="Description" />
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Separators</Typography>
|
|
<div className={classes["rows"]}>
|
|
<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.HORIZONTAL} />
|
|
<Separator color={ESeperatorColor.LIGHT} direction={ESeperatorDirection.HORIZONTAL} />
|
|
<Separator color={ESeperatorColor.STRONG} direction={ESeperatorDirection.HORIZONTAL} />
|
|
<Separator color={ESeperatorColor.CONTRAST} direction={ESeperatorDirection.HORIZONTAL} />
|
|
</div>
|
|
<div className={classes["rows"]} style={{ height: 70, justifyContent: "space-around" }}>
|
|
<Separator color={ESeperatorColor.DEFAULT} direction={ESeperatorDirection.VERTICAL} />
|
|
<Separator color={ESeperatorColor.LIGHT} direction={ESeperatorDirection.VERTICAL} />
|
|
<Separator color={ESeperatorColor.STRONG} direction={ESeperatorDirection.VERTICAL} />
|
|
<Separator color={ESeperatorColor.CONTRAST} direction={ESeperatorDirection.VERTICAL} />
|
|
</div>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Checkboxes</Typography>
|
|
<div className={classes["rows"]}>
|
|
<CheckboxesInputElement
|
|
option={{
|
|
label: "Default",
|
|
value: "all",
|
|
description: "Description",
|
|
}}
|
|
toolTip="test"
|
|
/>
|
|
<CheckboxesInputElement
|
|
option={{
|
|
label: "Checked",
|
|
value: "all",
|
|
description: "Description",
|
|
}}
|
|
toolTip="test"
|
|
checked={true}
|
|
/>
|
|
<CheckboxesInputElement
|
|
option={{
|
|
label: "Disabled",
|
|
value: "all",
|
|
description: "Description",
|
|
}}
|
|
toolTip="test"
|
|
disabled={true}
|
|
/>
|
|
<CheckboxesInputElement
|
|
option={{
|
|
label: "Checked & Disabled",
|
|
value: "all",
|
|
description: "Description",
|
|
}}
|
|
toolTip="test"
|
|
checked={true}
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Radio boxes</Typography>
|
|
<div className={classes["rows"]}>
|
|
<RadioBox name="document" value={"new client"} description="Test" label="Créer un document" toolTip="test" />
|
|
<RadioBox
|
|
name="document"
|
|
value={"new client"}
|
|
description="Test"
|
|
label="Créer un document"
|
|
toolTip="test"
|
|
defaultChecked={true}
|
|
/>
|
|
<RadioBox
|
|
name="document"
|
|
value={"new client"}
|
|
description="Test"
|
|
label="Créer un document"
|
|
toolTip="test"
|
|
disabled={true}
|
|
/>
|
|
<RadioBox
|
|
name="document"
|
|
value={"new client"}
|
|
description="Test"
|
|
label="Créer un document"
|
|
toolTip="test"
|
|
checked={true}
|
|
disabled={true}
|
|
/>
|
|
</div>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Toggle</Typography>
|
|
<div className={classes["rows"]}>
|
|
<Toggle size={EToggleSize.MD} />
|
|
<Toggle size={EToggleSize.MD} defaultActive />
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Toggle size={EToggleSize.SM} />
|
|
<Toggle size={EToggleSize.SM} defaultActive />
|
|
</div>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Autocomplete Multi Select</Typography>
|
|
|
|
<AutocompleteMultiSelect
|
|
options={[
|
|
{
|
|
id: "1",
|
|
label: "Option 1",
|
|
},
|
|
{
|
|
id: "2",
|
|
label: "Option 2",
|
|
},
|
|
{
|
|
id: "3",
|
|
label: "Option 3",
|
|
},
|
|
{
|
|
id: "4",
|
|
label: { text: "Option 4", subtext: "Subtext" },
|
|
},
|
|
]}
|
|
label="Label"
|
|
/>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Autocomplete</Typography>
|
|
<Autocomplete
|
|
options={[
|
|
{
|
|
id: "1",
|
|
label: "Option 1",
|
|
},
|
|
{
|
|
id: "2",
|
|
label: "Option 2",
|
|
},
|
|
{
|
|
id: "3",
|
|
label: "Option 3",
|
|
},
|
|
{
|
|
id: "4",
|
|
label: { text: "Option 4", subtext: "Subtext" },
|
|
},
|
|
]}
|
|
label="Label"
|
|
/>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Dropdown</Typography>
|
|
<Dropdown
|
|
options={[
|
|
{
|
|
id: "1",
|
|
label: "Option 1",
|
|
},
|
|
{
|
|
id: "2",
|
|
label: "Option 2",
|
|
},
|
|
{
|
|
id: "3",
|
|
label: "Option 3",
|
|
},
|
|
{
|
|
id: "4",
|
|
label: { text: "Option 4", subtext: "Subtext" },
|
|
},
|
|
]}
|
|
placeholder="Placeholder"
|
|
label="Label"
|
|
/>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Navigation latérale</Typography>
|
|
<SearchBlockList
|
|
blocks={[
|
|
{
|
|
id: "1",
|
|
primaryText: "Folder 1",
|
|
isActive: true,
|
|
secondaryText: "Secondary folder 1",
|
|
showAlert: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
primaryText: "Folder 2",
|
|
isActive: false,
|
|
secondaryText: "Secondary folder 2",
|
|
showAlert: false,
|
|
},
|
|
{
|
|
id: "3",
|
|
primaryText: "Folder 3",
|
|
isActive: false,
|
|
secondaryText: "Secondary folder 3",
|
|
showAlert: false,
|
|
},
|
|
{
|
|
id: "4",
|
|
primaryText: "Folder 4",
|
|
isActive: false,
|
|
secondaryText: "Secondary folder 4",
|
|
showAlert: false,
|
|
},
|
|
]}
|
|
onSelectedBlock={() => {}}
|
|
bottomButton={{
|
|
link: "/",
|
|
text: "Créer un dossier",
|
|
}}
|
|
/>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Dropdown navigation</Typography>
|
|
<DropdownNavigation
|
|
blocks={[
|
|
{
|
|
id: "1",
|
|
primaryText: "Folder 1",
|
|
isActive: true,
|
|
secondaryText: "Secondary folder 1",
|
|
showAlert: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
primaryText: "Folder 2",
|
|
isActive: false,
|
|
secondaryText: "Secondary folder 2",
|
|
showAlert: false,
|
|
},
|
|
{
|
|
id: "3",
|
|
primaryText: "Folder 3",
|
|
isActive: false,
|
|
secondaryText: "Secondary folder 3",
|
|
showAlert: false,
|
|
},
|
|
{
|
|
id: "4",
|
|
primaryText: "Folder 4",
|
|
isActive: false,
|
|
secondaryText: "Secondary folder 4",
|
|
showAlert: false,
|
|
},
|
|
]}
|
|
onSelectedBlock={() => {}}
|
|
/>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Button icon with menu</Typography>
|
|
<Menu
|
|
items={[
|
|
{
|
|
icon: <UsersIcon />,
|
|
text: "Modifier les collaborateurs",
|
|
onClick: () => alert("yo"),
|
|
hasSeparator: true,
|
|
},
|
|
{
|
|
icon: <PencilSquareIcon />,
|
|
text: "Modifier les informations du dossier",
|
|
link: "/",
|
|
hasSeparator: true,
|
|
},
|
|
{
|
|
icon: <ArchiveBoxIcon />,
|
|
text: "Archiver le dossier",
|
|
link: "/",
|
|
color: ETypoColor.ERROR_WEAK_CONTRAST,
|
|
},
|
|
]}>
|
|
<IconButton icon={<EllipsisHorizontalIcon />} variant={EIconButtonVariant.NEUTRAL} />
|
|
</Menu>
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
|
|
<Typography typo={ETypo.TEXT_SM_REGULAR}>Number picker avec min à 1 et max à 10</Typography>
|
|
<NumberPicker defaultValue={1} onChange={() => {}} min={1} max={10} />
|
|
<Form className={classes["inputs"]}>
|
|
<TextField label="Label" placeholder="Placeholder" canCopy />
|
|
<TextField label="Without copy" placeholder="Placeholder" />
|
|
<TextField label="Disabled" placeholder="Placeholder" disabled canCopy />
|
|
<TextField label="Disabled without copy" placeholder="Placeholder" disabled />
|
|
<TextAreaField label="Textarea" placeholder="Placeholder" />
|
|
</Form>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
|
|
<Button onClick={open}>Open Modal</Button>
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={close}
|
|
title={"Modal"}
|
|
firstButton={{ children: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
secondButton={{ children: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
|
|
<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
|
|
</Modal>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
|
|
<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR}>
|
|
{selectedTab.id} - {selectedTab.username}
|
|
</Typography>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
|
|
<div className={classes["rows"]}>
|
|
<CircleProgress percentage={0} />
|
|
<CircleProgress percentage={30} />
|
|
<CircleProgress percentage={60} />
|
|
<CircleProgress percentage={100} />
|
|
</div>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
|
|
<div className={classes["rows"]}>
|
|
<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
|
|
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
|
|
<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
|
|
<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
|
|
<Tag color={ETagColor.NEUTRAL} variant={ETagVariant.REGULAR} label="Envoyé" />
|
|
</div>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
|
|
<div className={classes["rows"]}>
|
|
<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
|
|
<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
|
|
<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
|
|
<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
|
|
<Tag color={ETagColor.NEUTRAL} variant={ETagVariant.SEMI_BOLD} label="ENVOYÉ" />
|
|
</div>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Table</Typography>
|
|
<Table
|
|
className={classes["table"]}
|
|
header={[
|
|
{
|
|
key: "name",
|
|
title: "Nom",
|
|
},
|
|
{
|
|
key: "firstname",
|
|
title: "Prénom",
|
|
},
|
|
{
|
|
key: "button",
|
|
},
|
|
]}
|
|
rows={[
|
|
{
|
|
key: "1",
|
|
name: "Doe",
|
|
firstname: "John",
|
|
button: (
|
|
<Button size={EButtonSize.SM} variant={EButtonVariant.PRIMARY}>
|
|
Send email
|
|
</Button>
|
|
),
|
|
},
|
|
{
|
|
key: "2",
|
|
name: "Doe",
|
|
firstname: "Jane",
|
|
button: <Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="Actif" />,
|
|
},
|
|
{
|
|
key: "3",
|
|
name: "Doe",
|
|
firstname: "Jack",
|
|
button: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="Inactif" />,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
size={EButtonSize.SM}>
|
|
Primary SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Primary SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Primary SM
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
size={EButtonSize.MD}>
|
|
Primary MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Primary MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Primary MD
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
size={EButtonSize.LG}>
|
|
Primary LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Primary LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.PRIMARY}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Primary LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
size={EButtonSize.SM}>
|
|
Secondary SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Secondary SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Secondary SM
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
size={EButtonSize.MD}>
|
|
Secondary MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Secondary MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Secondary MD
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
size={EButtonSize.LG}>
|
|
Secondary LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Secondary LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SECONDARY}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Secondary LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
size={EButtonSize.SM}>
|
|
Neutral SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Neutral SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Neutral SM
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
size={EButtonSize.MD}>
|
|
Neutral MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Neutral MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Neutral MD
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
size={EButtonSize.LG}>
|
|
Neutral LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Neutral LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.NEUTRAL}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Neutral LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
size={EButtonSize.SM}>
|
|
Error SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Error SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Error SM
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
size={EButtonSize.MD}>
|
|
Error MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Error MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Error MD
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
size={EButtonSize.LG}>
|
|
Error LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Error LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.ERROR}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Error LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
size={EButtonSize.SM}>
|
|
Warning SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Warning SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Warning SM
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
size={EButtonSize.MD}>
|
|
Warning MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Warning MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Warning MD
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
size={EButtonSize.LG}>
|
|
Warning LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Warning LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.WARNING}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Warning LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
size={EButtonSize.SM}>
|
|
Success SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Success SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Success SM
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
size={EButtonSize.MD}>
|
|
Success MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Success MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Success MD
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
size={EButtonSize.LG}>
|
|
Success LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Success LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.SUCCESS}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Success LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
size={EButtonSize.SM}>
|
|
Info SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.SM}>
|
|
Info SM
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.SM}>
|
|
Info SM
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
size={EButtonSize.MD}>
|
|
Info MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.MD}>
|
|
Info MD
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.MD}>
|
|
Info MD
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={classes["rows"]}>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
size={EButtonSize.LG}>
|
|
Info LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.OUTLINED}
|
|
size={EButtonSize.LG}>
|
|
Info LG
|
|
</Button>
|
|
<Button
|
|
leftIcon={<ArrowLongLeftIcon />}
|
|
rightIcon={<ArrowLongRightIcon />}
|
|
variant={EButtonVariant.INFO}
|
|
styletype={EButtonstyletype.TEXT}
|
|
size={EButtonSize.LG}>
|
|
Info LG
|
|
</Button>
|
|
</div>
|
|
<div className={classes["rows"]}>
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.DEFAULT} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.NEUTRAL} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.PRIMARY} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.ERROR} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.SUCCESS} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.WARNING} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} />
|
|
<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} disabled />
|
|
</div>
|
|
|
|
<Typography typo={ETypo.TEXT_LG_BOLD}>Alerts</Typography>
|
|
<Alert
|
|
title="Alert line which displays the main function or reason of the alert."
|
|
description="Description"
|
|
firstButton={{
|
|
children: "Button",
|
|
leftIcon: <ArrowLongLeftIcon />,
|
|
rightIcon: <ArrowLongRightIcon />,
|
|
}}
|
|
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
variant={EAlertVariant.INFO}
|
|
closeButton
|
|
/>
|
|
<Alert
|
|
title="Alert line which displays the main function or reason of the alert."
|
|
description="Description"
|
|
firstButton={{
|
|
children: "Button",
|
|
leftIcon: <ArrowLongLeftIcon />,
|
|
rightIcon: <ArrowLongRightIcon />,
|
|
}}
|
|
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
variant={EAlertVariant.ERROR}
|
|
/>
|
|
<Alert
|
|
title="Alert line which displays the main function or reason of the alert."
|
|
description="Description"
|
|
firstButton={{
|
|
children: "Button",
|
|
leftIcon: <ArrowLongLeftIcon />,
|
|
rightIcon: <ArrowLongRightIcon />,
|
|
}}
|
|
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
variant={EAlertVariant.WARNING}
|
|
/>
|
|
<Alert
|
|
title="Alert line which displays the main function or reason of the alert."
|
|
description="Description"
|
|
firstButton={{
|
|
children: "Button",
|
|
leftIcon: <ArrowLongLeftIcon />,
|
|
rightIcon: <ArrowLongRightIcon />,
|
|
}}
|
|
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
variant={EAlertVariant.SUCCESS}
|
|
/>
|
|
<Alert
|
|
title="Alert line which displays the main function or reason of the alert."
|
|
description="Description"
|
|
firstButton={{
|
|
children: "Button",
|
|
leftIcon: <ArrowLongLeftIcon />,
|
|
rightIcon: <ArrowLongRightIcon />,
|
|
}}
|
|
secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
|
|
variant={EAlertVariant.NEUTRAL}
|
|
/>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
</DefaultTemplate>
|
|
);
|
|
}
|