import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Details/Codesandbox" />

# Details

The `<details>` tag specifies additional details that the user can open and close on demand. This custom component
provides a React implementation of this semantic HTML with controlled state.

It includes a child component for the details summary `<Details.Summary />`. The details themselves can be included as children
inside `<Details>` typically following the `<Details.Summary>`.

NOTE: for a custom implementation of this component see the [accordion](/?path=/story/components-accordion-overview--default-story)

```js codesandbox=palmetto-components
import React, { useState } from 'react';
import { Details, Box, Heading, useOpenClose } from '@palmetto/palmetto-components';

export default () => {
  const { isOpen, handleToggle } = useOpenClose();

  return (
    <Details isOpen={isOpen} margin="md">
      <Details.Summary isDetailsOpen={isOpen} onToggle={handleToggle)} display="inline">
        What is Palmetto's Mission?
      </Details.Summary>
      <Box padding="md 0" gap="sm">
        <Heading as="h4">Leading the World Towards a Clean Energy Future</Heading>
        <Box as="p">
          We are on a mission to stop climate change before we reach an irreversible tipping point.
          Yes, this requires large shifts by entire nations and entire populations. It requires
          urgency and change on a massive scale. But technological advancements have put it within
          reach.
        </Box>
      </Box>
    </Details>
  );
};
```
