Content density in documentation

[g-cheishvili]

Since content density now depends on generic class names, I do not see any reason why we should have separate examples for showcasing compact states in docs, I believe that we should have a switcher on the header, similar to what we have in case of the theming and rtl and switch all examples accordingly. We should also have additional small page for content density feature and explain how to use it

• [x] visual tests for compact mode
• [x] clean-up the examples
• [x] document this functionality so that the user is aware of it

[InnaAtanasova]

Number 1 reason for me is the visual tests. If we get rid of the examples but manage to generate the tests like for RTL, I am fine. Number 2 is users might not be aware of this component state, even if there's a separate page for this.

In general, I see your point and it's valid. IN FUND-NGX I would have 0 concerns. For Fund-styles I still see value in having the examples, esp for composite components where we apply the modifier class on the individual building blocks.

[g-cheishvili]

Here's the list of the stories which have "compact"

{
  "packages/styles/stories/Components/action-bar/action-bar.stories.js": [
    {
      "storyName": "ResponsiveXL",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/responsive-xl.example.html"
    },
    {
      "storyName": "ResponsiveL",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/responsive-l.example.html"
    },
    {
      "storyName": "Actions",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/actions.example.html"
    },
    {
      "storyName": "LongTitleDescription",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/long-title-description.example.html"
    },
    {
      "storyName": "BackBtnNoDescription",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/back-btn-no-description.example.html"
    },
    {
      "storyName": "NoBackBtn",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/no-back-btn.example.html"
    },
    {
      "storyName": "BackBtn",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-bar/back-btn.example.html"
    }
  ],
  "packages/styles/stories/Components/action-sheet/action-sheet.stories.js": [
    {
      "storyName": "ActionSheetDesktop",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/action-sheet/action-sheet-desktop.example.html"
    }
  ],
  "packages/styles/stories/Components/bar/bar.stories.js": [
    {
      "storyName": "FloatingFooter",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/bar/floating-footer.example.html"
    },
    {
      "storyName": "Footer",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/bar/footer.example.html"
    },
    {
      "storyName": "HeaderWithSubheader",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/bar/header-with-subheader.example.html"
    },
    {
      "storyName": "Subheader",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/bar/subheader.example.html"
    },
    {
      "storyName": "Header",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/bar/header.example.html"
    },
    {
      "storyName": "Default",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/bar/default.example.html"
    }
  ],
  "packages/styles/stories/Components/busy-indicator/busy-indicator.stories.js": [
    {
      "storyName": "BusyDialog",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/busy-indicator/busy-dialog.example.html"
    }
  ],
  "packages/styles/stories/Components/button/button.stories.js": [
    {
      "storyName": "Sizes",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/button/sizes.example.html"
    },
    {
      "storyName": "SplitMenuButton",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/button/split-menu-button.example.html"
    },
    {
      "storyName": "MenuButton",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/button/menu-button.example.html"
    },
    {
      "storyName": "BadgeOnButton",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/button/badge-on-button.example.html"
    },
    {
      "storyName": "SegmentedButton",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/button/segmented-button.example.html"
    }
  ],
  "packages/styles/stories/Components/calendar/calendar.stories.js": [
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/calendar/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/card/card.stories.js": [
    {
      "storyName": "TableCard",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/card/table-card.example.html"
    },
    {
      "storyName": "ListCard",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/card/list-card.example.html"
    }
  ],
  "packages/styles/stories/Components/dialog/dialog.stories.js": [
    {
      "storyName": "VerticalFormInDialog",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/vertical-form-in-dialog.example.html"
    },
    {
      "storyName": "HorizontalFormInDialog",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/horizontal-form-in-dialog.example.html"
    },
    {
      "storyName": "Loading",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/loading.example.html"
    },
    {
      "storyName": "Selectable",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/selectable.example.html"
    },
    {
      "storyName": "Draggable",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/draggable.example.html"
    },
    {
      "storyName": "Resizable",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/resizable.example.html"
    },
    {
      "storyName": "Sizes",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/sizes.example.html"
    },
    {
      "storyName": "DefaultDialog",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/dialog/default-dialog.example.html"
    }
  ],
  "packages/styles/stories/Components/feed-list/feed-list.stories.js": [
    {
      "storyName": "WithActions",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/feed-list/with-actions.example.html"
    }
  ],
  "packages/styles/stories/Components/file-uploader/file-uploader.stories.js": [
    {
      "storyName": "FileUploaderWithFiles",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/file-uploader/file-uploader-with-files.example.html"
    },
    {
      "storyName": "Status",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/file-uploader/status.example.html"
    },
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/file-uploader/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/generic-tile/generic-tile.stories.js": [
    {
      "storyName": "TileInActionMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/generic-tile/tile-in-action-mode.example.html"
    },
    {
      "storyName": "LinkTile",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/generic-tile/link-tile.example.html"
    }
  ],
  "packages/styles/stories/Components/icon-tab-bar/icon-tab-bar.stories.js": [
    {
      "storyName": "DragAndDrop",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/drag-and-drop.example.html"
    },
    {
      "storyName": "NavigationFlat",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/navigation-flat.example.html"
    },
    {
      "storyName": "Navigation",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/navigation.example.html"
    },
    {
      "storyName": "MultiClick",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/multi-click.example.html"
    },
    {
      "storyName": "Filter",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/filter.example.html"
    },
    {
      "storyName": "Process",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/process.example.html"
    },
    {
      "storyName": "Icon",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/icon.example.html"
    },
    {
      "storyName": "IconOnlySemantic",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/icon-only-semantic.example.html"
    },
    {
      "storyName": "IconOnlyCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/icon-tab-bar/icon-only-compact.example.html"
    }
  ],
  "packages/styles/stories/Components/menu/menu.stories.js": [
    {
      "storyName": "DesktopAndTabletOverflow",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/menu/desktop-and-tablet-overflow.example.html"
    },
    {
      "storyName": "DesktopAndTablet",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/menu/desktop-and-tablet.example.html"
    }
  ],
  "packages/styles/stories/Components/message-box/message-box.stories.js": [
    {
      "storyName": "Responsive",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-box/responsive.example.html"
    },
    {
      "storyName": "Types",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-box/types.example.html"
    },
    {
      "storyName": "Structure",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-box/structure.example.html"
    }
  ],
  "packages/styles/stories/Components/message-page/message-page.stories.js": [
    {
      "storyName": "Buttons",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-page/buttons.example.html"
    }
  ],
  "packages/styles/stories/Components/message-popover/message-popover.stories.js": [
    {
      "storyName": "CompactMessagePopover",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/message-popover/compact-message-popover.example.html"
    }
  ],
  "packages/styles/stories/Components/message-strip/message-strip.stories.js": [
    {
      "storyName": "MessageStripWithCustomIcon",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/message-strip-with-custom-icon.example.html"
    },
    {
      "storyName": "MessageStripWithLink",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/message-strip-with-link.example.html"
    },
    {
      "storyName": "NoIcons",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/no-icons.example.html"
    },
    {
      "storyName": "Error",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/error.example.html"
    },
    {
      "storyName": "Warning",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/warning.example.html"
    },
    {
      "storyName": "Success",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/success.example.html"
    },
    {
      "storyName": "Information",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/message-strip/information.example.html"
    }
  ],
  "packages/styles/stories/Components/notification/notification.stories.js": [
    {
      "storyName": "InDialog",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/in-dialog.example.html"
    },
    {
      "storyName": "NotificationGroup",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/notification-group.example.html"
    },
    {
      "storyName": "Error",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/error.example.html"
    },
    {
      "storyName": "Warning",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/warning.example.html"
    },
    {
      "storyName": "Information",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/information.example.html"
    },
    {
      "storyName": "NoAvatar",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/no-avatar.example.html"
    },
    {
      "storyName": "Primary",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/notification/primary.example.html"
    }
  ],
  "packages/styles/stories/Components/pagination/pagination.stories.js": [
    {
      "storyName": "PerPage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/pagination/per-page.example.html"
    },
    {
      "storyName": "LastPage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/pagination/last-page.example.html"
    },
    {
      "storyName": "MiddlePage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/pagination/middle-page.example.html"
    },
    {
      "storyName": "FirstPage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/pagination/first-page.example.html"
    }
  ],
  "packages/styles/stories/Components/panel/panel.stories.js": [
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/panel/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/popover/popover.stories.js": [
    {
      "storyName": "Variants",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/popover/variants.example.html"
    }
  ],
  "packages/styles/stories/Components/quick-view/quick-view.stories.js": [
    {
      "storyName": "Dialog",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/quick-view/dialog.example.html"
    }
  ],
  "packages/styles/stories/Components/rating-indicator/rating-indicator.stories.js": [
    {
      "storyName": "Sizes",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/rating-indicator/sizes.example.html"
    }
  ],
  "packages/styles/stories/Components/select/select.stories.js": [
    {
      "storyName": "Blank",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/select/blank.example.html"
    },
    {
      "storyName": "NoWrapping",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/select/no-wrapping.example.html"
    },
    {
      "storyName": "TwoColumn",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/select/two-column.example.html"
    },
    {
      "storyName": "SemanticStates",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/select/semantic-states.example.html"
    },
    {
      "storyName": "MobileMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/select/mobile-mode.example.html"
    },
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/select/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/step-input/step-input.stories.js": [
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/step-input/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/switch/switch.stories.js": [
    {
      "storyName": "SemanticSwitch",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/switch/semantic-switch.example.html"
    },
    {
      "storyName": "Basic",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/switch/basic.example.html"
    }
  ],
  "packages/styles/stories/Components/table/table.stories.js": [
    {
      "storyName": "MenuHeader",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/table/menu-header.example.html"
    },
    {
      "storyName": "AdvancedToolbar",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/table/advanced-toolbar.example.html"
    },
    {
      "storyName": "Pagination",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/table/pagination.example.html"
    },
    {
      "storyName": "CondensedCheckbox",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/table/condensed-checkbox.example.html"
    },
    {
      "storyName": "CompactCheckbox",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/table/compact-checkbox.example.html"
    },
    {
      "storyName": "CompactFooter",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/table/compact-footer.example.html"
    }
  ],
  "packages/styles/stories/Components/time/time.stories.js": [
    {
      "storyName": "CompactMode",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/time/compact-mode.example.html"
    }
  ],
  "packages/styles/stories/Components/timepicker/timepicker.stories.js": [
    {
      "storyName": "MinutesCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/timepicker/minutes-compact.example.html"
    },
    {
      "storyName": "Hours12Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/timepicker/hours12-compact.example.html"
    },
    {
      "storyName": "Hours24Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/timepicker/hours24-compact.example.html"
    }
  ],
  "packages/styles/stories/Components/token/token.stories.js": [
    {
      "storyName": "CompactTokenizer",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/token/compact-tokenizer.example.html"
    },
    {
      "storyName": "CompactToken",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/token/compact-token.example.html"
    }
  ],
  "packages/styles/stories/Components/tool-header/tool-header.stories.js": [
    {
      "storyName": "HorizontalPaddings",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tool-header/horizontal-paddings.example.html"
    },
    {
      "storyName": "ResponsivePaddings",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tool-header/responsive-paddings.example.html"
    },
    {
      "storyName": "MenuButtons",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tool-header/menu-buttons.example.html"
    },
    {
      "storyName": "Menu",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tool-header/menu.example.html"
    },
    {
      "storyName": "Primary",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tool-header/primary.example.html"
    }
  ],
  "packages/styles/stories/Components/toolbar/toolbar.stories.js": [
    {
      "storyName": "Alignment",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/toolbar/alignment.example.html"
    },
    {
      "storyName": "Types",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/toolbar/types.example.html"
    },
    {
      "storyName": "Overflow",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/toolbar/overflow.example.html"
    }
  ],
  "packages/styles/stories/Components/tree/tree.stories.js": [
    {
      "storyName": "Selection",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tree/selection.example.html"
    },
    {
      "storyName": "Navigable",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tree/navigable.example.html"
    },
    {
      "storyName": "Primary",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/tree/primary.example.html"
    }
  ],
  "packages/styles/stories/Components/user-menu/user-menu.stories.js": [
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/user-menu/compact.example.html"
    },
    {
      "storyName": "ThirdPartyContent",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/user-menu/third-party-content.example.html"
    },
    {
      "storyName": "Navigation",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/user-menu/navigation.example.html"
    },
    {
      "storyName": "Default",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/user-menu/default.example.html"
    }
  ],
  "packages/styles/stories/Components/wizard/wizard.stories.js": [
    {
      "storyName": "Mobile",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/wizard/mobile.example.html"
    },
    {
      "storyName": "RevertedSteps",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/wizard/reverted-steps.example.html"
    },
    {
      "storyName": "Responsive",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/wizard/responsive.example.html"
    },
    {
      "storyName": "Customized",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/wizard/customized.example.html"
    },
    {
      "storyName": "DefaultExample",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/wizard/default-example.example.html"
    }
  ],
  "packages/styles/stories/Dev/facets/facets.stories.js": [
    {
      "storyName": "ObjectPageMobile",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Dev/facets/object-page-mobile.example.html"
    },
    {
      "storyName": "ObjectPage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Dev/facets/object-page.example.html"
    }
  ],
  "packages/styles/stories/Layouts/dynamic-page/dynamic-page.stories.js": [
    {
      "storyName": "WithFacetsMobile",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/with-facets-mobile.example.html"
    },
    {
      "storyName": "WithFacets",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/with-facets.example.html"
    },
    {
      "storyName": "OnlyCollapse",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/only-collapse.example.html"
    },
    {
      "storyName": "CollapsedHeader",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/collapsed-header.example.html"
    },
    {
      "storyName": "Expandable",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/expandable.example.html"
    },
    {
      "storyName": "SummaryLine",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/summary-line.example.html"
    },
    {
      "storyName": "MobileCollapsed",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/mobile-collapsed.example.html"
    },
    {
      "storyName": "Mobile",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/mobile.example.html"
    },
    {
      "storyName": "Tablet",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/tablet.example.html"
    },
    {
      "storyName": "Desktop",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/dynamic-page/desktop.example.html"
    }
  ],
  "packages/styles/stories/Layouts/flexible-column-layout/flexible-column-layout.stories.js": [
    {
      "storyName": "OneColumnsLayout",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/flexible-column-layout/one-columns-layout.example.html"
    },
    {
      "storyName": "TwoColumnsLayout",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/flexible-column-layout/two-columns-layout.example.html"
    },
    {
      "storyName": "ThreeColumnsLayout",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/flexible-column-layout/three-columns-layout.example.html"
    }
  ],
  "packages/styles/stories/Layouts/page/page.stories.js": [
    {
      "storyName": "ResponsivePage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/page/responsive-page.example.html"
    },
    {
      "storyName": "TransparentPage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/page/transparent-page.example.html"
    },
    {
      "storyName": "BasicPage",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Layouts/page/basic-page.example.html"
    }
  ],
  "packages/styles/stories/Patterns/combobox-input/combobox-input.stories.js": [
    {
      "storyName": "Semantic",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Patterns/combobox-input/semantic.example.html"
    },
    {
      "storyName": "CozyAndCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Patterns/combobox-input/cozy-and-compact.example.html"
    }
  ],
  "packages/styles/stories/Patterns/datepicker/datepicker.stories.js": [
    {
      "storyName": "DefaultAndCompactSizes",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Patterns/datepicker/default-and-compact-sizes.example.html"
    }
  ],
  "packages/styles/stories/Patterns/horizontal-navigation/horizontal-navigation.stories.js": [
    {
      "storyName": "TextAndIconPhone",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Patterns/horizontal-navigation/text-and-icon-phone.example.html"
    },
    {
      "storyName": "TextAndIcon",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Patterns/horizontal-navigation/text-and-icon.example.html"
    },
    {
      "storyName": "TextOnly",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Patterns/horizontal-navigation/text-only.example.html"
    }
  ],
  "packages/styles/stories/Patterns/multi-combo-box/multi-combo-box.stories.js": [
    {
      "storyName": "CozyAndCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Patterns/multi-combo-box/cozy-and-compact.example.html"
    }
  ],
  "packages/styles/stories/Patterns/multi-input/multi-input.stories.js": [
    {
      "storyName": "CozyAndCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Patterns/multi-input/cozy-and-compact.example.html"
    }
  ],
  "packages/styles/stories/Patterns/time-picker/time-picker.stories.js": [
    {
      "storyName": "CozyAndCompactMode",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Patterns/time-picker/cozy-and-compact-mode.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/checkbox/checkbox.stories.js": [
    {
      "storyName": "Required",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/checkbox/required.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/form-group/form-group.stories.js": [
    {
      "storyName": "GroupHeaderCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/Forms/form-group/group-header-compact.example.html"
    },
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/Forms/form-group/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/form-item/form-item.stories.js": [
    {
      "storyName": "Compact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Components/Forms/form-item/compact.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/form-message/form-message.stories.js": [
    {
      "storyName": "Information",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/form-message/information.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/input/input.stories.js": [
    {
      "storyName": "States",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/input/states.example.html"
    },
    {
      "storyName": "Primary",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/input/primary.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/input-group/input-group.stories.js": [
    {
      "storyName": "TestTwo",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/input-group/test-two.example.html"
    },
    {
      "storyName": "States",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/input-group/states.example.html"
    },
    {
      "storyName": "InputWithActions",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/input-group/input-with-actions.example.html"
    },
    {
      "storyName": "Sizes",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/input-group/sizes.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/radio/radio.stories.js": [
    {
      "storyName": "InteractionStates",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/radio/interaction-states.example.html"
    },
    {
      "storyName": "Primary",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/radio/primary.example.html"
    }
  ],
  "packages/styles/stories/Components/Forms/textarea/textarea.stories.js": [
    {
      "storyName": "Counter",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/textarea/counter.example.html"
    },
    {
      "storyName": "Primary",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Forms/textarea/primary.example.html"
    }
  ],
  "packages/styles/stories/Components/Grid List/list-grid/grid-list.stories.js": [
    {
      "storyName": "Footer",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/footer.example.html"
    },
    {
      "storyName": "More",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/more.example.html"
    },
    {
      "storyName": "FilterInfobar",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/filter-infobar.example.html"
    },
    {
      "storyName": "Highlight",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/highlight.example.html"
    },
    {
      "storyName": "States",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/states.example.html"
    },
    {
      "storyName": "Group",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/group.example.html"
    },
    {
      "storyName": "DeleteMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid/delete-mode.example.html"
    }
  ],
  "packages/styles/stories/Components/Grid List/list-grid-select/grid-list-select.stories.js": [
    {
      "storyName": "MultiSelectMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid-select/multi-select-mode.example.html"
    },
    {
      "storyName": "SingleSelectRightMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid-select/single-select-right-mode.example.html"
    },
    {
      "storyName": "SingleSelectLeftMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid-select/single-select-left-mode.example.html"
    },
    {
      "storyName": "SingleSelectMasterMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid-select/single-select-master-mode.example.html"
    },
    {
      "storyName": "NoneMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/Grid List/list-grid-select/none-mode.example.html"
    }
  ],
  "packages/styles/stories/Deprecated/Components/side-navigation/side-navigation.stories.js": [
    {
      "storyName": "NestedListPopover",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/side-navigation/nested-list-popover.example.html"
    },
    {
      "storyName": "NestedListWithoutLinks",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/side-navigation/nested-list-without-links.example.html"
    },
    {
      "storyName": "NestedListWithGroupHeadersCompactMode",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/side-navigation/nested-list-with-group-headers-compact-mode.example.html"
    },
    {
      "storyName": "CondensedStateCompact",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/side-navigation/condensed-state-compact.example.html"
    },
    {
      "storyName": "ComplexCompactSideNav",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/side-navigation/complex-compact-side-nav.example.html"
    }
  ],
  "packages/styles/stories/Deprecated/Components/tabs/tabs.stories.js": [
    {
      "storyName": "SemanticMode",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/tabs/semantic-mode.example.html"
    },
    {
      "storyName": "CompactFilterMode",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/tabs/compact-filter-mode.example.html"
    },
    {
      "storyName": "CompactProcessMode",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/tabs/compact-process-mode.example.html"
    },
    {
      "storyName": "CompactIconOnly",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/tabs/compact-icon-only.example.html"
    },
    {
      "storyName": "TabWithCounters",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/tabs/tab-with-counters.example.html"
    }
  ],
  "packages/styles/stories/Deprecated/Components/time-picker/time-picker.stories.js": [
    {
      "storyName": "CozyAndCompactMode",
      "foundIn": "name",
      "htmlImportFile": "packages/styles/stories/Deprecated/Components/time-picker/cozy-and-compact-mode.example.html"
    }
  ],
  "packages/styles/stories/Components/List/list/byline/byline-list.stories.js": [
    {
      "storyName": "UnreadNotification",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/byline/unread-notification.example.html"
    },
    {
      "storyName": "SelectionAndNavigation",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/byline/selection-and-navigation.example.html"
    },
    {
      "storyName": "Selection",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/byline/selection.example.html"
    },
    {
      "storyName": "Standard",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/byline/standard.example.html"
    }
  ],
  "packages/styles/stories/Components/List/list/standard/standard-list.stories.js": [
    {
      "storyName": "Selection",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/standard/selection.example.html"
    },
    {
      "storyName": "ActionList",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/standard/action-list.example.html"
    },
    {
      "storyName": "Standard",
      "foundIn": "html",
      "htmlImportFile": "packages/styles/stories/Components/List/list/standard/standard.example.html"
    }
  ]
}