<commit_before>import React from 'react';
import { action } from '@storybook/addon-actions';

import { buttonKinds } from '../../prop-types/types';

import { iconAddGlyph, iconSearch } from '@wfp/icons';

import markdown from './README.mdx';
import buttonTwig from './Button.twig';

import Button from '.';

export default {
  title: 'Components/UI Elements/Button',
  component: Button,
  markdown: 'hello',
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    twig: buttonTwig,
  },
};

export const ButtonRegular = (args) => <Button {...args} />;
ButtonRegular.args = {
  children: 'Button',
};

export const ButtonKind = (args) => (
  <>
    {buttonKinds.map((e) => (
      <div
        style={{
          display: 'inline-block',
          background: e === 'inverse' || e === 'inverse--primary' ? '#ccc' : '',
          padding: '0.3rem',
        }}>
        <Button {...args} kind={e}>
          {e}
        </Button>
      </div>
    ))}
  </>
);
ButtonKind.args = {
  children: 'Button',
};

const hello = `
By changing the \`kind\` prop you can use different styles of the button.

| kind   |  Description  |
|----------|-------------|
| \`primary\` | the principle call to action on the page |
| \`secondary\` | secondary actions on each page   |
| \`tertiary\` | simple actions on the page |
| \`accent\` | very important actions and only once or twice on each page |
| \`tertiary\` | simple actions on the page |
| \`danger\` | a negative action (such as Delete) on the page |
| \`danger--primary\` | a negative principle call to action (such as Delete) on the page |
| \`ghost\` | in places where a regular button would draw too much attention and look similar to links |
| \`inverse--primary\` | should be used on dark backgrounds |
| \`inverse\` | should be used on dark backgrounds |
| \`navigation\`| should be only used in the main navigation |
`;

ButtonKind.story = {
  name: 'Button kinds',
  parameters: {
    markdown: 'hello',
    docs: {
      storyDescription: hello,
    },
  },
};<commit_msg>docs(Button): removed duplicate explanation on tertiary button type<commit_after>import React from 'react';
import { action } from '@storybook/addon-actions';

import { buttonKinds } from '../../prop-types/types';

import { iconAddGlyph, iconSearch } from '@wfp/icons';

import markdown from './README.mdx';
import buttonTwig from './Button.twig';

import Button from '.';

export default {
  title: 'Components/UI Elements/Button',
  component: Button,
  markdown: 'hello',
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown,
    twig: buttonTwig,
  },
};

export const ButtonRegular = (args) => <Button {...args} />;
ButtonRegular.args = {
  children: 'Button',
};

export const ButtonKind = (args) => (
  <>
    {buttonKinds.map((e) => (
      <div
        style={{
          display: 'inline-block',
          background: e === 'inverse' || e === 'inverse--primary' ? '#ccc' : '',
          padding: '0.3rem',
        }}>
        <Button {...args} kind={e}>
          {e}
        </Button>
      </div>
    ))}
  </>
);
ButtonKind.args = {
  children: 'Button',
};

const hello = `
By changing the \`kind\` prop you can use different styles of the button.

| kind   |  Description  |
|----------|-------------|
| \`primary\` | the principle call to action on the page |
| \`secondary\` | secondary actions on each page   |
| \`tertiary\` | simple actions on the page |
| \`accent\` | very important actions and only once or twice on each page |
| \`danger\` | a negative action (such as Delete) on the page |
| \`danger--primary\` | a negative principle call to action (such as Delete) on the page |
| \`ghost\` | in places where a regular button would draw too much attention and look similar to links |
| \`inverse--primary\` | should be used on dark backgrounds |
| \`inverse\` | should be used on dark backgrounds |
| \`navigation\`| should be only used in the main navigation |
`;

ButtonKind.story = {
  name: 'Button kinds',
  parameters: {
    markdown: 'hello',
    docs: {
      storyDescription: hello,
    },
  },
};
{'fraction_non_alphanumeric': 0.16417189763399323, 'fraction_numerical': 0.0009657170449058426, 'mean_word_length': 2.7974335472044, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2220118', 'n_tokens_mistral': 1308, 'n_tokens_neox': 1268, 'n_words': 421}