Note: Add another user story to add to eholdings app.

<Pane> Animation needs changes in stripes-components, so it will be done in the scope of STCOM-274

Hi ,

Please find attached 3 icons:

• It might be better to just use the search icon in the central components
• It is probably best to use both arrow files, since they are (intentionally) not fully centered vertically, so rotating it 180% will not be enough to mirror it.
• When toggling the pane, the wrapper should move 10px towards flex-end with a 300ms ease-out transition
• When toggling the pane, the arrows should fade between 0 and 1 in opacity (or alpha) with a 300ms ease-out transition
• The three icons should not move relative to each other inside the container; the containing (wrapper) element should instead move on toggle
• The container element should be 36px wide, and be positioned 0px from flex-start
• The arrow icons should be 10x16px and the magnifying glass 16x16px

Let me know if you have any questions, or if you want me to review the implementation. Thanks!

• Create search icon component and make it within search and sort component

• will determine number of icons based on simplest path to implementation. She will work with Filip

• And she needs to add an aria-label to describe open/close behavior. [If the search and filter pane is open then aria-label is close search and filter. If the search and filter pane is close then aria-label is open search and filter]

• Needs to work with Right to Left UI display

• Transition/Animation needs to apply when open and closing panes. See video.

- understood