feat: WIP

.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-    stories: ["../src/stories/**/*.stories.js", "../src/stories/**/*.docs.mdx"],
+    stories: ["../src/stories/**/*.docs.mdx", "../src/stories/**/*.stories.js"],
     addons: [
         "@storybook/addon-links",
         "@storybook/addon-essentials",

src/stories/formautofocus.docs.mdx

@@ -0,0 +1,63 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { FormAutoFocus } from "./formautofocus.stories.js";
+
+<Meta title="Patterns/FormAutoFocus" />
+
+# Formautofocus pattern.
+
+Automatically set the focus on a form input field.
+
+## Configuration
+
+```md
+|  Option   |  Type  |                     Default                     | Description |
+| :-------: | :----: | :---------------------------------------------: | :---------: |
+| condition | string |                   "div.error"                   |             |
+|  target   | string | "div.error :input:not(.formTabs):visible:first" |             |
+|  always   | string |      ":input:not(.formTabs):visible:first"      |             |
+```
+
+## Examples
+
+### Form Autofocus
+
+<br />
+<Story name="Form AutoFocus" of={FormAutoFocus} />
+
+```html
+<h4>Form without Autofocus</h4>
+<form>
+    <div class="error">
+        <input
+            type="text"
+            placeholder="should not be focused"
+            name="in_other_form_should_not_be_focused"
+        />
+    </div>
+</form>
+<h4>Form with Autofocus</h4>
+<form class="pat-formautofocus">
+    <div>
+        <input
+            type="text"
+            placeholder="should not be focused"
+            name="a_should_not_be_focused"
+            class="formTabs"
+        />
+        <input
+            type="text"
+            placeholder="should not be focused"
+            name="b_should_not_be_focused"
+        />
+    </div>
+    <div class="error">
+        <input
+            type="text"
+            placeholder="should not be focused"
+            name="c_should_not_be_focused"
+            class="formTabs"
+        />
+        <input type="text" name="d_should_be_focused" />
+    </div>
+</form>
+```

src/stories/formautofocus.stories.js

@@ -0,0 +1,71 @@
+import $ from "jquery";
+import { RenderHTML } from "./setup.js";
+import FormAutofocus from "../../src/pat/formautofocus/formautofocus.js";
+
+export default {
+    title: "Patterns/FormAutoFocus",
+    argTypes: {
+        error: {
+            control: "boolean",
+            description: "Toggle to add an error state",
+            table: {
+                category: "Behavior",
+            },
+        },
+    },
+};
+
+const getFormAutoFocus = ({ error }) => `
+  <h4>Form without Autofocus</h4>
+  <form>
+      <div class="error">
+          <input
+              type="text"
+              placeholder="should not be focused"
+              name="in_other_form_should_not_be_focused"
+          />
+      </div>
+  </form>
+  <br />
+  <h4>Form with Autofocus</h4>
+  <form class="pat-formautofocus">
+      <div>
+          <input
+              type="text"
+              placeholder="should not be focused"
+              name="a_should_not_be_focused"
+              class="formTabs"
+          />
+          <input
+              type="text"
+              placeholder="should not be focused"
+              name="b_should_not_be_focused"
+          />
+      </div>
+      ${
+          error
+              ? `
+        <div class="error">
+          <input
+              type="text"
+              placeholder="should not be focused"
+              name="c_should_not_be_focused"
+              class="formTabs"
+          />
+          <input type="text" name="d_should_be_focused" />
+      </div>`
+              : ""
+      }
+  </form>
+`;
+
+export const FormAutoFocus = {
+    render: (args) => {
+        const wrapper = RenderHTML(args, getFormAutoFocus);
+
+        return wrapper;
+    },
+    args: {
+        error: true,
+    },
+};

src/stories/passwordstrength.docs.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { PasswordStrength, PasswordStrengthCustom } from "./passwordstrength.stories.js";
+
+<Meta title="Patterns/PasswordStrength" />
+
+# Password strength pattern.
+
+Check the strength of a password.
+
+## Configuration
+
+```md
+| Option |  Type  | Default |                   Description                   |
+| :----: | :----: | :-----: | :---------------------------------------------: |
+| zxcvbn | string |  cdnjs  | Location to load zxcvbn from. Defaults to cdnjs |
+```
+
+## Examples
+
+### Simple
+
+<br />
+<Story name="Password Strength" of={PasswordStrength} />
+
+```html
+<input type="password" class="pat-passwordstrength" />
+```
+
+### Custom zxcvbn location
+
+<br />
+<Story name="Password Strength" of={PasswordStrengthCustom} />
+
+```html
+<input
+    type="password"
+    class="pat-passwordstrength"
+    data-pat-passwordstrength="zxcvbn: //lowe.github.io/tryzxcvbn/zxcvbn.js"
+/>
+```

src/stories/passwordstrength.stories.js

@@ -0,0 +1,43 @@
+import $ from "jquery";
+import { RenderHTML } from "./setup.js";
+import PasswordStrengthComponent from "../../src/pat/passwordstrength/passwordstrength.js";
+
+export default {
+    title: "Patterns/PasswordStrength",
+    zxcvbn: {
+        control: "text",
+        description: "Custom URL for the zxcvbn library",
+        table: {
+            disable: true,
+        },
+    },
+};
+
+// Simple password
+const getPasswordStrength = () => `
+  <input type="password" class="pat-passwordstrength" />
+`;
+
+export const PasswordStrength = {
+    render: () => {
+        const wrapper = RenderHTML({}, getPasswordStrength);
+
+        return wrapper;
+    },
+};
+
+// Custom zxcvbn location
+const getPasswordStrengthCustom = ({ zxcvbn }) => `
+  <input
+    type="password"
+    class="pat-passwordstrength"
+    data-pat-passwordstrength="zxcvbn: ${zxcvbn}"
+  />
+`;
+
+export const PasswordStrengthCustom = {
+    render: (args) => RenderHTML(args, getPasswordStrengthCustom),
+    args: {
+        zxcvbn: "//lowe.github.io/tryzxcvbn/zxcvbn.js",
+    },
+};

src/stories/setup.js

@@ -0,0 +1,20 @@
+import registry from "@patternslib/patternslib/src/core/registry";
+
+/**
+ * Storybook runs inside an iframe, which means we need to ensure that
+ * Patternslib is fully initialized before rendering the HTML.
+ *
+ * To achieve this, the `RenderHTML` function delays rendering
+ * so Patternslib is ready.
+ */
+export const RenderHTML = (args, getStoryHtml) => {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = getStoryHtml(args);
+
+    // Ensure PatternsLib initializes after render
+    setTimeout(() => {
+        registry.scan(wrapper);
+    }, 300);
+
+    return wrapper;
+};

src/stories/toggle.stories.js

@@ -1,5 +1,5 @@
 import $ from "jquery";
-import registry from "@patternslib/patternslib/src/core/registry";
+import { RenderHTML } from "./setup.js";
 import Toggle from "../../src/pat/toggle/toggle.js";
 
 export default {
@@ -26,18 +26,6 @@ export default {
     },
 };
 
-const RenderHTML = (args, getStoryHtml) => {
-    const wrapper = document.createElement("div");
-    wrapper.innerHTML = getStoryHtml(args);
-
-    // Ensure PatternsLib initializes after render
-    setTimeout(() => {
-        registry.scan(wrapper);
-    }, 300);
-
-    return wrapper;
-};
-
 // Toggle itself
 const getToggleItself = ({ value }) => `
     <button type="button"