MI6-255
commented
1 month ago Option to trigger from any components, but also the arrows
Open ASM995 opened 1 year ago
MI6-255
commented
1 month ago Option to trigger from any components, but also the arrows
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:
💰 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.