List

import React from 'react';

import { List, ListItem } from 'react-magma-dom';

export function Example() {
  return (
    <List>
      <ListItem>
        Reptiles
        <List>
          <ListItem>
            Snakes
            <List>
              <ListItem>Python</ListItem>
              <ListItem>Boa Constrictor</ListItem>
              <ListItem>Corn Snake</ListItem>
            </List>
          </ListItem>
          <ListItem>
            Lizards
            <List>
              <ListItem>Geckos</ListItem>
              <ListItem>Iguanas</ListItem>
              <ListItem>Chameleons</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
      <ListItem>
        Birds
        <List>
          <ListItem>
            Parrots
            <List>
              <ListItem>African Grey</ListItem>
              <ListItem>Cockatiel</ListItem>
              <ListItem>Budgerigar</ListItem>
            </List>
          </ListItem>
          <ListItem>
            Birds of Prey
            <List>
              <ListItem>Eagles</ListItem>
              <ListItem>Hawks</ListItem>
              <ListItem>Falcons</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
    </List>
  );
}

import React from 'react';

import { List, ListItem, olListType } from 'react-magma-dom';

export function Example() {
  return (
    <List
      isOrdered
      listType={olListType.uppercaseRoman}
      hasStart="3"
      isReversed
    >
      <ListItem>
        Fruits
        <List isOrdered listType={olListType.lowercaseRoman}>
          <ListItem>Apples</ListItem>
          <ListItem>Bananas</ListItem>
          <ListItem>Oranges</ListItem>
        </List>
      </ListItem>
      <ListItem>
        Vegetables
        <List isOrdered listType={olListType.lowercaseRoman}>
          <ListItem>
            Leafy greens
            <List isOrdered listType={olListType.lowercase}>
              <ListItem>Spinach</ListItem>
              <ListItem>Kale</ListItem>
            </List>
          </ListItem>
          <ListItem>
            Root vegetables
            <List isOrdered listType={olListType.lowercase}>
              <ListItem>Carrots</ListItem>
              <ListItem>Potatoes</ListItem>
            </List>
          </ListItem>
        </List>
      </ListItem>
      <ListItem>
        Dairy
        <List isOrdered listType={olListType.lowercaseRoman}>
          <ListItem>Milk</ListItem>
          <ListItem>Cheese</ListItem>
        </List>
      </ListItem>
    </List>
  );
}

import React from 'react';

import { List, ListItem } from 'react-magma-dom';

export function Example() {
  return (
    <List>
      <ListItem>
        Mammals
        <List>
          <ListItem>
            Dogs
            <List>
              <ListItem>
                German Shepherd
                <ListItem description>Courageous, energetic, loyal</ListItem>
              </ListItem>
              <ListItem>
                Labrador Retriever
                <ListItem description>
                  Friendly, outgoing, high-spirited
                </ListItem>
              </ListItem>
              <ListItem>
                American Bully
                <ListItem description>Strong, athletic, affectionate</ListItem>
              </ListItem>
            </List>
          </ListItem>
          <ListItem>Cats</ListItem>
        </List>
      </ListItem>
    </List>
  );
}

import React from 'react';

import { List, ListItem, IconSizes } from 'react-magma-dom';
import { InboxIcon, DraftsIcon, DeleteIcon } from 'react-magma-icons';

export function Example() {
  return (
    <>
      <List iconSize={IconSizes.small} spacingStyle="spacing02">
        <ListItem icon={<InboxIcon />}>Inbox</ListItem>
        <ListItem icon={<DraftsIcon />}>Drafts</ListItem>
        <ListItem icon={<DeleteIcon />}>Trash</ListItem>
      </List>
      <br />
      <List spacingStyle="spacing02">
        <ListItem icon={<InboxIcon />}>Inbox</ListItem>
        <ListItem icon={<DraftsIcon />}>Drafts</ListItem>
        <ListItem icon={<DeleteIcon />}>Trash</ListItem>
      </List>
      <br />
      <List iconSize={IconSizes.large} spacingStyle="spacing02">
        <ListItem icon={<InboxIcon />}>Inbox</ListItem>
        <ListItem icon={<DraftsIcon />}>Drafts</ListItem>
        <ListItem icon={<DeleteIcon />}>Trash</ListItem>
      </List>
    </>
  );
}

import React from 'react';

import { List, ListItem, IconAlignment } from 'react-magma-dom';
import { EmailIcon } from 'react-magma-icons';

export function Example() {
  return (
    <>
      <List iconAlign={IconAlignment.top} spacingStyle="spacing02">
        <ListItem icon={<EmailIcon />}>Icon List content</ListItem>
        <ListItem icon={<EmailIcon />}>Icon List content</ListItem>
        <ListItem icon={<EmailIcon />}>Icon List content</ListItem>
      </List>
      <br />
      <List iconAlign={IconAlignment.center} spacingStyle="spacing02">
        <ListItem icon={<EmailIcon />}>Icon List content</ListItem>
        <ListItem icon={<EmailIcon />}>Icon List content</ListItem>
        <ListItem icon={<EmailIcon />}>Icon List content</ListItem>
      </List>
    </>
  );
}

import React from 'react';

import { List, ListItem } from 'react-magma-dom';
import { EmailIcon } from 'react-magma-icons';

export function Example() {
  return (
    <List spacingStyle="spacing02">
      <ListItem
        icon={<EmailIcon />}
        iconColor="danger"
        iconBackground="neutral300"
      >
        Icon List content
      </ListItem>
      <ListItem
        icon={<EmailIcon />}
        iconColor="primary"
        iconBackground="neutral200"
      >
        Icon List content
      </ListItem>
      <ListItem
        icon={<EmailIcon />}
        iconColor="success"
        iconBackground="neutral100"
      >
        Icon List content
      </ListItem>
    </List>
  );
}

import React from 'react';

import { Card, CardBody, List, ListItem } from 'react-magma-dom';

export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <List isInverse>
          <ListItem>List content</ListItem>
          <ListItem>List content</ListItem>
          <ListItem>List content</ListItem>
          <ListItem>List content</ListItem>
          <ListItem>List content</ListItem>
        </List>
      </CardBody>
    </Card>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import {
  Card,
  CardBody,
  Paragraph,
  DefinitionList,
  DefinitionListItem,
  DefinitionListType,
} from 'react-magma-dom';

export function Example() {
  const data = [
    { term: 'Coffee', description: 'A hot beverage' },
    { term: 'Tea', description: 'Another hot beverage' },
    { term: 'Milk', description: 'A cold beverage' },
  ];

  const dataWithMultipleTerms = [
    {
      term: ['Coffee', 'Tea', 'Hot Chocolate'],
      description: 'A hot beverage',
    },
    {
      term: ['Milk', 'Lemonade', 'Margarita'],
      description: 'A cold beverage',
    },
  ];

  const Row = styled.div`
    display: flex;
    align-items: flex-end;
    margin-bottom: 16px;
  `;

  const TermStyled = styled.div`
    display: flex;
    flex-direction: column;
    text-align: left;
  `;

  const DescriptionStyled = styled.div`
    text-align: right;
  `;

  return (
    <>
      <Card style={{ marginBottom: '32px' }}>
        <CardBody>
          <Paragraph noTopMargin>Default Styles</Paragraph>
          <DefinitionList>
            {data.map((item, index) => (
              <React.Fragment key={index}>
                <DefinitionListItem type="term">{item.term}</DefinitionListItem>
                <DefinitionListItem type="description">
                  {item.description}
                </DefinitionListItem>
              </React.Fragment>
            ))}
          </DefinitionList>
        </CardBody>
      </Card>

      <Card style={{ marginBottom: '32px' }}>
        <CardBody>
          <DefinitionList>
            <Paragraph noTopMargin>Custom Styles</Paragraph>
            {dataWithMultipleTerms.map((item, index) => (
              <Row key={index}>
                <TermStyled>
                  {item.term.map((term, i) => (
                    <DefinitionListItem
                      key={`term-${index}-${i}`}
                      type={DefinitionListType.term}
                    >
                      {term}
                    </DefinitionListItem>
                  ))}
                </TermStyled>
                <DescriptionStyled>
                  <DefinitionListItem
                    key={`desc-${index}`}
                    type={DefinitionListType.description}
                  >
                    {item.description}
                  </DefinitionListItem>
                </DescriptionStyled>
              </Row>
            ))}
          </DefinitionList>
        </CardBody>
      </Card>
    </>
  );
}