Merge branch 'main' into add-ff-docs

package.json

@@ -55,7 +55,7 @@
     "@fluentui/react-overflow": "^9.0.19",
     "@fontsource/open-sans": "^4.5.13",
     "@internationalized/date": "^3.0.0",
-    "@jpmorganchase/mosaic-create-site": "^0.1.0-beta.42",
+    "@jpmorganchase/mosaic-create-site": "^0.1.0-beta.43",
     "@mswjs/data": "^0.13.0",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
@@ -141,8 +141,7 @@
     "webpack-dev-server": "4.9.3",
     "@changesets/assemble-release-plan@^5.2.2": "patch:@changesets/assemble-release-plan@npm%3A5.2.2#./.yarn/patches/@changesets-assemble-release-plan-npm-5.2.2-11f5894b70.patch",
     "rollup": "2.79.1",
-    "@salt-ds/lab": "workspace:*",
-    "@jpmorganchase/mosaic-components": "patch:@jpmorganchase/mosaic-components@npm%3A0.1.0-beta.37#./.yarn/patches/@jpmorganchase-mosaic-components-npm-0.1.0-beta.37-6d8686e3dc.patch"
+    "@salt-ds/lab": "workspace:*"
   },
   "browserslist": {
     "production": [

packages/core/src/tooltip/Tooltip.tsx

@@ -54,11 +54,11 @@ export interface TooltipProps
    */
   enterDelay?: number;
   /**
-   * Delay in milliseconds before the Tooltip is hidden.
+   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.
    */
   leaveDelay?: number;
   /**
-   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.
+   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.
    */
   disabled?: boolean;
   /**

site/docs/components/banner/accessibility.mdx

@@ -0,0 +1,25 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+Any focusable elements included in the Banner content will need to be checked and tested accordingly.
+
+### Guidance
+
+When using Banner to alert the user, apply `role="alert"`. When using Banner to notify the user, apply `role="status"`.
+
+### Keyboard interactions
+
+<KeyboardControls>
+<KeyboardControl keyOrCombos="Tab">
+
+Use Tab key to navigate through the interactive elements added.
+
+</KeyboardControl>
+</KeyboardControls>

site/docs/components/banner/examples.mdx

@@ -0,0 +1,74 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+<LivePreviewControls>
+  <LivePreview componentName="banner" exampleName="Static" >
+
+    ### Static
+
+    The static Banner displays information to the user, has no interactive elements, and is non-functional.
+
+    A status icon displays alongside a supporting message.
+
+  </LivePreview>
+
+  <LivePreview componentName="banner" exampleName="Interactive" >
+
+    ### Interactive
+
+    The interactive Banner displays information to the user, has at least one function allowing users to dismiss or resolve it, and can include additional interactive elements as needed (i.e., links, buttons, etc).
+
+    Use `BannerActions` to add actions like close, refresh, etc.
+
+    A status icon displays alongside a supporting message.
+
+  </LivePreview>
+
+  <LivePreview componentName="banner" exampleName="Info" >
+
+    ### Info
+
+    Use the info Banner when you need to display general information your user was unaware of, for example, a link to updated terms and condition.
+
+    An info icon displays alongside a supporting message.
+
+  </LivePreview>
+
+  <LivePreview componentName="banner" exampleName="Error" >
+
+    ### Error
+
+    Use the error Banner to communicate a critical issue that prevents the user from completing a task, such as a system error or technical failure. The messaging should tell them how to resolve it.
+
+    An error icon displays alongside a supporting message.
+
+  </LivePreview>
+
+  <LivePreview componentName="banner" exampleName="Warning" >
+
+    ### Warning
+
+    Use the warning Banner to inform users of an issue or potential issue related to their current task that will not prevent them from continuing the task, but may cause errors if it is not addressed, such as a restriction due to entitlements or current system status.
+
+    A warning icon displays alongside a supporting message.
+
+  </LivePreview>
+
+  <LivePreview componentName="banner" exampleName="Success" >
+
+    ### Success
+
+    Use the success Banner to confirm that a user's action related to their current task has been completed successfully.
+
+    A success icon displays alongside a supporting message.
+
+  </LivePreview>
+
+</LivePreviewControls>

site/docs/components/banner/index.mdx

@@ -0,0 +1,24 @@
+---
+title: Banner
+data:
+  description: Banner is a type of notification that displays a message or provides feedback related to the user’s current workflow and spans the page or container horizontally. It can communicate new information, errors, warnings, or successful completion of a process or task.
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/banner"
+  package:
+    name: "@salt-ds/core"
+    initialVersion: "1.0.0"
+  alsoKnownAs:
+    ["Alert", "Application Message", "Notification", "Strip", "System Message"]
+  relatedComponents:
+    [
+      { name: "Content Status", relationship: "similarTo" },
+      { name: "Dialog", relationship: "similarTo" },
+      { name: "Toast", relationship: "similarTo" },
+      { name: "Tooltip", relationship: "similarTo" },
+      { name: "Button", relationship: "contains" },
+      { name: "Icon", relationship: "contains" },
+      { name: "Link", relationship: "contains" },
+      { name: "Status Indicator", relationship: "contains" },
+    ]
+  stickerSheet: ""
+layout: DetailComponent
+---

site/docs/components/banner/usage.mdx

@@ -0,0 +1,45 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+You should always position the Banner component in the main content area or in the related container component. It should sit directly below the navigation and span the page or container horizontally.
+
+You should configure it to close when:
+
+- The user performs an action that fixes an issue. For example, they correct a validation error.
+
+- The system status that triggered the notification is resolved. For example, a server connection is restored.
+
+### When to use Banner
+
+- To show a notification that applies to the user’s current task or workflow.
+
+### When not to use Banner
+
+- To notify users of an event that has occurred in a peripheral application or workflow. Instead, use [Toast](../toast).
+
+- When the notification is caused by a low priority event not requiring user feedback. Instead, use [Toast](../toast).
+
+### Content
+
+A Banner is typically used with one or two lines of text. Content should be short, clear, and concise, allowing users to quickly scan the notification and understand the situation and/or next steps.
+
+The content is set to Body Default, however, if titles are needed, they should be configured to display the Body Strong typography style across densities.
+
+### Import
+
+To import Banner from the core Salt package, use:
+
+```
+import { Banner } from "@salt-ds/core";
+```
+
+### Props
+
+<PropsTable componentName="Banner" />

site/docs/components/border-layout/accessibility.mdx

@@ -0,0 +1,31 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+### Best practices
+
+When building a page layout, it is important to make sure we use semantic HTML. This means using the correct HTML elements for their intended purpose as much as possible.
+
+The Border Layout and Border Item components support this behavior by allowing access to a prop called `as` that allows you to render the appropriate HTML instead of a plain `div`.
+
+```tsx
+<BorderItem position="north" as="nav">
+  <ul>
+    <li>
+      <a href="#">Link</a>
+    </li>
+    <li>
+      <a href="#">Link</a>
+    </li>
+    <li>
+      <a href="#">Link</a>
+    </li>
+  </ul>
+</BorderItem>
+```

site/docs/components/border-layout/examples.mdx

@@ -0,0 +1,78 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+<LivePreviewControls>
+<LivePreview componentName="border-layout" exampleName="Default" >
+
+### Default
+
+Border Layout can be set to display five regions: North, East, South, West and Center. At least one region but must be displayed alongside the Center region in the layout.
+
+By default, there are no gaps between regions.
+
+</LivePreview>
+
+<LivePreview componentName="border-layout" exampleName="CustomRegionSize" >
+
+### Custom region size
+
+You can manually define the size of regions. This example shows how to set the West and East regions to a fixed width, with a responsive Center region.
+
+This layout would work well where a fixed-width side navigation is required, alongside responsive page content.
+
+</LivePreview>
+
+<LivePreview componentName="border-layout" exampleName="GapBetweenRegions" >
+
+### Gap between regions
+
+A gap can be added between each region. The `gap` property is a multiplier that aligns to the [Salt spacing system](/salt/foundations/spacing).
+
+- The standard gap between column and row elements in Salt is 3 times the base unit.
+
+- Use `columnGap` and `rowGap` properties to set a specific gap in a particular dimension or `gap` to update both values simultaneously.
+
+</LivePreview>
+
+<LivePreview componentName="border-layout" exampleName="HideRegions" >
+
+### Hide regions
+
+Border Layout can display any combination of Border Items. This example demonstrates a layout with North, East and Center regions.
+
+</LivePreview>
+
+<LivePreview componentName="border-layout" exampleName="BorderItemPosition" >
+
+### Border Item position
+
+Set the `position` property of the Border Item wrapper to define where content should be displayed in the layout: North, East, South, West, Center.
+
+</LivePreview>
+
+<LivePreview componentName="border-layout" exampleName="BorderItemAlignment" >
+
+### Border Item alignment
+
+Use the `verticalAlignment` and `horizontalAlignment` properties of the Border Item wrapper to determine how content should be aligned in the region.
+
+</LivePreview>
+
+<LivePreview componentName="border-layout" exampleName="StickyPositioning" >
+
+### Sticky positioning
+
+Use the `sticky` property of the Border Item wrapper to define a region as sticky. When set to `true`, content in surrounding regions will scroll beneath a `sticky` Border Item.
+
+This is particularly useful if you require a header, (in the North region) or side navigation (in the West) to remain visible at all times.
+
+</LivePreview>
+
+</LivePreviewControls>

site/docs/components/border-layout/index.mdx

@@ -0,0 +1,16 @@
+---
+title: Border Layout
+data:
+  description: Border Layout manages the top-level layout of your application, website, or widget. It defines five distinct regions. Four of these regions surround a main content region and are used for elements such as a footer, header or side navigation. Border Layout is built on top of Grid Layout and is specifically intended for entire website pages or application screens, where there is at least one additional region alongside the main area.
+  sourceCodeUrl: "https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/src/border-layout/BorderLayout.tsx"
+  package:
+    name: "@salt-ds/core"
+  alsoKnownAs: ["Grid", "Side panel", "Header", "Main"]
+  relatedComponents:
+    [
+      { name: "Grid Layout", relationship: "similarTo" },
+      { name: "Grid Layout", relationship: "contains" },
+    ]
+  stickerSheet: ""
+layout: DetailComponent
+---

site/docs/components/border-layout/usage.mdx

@@ -0,0 +1,33 @@
+---
+title:
+  $ref: ./#/title
+layout: DetailComponent
+sidebar:
+  exclude: true
+data:
+  $ref: ./#/data
+---
+
+### When to use Border Layout
+
+- To manage the top-level layout of your application, or page, with at least one additional region alongside the main content area (e.g., for navigation or a footer).
+
+### When not to use Border Layout
+
+- You’re not managing the top-level layout of your application, but the layout inside one of the five Border Layout regions.
+
+- For a customized layout that you can control in both row and column dimensions (for example, a Dashboard). Instead, use Grid Layout.
+
+- For a side panel that temporarily reveals relevant content, consider using a Drawer component instead of a border layout region.
+
+### Import
+
+To import Border Layout from the core Salt package, use:
+
+```
+import { BorderItem, BorderLayout } from "@salt-ds/core";
+```
+
+### Props
+
+<PropsTable componentName="BorderLayout" />

site/docs/components/button/accessibility.mdx

@@ -2,7 +2,7 @@
 title: Button
 layout: DetailComponent
 sidebar:
-  label: Accessibility
+  exclude: true
 data:
   $ref: ./#/data
 ---

site/docs/components/button/examples.mdx

@@ -2,7 +2,7 @@
 title: Button
 layout: DetailComponent
 sidebar:
-  label: Examples
+  exclude: true
 data:
   $ref: ./#/data
 ---

site/docs/components/button/usage.mdx

@@ -2,7 +2,7 @@
 title: Button
 layout: DetailComponent
 sidebar:
-  label: How to use
+  exclude: true
 data:
   $ref: ./#/data
 ---