doc: add explanations on how to use the card

ESLFACEITGROUP · Sep 17, 2024 · 77e99ff · 77e99ff
1 parent 9aaf450
commit 77e99ff
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 0 deletions.
diff --git a/docs/assets/card-compact-closed.png b/docs/assets/card-compact-closed.png
diff --git a/docs/assets/card-compact-opened.png b/docs/assets/card-compact-opened.png
diff --git a/docs/opa-entity-checker/introduction.md b/docs/opa-entity-checker/introduction.md
@@ -21,6 +21,17 @@ For more details, check out:
 - [Quick-start Guide](/opa-entity-checker/quick-start.md)
 - [Local Development Guide](/opa-entity-checker/local-development.md)
 
+## Card Violations Variants 
+
+The card comes in two flavor: `default` and `compact`. The version you have seen above is the default card.
+
+The compact version is intended to be used as a banner that display how many errors where found, with a dropdown to 
+see the details.
+
+![Compact MetaData Card Violations Closed](../assets/card-compact-closed.png)
+
+![Compact MetaData Card Violations Open](../assets/card-compact-opened.png)
+
 ## Join The Community
 
 This project is a part of the broader Backstage and Open Policy Agent ecosystems. Explore more about these communities:

diff --git a/docs/opa-entity-checker/quick-start.md b/docs/opa-entity-checker/quick-start.md
@@ -142,6 +142,30 @@ const overviewContent = (
 );
 ```
 
+You can also use the compact Card variant as follows. The card is intended to be used as a warning content banner.
+
+```tsx
+import {
+    OpaMetadataAnalysisCard,
+    hasOPAValidationErrors,
+} from '@parsifal-m/plugin-opa-entity-checker';
+
+const entityWarningContent = (
+    //...
+    <EntitySwitch>
+      <EntitySwitch.Case if={hasOPAValidationErrors}>
+        <Grid item xs={12}>
+          <OpaMetadataAnalysisCard
+            title="Entity Validation"
+            variant="compact"
+          />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+    //...
+}
+```
+
 ## Configuration
 
 The OPA client requires configuration to connect to the OPA server. You need to provide a `baseUrl` and an `entrypoint` for the OPA server in your Backstage app-config.yaml, based on the example above we would have the following configuration: