storybook/storybook-test-addon-disable-tests.md at 763f5ee25a10f4f380f85daa865b97ff6e2d7941

mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 07:32:02 +08:00

jonniebigodes a0c12ae242 Starting to address snippets and other minor items

2024-12-02 22:23:08 +00:00

9.4 KiB

Raw Blame History

import type { Meta, StoryObj } from '@storybook/react';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Accessible: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible: Story = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

import { Button } from './Button';

export default {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
};

export const Accessible = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

import type { Meta, StoryObj } from '@storybook/react';

import { Button } from './Button';

const meta = {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Accessible: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible: Story = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import Button from './Button.svelte';

  /*
  * Enable accessibility checks for all stories in this component
  * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
  */
  const { Story } = defineMeta({
    component: Button,
    tags: ['a11ytest'],
  });

  const AccessibleArgs = {
    primary: false,
    label: 'Button',
  };
</script>

<Story name="Accessible" args={AccessibleArgs} />

<!-- Turn off accessibility tests for this story using the tag's configuration option -->
<Story
  name="Inaccessible"
  tags={['!a11ytest']}
  args={{
    ...AccessibleArgs,
    backgroundColor: 'red',
  }}
/>

import Button from './Button.svelte';

export default {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
};

export const Accessible = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import Button from './Button.svelte';

  /*
  * Enable accessibility checks for all stories in this component
  * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
  */
  const { Story } = defineMeta({
    component: Button,
    tags: ['a11ytest'],
  });

  const AccessibleArgs = {
    primary: false,
    label: 'Button',
  };
</script>

<Story name="Accessible" args={AccessibleArgs} />

<!-- Turn off accessibility tests for this story using the tag's configuration option -->
<Story
  name="Inaccessible"
  tags={['!a11ytest']}
  args={{
    ...AccessibleArgs,
    backgroundColor: 'red',
  }}
/>

import type { Meta, StoryObj } from '@storybook/svelte';

import Button from './Button.svelte';

const meta = {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Accessible: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible: Story = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';

  import Button from './Button.svelte';

  /*
  * Enable accessibility checks for all stories in this component
  * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
  */
  const { Story } = defineMeta({
    component: Button,
    tags: ['a11ytest'],
  });

  const AccessibleArgs = {
    primary: false,
    label: 'Button',
  };
</script>

<Story name="Accessible" args={AccessibleArgs} />

<!-- Turn off accessibility tests for this story using the tag's configuration option -->
<Story
  name="Inaccessible"
  tags={['!a11ytest']}
  args={{
    ...AccessibleArgs,
    backgroundColor: 'red',
  }}
/>

import type { Meta, StoryObj } from '@storybook/svelte';

import Button from './Button.svelte';

const meta: Meta<typeof Button> = {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Accessible: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible: Story = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

import Button from './Button.vue';

export default {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
};

export const Accessible = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

import type { Meta, StoryObj } from '@storybook/vue3';

import Button from './Button.vue';

const meta = {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Accessible: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible: Story = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

import type { Meta, StoryObj } from '@storybook/vue3';

import Button from './Button.vue';

const meta: Meta<typeof Button> = {
  component: Button,
  /*
   * Enable accessibility checks for all stories in this component
   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
   */
  tags: ['a11ytest'],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Accessible: Story = {
  args: {
    primary: false,
    label: 'Button',
  },
};

export const Inaccessible: Story = {
  // Turn off accessibility tests for this story using the tag's configuration option
  tags: ['!a11ytest'],
  args: {
    ...Accessible.args,
    backgroundColor: 'red',
  },
};

9.4 KiB Raw Blame History

9.4 KiB

Raw Blame History