### Display Walkthrough Micro Setup (Dark)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet shows how to display a walkthrough component configured for a micro setup with a dark theme. It leverages the `getDisplayElementById` function to fetch the 'micro-setup-dark' example from `WalkthroughExamples.examples`.

```JSX
{getDisplayElementById(WalkthroughExamples.examples, "micro-setup-dark")}
```

--------------------------------

### Custom Setup Illustration Component

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/illustration/docs.mdx

Provides an example of the `Setup` custom illustration component, wrapped by `CodeView` and `Illustration` components, and displaying a generic heading.

```JSX
<CodeView>
  <Illustration>
    <Setup />
    <IllustrationText heading="Lorem ipsum dolor" />
  </Illustration>
</CodeView>
```

--------------------------------

### Display Walkthrough Micro Setup - In Page (Dark)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet demonstrates a walkthrough component configured for an in-page micro setup with a dark theme. It uses the `getDisplayElementById` helper function to retrieve the 'micro-setup-in-page-dark' example from `WalkthroughExamples.examples`.

```JSX
{getDisplayElementById(WalkthroughExamples.examples, "micro-setup-in-page-dark")}
```

--------------------------------

### Project Setup and Node Version Management

Source: https://github.com/salesforce-ux/design-system/blob/main/README.md

This snippet details the initial steps to set up the Salesforce Lightning Design System project locally, including installing dependencies and managing Node.js versions using NVM to ensure compatibility with the project's requirements.

```Shell
cd project-directory
npm install
nvm use
```

--------------------------------

### Setup Assistant with Base and Progress Tracking

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/setup-assistant/docs.mdx

Demonstrates a basic Setup Assistant configuration that includes both base functionality and progress tracking for its steps, suitable for initial overview or simple sequential tasks.

```jsx
<SetupAssistant isBase stepsHaveProgress />
```

--------------------------------

### Basic Setup Assistant Configuration

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/setup-assistant/docs.mdx

Illustrates the fundamental Setup Assistant component without progress tracking or sequential steps. This configuration is ideal for simple lists of learning resources or task links that do not require completion tracking.

```jsx
<SetupAssistant isBase />
```

--------------------------------

### Display Walkthrough Micro Setup - Inline Form (Dark)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet shows a walkthrough component configured for an inline form micro setup with a dark theme. It leverages the `getDisplayElementById` function to fetch the 'micro-setup-inline-form-dark' example from `WalkthroughExamples.examples`.

```JSX
{getDisplayElementById(WalkthroughExamples.examples, "micro-setup-inline-form-dark")}
```

--------------------------------

### Display Walkthrough Micro Setup - Alternate (Dark)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet illustrates an alternate micro setup for a walkthrough component with a dark theme. The `getDisplayElementById` helper is used to retrieve the 'micro-setup-alternate-dark' example from `WalkthroughExamples.examples`.

```JSX
{getDisplayElementById(WalkthroughExamples.examples, "micro-setup-alternate-dark")}
```

--------------------------------

### Importing Components and Helpers for Salesforce UX Design System

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/themes/docs.mdx

These JavaScript import statements bring in necessary components and helper functions for rendering code examples and managing display elements within the Salesforce UX Design System context. 'CodeView' is used to display code, 'getDisplayElementById' retrieves specific examples, and 'Base' likely contains the actual theme examples.

```JavaScript
import CodeView from '../../../shared/components/CodeView.jsx';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './example';
```

--------------------------------

### Start Development Server

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/TROUBLESHOOTING.md

This command initiates the development server for the Salesforce Lightning Design System project. It is typically run after dependencies have been successfully installed or updated to begin local development.

```Shell
npm start
```

--------------------------------

### Setup Assistant with Expandable Hub Steps

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/setup-assistant/docs.mdx

Demonstrates a Setup Assistant where primary steps can be expanded to reveal substeps, providing a hub-like interface. This configuration includes all features of the base and progress versions, with substeps requiring sequential completion within their primary step.

```jsx
<SetupAssistant stepsAreExpandable />
```

--------------------------------

### SCSS Annotation Example for Summary

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

A minimal example demonstrating the usage of the `@summary` annotation to provide a short, concise description of a classname's usage.

```SCSS
/**
 * @summary Resets attributes of .slds-button back to the browser default
 */
```

--------------------------------

### Setup Assistant with Step Progress

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/setup-assistant/docs.mdx

Shows the Setup Assistant configured to display progress for its steps, indicating a recommended sequence and requiring progress tracking. Completion checking for these steps can be managed via an API or a link click, utilizing the Progress Ring component.

```jsx
<SetupAssistant isBase stepsHaveProgress />
```

--------------------------------

### Displaying Filterable Tree Example (React/JSX)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trees/docs.mdx

This code shows an example of a Tree component configured to be filterable. It uses `getDisplayElementById` to load the 'filterable-tree' example from `TreeExamples.examples`, demonstrating the setup for a tree that can be dynamically filtered.

```JSX
<CodeView>
  {getDisplayElementById(TreeExamples.examples, 'filterable-tree')}
</CodeView>
```

--------------------------------

### Importing Visual Picker Examples

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/visual-picker/docs.mdx

This snippet demonstrates how various visual picker examples are imported from different modules within the Salesforce UX Design System. These imports are used to dynamically display the component examples.

```JavaScript
import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById } from '../../shared/helpers';
import * as VisualPickers_coverable from './coverable-content/example';
import * as VisualPickers_noncoverable from './non-coverable-content/example';
import * as VisualPickers_link from './link/example';
import * as VisualPickers_vertical from './vertical/example';
```

--------------------------------

### Setup Assistant within a Card Component

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/setup-assistant/docs.mdx

Illustrates how to embed the Setup Assistant component within a `FullSetupAssistantCard`. When steps have associated progress, a header is added to the card, indicating overall progress using the Descriptive Progress Bar component.

```jsx
<FullSetupAssistantCard>
  <SetupAssistant stepsAreExpandable />
</FullSetupAssistantCard>
```

--------------------------------

### Displaying Responsive Media Object Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This JSX snippet demonstrates how to render the 'Responsive' media object example, showcasing its adaptability across different screen sizes. The `CodeView` component fetches and displays this specific example using `getDisplayElementById` from `Base.examples`.

```JSX
<CodeView>
  {getDisplayElementById(Base.examples, 'responsive')}
</CodeView>
```

--------------------------------

### Displaying Link-Based Visual Picker Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/visual-picker/docs.mdx

This snippet demonstrates how to render a visual picker that functions as a link. The example is displayed using the `CodeView` component, fetching the default link picker example from `VisualPickers_link.default`.

```JSX
<CodeView>
  {getDisplayElementById(VisualPickers_link.default)}
</CodeView>
```

--------------------------------

### SCSS Button Styling Example with Property Order

Source: https://github.com/salesforce-ux/design-system/wiki/Sass-Styleguide

This SCSS snippet demonstrates the recommended property ordering within a class, including layout, spacing, sizing, typography, theming, and interaction properties. It also shows nested properties for border radius and font details, adhering to the specified style guide for readability and maintainability.

```SCSS
.button {
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  margin: 0;
  border: $border-width-thin solid $color-border-button-default {
    radius: $border-radius-medium;
  };
  padding: 0 $spacing-medium;
  font: {
    weight: 400;
    size: $font-size-medium;
  }
  line-height: $line-height-button;
  text: {
    align: center;
    decoration: none;
  }
  white-space: normal;
  background: $color-background-button-default {
    clip: padding-box; // prevents bg color from leaking outside the border
  };
  color: $color-text-button-default;
  user-select: none;
  cursor: pointer;
}
```

--------------------------------

### Displaying Progress Ring Examples

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/progress-ring/docs.mdx

Demonstrates how to render various predefined Progress Ring examples using the `getDisplayElementById` helper function, which retrieves specific component configurations from the `ProgressRingExamples` module.

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-filled')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.default)}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-drained')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-warning')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-partially-filled-warning')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-expired')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-complete')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-large')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-active-step')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-theme-warning')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-theme-expired')}
```

```JavaScript
{getDisplayElementById(ProgressRingExamples.examples, 'progress-ring-theme-complete')}
```

--------------------------------

### SCSS Component Name Annotation Example

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Demonstrates the `@name` annotation in SCSS, which is required to specify the component's name. This name maps to the HTML file and folder structure, guiding the parser on which HTML file to associate with the component.

```SCSS
/** 
 * @name button 
 */
```

--------------------------------

### Display Default Walkthrough Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet demonstrates how to display the default walkthrough component. It uses the `getDisplayElementById` helper function to retrieve the default example from `WalkthroughExamples`.

```JSX
{getDisplayElementById(WalkthroughExamples.default)}
```

--------------------------------

### Displaying Base Media Object Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This JSX snippet shows how to use the `CodeView` component to display the default 'Base' example of a media object. It utilizes the `getDisplayElementById` helper to fetch the specific example code from the `Base.examples` collection.

```JSX
<CodeView>
  {getDisplayElementById(Base.examples, 'default')}
</CodeView>
```

--------------------------------

### Displaying Base Welcome Mat Component

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/welcome-mat/docs.mdx

This example shows how to render the default, basic Welcome Mat component. It utilizes `CodeView` to display the component and `getDisplayElementById` to fetch the specific example instance.

```JSX
{getDisplayElementById(WelcomeMat.examples, "default")}
```

--------------------------------

### Importing Welcome Mat Component Examples and Utilities

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/welcome-mat/docs.mdx

This snippet demonstrates the necessary import statements for various Welcome Mat component examples (base, Trailhead, splash, info-only) and shared utility components/helpers required to render and display them within a React application.

```JavaScript
import * as WelcomeMat from './base/example';
import * as WelcomeMatTrailhead from './trailhead-connected/example';
import * as Splash from './splash/example';
import * as InfoOnly from './info-only/example';
import Example from '../../../shared/components/Example';
import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
```

--------------------------------

### Render Base Dynamic Menu Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/dynamic-menu/docs.mdx

This snippet demonstrates how to render the default, base version of the Dynamic Menu component using a helper function that retrieves the display element from predefined examples. This serves as the foundational example for the component.

```JavaScript
getDisplayElementById(DynamicMenuExamples.default)
```

--------------------------------

### Display Default Prompt Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet demonstrates how to display the default prompt component. It uses the `getDisplayElementById` helper function to retrieve the default example from `PromptExamples`.

```JSX
{getDisplayElementById(PromptExamples.default)}
```

--------------------------------

### Displaying Tree Component Example with CodeView

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trees/docs.mdx

This JSX snippet shows how to embed a tree component example within a CodeView component, specifically displaying a 'selected' state example from the TreeExamples module. The 'exampleOnly' prop indicates it's for demonstration purposes.

```JSX
<CodeView exampleOnly>
  {getDisplayElementById(TreeExamples.states, 'selected')}
</CodeView>
```

--------------------------------

### Importing Components for Tree Grid Examples

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/tree-grid/docs.mdx

This JavaScript snippet demonstrates how to import necessary components and utilities for rendering Tree Grid examples within a React-based documentation system. It imports a `CodeView` component and specific example data from a 'base' module.

```JavaScript
import CodeView from '../../../shared/components/CodeView';
import * as Base from './base/example';
import { getDisplayElementById } from '../../shared/helpers';
```

--------------------------------

### Importing Components and Helpers

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This snippet demonstrates how to import a `CodeView` component from a shared utility path and a `getDisplayElementById` helper function, along with all exports from a local 'example' module. These imports are crucial for rendering and managing code examples within the documentation.

```JavaScript
import CodeView from '../../../shared/components/CodeView.jsx';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './example';
```

--------------------------------

### Displaying Filtered Tree Example (React/JSX)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trees/docs.mdx

This snippet presents an example of a Tree component after filtering has been applied. It fetches the 'filterabled-tree' example from `TreeExamples.examples`, illustrating how the tree appears with only matching items displayed and search terms highlighted.

```JSX
<CodeView>
  {getDisplayElementById(TreeExamples.examples, 'filterabled-tree')}
</CodeView>
```

--------------------------------

### Render Salesforce Lightning Design System Combobox Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/combobox/docs.mdx

Demonstrates how to render a Salesforce Lightning Design System (SLDS) Combobox example within a `CodeView` component using JSX. This snippet references pre-defined example states from `BaseExamples` to display different visual states of the Combobox.

```JSX
<CodeView demoStyles="height: 17rem;">
  {getDisplayElementById(BaseExamples.states, 'focused-open')}
</CodeView>
```

```JSX
<CodeView demoStyles="height: 17rem;">{getDisplayElementById(BaseExamples.default)}</CodeView>
```

```JSX
<CodeView frameStyles={{ height: '20rem' }} frameOnly frameTitle="Example mobile styles for comboboxes">
  {getDisplayElementById(BaseExamples.states, 'focused-open')}
</CodeView>
```

--------------------------------

### SCSS Component Description Annotation Example

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Provides an example of a multi-line, verbose description for a component using JSDoc-like comments in SCSS. This description can detail usage, outcomes, and accessibility, and supports markdown syntax for rich text formatting.

```SCSS
/** 
 * The base `.slds-button` looks like a plain text link. It removes all the
 * styling of the native button. It’s typically used to trigger a modal or
 * display a “like” link. All button variations are built by adding another
 * class to `.slds-button`.
 * 
 * It can be multiple lines and uses `markdown` syntax. 
 */
```

--------------------------------

### Importing App Launcher Components and Utilities

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/app-launcher/docs.mdx

This snippet demonstrates the necessary import statements for using the App Launcher components, related examples, and helper utilities within a React/JSX environment. It includes imports for UI components, example data, and display functions.

```JavaScript
import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Example from '../../../shared/components/Example';
import Blockquote from '../../../shared/components/Blockquote';
import { AppLauncherModal, AppLauncherTile, appTiles, appTilesGrabbed, appTilesMoved, appTilesDropped, appTilesSearch, itemTiles, searchItemTiles } from './base/example';
import * as AppLauncherExamples from './base/example';
import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
```

--------------------------------

### Display Default Feature Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/popovers/docs.mdx

This snippet demonstrates how to display the default feature component. It uses the `getDisplayElementById` helper function to retrieve the default example from `FeatureExamples`.

```JSX
{getDisplayElementById(FeatureExamples.default)}
```

--------------------------------

### SCSS Annotation Example for Selector

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

A minimal example demonstrating the usage of the `@selector` annotation, which specifies the CSS selector being documented. It also shows `@restrict` for defining usage constraints.

```SCSS
/** 
 * @summary The icon inside of a button
 *  
 * @selector .slds-button__icon 
 * @restrict .slds-button svg
 */
.slds-button__icon {
    display: block;
 }
```

--------------------------------

### SCSS Annotation Example for Name

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

A minimal example demonstrating the usage of the `@name` annotation, which is used to describe the folder structure where the corresponding HTML file for a variant is located. It is required for `@variant` annotations.

```SCSS
/** 
 * @name stateful 
 * @selector .slds-button_stateful 
 */
```

--------------------------------

### Displaying Coverable Visual Picker Examples (Checkbox Group)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/visual-picker/docs.mdx

This code snippet shows how to render a coverable visual picker example, specifically a checkbox group, using the `CodeView` component and a helper function `getDisplayElementById`. This allows for dynamic display of pre-defined UI examples.

```JSX
<CodeView exampleOnly>
  {getDisplayElementById(VisualPickers_coverable.examples, "checkbox-group")}
</CodeView>
```

--------------------------------

### Importing SLDS Component Examples and Utilities

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/checkbox-button/docs.mdx

This snippet demonstrates the necessary imports for utilizing the base example components and helper utilities within a Salesforce Lightning Design System (SLDS) documentation context. It includes imports for the base JSX example, a CodeView component, a helper function to retrieve display elements, and mobile-specific text components.

```jsx
import * as Base from './base/example.jsx';
import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById } from '../../shared/helpers';
import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
```

--------------------------------

### Render Global Setup Action

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/global-header/docs.mdx

Illustrates the basic JSX for rendering the global setup action component, typically found within the `slds-global-actions` list.

```JSX
<ul className="slds-global-actions">
  <li className="slds-global-actions__item">
    <Setup />
  </li>
</ul>
```

--------------------------------

### Install Docker Desktop on macOS

Source: https://github.com/salesforce-ux/design-system/blob/main/README-search.md

This command utilizes Homebrew, a package manager for macOS, to install Docker Desktop. Docker is a prerequisite for running the Algolia DocSearch scraper, which is used to crawl and index the design system's content.

```sh
brew install --cask docker
```

--------------------------------

### Importing Components and Helpers for SLDS Line Clamp Examples

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/line-clamp/docs.mdx

This JavaScript snippet demonstrates the typical import statements used in a React/JSX environment to bring in shared components, helpers, and local example data for rendering SLDS Line Clamp demonstrations.

```JavaScript
import CodeView from '../../../shared/components/CodeView.jsx';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
import * as Base from './example';
```

--------------------------------

### Rendering App Launcher Tile with Tooltip on Hover

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/app-launcher/docs.mdx

This JSX example illustrates how to render an App Launcher tile that displays a tooltip on hover or focus, typically used for showing full descriptions when truncated. It integrates with `CodeView` and specific example states.

```JSX
<CodeView demoStyles={getDemoStylesById(AppLauncherExamples.states, 'tooltip')}>
  {getDisplayElementById(AppLauncherExamples.states, 'tooltip')}
</CodeView>
```

--------------------------------

### Displaying Utility Icon Example (React)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/icons/docs.mdx

Demonstrates how to display a default utility icon using a helper function in a React component context, typically for example rendering.

```JavaScript
{getDisplayElementById(UtilityIconExamples.default, 'default')}
```

--------------------------------

### Base Menu Implementation (Example)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/menus/docs.mdx

This example shows the basic structure of an SLDS menu. It utilizes the `BaseMenu` React component, applying the `slds-dropdown_left` class to position the dropdown.

```jsx
<Example title="Menu Base">
  <CodeView demoStyles="height: 200px;">
    <BaseMenu className="slds-dropdown_left" />
  </CodeView>
</Example>
```

--------------------------------

### Displaying Default Header Example in JSX

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trial-bar/docs.mdx

This JSX snippet shows how to render the default header example using the `CodeView` component. The `getDisplayElementById` helper function is used to fetch the relevant code snippet from the `Header` module for display.

```jsx
<CodeView>{getDisplayElementById(Header.default)}</CodeView>
```

--------------------------------

### Displaying Vertical Visual Picker Examples (Base)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/visual-picker/docs.mdx

This snippet illustrates how to render the base version of a vertical visual picker. The `CodeView` component is used to display the example fetched from `VisualPickers_vertical.default`.

```JSX
<CodeView>
  {getDisplayElementById(VisualPickers_vertical.default)}
</CodeView>
```

--------------------------------

### Displaying Small Media Object Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This JSX snippet illustrates how to render the 'Small' variation of a media object, likely demonstrating a compact size. It uses the `CodeView` component and `getDisplayElementById` to retrieve and display the relevant example from `Base.examples`.

```JSX
<CodeView>
  {getDisplayElementById(Base.examples, 'small')}
</CodeView>
```

--------------------------------

### Informational Illustration: Maintenance

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/illustration/docs.mdx

A specific example of an informational illustration using the `Maintenance` image, suitable for communicating system maintenance or setup requirements.

```JSX
<Illustration>
    <Maintenance />
    <IllustrationText heading="Lorem ipsum dolor" />
  </Illustration>
```

--------------------------------

### SCSS Restriction Annotation Examples and Output

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Illustrates how `@restrict` and `@selector` annotations are used in SCSS comments to define class usage rules, and the resulting compiled CSS output. The examples show how the annotations translate into combined CSS selectors.

```SCSS
/**
 * Example 1
 *
 * @selector .bar
 * @restrict .foo
 */
 
/**
 * Example 2
 *
 * @selector .bar
 * @restrict .foo span
 */
```

```SCSS
// Example 1 restriction
.foo.bar

// Example 2 restriction
.foo span.bar
```

--------------------------------

### Informational Illustration: Going Camping

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/illustration/docs.mdx

An example of an informational illustration using the `GoingCamping` image, typically used for scenarios like setup needed or maintenance.

```JSX
<Illustration>
    <GoingCamping />
    <IllustrationText heading="Lorem ipsum dolor" />
  </Illustration>
```

--------------------------------

### Feed Post with Liker Bar Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/feeds/docs.mdx

Demonstrates a feed post component that includes a liker bar, showing how user interactions like 'liking' are represented. This example is used both as a general illustration and specifically under 'States - Like'.

```HTML
<!-- Example HTML for a feed post with a liker bar -->
<article class="slds-post">
  <header class="slds-post__header slds-media">
    <div class="slds-media__figure">
      <a href="javascript:void(0);" class="slds-avatar slds-avatar_circle slds-avatar_large">
        <img alt="Person name" src="/assets/images/avatar1.jpg" title="Person name" />
      </a>
    </div>
    <div class="slds-media__body">
      <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
        <p>
          <a href="javascript:void(0);">Person Name</a>
          —
          <span class="slds-text-body_small">5 hrs Ago</span>
        </p>
      </div>
    </div>
  </header>
  <div class="slds-post__content slds-text-longform">
    <p>This is an example of a feed post content.</p>
  </div>
  <footer class="slds-post__footer">
    <ul class="slds-post__footer-actions slds-list_horizontal">
      <li class="slds-col_bump-right">
        <button class="slds-button_reset slds-post__footer-action" aria-pressed="false" title="Like this item">
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#like"></use>
          </svg>
          Like
        </button>
      </li>
      <li>
        <button class="slds-button_reset slds-post__footer-action" title="Comment on this item">
          <svg class="slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#share"></use>
          </svg>
          Comment
        </button>
      </li>
    </ul>
    <ul class="slds-post__footer-meta slds-list_horizontal slds-has-dividers_right">
      <li class="slds-list__item">100 likes</li>
    </ul>
  </footer>
</article>
```

--------------------------------

### Docked Composer Log a Task Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/docked-composer/docs.mdx

Provides an example of the Docked Composer configured for logging a task. This snippet showcases the component's appearance and functionality when used for task management, including relevant input fields and actions.

```JSX
{getDisplayElementById(DockedComposerExamples.examples, 'task')}
```

--------------------------------

### Docked Composer Voice Example - Call Incoming State

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/docked-composer/docs.mdx

Shows the Docked Composer component for an incoming voice call. This example demonstrates the visual cues and options presented to the user when a new call is being received.

```JSX
{getDisplayElementById(DockedComposerExamples.examples, 'voice-composer-call-incoming')}
```

--------------------------------

### Displaying Header Menu Open State Example in JSX

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trial-bar/docs.mdx

This JSX snippet illustrates how to display a specific state of the header component, specifically the 'menu-open' state. It utilizes the `CodeView` component and `getDisplayElementById` to retrieve and render the corresponding code example from the `Header.states` module.

```jsx
<CodeView>{getDisplayElementById(Header.states, "menu-open")}</CodeView>
```

--------------------------------

### Set up Git Repository for Salesforce Lightning Design System Contribution

Source: https://github.com/salesforce-ux/design-system/blob/main/CONTRIBUTING.md

This snippet provides the initial Git commands required to set up a local development environment for contributing to the Salesforce Lightning Design System. It covers cloning your forked repository, navigating into the directory, and configuring the original repository as an 'upstream' remote.

```Shell
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/design-system.git

# Navigate to the newly cloned directory
cd design-system

# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/salesforce-ux/design-system.git
```

--------------------------------

### SCSS Example: Deprecated Class with Mixin

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Shows how the `@deprecated` annotation is used in conjunction with a `@include deprecate` mixin. This allows for automatic removal of the deprecated CSS code (`.slds-open`) based on a specified semantic version, guiding users to use the replacement (`.slds-is-open`).

```SCSS
/** 
 * @selector .slds-open 
 * @deprecated 
 */
@include deprecate('4.0.0', 'Use slds-is-open instead') {
    .slds-open {
        display: block;
    }
}
```

--------------------------------

### Sass Single-Line Comment Example

Source: https://github.com/salesforce-ux/design-system/wiki/Sass-Styleguide

This Sass snippet demonstrates the use of a single-line comment, which is denoted by `//`. Comments using this syntax are not output in the compiled CSS, making them suitable for internal development notes and explanations.

```Sass
// This is a single line comment
```

--------------------------------

### Importing Core Components and Helpers

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/prompt/docs.mdx

This snippet demonstrates the standard import statements for bringing in the base example component, the `CodeView` utility for displaying code, and a helper function for retrieving display elements by ID within a Salesforce UX Design System project.

```JavaScript
import * as Base from './base/example.jsx';
import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById } from '../../shared/helpers';
```

--------------------------------

### Base Horizontal Progress Indicator with Active First Step

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/progress-indicator/docs.mdx

Provides an example of a horizontal progress indicator in its base state, with the first step marked as active. This demonstrates the initial setup for a multi-step process where no steps are yet completed.

```JSX
<BaseProgress value="0">
  <BaseStep active>Step 1</BaseStep>
  <BaseStep>Step 2</BaseStep>
  <BaseStep>Step 3</BaseStep>
  <BaseStep>Step 4</BaseStep>
  <BaseStep>Step 5</BaseStep>
</BaseProgress>
```

--------------------------------

### Implement Hint on Hover for Button Icons

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/button-icons/docs.mdx

This example shows how to enable a hint on hover effect for button icons. It requires a parent wrapper with the `slds-hint-parent` class and the button's SVG icon to have the `slds-button__icon_hint` class. This setup ensures the child icon reacts when the parent element is hovered over.

```HTML
<HintParent>
  <button className="slds-button slds-button_icon">
    <svg className="slds-button__icon slds-button__icon_hint">...</svg>
    ...
  </button>
</HintParent>
```

--------------------------------

### Importing Dependencies for JavaScript Snapshot Tests

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/TESTING.md

This snippet demonstrates the necessary imports for setting up a JavaScript snapshot test. It includes React, a helper utility (`createHelpers`) for creating test environments, and the specific component being tested. The `matchesMarkupAndStyle` function, crucial for HTML and style comparisons, is also imported from the helpers.

```javascript
/* eslint-env jest */

import React from 'react';
import createHelpers from '../../../../jest.helpers';
import { ComponentName } from '../base/example';

const { matchesMarkupAndStyle } = createHelpers(__dirname);
```

--------------------------------

### SCSS Parent Selector Nesting Examples

Source: https://github.com/salesforce-ux/design-system/wiki/Sass-Styleguide

These SCSS snippets demonstrate how to effectively use the parent selector (`&`) within nested rules. It shows its application for tacking on pseudo-classes (like `:hover`) and for constructing BEM-style hyphenated class names (like `--image`), promoting cleaner and more concise code while avoiding repetition.

```SCSS
a {
  …
  &:hover { … }
}

.flag {
  &--image { … }
}
```

--------------------------------

### Render Date Range Picker States

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/datepickers/docs.mdx

Provides React/JSX examples for rendering the date range picker component in various states related to date selection within a range, including when a start date is selected, when an end date is selected within the same or different week, and when 'today' or adjacent months are within the selected range.

```jsx
<CodeView demoStyles={getDemoStylesById(Range.states, 'start-date')}>
  {getDisplayElementById(Range.states, 'start-date')}
</CodeView>
```

```jsx
<CodeView demoStyles={getDemoStylesById(Range.states, 'end-date-week')}>
  {getDisplayElementById(Range.states, 'end-date-week')}
</CodeView>
```

--------------------------------

### Displaying Double-Figured Media Object Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This JSX snippet demonstrates how to display the 'Double' media object example, which features figures on both sides of the body. The `CodeView` component fetches and renders this specific example using `getDisplayElementById` from `Base.examples`.

```JSX
<CodeView>
  {getDisplayElementById(Base.examples, 'double')}
</CodeView>
```

--------------------------------

### Running the Storybook Development Environment

Source: https://github.com/salesforce-ux/design-system/blob/main/README.md

This command starts the Storybook server, which is used for local component development and viewing. A restart is required if component CSS annotation metadata is altered.

```Shell
npm start
```

--------------------------------

### Displaying Reversed Media Object Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This JSX snippet illustrates how to display the 'Reverse' example of a media object, where the figure is positioned on the opposite side of the body. It uses `CodeView` and `getDisplayElementById` to fetch and render the specific example from `Base.examples`.

```JSX
<CodeView>
  {getDisplayElementById(Base.examples, 'reverse')}
</CodeView>
```

--------------------------------

### Site Release Process

Source: https://github.com/salesforce-ux/design-system/blob/main/README.md

This command is used to build and release the framework and the associated website. It requires appropriate Heroku access for deployment.

```Shell
npm release:site
```

--------------------------------

### Rendering App Launcher Search State with Highlighted Terms

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/app-launcher/docs.mdx

This JSX example demonstrates the App Launcher's search functionality, showing how the list of applications and items filters as the user types. It highlights matching search terms using the `<mark />` element for visual emphasis.

```JSX
<CodeView isViewport demoStyles={getDemoStylesById(AppLauncherExamples.states, 'search')}>
  {getDisplayElementById(AppLauncherExamples.states, 'search')}
</CodeView>
```

--------------------------------

### Create Component Files and Subdirectory

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/BLUEPRINT_NEW.md

This snippet shows how to create the minimum required files (`_doc.scss`, `_index.scss`, `example.jsx`) and a `base` subdirectory within the new component folder using command-line commands.

```bash
cd button
touch _doc.scss
mkdir base
cd base
touch example.jsx
touch _index.scss
```

--------------------------------

### Create Component Folder using Command Line

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/BLUEPRINT_NEW.md

This snippet demonstrates how to navigate to the `ui/components` directory and create a new component folder, e.g., `button`, using basic command-line commands.

```bash
cd ui/components
mkdir button
```

--------------------------------

### Displaying Reversed and Centered Media Object Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/utilities/media-objects/docs.mdx

This JSX snippet shows how to render a 'Reverse Center' media object example, combining both reversed figure positioning and centered alignment. The `CodeView` component is used with `getDisplayElementById` to retrieve this specific example from `Base.examples`.

```JSX
<CodeView>
  {getDisplayElementById(Base.examples, 'reverse-center')}
</CodeView>
```

--------------------------------

### Prepare Component HTML (JSX) for Output

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/BLUEPRINT_NEW.md

This snippet provides the basic structure for the `example.jsx` file, demonstrating how to export a default React component with an `id`, `label`, and an `element` placeholder for the component's HTML. This file is used to define the component's interactive states and contextual examples.

```jsx
// ui/components/button/base/examples.jsx

// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

import React from 'react';

export default [
  {
    id: 'default',
    label: 'Default',
    element: (
      // HTML goes here...
    )
  }
];
```

--------------------------------

### Sass Property Ordering Example for .button Class

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/SASS_CONVENTIONS.md

Demonstrates the recommended property ordering within a Sass (SCSS) rule, including mixins, appearance, layout, spacing, masking, typography, theming, interactions, and animations. This example applies to a `.button` class, ensuring consistency and readability.

```Sass
.button {
  // Mixins
  @include mixin($props);
  // Appearance
  -webkit-appearance: none;
  // Layout
  position: relative;
  display: inline-block;
  // Spacing
  margin: 0;
  border: $border-width-thin solid $color-border-button-default;
  padding: 0 $spacing-medium;
  // Masking
  background-clip: padding-box;
  // Typography
  font-weight: 400;
  font-size: $font-size-medium;
  line-height: $line-height-button;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  // Theming
  background: $color-background-button-default;
  border-radius: $border-radius-medium;
  color: $color-text-button-default;
  // Interactions
  user-select: none;
  cursor: pointer;
  // Animations
  transition: all .5 ease;
}
```

--------------------------------

### MDX Documentation Example for React Buttons

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/BLUEPRINT_DOCUMENTATION.md

This JavaScript snippet illustrates how to structure a `docs.mdx` file, combining standard Markdown with JSX. It imports a React `Button` component and a `CodeView` helper to render interactive UI elements and display their underlying HTML markup within the documentation.

```js
import {Button} from './base/example'
import CodeView from '../../../shared/components/CodeView'

# Buttons

Even _you_ can use buttons. Check out these rendered flavors:

  * Success <Button className="slds-button_success">Success</Button>
  * Destructive <Button className="slds-button_destructive">Destructive</Button>
  * Brand <Button className="slds-button_brand">Brand</Button>

Here is the markup:

<CodeView>
  <Button className="slds-button_success">Success</Button>
</CodeView>

Enjoy your buttons!
```

--------------------------------

### Displaying Info-Only Welcome Mat

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/welcome-mat/docs.mdx

This example demonstrates the 'info-only' variant of the Welcome Mat, where tiles are purely informational and not actionable. It shows the application of `slds-welcome-mat__tiles_info-only` to the container and `slds-welcome-mat__tile-info-only` to individual tiles.

```JSX
{getDisplayElementById(InfoOnly.examples, "default")}
```

--------------------------------

### Base Illustration Component Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/illustration/docs.mdx

An example of the base Illustration component, showcasing the integration of the `FishingDeals` illustration with a simple heading text.

```JSX
<Illustration>
    <FishingDeals />
    <IllustrationText heading="Lorem ipsum dolor" />
  </Illustration>
```

--------------------------------

### Importing Progress Ring Component Dependencies

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/progress-ring/docs.mdx

Imports necessary React components and helper functions for displaying and documenting the Progress Ring component, including a module containing various example configurations.

```JavaScript
import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import *s ProgressRingExamples from './base/example';
```

--------------------------------

### SCSS Component Support Annotation Example

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Illustrates the `@support` annotation in SCSS, which indicates the development status of a component. Valid values are 'prototype' or 'dev-ready', defining the component's readiness level.

```SCSS
/** 
 * @support dev-ready 
 */
```

--------------------------------

### Importing Salesforce UX Components

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trees/docs.mdx

This JavaScript snippet demonstrates how to import various shared components like CodeView, CodeBlock, Blockquote, and StylingHooksTable, along with specific tree examples and a helper function for displaying elements by ID.

```JavaScript
import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Blockquote from '../../../shared/components/Blockquote';
import StylingHooksTable from '../../../shared/components/StylingHooksTable';
import * as TreeExamples from './base/example';
import { getDisplayElementById } from '../../shared/helpers';
```

--------------------------------

### SCSS Example: Restricting Icon Class to Button SVG

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

A practical example demonstrating the use of `@selector` and `@restrict` to ensure the `.slds-button__icon` class is only applied to `svg` elements within a `.slds-button` context.

```SCSS
/**
 * @selector .slds-button__icon
 * @restrict .slds-button svg
 */
```

--------------------------------

### SCSS Component Pattern Documentation Example

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Illustrates the JSDoc-like annotation block for documenting a component pattern in SCSS. This block includes metadata such as summary, base, name, selector, category, type, role, support level, layout, and release version, used for auto-generating API documentation.

```SCSS
/** 
 * Create a button with a `button` or `a` element to retain the  
 * native click function.  
 * Use a disabled attribute when a button can’t be clicked. 
 * 
 * @summary Buttons are used to invoke an event 
 *  
 * @base
 * @name button 
 * @selector .slds-button 
 * @category base 
 * @type action 
 * @role button 
 * @support dev-ready 
 * @layout responsive 
 * @release 3.1.0
 */
```

--------------------------------

### SCSS Component Summary Annotation Example

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/ANNOTATIONS_FULL.md

Illustrates the `@summary` annotation in SCSS, which is used to provide a short, concise description of a component's usage. This annotation is required and typically contains a single line of text.

```SCSS
/** 
 * @summary Buttons are used to invoke an event
 */
```

--------------------------------

### Welcome Mat with Completed Steps Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/welcome-mat/docs.mdx

This snippet illustrates how to display a Welcome Mat where certain tiles are marked as completed. It demonstrates the visual update when tiles are completed, moving them to the bottom and applying the `slds-welcome-mat__tile_complete` modifier class.

```JSX
{getDisplayElementById(WelcomeMat.examples, "with-completed-tiles")}
```

--------------------------------

### Displaying Non-Coverable Visual Picker Examples (Base)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/visual-picker/docs.mdx

This snippet demonstrates how to render the base version of a non-coverable visual picker. The example is retrieved using `getDisplayElementById` from the `VisualPickers_noncoverable.default` module.

```JSX
<CodeView>
  {getDisplayElementById(VisualPickers_noncoverable.default)}
</CodeView>
```

--------------------------------

### Menu with Left Icon Implementation (Example)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/menus/docs.mdx

This example showcases a menu item with an icon positioned on the left side. It uses the `IconLeft` React component with the `hasLeftIcon` prop to achieve this layout.

```jsx
<Example title="Menu with Icon Left">
  <CodeView demoStyles="height: 150px;">
    <IconLeft hasLeftIcon />
  </CodeView>
</Example>
```

--------------------------------

### Carousel Base Example with First Panel Active

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/carousel/docs.mdx

Provides a base example of the Carousel component, explicitly setting the first panel as active upon initialization and enabling auto-play.

```jsx
<Carousel panelActive="1" autoPlay />
```

--------------------------------

### Importing Components and Helpers for Trial Bar

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/trial-bar/docs.mdx

This snippet demonstrates the necessary JavaScript import statements for setting up and displaying trial bar components within a React/JSX environment. It includes imports for a `CodeView` component, a helper function to retrieve display elements by ID, and a module containing header examples.

```javascript
import CodeView from "../../../shared/components/CodeView";
import { getDisplayElementById } from "../../shared/helpers";
import * as Header from "./header/example";
```

--------------------------------

### npm Commands for Building and Running Tests

Source: https://github.com/salesforce-ux/design-system/blob/main/guidelines/TESTING.md

This section outlines various npm commands used for building the project's SASS, running comprehensive tests, executing specific test files, watching for changes, and managing Jest snapshots. It also includes commands specifically for Doc Blocks testing.

```bash
npm run build
npm test
npm test -- {filename}
npm test -- --watch {filename}
npm test -- -u
npm test -- docs
npm test -- docs -u
```

--------------------------------

### Picklist: Open - Option Selected State Example

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/picklist/docs.mdx

Demonstrates the visual state of a Picklist component when it is open and a single option has been selected. This example highlights how the component appears with a chosen item.

```jsx
{getDisplayElementById(Base.states, 'open-option-selected')}
```

--------------------------------

### Datetime Picker States: Date Example Text Visible

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/datetime-picker/docs.mdx

This snippet demonstrates a state where example text for the date format is visible, typically appearing when the date field receives focus.

```JavaScript
import * as DateTimeExamples from './base/example';
import { getDisplayElementById } from '../../shared/helpers';

// Renders the datetime picker with date example text visible
getDisplayElementById(DateTimeExamples.states, 'date-example-text-visible');
```

--------------------------------

### Menu with Double Icon Implementation (Example)

Source: https://github.com/salesforce-ux/design-system/blob/main/ui/components/menus/docs.mdx

This example illustrates a menu item that includes icons on both the left and right sides. It uses the `DoubleIcon` React component to render this specific menu item configuration.

```jsx
<Example title="Menu with Double Icon">
  <CodeView demoStyles="height: 150px;">
    <DoubleIcon />
  </CodeView>
</Example>
```