@ansible/ansible-ui-framework 0.0.335 → 0.0.337

package/cjs/PageLayout.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 /**
  * The PageLayout is used as the container for the contents of the page.
  * It enables page components to leverage full page layout and scrolling of sub content.
- * An example is a full page table that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
+ * An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
  *
  * @example
  * <Page>

package/cjs/PageLayout.js

@@ -37,7 +37,7 @@ var useFrameworkTranslations_1 = require("./useFrameworkTranslations");
 /**
  * The PageLayout is used as the container for the contents of the page.
  * It enables page components to leverage full page layout and scrolling of sub content.
- * An example is a full page table that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
+ * An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
  *
  * @example
  * <Page>

package/docs/BulkActionDialog.md

@@ -22,7 +22,7 @@ The easiest way to use the BulkActionDialog is then useBulkActionDialog hook.
 
 useBulkActionDialog - react hook to open a BulkActionDialog
 
-## Example
+**Example**
 
 ```tsx
 const openBulkActionDialog = useBulkActionDialog()

package/docs/Framework.md

@@ -8,12 +8,14 @@ A framework for building applications using [PatternFly](https://www.patternfly.
 - [Guides](Guides.md)
 - [Components](Components.md)
 
-The framework is made up of high level components using PatternFly components underneath.
-This allows the framework to adjust the web application for responsive layout.
+The framework is made up of high level components abstracting design patterns away from the PatternFly components used underneath.
 
-The framework:
+While PatternFly provides the building blocks and guidance on building applications, PatternFly does not manage state for the developer. This framework adds state management and abstractions for common patterns of application development.
+
+This framework:
 
 - does not use any state libraries other than the built in react context state management.
 - does not assume any specific translation libraries, but does provide a hook for internal translations.
 - does not assume any specific navigation libraries, but does provide a hook for internal navigation.
-  There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
+
+There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.

package/docs/GettingStarted.md

@@ -2,13 +2,9 @@
 
 # Getting Started
 
-While PatternFly provides the building blocks and guidance on building applications, PatternFly does not manage state for the developer. This framework adds state management and abstractions for common patterns of application development.
-
-There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
-
 ## Install the NPM package
 
-[NPM Package: @ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
+NPM Package: [@ansible/ansible-ui-framework](https://www.npmjs.com/package/@ansible/ansible-ui-framework)
 
 ```
 npm install @ansible/ansible-ui-framework
@@ -16,7 +12,7 @@ npm install @ansible/ansible-ui-framework
 
 ## Add the PageFramework to your application
 
-Near the top of your application add the [PageFramework](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageFramework.md) component.
+Near the top of your application add the [PageFramework](PageFramework.md) component.
 
 This component adds the state management needed by the framework.
 
@@ -24,7 +20,7 @@ This component adds the state management needed by the framework.
 
 ### Use PageLayout to control the layout in your pages
 
-The [PageLayout](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageLayout.md) is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
+The [PageLayout](PageLayout.md) is used as the container for the contents of the page. It enables page components to leverage full page layout and scrolling of sub content. An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
 
 ```tsx
 <Page>
@@ -37,7 +33,7 @@ The [PageLayout](https://github.com/ansible/ansible-ui/blob/main/framework/docs/
 
 ### Use PageHeader for the heading of your pages
 
-The [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
+The [PageHeader](PageHeader.md) is used at the top of each page. It provides a consistent layout of header elements.
 
 ```tsx
 <Page>
@@ -52,7 +48,7 @@ The [PageHeader](https://github.com/ansible/ansible-ui/blob/main/framework/docs/
 
 #### Table Pages
 
-For pages containing a table, use the [PageTable](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageTable.md) component.
+For pages containing a table, use the [PageTable](PageTable.md) component. The PageTable support table, list, and card views of the data.
 
 ```tsx
 <Page>
@@ -65,7 +61,7 @@ For pages containing a table, use the [PageTable](https://github.com/ansible/ans
 
 #### Form Pages
 
-For pages containing an input form, use the [PageForm](https://github.com/ansible/ansible-ui/blob/main/framework/docs/PageForm.md) component.
+For pages containing an input form, use the [PageForm](PageForm.md) component.
 
 ```tsx
 <Page>
@@ -76,4 +72,19 @@ For pages containing an input form, use the [PageForm](https://github.com/ansibl
 </Page>
 ```
 
-## Next Steps
+#### Detail Pages
+
+TODO
+
+#### Page sub navigation
+
+TODO
+
+### Other Useful Components
+
+<!-- - [PageAlertToaster](PageAlertToaster.md) -->
+
+- [BulkActionDialog](BulkActionDialog.md)
+  <!-- - [BulkConfirmationDialog](BulkConfirmationDialog.md) -->
+  <!-- - [SelectDialog](SelectDialog.md) -->
+  <!-- - [SelectMultipleDialog](SelectMultipleDialog.md) -->

package/docs/Guides.md

@@ -3,5 +3,4 @@
 # Ansible UI Guides
 
 - [Getting Started](GettingStarted.md)
-- [PageLayout](PageLayout.md)
 - [PageTable Guide](PageTableGuide.md)

package/docs/PageFramework.md

@@ -4,7 +4,7 @@
 
 The `PageFramework` component bundles up all the context providers in the Ansible UI framework in a convienent component for framework consumers. Examples of internal context providers are translations, navigation, settings, alerts, and dialogs.
 
-## Example
+**Example**
 
 ```tsx
 <PageFramework navigate={navigate}>...</PageFramework>

package/docs/PageHeader.md

@@ -14,7 +14,7 @@ PageHeader enables the responsive layout of the header.
 | controls       | `ReactNode`    | Support for extra page controls.  |
 | headerActions  | `ReactNode`    | The actions for the page.         |
 
-## Example
+**Example**
 
 ```tsx
 <Page>

package/docs/PageLayout.md

@@ -4,9 +4,9 @@
 
 The PageLayout is used as the container for the contents of the page.
 It enables page components to leverage full page layout and scrolling of sub content.
-An example is a full page table that the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
+An example is a full page table where the page header, toolbar, column headers, and pagination stay fixed, but the rows of the table can scroll.
 
-## Example
+**Example**
 
 ```tsx
 <Page>

package/docs/assets/css/style.scss

@@ -51,27 +51,28 @@ h4 {
 }
 
 .highlight .p {
-  color: #fff8;
+  color: #da71d6;
 }
 
 .highlight .nv {
-  color: #4ad;
+  color: #579cd6;
 }
 
 .highlight .nc {
-  color: #fff;
+  color: #579cd6;
+  font-weight: normal;
 }
 
 .highlight .na {
-  color: #4ad;
+  color: #579cd6;
 }
 
 .highlight .k {
-  color: #248;
+  color: #579cd6;
 }
 
 .highlight .kd {
-  color: #248;
+  color: #579cd6;
 }
 
 .highlight .o {
@@ -79,7 +80,7 @@ h4 {
 }
 
 .highlight .s1 {
-  color: #fffc;
+  color: #bb846e;
 }
 
 .highlight .s {
@@ -96,11 +97,11 @@ h4 {
 }
 
 table thead {
-  background-color: #0004;
+  background-color: #08090b;
 }
 
 table tbody {
-  background-color: #0006;
+  background-color: #08090b;
 }
 
 .markdown-body table tr {

package/docs/index.md

@@ -8,12 +8,12 @@ A framework for building applications using [PatternFly](https://www.patternfly.
 - [Guides](Guides.md)
 - [Components](Components.md)
 
-The framework is made up of high level components using PatternFly components underneath.
-This allows the framework to adjust the web application for responsive layout.
+The framework is made up of high level components abstracting design patterns away from the PatternFly components used underneath.
 
-The framework:
+This framework:
 
 - does not use any state libraries other than the built in react context state management.
 - does not assume any specific translation libraries, but does provide a hook for internal translations.
 - does not assume any specific navigation libraries, but does provide a hook for internal navigation.
-  There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.
+
+There is an [Ansible UI Framework Demo](https://github.com/jamestalton/ansible-ui-framework-demo) repo showing an example of using the framework.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ansible/ansible-ui-framework",
   "description": "A framework for building applications using PatternFly.",
-  "version": "0.0.335",
+  "version": "0.0.337",
   "author": "Red Hat",
   "license": "MIT",
   "repository": {