@limetech/lime-elements 37.1.0-next.73 → 37.1.0-next.75

package/dist/types/components/help/help-content.d.ts

@@ -0,0 +1,15 @@
+import { Link } from '../../interface';
+/**
+ * Help content
+ * This is scrollable content that is placed in the popover of the Help component.
+ * Moved here mostly to avoid having inlined styles in the parent component.
+ * Since you cannot send styles to the Portal component, we need to have this
+ * child component.
+ * @private
+ */
+export declare class HelpContent {
+  value: string;
+  readMoreLink?: Link;
+  render(): any[];
+  private renderReadMoreLink;
+}

package/dist/types/components/help/help.d.ts

@@ -0,0 +1,52 @@
+import { OpenDirection } from '../menu/menu.types';
+import { Link } from '../../interface';
+/**
+ * A good design is self-explanatory! However, sometimes concepts are
+ * too complex to understand, no matter how well-designed a user interface is.
+ * In such cases, contextual help can be a great way to provide users with
+ * help precisely where and when users need it.
+ *
+ * In app interface design, providing contextual help emerges as a viable practice
+ * for enhancing user experience and usability.
+ * Contextual help serves as a quick-to-access guiding,
+ * empowering users to more easily understand and navigate through
+ * the intricacies of an application.
+ *
+ * Using this component designers empower users to grasp the functionality
+ * of an app more effortlessly, minimizes the learning curve,
+ * transforming complex features into accessible opportunities for exploration.
+ * @exampleComponent limel-example-help
+ * @exampleComponent limel-example-read-more
+ * @exampleComponent limel-example-open-direction
+ * @exampleComponent limel-example-placement
+ */
+export declare class Help {
+  /**
+   * The markdown content that will be displayed in the popover.
+   */
+  value: string;
+  /**
+   * Visualizes the trigger element. Defaults to: **?**
+   * :::important
+   * Be consistent across the product if you want to change it to a custom character.
+   * All instances of the help component should have the same trigger visualization.
+   * :::
+   */
+  trigger: string;
+  /**
+   * If supplied, it will render a "Read more" link at the bottom of the content.
+   * Even though you can add a link anywhere in the content, it is recommended to
+   * use the read more link. Because it will always be displayed at the bottom
+   * of the popover after the content, does not scroll away with the content,
+   * and it will be styled in a consistent way.
+   */
+  readMoreLink?: Link;
+  /**
+   * Decides the popover's location in relation to the trigger.
+   */
+  openDirection: OpenDirection;
+  private isOpen;
+  render(): any[];
+  private openPopover;
+  private onPopoverClose;
+}

package/dist/types/components.d.ts

@@ -1031,6 +1031,54 @@ export namespace Components {
          */
         "supportingText": string;
     }
+    /**
+     * A good design is self-explanatory! However, sometimes concepts are
+     * too complex to understand, no matter how well-designed a user interface is.
+     * In such cases, contextual help can be a great way to provide users with
+     * help precisely where and when users need it.
+     * In app interface design, providing contextual help emerges as a viable practice
+     * for enhancing user experience and usability.
+     * Contextual help serves as a quick-to-access guiding,
+     * empowering users to more easily understand and navigate through
+     * the intricacies of an application.
+     * Using this component designers empower users to grasp the functionality
+     * of an app more effortlessly, minimizes the learning curve,
+     * transforming complex features into accessible opportunities for exploration.
+     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-read-more
+     * @exampleComponent limel-example-open-direction
+     * @exampleComponent limel-example-placement
+     */
+    interface LimelHelp {
+        /**
+          * Decides the popover's location in relation to the trigger.
+         */
+        "openDirection": OpenDirection1;
+        /**
+          * If supplied, it will render a "Read more" link at the bottom of the content. Even though you can add a link anywhere in the content, it is recommended to use the read more link. Because it will always be displayed at the bottom of the popover after the content, does not scroll away with the content, and it will be styled in a consistent way.
+         */
+        "readMoreLink"?: Link;
+        /**
+          * Visualizes the trigger element. Defaults to: **?** :::important Be consistent across the product if you want to change it to a custom character. All instances of the help component should have the same trigger visualization. :::
+         */
+        "trigger": string;
+        /**
+          * The markdown content that will be displayed in the popover.
+         */
+        "value": string;
+    }
+    /**
+     * Help content
+     * This is scrollable content that is placed in the popover of the Help component.
+     * Moved here mostly to avoid having inlined styles in the parent component.
+     * Since you cannot send styles to the Portal component, we need to have this
+     * child component.
+     * @private 
+     */
+    interface LimelHelpContent {
+        "readMoreLink"?: Link;
+        "value": string;
+    }
     /**
      * This is an internal and private component that many input fields
      * use to display a helper text, along with a character counter below the
@@ -2890,6 +2938,44 @@ declare global {
         prototype: HTMLLimelHeaderElement;
         new (): HTMLLimelHeaderElement;
     };
+    /**
+     * A good design is self-explanatory! However, sometimes concepts are
+     * too complex to understand, no matter how well-designed a user interface is.
+     * In such cases, contextual help can be a great way to provide users with
+     * help precisely where and when users need it.
+     * In app interface design, providing contextual help emerges as a viable practice
+     * for enhancing user experience and usability.
+     * Contextual help serves as a quick-to-access guiding,
+     * empowering users to more easily understand and navigate through
+     * the intricacies of an application.
+     * Using this component designers empower users to grasp the functionality
+     * of an app more effortlessly, minimizes the learning curve,
+     * transforming complex features into accessible opportunities for exploration.
+     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-read-more
+     * @exampleComponent limel-example-open-direction
+     * @exampleComponent limel-example-placement
+     */
+    interface HTMLLimelHelpElement extends Components.LimelHelp, HTMLStencilElement {
+    }
+    var HTMLLimelHelpElement: {
+        prototype: HTMLLimelHelpElement;
+        new (): HTMLLimelHelpElement;
+    };
+    /**
+     * Help content
+     * This is scrollable content that is placed in the popover of the Help component.
+     * Moved here mostly to avoid having inlined styles in the parent component.
+     * Since you cannot send styles to the Portal component, we need to have this
+     * child component.
+     * @private 
+     */
+    interface HTMLLimelHelpContentElement extends Components.LimelHelpContent, HTMLStencilElement {
+    }
+    var HTMLLimelHelpContentElement: {
+        prototype: HTMLLimelHelpContentElement;
+        new (): HTMLLimelHelpContentElement;
+    };
     /**
      * This is an internal and private component that many input fields
      * use to display a helper text, along with a character counter below the
@@ -3509,6 +3595,8 @@ declare global {
         "limel-form": HTMLLimelFormElement;
         "limel-grid": HTMLLimelGridElement;
         "limel-header": HTMLLimelHeaderElement;
+        "limel-help": HTMLLimelHelpElement;
+        "limel-help-content": HTMLLimelHelpContentElement;
         "limel-helper-line": HTMLLimelHelperLineElement;
         "limel-icon": HTMLLimelIconElement;
         "limel-icon-button": HTMLLimelIconButtonElement;
@@ -4657,6 +4745,54 @@ declare namespace LocalJSX {
          */
         "supportingText"?: string;
     }
+    /**
+     * A good design is self-explanatory! However, sometimes concepts are
+     * too complex to understand, no matter how well-designed a user interface is.
+     * In such cases, contextual help can be a great way to provide users with
+     * help precisely where and when users need it.
+     * In app interface design, providing contextual help emerges as a viable practice
+     * for enhancing user experience and usability.
+     * Contextual help serves as a quick-to-access guiding,
+     * empowering users to more easily understand and navigate through
+     * the intricacies of an application.
+     * Using this component designers empower users to grasp the functionality
+     * of an app more effortlessly, minimizes the learning curve,
+     * transforming complex features into accessible opportunities for exploration.
+     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-read-more
+     * @exampleComponent limel-example-open-direction
+     * @exampleComponent limel-example-placement
+     */
+    interface LimelHelp {
+        /**
+          * Decides the popover's location in relation to the trigger.
+         */
+        "openDirection"?: OpenDirection1;
+        /**
+          * If supplied, it will render a "Read more" link at the bottom of the content. Even though you can add a link anywhere in the content, it is recommended to use the read more link. Because it will always be displayed at the bottom of the popover after the content, does not scroll away with the content, and it will be styled in a consistent way.
+         */
+        "readMoreLink"?: Link;
+        /**
+          * Visualizes the trigger element. Defaults to: **?** :::important Be consistent across the product if you want to change it to a custom character. All instances of the help component should have the same trigger visualization. :::
+         */
+        "trigger"?: string;
+        /**
+          * The markdown content that will be displayed in the popover.
+         */
+        "value"?: string;
+    }
+    /**
+     * Help content
+     * This is scrollable content that is placed in the popover of the Help component.
+     * Moved here mostly to avoid having inlined styles in the parent component.
+     * Since you cannot send styles to the Portal component, we need to have this
+     * child component.
+     * @private 
+     */
+    interface LimelHelpContent {
+        "readMoreLink"?: Link;
+        "value"?: string;
+    }
     /**
      * This is an internal and private component that many input fields
      * use to display a helper text, along with a character counter below the
@@ -5968,6 +6104,8 @@ declare namespace LocalJSX {
         "limel-form": LimelForm;
         "limel-grid": LimelGrid;
         "limel-header": LimelHeader;
+        "limel-help": LimelHelp;
+        "limel-help-content": LimelHelpContent;
         "limel-helper-line": LimelHelperLine;
         "limel-icon": LimelIcon;
         "limel-icon-button": LimelIconButton;
@@ -6402,6 +6540,34 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-header-narrow
              */
             "limel-header": LocalJSX.LimelHeader & JSXBase.HTMLAttributes<HTMLLimelHeaderElement>;
+            /**
+             * A good design is self-explanatory! However, sometimes concepts are
+             * too complex to understand, no matter how well-designed a user interface is.
+             * In such cases, contextual help can be a great way to provide users with
+             * help precisely where and when users need it.
+             * In app interface design, providing contextual help emerges as a viable practice
+             * for enhancing user experience and usability.
+             * Contextual help serves as a quick-to-access guiding,
+             * empowering users to more easily understand and navigate through
+             * the intricacies of an application.
+             * Using this component designers empower users to grasp the functionality
+             * of an app more effortlessly, minimizes the learning curve,
+             * transforming complex features into accessible opportunities for exploration.
+             * @exampleComponent limel-example-help
+             * @exampleComponent limel-example-read-more
+             * @exampleComponent limel-example-open-direction
+             * @exampleComponent limel-example-placement
+             */
+            "limel-help": LocalJSX.LimelHelp & JSXBase.HTMLAttributes<HTMLLimelHelpElement>;
+            /**
+             * Help content
+             * This is scrollable content that is placed in the popover of the Help component.
+             * Moved here mostly to avoid having inlined styles in the parent component.
+             * Since you cannot send styles to the Portal component, we need to have this
+             * child component.
+             * @private 
+             */
+            "limel-help-content": LocalJSX.LimelHelpContent & JSXBase.HTMLAttributes<HTMLLimelHelpContentElement>;
             /**
              * This is an internal and private component that many input fields
              * use to display a helper text, along with a character counter below the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.73",
+  "version": "37.1.0-next.75",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
     "@types/html-escaper": "^3.0.2",
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.39",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
     "@types/tabulator-tables": "^4.9.4",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -59,10 +59,10 @@
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
-    "eslint": "^8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-ban": "^1.6.0",
-    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-plugin-jsdoc": "^46.9.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",