Skip to content
Snippets Groups Projects

feature(accordion): Added accordion components to the project

Merged Tadeusz Miesiąc requested to merge feature/MIN-74-accordion-component into development
3 unresolved threads

Description

Added accordion components to the project. Decided to use library because of bigger flexibility and time-save. I had two options

  • Custom component Pros: Small bundle size, highly customizable Cons: Time consuming: would have to implement reusable and composable component + analise all cases that occurs in the app. There is danger that all cases are not included in designs so it would require to spend even more time
  • Library Pros:
  • huge time save, customizable Cons: 100kb unpacked size, 10kb gziped -> It would highly increase bundle size. But it's ok for me cuz it's CSR where it doesn't matter that much comparing to SSR or Static website

Implementation reasoning

Imported each of library module and exported it as custom component to add custom styling to it.

Additionally

  • Moved global styles import to pages wrapper (_app.tsx)
  • Removed redux-page example - its no longer needed
  • Created usage example http://localhost:3000/accordion-test

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
4 uuid?: string | number;
5 activeClassName?: string;
6 dangerouslySetExpanded?: boolean;
7 children: React.ReactNode;
8 }
9
10 export const AccordionItem = ({
11 uuid: customUuid,
12 dangerouslySetExpanded,
13 children,
14 ...rest
15 }: AccordionItemProps): JSX.Element => (
16 <AccItem
17 uuid={customUuid}
18 dangerouslySetExpanded={dangerouslySetExpanded}
19 {...rest}
  • 1 import { Accordion as Ac } from 'react-accessible-accordion';
    2 import { DivAttributes } from 'react-accessible-accordion/dist/types/helpers/types';
    3
    4 type ID = string | number;
  • 1 import {
  • LGTM but removing accordion-test.tsx (or replacing with storybook component) is an RFC from my side

  • Adrian Orłów approved this merge request

    approved this merge request

  • added 1 commit

    • 4e3f22d1 - refactor(removed accordion test page): removed page used for displaying test cases

    Compare with previous version

  • Tadeusz Miesiąc enabled an automatic merge when the pipeline for 4e3f22d1 succeeds

    enabled an automatic merge when the pipeline for 4e3f22d1 succeeds

  • Tadeusz Miesiąc mentioned in commit 2d8c3ea6

    mentioned in commit 2d8c3ea6

  • Please register or sign in to reply
    Loading