Docs for new patterns (#4438)

* added docs for homepage * added docs for new tooltip pattern
2022-03-07 11:35:26 -08:00
parent c40fdd783e
commit 850add8c59
2 changed files with 85 additions and 0 deletions
@@ -0,0 +1,61 @@
+# Tooltips Notes
+
+This tooltip component was created to allow any content to be shown as a tooltip. You can place any
+HTML inside of the `tipContent` prop. Also, very important, the `TooltipWrapper` is designed **ONLY**
+to wrap text so make sure to use static text or text returned from a function.
+
+## Use cases
+
+1. As its own component
+2. Within a form input element
+
+## Examples
+
+**As its own component (Basic)**
+```jsx
+<TooltipWrapper tipContent="After hovering, you will see this.">
+  The base text that contains the hover state
+</TooltipWrapper>
+```
+
+**As its own component (Advanced)**
+
+You can even make the tooltip more dynamic HTML:
+
+```jsx
+<TooltipWrapper
+  tipContent={`
+    The &quot;snapshot&quot; key includes the query&apos;s results. 
+    <br />
+    These will be unique to your query.
+  `}
+>
+  The data sent to your configured log destination will look similar
+  to the following JSON:
+</TooltipWrapper>
+```
+
+**Within a form input element**
+
+Inside a form input element, you only need to specify a `tooltip` prop for the input. This can be
+text or HTML as mentioned before.
+
+```jsx
+<InputField
+  label="Password"
+  error={errors.password}
+  name="password"
+  onChange={onInputChange("password")}
+  placeholder="Password"
+  value={password || ""}
+  type="password"
+  hint={[
+    "Must include 7 characters, at least 1 number (e.g. 0 - 9), and at least 1 symbol (e.g. &*#)",
+  ]}
+  blockAutoComplete
+  tooltip={`\
+    This password is temporary. This user will be asked to set a new password after logging in to the Fleet UI.<br /><br />
+    This user will not be asked to set a new password after logging in to fleetctl or the Fleet API.
+  `}
+/>
+```
@@ -0,0 +1,24 @@
+# Homepage Notes
+
+The homepage is designed to contain a dynamic number of informational cards with dynamic layouts
+that are based on teams (if any) and device platforms (macOS, Linux, Windows). 
+
+## Architecture
+
+- Homepage Wrapper
+- Components
+- Cards
+
+## Hompage Wrapper
+
+The wrapper is a minimal file that instantiates all host values, cards, and layouts based on the
+team and platform selected. Cards are applied in a delcarative form, as functions, rather than
+components inserted in standard JSX. This is to enhance legibility as the number of cards grow.
+
+## Components
+
+Local components that needed extracting to make the code more maintainable.
+
+## Cards
+
+Each card design is placed in this directory. We anticipate creating more as the product gets more robust.