docs(mdx): fix preview paths

packages/react/src/components/Accordion/Accordion.mdx

@@ -34,7 +34,7 @@ Everything you pass in as a child of `AccordionItem` will be rendered in the
 accordion's panel.
 
 <Preview>
-  <Story id="accordion--accordion" />
+  <Story id="components-accordion--accordion" />
 </Preview>
 
 ## Skeleton state
@@ -44,7 +44,7 @@ accordion. This is useful to display while content in your accordion is being
 fetched from an external resource like an API.
 
 <Preview>
-  <Story id="accordion--skeleton" />
+  <Story id="components-accordion--skeleton" />
 </Preview>
 
 ## Component API

packages/react/src/components/AspectRatio/AspectRatio.mdx

@@ -28,7 +28,7 @@ spanning 100% of the space available in your layout, and the height will be
 determined by the ratio that you specified.
 
 <Preview>
-  <Story id="aspectratio--aspect-ratio" />
+  <Story id="components-aspectratio--aspect-ratio" />
 </Preview>
 
 To see the full list of ratios supported by the `ratio` prop, check out the prop

packages/react/src/components/Breadcrumb/Breadcrumb.mdx

@@ -25,7 +25,7 @@ You can build a breadcrumb using a combination of the `Breadcrumb` and
 responsible for displaying the page links in the hierarchy.
 
 <Preview>
-  <Story id="breadcrumb--breadcrumb" />
+  <Story id="components-breadcrumb--breadcrumb" />
 </Preview>
 
 ## Skeleton state
@@ -35,7 +35,7 @@ breadcrumb. This is useful to display while content in your breadcrumb is being
 fetched from an external resource like an API.
 
 <Preview>
-  <Story id="breadcrumb--skeleton" />
+  <Story id="components-breadcrumb--skeleton" />
 </Preview>
 
 ## Component API

packages/react/src/components/Button/Button.mdx

@@ -19,6 +19,7 @@ import { Add16, Delete16 } from '@carbon/icons-react';
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Overview](#overview)
+- [Danger Buttons](#danger-buttons)
 - [Icon-only Buttons](#icon-only-buttons)
 - [Set of Buttons](#set-of-buttons)
 - [Skeleton state](#skeleton-state)
@@ -48,11 +49,24 @@ in a variety of ways. `Button` labels express what action will occur when the
 user interacts with it.
 
 <Preview>
-  <Story id="button--default" />
-  <Story id="button--secondary" />
-  <Story id="button--tertiary" />
-  <Story id="button--danger" />
-  <Story id="button--ghost" />
+  <Story id="components-button--default" />
+  <Story id="components-button--secondary" />
+  <Story id="components-button--tertiary" />
+  <Story id="components-button--ghost" />
+</Preview>
+
+## Danger Buttons
+
+The danger button has three different styles: primary, tertiary, and ghost.
+Determining which danger button style to use will depend on the level of
+emphasis you want to give to the danger action. Destructive actions that are
+considered a required or primary step in a workflow should use the primary
+danger button style. However, if a destructive action is just one of several
+actions a user could choose from, then a lower emphasis style like the tertiary
+danger button or the ghost danger button may be more appropriate.
+
+<Preview>
+  <Story id="components-button--danger" />
 </Preview>
 
 ## Icon-only Buttons
@@ -63,7 +77,7 @@ Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly
 will be styled as primary or ghost buttons.
 
 <Preview>
-  <Story id="button--icon-button" />
+  <Story id="components-button--icon-button" />
 </Preview>
 
 ## Set of Buttons
@@ -76,7 +90,7 @@ on the right. When these two types buttons are paired in the correct order, they
 will automatically space themselves apart.
 
 <Preview>
-  <Story id="button--set-of-buttons" />
+  <Story id="components-button--set-of-buttons" />
 </Preview>
 
 ## Skeleton state
@@ -86,7 +100,7 @@ button. This is useful to display on initial page load to indicate to users that
 content is being loaded.
 
 <Preview>
-  <Story id="button--skeleton" />
+  <Story id="components-button--skeleton" />
 </Preview>
 
 ## Component API

packages/react/src/components/Checkbox/Checkbox.mdx

@@ -22,7 +22,7 @@ You can build a checkbox using the `Checkbox` in combination with a `<fieldset>`
 element to group controls and `<legend>` element for the label.
 
 <Preview>
-  <Story id="checkbox--checkbox" />
+  <Story id="components-checkbox--checkbox" />
 </Preview>
 
 ### Controlled example
@@ -43,7 +43,7 @@ checkbox. This is useful to display while content in your checkbox is being
 fetched from an external resource like an API.
 
 <Preview>
-  <Story id="checkbox--skeleton" />
+  <Story id="components-checkbox--skeleton" />
 </Preview>
 
 ## Component API

packages/react/src/components/CodeSnippet/CodeSnippet.mdx

@@ -29,7 +29,7 @@ don't provide the copy functionality and recommend
 [clipboard.js](https://clipboardjs.com/).
 
 <Preview>
-  <Story id="codesnippet--inline" />
+  <Story id="components-codesnippet--inline" />
 </Preview>
 
 ## Skeleton state
@@ -39,7 +39,7 @@ an code snippet. This is useful to display while content in your code snippet is
 being fetched from an external resource like an API.
 
 <Preview>
-  <Story id="codesnippet--skeleton" />
+  <Story id="components-codesnippet--skeleton" />
 </Preview>
 
 ## Inline
@@ -48,7 +48,7 @@ Inline code snippet's are used for distinguishing a symbol, variable, function
 name or similar small piece of code from it's surrounding text.
 
 <Preview>
-  <Story id="codesnippet--inline" />
+  <Story id="components-codesnippet--inline" />
 </Preview>
 
 ## Multi-line
@@ -59,7 +59,7 @@ of styles and the like. There is an option to wrap the lines displayed if the
 lines are longer than the container.
 
 <Preview>
-  <Story id="codesnippet--multiline" />
+  <Story id="components-codesnippet--multiline" />
 </Preview>
 
 ## Single-line
@@ -69,7 +69,7 @@ without wrapping. Useful for calling out terminal commands, function
 invocations, expressions etc.
 
 <Preview>
-  <Story id="codesnippet--singleline" />
+  <Story id="components-codesnippet--singleline" />
 </Preview>
 
 ## Component API

packages/react/src/components/ComboBox/ComboBox.mdx

@@ -30,7 +30,7 @@ A combobox allows the user to make a selection from a predefined list of options
 and is typically used when there are a large amount of options to choose from.
 
 <Preview>
-  <Story id="combobox--combobox" />
+  <Story id="components-combobox--combobox" />
 </Preview>
 
 ## Component API
@@ -46,7 +46,7 @@ via an error state on the previous form element in adition to disabling the next
 element.
 
 <Preview>
-  <Story id="combobox--disabled" />
+  <Story id="components-combobox--disabled" />
 </Preview>
 
 ## Light
@@ -55,7 +55,7 @@ The light prop should never be used against a light background. The form element
 must have proper contrast against the pages background.
 
 <Preview>
-  <Story id="combobox--light" />
+  <Story id="components-combobox--light" />
 </Preview>
 
 ## Combobox `downshiftProps`

packages/react/src/components/ComposedModal/ComposedModal.mdx

@@ -38,7 +38,7 @@ Modal content can be customized via the `<ModalHeader>`, `<ModalBody>` and
 `<ModalFooter>` components.
 
 <Preview>
-  <Story id="composedmodal--with-trigger-button" />
+  <Story id="components-composedmodal--with-trigger-button" />
 </Preview>
 
 ## Component API

packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx

@@ -38,7 +38,7 @@ within the same space on screen. Only one content section is shown at a time.
 Create Switch components for each section in the content switcher.
 
 <Preview>
-  <Story id="contentswitcher--default" />
+  <Story id="components-contentswitcher--default" />
 </Preview>
 
 ## Component API

packages/react/src/components/CopyButton/CopyButton.mdx

@@ -24,7 +24,7 @@ be concise and describe the action taken when the user clicks the copy button.
 By default we display the text “Copied!”.
 
 <Preview>
-  <Story id="copybutton--default" />
+  <Story id="components-copybutton--default" />
 </Preview>
 
 ## Component API

packages/react/src/components/DataTable/DataTable.mdx

@@ -9,7 +9,7 @@ import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
 [Accessibility](https://www.carbondesignsystem.com/components/data-table/accessibility)
 
 <Preview>
-  <Story id="datatable--usage" />
+  <Story id="components-datatable--usage" />
 </Preview>
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -142,7 +142,7 @@ In order to sort the rows in your data table, you will need to pass in the
 `isSortable` prop to the `DataTable` component.
 
 <Preview>
-  <Story id="datatable-sorting--usage" />
+  <Story id="components-datatable-sorting--usage" />
 </Preview>
 
 Optionally, you can pass in `isSortable` to each `TableHeader` that you want to
@@ -195,7 +195,7 @@ The `DataTable` components supports row-level expansion when combined with the
 `TableExpandHeader`, `TableExpandRow`, and `TableExpandedRow` components.
 
 <Preview>
-  <Story id="datatable-expansion--usage" />
+  <Story id="components-datatable-expansion--usage" />
 </Preview>
 
 _Note: press "Show code" above to view a code snippet of this example_
@@ -218,7 +218,7 @@ The `DataTable` component supports row selection when used with the
 `TableSelectAll` and `TableSelectRow` components.
 
 <Preview>
-  <Story id="datatable-selection--usage" />
+  <Story id="components-datatable-selection--usage" />
 </Preview>
 
 _Note: press "Show code" above to view a code snippet of this example_
@@ -254,7 +254,7 @@ By default `filterRows` is provided through our default implementation. However,
 you can provide your own method if needed.
 
 <Preview>
-  <Story id="datatable-filtering--usage" />
+  <Story id="components-datatable-filtering--usage" />
 </Preview>
 
 In order to integrate filtering into your data table, you will need to provide
@@ -277,7 +277,7 @@ the following components:
 - `TableSelectRow`
 
 <Preview>
-  <Story id="datatable-batch-actions--usage" />
+  <Story id="components-datatable-batch-actions--usage" />
 </Preview>
 
 _Note: press "Show code" above to view a code snippet of this example_

packages/react/src/components/DatePicker/DatePicker.mdx

@@ -49,7 +49,7 @@ manually input a date. It allows dates to be entered without adding unnecessary
 interactions that come with the calendar menu or a dropdown.
 
 <Preview>
-  <Story id="datepicker--simple" />
+  <Story id="components-datepicker--simple" />
 </Preview>
 
 ### Range Datepicker
@@ -59,8 +59,8 @@ is shown at a time. Calendar pickers allow users to navigate through months and
 years, however they work best when used for recent or near future dates.
 
 <Preview>
-  <Story id="datepicker--single" />
-  <Story id="datepicker--range" />
+  <Story id="components-datepicker--single" />
+  <Story id="components-datepicker--range" />
 </Preview>
 
 ### Skeleton state
@@ -70,7 +70,7 @@ You can use the `DatePickerSkeleton` component to render a skeleton variant of a
 `DatePicker` is being fetched from an external resource like an API.
 
 <Preview>
-  <Story id="datepicker--skeleton" />
+  <Story id="components-datepicker--skeleton" />
 </Preview>
 
 ## Component API

packages/react/src/components/Dropdown/Dropdown.mdx

@@ -42,7 +42,7 @@ several. A selected option can represent a value in a form, or can be used as an
 action to filter or sort existing content.
 
 <Preview>
-  <Story id="dropdown--default" />
+  <Story id="components-dropdown--default" />
 </Preview>
 
 ### Inline dropdown
@@ -51,7 +51,7 @@ You can place a `Dropdown` inline with other content by using the `inline`
 variant
 
 <Preview>
-  <Story id="dropdown--inline" />
+  <Story id="components-dropdown--inline" />
 </Preview>
 
 ### Skeleton state
@@ -61,7 +61,7 @@ You can use the `DropdownSkeleton` component to render a skeleton variant of a
 be fetched from an external API.
 
 <Preview>
-  <Story id="dropdown--skeleton" />
+  <Story id="components-dropdown--skeleton" />
 </Preview>
 
 ## Component API

packages/react/src/components/FormLabel/FormLabel.mdx

@@ -22,7 +22,7 @@ import Tooltip from '../Tooltip';
 ## Overview
 
 <Preview>
-  <Story id="formlabel--default" />
+  <Story id="components-formlabel--default" />
 </Preview>
 
 ## Component API