@porsche-design-system/components-react 4.5.0 → 4.6.0-rc.0

package/skill/references/components/p-table/examples/Advanced.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import {
+  PButtonPure,
+  PHeading,
+  PTable,
+  PTableBody,
+  PTableCell,
+  PTableHead,
+  PTableHeadCell,
+  PTableHeadRow,
+  PTableRow,
+  PText,
+  type TableUpdateEventDetail,
+} from '@porsche-design-system/components-react';
+import { useCallback, useState } from 'react';
+
+type HeadAdvanced = {
+  id: string;
+  name: string;
+  hideLabel: boolean;
+  active?: boolean;
+  direction?: 'asc' | 'desc';
+};
+
+const headAdvanced: HeadAdvanced[] = [
+  { name: 'Model', id: 'model' } as HeadAdvanced,
+  { name: 'Interest', id: 'interest' } as HeadAdvanced,
+  { name: 'VIN', id: 'vin' } as HeadAdvanced,
+  { name: 'Purchase Intention', id: 'purchaseIntention' } as HeadAdvanced,
+  { name: 'Status', id: 'status' } as HeadAdvanced,
+  { name: 'Comment', id: 'comment' } as HeadAdvanced,
+  { name: 'Lead ID', id: 'leadId' } as HeadAdvanced,
+  { name: 'Select Wrapper', id: 'selectWrapper' } as HeadAdvanced,
+  { name: 'Select', id: 'select' } as HeadAdvanced,
+  { name: 'Multi-Select', id: 'multiSelect' } as HeadAdvanced,
+  { name: 'Action', id: 'action', hideLabel: true } as HeadAdvanced,
+].map((item, i) => ({
+  ...item,
+  ...(i > 0 &&
+    i < 7 &&
+    i !== 5 && {
+      active: i === 1,
+      direction: 'asc',
+    }),
+}));
+
+type DataAdvanced = {
+  imageUrl: string;
+  model: string;
+  date: string;
+  interest: string;
+  vin: string;
+  purchaseIntention: string;
+  status: string;
+  comment: string;
+  leadId: string;
+};
+
+const dataAdvanced: DataAdvanced[] = [
+  {
+    imageUrl: 'assets/718.png',
+    model: '718',
+    date: '23.06.2021',
+    interest: 'New Car',
+    vin: '1FM5K7F84FGB16304',
+    purchaseIntention: '08/2021',
+    status: 'Won',
+    comment: '-',
+    leadId: '0000824402',
+  },
+  {
+    imageUrl: 'assets/panamera.png',
+    model: 'Panamera',
+    date: '19.06.2021',
+    interest: 'New Car',
+    vin: '2GCEC13T141374801',
+    purchaseIntention: '11/2021',
+    status: 'Lost',
+    comment: 'Some multiline text and a column with a min width.',
+    leadId: '0000824409',
+  },
+  {
+    imageUrl: 'assets/911.png',
+    model: '911',
+    date: '19.05.2021',
+    interest: 'Used Car',
+    vin: '5GAKVCKD8EJ335750',
+    purchaseIntention: '09/2021',
+    status: 'Won',
+    comment: '-',
+    leadId: '0000824408',
+  },
+  {
+    imageUrl: 'assets/macan.png',
+    model: 'Macan',
+    date: '10.05.2021',
+    interest: 'Used Car',
+    vin: '1FMPU17L83LC09302',
+    purchaseIntention: '07/2021',
+    status: 'Lost',
+    comment: '-',
+    leadId: '0000824407',
+  },
+  {
+    imageUrl: 'assets/taycan.png',
+    model: 'Taycan',
+    date: '03.05.2021',
+    interest: 'New Car',
+    vin: 'JN1BY1AR3BM375187',
+    purchaseIntention: '05/2021',
+    status: 'Won',
+    comment: '-',
+    leadId: '0000824406',
+  },
+];
+
+export const Example = () => {
+  const [head, setHead] = useState(headAdvanced);
+  const [data, setData] = useState(dataAdvanced);
+
+  const onUpdate = useCallback((e: CustomEvent<TableUpdateEventDetail>) => {
+    const { id, direction } = e.detail as TableUpdateEventDetail & { id: keyof DataAdvanced };
+    setHead((prev) => prev.map((item) => ({ ...item, active: false, ...(item.id === id && e.detail) })));
+    setData((prev) =>
+      [...prev].sort((a, b) => {
+        return direction === 'asc' ? a[id].localeCompare(b[id]) : b[id].localeCompare(a[id]);
+      })
+    );
+  }, []);
+
+  return (
+    <PTable onUpdate={onUpdate}>
+      <PHeading slot="caption" size="large" tag="h3">
+        Some visual caption
+      </PHeading>
+      <PTableHead>
+        <PTableHeadRow>
+          {head.map((item, i) => (
+            <PTableHeadCell key={i} sort={item} hideLabel={item.hideLabel}>
+              {item.name}
+            </PTableHeadCell>
+          ))}
+        </PTableHeadRow>
+      </PTableHead>
+      <PTableBody>
+        {data.map((item, i) => (
+          <PTableRow key={i}>
+            <PTableCell>
+              <div style={{ display: 'flex' }}>
+                <img
+                  src={item.imageUrl}
+                  width={80}
+                  height={45}
+                  style={{ marginRight: '.5rem', objectFit: 'contain', maxWidth: 'none' }}
+                  alt=""
+                />
+                <div>
+                  <PText weight="semi-bold">{item.model}</PText>
+                  <PText size="x-small">{item.date}</PText>
+                </div>
+              </div>
+            </PTableCell>
+            <PTableCell>{item.interest}</PTableCell>
+            <PTableCell>
+              <a href="https://porsche.com">{item.vin}</a>
+            </PTableCell>
+            <PTableCell>{item.purchaseIntention}</PTableCell>
+            <PTableCell>{item.status}</PTableCell>
+            <PTableCell multiline={true} style={{ minWidth: '10rem' }}>
+              {item.comment}
+            </PTableCell>
+            <PTableCell>{item.leadId}</PTableCell>
+            <PTableCell>
+              <PButtonPure icon="edit" style={{ padding: '.5rem' }}>
+                Edit
+              </PButtonPure>
+              <PButtonPure icon="delete" style={{ padding: '.5rem' }}>
+                Delete
+              </PButtonPure>
+            </PTableCell>
+          </PTableRow>
+        ))}
+      </PTableBody>
+    </PTable>
+  );
+};

package/skill/references/components/p-table/examples/CaptionProperty.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTable caption="Some caption">
+        <PTableHead>
+          <PTableHeadRow>
+            <PTableHeadCell>
+              Column 1
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Column 2
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Column 3
+            </PTableHeadCell>
+          </PTableHeadRow>
+        </PTableHead>
+        <PTableBody>
+          <PTableRow>
+            <PTableCell>
+              Cell 1
+            </PTableCell>
+            <PTableCell>
+              Cell 2
+            </PTableCell>
+            <PTableCell>
+              Cell 3
+            </PTableCell>
+          </PTableRow>
+        </PTableBody>
+      </PTable>
+    </>
+  )
+}

package/skill/references/components/p-table/examples/CaptionSlot.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { PHeading, PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTable>
+        <PHeading slot="caption" size="large" tag="h3">
+          Some slotted caption
+        </PHeading>
+        <PTableHead>
+          <PTableHeadRow>
+            <PTableHeadCell>
+              Column 1
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Column 2
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Column 3
+            </PTableHeadCell>
+          </PTableHeadRow>
+        </PTableHead>
+        <PTableBody>
+          <PTableRow>
+            <PTableCell>
+              Cell 1
+            </PTableCell>
+            <PTableCell>
+              Cell 2
+            </PTableCell>
+            <PTableCell>
+              Cell 3
+            </PTableCell>
+          </PTableRow>
+        </PTableBody>
+      </PTable>
+    </>
+  )
+}

package/skill/references/components/p-table/examples/Default.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTable caption="Some caption">
+        <PTableHead>
+          <PTableHeadRow>
+            <PTableHeadCell>
+              Model
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Date
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Purchase Intention
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Status
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Lead ID
+            </PTableHeadCell>
+          </PTableHeadRow>
+        </PTableHead>
+        <PTableBody>
+          <PTableRow>
+            <PTableCell>
+              718 Cayman
+            </PTableCell>
+            <PTableCell>
+              23.06.2021
+            </PTableCell>
+            <PTableCell>
+              New Car
+            </PTableCell>
+            <PTableCell>
+              Won
+            </PTableCell>
+            <PTableCell>
+              0000824402
+            </PTableCell>
+          </PTableRow>
+          <PTableRow>
+            <PTableCell>
+              Panamera 4S
+            </PTableCell>
+            <PTableCell>
+              19.06.2021
+            </PTableCell>
+            <PTableCell>
+              New Car
+            </PTableCell>
+            <PTableCell>
+              Lost
+            </PTableCell>
+            <PTableCell>
+              0000824409
+            </PTableCell>
+          </PTableRow>
+          <PTableRow>
+            <PTableCell>
+              911 Carrera S
+            </PTableCell>
+            <PTableCell>
+              19.05.2021
+            </PTableCell>
+            <PTableCell>
+              Used Car
+            </PTableCell>
+            <PTableCell>
+              Won
+            </PTableCell>
+            <PTableCell>
+              0000824408
+            </PTableCell>
+          </PTableRow>
+          <PTableRow>
+            <PTableCell>
+              Macan Turbo
+            </PTableCell>
+            <PTableCell>
+              10.05.2021
+            </PTableCell>
+            <PTableCell>
+              Used Car
+            </PTableCell>
+            <PTableCell>
+              Lost
+            </PTableCell>
+            <PTableCell>
+              0000824407
+            </PTableCell>
+          </PTableRow>
+          <PTableRow>
+            <PTableCell>
+              Taycan
+            </PTableCell>
+            <PTableCell>
+              03.05.2021
+            </PTableCell>
+            <PTableCell>
+              New Car
+            </PTableCell>
+            <PTableCell>
+              Won
+            </PTableCell>
+            <PTableCell>
+              0000824406
+            </PTableCell>
+          </PTableRow>
+        </PTableBody>
+      </PTable>
+    </>
+  )
+}

package/skill/references/components/p-table/examples/HideLabel.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTable caption="Some caption">
+        <PTableHead>
+          <PTableHeadRow>
+            <PTableHeadCell>
+              Column 1
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Column 2
+            </PTableHeadCell>
+            <PTableHeadCell hideLabel={true}>
+              Column 3
+            </PTableHeadCell>
+          </PTableHeadRow>
+        </PTableHead>
+        <PTableBody>
+          <PTableRow>
+            <PTableCell>
+              Cell 1
+            </PTableCell>
+            <PTableCell>
+              Cell 2
+            </PTableCell>
+            <PTableCell>
+              Cell 3
+            </PTableCell>
+          </PTableRow>
+        </PTableBody>
+      </PTable>
+    </>
+  )
+}

package/skill/references/components/p-table/examples/LayoutFixed.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { PTable, PTableBody, PTableCell, PTableHead, PTableHeadCell, PTableHeadRow, PTableRow, PText } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTable caption="Some caption" layout="fixed">
+        <PTableHead>
+          <PTableHeadRow>
+            <PTableHeadCell className="w-[50%] max-w-[50%]">
+              Column 1 (50%)
+            </PTableHeadCell>
+            <PTableHeadCell className="w-[150px] max-w-[150px]">
+              Column 2 (150px)
+            </PTableHeadCell>
+            <PTableHeadCell>
+              Column 3 (auto)
+            </PTableHeadCell>
+          </PTableHeadRow>
+        </PTableHead>
+        <PTableBody>
+          <PTableRow>
+            <PTableCell className="w-[50%] max-w-[50%]">
+              Cell 1
+            </PTableCell>
+            <PTableCell className="w-[150px] max-w-[150px]">
+              Cell 2
+            </PTableCell>
+            <PTableCell>
+              Cell 3
+            </PTableCell>
+          </PTableRow>
+          <PTableRow>
+            <PTableCell className="w-[50%] max-w-[50%]">
+              Cell 1
+            </PTableCell>
+            <PTableCell className="w-[150px] max-w-[150px]">
+              <PText ellipsis={true} title="Cell 2 with more content">
+                Cell 2 with more content
+              </PText>
+            </PTableCell>
+            <PTableCell>
+              Cell 3
+            </PTableCell>
+          </PTableRow>
+        </PTableBody>
+      </PTable>
+    </>
+  )
+}

package/skill/references/components/p-table/examples/Sorting.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  PTable,
+  PTableBody,
+  PTableCell,
+  PTableHead,
+  PTableHeadCell,
+  PTableHeadRow,
+  PTableRow,
+  type TableUpdateEventDetail,
+} from '@porsche-design-system/components-react';
+import { useCallback, useState } from 'react';
+
+type HeadSorting = {
+  id: string;
+  name: string;
+  active?: boolean;
+  direction?: 'asc' | 'desc';
+};
+
+const headSorting: HeadSorting[] = [
+  { name: 'Column 1', id: 'col1' } as HeadSorting,
+  { name: 'Column 2', id: 'col2' } as HeadSorting,
+  { name: 'Column 3', id: 'col3' } as HeadSorting,
+].map((item, i) => ({
+  ...item,
+  active: i === 1,
+  direction: 'asc',
+}));
+
+type DataSorting = {
+  col1: string;
+  col2: string;
+  col3: string;
+};
+
+const dataSorting: DataSorting[] = [
+  {
+    col1: 'Name A',
+    col2: '9',
+    col3: '01.06.2021',
+  },
+  {
+    col1: 'Name Z',
+    col2: '1',
+    col3: '24.06.2021',
+  },
+];
+
+export const Example = () => {
+  const [head, setHead] = useState(headSorting);
+  const [data, setData] = useState(dataSorting);
+
+  const onUpdate = useCallback((e: CustomEvent<TableUpdateEventDetail>) => {
+    const { id, direction } = e.detail as TableUpdateEventDetail & { id: keyof DataSorting };
+    setHead((prev) => prev.map((item) => ({ ...item, active: false, ...(item.id === id && e.detail) })));
+    setData((prev) =>
+      [...prev].sort((a, b) => {
+        return direction === 'asc' ? a[id].localeCompare(b[id]) : b[id].localeCompare(a[id]);
+      })
+    );
+  }, []);
+
+  return (
+    <PTable caption="Some caption" onUpdate={onUpdate}>
+      <PTableHead>
+        <PTableHeadRow>
+          {head.map((item, i) => (
+            <PTableHeadCell key={i} sort={item}>
+              {item.name}
+            </PTableHeadCell>
+          ))}
+        </PTableHeadRow>
+      </PTableHead>
+      <PTableBody>
+        {data.map((item, i) => (
+          <PTableRow key={i}>
+            <PTableCell>{item.col1}</PTableCell>
+            <PTableCell>{item.col2}</PTableCell>
+            <PTableCell>{item.col3}</PTableCell>
+          </PTableRow>
+        ))}
+      </PTableBody>
+    </PTable>
+  );
+};