{"ast":null,"code":"function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport React from 'react';\nimport { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';\nimport srcImport0 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewer.png';\nimport srcImport1 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewerdark.png';\nimport srcImport2 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewerclear.png';\nimport srcImport3 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewercog.png';\nimport srcImport4 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewersearch.png';\nvar pageData = {\n  \"id\": \"Log viewer\",\n  \"section\": \"extensions\",\n  \"source\": \"design-guidelines\",\n  \"slug\": \"/extensions/log-viewer/design-guidelines\",\n  \"sourceLink\": \"https://github.com/patternfly/patternfly-org/blob/main/packages/react-log-viewer/patternfly-docs/content/extensions/log-viewer/design-guidelines/design-guidelines.md\"\n};\npageData.examples = {};\n\nvar Component = function Component() {\n  return React.createElement(React.Fragment, null, React.createElement(\"p\", {\n    \"className\": \"ws-p\"\n  }, \"A \", React.createElement(\"strong\", null, \"log viewer\"), \" is a preconfigured component that gives you the option to visualize your log content. Log viewer renders log output in real time in a clear and structured way.\"), React.createElement(AutoLinkHeader, {\n    \"id\": \"light-theme-log-viewer\",\n    \"size\": \"h2\",\n    \"className\": \"ws-title ws-h2\"\n  }, \"Light theme log viewer\"), React.createElement(\"img\", _extends({\n    src: srcImport0,\n    width: srcImport0.width,\n    height: srcImport0.height\n  }, {\n    \"alt\": \"Log Viewer\",\n    \"className\": \"ws-img\"\n  })), React.createElement(\"ol\", {\n    \"className\": \"ws-ol\"\n  }, React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Type of log dropdown menu:\"), \" Allow users to switch between different types of logs.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Search bar:\"), \" Use to look up historical logs. The results will be highlighted in the log.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Pause button:\"), \" Play and stop your log content viewing, instead of scrolling through.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Clear log:\"), \" Clear the displayed log output.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Cog:\"), \" House settings such as wrapping lines, showing timestamps, and displaying line numbers.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Export:\"), \" Export log content.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Download:\"), \" Download the log file.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, React.createElement(\"strong\", null, \"Fullscreen:\"), \" Expand log viewer to full screen.\")), React.createElement(AutoLinkHeader, {\n    \"id\": \"dark-theme-log-viewer\",\n    \"size\": \"h2\",\n    \"className\": \"ws-title ws-h2\"\n  }, \"Dark theme log viewer\"), React.createElement(\"p\", {\n    \"className\": \"ws-p\"\n  }, \"We recommend using the light theme editor by default, but there is also a dark theme log viewer\\navailable. All log viewer functionality remains the same whether a light or dark theme is used.\"), React.createElement(\"img\", _extends({\n    src: srcImport1,\n    width: srcImport1.width,\n    height: srcImport1.height\n  }, {\n    \"alt\": \"Dark theme log viewer\",\n    \"className\": \"ws-img\"\n  })), React.createElement(AutoLinkHeader, {\n    \"id\": \"usability\",\n    \"size\": \"h2\",\n    \"className\": \"ws-title ws-h2\"\n  }, \"Usability\"), React.createElement(\"p\", {\n    \"className\": \"ws-p\"\n  }, \"Use a log viewer when:\"), React.createElement(\"ul\", {\n    \"className\": \"ws-ul\"\n  }, React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, \"The user can manipulate 1 large log file or multiple log files at the same time.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, \"You want to create a more readable and accessible environment for the user.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, \"The user may actively search for specific logs within a large log file.\"), React.createElement(\"li\", {\n    \"className\": \"ws-li\"\n  }, \"The user shares files frequently with other users or teams.\")), React.createElement(AutoLinkHeader, {\n    \"id\": \"log-viewer-functionality\",\n    \"size\": \"h2\",\n    \"className\": \"ws-title ws-h2\"\n  }, \"Log viewer functionality\"), React.createElement(AutoLinkHeader, {\n    \"id\": \"with-popover\",\n    \"size\": \"h3\",\n    \"className\": \"ws-title ws-h3\"\n  }, \"With popover\"), React.createElement(\"p\", {\n    \"className\": \"ws-p\"\n  }, \"The clear log button opens up a popover with further options, to prevent a user from accidentally clearing their log content.\"), React.createElement(\"img\", _extends({\n    src: srcImport2,\n    width: srcImport2.width,\n    height: srcImport2.height\n  }, {\n    \"alt\": \"Clear this log popover open on a Log viewer\",\n    \"className\": \"ws-img\"\n  })), React.createElement(AutoLinkHeader, {\n    \"id\": \"with-dropdown-drilldown-and-search-expanded\",\n    \"size\": \"h3\",\n    \"className\": \"ws-title ws-h3\"\n  }, \"With dropdown, drilldown, and search expanded\"), React.createElement(\"p\", {\n    \"className\": \"ws-p\"\n  }, \"The cog icon in the log viewer toolbar allows you to store content options such as timestamps or line numbers for better orientation within the log viewer.\"), React.createElement(\"img\", _extends({\n    src: srcImport3,\n    width: srcImport3.width,\n    height: srcImport3.height\n  }, {\n    \"alt\": \"Cog options open on a Log viewer\",\n    \"className\": \"ws-img\"\n  })), React.createElement(AutoLinkHeader, {\n    \"id\": \"with-search-results\",\n    \"size\": \"h3\",\n    \"className\": \"ws-title ws-h3\"\n  }, \"With search results\"), React.createElement(\"p\", {\n    \"className\": \"ws-p\"\n  }, \"The search bar provides highlighted search results for better findability within a log viewer\\u2019s content.\"), React.createElement(\"img\", _extends({\n    src: srcImport4,\n    width: srcImport4.width,\n    height: srcImport4.height\n  }, {\n    \"alt\": \"Log Viewer with highlighted search results\",\n    \"className\": \"ws-img\"\n  })));\n};\n\nComponent.displayName = 'ExtensionsLogViewerDesignGuidelinesDocs';\nComponent.pageData = pageData;\nexport default Component;","map":{"version":3,"names":["React","AutoLinkHeader","Example","Link","PatternflyThemeLink","srcImport0","srcImport1","srcImport2","srcImport3","srcImport4","pageData","examples","Component","width","height","displayName"],"sources":["/Users/ausulliv/repos/temp/patternfly-react/packages/react-log-viewer/patternfly-docs/generated/extensions/log-viewer/design-guidelines.js"],"sourcesContent":["import React from 'react';\nimport { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';\nimport srcImport0 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewer.png';\nimport srcImport1 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewerdark.png';\nimport srcImport2 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewerclear.png';\nimport srcImport3 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewercog.png';\nimport srcImport4 from '../../../content/extensions/log-viewer/design-guidelines/./img/logviewersearch.png';\nconst pageData = {\n  \"id\": \"Log viewer\",\n  \"section\": \"extensions\",\n  \"source\": \"design-guidelines\",\n  \"slug\": \"/extensions/log-viewer/design-guidelines\",\n  \"sourceLink\": \"https://github.com/patternfly/patternfly-org/blob/main/packages/react-log-viewer/patternfly-docs/content/extensions/log-viewer/design-guidelines/design-guidelines.md\"\n};\npageData.examples = {\n  \n};\n\nconst Component = () => (\n  <React.Fragment>\n    <p {...{\"className\":\"ws-p\"}}>\n      {`A `}\n      <strong>\n        {`log viewer`}\n      </strong>\n      {` is a preconfigured component that gives you the option to visualize your log content. Log viewer renders log output in real time in a clear and structured way.`}\n    </p>\n    <AutoLinkHeader {...{\"id\":\"light-theme-log-viewer\",\"size\":\"h2\",\"className\":\"ws-title ws-h2\"}}>\n      {`Light theme log viewer`}\n    </AutoLinkHeader>\n    <img src={srcImport0} width={srcImport0.width} height={srcImport0.height} {...{\"alt\":\"Log Viewer\",\"className\":\"ws-img\"}}>\n    </img>\n    <ol {...{\"className\":\"ws-ol\"}}>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Type of log dropdown menu:`}\n        </strong>\n        {` Allow users to switch between different types of logs.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Search bar:`}\n        </strong>\n        {` Use to look up historical logs. The results will be highlighted in the log.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Pause button:`}\n        </strong>\n        {` Play and stop your log content viewing, instead of scrolling through.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Clear log:`}\n        </strong>\n        {` Clear the displayed log output.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Cog:`}\n        </strong>\n        {` House settings such as wrapping lines, showing timestamps, and displaying line numbers.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Export:`}\n        </strong>\n        {` Export log content.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Download:`}\n        </strong>\n        {` Download the log file.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        <strong>\n          {`Fullscreen:`}\n        </strong>\n        {` Expand log viewer to full screen.`}\n      </li>\n    </ol>\n    <AutoLinkHeader {...{\"id\":\"dark-theme-log-viewer\",\"size\":\"h2\",\"className\":\"ws-title ws-h2\"}}>\n      {`Dark theme log viewer`}\n    </AutoLinkHeader>\n    <p {...{\"className\":\"ws-p\"}}>\n      {`We recommend using the light theme editor by default, but there is also a dark theme log viewer\navailable. All log viewer functionality remains the same whether a light or dark theme is used.`}\n    </p>\n    <img src={srcImport1} width={srcImport1.width} height={srcImport1.height} {...{\"alt\":\"Dark theme log viewer\",\"className\":\"ws-img\"}}>\n    </img>\n    <AutoLinkHeader {...{\"id\":\"usability\",\"size\":\"h2\",\"className\":\"ws-title ws-h2\"}}>\n      {`Usability`}\n    </AutoLinkHeader>\n    <p {...{\"className\":\"ws-p\"}}>\n      {`Use a log viewer when:`}\n    </p>\n    <ul {...{\"className\":\"ws-ul\"}}>\n      <li {...{\"className\":\"ws-li\"}}>\n        {`The user can manipulate 1 large log file or multiple log files at the same time.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        {`You want to create a more readable and accessible environment for the user.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        {`The user may actively search for specific logs within a large log file.`}\n      </li>\n      <li {...{\"className\":\"ws-li\"}}>\n        {`The user shares files frequently with other users or teams.`}\n      </li>\n    </ul>\n    <AutoLinkHeader {...{\"id\":\"log-viewer-functionality\",\"size\":\"h2\",\"className\":\"ws-title ws-h2\"}}>\n      {`Log viewer functionality`}\n    </AutoLinkHeader>\n    <AutoLinkHeader {...{\"id\":\"with-popover\",\"size\":\"h3\",\"className\":\"ws-title ws-h3\"}}>\n      {`With popover`}\n    </AutoLinkHeader>\n    <p {...{\"className\":\"ws-p\"}}>\n      {`The clear log button opens up a popover with further options, to prevent a user from accidentally clearing their log content.`}\n    </p>\n    <img src={srcImport2} width={srcImport2.width} height={srcImport2.height} {...{\"alt\":\"Clear this log popover open on a Log viewer\",\"className\":\"ws-img\"}}>\n    </img>\n    <AutoLinkHeader {...{\"id\":\"with-dropdown-drilldown-and-search-expanded\",\"size\":\"h3\",\"className\":\"ws-title ws-h3\"}}>\n      {`With dropdown, drilldown, and search expanded`}\n    </AutoLinkHeader>\n    <p {...{\"className\":\"ws-p\"}}>\n      {`The cog icon in the log viewer toolbar allows you to store content options such as timestamps or line numbers for better orientation within the log viewer.`}\n    </p>\n    <img src={srcImport3} width={srcImport3.width} height={srcImport3.height} {...{\"alt\":\"Cog options open on a Log viewer\",\"className\":\"ws-img\"}}>\n    </img>\n    <AutoLinkHeader {...{\"id\":\"with-search-results\",\"size\":\"h3\",\"className\":\"ws-title ws-h3\"}}>\n      {`With search results`}\n    </AutoLinkHeader>\n    <p {...{\"className\":\"ws-p\"}}>\n      {`The search bar provides highlighted search results for better findability within a log viewer’s content.`}\n    </p>\n    <img src={srcImport4} width={srcImport4.width} height={srcImport4.height} {...{\"alt\":\"Log Viewer with highlighted search results\",\"className\":\"ws-img\"}}>\n    </img>\n  </React.Fragment>\n);\nComponent.displayName = 'ExtensionsLogViewerDesignGuidelinesDocs';\nComponent.pageData = pageData;\n\nexport default Component;\n"],"mappings":"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"},"metadata":{},"sourceType":"module"}