chore(examples): compile & use scss in examples

Author: evwilkin

.gitignore

@@ -33,4 +33,5 @@ lerna-debug.log
 # For vim
 *.swp
 
-public
+public
+**/generated/**/*.js

packages/module/buildSass.js

@@ -29,4 +29,4 @@ if (!fs.existsSync(outDir)) {
   fs.mkdirSync(outDir, { recursive: true });
 }
 
-fs.writeFileSync(path.join(outDir, 'react-catalog-view-extension.css'), res.css);
+fs.writeFileSync(path.join('src/components', 'react-catalog-view-extension.css'), res.css);

packages/module/package.json

@@ -17,9 +17,10 @@
     "docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5000",
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config",
     "serve:a11y": "yarn serve coverage",
-    "generate": "yarn build:sass && yarn copy:sass",
+    "generate": "yarn build:sass && yarn copy:sass && yarn copy:css",
     "build:sass": "node buildSass.js",
-    "copy:sass": "shx mkdir -p dist/sass && shx cp -r sass/react-catalog-view-extension/* dist/sass"
+    "copy:sass": "shx mkdir -p dist/sass && shx cp -r sass/react-catalog-view-extension/* dist/sass",
+    "copy:css": "shx mkdir -p dist/css && shx cp src/components/*.css dist/css"
   },
   "repository": {
     "type": "git",

packages/module/patternfly-docs/content/examples/CatalogItemHeader.md

@@ -9,7 +9,6 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/
 
 import { CatalogItemHeader } from '@patternfly/react-catalog-view-extension';
 import pfLogo6 from './pfLogo6.svg';
-import './catalogItemHeader.css';
 
 ## Introduction
 Note: Catalog item header lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)!

packages/module/patternfly-docs/content/examples/CatalogTile.md

@@ -11,7 +11,6 @@ import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-ex
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';
 import pfLogo6 from './pfLogo6.svg';
-import './catalogTile.css';
 
 ## Introduction
 

packages/module/patternfly-docs/content/examples/FilterSidePanel.md

@@ -16,8 +16,6 @@ import CcVisaIcon from '@patternfly/react-icons/dist/esm/icons/cc-visa-icon';
 import CcMastercardIcon from '@patternfly/react-icons/dist/esm/icons/cc-mastercard-icon';
 import CcDinersClubIcon from '@patternfly/react-icons/dist/esm/icons/cc-diners-club-icon';
 
-import './filterSidePanel.css';
-
 ## Introduction
 
 Note: FilterSidePanel lives in its own package at [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension)!

packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md

@@ -11,7 +11,6 @@ import { PropertiesSidePanel, PropertyItem } from '@patternfly/react-catalog-vie
 import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
-import './propertiesSidePanel.css';
 
 ## Introduction
 

packages/module/patternfly-docs/content/examples/VerticalTabs.md

@@ -8,7 +8,6 @@ sourceLink: https://github.com/patternfly/react-catalog-view/tree/main/packages/
 ---
 
 import { VerticalTabs, VerticalTabsTab } from '@patternfly/react-catalog-view-extension';
-import './verticalTab.css';
 
 ## Introduction