feat: Implement a flippable arrow ui component

[mkarajohn]

Resolves DSTRBTN-540

Generated summary (powered by Graphite)

TL;DR

This pull request introduces a new UI component, FlippableArrow, which is an arrow icon that can be flipped vertically based on the expanded prop.

What changed

Three new files were added to the src/ui/FlippableArrow directory:

1. FlippableArrow.styles.ts: This file contains the styled component IconWrapper which applies a 3D rotation transformation to its child based on the expanded prop.

2. FlippableArrow.tsx: This is the main component file. It accepts expanded, color, and size as props and renders the IconWrapper with an Icon child.

3. index.ts: This file exports the FlippableArrow component.

How to test

To test this component, import it into a React component and pass in the required props. Change the expanded prop to see the arrow icon flip.

import React, { useState } from 'react';
import FlippableArrow from 'src/ui/FlippableArrow';

function TestComponent() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <FlippableArrow expanded={expanded} color="black" size={24} />
      <button onClick={() => setExpanded(!expanded)}>Toggle</button>
    </div>
  );
}

Why make this change

This change was made to provide a reusable UI component that can be used wherever a flippable arrow icon is needed, such as in accordions or dropdown menus. This will help ensure consistency across the application and reduce code duplication.

[mkarajohn]

Current dependencies on/for this PR:

• master
  • PR chore: fix eslint and ts errors in dev and introduce tsconfig.prod.ts file #74
    • PR feat: add custom Menu component #100
    • PR feat: add custom Menu component #75
      • PR chore: add new svgs, update package.json and move some components around #76
        • PR feat: Update ocntext and useProducts hook #77
          • PR feat: Implement a flippable arrow ui component #78 👈
            • PR feat: Implement a navigational menu item #79
              • PR feat: implement a navigational menu wrapper component #80
                • PR feat: implement the drawer component of the new navigation #81
                  • PR feat: Implement the exported navigation component #82
                  • PR feat: Implement the new top bar component #83
                  • PR feat: reimplement changes from revert #84 #85
                  • PR feat: Implement documentation, part 1 #86
                  • PR feat: implement documentation part 2 #87
                  • PR chore: explicitly pass theme prop to styled components #88
                  • PR feat: optimisation improvements #89
                  • PR feat: implement a new utility component #90
                  • PR chore: update documentation #91
                  • PR feat: rework epxorted providers and hooks and update docs #92
                  • PR feat: add extra hook for controlling the TopBar utility section #93
                  • PR chore: Rename the exported Authentication component to Toolbox #94
                  • PR feat: implement extra utility components #95
                  • PR feat: add currency related utility functions and update docs #96
                  • PR feat: update docs and upgrade docusaurus dependencies #97
                  • PR feat: major improvements, add search, streamline project structure #98
                  • PR feat: branded documentation #99

This comment was auto-generated by Graphite.

[mkarajohn]

Merge activity

• Oct 24, 10:43 AM: @mkarajohn started a stack merge that includes this pull request via Graphite.
• Oct 24, 10:45 AM: @mkarajohn merged this pull request with Graphite.