Merge pull request #105 from patternfly/add-logsnippet

add OpenShift LogSnippet

packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md

@@ -0,0 +1,27 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Log snippet
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['LogSnippet']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippet.md
+---
+
+import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet';
+
+A **log snippet** component provides a way to display a log snippet or code along with a message
+
+## Examples
+
+### Basic log snippet
+
+```js file="./LogSnippetExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/LogSnippet/LogSnippetExample.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import LogSnippet from '@patternfly/react-component-groups/dist/dynamic/LogSnippet';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const code = `apiVersion: helm.openshift.io/v1beta1/
+  kind: HelmChartRepository
+  metadata:
+  name: azure-sample-repo
+  spec:
+  connectionConfig:
+  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
+
+  return <LogSnippet message='Failure - check logs for details' logSnippet={code} />;
+}

packages/module/src/LogSnippet/LogSnippet.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import LogSnippet from './LogSnippet';
+
+describe('LogSnippet component', () => {
+  it('should render LogSnippet component', () => {
+    expect(render(<LogSnippet message='A log snippet' logSnippet='console.log(hello world)'/>)).toMatchSnapshot();
+  });
+});

packages/module/src/LogSnippet/LogSnippet.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { CodeBlock, CodeBlockCode, Flex, FlexItem, FlexProps, Text, TextVariants } from '@patternfly/react-core';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss'
+
+export type BorderVariant = 'danger' | 'success' | 'info' | 'warning';
+
+export interface LogSnippetProps extends FlexProps {
+  /** Log snippet or code to be displayed */
+  logSnippet?: string;
+  /** Message to appear above the log snippet */
+  message: string | React.ReactNode;
+  /** Custom color for left border */
+  leftBorderVariant?: BorderVariant;
+}
+
+const useStyles = createUseStyles({
+  logSnippet: {
+    marginLeft: 'var(--pf-v5-global--spacer--sm)',
+    padding: 'var(--pf-v5-global--spacer--sm) 0 var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--sm)',
+    backgroundColor: 'var(--pf-v5-global--BackgroundColor--100)',
+  },
+  variantBorderColor: (leftBorderVariant: string) => ({
+    borderLeft: `var(--pf-v5-global--BorderWidth--md) solid var(--pf-v5-global--${leftBorderVariant}-color--100)`,
+  }),
+  statusMessage: {
+    marginBottom:'var(--pf-v5-global--spacer--sm)',
+  },
+});
+
+
+
+export const LogSnippet: React.FunctionComponent<LogSnippetProps> = ({ logSnippet, message, leftBorderVariant = 'danger', ...props }: LogSnippetProps) => {
+  const classes = useStyles(leftBorderVariant);
+
+  return (
+    <Flex direction={{ default: 'column' }} className={clsx(classes.logSnippet, classes.variantBorderColor)} {...props}>
+      <FlexItem>
+        { typeof message === 'string' ? <Text component={TextVariants.p} className={classes.statusMessage}>{message}</Text> : message }
+      </FlexItem>
+      { logSnippet && <FlexItem>
+        <CodeBlock>
+          <CodeBlockCode id="code-content">{logSnippet}</CodeBlockCode>
+        </CodeBlock> 
+      </FlexItem> }
+    </Flex>
+  )
+};
+
+export default LogSnippet;

packages/module/src/LogSnippet/__snapshots__/LogSnippet.test.tsx.snap

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LogSnippet component should render LogSnippet component 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="pf-v5-l-flex pf-m-column logSnippet-0-2-1 variantBorderColor-0-2-2 variantBorderColor-d0-0-2-4"
+      >
+        <div
+          class=""
+        >
+          <p
+            class="statusMessage-0-2-3"
+            data-ouia-component-id="OUIA-Generated-Text-1"
+            data-ouia-component-type="PF5/Text"
+            data-ouia-safe="true"
+            data-pf-content="true"
+          >
+            A log snippet
+          </p>
+        </div>
+        <div
+          class=""
+        >
+          <div
+            class="pf-v5-c-code-block"
+          >
+            <div
+              class="pf-v5-c-code-block__content"
+            >
+              <pre
+                class="pf-v5-c-code-block__pre"
+                id="code-content"
+              >
+                <code
+                  class="pf-v5-c-code-block__code"
+                >
+                  console.log(hello world)
+                </code>
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="pf-v5-l-flex pf-m-column logSnippet-0-2-1 variantBorderColor-0-2-2 variantBorderColor-d0-0-2-4"
+    >
+      <div
+        class=""
+      >
+        <p
+          class="statusMessage-0-2-3"
+          data-ouia-component-id="OUIA-Generated-Text-1"
+          data-ouia-component-type="PF5/Text"
+          data-ouia-safe="true"
+          data-pf-content="true"
+        >
+          A log snippet
+        </p>
+      </div>
+      <div
+        class=""
+      >
+        <div
+          class="pf-v5-c-code-block"
+        >
+          <div
+            class="pf-v5-c-code-block__content"
+          >
+            <pre
+              class="pf-v5-c-code-block__pre"
+              id="code-content"
+            >
+              <code
+                class="pf-v5-c-code-block__code"
+              >
+                console.log(hello world)
+              </code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

packages/module/src/LogSnippet/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LogSnippet';
+export * from './LogSnippet';

packages/module/src/index.ts

@@ -36,6 +36,9 @@ export * from './HorizontalNav';
 export { default as InvalidObject } from './InvalidObject';
 export * from './InvalidObject';
 
+export { default as LogSnippet } from './LogSnippet';
+export * from './LogSnippet';
+
 export { default as NotAuthorized } from './NotAuthorized';
 export * from './NotAuthorized';