Merge branch 'patternfly:main' into main

patternfly-extension-testing · Aug 24, 2023 · c84c80e · c84c80e
2 parents a31503a + 189d4ac
commit c84c80e
Show file tree

Hide file tree

Showing 30 changed files with 275 additions and 213 deletions.
diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml
@@ -0,0 +1,30 @@
+name: promote
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:        
+      - v5.*
+jobs:
+  build-and-promote:
+    runs-on: ubuntu-latest
+    env:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build for promotion
+        run: yarn install --frozen-lockfile && yarn build
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: GitHub Tag Name example
+        run: |
+          echo "Tag name from GITHUB_REF_NAME: $GITHUB_REF_NAME"
+          echo "Tag name from github.ref_name: ${{  github.ref_name }}"
+      - name: Manual publish
+        run: |
+          cd packages/module
+          npm version ${{ github.ref_name }} --git-tag-version false
+          npm publish --tag latest
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ coverage
 .cache
 .tmp
 .eslintcache
+.cache_*
 
 # package managers
 yarn-error.log

diff --git a/README.md b/README.md
@@ -1,10 +1,8 @@
 # React catalog view
 
-This package contains catalog components based on the ones in PF3's patternfly-react-extensions package.
+This package contains components based on Patternfly from https://github.com/patternfly/patternfly-react
 
-This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.
-
-Development for this extension was previously being done under the [patternfly-react repo](https://github.com/patternfly/patternfly-react/tree/caf893d71966a0eabcde909a29d9a872367d9897/packages/react-catalog-view-extension).
+Development for this extension was previously being done under the patternfly-react repo.
 
 ### Installing
 

diff --git a/packages/module/package.json b/packages/module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-catalog-view-extension",
-  "version": "5.0.0-alpha.0",
+  "version": "0.0.0",
   "description": "This library provides catalog view extensions for PatternFly 4 React.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -33,25 +33,27 @@
   "homepage": "https://github.com/patternfly/react-catalog-view#readme",
   "publishConfig": {
     "access": "public",
-    "tag": "alpha"
+    "tag": "prerelease"
   },
   "keywords": [
     "react",
     "patternfly"
   ],
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0-alpha.72",
-    "@patternfly/react-styles": "^5.0.0-alpha.7"
+    "@patternfly/react-core": "^5.0.0",
+    "@patternfly/react-styles": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "^5.0.0-alpha.43",
-    "@patternfly/documentation-framework": "^2.0.0-alpha.29",
-    "@patternfly/react-table": "^5.0.0-alpha.80",
-    "@patternfly/react-code-editor": "^5.0.0-alpha.79",
+    "@patternfly/patternfly": "^5.0.0",
+    "@patternfly/documentation-framework": "^5.0.15",
+    "@patternfly/react-table": "^5.0.0",
+    "@patternfly/react-code-editor": "^5.0.0",
+    "react-monaco-editor": "0.51.0",
+    "monaco-editor": "0.34.1",
     "rimraf": "^2.6.2",
     "sass": "^1.42.1",
     "shx": "^0.3.2",

diff --git a/packages/module/patternfly-docs/content/examples/CatalogTile.md b/packages/module/patternfly-docs/content/examples/CatalogTile.md
@@ -72,7 +72,7 @@ import pfLogo2 from './pfLogo2.svg';
   }
   footer={
     <span>
-      <OutlinedCheckCircleIcon style={{color: 'var(--pf-global--success-color--100)'}} /> Enabled
+      <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Enabled
     </span>
   }
 />
@@ -122,7 +122,7 @@ import pfLogo2 from './pfLogo2.svg';
       <CogIcon />
     </CatalogTileBadge>,
     <CatalogTileBadge title="USDA Approved">
-      <OutlinedCheckCircleIcon style={{color: 'var(--pf-global--success-color--100)'}} />
+      <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} />
     </CatalogTileBadge>
   ]}
   title="Patternfly-React"

diff --git a/packages/module/patternfly-docs/content/examples/FilterSidePanel.md b/packages/module/patternfly-docs/content/examples/FilterSidePanel.md
@@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component {
 
       return (
         <span>
-          <span className="pf-u-screen-reader">{`${count} stars`}</span>
+          <span className="pf-v5-u-screen-reader">{`${count} stars`}</span>
           {stars}
         </span>
       );

diff --git a/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md b/packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md
@@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
       label="Certified Level"
       value={
         <span>
-          <OkIcon style={{color: 'var(--pf-global--success-color--100)'}} /> Certified
+          <OkIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Certified
         </span>
       }
     />

diff --git a/packages/module/patternfly-docs/content/examples/catalogTile.css b/packages/module/patternfly-docs/content/examples/catalogTile.css
@@ -24,7 +24,7 @@
   color: #004080;
   text-decoration: underline;
 }
-.ws-react-e-catalog-tile .pf-c-card__actions {
+.ws-react-e-catalog-tile .pf-v5-c-card__actions {
   padding-left: 5px;
 }
 .ws-react-e-catalog-tile .catalog-tile-pf-icon {

diff --git a/packages/module/patternfly-docs/content/examples/filterSidePanel.css b/packages/module/patternfly-docs/content/examples/filterSidePanel.css
@@ -23,7 +23,7 @@
   margin-bottom: 0;
 }
 
-.filter-panel-pf-category-items .pf-c-button.pf-m-link {
+.filter-panel-pf-category-items .pf-v5-c-button.pf-m-link {
   padding: 0;
 }
 
@@ -37,7 +37,7 @@
   margin-top: 0;
 }
 
-.filter-panel-pf-category-item .pf-c-check__input {
+.filter-panel-pf-category-item .pf-v5-c-check__input {
   margin-left: 0px;
 }
 

diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view-tile/react.js
@@ -135,15 +135,15 @@ pageData.examples = {
 
     </Example>,
   'Basic with footer': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst BasicWithFooter = () => (\n  <CatalogTile\n    id=\"simple-footer\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after one line. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n    footer={\n      <span>\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-global--success-color--100)'}} /> Enabled\n      </span>\n    }\n  />\n)","title":"Basic with footer","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst BasicWithFooter = () => (\n  <CatalogTile\n    id=\"simple-footer\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after one line. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n    footer={\n      <span>\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Enabled\n      </span>\n    }\n  />\n)","title":"Basic with footer","lang":"js"}}>
 
     </Example>,
   'Link variant': props => 
     <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst LinkVariant = () => (\n  <CatalogTile\n    id=\"simple-link-variant\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>\n    ]}\n    href=\"http://patternfly.org/v4\"\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after three lines. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n  />\n)","title":"Link variant","lang":"js"}}>
 
     </Example>,
   'With multiple icon badges': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst WithMultipleIconBadges = () => (\n  <CatalogTile\n    id=\"multiIcon\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>,\n      <CatalogTileBadge title=\"USDA Approved\">\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-global--success-color--100)'}} />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after three lines. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n  />\n)","title":"With multiple icon badges","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst WithMultipleIconBadges = () => (\n  <CatalogTile\n    id=\"multiIcon\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>,\n      <CatalogTileBadge title=\"USDA Approved\">\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after three lines. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n  />\n)","title":"With multiple icon badges","lang":"js"}}>
 
     </Example>,
   'With text badge': props => 

diff --git a/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js b/packages/module/patternfly-docs/generated/extensions/catalog-tile/catalog-view/react.js
@@ -135,15 +135,15 @@ pageData.examples = {
 
     </Example>,
   'Basic with footer': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst BasicWithFooter = () => (\n  <CatalogTile\n    id=\"simple-footer\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after one line. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n    footer={\n      <span>\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-global--success-color--100)'}} /> Enabled\n      </span>\n    }\n  />\n)","title":"Basic with footer","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst BasicWithFooter = () => (\n  <CatalogTile\n    id=\"simple-footer\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after one line. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n    footer={\n      <span>\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Enabled\n      </span>\n    }\n  />\n)","title":"Basic with footer","lang":"js"}}>
 
     </Example>,
   'Link variant': props => 
     <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst LinkVariant = () => (\n  <CatalogTile\n    id=\"simple-link-variant\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>\n    ]}\n    href=\"http://patternfly.org/v4\"\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after three lines. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n  />\n)","title":"Link variant","lang":"js"}}>
 
     </Example>,
   'With multiple icon badges': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst WithMultipleIconBadges = () => (\n  <CatalogTile\n    id=\"multiIcon\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>,\n      <CatalogTileBadge title=\"USDA Approved\">\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-global--success-color--100)'}} />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after three lines. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n  />\n)","title":"With multiple icon badges","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';\nimport CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';\nimport OutlinedCheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-check-circle-icon';\nimport pfLogo2 from './pfLogo2.svg';\n\nconst WithMultipleIconBadges = () => (\n  <CatalogTile\n    id=\"multiIcon\"\n    iconImg={pfLogo2}\n    iconAlt=\"PatternFly logo\"\n    badges={[\n      <CatalogTileBadge title=\"Certified\">\n        <CogIcon />\n      </CatalogTileBadge>,\n      <CatalogTileBadge title=\"USDA Approved\">\n        <OutlinedCheckCircleIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} />\n      </CatalogTileBadge>\n    ]}\n    title=\"Patternfly-React\"\n    vendor=\"provided by Red Hat\"\n    description={\n      'This is a very, very long description that should be truncated after three lines. ' +\n      'Three lines is the default for cards without a footer. Cards with a footer are truncated after one line. Truncation function use is deprecated; please pass in a maxDescriptionLength of -1 to override it. ' +\n      'This has changed from PatternFly 3.'\n    }\n  />\n)","title":"With multiple icon badges","lang":"js"}}>
 
     </Example>,
   'With text badge': props =>
-Original file line number
+Diff line change
@@ Expand Up / @@ -106,7 +106,7 @@ class MockFilterSidePanelExample extends React.Component { @@
           return (
             <span>
-              <span className="pf-u-screen-reader">{`${count} stars`}</span>
+              <span className="pf-v5-u-screen-reader">{`${count} stars`}</span>
               {stars}
             </span>
           );
@@ Expand Down @@