Accordion not opening

[alfredone270895]

Expected Behavior

Open section on clicking the accordion

Current Behavior

When i click on open after orbit installation via npm accordion do not open i also try it on CodeSandbox and is
not working.

import ReactDOM from "react-dom";
import React from "react";

import {Accordion,AccordionSection,Stack,Text,Card, CardSection, Heading } from "@kiwicom/orbit-components/";

const App = () => (
<Accordion
expandedSection="0X0"

<AccordionSection
header={This is a header labelThis is a header label}
id="0X0"

<Text type="primary">
  This is a content text
</Text>

This is a header labelThis is a header label} id="0X1" > This is a content text This is a header labelThis is a header label} id="0X2" > This is a content text );

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

https://codesandbox.io/s/small-resonance-obv5i?file=/src/index.js:0-1148

[vepor]

Hello @alfredone270895 👋

The Accordion component is controlled component and therefore there is requirement to use your own state in which you have the stored the id of expanded sections. We want to provide more flexibility when comes to handling the state of it – you can have more buttons that interacts with the Accordion.

Sadly, this isn't visible on the Storybook where you probably took the example fo this component. The final solution can look like this:

import ReactDOM from "react-dom";
import React from "react";

import { Accordion, AccordionSection, Stack, Text } from "@kiwicom/orbit-components/";

const App = () => {
    const [expandedSection, setExpandedSection] = React.useState("0X1");

    return (
      <Accordion expandedSection={expandedSection} onExpand={id => setExpandedSection(id)}>
        <AccordionSection
          id="0X0"
          header={
            <Stack spacing="small">
              <Text type="primary">This is a header label</Text>
              <Text size="small">This is a header label</Text>
            </Stack>
          }
        >
          <Text type="primary">This is a content text</Text>
        </AccordionSection>
        <AccordionSection
          id="0X1"
          header={
            <Stack spacing="small">
              <Text type="primary">This is a header label</Text>
              <Text size="small">This is a header label</Text>
            </Stack>
          }
        >
          <Text type="primary">This is a content text</Text>
        </AccordionSection>
        <AccordionSection
          id="0X2"
          header={
            <Stack spacing="small">
              <Text type="primary">This is a header label</Text>
              <Text size="small">This is a header label</Text>
            </Stack>
          }
        >
          <Text type="primary">This is a content text</Text>
        </AccordionSection>
      </Accordion>
   );
};

[alfredone270895]

ok perfect is working, thanks for support. yours component are really awesome.