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

package/src/ui/Message/Message.stories.js

@@ -0,0 +1,171 @@
+import React from 'react';
+import { Message, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Message',
+  component: Message,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['mini', 'tiny', 'small', 'large', 'big', 'huge', 'massive'],
+      description: 'message size',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    header: {
+      description: 'message heading',
+      table: {
+        type: {
+          summary: 'custom',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    content: {
+      description: 'message content',
+      table: {
+        type: {
+          summary: 'custom',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Message {...args}></Message>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  header: 'Basic Message',
+  content: 'This is a basic message',
+  size: 'small',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  header: 'Success header',
+  content: 'This is a Success message',
+  icon: 'exclamation circle',
+  success: true,
+  size: 'small',
+};
+
+Success.argTypes = {
+  success: {
+    description: 'message may be formatted to display a positive message',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+Success.parameters = {
+  controls: {
+    exclude: ['icon', 'success'],
+    hideNoControlsWarning: true,
+  },
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  header: 'Warning header',
+  content: 'This is a Warning message',
+  icon: 'exclamation circle',
+  warning: true,
+  size: 'small',
+};
+
+Warning.argTypes = {
+  warning: {
+    description: 'message may be formatted to display warning messages',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+Warning.parameters = {
+  controls: {
+    exclude: ['icon', 'warning'],
+    hideNoControlsWarning: true,
+  },
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  header: 'Error header',
+  content: 'This is an Error Message',
+  icon: 'exclamation circle',
+  error: true,
+  size: 'small',
+};
+Error.argTypes = {
+  error: {
+    description: 'message may be formatted to display an error message',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+Error.parameters = {
+  controls: {
+    exclude: ['icon', 'error'],
+    hideNoControlsWarning: true,
+  },
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  header: 'Info header',
+  content: 'This is an Info message',
+  icon: 'exclamation circle',
+  info: true,
+  size: 'small',
+};
+Info.argTypes = {
+  info: {
+    description: 'message may be formatted to display information',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+Info.parameters = {
+  controls: {
+    exclude: ['icon', 'info'],
+    hideNoControlsWarning: true,
+  },
+};

package/src/ui/Modal/Modal.stories.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'inline-radio' },
+      options: ['mini', 'tiny', 'small', 'large', 'fullscreen'],
+      description: 'modal size',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'large',
+        },
+      },
+    },
+    dimmer: {
+      control: { type: 'select' },
+      options: [true, 'inverted', 'blurring'],
+      description: 'modal background dimmer',
+      table: {
+        type: {
+          summary: 'bool|func|object|enum',
+        },
+        defaultValue: {
+          summary: true,
+        },
+      },
+    },
+    content: {
+      description: 'modal background dimmer',
+      table: {
+        type: {
+          summary: 'custom',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    header: {
+      description: 'modal heading',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    trigger: {
+      description:
+        'Element to be rendered in-place where the portal is defined',
+      table: {
+        type: {
+          summary: 'node',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+function ModalEEA({
+  trigger,
+  header,
+  content,
+  centered = false,
+  size,
+  dimmer = true,
+}) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Modal
+      closeIcon
+      onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
+      open={open}
+      trigger={trigger}
+      centered={centered}
+      size={size}
+      dimmer={dimmer}
+    >
+      <Modal.Header>{header}</Modal.Header>
+      <Modal.Content>
+        <Modal.Description>{content}</Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={() => setOpen(false)}>No</Button>
+        <Button onClick={() => setOpen(false)} primary>
+          Yes
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+const trigger = <Button primary>Show Modal</Button>;
+
+const Template = (args) => <ModalEEA {...args}></ModalEEA>;
+
+export const Default = Template.bind({});
+Default.args = {
+  header: 'Modal Header',
+  content: 'Modal Content',
+  centered: true,
+  size: 'mini',
+  dimmer: true,
+  trigger: trigger,
+};
+
+Default.argTypes = {
+  centered: {
+    description: 'vertically centered in the viewport',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: true,
+      },
+    },
+  },
+};

package/src/ui/Pagination/Pagination.stories.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Pagination, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Pagination',
+  component: Pagination,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    defaultActivePage: {
+      description: 'Initial activePage value',
+      table: {
+        type: {
+          summary: 'number|string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    totalPages: {
+      description: 'total number of pages',
+      table: {
+        type: {
+          summary: 'number|string',
+        },
+        required: true,
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    disabled: {
+      description: 'pagination can be disabled',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    boundaryRange: {
+      description: 'number of always visible pages at the beginning and end',
+      table: {
+        type: {
+          summary: 'number|string',
+        },
+        defaultValue: {
+          summary: 1,
+        },
+      },
+    },
+    siblingRange: {
+      description:
+        'number of always visible pages before and after the current one',
+      table: {
+        type: {
+          summary: 'number|string',
+        },
+        defaultValue: {
+          summary: 1,
+        },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <Container>
+    <Pagination {...args} />
+  </Container>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  defaultActivePage: 5,
+  totalPages: 10,
+  disabled: false,
+  boundaryRange: 1,
+  siblingRange: 1,
+};
+
+// const SecondaryTemplate = (args) => <Pagination pointing secondary {...args} />;
+
+// export const Secondary = SecondaryTemplate.bind({});
+// Secondary.args = {
+//   defaultActivePage: 5,
+//   totalPages: 10,
+//   disabled: false,
+//   boundaryRange: 1,
+//   siblingRange: 1,
+// };

package/src/ui/Progress/Progress.stories.js

@@ -0,0 +1,195 @@
+import React from 'react';
+import { Progress, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Progress',
+  component: Progress,
+  argTypes: {
+    color: {
+      options: [
+        'red',
+        'orange',
+        'yellow',
+        'olive',
+        'green',
+        'teal',
+        'blue',
+        'violet',
+        'purple',
+        'pink',
+        'brown',
+        'grey',
+        'black',
+      ],
+      control: { type: 'select' },
+      description: 'progress bar filling color',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'grey',
+        },
+      },
+    },
+    progress: {
+      description: 'text value indicating current progress',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    children: {
+      description: 'progress bar label',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Progress {...args}></Progress>
+  </Container>
+);
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   percent: 11,
+// };
+
+export const Default = Template.bind({});
+Default.args = {
+  percent: 80,
+  progress: true,
+  children: 'Label',
+};
+Default.parameters = {
+  controls: { exclude: ['color'] },
+  hideNoControlsWarning: true,
+};
+
+Default.argTypes = {
+  percent: {
+    description: 'current percent complete',
+    table: {
+      type: {
+        summary: 'float',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};
+
+// export const ProgressWithRatio = Template.bind({});
+// ProgressWithRatio.args = {
+//   value: 80,
+//   total: 100,
+//   indicating: true,
+//   autoSuccess: true,
+//   progress: 'ratio',
+//   children: 'Label',
+// };
+
+export const ProgressWithValue = Template.bind({});
+ProgressWithValue.args = {
+  value: 80,
+  total: 100,
+  progress: true,
+  indicating: true,
+  children: 'Label',
+};
+ProgressWithValue.parameters = {
+  controls: { exclude: ['color'] },
+  hideNoControlsWarning: true,
+};
+
+ProgressWithValue.argTypes = {
+  value: {
+    description:
+      'For use with total. Together, these will calculate the percent. Mutually excludes percent',
+    table: {
+      type: {
+        summary: 'float',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  total: {
+    description:
+      'For use with value. Together, these will calculate the percent. Mutually excludes percent',
+    table: {
+      type: {
+        summary: 'float',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  indicating: {
+    description: 'visually indicates the current level of progress of a task',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+
+export const CustomColor = (args) => (
+  <Container>
+    <Progress {...args}></Progress>
+  </Container>
+);
+CustomColor.args = {
+  value: 80,
+  total: 100,
+  progress: true,
+  children: 'Label',
+  color: 'green',
+};
+
+CustomColor.argTypes = {
+  value: {
+    description:
+      'For use with total. Together, these will calculate the percent. Mutually excludes percent',
+    table: {
+      type: {
+        summary: 'float',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  total: {
+    description:
+      'For use with value. Together, these will calculate the percent. Mutually excludes percent',
+    table: {
+      type: {
+        summary: 'float',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};