### Running Storybook Locally

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/15f0b3-get-started

Commands to run the Aperture Storybook locally. 'npm start storybook' automatically opens the browser to view components, while 'npm start storybook.watch' enables watching for changes across all packages.

```shell
npm start storybook
```

```shell
npm start storybook.watch
```

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

### Running Storybook with Docker

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/15f0b3-get-started

Instructions for running Aperture Storybook using Docker. This includes commands to start the service in detached mode with a build, and to stop and remove the container when finished.

```shell
docker-compose up --detach --build storybook
```

```shell
docker-compose down
```

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

### Run Aperture Storybook Locally

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/15f0b3-get-started/b/686890

Commands to run the Aperture Storybook environment locally. Includes options to start the Storybook server and to watch for changes across all packages.

```shell
npm start storybook
```

```shell
npm start storybook.watch
```

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

### Run Aperture Storybook with Docker

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/15f0b3-get-started/b/686890

Instructions for running the Aperture Storybook service using Docker. It includes commands to start the service in detached mode with a build, and to stop and remove the containers.

```shell
docker-compose up --detach --build storybook
```

```shell
docker-compose down
```

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

### Importing CSS for React Components

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/15f0b3-get-started

This snippet shows how to import the necessary CSS for Aperture React components into your application's stylesheet. It provides the standard import path and a webpack-specific path for enhanced compatibility with css-loader.

```css
@import '<package-name>/dist/index.css';
```

```css
@import '~<package-name>/dist/webpack/index.css';
```

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

### Import Aperture CSS for React Components

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/15f0b3-get-started/b/686890

Demonstrates how to import Aperture component stylesheets into your application's CSS for React components. It provides specific instructions for standard CSS imports and for use with webpack's css-loader.

```css
@import '<package-name>/dist/index.css';
```

```css
@import '~<package-name>/dist/webpack/index.css';
```

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

### Stepper Content Examples - Do vs. Don't

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/63b6a9-stepper/b/033f30

Illustrates the correct and incorrect ways to format step labels for the Stepper component, showing examples of good and bad practices.

```English
✅ **Do** | ❌ Don't  
---|---
Identity provider settings | 3. Identity provider settings  
Product details | Product Details  
Campaign details | Step 4: Campaign details  
Base permissions | Base permissions.  
SAML protocol settings | Edit SAML protocol settings in your account…  
```

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

### Bulk Actions Panel Content Guidelines

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/2626b8-bulk-actions-panel/b/870756

Provides UI text examples for the Bulk actions panel, demonstrating best practices for button copy using numeral, verb + noun patterns and sentence case. It contrasts these with incorrect examples that are lengthy, use articles, or incorrect casing.

```English
✅ Do 3 media selected Clear selection Export media
Concise copy using numeral, verb + noun pattern in buttons, sentence case
---
❌ Don't Three pieces of media selected Clear Selected Export
Lengthy text spelling out number, use of articles, no verb + noun pattern, title case
✅ Do 15 of 5000 selected Select all
Sentence case, concise text
---
❌ Don't 15 Pieces of Media of 5000 Selected Select All?
Title case, overly lengthy text, use of punctuation
```

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

### Link Component Usage Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/04d2b1-link

Illustrates how to use the Aperture Link component, demonstrating its integration into a web page for navigation or actions. This example shows the basic structure and common properties.

```JavaScript
import Link from '@aperture/link';

function MyComponent() {
  return (
    <Link
      variant="primary"
      onClick={() => console.log('Link clicked!')}
      externalLinkLabel="Learn more"
    >
      Click me
    </Link>
  );
}
```

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

### Empty State Examples: Do vs. Don't

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/37faaf-empty-state/b/81604a

Illustrates effective and ineffective ways to present empty states to users. It covers scenarios like no data found, search results, system errors, and permission issues, providing clear 'Do' and 'Don't' examples with suggested copy and calls to action.

```Markdown
### **Examples**
✅ Do | ❌ Don't  
---|---  
**No campaigns found** You haven't created any campaigns yet. Create campaign |  **Your search did not yield any results.**   
Whoops!  We did not find any results that matched your filters.  
Sorry, we've encountered a technical issue We’re working to fix the problem. Try again later. `Contact support` |  Oh no! There has been a 404 error. Server issue. Contact support  
**No results found** Try adjusting your search or filter criteria. |  **No useful insights are available for you to view** You must choose relevant filters to view metrics  and display useful results. `Back to dashboard`  
**Get started** You haven’t created an SSO configuration. `Create SSO configuration` |  **ACCESS DENIED** You don’t have access to this instance. Sorry.  
**Permissions needed** Ask your Administrator to update your access rights. `Contact support` |   
```

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

### Toggle Switch Examples

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/80f033-toggle-switch/b/6193b9

Illustrates correct and incorrect examples for toggle switch labels and associated descriptive text, demonstrating best practices for clarity and user understanding.

```English
✅ Do | ❌ Don't  
---|---
**Feature this review** Highlight this content on your site |  **Turn on featured status** Toggle the switch to feature this review on your site.  
**Receive alerts** |  **Turn on alerts:**  
**Add product variants** |  **Switch on product variants.**  
```

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

### Assistive Data Dropdown - Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/99c0de-assistive-data/b/476c0f

An example illustrating the 'Do' and 'Don't' for Assistive Data in dropdown menus, showing correct data ordering and label formatting versus incorrect examples.

```English
✅ **Do** | ❌ Don't  
---|---
Employee James Smith Endurance Cycles 2 High Street, New York, NY, 10013   
Most important data first, concise and descriptive label, sentence case |  Employee James Smith Name and Endurance Cycles details? 2 High Street, New York, NY, 10013   
Overly long label, label wrapped over multiple lines, use of punctuation  
```

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

### Menu Dropdown Examples: Review Ratings

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/53bb3a-menu-dropdown/b/34afd6

Provides correct and incorrect examples for the 'Review ratings' menu dropdown, demonstrating how to phrase rating options and associated descriptions.

```English
**Review ratings** Select rating   

  * 4 stars and above
  * 3 stars and below
  * 2 stars and below
```

```English
|  **Review Ratings** Select reviews within one of the following categories…   

  * 4 stars and above…
  * 3 stars and below…
  * 2 stars and below…
```

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

### AI Usage UI Text Examples

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/0908b1-ai-usage/b/586a14

Illustrates how to write UI text that clearly communicates the role of AI in generating content and informs the user about available actions. It shows examples of clear AI references versus vague or missing ones.

```English
Use AI to generate a summary of the reviews received in this campaign. You can regenerate the summary as you receive more reviews. [UI text]
Clear reference to role of AI and actions user can take
```

```English
Summarize all reviews received in this campaign. You can do it again later on. [UI text]
No reference to role of AI, no clear indication of future user actions
```

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

### Consistent Terminology Example (Do vs. Don't)

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/22e357-voice-and-tone/b/09f154

Illustrates the importance of using consistent terminology for product names and features. It shows correct usage ('Product Catalog' in Portal) versus incorrect usage (using 'app' or 'solution' interchangeably).

```markdown
✅ Do | ❌ **Don't**
---|---
Go to Product Catalog in Portal… |  Go to the Product Catalog app... Go to the Product Catalog solution...  
```

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

### Content Examples: Clear vs. Concise Writing

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/22e357-voice-and-tone/b/19e39e

Illustrates the difference between effective, concise writing and overly verbose or abstract phrasing in user-facing content. It highlights how to make user choices and next steps obvious.

```English
✅ Do | ❌ Don't
---|---
Ready to buy? Contact us | If you're ready to purchase, contact your sales representative.
Add custom attributes to your profile. | Custom attributes can be added to your profile.
```

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

### Menu Drop-down Examples: Review Ratings

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/53bb3a-menu-drop-down/b/34afd6

Demonstrates correct and incorrect examples for the 'Review ratings' menu drop-down, guiding on how to present options for filtering reviews by star ratings.

```markdown
**Review ratings** Select rating   

  * 4 stars and above
  * 3 stars and below
  * 2 stars and below

|  **Review Ratings** Select reviews within one of the following categories…   

  * 4 stars and above…
  * 3 stars and below…
  * 2 stars and below…
```

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

### Breadcrumbs Component Interactivity

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/3971c5-breadcrumbs/b/4261b0

Illustrates JavaScript for potential interactive features of the Aperture Breadcrumbs component, such as handling click events or dynamically updating the breadcrumb trail. This example shows a basic setup.

```JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const breadcrumbLinks = document.querySelectorAll('.breadcrumb-item a');
  breadcrumbLinks.forEach(link => {
    link.addEventListener('click', function(event) {
      // Optional: Prevent default navigation if handling dynamically
      // event.preventDefault(); 
      console.log('Navigating to:', this.href);
      // Add custom logic here if needed
    });
  });
});
```

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

### AI Usage Button Text Examples

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/0908b1-ai-usage/b/586a14

Provides examples of appropriate button text for AI-generated actions, emphasizing clarity and the use of AI-associated verbs. It contrasts 'Do' examples with 'Don't' examples to illustrate best practices.

```English
Generate review summary [button]
Verb and noun pattern, succinct and descriptive button text
```

```English
Click for a summary [button]
No indication of AI's role, lengthy and unclear button text
```

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

### Date Picker Label Examples

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/635a58-date-picker/b/6280c2

Illustrates correct and incorrect examples for Date Picker labels to ensure accessibility and clarity. The examples focus on concise and descriptive labels versus vague or overly verbose ones.

```English
### Examples
✅ **Campaign date** (mm/dd/yyyy) |  ❌**Please select campaign date** (mm/dd/yyyy)  
---|---
✅ **Start date** (mm/dd/yyyy) |  ❌ **Select a start date** (mm/dd/yyyy)  
✅ **End date** (mm/dd/yyyy) |  ❌ **End date...** (mm/dd/yyyy)
```

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

### Divider Usage Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/62b13e-divider/b/72c2a1

Demonstrates the correct and incorrect application of the Divider component. The 'Do' example shows proper separation of elements with a header, while the 'Don't' example illustrates misuse by separating unrelated content without clear justification.

```text
✅ **Do** | ❌ Don't  
---|---
Great pencilcase! [review title]   
I love my new pencilcase.  
View details —————————————————— Moderation code: Fraud (FRD)   
  
**Groups of related elements clearly separated, dividers below headers, sentence case** |  Great pencilcase! [review title]   
Moderation Code: Fraud (FRD)   
  
**No clear reason for separating elements, title case**
```

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

### Global Language Examples: Currency and Sentence Structure

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/59f405-global-language

Demonstrates the correct and incorrect ways to present currency and structure sentences for international audiences. The 'Do' example uses a three-letter currency abbreviation and a clear subject-verb-object structure, while the 'Don't' example uses informal language, local references, and an unspecified currency.

```English
✅ You’ve earned 100 USD.
Three-letter abbreviation for currency, subject-verb-object sentence structure
```

```English
❌ 100 bucks in your pocket, partner! Yee-haw!
Use of humor and local references, no subject-verb-object sentence structure, unspecified currency
```

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

### Stepper Best Practices

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/63b6a9-stepper/b/042376

Guidelines for implementing the Aperture Stepper component effectively. This includes recommendations on the number of steps, label usage for different devices, label length, and content matching.

```text
Use a maximum of five steps to keep the user’s journey concise.
You must use a minimum of two steps.
Only use labels for desktop implementation. Hide labels on mobile to avail of tap and display a tooltip on hover.
The optimum label length is approximately 16-20 characters. A fallback for longer labels is truncation with a tooltip on hover.
Match step labels to the title of the corresponding section.
As a read-only component, do not include interactive navigation within the stepper. If a user needs to move through the steps, navigation can be provided using the ‘Back’ or 'Save and Continue' buttons.
```

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

### Inline Help Component Documentation

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/402491-radio-buttons/b/575dd4

Details the Inline Help component, including its usage, anatomy, best practices, accessibility, and content guidelines. Inline help provides contextual assistance to users.

```N/A
Inline help
      * Usage
      * Anatomy
      * Best practices
      * Accessibility
      * Content
```

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

### Provide Sample Data for Live Preview

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/23dc9d-data-table

Supplies sample data records for the live preview table. Each record includes an ID, project name, API product, user count, administrator, and status, illustrating the data format.

```json
[
  {
    "id": 123,
    "project": "Acuvue B2C",
    "apiProduct": "Conversations",
    "userCount": 2536,
    "admin": "Mary James",
    "status": "Disabled"
  },
  {
    "id": 124,
    "project": "Curations Portal",
    "apiProduct": "Conversations",
    "userCount": 110,
    "admin": "Matt Johnson",
    "status": "Pending"
  },
  {
    "id": 125,
    "project": "Inhouse research",
    "apiProduct": "Conversations",
    "userCount": 55,
    "admin": "David Chen",
    "status": "Pending"
  },
  {
    "id": 126,
    "project": "Inhouse research",
    "apiProduct": "Conversations",
    "userCount": 110,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 127,
    "project": "Mitchell Test App",
    "apiProduct": "Displayable Content Export",
    "userCount": 13844,
    "admin": "David Chen",
    "status": "Enabled"
  },
  {
    "id": 128,
    "project": "Mitchell Test App",
    "apiProduct": "Displayable Content Export",
    "userCount": 3215,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 129,
    "project": "Ratings and reviews",
    "apiProduct": "Conversations",
    "userCount": 5720,
    "admin": "David Chen",
    "status": "Pending"
  },
  {
    "id": 130,
    "project": "Reviews Moderation",
    "apiProduct": "Conversations",
    "userCount": 687,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 131,
    "project": "Service Package Validation Test",
    "apiProduct": "Displayable Content Export",
    "userCount": 35023,
    "admin": "Matt Johnson",
    "status": "Pending"
  },
  {
    "id": 132,
    "project": "Socialyze",
    "apiProduct": "Conversations",
    "userCount": 20222,
    "admin": "Matt Johnson",
    "status": "Pending"
  }
]
```

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

### Stepper Content Guidelines - Do's

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/63b6a9-stepper/b/033f30

Provides guidelines for writing effective step labels for the Stepper component, emphasizing sentence case, conciseness, and relevance to the content.

```English
✅ **Do**
  * Use sentence case for step labels.
  * Use concise wording—preferably 16-20 characters and no more than 3 or 4 words.
  * Step labels should summarize a task or topic. For example, "Configuration setup", "Base permissions", "Product details".
  * Match the wording of the step label to the heading of the corresponding section.
```

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

### Provide Sample Data for Live Preview

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/23dc9d-data-table/b/05da15

Supplies sample data records for the live preview table. Each record includes an ID, project name, API product, user count, administrator, and status, illustrating the data format.

```json
[
  {
    "id": 123,
    "project": "Acuvue B2C",
    "apiProduct": "Conversations",
    "userCount": 2536,
    "admin": "Mary James",
    "status": "Disabled"
  },
  {
    "id": 124,
    "project": "Curations Portal",
    "apiProduct": "Conversations",
    "userCount": 110,
    "admin": "Matt Johnson",
    "status": "Pending"
  },
  {
    "id": 125,
    "project": "Inhouse research",
    "apiProduct": "Conversations",
    "userCount": 55,
    "admin": "David Chen",
    "status": "Pending"
  },
  {
    "id": 126,
    "project": "Inhouse research",
    "apiProduct": "Conversations",
    "userCount": 110,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 127,
    "project": "Mitchell Test App",
    "apiProduct": "Displayable Content Export",
    "userCount": 13844,
    "admin": "David Chen",
    "status": "Enabled"
  },
  {
    "id": 128,
    "project": "Mitchell Test App",
    "apiProduct": "Displayable Content Export",
    "userCount": 3215,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 129,
    "project": "Ratings and reviews",
    "apiProduct": "Conversations",
    "userCount": 5720,
    "admin": "David Chen",
    "status": "Pending"
  },
  {
    "id": 130,
    "project": "Reviews Moderation",
    "apiProduct": "Conversations",
    "userCount": 687,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 131,
    "project": "Service Package Validation Test",
    "apiProduct": "Displayable Content Export",
    "userCount": 35023,
    "admin": "Matt Johnson",
    "status": "Pending"
  },
  {
    "id": 132,
    "project": "Socialyze",
    "apiProduct": "Conversations",
    "userCount": 20222,
    "admin": "Matt Johnson",
    "status": "Pending"
  }
]
```

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

### Menu Dropdown Examples: Card Type

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/53bb3a-menu-dropdown/b/34afd6

Illustrates correct and incorrect examples for the 'Card type' menu dropdown. It shows how to label fields and present options clearly.

```English
**Card type** Select type
  * Debit
  * Credit
```

```English
|  **TYPE OF CARD** Choose the type of card you’re using:   

  * A credit card.
  * A debit card.
```

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

### Menu Drop-down Examples: Card Type

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/53bb3a-menu-drop-down/b/34afd6

Illustrates correct and incorrect examples for the 'Card type' menu drop-down, showing how to present options for selecting debit or credit cards.

```markdown
✅ **Do** | ❌ Don't  
---|---
**Card type** Select type
  * Debit
  * Credit 

|  **TYPE OF CARD** Choose the type of card you’re using:   

  * A credit card.
  * A debit card.
```

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

### Provide Sample Data for Live Preview

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/23dc9d

Supplies sample data records for the live preview table. Each record includes an ID, project name, API product, user count, administrator, and status, illustrating the data format.

```json
[
  {
    "id": 123,
    "project": "Acuvue B2C",
    "apiProduct": "Conversations",
    "userCount": 2536,
    "admin": "Mary James",
    "status": "Disabled"
  },
  {
    "id": 124,
    "project": "Curations Portal",
    "apiProduct": "Conversations",
    "userCount": 110,
    "admin": "Matt Johnson",
    "status": "Pending"
  },
  {
    "id": 125,
    "project": "Inhouse research",
    "apiProduct": "Conversations",
    "userCount": 55,
    "admin": "David Chen",
    "status": "Pending"
  },
  {
    "id": 126,
    "project": "Inhouse research",
    "apiProduct": "Conversations",
    "userCount": 110,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 127,
    "project": "Mitchell Test App",
    "apiProduct": "Displayable Content Export",
    "userCount": 13844,
    "admin": "David Chen",
    "status": "Enabled"
  },
  {
    "id": 128,
    "project": "Mitchell Test App",
    "apiProduct": "Displayable Content Export",
    "userCount": 3215,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 129,
    "project": "Ratings and reviews",
    "apiProduct": "Conversations",
    "userCount": 5720,
    "admin": "David Chen",
    "status": "Pending"
  },
  {
    "id": 130,
    "project": "Reviews Moderation",
    "apiProduct": "Conversations",
    "userCount": 687,
    "admin": "Mary James",
    "status": "Enabled"
  },
  {
    "id": 131,
    "project": "Service Package Validation Test",
    "apiProduct": "Displayable Content Export",
    "userCount": 35023,
    "admin": "Matt Johnson",
    "status": "Pending"
  },
  {
    "id": 132,
    "project": "Socialyze",
    "apiProduct": "Conversations",
    "userCount": 20222,
    "admin": "Matt Johnson",
    "status": "Pending"
  }
]
```

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

### Menu Component Best Practices

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/940442-menu/b/182442

Guidelines for implementing the Aperture Menu component, focusing on contrast, disabled options, spacing, positioning, and text alignment for optimal user experience.

```English
Make sure the text label that acts as a menu trigger contrasts with the background so that partially sighted users can read the text.
Gray out unavailable options in menus instead of removing them. Removing disabled options means that the interface loses spatial consistency.
Make sure you include white space around menus to show the relationship between elements.
Position menus so that the impact of the selected action is obvious.
Bear in mind that, depending on a menu’s position in the UI, the options it contains may be left or right aligned under the trigger text.
```

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

### Radio Button Configuration Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/402491-radio-buttons/b/66af9c

An example demonstrating how to configure radio buttons using JavaScript, including setting properties like 'children' and 'disabled'. This is useful for dynamic rendering or state management.

```JavaScript
const radioButtons = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3', disabled: true }
];

// Example of rendering or manipulating radio buttons
radioButtons.forEach(button => {
  console.log(`Rendering radio button: ${button.label}, Disabled: ${button.disabled}`);
  // In a real application, you would append these to the DOM
});

const dataTestId = 'radio-group-1';
console.log(`Data Test ID: ${dataTestId}`);
```

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

### Inline Help Component Properties

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/43be72-inline-help

This snippet shows the properties available for configuring the Inline Help component, including controls for its label, icons, rendering, and size.

```HTML
<label for="input-field">Input Field</label>
<input id="input-field" type="text" />
<span class="help-icon" aria-describedby="help-text">?</span>
<div id="help-text" class="help-text" role="tooltip">
  This is the inline help text.
</div>
```

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

### Link Component Usage Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/04d2b1-link/b/67ef1f

Demonstrates how to implement the Aperture Link component for navigation or secondary actions. Links can be used standalone or inline with text, providing a lightweight way to move between pages or trigger sub-functions.

```HTML
<a href="#" class="aperture-link">Example Link</a>
<p>This is a paragraph with an <a href="#" class="aperture-link">inline link</a>.</p>
```

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

### Radio Button Configuration Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/402491-radio-buttons

An example demonstrating how to configure radio buttons using JavaScript, including setting properties like 'children' and 'disabled'. This is useful for dynamic rendering or state management.

```JavaScript
const radioButtons = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3', disabled: true }
];

// Example of rendering or manipulating radio buttons
radioButtons.forEach(button => {
  console.log(`Rendering radio button: ${button.label}, Disabled: ${button.disabled}`);
  // In a real application, you would append these to the DOM
});

const dataTestId = 'radio-group-1';
console.log(`Data Test ID: ${dataTestId}`);
```

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

### Progress Bar Accessible Label Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/14a35d-progress-bar/b/2045ba

Provides an example of how to implement an accessible label for the progress bar component using the `aria-label` attribute. This ensures screen readers can convey the current state of the progress bar to users.

```html
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="50 percent completed"></div>
```

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

### Global Language Examples

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/59f405-global-language/b/964e7a

Illustrates the application of global language best practices with contrasting examples. It shows correct usage of currency abbreviations and sentence structure versus inappropriate use of humor, local references, and unspecified currency.

```English
✅ **Do** | ❌ Don't  
---|---
You’ve earned 100 USD.   
Three-letter abbreviation for currency, subject-verb-object sentence structure |  100 bucks in your pocket, partner! Yee-haw!   
Use of humor and local references, no subject-verb-object sentence structure, unspecified currency  
```

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

### Inline Help Component Properties

Source: https://aperture.bazaarvoice.com/9df1e05cb/p/43be72-inline-help/b/09144c

This snippet shows the properties available for configuring the Inline Help component, including controls for its label, icons, rendering, and size.

```HTML
<label for="input-field">Input Field</label>
<input id="input-field" type="text" />
<span class="help-icon" aria-describedby="help-text">?</span>
<div id="help-text" class="help-text" role="tooltip">
  This is the inline help text.
</div>
```

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

### Design Token Naming Convention Example

Source: https://aperture.bazaarvoice.com/9df1e05cb/n/00e425

Illustrates the structure of a design token using a CSS variable format, showing the progression through System, Context, Base, Variant, Modifier, and Property.

```CSS
--bv-input-color-field-disabled-border
```