initial version of help items (#70)

src/components/help-enabler/HelpItem.test.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { HelpItem } from "./HelpItem";
+
+describe("<HelpItem />", () => {
+  it("render", () => {
+    const comp = render(<HelpItem item="storybook" />);
+    expect(comp.asFragment()).toMatchSnapshot();
+  });
+});

src/components/help-enabler/HelpItem.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Tooltip } from "@patternfly/react-core";
+import { HelpIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
+
+type HelpItemProps = {
+  item: string;
+};
+
+export const HelpItem = ({ item }: HelpItemProps) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip position="right" content={t(`help:${item}`)}>
+      <span id={item} data-testid={item}>
+        <HelpIcon />
+      </span>
+    </Tooltip>
+  );
+};

src/components/help-enabler/__snapshots__/HelpItem.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HelpItem /> render 1`] = `
+<DocumentFragment>
+  <span
+    aria-describedby="pf-tooltip-1"
+    data-testid="storybook"
+    id="storybook"
+  >
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="1em"
+      role="img"
+      style="vertical-align: -0.125em;"
+      viewBox="0 64 1024 1024"
+      width="1em"
+    >
+      <path
+        d="M512.059-73.143c-282.338 0-512.059 229.673-512.059 512.025 0 282.235 229.721 511.975 512.059 511.975 282.281 0 511.941-229.735 511.941-511.975 0.005-282.352-229.659-512.025-511.941-512.025zM512.059 826.523c-213.826 0-387.728-173.856-387.728-387.643 0-213.89 173.904-387.694 387.728-387.694 213.717 0 387.671 173.803 387.671 387.694 0.005 213.785-173.957 387.643-387.671 387.643zM585.143 164.571v109.714c0 4.951-1.808 9.237-5.429 12.857s-7.906 5.429-12.857 5.429h-109.714c-4.953 0-9.239-1.808-12.857-5.429s-5.429-7.906-5.429-12.857v-109.714c0-4.951 1.81-9.237 5.429-12.857s7.904-5.429 12.857-5.429h109.714c4.951 0 9.237 1.808 12.857 5.429s5.429 7.906 5.429 12.857zM521.616 365.714c118.343 0 214.286 88.965 214.286 187.429s-95.943 178.286-214.286 178.286c-173.045 0-208.091-93.714-213.963-171.113 0-7.936 6.729-9.838 15.872-9.838s108.073 0 113.143 0c6.096 0 14.475 0.633 17.554 10.571 0 48.857 135.968 54.953 135.968-7.904 0-31.506-29.717-63.817-68.571-66.194s-82.286-7.607-82.286-54.199c0-13.022 0-25.673 0-44.693 0-19.015 9.717-22.343 27.431-22.343s54.853-0.002 54.853-0.002z"
+        transform="rotate(180 0 512) scale(-1 1)"
+      />
+    </svg>
+  </span>
+</DocumentFragment>
+`;

src/help.json

@@ -0,0 +1,7 @@
+{
+  "en": {
+    "help": {
+      "storybook": "Sometimes you need some help and it's nice when the app does that"
+    }
+  }
+}

src/i18n.ts

@@ -3,9 +3,12 @@ import { initReactI18next } from "react-i18next";
 // import backend from "i18next-http-backend";
 
 import messages from "./messages.json";
+import help from "./help.json";
 
 const initOptions = {
-  resources: messages,
+  ns: ["messages", "help"],
+  defaultNS: "messages",
+  resources: { ...messages, ...help },
   lng: "en",
   fallbackLng: "en",
   saveMissing: true,

src/messages.json

@@ -1,6 +1,6 @@
 {
   "en": {
-    "translation": {
+    "messages": {
       "personalInfoHtmlTitle": "Personal Info",
       "personalInfoIntroMessage": "Manage your basic information",
       "Account Security": "Account Security",

src/stories/HelpSystem.stories.tsx

@@ -7,24 +7,31 @@ import {
 } from "@patternfly/react-core";
 import { Meta } from "@storybook/react";
 
+import { HelpItem } from "../components/help-enabler/HelpItem";
 import {
   Help,
   HelpContext,
   HelpHeader,
 } from "../components/help-enabler/HelpHeader";
+import { I18nextProvider } from "react-i18next";
+import { i18n } from "../i18n";
 
 export default {
   title: "Help System Example",
   component: HelpHeader,
 } as Meta;
 
-export const HelpSystem = () => {
-  return (
-    <Help>
-      <HelpSystemTest />
-    </Help>
-  );
-};
+export const HelpSystem = () => (
+  <Help>
+    <HelpSystemTest />
+  </Help>
+);
+
+export const HelpItemz = () => (
+  <I18nextProvider i18n={i18n}>
+    <HelpItem item="storybook" />
+  </I18nextProvider>
+);
 
 const HelpSystemTest = () => {
   const { enabled } = useContext(HelpContext);