feat(Accordion): support Title 'as' prop in dynamic accordion titles

[uc2pac]

There is only one way to create dynamic panels for accordion.

const panels = () => { title: string, content: custom }

There are cases when we need to create accordion titles with different components inside. For example some labels on the right. But since dynamic title can be only string there is no way to achieve that.

Can you please allow custom type or a way to use 'as' prop for dynamic titles?

[levithomason]

Indeed, the TODO here would allow this. The panel should be a component, then, it can be defined using shorthand like all our other components. This would allow the title prop to be a number, string, props object, or another element.

We can also take a short term PR that just updates the type check for this prop. Note that you can pass an element currently and it will work, you will just see an overzealous prop warning in development mode :/

[rkostrzewski]

I'm happy to implement the TODO for Accordion component (* TODO: AccordionPanel should be a sub-component) but I'm unsure whether I understand correctly what is meant by this. Should it look like this? (I guess there would be no need for <Accordion panels={...} then)

<Accordion>
  <Accordion.Panel>
    <Accordion.Title>
       <Icon name='dropdown' />
       What is a dog?
    </Accordion.Title>
    <Accordion.Content>
       <p>
         A dog is a type of domesticated animal. Known for its loyalty and faithfulness,
         {' '}it can be found as a welcome guest in many households across the world.
       </p>
    </Accordion.Content>
  </Accordion.Panel>
  ...
</Accordion>

[levithomason]

@rkostrzewski The goal is to keep both. You can reference other components like the Message, Menu, and Header to see how subcomponents and children relate to shorthand props.

[levithomason]

Released in semantic-ui-react@0.66.0.