@eeacms/volto-eea-design-system 0.9.5 → 1.0.0-alpha.2

package/src/ui/Form/Dropdown.stories.js

@@ -0,0 +1,183 @@
+import React from 'react';
+import { Dropdown, Form, Container } from 'semantic-ui-react';
+import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
+
+export default {
+  title: 'Components/Forms/Dropdown',
+  component: Dropdown,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    placeholder: {
+      description: 'placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    options: {
+      description: 'Array of dropdown options',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const listOptions = [
+  {
+    key: 'Item 1',
+    text: 'Item 1',
+    value: 'Item 1',
+  },
+  {
+    key: 'Item 2',
+    text: 'Item 2',
+    value: 'Item 2',
+  },
+  {
+    key: 'Item 3',
+    text: 'Item 3',
+    value: 'Item 3',
+  },
+  {
+    key: 'Item 4',
+    text: 'Item 4',
+    value: 'Item 4',
+  },
+  {
+    key: 'Item 5',
+    text: 'Item 5',
+    value: 'Item 5',
+  },
+];
+
+const Template = ({ label, error, ...args }) => (
+  <Container>
+    <Form>
+      <FormFieldWrapper
+        label={label}
+        error={error}
+        required={args.required}
+        columns={label ? 1 : 0}
+      >
+        <Dropdown selection {...args} aria-label="item"></Dropdown>
+      </FormFieldWrapper>
+    </Form>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Select Option',
+  options: listOptions,
+};
+export const Playground = Template.bind({});
+Playground.args = {
+  placeholder: 'Select Option',
+  options: listOptions,
+  label: 'Dropdown',
+  required: true,
+  search: false,
+  disabled: false,
+  fluid: false,
+};
+
+Playground.argTypes = {
+  search: {
+    description: ' search through a large list of choice',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  disabled: {
+    description: 'disable dropdown',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  fluid: {
+    description: 'takes the full width of its parent',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  label: {
+    description: 'dropdown label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  required: {
+    description: 'a field can show that is mandatory',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export const ErrorDropdown = Template.bind({});
+ErrorDropdown.args = {
+  placeholder: 'Select Option',
+  options: listOptions,
+  label: 'Dropdown',
+  error: true,
+  required: true,
+  search: false,
+  disabled: false,
+  fluid: false,
+};
+
+ErrorDropdown.argTypes = {
+  search: {
+    description: ' search through a large list of choice',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  disabled: {
+    description: 'disable dropdown',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  fluid: {
+    description: 'takes the full width of its parent',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  label: {
+    description: 'dropdown label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  required: {
+    description: 'a field can show that is mandatory',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  error: {
+    description: 'display error message along with message',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: '' },
+    },
+  },
+};

package/src/ui/Form/FileUpload.stories.js

@@ -0,0 +1,46 @@
+// import { injectIntl } from 'react-intl';
+// import React from 'react';
+// import { Input, Form, Message } from 'semantic-ui-react';
+// //import * as CheckboxStories from './Checkbox.stories'
+
+// export default {
+//   title: 'Components/Forms/File Upload',
+//   component: Form,
+//   argTypes: {
+//     size: {
+//       control: {
+//         type: 'select',
+//         options: ['mini', 'small', 'large', 'big', 'huge'],
+//       },
+//     },
+//   },
+// };
+
+// const Template = (args) => (
+//   <Form {...args}>
+//     {(args.success || args.error || args.warning) && (
+//       <Message {...args} header="Message Header" content="Message Content" />
+//     )}
+//     <Form.Field>
+//       <Input type="file" {...args}></Input>
+//     </Form.Field>
+//   </Form>
+// );
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   size: 'large',
+//   multiple: false,
+//   success: false,
+//   error: false,
+//   warning: false,
+// };
+
+// export const Multiple = Template.bind({});
+// Multiple.args = {
+//   size: 'large',
+//   multiple: true,
+//   success: false,
+//   error: false,
+//   warning: false,
+// };

package/src/ui/Form/Input.stories.js

@@ -0,0 +1,219 @@
+import React from 'react';
+import { Input, Form, Container } from 'semantic-ui-react';
+import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
+
+export default {
+  title: 'Components/Forms/Input',
+  component: Input,
+  argTypes: {
+    type: {
+      control: {
+        type: 'select',
+        options: ['text', 'date', 'email', 'number', 'password', 'file'],
+      },
+      description: 'input type',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'text' },
+      },
+    },
+    onChange: {
+      action: 'input changed',
+      table: {
+        disable: true,
+      },
+    },
+    onFocus: {
+      action: 'input focus',
+      table: {
+        disable: true,
+      },
+    },
+    placeholder: {
+      description: 'placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    fluid: {
+      description: 'take on the size of its container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    required: {
+      description: 'form field is required',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+const Template = ({ label, error, ...rest }) => (
+  <Container>
+    <Form>
+      <FormFieldWrapper
+        error={error}
+        label={label}
+        required={rest.required}
+        columns={label ? 1 : 0}
+      >
+        <Input {...rest} id="temp-id" />
+      </FormFieldWrapper>
+    </Form>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Placeholder',
+  type: 'text',
+  fluid: false,
+  required: false,
+};
+
+export const StandardInput = Template.bind({});
+StandardInput.args = {
+  label: 'Input label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  fluid: false,
+  required: false,
+};
+
+StandardInput.argTypes = {
+  label: {
+    description: 'input label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  required: {
+    description: 'a field can show that is mandatory',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export const DisabledInput = Template.bind({});
+DisabledInput.args = {
+  label: 'Input label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  disabled: true,
+  fluid: false,
+  required: false,
+};
+DisabledInput.argTypes = {
+  fluid: {
+    description: 'take on the size of its container',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  label: {
+    description: 'input label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  required: {
+    description: 'a field can show that is mandatory',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};
+DisabledInput.argTypes = {
+  disabled: {
+    description: 'disabled',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: true },
+    },
+  },
+  label: {
+    description: 'input label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+};
+
+export const LoadingInput = Template.bind({});
+LoadingInput.args = {
+  label: 'Input label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  loading: true,
+  fluid: false,
+  required: false,
+};
+LoadingInput.argTypes = {
+  loading: {
+    label: 'Input label',
+    description: 'show that it is currently loading data',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: true },
+    },
+  },
+  label: {
+    description: 'input label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  required: {
+    description: 'a field can show that is mandatory',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+export const ErrorInput = Template.bind({});
+ErrorInput.args = {
+  label: 'Input label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  error: true,
+  fluid: false,
+  required: false,
+};
+ErrorInput.argTypes = {
+  error: {
+    description: 'show the data contains errors',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: true },
+    },
+  },
+  label: {
+    description: 'input label',
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  required: {
+    description: 'a field can show that is mandatory',
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+};

package/src/ui/Form/Radio.stories.js

@@ -0,0 +1,256 @@
+import React, { useState } from 'react';
+import { Radio, Form, Message, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Forms/Radio',
+  component: Radio,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    onChange: {
+      action: 'checkbox value changed',
+      table: {
+        disable: true,
+      },
+    },
+    label: {
+      description: 'Label of the form group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    helperText: {
+      description: 'Helper text of the form group',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    errorMessage: {
+      description:
+        'Message to be shown in case of an invalid input by the user',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    optionalText: {
+      description: 'Text to be shown when the form group is optional',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' (optional) ' },
+      },
+    },
+    requiredText: {
+      description: 'Text to be shown when the form group is required',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' * ' },
+      },
+    },
+    required: {
+      description: 'Sets the required attribute on the form group',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    invalid: {
+      description: 'Marks the form group as invalid',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+function RadioForm({
+  label,
+  helperText,
+  errorMessage,
+  optionalText,
+  requiredText,
+  invalid,
+  required,
+}) {
+  const [active, setActive] = useState();
+
+  const handleChange = (e, { value }) => setActive(value);
+  return (
+    <Container>
+      <Form>
+        <Form.Field>
+          {label}
+          {required ? (
+            <span style={{ color: 'red' }}>{requiredText}</span>
+          ) : (
+            <span>{optionalText}</span>
+          )}
+        </Form.Field>
+        <Form.Field>{helperText}</Form.Field>
+        {invalid ? (
+          <Message icon="exclamation circle" content={errorMessage} negative />
+        ) : null}
+        <Form.Field error={invalid}>
+          <Radio
+            label="Option 1"
+            name="radioGroup"
+            value="1"
+            checked={active === '1'}
+            onChange={handleChange}
+            id="field1"
+          ></Radio>
+          <label htmlFor="field1">Helper text for option 1</label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Radio
+            label="Option 2"
+            name="radioGroup"
+            value="2"
+            checked={active === '2'}
+            onChange={handleChange}
+            id="field2"
+          ></Radio>
+          <label htmlFor="field2">Helper text for option 2</label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Radio
+            label="Option 3 (disabled)"
+            disabled
+            name="radioGroup"
+            value="3"
+            checked={active === '3'}
+            onChange={handleChange}
+            id="field3"
+          ></Radio>
+          <label htmlFor="field3">Helper text for option 3</label>
+        </Form.Field>
+      </Form>
+    </Container>
+  );
+}
+
+function Binary({
+  label,
+  helperText,
+  errorMessage,
+  optionalText,
+  requiredText,
+  invalid,
+  required,
+}) {
+  const [active, setActive] = useState();
+
+  const handleChange = (e, { value }) => setActive(value);
+  return (
+    <Container>
+      <Form>
+        <Form.Field>
+          {label}
+          {required ? (
+            <span style={{ color: 'red' }}>{requiredText}</span>
+          ) : (
+            <span>{optionalText}</span>
+          )}
+        </Form.Field>
+        <Form.Field>{helperText}</Form.Field>
+
+        {invalid ? (
+          <Message header="Error Message" content={errorMessage} negative />
+        ) : null}
+        <Form.Field error={invalid}>
+          <Radio
+            label="Yes"
+            name="radioGroup"
+            value="yes"
+            checked={active === 'yes'}
+            onChange={handleChange}
+            id="radio-yes"
+          ></Radio>
+          <label htmlFor="radio-yes"> </label>
+        </Form.Field>
+        <Form.Field error={invalid}>
+          <Radio
+            label="No"
+            name="radioGroup"
+            value="no"
+            checked={active === 'no'}
+            onChange={handleChange}
+            id="radio-no"
+          ></Radio>
+          <label htmlFor="radio-no"> </label>
+        </Form.Field>
+      </Form>
+    </Container>
+  );
+}
+
+const Template = (args) => <RadioForm {...args}></RadioForm>;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Select your preferred options',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: false,
+  required: true,
+};
+
+export const invalid = Template.bind({});
+invalid.args = {
+  label: 'Select your preferred options',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: true,
+  required: true,
+};
+
+invalid.argTypes = {
+  invalid: {
+    table: {
+      defaultValue: { summary: true },
+    },
+  },
+};
+
+export const BinaryRadio = (args) => <Binary {...args}></Binary>;
+BinaryRadio.args = {
+  label: 'Do you need help?',
+  helperText: 'Helper text for the group',
+  errorMessage: 'Error message for the group',
+  optionalText: ' (optional)',
+  requiredText: '*',
+  invalid: false,
+  required: false,
+};
+
+BinaryRadio.argTypes = {
+  required: {
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+};
+
+BinaryRadio.storyName = 'Binary';
+
+// export const BinaryInvalid = (args) => <Binary {...args}></Binary>;
+// BinaryInvalid.args = {
+//   label: 'Do you need help?',
+//   helperText: 'Helper text for the group',
+//   errorMessage: 'Error message for the group',
+//   optionalText: ' (optional)',
+//   requiredText: '*',
+//   invalid: true,
+//   required: true,
+// };
+// BinaryInvalid.storyName = 'Binary Invalid';