Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use Vertical method in storybook-root

Best JavaScript code snippet using storybook-root

vertical-tabs.es6.js

Source:vertical-tabs.es6.js

1/**2 * @file3 * Defines vertical tabs functionality.4 *5 * This file replaces core/misc/vertical-tabs.js to fix some bugs in the6 * original implementation, as well as makes minor changes to enable Claro7 * designs:8 * 1. Replaces hard-coded markup and adds 'js-' prefixed CSS classes for the9 *    JavaScript functionality (https://www.drupal.org/node/3081489).10 *    - The original Drupal.behavior and Drupal.verticalTab object hard-code11 *      markup of the tab list and (the outermost) wrapper of the vertical tabs12 *      component.13 *    - The original Drupal.verticalTab object is built on the same (unprefixed)14 *      CSS classes that should be used only for theming the component:15 *      - .vertical-tabs__pane - replaced by .js-vertical-tabs-pane;16 *      - .vertical-tabs__menu-item - replaced by .js-vertical-tabs-menu-item;17 *      - .vertical-tab--hidden - replaced by .js-vertical-tab-hidden.18 * 2. Fixes accessibility bugs (https://www.drupal.org/node/3081500):19 *    - The original Drupal.verticalTab object doesn't take care of the right20 *      aria attributes. Every details summary element is described with21 *      aria-expanded="false" and aria-pressed="false".22 *    - The original Drupal.verticalTab object uses a non-unique CSS id23 *      '#active-vertical-tab' for the marker of the active menu tab. This leads24 *      to broken behavior on filter format and editor configuration form where25 *      multiple vertical tabs may appear26 *      (/admin/config/content/formats/manage/basic_html).27 *    - Auto-focus bug: if the vertical tab is activated by pressing enter on28 *      the vertical tab menu link, the original Drupal.verticalTab object tries29 *      to focus the first visible :input element in a vertical tab content. The30 *      implementation doesn't work in all scenarios. For example, on the31 *      'Filter format and editor' form32 *      (/admin/config/content/formats/manage/basic_html), if the user presses33 *      the enter key on the last vertical tabs element's menu link ('Filter34 *      settings'), the focused element will be the first vertical tabs35 *      ('CKEditor plugin settings') active input, and not the expected one.36 * 3. Consistency between browsers (https://www.drupal.org/node/3081508):37 *    We have to display the setting summary on the 'accordion look' as well.38 *    Using the original file, these are displayed only on browsers without39 *    HTML5 details support, where core's built-in core/misc/collapse.js HTML540 *    details polyfill is in action.41 * 4. Help fulfill our custom needs (https://www.drupal.org/node/3081519):42 *    The original behavior applies its features only when the actual screen43 *    width is bigger than 640 pixels (or the value of the44 *    drupalSettings.widthBreakpoint). But we want to switch between the45 *    'accordion look' and 'tab look' dynamically, right after the browser46 *    viewport was resized, and not only on page load.47 *    This would be possible even by defining drupalSettings.widthBreakpoint48 *    with '0' value. But since the name of this configuration does not suggest49 *    that it is (and will be) used only by vertical tabs, it is much cleaner50 *    to remove the unneeded condition from the functionality.51 */52/**53 * Triggers when form values inside a vertical tab changes.54 *55 * This is used to update the summary in vertical tabs in order to know what56 * are the important fields' values.57 *58 * @event summaryUpdated59 */60(($, Drupal) => {61  /**62   * Show the parent vertical tab pane of a targeted page fragment.63   *64   * In order to make sure a targeted element inside a vertical tab pane is65   * visible on a hash change or fragment link click, show all parent panes.66   *67   * @param {jQuery.Event} e68   *   The event triggered.69   * @param {jQuery} $target70   *   The targeted node as a jQuery object.71   */72  const handleFragmentLinkClickOrHashChange = (e, $target) => {73    $target.parents('.js-vertical-tabs-pane').each((index, pane) => {74      $(pane).data('verticalTab').focus();75    });76  };77  /**78   * This script transforms a set of details into a stack of vertical tabs.79   *80   * Each tab may have a summary which can be updated by another81   * script. For that to work, each details element has an associated82   * 'verticalTabCallback' (with jQuery.data() attached to the details),83   * which is called every time the user performs an update to a form84   * element inside the tab pane.85   *86   * @type {Drupal~behavior}87   *88   * @prop {Drupal~behaviorAttach} attach89   *   Attaches behaviors for vertical tabs.90   */91  Drupal.behaviors.claroVerticalTabs = {92    attach(context) {93      /**94       * Binds a listener to handle fragment link clicks and URL hash changes.95       */96      $('body')97        .once('vertical-tabs-fragments')98        .on(99          'formFragmentLinkClickOrHashChange.verticalTabs',100          handleFragmentLinkClickOrHashChange,101        );102      $(context)103        .find('[data-vertical-tabs-panes]')104        .once('vertical-tabs')105        .each(function initializeVerticalTabs() {106          const $this = $(this).addClass('vertical-tabs__items--processed');107          const focusID = $this.find(':hidden.vertical-tabs__active-tab').val();108          let tabFocus;109          // Check if there are some details that can be converted to110          // vertical-tabs.111          const $details = $this.find('> details');112          if ($details.length === 0) {113            return;114          }115          // Create the tab column.116          const tabList = $(Drupal.theme.verticalTabListWrapper());117          $this118            .wrap(119              $(Drupal.theme.verticalTabsWrapper()).addClass(120                'js-vertical-tabs',121              ),122            )123            .before(tabList);124          // Transform each details into a tab.125          $details.each(function initializeVerticalTabItems() {126            const $that = $(this);127            /* eslint-disable new-cap */128            const verticalTab = new Drupal.verticalTab({129              title: $that.find('> summary').text(),130              details: $that,131            });132            /* eslint-enable new-cap */133            tabList.append(verticalTab.item);134            $that135              // prop() can't be used on browsers not supporting details136              // element, the style won't apply to them if prop() is used.137              .removeAttr('open')138              .addClass('js-vertical-tabs-pane')139              .data('verticalTab', verticalTab);140            if (this.id === focusID) {141              tabFocus = $that;142            }143          });144          if (!tabFocus) {145            // If the current URL has a fragment and one of the tabs contains an146            // element that matches the URL fragment, activate that tab.147            const $locationHash = $this.find(window.location.hash);148            if (window.location.hash && $locationHash.length) {149              tabFocus = $locationHash.is('.js-vertical-tabs-pane')150                ? $locationHash151                : $locationHash.closest('.js-vertical-tabs-pane');152            } else {153              tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);154            }155          }156          if (tabFocus.length) {157            tabFocus.data('verticalTab').focus(false);158          }159        });160    },161  };162  /**163   * The vertical tab object represents a single tab within a tab group.164   *165   * @constructor166   *167   * @param {object} settings168   *   Settings object.169   * @param {string} settings.title170   *   The name of the tab.171   * @param {jQuery} settings.details172   *   The jQuery object of the details element that is the tab pane.173   *174   * @fires event:summaryUpdated175   *176   * @listens event:summaryUpdated177   */178  Drupal.verticalTab = function verticalTab(settings) {179    const self = this;180    $.extend(this, settings, Drupal.theme('verticalTab', settings));181    this.item.addClass('js-vertical-tabs-menu-item');182    this.link.attr('href', `#${settings.details.attr('id')}`);183    this.link.on('click', (event) => {184      event.preventDefault();185      self.focus();186    });187    this.details.on('toggle', (event) => {188      // We will control this by summary clicks.189      event.preventDefault();190    });191    // Open the tab for every browser, with or without details support.192    this.details193      .find('> summary')194      .on('click', (event) => {195        event.preventDefault();196        self.details.attr('open', true);197        if (self.details.hasClass('collapse-processed')) {198          setTimeout(() => {199            self.focus();200          }, 10);201        } else {202          self.focus();203        }204      })205      .on('keydown', (event) => {206        if (event.keyCode === 13) {207          // Set focus on the first input field of the current visible details/tab208          // pane.209          setTimeout(() => {210            self.details.find(':input:visible:enabled').eq(0).trigger('focus');211          }, 10);212        }213      });214    // Keyboard events added:215    // Pressing the Enter key will open the tab pane.216    this.link.on('keydown', (event) => {217      if (event.keyCode === 13) {218        event.preventDefault();219        self.focus();220        // Set focus on the first input field of the current visible details/tab221        // pane.222        self.details.find(':input:visible:enabled').eq(0).trigger('focus');223      }224    });225    this.details226      .on('summaryUpdated', () => {227        self.updateSummary();228      })229      .trigger('summaryUpdated');230  };231  Drupal.verticalTab.prototype = {232    /**233     * Displays the tab's content pane.234     *235     * @param {bool} triggerFocus236     *   Whether focus should be triggered for the summary element.237     */238    focus(triggerFocus = true) {239      this.details240        .siblings('.js-vertical-tabs-pane')241        .each(function closeOtherTabs() {242          const tab = $(this).data('verticalTab');243          if (tab.details.attr('open')) {244            tab.details.removeAttr('open').find('> summary').attr({245              'aria-expanded': 'false',246              'aria-pressed': 'false',247            });248            tab.item.removeClass('is-selected');249          }250        })251        .end()252        .siblings(':hidden.vertical-tabs__active-tab')253        .val(this.details.attr('id'));254      this.details255        .attr('open', true)256        .find('> summary')257        .attr({258          'aria-expanded': 'true',259          'aria-pressed': 'true',260        })261        .closest('.js-vertical-tabs')262        .find('.js-vertical-tab-active')263        .remove();264      if (triggerFocus) {265        const $summary = this.details.find('> summary');266        if ($summary.is(':visible')) {267          $summary.trigger('focus');268        }269      }270      this.item.addClass('is-selected');271      // Mark the active tab for screen readers.272      this.title.after(273        $(Drupal.theme.verticalTabActiveTabIndicator()).addClass(274          'js-vertical-tab-active',275        ),276      );277    },278    /**279     * Updates the tab's summary.280     */281    updateSummary() {282      const summary = this.details.drupalGetSummary();283      this.summary.html(summary);284    },285    /**286     * Shows a vertical tab pane.287     *288     * @return {Drupal.verticalTab}289     *   The verticalTab instance.290     */291    tabShow() {292      // Display the tab.293      this.item.removeClass('vertical-tabs__menu-item--hidden').show();294      // Show the vertical tabs.295      this.item.closest('.js-form-type-vertical-tabs').show();296      // Display the details element.297      this.details298        .removeClass('vertical-tab--hidden js-vertical-tab-hidden')299        .show();300      // Update first and last CSS classes for details.301      this.details302        .parent()303        .children('.js-vertical-tabs-pane')304        .removeClass('vertical-tabs__item--first vertical-tabs__item--last')305        .filter(':visible')306        .eq(0)307        .addClass('vertical-tabs__item--first');308      this.details309        .parent()310        .children('.js-vertical-tabs-pane')311        .filter(':visible')312        .eq(-1)313        .addClass('vertical-tabs__item--last');314      // Make tab active, but without triggering focus.315      this.focus(false);316      return this;317    },318    /**319     * Hides a vertical tab pane.320     *321     * @return {Drupal.verticalTab}322     *   The verticalTab instance.323     */324    tabHide() {325      // Hide this tab.326      this.item.addClass('vertical-tabs__menu-item--hidden').hide();327      // Hide the details element.328      this.details329        .addClass('vertical-tab--hidden js-vertical-tab-hidden')330        .hide();331      // Update first and last CSS classes for details.332      this.details333        .parent()334        .children('.js-vertical-tabs-pane')335        .removeClass('vertical-tabs__item--first vertical-tabs__item--last')336        .filter(':visible')337        .eq(0)338        .addClass('vertical-tabs__item--first');339      this.details340        .parent()341        .children('.js-vertical-tabs-pane')342        .filter(':visible')343        .eq(-1)344        .addClass('vertical-tabs__item--last');345      // Focus the first visible tab (if there is one).346      const $firstTab = this.details347        .siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)')348        .eq(0);349      if ($firstTab.length) {350        $firstTab.data('verticalTab').focus(false);351      }352      // Hide the vertical tabs (if no tabs remain).353      else {354        this.item.closest('.js-form-type-vertical-tabs').hide();355      }356      return this;357    },358  };359  /**360   * Theme function for a vertical tab.361   *362   * @param {object} settings363   *   An object with the following keys:364   * @param {string} settings.title365   *   The name of the tab.366   *367   * @return {object}368   *   This function has to return an object with at least these keys:369   *   - item: The root tab jQuery element370   *   - link: The anchor tag that acts as the clickable area of the tab371   *       (jQuery version)372   *   - summary: The jQuery element that contains the tab summary373   */374  Drupal.theme.verticalTab = (settings) => {375    const tab = {};376    tab.item = $(377      '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',378    ).append(379      (tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(380        $('<span class="vertical-tabs__menu-link-content"></span>')381          .append(382            (tab.title = $(383              '<strong class="vertical-tabs__menu-link-title"></strong>',384            ).text(settings.title)),385          )386          .append(387            (tab.summary = $(388              '<span class="vertical-tabs__menu-link-summary"></span>',389            )),390          ),391      )),392    );393    return tab;394  };395  /**396   * Wrapper of the menu and the panes.397   *398   * @return {string}399   *   A string representing the DOM fragment.400   */401  Drupal.theme.verticalTabsWrapper = () =>402    '<div class="vertical-tabs clearfix"></div>';403  /**404   * The wrapper of the vertical tab menu items.405   *406   * @return {string}407   *   A string representing the DOM fragment.408   */409  Drupal.theme.verticalTabListWrapper = () =>410    '<ul class="vertical-tabs__menu"></ul>';411  /**412   * Themes the active vertical tab menu item message.413   *414   * @return {string}415   *   A string representing the DOM fragment.416   */417  Drupal.theme.verticalTabActiveTabIndicator = () =>418    `<span class="visually-hidden">${Drupal.t('(active tab)')}</span>`;...

vertical-tabs.js

Source:vertical-tabs.js

1/**2* DO NOT EDIT THIS FILE.3* See the following change record for more information,4* https://www.drupal.org/node/28150835* @preserve6**/7(function ($, Drupal) {8  var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {9    $target.parents('.js-vertical-tabs-pane').each(function (index, pane) {10      $(pane).data('verticalTab').focus();11    });12  };13  Drupal.behaviors.claroVerticalTabs = {14    attach: function attach(context) {15      $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);16      $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function initializeVerticalTabs() {17        var $this = $(this).addClass('vertical-tabs__items--processed');18        var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();19        var tabFocus;20        var $details = $this.find('> details');21        if ($details.length === 0) {22          return;23        }24        var tabList = $(Drupal.theme.verticalTabListWrapper());25        $this.wrap($(Drupal.theme.verticalTabsWrapper()).addClass('js-vertical-tabs')).before(tabList);26        $details.each(function initializeVerticalTabItems() {27          var $that = $(this);28          var verticalTab = new Drupal.verticalTab({29            title: $that.find('> summary').text(),30            details: $that31          });32          tabList.append(verticalTab.item);33          $that.removeAttr('open').addClass('js-vertical-tabs-pane').data('verticalTab', verticalTab);34          if (this.id === focusID) {35            tabFocus = $that;36          }37        });38        if (!tabFocus) {39          var $locationHash = $this.find(window.location.hash);40          if (window.location.hash && $locationHash.length) {41            tabFocus = $locationHash.is('.js-vertical-tabs-pane') ? $locationHash : $locationHash.closest('.js-vertical-tabs-pane');42          } else {43            tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);44          }45        }46        if (tabFocus.length) {47          tabFocus.data('verticalTab').focus(false);48        }49      });50    }51  };52  Drupal.verticalTab = function verticalTab(settings) {53    var self = this;54    $.extend(this, settings, Drupal.theme('verticalTab', settings));55    this.item.addClass('js-vertical-tabs-menu-item');56    this.link.attr('href', "#".concat(settings.details.attr('id')));57    this.link.on('click', function (event) {58      event.preventDefault();59      self.focus();60    });61    this.details.on('toggle', function (event) {62      event.preventDefault();63    });64    this.details.find('> summary').on('click', function (event) {65      event.preventDefault();66      self.details.attr('open', true);67      if (self.details.hasClass('collapse-processed')) {68        setTimeout(function () {69          self.focus();70        }, 10);71      } else {72        self.focus();73      }74    }).on('keydown', function (event) {75      if (event.keyCode === 13) {76        setTimeout(function () {77          self.details.find(':input:visible:enabled').eq(0).trigger('focus');78        }, 10);79      }80    });81    this.link.on('keydown', function (event) {82      if (event.keyCode === 13) {83        event.preventDefault();84        self.focus();85        self.details.find(':input:visible:enabled').eq(0).trigger('focus');86      }87    });88    this.details.on('summaryUpdated', function () {89      self.updateSummary();90    }).trigger('summaryUpdated');91  };92  Drupal.verticalTab.prototype = {93    focus: function focus() {94      var triggerFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;95      this.details.siblings('.js-vertical-tabs-pane').each(function closeOtherTabs() {96        var tab = $(this).data('verticalTab');97        if (tab.details.attr('open')) {98          tab.details.removeAttr('open').find('> summary').attr({99            'aria-expanded': 'false',100            'aria-pressed': 'false'101          });102          tab.item.removeClass('is-selected');103        }104      }).end().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));105      this.details.attr('open', true).find('> summary').attr({106        'aria-expanded': 'true',107        'aria-pressed': 'true'108      }).closest('.js-vertical-tabs').find('.js-vertical-tab-active').remove();109      if (triggerFocus) {110        var $summary = this.details.find('> summary');111        if ($summary.is(':visible')) {112          $summary.trigger('focus');113        }114      }115      this.item.addClass('is-selected');116      this.title.after($(Drupal.theme.verticalTabActiveTabIndicator()).addClass('js-vertical-tab-active'));117    },118    updateSummary: function updateSummary() {119      var summary = this.details.drupalGetSummary();120      this.summary.html(summary);121    },122    tabShow: function tabShow() {123      this.item.removeClass('vertical-tabs__menu-item--hidden').show();124      this.item.closest('.js-form-type-vertical-tabs').show();125      this.details.removeClass('vertical-tab--hidden js-vertical-tab-hidden').show();126      this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');127      this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');128      this.focus(false);129      return this;130    },131    tabHide: function tabHide() {132      this.item.addClass('vertical-tabs__menu-item--hidden').hide();133      this.details.addClass('vertical-tab--hidden js-vertical-tab-hidden').hide();134      this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');135      this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');136      var $firstTab = this.details.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)').eq(0);137      if ($firstTab.length) {138        $firstTab.data('verticalTab').focus(false);139      } else {140          this.item.closest('.js-form-type-vertical-tabs').hide();141        }142      return this;143    }144  };145  Drupal.theme.verticalTab = function (settings) {146    var tab = {};147    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));148    return tab;149  };150  Drupal.theme.verticalTabsWrapper = function () {151    return '<div class="vertical-tabs clearfix"></div>';152  };153  Drupal.theme.verticalTabListWrapper = function () {154    return '<ul class="vertical-tabs__menu"></ul>';155  };156  Drupal.theme.verticalTabActiveTabIndicator = function () {157    return "<span class=\"visually-hidden\">".concat(Drupal.t('(active tab)'), "</span>");158  };...

FuseNavigation.js

Source:FuseNavigation.js

1import Divider from '@material-ui/core/Divider';2import { makeStyles } from '@material-ui/core/styles';3import PropTypes from 'prop-types';4import { memo } from 'react';5import _ from '@lodash';6import FuseNavHorizontalLayout1 from './horizontal/FuseNavHorizontalLayout1';7import FuseNavVerticalLayout1 from './vertical/FuseNavVerticalLayout1';8import FuseNavVerticalLayout2 from './vertical/FuseNavVerticalLayout2';9import FuseNavHorizontalCollapse from './horizontal/types/FuseNavHorizontalCollapse';10import FuseNavHorizontalGroup from './horizontal/types/FuseNavHorizontalGroup';11import FuseNavHorizontalItem from './horizontal/types/FuseNavHorizontalItem';12import FuseNavHorizontalLink from './horizontal/types/FuseNavHorizontalLink';13import FuseNavVerticalCollapse from './vertical/types/FuseNavVerticalCollapse';14import FuseNavVerticalGroup from './vertical/types/FuseNavVerticalGroup';15import FuseNavVerticalItem from './vertical/types/FuseNavVerticalItem';16import FuseNavVerticalLink from './vertical/types/FuseNavVerticalLink';17import { registerComponent } from './FuseNavItem';18/*19Register Fuse Navigation Components20 */21registerComponent('vertical-group', FuseNavVerticalGroup);22registerComponent('vertical-collapse', FuseNavVerticalCollapse);23registerComponent('vertical-item', FuseNavVerticalItem);24registerComponent('vertical-link', FuseNavVerticalLink);25registerComponent('horizontal-group', FuseNavHorizontalGroup);26registerComponent('horizontal-collapse', FuseNavHorizontalCollapse);27registerComponent('horizontal-item', FuseNavHorizontalItem);28registerComponent('horizontal-link', FuseNavHorizontalLink);29registerComponent('vertical-divider', () => <Divider className="my-16" />);30registerComponent('horizontal-divider', () => <Divider className="my-16" />);31const useStyles = makeStyles(theme => ({32	'@global': {33		'.popper-navigation-list': {34			'& .fuse-list-item': {35				padding: '8px 12px 8px 12px',36				height: 40,37				minHeight: 40,38				'& .fuse-list-item-text': {39					padding: '0 0 0 8px'40				}41			},42			'&.dense': {43				'& .fuse-list-item': {44					minHeight: 32,45					height: 32,46					'& .fuse-list-item-text': {47						padding: '0 0 0 8px'48					}49				}50			}51		}52	}53}));54function FuseNavigation(props) {55	const classes = useStyles(props);56	const options = _.pick(props, [57		'navigation',58		'layout',59		'active',60		'dense',61		'className',62		'onItemClick',63		'firstLevel',64		'selectedId'65	]);66	if (props.navigation.length > 0) {67		switch (props.layout) {68			case 'horizontal': {69				return <FuseNavHorizontalLayout1 {...options} />;70			}71			case 'vertical': {72				return <FuseNavVerticalLayout1 {...options} />;73			}74			case 'vertical-2': {75				return <FuseNavVerticalLayout2 {...options} />;76			}77			default: {78				return <FuseNavVerticalLayout1 {...options} />;79			}80		}81	} else {82		return null;83	}84}85FuseNavigation.propTypes = {86	navigation: PropTypes.array.isRequired87};88FuseNavigation.defaultProps = {89	layout: 'vertical'90};...

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withVertical } from 'storybook-root-decorator';3addDecorator(withVertical);4import { addDecorator } from '@storybook/react';5import { withHorizontal } from 'storybook-root-decorator';6addDecorator(withHorizontal);7import { addDecorator } from '@storybook/react';8import { withCenter } from 'storybook-root-decorator';9addDecorator(withCenter);10import { addDecorator } from '@storybook/react';11import { withFullScreen } from 'storybook-root-decorator';12addDecorator(withFullScreen);13MIT © [Abhijith Vijayan](

Using AI Code Generation

1import { Vertical } from "storybook-root";2import { Horizontal } from "storybook-root";3import { Grid } from "storybook-root";4import { Container } from "storybook-root";5import { Row } from "storybook-root";6import { Col } from "storybook-root";7import { Box } from "storybook-root";8import { Text } from "storybook-root";9import { Image } from "storybook-root";10import { Button } from "storybook-root";11import { Link } from "storybook-root";12import { Input } from "storybook-root";13import { Select } from "storybook-root";14import { Checkbox } from "storybook-root";15import { Radio } from "storybook-root";16import { Card } from "storybook-root";17import { CardMedia } from "storybook-root";18import { CardContent } from "storybook-root";19import { CardActions } from "storybook-root";20import { CardHeader } from "storybook-root";21import { CardFooter } from "storybook-root";22import { CardTitle } from "storybook-root";23import { CardSubtitle } from "storybook-root";24import { CardText } from "storybook-root";25import { CardLink } from "storybook-root";

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withVertical } from 'storybook-root-decorator';3import { withKnobs } from '@storybook/addon-knobs';4addDecorator(withVertical);5addDecorator(withKnobs);6import { addDecorator } from '@storybook/react';7import { withHorizontal } from 'storybook-root-decorator';8import { withKnobs } from '@storybook/addon-knobs';9addDecorator(withHorizontal);10addDecorator(withKnobs);11MIT © [kumaraditya303](

Using AI Code Generation

1import { addDecorator, addParameters } from '@storybook/react';2import { withRootVertical } from 'storybook-root-decorator';3addDecorator(withRootVertical);4import { addDecorator, addParameters } from '@storybook/react';5import { withRootHorizontal } from 'storybook-root-decorator';6addDecorator(withRootHorizontal);7import { addDecorator, addParameters } from '@storybook/react';8import { withRoot } from 'storybook-root-decorator';9addDecorator(withRoot);10MIT © [jithendrakumaran](

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { withRootDecorator } from 'storybook-root-decorator';4import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';5import { action } from '@storybook/addon-actions';6import { withInfo } from '@storybook/addon-info';7import { withReadme } from 'storybook-readme';8import { withA11y } from '@storybook/addon-a11y';9import { withTests } from '@storybook/addon-jest';10import { withViewport } from '@storybook/addon-viewport';11import { withConsole } from '@storybook/addon-console';12import { withOptions } from '@storybook/addon-options';13import { withBackgrounds } from '@storybook/addon-backgrounds';14import { withLinks } from '@storybook/addon-links';15import { withNotes } from '@storybook/addon-notes';16import { withSmartKnobs } from 'storybook-addon-smart-knobs';17import { withPropsTable } from 'storybook-addon-react-docgen';18import { withState } from '@dump247/storybook-state';19import { withRedux } from 'addon-redux';20import { withStorysource } from '@storybook/addon-storysource';21import { withPerformance } from 'storybook-addon-performance';22import { withStyledComponents } from 'storybook-addon-styled-component-theme';23import { withCsf } from 'storybook-addon-csf';24import { withGraphQL } from 'storybook-addon-graphql';25import { withGraphQLQuery } from 'storybook-addon-graphql-query';26import { withGraphQLMutation } from 'storybook-addon-graphql-mutation';27import { withGraphQLSubscriptions } from 'storybook-addon-graphql-subscriptions';28import { withI18n } from 'storybook-addon-i18n';29import { withI18nReadme } from 'storybook-addon-i18n-readme';30import { withI18nKnobs } from 'storybook-addon-i18n-knobs';31import { withLayout } from 'storybook-addon-layout';32import { withPaddings } from 'storybook-addon-paddings';33import { withThemes } from 'storybook-addon-themes';34import { withThemesProvider } from 'storybook-addon-styled-component-theme';35import { withCssResources } from '@storybook/addon-cssresources';36import { withFramer } from 'storybook-addon-framer';37import { withFigma } from '

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withVertical } from 'storybook-root-decorator';3import { withKnobs } from '@storybook/addon-knobs';4addDecorator(withKnobs);5addDecorator(withVertical);6import { addDecorator } from '@storybook/react';7import { withHorizontal } from 'storybook-root-decorator';8import { withKnobs } from '@storybook/addon-knobs';9addDecorator(withKnobs);10addDecorator(withHorizontal);11![Demo](

Using AI Code Generation

1import { addDecorator } from '@storybook/react';2import { withRootVertical } from 'storybook-root-decorator';3import { withKnobs } from '@storybook/addon-knobs';4import { withDesign } from 'storybook-addon-designs';5import { withA11y } from '@storybook/addon-a11y';6addDecorator(withRootVertical);7addDecorator(withKnobs);8addDecorator(withDesign);9addDecorator(withA11y);10import { addDecorator } from '@storybook/react';11import { withRootHorizontal } from 'storybook-root-decorator';12import { withKnobs } from '@storybook/addon-knobs';13import { withDesign } from 'storybook-addon-designs';14import { withA11y } from '@storybook/addon-a11y';15addDecorator(withRootHorizontal);16addDecorator(withKnobs);17addDecorator(withDesign);18addDecorator(withA11y);19import { addDecorator } from '@storybook/react';20import { withRoot } from 'storybook-root-decorator';21import { withKnobs } from '@storybook/addon-knobs';22import { withDesign } from 'storybook-addon-designs';23import { withA11y } from '@storybook/addon-a11y';24addDecorator(withRoot);25addDecorator(withKnobs);26addDecorator(withDesign);27addDecorator(withA11y);28MIT © [shubham-singh](

Using AI Code Generation

1import { addDecorator } from '@storybook/react'2import { withRootVertical } from 'storybook-root-decorator'3addDecorator(withRootVertical)4import { withRootVertical } from 'storybook-root-decorator'5export const parameters = {6}7MIT © [kevin940726](

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.