feat(apps): add status chips

package.json

@@ -8,7 +8,8 @@
  "Kim Lan Phan Hoang",
  "Abdallah Al Chami",
  "Alexandre Chau",
- "Basile Spaenlehauer"
+ "Basile Spaenlehauer",
+ "Jérémy La Scala"
  ],
  "license": "AGPL-3.0-only",
  "repository": "graasp/graasp-ui",

src/appComponents/index.ts

@@ -2,4 +2,8 @@ export { default as ErrorFallback } from './ErrorFallback';
 
 export { default as QuestionLabel } from './QuestionLabel';
 
+export { default as RequiredChip } from './statusChips/RequiredChip';
+export { default as SubmittedChip } from './statusChips/SubmittedChip';
+export { default as SavedChip } from './statusChips/SavedChip';
+
 export type { UserFeedback } from './types';

src/appComponents/statusChips/RequiredChip.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import RequiredChip from './RequiredChip';
+
+const meta: Meta<typeof RequiredChip> = {
+ title: 'Apps/Status chips/RequiredChip',
+ component: RequiredChip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RequiredChip>;
+
+export const DefaultRequiredChip: Story = {
+ args: {
+ label: 'Required',
+ tooltip: 'This question is required',
+ dataCy: 'required-chip',
+ },
+};

src/appComponents/statusChips/RequiredChip.tsx

@@ -0,0 +1,23 @@
+import WarningIcon from '@mui/icons-material/WarningRounded';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+
+import { StatusChipProps } from './types';
+
+const RequiredChip = ({
+ label,
+ tooltip,
+ dataCy,
+}: StatusChipProps): JSX.Element => (
+ <Tooltip title={tooltip}>
+ <Chip
+ color='warning'
+ icon={<WarningIcon />}
+ label={label}
+ variant='outlined'
+ data-cy={dataCy}
+ />
+ </Tooltip>
+);
+
+export default RequiredChip;

src/appComponents/statusChips/SavedChip.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SavedChip from './SavedChip';
+
+const meta: Meta<typeof SavedChip> = {
+ title: 'Apps/Status chips/SavedChip',
+ component: SavedChip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SavedChip>;
+
+export const DefaultSavedChip: Story = {
+ args: {
+ label: 'Saved',
+ tooltip: 'Your answer has been saved.',
+ dataCy: 'saved-chip',
+ },
+};

src/appComponents/statusChips/SavedChip.tsx

@@ -0,0 +1,22 @@
+import BackupIcon from '@mui/icons-material/Backup';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+
+import { StatusChipProps } from './types';
+
+const SavedChip = ({
+ label,
+ tooltip,
+ dataCy,
+}: StatusChipProps): JSX.Element => (
+ <Tooltip title={tooltip}>
+ <Chip
+ icon={<BackupIcon />}
+ label={label}
+ variant='outlined'
+ data-cy={dataCy}
+ />
+ </Tooltip>
+);
+
+export default SavedChip;

src/appComponents/statusChips/SubmittedChip.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import SubmittedChip from './SubmittedChip';
+
+const meta: Meta<typeof SubmittedChip> = {
+ title: 'Apps/Status chips/SubmittedChip',
+ component: SubmittedChip,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SubmittedChip>;
+
+export const DefaultSubmittedChip: Story = {
+ args: {
+ label: 'Submitted',
+ tooltip: 'Your answer has been submitted.',
+ dataCy: 'submitted-chip',
+ },
+};

src/appComponents/statusChips/SubmittedChip.tsx

@@ -0,0 +1,23 @@
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
+
+import { StatusChipProps } from './types';
+
+const SubmittedChip = ({
+ label,
+ tooltip,
+ dataCy,
+}: StatusChipProps): JSX.Element => (
+ <Tooltip title={tooltip}>
+ <Chip
+ color='info'
+ icon={<CheckCircleOutlineIcon />}
+ label={label}
+ variant='outlined'
+ data-cy={dataCy}
+ />
+ </Tooltip>
+);
+
+export default SubmittedChip;

src/appComponents/statusChips/types.ts

@@ -0,0 +1,5 @@
+export interface StatusChipProps {
+ label: string;
+ tooltip: string;
+ dataCy: string;
+}

src/apps.ts

@@ -1,3 +1,9 @@
-export { ErrorFallback, QuestionLabel } from './appComponents';
+export {
+ ErrorFallback,
+ QuestionLabel,
+ SavedChip,
+ SubmittedChip,
+ RequiredChip,
+} from './appComponents';
 
 export type { UserFeedback } from './appComponents';