KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use argTypes method in storybook-root

Best JavaScript code snippet using storybook-root

test.js

Source:test.js

1import assert from 'assert';2import 'babel-polyfill';3import { RPC, ArgTypes, connect, _makeReader } from './index';4function andThen(fn) {5  setTimeout(fn, 0);6}7let add = RPC({8  id: 0, // a unique byte to identify the RPC9  input: [10    ArgTypes.Byte,11    ArgTypes.Byte12  ],13  output: [14    ArgTypes.Byte15  ]16});17describe('RPCs', function() {18  it('lets us register an RPC', function() {19    assert.deepEqual(add(2, 3).data, [0, 2, 3]);20  });21});22describe('encodings', function() {23  describe('Byte', function() {24    it('serializes a byte', function() {25      assert.deepEqual(ArgTypes.Byte.serialize(45), [45]);26    });27    it('deserializes a byte', function() {28      assert.deepEqual(ArgTypes.Byte.deserialize([45], 0), [45, 1]);29      assert.deepEqual(ArgTypes.Byte.deserialize([1, 45, 2], 1), [45, 2]);30    });31  });32  describe('Number', function() {33    it('encodes a whole PICO-8 number', function() {34      assert.deepEqual(ArgTypes.Number.serialize(10), [0, 10, 0, 0]);35      assert.deepEqual(ArgTypes.Number.serialize(300), [1, 44, 0, 0]);36    });37    it('encodes a fractional PICO-8 number', function() {38      assert.deepEqual(ArgTypes.Number.serialize(0.5), [0, 0, 128, 0]);39      assert.deepEqual(ArgTypes.Number.serialize(0.75), [0, 0, 192, 0]);40      assert.deepEqual(ArgTypes.Number.serialize(0.25), [0, 0, 64, 0]);41      assert.deepEqual(ArgTypes.Number.serialize(0.0009842), [0, 0, 0, 64]);42      assert.deepEqual(ArgTypes.Number.serialize(14234.123132), [55, 154, 31, 133]);43      assert.deepEqual(ArgTypes.Number.serialize(-10), [255, 246, 0, 0]);44    });45    it('decodes a whole PICO-8 number', function() {46      assert.deepEqual(ArgTypes.Number.deserialize([0, 10, 0, 0], 0), [10, 4]);47      assert.deepEqual(ArgTypes.Number.deserialize([1, 44, 0, 0], 0), [300, 4]);48    });49    it('decodes a fractional PICO-8 number', function() {50      assert.deepEqual(ArgTypes.Number.deserialize([0, 0, 128, 0], 0), [0.5, 4]);51      assert.deepEqual(ArgTypes.Number.deserialize([0, 0, 192, 0], 0), [0.75, 4]);52      assert.deepEqual(ArgTypes.Number.deserialize([0, 0, 64, 0], 0), [0.25, 4]);53      assert.deepEqual(ArgTypes.Number.deserialize([255, 246, 0, 0], 0), [-10, 4]);54      // close enough55      //assert.deepEqual(ArgTypes.Number.deserialize([0, 0, 0, 64]), 0.0009842);56      //assert.deepEqual(ArgTypes.Number.deserialize([55, 154, 31, 133]), 14234.123132);57    });58  });59  describe('Array', function() {60    it('encodes an array of a particular type', function() {61      assert.deepEqual(ArgTypes.Array(ArgTypes.Byte).serialize([]), [0, 0]);62      assert.deepEqual(ArgTypes.Array(ArgTypes.Byte).serialize([123, 121]), [0, 2, 123, 121]);63      assert.deepEqual(ArgTypes.Array(ArgTypes.Number).serialize([123, 121]), [0, 2, 0, 123, 0, 0, 0, 121, 0, 0]);64    });65    it('decodes an array of a particular type', function() {66      assert.deepEqual(ArgTypes.Array(ArgTypes.Byte).deserialize([0, 0], 0), [[], 2]);67      assert.deepEqual(ArgTypes.Array(ArgTypes.Byte).deserialize([0, 2, 123, 121], 0), [[123, 121], 4]);68      assert.deepEqual(69        ArgTypes.Array(ArgTypes.Number).deserialize([0, 2, 0, 123, 0, 0, 0, 121, 0, 0], 0),70        [[123, 121], 10]71      );72    });73  });74  describe('String', function() {75    it('encodes a string as an array of bytes', function() {76      assert.deepEqual(ArgTypes.String.serialize('hello'), [0, 5, 104, 101, 108, 108, 111]);77    });78    it('decodes a string', function() {79      assert.deepEqual(80        ArgTypes.String.deserialize([0, 5, 104, 101, 108, 108, 111], 0),81        ['hello', 7]82      );83    });84  });85  describe('Tuple', function() {86    let single = ArgTypes.Tuple(ArgTypes.Byte);87    it('encodes a tuple of a single type', function() {88      assert.deepEqual(single.serialize([0]), [0]);89    });90    it('decodes a tuple of a single type', function() {91      assert.deepEqual(single.deserialize([0], 0), [[0], 1]);92    });93    let pair = ArgTypes.Tuple(ArgTypes.Byte, ArgTypes.Boolean);94    it('encodes a tuple of a pair', function() {95      assert.deepEqual(pair.serialize([0, true]), [0, 1]);96    });97    it('decodes a tuple of a pair', function() {98      assert.deepEqual(pair.deserialize([10, 1], 0), [[10, true], 2]);99    });100  });101});102function makeMock({ messagesBeforeRespond }={ messagesBeforeRespond: 1 }) {103  let writer;104  let mockReader = function(cb) {105    writer = cb;106    return function() {};107  }108  let listeners = [];109  let mockWriter = function(data) {110    listeners.forEach(l => l(data));111  }112  let queue = [];113  return {114    reader: mockReader,115    writer: mockWriter,116    push: function(...x) {117      queue.push(x);118      if (queue.length >= messagesBeforeRespond) {119        queue.forEach(x => writer(...x));120        queue = [];121      }122    },123    onMessage: function(cb) {124      listeners.push(cb);125    }126  }127}128describe('talking to the bridge', function() {129  it('lets us call a function', function(done) {130    let mock = makeMock();131    let bridge = connect(mock);132    let result = bridge.send(add(2, 3));133    andThen(() => mock.push([0, 5]));134    result.then(result => {135      assert.deepEqual(result, [5]);136      done();137    });138  });139  it('lets us call multiple functions at once', function(done) {140    let mock = makeMock();141    let bridge = connect(mock);142    let result5 = bridge.send(add(2, 3));143    let result10 = bridge.send(add(7, 3));144    andThen(() => mock.push([0, 5]));145    andThen(() => mock.push([1, 10]));146    Promise.all([result5, result10]).then(([five, ten]) => {147      assert.deepEqual(five, [5]);148      assert.deepEqual(ten, [10]);149      done();150    });151  });152  it('lets us call multiple functions at once (other order)', function(done) {153    let mock = makeMock();154    let bridge = connect({ reader: mock.reader, writer: mock.writer });155    let result5 = bridge.send(add(2, 3));156    let result10 = bridge.send(add(7, 3));157    andThen(() => mock.push([1, 10]));158    andThen(() => mock.push([0, 5]));159    Promise.all([result5, result10]).then(([five, ten]) => {160      assert.deepEqual(five, [5]);161      assert.deepEqual(ten, [10]);162      done();163    });164  });165});166describe('reader', function() {167  // so we can easily set the buffer values without reassigning it168  function setTo(buffer, values) {169    while (buffer.length) { buffer.pop(); }170    values.forEach(v => buffer.push(v));171  }172  function setUpTestReader() {173    let buffer = [];174    let tick;175    let subscribed;176    let reader = _makeReader({177      gpio: buffer,178      subscribe: t => { tick = t; }179    });180    let messages = [];181    reader(function(message) {182      messages.push(message);183    });184    return {185      write: data => setTo(buffer, data),186      tick,187      messages,188      buffer189    };190  }191  it('turns a stream of buffers into a stream of messages', function() {192    let { write, tick, messages } = setUpTestReader();193    write([1, 1, 0, 5, 1, 2]);194    tick();195    write([1, 3, 4, 5, 6]);196    tick();197    assert.deepEqual(198      messages,199      [[1, 2, 3, 4, 5]]200    );201  });202  it('ignores 0s between messages', function() {203    let { write, tick, messages } = setUpTestReader();204    write([1, 1, 0, 5, 1, 2]);205    tick();206    write([1, 3, 4, 5, 0, 0, 0, 0, 1, 0, 1, 1]);207    tick();208    assert.deepEqual(messages, [[1, 2, 3, 4, 5], [1]]);209  });210  it('doesnt read if the read bit isnt set appropriately', function() {211    let { write, tick, messages } = setUpTestReader();212    write([1, 1, 0, 5, 1, 2]);213    tick();214    write([0, 3, 4, 5, 6]);215    tick();216    assert.deepEqual(messages, []);217  });218  219  it('doesnt read if the writer bit isnt set appropriately', function() {220    let { write, tick, messages } = setUpTestReader();221    write([1, 1, 0, 5, 1, 2]);222    tick();223    write([3, 3, 4, 5, 6]);224    tick();225    assert.deepEqual(messages, []);226  });227  it('sets the buffer header after consuming the message', function() {228    let { write, tick, buffer } = setUpTestReader();229    write([1, 1, 0, 5, 1, 2]);230    assert.equal(buffer[0], 1);231    tick();232    assert.equal(buffer[0], 0);233  });234  it('doesnt start listening until it has listeners', function() {235    let buffer = [];236    let subscribed = false;237    let reader = _makeReader({238      gpio: buffer,239      subscribe: () => { subscribed = true; },240    });241    assert(!subscribed);242    reader(function() {});243    assert(subscribed);244  });245  it('cancels the subscription when there are no listeners', function() {246    let buffer = [];247    let subscribed = false;248    let reader = _makeReader({249      gpio: buffer,250      subscribe: () => {251        subscribed = true;252        return () => subscribed = false;253      },254    });255    assert(!subscribed);256    let subscription = reader(function() {});257    assert(subscribed);258    subscription();259    assert(!subscribed);260  });261});262describe('behaviour when calling stop() (on hold)', function() {263  // I think these would be good to have, for my current purposes there's no264  // reason to call stop so I think having this would unnecessarily complicate265  // the implementation266  it('waits for all the pending function calls to finish before actually stopping');...

expression_types.ts

Source:expression_types.ts

1/*2 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one3 * or more contributor license agreements. Licensed under the Elastic License;4 * you may not use this file except in compliance with the Elastic License.5 */6import { i18n } from '@kbn/i18n';7import { LUCENE } from './constants';8export const ArgTypesStrings = {9  Color: {10    getDisplayName: () =>11      i18n.translate('xpack.canvas.expressionTypes.argTypes.colorDisplayName', {12        defaultMessage: 'Color',13      }),14    getHelp: () =>15      i18n.translate('xpack.canvas.expressionTypes.argTypes.colorHelp', {16        defaultMessage: 'Color picker',17      }),18  },19  ContainerStyle: {20    getDisplayName: () =>21      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyleTitle', {22        defaultMessage: 'Container style',23      }),24    getHelp: () =>25      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyleLabel', {26        defaultMessage: 'Tweak the appearance of the element container',27      }),28    getAppearanceTitle: () =>29      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.appearanceTitle', {30        defaultMessage: 'Appearance',31      }),32    getBorderTitle: () =>33      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.borderTitle', {34        defaultMessage: 'Border',35      }),36    getPaddingLabel: () =>37      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.paddingLabel', {38        defaultMessage: 'Padding',39      }),40    getOpacityLabel: () =>41      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.opacityLabel', {42        defaultMessage: 'Opacity',43      }),44    getOverflowLabel: () =>45      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.overflowLabel', {46        defaultMessage: 'Overflow',47      }),48    getOverflowHiddenOption: () =>49      i18n.translate(50        'xpack.canvas.expressionTypes.argTypes.containerStyle.overflowHiddenDropDown',51        {52          defaultMessage: 'Hidden',53        }54      ),55    getOverflowVisibleOption: () =>56      i18n.translate(57        'xpack.canvas.expressionTypes.argTypes.containerStyle.overflowVisibleDropDown',58        {59          defaultMessage: 'Visible',60        }61      ),62    getThicknessLabel: () =>63      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.thicknessLabel', {64        defaultMessage: 'Thickness',65      }),66    getStyleLabel: () =>67      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.styleLabel', {68        defaultMessage: 'Style',69      }),70    getRadiusLabel: () =>71      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.radiusLabel', {72        defaultMessage: 'Radius',73      }),74    getColorLabel: () =>75      i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.colorLabel', {76        defaultMessage: 'Color',77      }),78  },79  Font: {80    getDisplayName: () =>81      i18n.translate('xpack.canvas.expressionTypes.argTypes.fontTitle', {82        defaultMessage: 'Text settings',83      }),84    getHelp: () =>85      i18n.translate('xpack.canvas.expressionTypes.argTypes.fontHelpLabel', {86        defaultMessage: 'Set the font, size and color',87      }),88  },89  SeriesStyle: {90    getDisplayName: () =>91      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyleTitle', {92        defaultMessage: 'Series style',93      }),94    getHelp: () =>95      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyleLabel', {96        defaultMessage: 'Set the style for a selected named series',97      }),98    getColorLabel: () =>99      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.colorLabel', {100        defaultMessage: 'Color',101      }),102    getStyleLabel: () =>103      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.styleLabel', {104        defaultMessage: 'Style',105      }),106    getRemoveAriaLabel: () =>107      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.removeAriaLabel', {108        defaultMessage: 'Remove Series Color',109      }),110    getNoSeriesTooltip: () =>111      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.noSeriesTooltip', {112        defaultMessage: 'Data has no series to style, add a color dimension',113      }),114    getSeriesIdentifierLabel: () =>115      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.seriesIdentifierLabel', {116        defaultMessage: 'Series Identifier',117      }),118    getSelectSeriesOption: () =>119      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.selectSeriesDropDown', {120        defaultMessage: 'Select Series',121      }),122    getLineLabel: () =>123      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.lineLabel', {124        defaultMessage: 'Line',125      }),126    getBarLabel: () =>127      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.barLabel', {128        defaultMessage: 'Bar',129      }),130    getPointLabel: () =>131      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.pointLabel', {132        defaultMessage: 'Point',133      }),134    getNoneOption: () =>135      i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.noneDropDown', {136        defaultMessage: 'None',137      }),138  },139};140export const ExpressionDataSourceStrings = {141  ESDocs: {142    getDisplayName: () =>143      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsTitle', {144        defaultMessage: 'Elasticsearch raw documents',145      }),146    getHelp: () =>147      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsLabel', {148        defaultMessage: 'Pull back raw documents from elasticsearch',149      }),150    getWarningTitle: () =>151      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningTitle', {152        defaultMessage: 'Be careful',153      }),154    getWarning: () =>155      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningDescription', {156        defaultMessage: `157          The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch158          without the use of aggregations. It is best used with low volume datasets and in159          situations where you need to view raw documents or plot exact, non-aggregated values on a160          chart.`,161      }),162    getIndexTitle: () =>163      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexTitle', {164        defaultMessage: 'Index',165      }),166    getIndexLabel: () =>167      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexLabel', {168        defaultMessage: 'Enter an index name or select an index pattern',169      }),170    getQueryTitle: () =>171      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.queryTitle', {172        defaultMessage: 'Query',173      }),174    getQueryLabel: () =>175      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.queryLabel', {176        defaultMessage: '{lucene} query string syntax',177        values: {178          lucene: LUCENE,179        },180      }),181    getSortFieldTitle: () =>182      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldTitle', {183        defaultMessage: 'Sort Field',184      }),185    getSortFieldLabel: () =>186      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldLabel', {187        defaultMessage: 'Document sort field',188      }),189    getSortOrderTitle: () =>190      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderTitle', {191        defaultMessage: 'Sort Order',192      }),193    getSortOrderLabel: () =>194      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderLabel', {195        defaultMessage: 'Document sort order',196      }),197    getFieldsTitle: () =>198      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsTitle', {199        defaultMessage: 'Fields',200      }),201    getFieldsLabel: () =>202      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsLabel', {203        defaultMessage: 'The fields to extract. Kibana scripted fields are not currently available',204      }),205    getFieldsWarningLabel: () =>206      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsWarningLabel', {207        defaultMessage: 'This datasource performs best with 10 or fewer fields',208      }),209    getAscendingOption: () =>210      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.ascendingDropDown', {211        defaultMessage: 'Ascending',212      }),213    getDescendingOption: () =>214      i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.descendingDropDown', {215        defaultMessage: 'Descending',216      }),217  },...

Using AI Code Generation

1import { argTypes } from 'storybook-root';2import { argTypes } from 'storybook-root';3import { argTypes } from 'storybook-root';4import { argTypes } from 'storybook-root';5import { argTypes } from 'storybook-root';6import { argTypes } from 'storybook-root';7import { argTypes } from 'storybook-root';8import { argTypes } from 'storybook-root';9import { argTypes } from 'storybook-root';10import { argTypes } from 'storybook-root';11import { argTypes } from 'storybook-root';12import { argTypes } from 'storybook-root';

Using AI Code Generation

1import React from 'react';2import { argTypes } from './storybook-root';3export default {4};5const Template = ({ ...args }) => <div {...args} />;6export const Test = Template.bind({});7Test.args = {8};9module.exports = {10  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],11  typescript: {12  },13};14import { addDecorator } from '@storybook/react';15import { withA11y } from '@storybook/addon-a11y';16import { withPerformance } from 'storybook-addon-performance';17import { withDesign } from 'storybook-addon-designs';18import { withTests } from '@storybook/addon-jest';19import results from '../jest-test-results.json';20import { withNextRouter } from 'storybook-addon-next-router';21import { withNextRouter } from 'storybook-addon-next-router';22import { withNextRouter } from 'storybook-addon-next-router';23import { withNextRouter } from 'storybook-addon-next-router';24import { withNextRouter } from 'storybook-addon-next-router';25import { withNextRouter } from 'storybook-addon-next-router';26import { withNextRouter } from 'storybook-addon-next-router';27import { withNextRouter } from 'storybook-addon-next-router';28import { withNextRouter } from 'storybook-addon-next-router';29import { withNextRouter } from 'storybook-addon-next-router';30import { withNextRouter } from 'storybook-addon-next-router';31import { withNextRouter } from 'storybook-addon-next-router';32import { withNextRouter } from 'storybook-addon-next-router';33import { withNextRouter } from 'storybook-addon-next-router';34import { withNextRouter } from 'storybook-addon-next-router';35import { withNextRouter } from 'storybook-addon-next-router';36import { withNextRouter } from 'storybook-addon-next-router';37import { withNextRouter } from 'storybook-addon-next-router';38import { withNextRouter } from 'storybook-addon-next-router';39import { withNextRouter

Using AI Code Generation

1import { argTypes } from 'storybook-root-decorator';2export default {3  argTypes: argTypes(),4};5const Template = () => null;6export const Test = Template.bind({});7Test.args = {8};9import { withRootDecorator } from 'storybook-root-decorator';10export const decorators = [withRootDecorator()];11export const parameters = {12  actions: { argTypesRegex: '^on[A-Z].*' },13};14module.exports = {15};

Using AI Code Generation

1import { argTypes } from 'storybook-root';2export default {3};4const Template = (args) => <div {...args} />;5export const Example = Template.bind({});6Example.args = {7};8import { ArgTypes } from '@storybook/addons';9const argTypes: ArgTypes = {10  title: {11    type: { name: 'string', required: true },12  },13  description: {14    type: { name: 'string', required: false },15  },16};17export { argTypes };18import { configure } from '@storybook/react-native';19configure(() => {20  require('./storybook');21}, module);22import { configure } from '@storybook/react-native';23configure(() => {24  require('./storybook');25}, module);26import { configure } from '@storybook/react-native';27configure(() => {28  require('./storybook');29}, module);30import { configure } from '@storybook/react-native';31configure(() => {32  require('./storybook');33}, module);34import { configure } from '@storybook/react-native';35configure(() => {36  require('./storybook');37}, module);38import { configure } from '@storybook/react-native';39configure(() =>

Using AI Code Generation

1import { argTypes } from 'storybook-root'2export default {3  argTypes: argTypes({4    prop1: {5      control: {6      }7    },8    prop2: {9      control: {10      }11    }12  })13}14const Template = (args) => <Test {...args} />15export const TestStory = Template.bind({})16TestStory.args = {17}18export const TestStory = Template.bind({})19TestStory.args = {20}21const args = {22}23export const TestStory = Template.bind({})24export const TestStory2 = Template.bind({})

Using AI Code Generation

1import { argTypes } from 'storybook-root-decorator';2export default {3};4import { addDecorator } from '@storybook/react';5import { withA11y } from '@storybook/addon-a11y';6import { withRootDecorator } from 'storybook-root-decorator';7addDecorator(withA11y);8addDecorator(withRootDecorator);9MIT © [Niklas Ewald](

Using AI Code Generation

1import { argTypes as buttonArgTypes } from '../src/components/Button/Button.stories.js';2export const argTypes = {3};4export const Primary = ({ label }) => <Button label={label} />;5Primary.args = {6};7Primary.argTypes = {8  label: { control: 'text' },9};10Primary.parameters = {11  docs: {12    source: {13    },14  },15};16export default {17  argTypes: {18    backgroundColor: { control: 'color' },19  },20  parameters: {21    docs: {22      source: {23      },24    },25  },26};27import React from 'react';28import { Button } from './Button';29export default {30  argTypes: {31    backgroundColor: { control: 'color' },32  },33  parameters: {34    docs: {35      source: {36      },37    },38  },39};40const Template = args => <Button {...args} />;41export const Primary = Template.bind({});42Primary.args = {43};44export const Secondary = Template.bind({});45Secondary.args = {46};47export const Large = Template.bind({});48Large.args = {49};50export const Small = Template.bind({});51Small.args = {52};53export const argTypes = {54  label: { control: 'text' },55};56import React from 'react';57import PropTypes from 'prop-types';58import './button.css';59export const Button = ({ primary, backgroundColor, size, label, ...props }) => {60  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';61  return (62      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}63      style={backgroundColor && { backgroundColor }}64      {...props}65      {label}66  );67};68Button.propTypes = {

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.