From e3db31fcaacea72b8c143032e9e2ac3b0f68f29f Mon Sep 17 00:00:00 2001
From: ajaypratap003 <ajay.pratap233@gmail.com>
Date: Thu, 11 Apr 2024 19:48:52 +0530
Subject: [PATCH] DataList width modifiers demo

---
 .../examples/DataListWidthModifiers.tsx       | 261 ++++++++++++++++++
 packages/react-core/src/demos/DataListDemo.md |   9 +
 2 files changed, 270 insertions(+)
 create mode 100644 packages/react-core/src/demos/DataList/examples/DataListWidthModifiers.tsx

diff --git a/packages/react-core/src/demos/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/src/demos/DataList/examples/DataListWidthModifiers.tsx
new file mode 100644
index 00000000000..c1686fa08a0
--- /dev/null
+++ b/packages/react-core/src/demos/DataList/examples/DataListWidthModifiers.tsx
@@ -0,0 +1,261 @@
+import React from 'react';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListCheck,
+  DataListAction,
+  DataListToggle,
+  DataListContent,
+  DataListItemCells,
+  DataListItemRow,
+  Text,
+  TextVariants,
+  TextContent,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement,
+  PageSectionVariants,
+  PageSection
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+/* eslint-disable camelcase */
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const DataListWidthModifiers: React.FunctionComponent = () => {
+  const [show, setShow] = React.useState(true);
+  const [isOpen1, setIsOpen1] = React.useState(false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+
+  const onToggle1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onSelect1 = () => {
+    setIsOpen1(!isOpen1);
+  };
+
+  const onToggle2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const onSelect2 = () => {
+    setIsOpen2(!isOpen2);
+  };
+
+  const previewPlaceholder = {
+    display: 'block',
+    width: '100%',
+    padding: '.25rem .5rem',
+    color: global_Color_100.var,
+    backgroundColor: global_BackgroundColor_200.var,
+    border: `${global_BorderWidth_sm.var} ${global_BorderColor_100.var} solid`
+  };
+
+  return (
+    <DashboardWrapper mainContainerId="main-content-datalist-view-width-modifiers" breadcrumb={null}>
+      <PageSection variant={PageSectionVariants.light}>
+        <TextContent>
+          <Text component="h1">Projects</Text>
+          <Text component="p">This is a demo that showcases PatternFly Data List</Text>
+        </TextContent>
+      </PageSection>
+      <div key="example-1">
+        <TextContent>
+          <Text component={TextVariants.h4}>Default fitting - example 1</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 1">
+          <DataListItem aria-labelledby="width-ex1-item1">
+            <DataListItemRow>
+              <DataListCheck aria-labelledby="width-ex1-item1" name="width-ex1-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell key="default">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex1-item1">default</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell key="default2">
+                    <div style={previewPlaceholder}>
+                      <b>default</b>
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                        labore et dolore magna aliqua.
+                      </p>
+                    </div>
+                  </DataListCell>
+                ]}
+              />
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </div>
+      <div key="example-2">
+        <TextContent>
+          <Text component={TextVariants.h4}>Flex modifiers - example 2</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 2">
+          <DataListItem aria-labelledby="width-ex2-item1">
+            <DataListItemRow>
+              <DataListCheck aria-labelledby="width-ex2-item1" name="width-ex2-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={2} key="width 2">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex2-item1">width 2</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell width={4} key="width 4">
+                    <div style={previewPlaceholder}>
+                      <b>width 4</b>
+                      <p>Lorem ipsum dolor sit amet.</p>
+                    </div>
+                  </DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="width-ex2-item1 width-ex2-action1"
+                id="width-ex2-action1"
+                aria-label="Actions"
+                isPlainButtonAction
+              >
+                <Dropdown
+                  popperProps={{ position: 'right' }}
+                  onSelect={onSelect1}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen1}
+                      onClick={onToggle1}
+                      variant="plain"
+                      aria-label="Data list width modifiers example kebab toggle 1"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen1}
+                  onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
+                      Disabled Link
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
+              </DataListAction>
+            </DataListItemRow>
+          </DataListItem>
+        </DataList>
+      </div>
+      <div key="example-3">
+        <TextContent>
+          <Text component={TextVariants.h4}>Flex modifiers - example 3</Text>
+        </TextContent>
+        <DataList aria-label="Width modifier data list example 3">
+          <DataListItem aria-labelledby="width-ex3-item1" isExpanded={show}>
+            <DataListItemRow>
+              <DataListToggle
+                isExpanded={show}
+                id="width-ex3-toggle1"
+                aria-controls="width-ex3-expand1"
+                onClick={() => setShow(!show)}
+              />
+              <DataListCheck aria-labelledby="width-ex3-item1" name="width-ex3-item1" />
+              <DataListItemCells
+                dataListCells={[
+                  <DataListCell width={5} key="width 5">
+                    <div style={previewPlaceholder}>
+                      <b id="width-ex3-item1">width 5</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell width={2} key="width 2">
+                    <div style={previewPlaceholder}>
+                      <b>width 2</b>
+                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                    </div>
+                  </DataListCell>,
+                  <DataListCell key="default">
+                    <div style={previewPlaceholder}>default</div>
+                  </DataListCell>
+                ]}
+              />
+              <DataListAction
+                aria-labelledby="width-ex3-item1 width-ex3-action1"
+                id="width-ex3-action1"
+                aria-label="Actions"
+                isPlainButtonAction
+              >
+                <Dropdown
+                  popperProps={{ position: 'right' }}
+                  onSelect={onSelect2}
+                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen2}
+                      onClick={onToggle2}
+                      variant="plain"
+                      aria-label="Data list width modifiers example kebab toggle 2"
+                    >
+                      <EllipsisVIcon aria-hidden="true" />
+                    </MenuToggle>
+                  )}
+                  isOpen={isOpen2}
+                  onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
+                >
+                  <DropdownList>
+                    <DropdownItem key="action2">Action</DropdownItem>
+                    {/* Prevent default onClick functionality for example
+                  purposes */}
+                    <DropdownItem key="link2" to="#" onClick={(event: any) => event.preventDefault()}>
+                      Link
+                    </DropdownItem>
+                    <DropdownItem key="disabled action2" isDisabled>
+                      Disabled Action
+                    </DropdownItem>
+                    <DropdownItem
+                      key="disabled link2"
+                      isDisabled
+                      to="#"
+                      onClick={(event: any) => event.preventDefault()}
+                    >
+                      Disabled Link
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
+              </DataListAction>
+            </DataListItemRow>
+            <DataListContent aria-label="Primary Content Details" id="width-ex3-expand1" isHidden={!show}>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua.
+              </p>
+            </DataListContent>
+          </DataListItem>
+        </DataList>
+      </div>
+    </DashboardWrapper>
+  );
+};
diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md
index b156dc8c192..ee144a918ed 100644
--- a/packages/react-core/src/demos/DataListDemo.md
+++ b/packages/react-core/src/demos/DataListDemo.md
@@ -15,6 +15,10 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
+import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
+import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
+import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 ## Demos
 
@@ -28,3 +32,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ```js file="./DataList/examples/DataListExpandableControlInToolbar.tsx" isFullscreen
 ```
+
+### Width modifiers
+
+```js file="./DataList/examples/DataListWidthModifiers.tsx" isFullscreen
+```
\ No newline at end of file