How to use the @storybook/addon-actions.withActions function in @storybook/addon-actions

To help you get started, we’ve selected a few @storybook/addon-actions examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github devexperts / dx-platform / packages / ui-kit / .storybook / config.ts View on Github external
import { addDecorator, addParameters, configure } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withActions } from '@storybook/addon-actions';
import { theme } from './theme';
// @ts-ignore
import { DocsPage } from '../src/demo/docs-page';
// @ts-ignore
import { DocsContainer } from '../src/demo/docs-container';
// @ts-ignore
import { withCanvas } from '../src/demo/canvas';

addDecorator(withKnobs());
addDecorator(withActions());
addDecorator(withCanvas);
addParameters({
	docs: {
		container: DocsContainer,
		page: DocsPage,
	},
	options: {
		theme,
	},
});
configure(require.context('../src', true, /\.stories\.tsx?$/), module);
github sparkdesignsystem / spark-design-system / vanilla / .storybook / config.js View on Github external
import '../../spark/manifests/spark/_spark.scss';
import { configure, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from '../../storybook-spark-theme';
import { withActions } from '@storybook/addon-actions';

addDecorator(withA11y);
addDecorator(withActions('click .sprk-c-Button'));
addDecorator(withActions('click .sprk-b-Link'));

// remove this as a global , individually set on each component (masthead, alert, modal, etc)
addDecorator(story =&gt; `<div data-sprk-main="" class="sprk-o-Box">${story()}</div>`);
// Option defaults

addParameters({
  options: {
    theme: sparkTheme,
  },
});

configure(require.context('../../spark', true, /\/vanilla\/.*\.stories\.(js|ts|tsx|mdx)$/), module);
github sparkdesignsystem / spark-design-system / vanilla / .storybook / config.js View on Github external
import '../../spark/manifests/spark/_spark.scss';
import { configure, addParameters, addDecorator } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import sparkTheme from '../../storybook-spark-theme';
import { withActions } from '@storybook/addon-actions';

addDecorator(withA11y);
addDecorator(withActions('click .sprk-c-Button'));
addDecorator(withActions('click .sprk-b-Link'));

// remove this as a global , individually set on each component (masthead, alert, modal, etc)
addDecorator(story =&gt; `<div data-sprk-main="" class="sprk-o-Box">${story()}</div>`);
// Option defaults

addParameters({
  options: {
    theme: sparkTheme,
  },
});

configure(require.context('../../spark', true, /\/vanilla\/.*\.stories\.(js|ts|tsx|mdx)$/), module);
github zooniverse / front-end-monorepo / packages / lib-react-components / src / Tooltip / Tooltip.stories.js View on Github external
import { Box, Button, Grommet, Text } from 'grommet'
import { Add } from 'grommet-icons'
import React from 'react'

import readme from './README.md'
import Tooltip from './Tooltip'

const config = {
  notes: {
    markdown: readme
  }
}

storiesOf('Tooltip', module)
  .addDecorator(withKnobs)
  .addDecorator(withActions('click button'))
  .add('Light theme (default)', () =&gt; (
    
  ), config)
  .add('Dark theme', () =&gt; (
github zooniverse / front-end-monorepo / packages / lib-react-components / src / AdminCheckbox / AdminCheckbox.stories.js View on Github external
import { Grommet } from 'grommet'
import React from 'react'

import AdminCheckbox from './AdminCheckbox'
import readme from './README.md'

const config = {
  notes: {
    markdown: readme
  }
}

const darkZooTheme = { ...zooTheme, dark: true }

storiesOf('ZooFooter/AdminCheckbox', module)
  .addDecorator(withActions('change #admin-checkbox'))

  .add('Light theme (default)', () =&gt; (
    
  ), config)

  .add('Dark theme', () =&gt; (
    
  ), config)

class AdminCheckboxStoryExample extends React.Component {
  constructor () {
    super()
    this.onChange = this.onChange.bind(this)
    this.state = {
      checked: false
    }
github storybookjs / storybook / examples / web-components-kitchen-sink / stories / addon-actions.stories.js View on Github external
export const story2 = () => withActions('click', 'contextmenu')(button);
story2.story = { name: 'Multiple actions' };
github MadnessLabs / enjin-components / src / components / star-rating / star-rating.stories.js View on Github external
import { storiesOf } from '@storybook/html';
import { withActions } from "@storybook/addon-actions";

import readme from "./readme.md";

storiesOf('Star Rating', module)
  .addDecorator(withActions("enjinStarRating"))
  .addParameters({ jest: ["star-rating"] })
  .add('Default', () =&gt; '', {
    notes: {
      markdown: readme
    }
  })
  .add('With Rating', () =&gt; {
    const starRatingEl = document.createElement('enjin-star-rating');
    starRatingEl.value = 3;

    return starRatingEl;
  }, {
    notes: {
      markdown: readme
    }
  })
github storybookjs / storybook / examples / web-components-kitchen-sink / stories / addon-actions.stories.js View on Github external
export const story1 = () => withActions('click')(button);
story1.story = { name: 'Hello World' };
github storybookjs / storybook / examples / html-kitchen-sink / stories / addon-actions.stories.js View on Github external
export const story2 = () => withActions('click', 'contextmenu')(button);
story2.story = { name: 'Multiple actions' };
github zooniverse / front-end-monorepo / packages / lib-react-components / src / PlainButton / PlainButton.stories.js View on Github external
import zooTheme from '@zooniverse/grommet-theme'
import { Grommet } from 'grommet'
import { Add } from 'grommet-icons'
import React from 'react'

import PlainButton from './PlainButton'
import readme from './README.md'

const config = {
  notes: {
    markdown: readme
  }
}

storiesOf('PlainButton', module)
  .addDecorator(withActions('click button'))
  .addDecorator(withKnobs)

  .add('Light theme (default)', () =&gt; (
    
      
    
  ), config)

  .add('Dark theme', () =&gt; (
    
      
    
  ), config)

  .add('With icon', () =&gt; (