From 55ef1384f959eec75bed02c98b73399a95aaf5db Mon Sep 17 00:00:00 2001
From: Matt Gallo <mdgallo@us.ibm.com>
Date: Fri, 15 Nov 2024 12:05:33 -0500
Subject: [PATCH] feat: add example dir to filter panel

---
 react/filterPanel/src/Example/Example.tsx     | 11 ++++++++++
 .../src/{ => Example}/FilterPanel.tsx         | 21 +------------------
 .../src/{ => Example}/customTypings.d.ts      |  0
 .../src/{App.scss => Example/example.scss}    |  8 ++++---
 react/filterPanel/src/Example/index.ts        |  1 +
 .../filterPanel/src/{ => Example}/makeData.ts |  0
 react/filterPanel/src/ExampleLink.tsx         |  9 --------
 react/filterPanel/src/index.scss              | 13 ------------
 react/filterPanel/src/index.ts                |  2 +-
 react/filterPanel/src/main.tsx                | 11 ++--------
 10 files changed, 21 insertions(+), 55 deletions(-)
 create mode 100644 react/filterPanel/src/Example/Example.tsx
 rename react/filterPanel/src/{ => Example}/FilterPanel.tsx (96%)
 rename react/filterPanel/src/{ => Example}/customTypings.d.ts (100%)
 rename react/filterPanel/src/{App.scss => Example/example.scss} (96%)
 create mode 100644 react/filterPanel/src/Example/index.ts
 rename react/filterPanel/src/{ => Example}/makeData.ts (100%)
 delete mode 100644 react/filterPanel/src/ExampleLink.tsx

diff --git a/react/filterPanel/src/Example/Example.tsx b/react/filterPanel/src/Example/Example.tsx
new file mode 100644
index 0000000..3ca4a32
--- /dev/null
+++ b/react/filterPanel/src/Example/Example.tsx
@@ -0,0 +1,11 @@
+import { Grid, Column } from '@carbon/react';
+import { FilterPanel } from './FilterPanel';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <FilterPanel />
+    </Column>
+  </Grid>
+);
diff --git a/react/filterPanel/src/FilterPanel.tsx b/react/filterPanel/src/Example/FilterPanel.tsx
similarity index 96%
rename from react/filterPanel/src/FilterPanel.tsx
rename to react/filterPanel/src/Example/FilterPanel.tsx
index db57b60..9c0eaa8 100644
--- a/react/filterPanel/src/FilterPanel.tsx
+++ b/react/filterPanel/src/Example/FilterPanel.tsx
@@ -49,9 +49,8 @@ import { rankItem } from '@tanstack/match-sorter-utils';
 
 import { makeData } from './makeData';
 import { TagOverflow, pkg } from '@carbon/ibm-products';
-import { ExampleLink } from './ExampleLink';
 import { Launch } from '@carbon/react/icons';
-import * as packageJson from '../package.json';
+import * as packageJson from '../../package.json';
 
 pkg.component.TagOverflow = true;
 
@@ -297,24 +296,6 @@ export const FilterPanel = () => {
       <TableContainer
         title="Filter panel"
         className="basic-table tanstack-example filter-flyout-example filter-panel-example"
-        description={
-          <span className="flex">
-            <ExampleLink
-              url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${
-                packageJson.name
-              }`}
-              icon={Launch}
-              label="Code sandbox"
-            />
-            <ExampleLink
-              url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${
-                packageJson.name
-              }`}
-              icon={Launch}
-              label="StackBlitz"
-            />
-          </span>
-        }
         style={{
           width: table.getCenterTotalSize(),
         }}>
diff --git a/react/filterPanel/src/customTypings.d.ts b/react/filterPanel/src/Example/customTypings.d.ts
similarity index 100%
rename from react/filterPanel/src/customTypings.d.ts
rename to react/filterPanel/src/Example/customTypings.d.ts
diff --git a/react/filterPanel/src/App.scss b/react/filterPanel/src/Example/example.scss
similarity index 96%
rename from react/filterPanel/src/App.scss
rename to react/filterPanel/src/Example/example.scss
index f5ce52a..1faeb22 100644
--- a/react/filterPanel/src/App.scss
+++ b/react/filterPanel/src/Example/example.scss
@@ -37,8 +37,6 @@
 .flyout--label {
   @include type.type-style('body-compact-01');
   @include font-family.font-weight('semibold');
-
-  padding-bottom: 1rem;
 }
 
 .filter-flyout-example .cds--popover-content {
@@ -76,7 +74,6 @@
   min-height: var(--table-height);
   min-width: 320px;
   border-right: 1px solid $border-subtle;
-  border-top: 1px solid $border-subtle;
   position: absolute;
   left: 0;
   z-index: 1;
@@ -145,5 +142,10 @@
   top: 0;
   background-color: $layer-02;
   border-bottom: 1px solid $border-subtle;
+  border-top: 1px solid $border-subtle;
   z-index: 2;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
 }
diff --git a/react/filterPanel/src/Example/index.ts b/react/filterPanel/src/Example/index.ts
new file mode 100644
index 0000000..8765fbd
--- /dev/null
+++ b/react/filterPanel/src/Example/index.ts
@@ -0,0 +1 @@
+export { Example } from './Example';
diff --git a/react/filterPanel/src/makeData.ts b/react/filterPanel/src/Example/makeData.ts
similarity index 100%
rename from react/filterPanel/src/makeData.ts
rename to react/filterPanel/src/Example/makeData.ts
diff --git a/react/filterPanel/src/ExampleLink.tsx b/react/filterPanel/src/ExampleLink.tsx
deleted file mode 100644
index 7a03b61..0000000
--- a/react/filterPanel/src/ExampleLink.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const ExampleLink = ({ icon, label, url }) => {
-  const Icon = icon;
-  return (
-    <a className="example--link" href={url} target="_blank">
-      {icon && <Icon className="example--link__icon" />}
-      {label}
-    </a>
-  );
-};
diff --git a/react/filterPanel/src/index.scss b/react/filterPanel/src/index.scss
index 8965062..e3f9104 100644
--- a/react/filterPanel/src/index.scss
+++ b/react/filterPanel/src/index.scss
@@ -3,21 +3,8 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App';
 
 body {
   margin: 0;
   padding: 0;
 }
-
-.example--link {
-  @include type.type-style('label-01');
-
-  display: flex;
-  align-items: center;
-  margin-right: 0.5rem;
-}
-
-.example--link__icon {
-  margin-right: 0.25rem;
-}
diff --git a/react/filterPanel/src/index.ts b/react/filterPanel/src/index.ts
index ea24f08..6a66574 100644
--- a/react/filterPanel/src/index.ts
+++ b/react/filterPanel/src/index.ts
@@ -1,3 +1,3 @@
-import { FilterPanel } from './FilterPanel';
+import { FilterPanel } from './Example/FilterPanel';
 
 export { FilterPanel };
diff --git a/react/filterPanel/src/main.tsx b/react/filterPanel/src/main.tsx
index 69a7741..4337d51 100644
--- a/react/filterPanel/src/main.tsx
+++ b/react/filterPanel/src/main.tsx
@@ -2,14 +2,11 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
   CodeSnippet,
-  Column,
-  Grid,
   Header,
   HeaderContainer,
   HeaderName,
 } from '@carbon/react';
-
-import { FilterPanel } from './FilterPanel';
+import { Example } from './Example';
 
 import './index.scss';
 
@@ -32,10 +29,6 @@ const renderUIShellHeader = () => (
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {renderUIShellHeader()}
-    <Grid className="page-grid">
-      <Column sm={4} md={8} lg={16}>
-        <FilterPanel />
-      </Column>
-    </Grid>
+    <Example />
   </StrictMode>
 );