Drawer

[ASM995]

Summary

Container component for housing other content such as navigation components, info callouts, overlay forms, other page sections.

The drawer would appear on the side of the screen and can be used in a number of different use cases.

Drawer should consider the following:

• Permanent positioning
• Expandable and collapsible
• Anchored to viewport, or anchored to container.
• Left, right, top, bottom position.
• Scrolling behavior
• Modality optionality
• Affect on background content (push/overlay)
• Responsive layout patterns
• Multi-drawer behaviour

💰 User value

This provides a common content container to achieve different layouts.

📚 User Stories

If relevant, describe the high-level functionality as user stories.

As an ICDS user: I need So that

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Config Given that a drawer component is being configured When setting its properties Then the following suggested properties can be set: • Position: Left, right, top, bottom • Size: SM, MD, LG • Expanded: True, false • Header: True, false • Button: True, false • Checkbox: True, false

ASSESSMENT CRITERIA

Sizing Given that a drawer component is being implemented When configuring it Then its size can be set to SM, MD, or LG And any body text labels should wrap onto multiple lines if then required

Given that a drawer component is being implemented as left/ right When configuring it Then its height can be set to the value of the container And any body text labels should wrap onto multiple lines if then required

Given that a drawer component is being implemented as top/ bottom When configuring it Then its width can be set to the value of the container And any body text labels should wrap onto multiple lines if then required

Content Given that a drawer component is being implemented with a header When configuring it Then it is not expected to truncate text And instead will limit line length in relation to the size of the Drawer

Animation/ transitions Given that a drawer component is being implemented as a temporary item When configuring it Then it will expand upon click And an overlay of 25% will be applied to the web page aside from the Drawer

✏ Designs

If there's a Figma design file (or other mock-up), include it here.

## 🧾 Guidance Guidance on design file in Teams.