design-system-govbr-rnp/dist/utilities/Checkboxgroup/CheckBoxGroup.stories.js

## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.StatesCheck = exports.InlineCheck = exports.IndeterminateCheck = exports.DefaultCheck = exports.CompleteCheck = exports.CheckNoLabel = void 0;
var _react = _interopRequireDefault(require("react"));
var _Checkboxgroup = _interopRequireDefault(require("./Checkboxgroup"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = {
  title: 'Utilities/JS/CheckboxGroup',
  component: _Checkboxgroup.default,
  argTypes: {
    feedback: {
      name: 'feedback',
      type: {
        name: 'string',
        required: false
      },
      description: 'Mensagem de feedback',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'text'
      }
    },
    indeterminate: {
      name: 'Indeterminate',
      type: {
        name: 'boolean',
        required: false
      },
      description: 'Aplica checkbox com estado intermediário',
      table: {
        type: {
          summary: 'boolean'
        }
      },
      control: {
        type: 'boolean'
      }
    },
    info: {
      name: 'Info',
      type: {
        name: 'string',
        required: false
      },
      description: 'Informações Adicionais',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'text'
      }
    },
    inline: {
      name: 'Inline',
      type: {
        name: 'boolean',
        required: false
      },
      description: 'Aplica checkbox com listagem horizontal',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'text'
      }
    },
    options: {
      description: 'Array que recebe objetos de configuração de cada checkbox'
    },
    title: {
      name: 'Rotulo',
      type: {
        name: 'string',
        required: false
      },
      description: 'Rotulo',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'text'
      }
    },
    onChange: {
      name: 'onChange',
      description: 'Função chamada retornando o evento de mudança do elemento'
    }
  }
};
exports.default = _default;
var Template = function Template(args) {
  return /*#__PURE__*/_react.default.createElement(_Checkboxgroup.default, args);
};
var CompleteCheck = Template.bind({});
exports.CompleteCheck = CompleteCheck;
CompleteCheck.storyName = 'Exemplo Completo';
CompleteCheck.args = {
  title: 'Rótulo',
  info: 'Informações adicionais',
  options: [{
    id: '1',
    name: 'opcao1',
    label: 'Opção 1',
    ariaLabel: 'padrao',
    value: '1'
  }, {
    id: '2',
    name: 'opcao2',
    label: 'Opção 2',
    ariaLabel: 'padrao',
    value: '2'
  }, {
    id: '3',
    name: 'opcao3',
    label: 'Opção 3',
    ariaLabel: 'padrao',
    value: '3'
  }],
  feedback: {
    type: 'warn',
    message: 'Texto da mensagem'
  }
};
var DefaultCheck = Template.bind({});
exports.DefaultCheck = DefaultCheck;
DefaultCheck.storyName = 'Checkbox padrão';
DefaultCheck.args = {
  options: [{
    id: '1',
    name: 'teste',
    label: 'Opção 1',
    value: '1'
  }]
};
var CheckNoLabel = Template.bind({});
exports.CheckNoLabel = CheckNoLabel;
CheckNoLabel.storyName = 'Checkbox sem label';
CheckNoLabel.args = {
  options: [{
    id: '1',
    name: 'teste',
    label: 'Opção 1',
    hidden: true,
    value: '1'
  }]
};
var InlineCheck = Template.bind({});
exports.InlineCheck = InlineCheck;
InlineCheck.storyName = 'Listagem Horizontal';
InlineCheck.args = {
  inline: true,
  options: [{
    id: '1',
    name: 'opcao1',
    label: 'Opção 1',
    ariaLabel: 'padrao',
    value: '1'
  }, {
    id: '2',
    name: 'opcao2',
    label: 'Opção 2',
    ariaLabel: 'padrao',
    value: '2'
  }, {
    id: '3',
    name: 'opcao3',
    label: 'Opção 3',
    ariaLabel: 'padrao',
    value: '3'
  }]
};
var StatesCheck = Template.bind({});
exports.StatesCheck = StatesCheck;
StatesCheck.storyName = 'Estados';
StatesCheck.args = {
  options: [{
    id: '1',
    name: 'desabilitado',
    label: 'desabilitado',
    ariaLabel: 'padrao',
    disabled: true,
    value: '1'
  }, {
    id: '2',
    name: 'invalido',
    label: 'Inválido',
    ariaLabel: 'padrao',
    state: 'invalid',
    value: '2'
  }, {
    id: '3',
    name: 'valido',
    label: 'Válido',
    ariaLabel: 'padrao',
    state: 'valid',
    value: '3'
  }],
  feedback: {
    type: 'error',
    message: 'Preenchimento Obrigatório'
  }
};
var IndeterminateCheck = Template.bind({});
exports.IndeterminateCheck = IndeterminateCheck;
IndeterminateCheck.storyName = 'Com estado intermediário';
IndeterminateCheck.args = {
  indeterminate: true,
  options: [{
    id: '1',
    name: 'opcao1',
    label: 'Opção 1',
    ariaLabel: 'padrao',
    value: '1'
  }, {
    id: '2',
    name: 'opcao2',
    label: 'Opção 2',
    ariaLabel: 'padrao',
    value: '2'
  }, {
    id: '3',
    name: 'opcao3',
    label: 'Opção 3',
    ariaLabel: 'padrao',
    value: '3'
  }],
  selectAllOptions: {
    label: 'Selecionar Tudo'
  }
};