Skip to content

Commit

Permalink
feat(redmine 1258405): reworked DocumentDetails page and added `Res…
Browse files Browse the repository at this point in the history 
…ponsiveTabs`
  • Loading branch information
Quentin Le Caignec committed Oct 19, 2023
1 parent 9ab7be5 commit 0457fc2
Show file tree
Hide file tree
Showing 5 changed files with 416 additions and 225 deletions.
5 changes: 5 additions & 0 deletions .changeset/light-ears-shop.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@smile/react-front-kit': minor
---

Added `Document Details` example page, added `ResponsiveTabs` example to it, fixed bug on `ResponsiveTabs`
2 changes: 1 addition & 1 deletion packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const useStyles = createStyles((theme) => ({
flexDirection: 'row',
flexWrap: 'nowrap',
opacity: 0,
overflow: 'hidden',
position: 'absolute',
visibility: 'hidden',
width: '100%',
Expand Down Expand Up @@ -153,7 +154,6 @@ export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
aria-label={dropdownButtonAriaLabel}
className={classes.button}
radius="sm"
role="tab"
>
<CaretDoubleRight />
</ActionIcon>
Expand Down
3 changes: 1 addition & 2 deletions .../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
>
<div
aria-hidden="true"
class="mantine-cdxve1"
class="mantine-18k7ubd"
hidden=""
>
<button
Expand Down Expand Up @@ -103,7 +103,6 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
aria-label="Overflow Button"
class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1i00min"
id="responsive-tabs-overflow-button-target"
role="tab"
type="button"
>
<svg
Expand Down
227 changes: 227 additions & 0 deletions packages/react-front-kit/src/Pages/DocumentDetails/DocumentDetails.mock.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
import {
Button,
Card,
Checkbox,
Chip,
Divider,
Grid,
Group,
Space,
Text,
} from '@mantine/core';
import {
PencilSimple,
PencilSimpleLine,
Plus,
ShareNetwork,
TrashSimple,
} from '@phosphor-icons/react';
import { FolderMove } from '@smile/react-front-kit-shared';

export const CardAction = (
<Card padding="40px" radius="lg">
<Text fw="600" size="lg" span>
Générales
</Text>
<Space h="lg" />
<Group spacing="xs">
<Button leftIcon={<FolderMove />}>Déplacer</Button>
<Button leftIcon={<PencilSimple size={14} weight="bold" />}>
Editer le contenu
</Button>
<Button leftIcon={<PencilSimpleLine size={14} weight="bold" />}>
Annoter
</Button>
<Button leftIcon={<TrashSimple size={14} weight="bold" />}>
Supprimer
</Button>
</Group>
</Card>
);

export const CardMetadata = (
<Card padding="40px" radius="lg">
<Text fw="600" size="lg" span>
Métadonnées
</Text>
<Space h="lg" />
<Group spacing="xs">
<Button leftIcon={<PencilSimple size={14} weight="bold" />}>
Editer les métadonnées
</Button>
<Button leftIcon={<Plus size={14} weight="bold" />}>
Créer une nouvelle version
</Button>
</Group>
</Card>
);

export const CardNative = (
<Card padding="40px" radius="lg">
<Text fw="600" size="lg" span>
Native
</Text>
<Space h="lg" />
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Créer</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Dernière modification</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Créer par</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Modifier par</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow>
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Version</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Chip checked size="sm" variant="outline">
V2
</Chip>
</Grid.Col>
</Grid>
</Group>
</Card>
);

export const CardPermissions = (
<Card padding="40px" radius="lg">
<Text fw="600" size="lg" span>
Accés au document
</Text>
<Space h="lg" />
<Group spacing="xs">
<Button leftIcon={<PencilSimple size={14} weight="bold" />}>
Editer les droits
</Button>
<Button leftIcon={<ShareNetwork size={14} weight="bold" />}>
Partager en externe
</Button>
</Group>
<Space h="lg" />
<Checkbox label="Accès en mode hors ligne" size="sm" />
</Card>
);

export const CardIdentity = (
<Card padding="40px 40px" radius="lg">
<Text fw="600" size="lg" span>
Identité
</Text>
<Space h="lg" />
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Titre</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Description</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Type de document</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
22 mai 2021
</Text>
</Grid.Col>
</Grid>
</Group>
<Divider color="cyan.9" my="lg" size="sm" />
<Group grow pb="md" pt="md">
<Grid>
<Grid.Col maw="200px" pb="sm" sm={3}>
<Text span>Titre</Text>
</Grid.Col>
<Grid.Col pb="sm" sm={3}>
<Text fw={600} span>
Facture_Medor
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow pb="md">
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Description</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
-
</Text>
</Grid.Col>
</Grid>
</Group>
<Group grow>
<Grid>
<Grid.Col maw="200px" pb="sm" pt="0" sm={3}>
<Text span>Type de document</Text>
</Grid.Col>
<Grid.Col pb="sm" pt="0" sm={3}>
<Text fw={600} span>
Facture
</Text>
</Grid.Col>
</Grid>
</Group>
</Card>
);
Loading

0 comments on commit 0457fc2

Please sign in to comment.