{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext, DetailsList } from '@pega/cosmos-react-work';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  args: {\n    description:\n      'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',\n    collapsible: false,\n    defaultCollapsed: false,\n    showAdditionalInfo: false\n  },\n  argTypes: {\n    description: { control: { type: 'text' } },\n    collapsible: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } },\n    defaultCollapsed: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface DetailsDemoProps {\n  description?: string;\n  collapsible?: boolean;\n  showAdditionalInfo?: boolean;\n  defaultCollapsed?: boolean;\n}\n\nexport const DetailsDemo: StoryFn<DetailsDemoProps> = (args: DetailsDemoProps) => {\n  const isNotMobile = useBreakpoint('sm');\n  const longestInlineLabel = 'Trim with a longer label';\n  const longestLabelLength = longestInlineLabel.split(' ').join('').length;\n\n  const ctx = useMemo(\n    () => ({\n      mobileView: !isNotMobile,\n      longestLabelLength\n    }),\n    [isNotMobile]\n  );\n\n  return (\n    <DetailsContext.Provider value={ctx}>\n      <Details\n        name='Upper list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n        description={args.description}\n        collapsible={args.collapsible}\n        defaultCollapsed={args.defaultCollapsed}\n        additionalInfo={\n          args.showAdditionalInfo\n            ? {\n                content: (\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n                      semper feugiat nibh sed pulvinar proin gravida.\n                    </p>\n                    <p>\n                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n                      nulla aliquet porttitor lacus.\n                    </p>\n                    <Link href='/' target='_blank'>\n                      Neque vitae\n                    </Link>\n                  </Flex>\n                )\n              }\n            : undefined\n        }\n        columns={{\n          a: (\n            <>\n              <Details\n                name='One Column'\n                columns={{\n                  a: (\n                    <Details\n                      description='Two column with no headings.'\n                      columns={{\n                        a: (\n                          <Details\n                            columns={{\n                              a: (\n                                <DetailsList\n                                  items={[\n                                    { name: 'Year', value: '2021' },\n                                    { name: 'Owners', value: '2' }\n                                  ]}\n                                />\n                              )\n                            }}\n                          />\n                        ),\n                        b: (\n                          <Details\n                            columns={{\n                              a: (\n                                <DetailsList\n                                  items={[\n                                    { name: 'Transmission', value: 'Automatic' },\n                                    { name: 'Drivetrain', value: 'AWD' }\n                                  ]}\n                                />\n                              )\n                            }}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n                collapsible\n                defaultCollapsed\n              />\n\n              <Details\n                description='Two Column with some description and no top heading.'\n                columns={{\n                  a: (\n                    <Details\n                      name='First Column'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Make', value: 'Ford' },\n                              { name: 'Model', value: 'F150' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  b: (\n                    <Details\n                      name='Second Column'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n              />\n\n              <Details\n                name='Three Column'\n                description='Text telling you what you are looking at or why it is relevant.'\n                columns={{\n                  a: (\n                    <Details\n                      name='First Column'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Make', value: 'Ford' },\n                              { name: 'Model', value: 'F150' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  b: (\n                    <Details\n                      description='Column with no heading but some description.'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: longestInlineLabel, value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  c: (\n                    <Details\n                      name='Third Column'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n              />\n\n              <Details\n                name='Wide Narrow'\n                arrangement='wideNarrow'\n                columns={{\n                  a: <Details name='Wide Column' columns={{ a: <TableDemo /> }} />,\n                  b: (\n                    <Details\n                      name='Narrow Column'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n              />\n\n              <Details\n                name='Narrow Wide'\n                arrangement='narrowWide'\n                columns={{\n                  a: (\n                    <Details\n                      name='Narrow Column'\n                      columns={{\n                        a: (\n                          <DetailsList\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  b: <Details name='Wide Column' columns={{ a: <TableDemo /> }} />\n                }}\n              />\n\n              <Details name='Table' columns={{ a: <TableDemo /> }} />\n\n              <Details\n                name='Nested List 1 Column'\n                columns={{\n                  a: (\n                    <>\n                      <Details\n                        name='First Child'\n                        columns={{\n                          a: (\n                            <DetailsList\n                              items={[\n                                { name: 'Year', value: '2021' },\n                                { name: 'Owners', value: '2' }\n                              ]}\n                            />\n                          )\n                        }}\n                      />\n\n                      <Details\n                        name='Second Child'\n                        columns={{\n                          a: (\n                            <DetailsList\n                              items={[\n                                { name: 'Transmission', value: 'Automatic' },\n                                { name: 'Drivetrain', value: 'AWD' }\n                              ]}\n                            />\n                          )\n                        }}\n                      />\n                    </>\n                  )\n                }}\n              />\n\n              <Details\n                columns={{\n                  a: (\n                    <>\n                      <DetailsList\n                        items={[\n                          {\n                            name: 'Description',\n                            variant: 'stacked',\n                            value: (\n                              <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n                                commodo nulla vitae mi bibendum, a fringilla nisl efficitur.\n                                Praesent vitae nulla lobortis, finibus felis ultricies, fermentum\n                                mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque\n                                est. Pellentesque pharetra justo augue, non maximus nulla venenatis\n                                et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum\n                                semper fringilla in eget risus. Fusce cursus sollicitudin nibh\n                                molestie volutpat.\n                              </p>\n                            )\n                          },\n                          { name: 'Keys', value: '3' }\n                        ]}\n                      />\n\n                      <Details\n                        name='Nested'\n                        columns={{\n                          a: (\n                            <>\n                              <DetailsList\n                                items={[\n                                  { name: 'First name', value: 'Howard' },\n                                  { name: 'Last name', value: 'Kennedy' }\n                                ]}\n                              />\n\n                              <Details\n                                name='Further Nested List'\n                                columns={{\n                                  a: (\n                                    <DetailsList\n                                      items={[\n                                        { name: 'Color', value: 'Red' },\n                                        { name: 'Tires', value: 'Firestone all weather' }\n                                      ]}\n                                    />\n                                  )\n                                }}\n                              />\n                            </>\n                          )\n                        }}\n                      />\n\n                      <Details\n                        name='Value comparison'\n                        columns={{\n                          a: (\n                            <DetailsList\n                              items={[\n                                { name: 'Open', value: '$405.00' },\n                                { name: 'Close', value: '$401.00' },\n                                { name: '52 week high', value: '$446.00' },\n                                { name: '52 week low', value: '$335.00' },\n                                { name: 'Total number of active shares', value: '567,000.00' }\n                              ]}\n                              valueComparison\n                            />\n                          )\n                        }}\n                      />\n\n                      <Details\n                        name='Collapsible'\n                        columns={{\n                          a: (\n                            <DetailsList\n                              items={[\n                                { name: 'Open', value: '$405.00' },\n                                { name: 'Close', value: '$401.00' },\n                                { name: '52 week high', value: '$446.00' },\n                                { name: '52 week low', value: '$335.00' },\n                                { name: 'Total number of active shares', value: '567,000.00' }\n                              ]}\n                              valueComparison\n                            />\n                          )\n                        }}\n                        collapsible\n                        defaultCollapsed\n                      />\n\n                      <Details\n                        columns={{\n                          a: (\n                            <DetailsList\n                              items={[\n                                { name: 'Age', value: '56' },\n                                { name: 'Location', value: 'Berlin PA' }\n                              ]}\n                            />\n                          )\n                        }}\n                      />\n                    </>\n                  )\n                }}\n              />\n            </>\n          )\n        }}\n      />\n    </DetailsContext.Provider>\n  );\n};\n"]}