patternfly-org/packages/documentation-framework/components/sectionGallery/sectionDataListLayout.jsx at 1457f72e44d87ec5784f931a9dc87719b1d495cc · patternfly/patternfly-org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React from "react";
import {
  DataList,
  DataListItem,
  DataListItemRow,
  DataListItemCells,
  DataListCell,
  Split,
  SplitItem,
  Content,
  ContentVariants,
  Label,
} from "@patternfly/react-core";
import { Link } from "../link/link.jsx";
import { TextSummary } from "./TextSummary.jsx";

export const SectionDataListLayout = ({
  galleryItems,
  layoutView,
  hasListText,
  hasListImages,
}) => {
  if (layoutView !== "list") {
    return null;
  }

  return (
    <DataList onSelectDataListItem={() => {}}>
      {galleryItems.map(
        ({
          idx,
          slug,
          illustration,
          itemName,
          title,
          isBeta,
          isDeprecated,
          isDemo,
          id,
          galleryItemsData,
        }) => (
          <Link to={slug} key={idx} className="ws-section-gallery-item">
            <DataListItem>
              <DataListItemRow>
                <DataListItemCells
                  dataListCells={[
                    hasListImages && illustration && (
                      <DataListCell width={1} key="illustration">
                        <div>
                          <img
                            src={illustration}
                            alt={`${itemName} illustration`}
                          />
                        </div>
                      </DataListCell>
                    ),
                    <DataListCell width={5} key="text-description">
                      <Split className={hasListText ? "pf-v6-u-mb-md" : null}>
                        <SplitItem isFilled>
                          <Content isEditorial>
                            <Content component={ContentVariants.h2}>
                              <span>{title}</span>
                            </Content>
                          </Content>
                        </SplitItem>
                        <SplitItem>
                          {isBeta && (
                            <Label color="blue" isCompact>
                              Beta
                            </Label>
                          )}
                          {!isBeta && isDeprecated && (
                            <Label color="grey" isCompact>
                              Deprecated
                            </Label>
                          )}
                          {!isBeta && !isDeprecated && isDemo && (
                            <Label color="purple" isCompact>
                              Demo
                            </Label>
                          )}
                        </SplitItem>
                      </Split>
                      {hasListText && (
                        <TextSummary id={id} itemsData={galleryItemsData} />
                      )}
                    </DataListCell>,
                  ]}
                />
              </DataListItemRow>
            </DataListItem>
          </Link>
        )
      )}
    </DataList>
  );
};