feat(contextual-help): create component

packages/components/src/contextual-help/contextual-help.css

@@ -0,0 +1,9 @@
+@layer sl-components {
+  [data-sl-contextual-help-popover] {
+    max-height: 16rem;
+    width: 16rem;
+    overflow: hidden auto;
+    font: var(--sl-text-body-font);
+    letter-spacing: var(--sl-text-body-letter-spacing);
+  }
+}

packages/components/src/contextual-help/contextual-help.tsx

@@ -0,0 +1,63 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import React, { forwardRef } from 'react'
+import './contextual-help.css'
+import type { PopoverProviderProps } from '../popover'
+import { PopoverProvider, PopoverTrigger, Popover } from '../popover'
+import { Action } from '../action'
+import { IconQuestion } from '@vtex/shoreline-icons'
+import { Content } from '../content'
+
+/**
+ * Shows the user information relative to a context
+ * @example
+ * <ContextualHelp label="Meaningful label">
+ *  Help message
+ * </ContextualHelp>
+ */
+export const ContextualHelp = forwardRef<HTMLDivElement, ContextualHelpProps>(
+  function ContextualHelp(props, ref) {
+    const {
+      children,
+      className,
+      label,
+      open,
+      setOpen,
+      defaultOpen,
+      store,
+      ...otherProps
+    } = props
+
+    return (
+      <div data-sl-contextual-help className={className}>
+        <PopoverProvider
+          open={open}
+          setOpen={setOpen}
+          defaultOpen={defaultOpen}
+          store={store}
+        >
+          <PopoverTrigger asChild>
+            <Action label={label} iconOnly>
+              <IconQuestion />
+            </Action>
+          </PopoverTrigger>
+          <Popover data-sl-contextual-help-popover ref={ref} {...otherProps}>
+            <Content>{children}</Content>
+          </Popover>
+        </PopoverProvider>
+      </div>
+    )
+  }
+)
+
+export interface ContextualHelpProps
+  extends ComponentPropsWithoutRef<'div'>,
+    Pick<PopoverProviderProps, 'open' | 'setOpen' | 'defaultOpen' | 'store'> {
+  /**
+   * Label for the help
+   */
+  label: string
+  /**
+   * Children prop
+   */
+  children?: ReactNode
+}

packages/components/src/contextual-help/index.ts

@@ -0,0 +1 @@
+export * from './contextual-help'

packages/components/src/contextual-help/stories/contextual-help.stories.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+
+import { ContextualHelp } from '../index'
+import { Text } from '../../text'
+import { Stack } from '../../stack'
+
+export default {
+  title: 'shoreline-components/contextual-help',
+}
+
+export function Default() {
+  return (
+    <ContextualHelp label="Catalog indexing">
+      <Stack>
+        <Text as="p">
+          Catalog indexing refers to the process of creating an organized and
+          searchable index of information in a catalog. A catalog is a
+          systematic list or collection of items, often with details or
+          descriptions, and indexing is the method of creating an efficient and
+          structured way to access and retrieve information from that catalog.
+          In various contexts, catalog indexing can refer to different types of
+          catalogs, such as:
+        </Text>
+        <ol
+          style={{
+            marginBlockStart: 'var(--sl-space-3)',
+            paddingInlineStart: 'var(--sl-space-6)',
+          }}
+        >
+          <Text as="li">
+            Library Catalogs: In a library, catalog indexing involves creating
+            an index of books, journals, and other materials. This index
+            typically includes information like the title, author, subject, and
+            other relevant details.
+          </Text>
+          <Text as="li">
+            E-commerce Catalogs: In the context of online shopping, catalog
+            indexing involves organizing and indexing product information. This
+            can include details like product names, descriptions, prices, and
+            other attributes. This process is crucial for efficient search
+            functionality on e-commerce websites.
+          </Text>
+          <Text as="li">
+            Database Indexing: In the realm of databases, catalog indexing
+            involves creating indexes on database tables to improve the speed
+            and efficiency of data retrieval operations. This is common in
+            relational database management systems (RDBMS) to optimize query
+            performance.
+          </Text>
+        </ol>
+        <Text as="p">
+          The goal of catalog indexing is to facilitate quick and accurate
+          retrieval of information. By creating an index, users can search for
+          specific items or information without having to scan through the
+          entire catalog. This is especially important in large datasets where
+          finding information quickly can be challenging without an efficient
+          indexing system. The process of catalog indexing may involve the use
+          of specialized algorithms and data structures to create an index that
+          allows for fast and effective searching. It's a fundamental aspect of
+          information management in various fields, ensuring that users can
+          access the desired information with minimal effort.
+        </Text>
+      </Stack>
+    </ContextualHelp>
+  )
+}
+
+export function Controlled() {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <div>
+      {open ? 'Is Open' : 'Is Closed'}
+      <ContextualHelp open={open} setOpen={setOpen} label="Message">
+        Message
+      </ContextualHelp>
+    </div>
+  )
+}

packages/components/src/contextual-help/tests/contextual-help.vitest.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+
+import { ContextualHelp } from '../contextual-help'
+
+describe('contextual-help', () => {
+  test('renders', () => {
+    const { container } = render(
+      <ContextualHelp defaultOpen label="help">
+        Help
+      </ContextualHelp>
+    )
+
+    expect(
+      container.querySelector('[data-sl-contextual-help]')
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-sl-contextual-help-popover]')
+    ).toBeInTheDocument()
+  })
+})

packages/components/src/index.ts

@@ -1,4 +1,5 @@
 /* PLOP_INJECT_EXPORT */
+export * from './contextual-help'
 export * from './toast'
 export * from './skeleton'
 export * from './tab'

packages/components/src/popover/popover-provider.tsx

@@ -3,5 +3,7 @@ import {
   usePopoverContext,
   usePopoverStore,
 } from '@ariakit/react'
+import type { PopoverProviderProps } from '@ariakit/react'
 
 export { PopoverProvider, usePopoverContext, usePopoverStore }
+export type { PopoverProviderProps }

packages/components/src/text/text.tsx

@@ -52,8 +52,13 @@ interface Paragraph extends ComponentProps, ComponentPropsWithoutRef<'p'> {
 interface Div extends ComponentProps, ComponentPropsWithoutRef<'div'> {
   as: 'div'
 }
+
+interface Li extends ComponentProps, ComponentPropsWithoutRef<'li'> {
+  as: 'li'
+}
+
 interface Span extends ComponentProps, ComponentPropsWithoutRef<'span'> {
   as?: 'span'
 }
 
-export type TextProps = Span | Heading | Label | Paragraph | Div
+export type TextProps = Span | Heading | Label | Paragraph | Div | Li