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

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { TextArea, Form, Container } from 'semantic-ui-react';
+import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
+
+export default {
+  title: 'Components/Forms/Text Area',
+  Component: TextArea,
+  argTypes: {
+    onChange: {
+      action: 'Text Area changed',
+      table: {
+        disable: true,
+      },
+    },
+    onInput: {
+      action: 'Input entered',
+      table: {
+        disable: true,
+      },
+    },
+    placeholder: {
+      description: 'placeholder text',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    rows: {
+      description: 'indicates row count for a TextArea',
+      table: {
+        type: { summary: 'integer' },
+        defaultValue: { summary: 3 },
+      },
+    },
+    fluid: {
+      description:
+        'add/remove class fluid to make the text area take the size of the container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+const Template = ({ label, error, fluid, ...args }) => (
+  <Container>
+    <Form>
+      <FormFieldWrapper
+        label={label}
+        error={error}
+        required={args.required}
+        columns={label ? 1 : 0}
+      >
+        <TextArea {...args} className={fluid ? 'fluid' : null}></TextArea>
+      </FormFieldWrapper>
+    </Form>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Type here...',
+  rows: 3,
+  fluid: false,
+};
+
+export const LabeledTextArea = Template.bind({});
+LabeledTextArea.args = {
+  placeholder: 'Type here...',
+  rows: 3,
+  label: 'Textarea',
+  required: true,
+  fluid: false,
+};
+
+LabeledTextArea.argTypes = {
+  label: {
+    description: 'textarea 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 ErrorTextArea = Template.bind({});
+ErrorTextArea.args = {
+  placeholder: 'Type here...',
+  rows: 3,
+  label: 'Textarea',
+  error: true,
+  required: true,
+  fluid: false,
+};
+
+ErrorTextArea.argTypes = {
+  label: {
+    description: 'textarea 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/Toggle.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Checkbox, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Forms/Toggle',
+  component: Toggle,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    label: {
+      description: 'Label of the toggle',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    name: {
+      description: 'name for the toggle input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    id: {
+      description: 'id for the toggle input, also controls label for attribute',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    disabled: {
+      description: 'controls the state of the toggle',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+function Toggle({ ...args }) {
+  return (
+    <Container>
+      <Checkbox toggle {...args}></Checkbox>
+    </Container>
+  );
+}
+
+const Template = (args) => <Toggle {...args}></Toggle>;
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'example',
+  label: 'Toggle label',
+  name: 'example',
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  id: 'disabled',
+  label: 'Disabled Toggle',
+  name: 'disabled',
+  disabled: true,
+};

package/src/ui/Grid/ComponentGrid.stories.js

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import React from 'react';
+import { Grid, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Layout/Grid/Component Grid',
+  component: Grid,
+  argTypes: {},
+};
+
+const getColumns = (number, text) => {
+  const columns = _.times(number, (i) => (
+    <Grid.Column key={i}>
+      <div className="col-example">{text}</div>
+    </Grid.Column>
+  ));
+
+  return columns;
+};
+
+const getDiv = (text) => {
+  return <div className="col-example">{text}</div>;
+};
+
+export const Basic12 = (args) => <Grid>{getColumns(12, '')}</Grid>;
+
+export const GridExamples = (args) => (
+  <Container>
+    <Grid>
+      <Grid.Row columns="two">{getColumns(2, '12/2')}</Grid.Row>
+      <Grid.Row columns="three">{getColumns(3, '12/3')}</Grid.Row>
+      <Grid.Row>
+        <Grid.Column width="three">{getDiv('12/4')}</Grid.Column>
+        <Grid.Column width="six">{getDiv('12/2')}</Grid.Column>
+        <Grid.Column width="three">{getDiv('12/4')}</Grid.Column>
+      </Grid.Row>
+      <Grid.Row columns="four">{getColumns(4, '12/4')}</Grid.Row>
+      <Grid.Row columns="five">{getColumns(5, '12/5')}</Grid.Row>
+    </Grid>
+  </Container>
+);