{"version":3,"file":"Icon.stories.jsx","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  Icon,\n  icons,\n  streamlineIcons,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection,\n  useTheme,\n  ThemeOverride\n} from '@pega/cosmos-react-core';\nimport type { IconProps } from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nimport {\n  createCustomIcon,\n  iconNameSelectOptions,\n  iconSizeArgTypes,\n  iconSizeArgs\n} from './Icon.mocks';\nimport { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\ninterface IconSizeArgs {\n  size?: IconProps['size'];\n  demoSizeOverride?: boolean;\n}\n\ninterface IconSelectArg {\n  name?: IconProps['name'];\n}\n\nexport const StaticIcon: StoryFn<IconSizeArgs & IconSelectArg> = (\n  args: IconSizeArgs & IconSelectArg\n) => {\n  return (\n    <Icon\n      style={args.demoSizeOverride ? { height: '5rem', width: '5rem' } : undefined}\n      set='streamline'\n      name={args.name ?? 'pegasus'}\n      aria-label='Informative label'\n      size={args.size}\n    />\n  );\n};\n\nStaticIcon.args = { ...iconSizeArgs, name: 'pegasus' };\nStaticIcon.argTypes = {\n  ...iconSizeArgTypes,\n  name: {\n    control: { type: 'select' },\n    options: iconNameSelectOptions\n  }\n};\n\nexport const CustomIcon: StoryFn<IconSizeArgs> = (args: IconSizeArgs) => {\n  const theme = useTheme();\n\n  createCustomIcon(theme);\n\n  return (\n    <Icon\n      style={args.demoSizeOverride ? { height: '5rem', width: '5rem' } : undefined}\n      name='custom-pega'\n      aria-label='Custom icon'\n      size={args.size}\n    />\n  );\n};\n\nCustomIcon.args = iconSizeArgs;\nCustomIcon.argTypes = iconSizeArgTypes;\n\nexport const DynamicIcon: StoryFn<IconSizeArgs> = (args: IconSizeArgs) => {\n  return (\n    <Icon\n      style={args.demoSizeOverride ? { height: '5rem', width: '5rem' } : undefined}\n      name='pega'\n      size={args.size}\n    />\n  );\n};\n\nDynamicIcon.args = iconSizeArgs;\nDynamicIcon.argTypes = iconSizeArgTypes;\n\ninterface IconListProps {\n  set: 'budicon' | 'streamline';\n}\n\nexport const IconList: StoryFn<IconListProps> = (args: IconListProps) => {\n  const pageSize = 50;\n\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const iconList: readonly string[] = args.set === 'budicon' ? icons : streamlineIcons;\n\n  const listContent = useMemo(() => {\n    const matches = search ? iconList.filter(icon => icon.includes(search)) : iconList;\n    const totalItemsToRender = (1 + currentPageIndex) * pageSize;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [iconList, search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next pageSize items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <ThemeOverride theme={{ base: { 'icon-set': args.set } }}>\n      <Flex container={{ direction: 'column', gap: 1 }} style={{ height: 'calc(100vh - 2rem)' }}>\n        <SearchInput value={search} onSearchChange={onSearchChange} />\n        {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n        <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n          {listContent}\n          {itemsToLoadMore > 0 && (\n            <StyledProgressContainer>\n              <Progress placement='local' />\n            </StyledProgressContainer>\n          )}\n        </Flex>\n      </Flex>\n    </ThemeOverride>\n  );\n};\n\nIconList.args = {\n  set: 'budicon'\n};\n\nIconList.argTypes = {\n  set: {\n    options: ['budicon', 'streamline'],\n    control: { type: 'radio' }\n  }\n};\n\ntype ShapedIconStoryProps = Pick<IconProps, 'shape' | 'size'>;\n\nexport const ShapedIcon: StoryFn<ShapedIconStoryProps & IconSelectArg> = (\n  args: ShapedIconStoryProps & IconSelectArg\n) => {\n  return (\n    <Icon\n      name={args.name || 'gear'}\n      set='streamline'\n      aria-label='Configuration'\n      foreground='#6C5700'\n      background='#F4C500'\n      shape={args.shape}\n      size={args.size}\n    />\n  );\n};\n\nShapedIcon.args = {\n  shape: 'square',\n  size: 'l',\n  name: 'gear'\n};\n\nShapedIcon.argTypes = {\n  shape: {\n    options: ['square', 'circle'],\n    control: { type: 'radio' }\n  },\n  size: {\n    options: ['s', 'm', 'l', 'font-size'],\n    control: { type: 'radio' }\n  },\n  name: {\n    control: { type: 'select' },\n    options: iconNameSelectOptions\n  }\n};\n"]}