Merge pull request #73 from patternfly/chore/72-example-styles

feat(examples): compile & use scss in examples

Author: nicolethoen

.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