<commit_before>import React from 'react';

import { Box, Carousel, Image } from 'grommet';

const data = [
  '//v2.grommet.io/assets/IMG_4210.jpg',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg',
  '//v2.grommet.io/assets/IMG_4245.jpg',
  '//v2.grommet.io/assets/IMG_4210.jpg',
  'https://avatars1.githubusercontent.com/u/14203820?s=280&v=4',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg',
  '//v2.grommet.io/assets/IMG_4245.jpg',
  '//v2.grommet.io/assets/IMG_4210.jpg',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg',
];

const View0 = () => {
  const imgs = data.slice(0, 3);
  return (
    <Box direction="row">
      {imgs.map((img) => (
        <Image key={img} src={img} fit="contain" />
      ))}
    </Box>
  );
};
const View1 = () => {
  const imgs = data.slice(3, 6);
  return (
    <Box direction="row">
      {imgs.map((img) => (
        <Image key={img} src={img} fit="contain" />
      ))}
    </Box>
  );
};
const View2 = () => {
  const imgs = data.slice(6);
  return (
    <Box direction="row">
      {imgs.map((img) => (
        <Image key={img} src={img} fit="contain" />
      ))}
    </Box>
  );
};

export const Multi = () => (
  // Uncomment <Grommet> lines when using outside of storybook
  // <Grommet theme={...}>
  <Box>
    <Carousel>
      <View0 />
      <View1 />
      <View2 />
    </Carousel>
  </Box>
  // </Grommet>
);

export default {
  title: 'Media/Carousel/Multi',
};
<commit_msg>Fix Storybook a11y violation for carousel (#6124) (#6414)<commit_after>import React from 'react';

import { Box, Carousel, Image } from 'grommet';

const data = [
  '//v2.grommet.io/assets/IMG_4210.jpg',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg',
  '//v2.grommet.io/assets/IMG_4245.jpg',
  '//v2.grommet.io/assets/IMG_4210.jpg',
  'https://avatars1.githubusercontent.com/u/14203820?s=280&v=4',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg',
  '//v2.grommet.io/assets/IMG_4245.jpg',
  '//v2.grommet.io/assets/IMG_4210.jpg',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg',
];

const captions = {
  '//v2.grommet.io/assets/IMG_4210.jpg': 'Office workspace with decorations',
  '//v2.grommet.io/assets/IMG_4245.jpg': 'Shore with a bridge and some ships',
  '//v2.grommet.io/assets/Wilderpeople_Ricky.jpg': 'Boy hiding behind bushes',
  'https://avatars1.githubusercontent.com/u/14203820?s=280&v=4': 'Grommet logo',
};

const View0 = () => {
  const imgs = data.slice(0, 3);
  return (
    <Box direction="row">
      {imgs.map((img) => (
        <Image key={img} src={img} fit="contain" alt={captions[img]} />
      ))}
    </Box>
  );
};
const View1 = () => {
  const imgs = data.slice(3, 6);
  return (
    <Box direction="row">
      {imgs.map((img) => (
        <Image key={img} src={img} fit="contain" alt={captions[img]} />
      ))}
    </Box>
  );
};
const View2 = () => {
  const imgs = data.slice(6);
  return (
    <Box direction="row">
      {imgs.map((img) => (
        <Image key={img} src={img} fit="contain" alt={captions[img]} />
      ))}
    </Box>
  );
};

export const Multi = () => (
  // Uncomment <Grommet> lines when using outside of storybook
  // <Grommet theme={...}>
  <Box>
    <Carousel>
      <View0 />
      <View1 />
      <View2 />
    </Carousel>
  </Box>
  // </Grommet>
);

export default {
  title: 'Media/Carousel/Multi',
};

{'fraction_non_alphanumeric': 0.21130592503022974, 'fraction_numerical': 0.04171704957678356, 'mean_word_length': 2.807825086306099, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 55, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1781415', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1366, 'n_words': 213}