# designsys-react
/************
accordion.jsx
*************/
This makes use of the 3rd part library Boostrap to reudce potential issues when upgrading React in future. The page using accordions must include the Bootstrap React import:
import Accordion from 'react-bootstrap/Accordion';

To create an accordion group the following is an example of the HTML code to use. This example shows 2 accordions in the group, but you can include as many accordions as you like by repeating the <Accordion.Item> element and its contents. For each successive accordion the eventKey value must be increased by one. Below is an example of a group of 3 accordions showing the eventKey to use:

  <Accordion.Item eventKey={0} key={0}>
  <Accordion.Item eventKey={1} key={1}>
  <Accordion.Item eventKey={2} key={2}>

The content of the accordion is placed inside the <Accordion.Body> element. Full HTML can be used.

By default all accordions appear closed. If you would like your first accordion to start open, use defaultActiveKey="0" inside the accordion element.

<Accordion
  activeKey={activeKeys}
  onSelect={handleSelect}
  alwaysOpen>
  <div className="accordion-button-wrapper">
    <Link onClick={expandAll} className={`expand ${activeKeys.length === 2 ? "On" : ""}`}>
      Expand All
    </Link>|
    <Link onClick={collapseAll} className={`expand ${activeKeys.length === 0 ? "On" : ""}`}>
      Collapse All
    </Link>
  </div>
  <Accordion.Item eventKey={0} key={0}>
    <Accordion.Header>Yoda Star Wars Quotes</Accordion.Header>
    <Accordion.Body>
        <dl>
            <dt>“Wars not make one great.”</dt>
            <dd>--Yoda (Star Wars: Episode V — The Empire Strikes Back)</dd>
        </dl>
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey={1} key={1}>
    <Accordion.Header>Darth Vader Star Wars Quotes</Accordion.Header>
    <Accordion.Body>
        <dl>
            <dt>“The ability to destroy a planet is insignificant next to the power of the Force.”</dt>
            <dd>--Darth Vader (Star Wars: Episode V — The Empire Strikes Back)</dd>
        </dl>
        </Accordion.Body>
  </Accordion.Item>          
</Accordion>


/************
tooltip.jsx
*************/

Include the component on the page that will be using the tooltip:
import AccessibleTooltip  from '@/components/functions/tooltip.jsx'

The tooltip can be implemented into your code as the following:
<AccessibleTooltip mobile={false} tooltipid="tooltip2"  tooltipText="This is a tooltip!" />

tooltipText is the text that you wish to appear in the tooltip. 
tooltipid is the id used by the tooltip. If there are multiple tooltips on one page, a unique ID must be used.
mobile can be true or false. We used tooltips almost exclusively inside table headings and we want those tables to be responsive. The tooltip mobile attribute should be sent to false inside the table header. It should be set to true when it appears inside a table cell. Since table headers are hidden in responsive view this means that the tooltip will also be hidden. So that the tooltip does not disappear completely it can be added into the table cell where it makes the most sense. It will not appear to the user unless the table is in responsive mode.