@sula-tech/webcomponents 0.1.0 → 0.2.0

package/dist/collection/components/sula-textfield/sula-textfield.stories.js

@@ -0,0 +1,148 @@
+import { SulaTextfieldStatus, SulaTextfieldType } from "./model/sula-textfield.model";
+export default {
+    title: 'Components/sula-textfield',
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            defaultValue: '',
+            description: 'Value for the input',
+            type: {
+                required: false,
+            },
+        },
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaTextfieldType),
+            defaultValue: SulaTextfieldType.Text,
+            description: 'The textfield type',
+            type: {
+                required: false,
+            },
+        },
+        status: {
+            control: { type: 'select' },
+            options: Object.values(SulaTextfieldStatus),
+            defaultValue: SulaTextfieldStatus.Default,
+            description: 'The textfield status',
+            type: {
+                required: false,
+            },
+        },
+        label: {
+            control: 'text',
+            defaultValue: 'Label',
+            description: 'The textfield label',
+            type: {
+                required: false,
+            },
+        },
+        placeholder: {
+            control: 'text',
+            defaultValue: 'Placeholder',
+            description: 'The textfield placeholder',
+            type: {
+                required: false,
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'The textfield is disabled',
+            type: {
+                required: false,
+            },
+        },
+        helpText: {
+            control: 'text',
+            defaultValue: '',
+            description: 'The help text for textfield',
+            type: {
+                required: false,
+            },
+        },
+        maxLength: {
+            control: 'number',
+            defaultValue: 0,
+            description: 'The textfield max length',
+            type: {
+                required: false,
+            },
+        },
+        icon: {
+            control: 'text',
+            defaultValue: '',
+            description: 'The textfield icon',
+            type: {
+                required: false,
+            },
+        },
+        valueChanged: {
+            action: 'valueChanged',
+            description: 'Evento emitido quando o valor muda',
+        },
+        focusedOn: {
+            action: 'focusedOn',
+            description: 'Evento emitido quando o campo recebe foco',
+        },
+        focusedOut: {
+            action: 'focusedOut',
+            description: 'Evento emitido quando o campo perde foco',
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.maxWidth = '400px';
+    container.style.margin = '20px';
+    const el = document.createElement('sula-textfield');
+    if (args.value)
+        el.setAttribute('value', args.value);
+    el.setAttribute('type', args.type);
+    el.setAttribute('status', args.status);
+    el.setAttribute('label', args.label);
+    el.setAttribute('placeholder', args.placeholder);
+    el.setAttribute('disabled', args.disabled.toString());
+    if (args.helpText)
+        el.setAttribute('help-text', args.helpText);
+    if (args.maxLength > 0)
+        el.setAttribute('max-length', args.maxLength.toString());
+    if (args.icon)
+        el.setAttribute('icon', args.icon);
+    el.addEventListener('valueChanged', args.valueChanged);
+    el.addEventListener('focusedOn', args.focusedOn);
+    el.addEventListener('focusedOut', args.focusedOut);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    value: '',
+    type: SulaTextfieldType.Text,
+    status: SulaTextfieldStatus.Default,
+    label: 'Nome',
+    placeholder: 'Digite seu nome',
+    disabled: false,
+    helpText: '',
+    maxLength: 0,
+    icon: '',
+};
+export const WithValue = Template.bind({});
+WithValue.args = Object.assign(Object.assign({}, Default.args), { value: 'John Doe', label: 'Nome completo' });
+export const WithHelpText = Template.bind({});
+WithHelpText.args = Object.assign(Object.assign({}, Default.args), { label: 'E-mail', placeholder: 'Digite seu e-mail', helpText: 'Informe um e-mail válido' });
+export const WithMaxLength = Template.bind({});
+WithMaxLength.args = Object.assign(Object.assign({}, Default.args), { label: 'Descrição', placeholder: 'Digite uma descrição', maxLength: 100, helpText: 'Máximo de 100 caracteres' });
+export const WithIcon = Template.bind({});
+WithIcon.args = Object.assign(Object.assign({}, Default.args), { label: 'Pesquisar', placeholder: 'Digite sua busca', icon: 'ph ph-magnifying-glass' });
+export const Password = Template.bind({});
+Password.args = Object.assign(Object.assign({}, Default.args), { type: SulaTextfieldType.Password, label: 'Senha', placeholder: 'Digite sua senha' });
+export const Error = Template.bind({});
+Error.args = Object.assign(Object.assign({}, Default.args), { status: SulaTextfieldStatus.Error, label: 'E-mail', placeholder: 'Digite seu e-mail', helpText: 'E-mail inválido' });
+export const Disabled = Template.bind({});
+Disabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true, label: 'Campo desabilitado' });
+export const WithIconAndHelpText = Template.bind({});
+WithIconAndHelpText.args = Object.assign(Object.assign({}, Default.args), { label: 'Endereço', placeholder: 'Digite seu endereço', icon: 'ph ph-map-pin', helpText: 'Informe o endereço completo' });
+export const ErrorWithMaxLength = Template.bind({});
+ErrorWithMaxLength.args = Object.assign(Object.assign({}, Default.args), { status: SulaTextfieldStatus.Error, label: 'Mensagem', placeholder: 'Digite sua mensagem', maxLength: 50, helpText: 'Excedeu o limite de caracteres', value: 'Esta é uma mensagem de teste que excede o limite de caracteres permitido' });
+//# sourceMappingURL=sula-textfield.stories.js.map

package/dist/collection/components/sula-textfield/sula-textfield.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-textfield.stories.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\nexport default {\n  title: 'Components/sula-textfield',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: 'text',\n      defaultValue: '',\n      description: 'Value for the input',\n      type: {\n        required: false,\n      },\n    },\n    type: {\n      control: { type: 'select' },\n      options: Object.values(SulaTextfieldType),\n      defaultValue: SulaTextfieldType.Text,\n      description: 'The textfield type',\n      type: {\n        required: false,\n      },\n    },\n    status: {\n      control: { type: 'select' },\n      options: Object.values(SulaTextfieldStatus),\n      defaultValue: SulaTextfieldStatus.Default,\n      description: 'The textfield status',\n      type: {\n        required: false,\n      },\n    },\n    label: {\n      control: 'text',\n      defaultValue: 'Label',\n      description: 'The textfield label',\n      type: {\n        required: false,\n      },\n    },\n    placeholder: {\n      control: 'text',\n      defaultValue: 'Placeholder',\n      description: 'The textfield placeholder',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'The textfield is disabled',\n      type: {\n        required: false,\n      },\n    },\n    helpText: {\n      control: 'text',\n      defaultValue: '',\n      description: 'The help text for textfield',\n      type: {\n        required: false,\n      },\n    },\n    maxLength: {\n      control: 'number',\n      defaultValue: 0,\n      description: 'The textfield max length',\n      type: {\n        required: false,\n      },\n    },\n    icon: {\n      control: 'text',\n      defaultValue: '',\n      description: 'The textfield icon',\n      type: {\n        required: false,\n      },\n    },\n    valueChanged: {\n      action: 'valueChanged',\n      description: 'Evento emitido quando o valor muda',\n    },\n    focusedOn: {\n      action: 'focusedOn',\n      description: 'Evento emitido quando o campo recebe foco',\n    },\n    focusedOut: {\n      action: 'focusedOut',\n      description: 'Evento emitido quando o campo perde foco',\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.maxWidth = '400px';\n  container.style.margin = '20px';\n\n  const el = document.createElement('sula-textfield');\n\n  if (args.value) el.setAttribute('value', args.value);\n  el.setAttribute('type', args.type);\n  el.setAttribute('status', args.status);\n  el.setAttribute('label', args.label);\n  el.setAttribute('placeholder', args.placeholder);\n  el.setAttribute('disabled', args.disabled.toString());\n\n  if (args.helpText) el.setAttribute('help-text', args.helpText);\n  if (args.maxLength > 0) el.setAttribute('max-length', args.maxLength.toString());\n  if (args.icon) el.setAttribute('icon', args.icon);\n\n  el.addEventListener('valueChanged', args.valueChanged);\n  el.addEventListener('focusedOn', args.focusedOn);\n  el.addEventListener('focusedOut', args.focusedOut);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  value: '',\n  type: SulaTextfieldType.Text,\n  status: SulaTextfieldStatus.Default,\n  label: 'Nome',\n  placeholder: 'Digite seu nome',\n  disabled: false,\n  helpText: '',\n  maxLength: 0,\n  icon: '',\n};\n\nexport const WithValue = Template.bind({});\nWithValue.args = {\n  ...Default.args,\n  value: 'John Doe',\n  label: 'Nome completo',\n};\n\nexport const WithHelpText = Template.bind({});\nWithHelpText.args = {\n  ...Default.args,\n  label: 'E-mail',\n  placeholder: 'Digite seu e-mail',\n  helpText: 'Informe um e-mail válido',\n};\n\nexport const WithMaxLength = Template.bind({});\nWithMaxLength.args = {\n  ...Default.args,\n  label: 'Descrição',\n  placeholder: 'Digite uma descrição',\n  maxLength: 100,\n  helpText: 'Máximo de 100 caracteres',\n};\n\nexport const WithIcon = Template.bind({});\nWithIcon.args = {\n  ...Default.args,\n  label: 'Pesquisar',\n  placeholder: 'Digite sua busca',\n  icon: 'ph ph-magnifying-glass',\n};\n\nexport const Password = Template.bind({});\nPassword.args = {\n  ...Default.args,\n  type: SulaTextfieldType.Password,\n  label: 'Senha',\n  placeholder: 'Digite sua senha',\n};\n\nexport const Error = Template.bind({});\nError.args = {\n  ...Default.args,\n  status: SulaTextfieldStatus.Error,\n  label: 'E-mail',\n  placeholder: 'Digite seu e-mail',\n  helpText: 'E-mail inválido',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n  label: 'Campo desabilitado',\n};\n\nexport const WithIconAndHelpText = Template.bind({});\nWithIconAndHelpText.args = {\n  ...Default.args,\n  label: 'Endereço',\n  placeholder: 'Digite seu endereço',\n  icon: 'ph ph-map-pin',\n  helpText: 'Informe o endereço completo',\n};\n\nexport const ErrorWithMaxLength = Template.bind({});\nErrorWithMaxLength.args = {\n  ...Default.args,\n  status: SulaTextfieldStatus.Error,\n  label: 'Mensagem',\n  placeholder: 'Digite sua mensagem',\n  maxLength: 50,\n  helpText: 'Excedeu o limite de caracteres',\n  value: 'Esta é uma mensagem de teste que excede o limite de caracteres permitido',\n};\n"]}

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-d3ba6302.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-ca146b16.js';
 
 //# sourceMappingURL=index.js.map