@eeacms/volto-eea-design-system 0.2.1

package/src/ui/Header/Header.jsx

@@ -0,0 +1,224 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react'; // , { Component }
+import cx from 'classnames';
+import { Container, Image, Menu, Grid, Dropdown } from 'semantic-ui-react'; // Dropdown,
+
+import closeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/close-line.svg';
+import searchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/menu-line.svg';
+
+import HeaderSearchPopUp from './HeaderSearchPopUp';
+import HeaderMenuPopUp from './HeaderMenuPopUp';
+
+function Header({ children }) {
+  return <div className="eea header">{children}</div>;
+}
+
+const TopHeader = ({ children }) => (
+  <div className="top bar">
+    <Container>{children}</Container>
+  </div>
+);
+
+const TopItem = ({ children, className, id }) => (
+  <div className={cx('item', 'header-top-item', className)} id={id}>
+    {children}
+  </div>
+);
+
+const TopDropdownMenu = ({
+  children,
+  className,
+  icon,
+  id,
+  mobileText,
+  text,
+  viewportWidth,
+}) => {
+  const isMobile = viewportWidth < 480;
+
+  const Component = ({ mobileText }) => (
+    <Dropdown
+      id={id}
+      className={className}
+      text={mobileText || text}
+      icon={icon || 'chevron down'}
+      aria-label="dropdown"
+    >
+      <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+    </Dropdown>
+  );
+  return (
+    <>{isMobile ? <Component mobileText={mobileText} /> : <Component />}</>
+  );
+};
+
+const Main = ({
+  logo,
+  menuItems,
+  renderMenuItem,
+  renderGlobalMenuItem,
+  pathname,
+}) => {
+  const [activeItem, setActiveItem] = React.useState('');
+  const [menuIsActive, setMenuIsActive] = React.useState(false);
+  const [searchIsActive, setSearchIsActive] = React.useState(false);
+  const [burger, setBurger] = React.useState('');
+
+  React.useEffect(() => {
+    setMenuIsActive(false);
+    setSearchIsActive(false);
+    setBurger('');
+  }, [pathname]);
+
+  const searchOnClick = (e, x) => {
+    if (menuIsActive === true) {
+      setBurger('');
+      setMenuIsActive(false);
+    }
+    setSearchIsActive(!searchIsActive);
+    setActiveItem('');
+  };
+
+  const mobileBurgerOnClick = () => {
+    if (searchIsActive === true) {
+      setSearchIsActive(false);
+    }
+
+    if (burger === '') {
+      setBurger('open');
+      setMenuIsActive(true);
+    } else {
+      setBurger('');
+      setMenuIsActive(false);
+    }
+  };
+
+  const desktopBurgerOnClick = () => {
+    setMenuIsActive(false);
+    setActiveItem('');
+  };
+
+  const menuOnClick = (e, item) => {
+    if (searchIsActive) setSearchIsActive(false);
+    setActiveItem(item['@id'] || item.url);
+    setMenuIsActive(true);
+  };
+
+  React.useEffect(() => {
+    if (searchIsActive || burger === 'open' || menuIsActive) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+  }, [searchIsActive, burger, menuIsActive]);
+
+  const node = React.useRef();
+  const searchButtonRef = React.useRef();
+  const desktopMenuBurgerRef = React.useRef();
+  const mobileMenuBurgerRef = React.useRef();
+
+  return (
+    <div className="main bar" ref={node}>
+      <Container>
+        <Grid>
+          <Grid.Column mobile={8} tablet={8} computer={4}>
+            {logo}
+          </Grid.Column>
+          <Grid.Column mobile={4} tablet={4} computer={8}>
+            <div className="main-menu">
+              {!menuIsActive && menuItems && (
+                <Menu className="eea-main-menu tablet or lower hidden" text>
+                  {menuItems.map((item) => (
+                    <Menu.Item
+                      name={item['@id'] || item.url}
+                      active={activeItem === item.key}
+                      key={item['@id'] || item.url}
+                    >
+                      {renderGlobalMenuItem(item, {
+                        onClick: menuOnClick,
+                      })}
+                    </Menu.Item>
+                  ))}
+                </Menu>
+              )}
+              {menuIsActive && (
+                <Header.BurgerAction
+                  className="desktop"
+                  onClick={desktopBurgerOnClick}
+                  ref={desktopMenuBurgerRef}
+                >
+                  {/* <Icon name="close" /> */}
+                  <Image src={closeIcon} alt="menu close icon" />
+                </Header.BurgerAction>
+              )}
+              <div
+                className="search-action"
+                onClick={searchOnClick}
+                role="none"
+                ref={searchButtonRef}
+              >
+                {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
+                <Image
+                  src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
+                  alt="search button open/close"
+                />
+              </div>
+              <Header.BurgerAction
+                className={`mobile ${burger}`}
+                onClick={mobileBurgerOnClick}
+                ref={mobileMenuBurgerRef}
+              >
+                {/* <Icon
+                  name={this.state.burger === 'open' ? 'close' : 'bars'}
+                ></Icon> */}
+                <Image
+                  src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
+                  alt="menu icon open/close"
+                />
+              </Header.BurgerAction>
+            </div>
+          </Grid.Column>
+        </Grid>
+      </Container>
+      {searchIsActive && (
+        <HeaderSearchPopUp
+          onClose={searchOnClick}
+          triggerRefs={[searchButtonRef]}
+        />
+      )}
+      {menuIsActive && (
+        <HeaderMenuPopUp
+          renderMenuItem={renderMenuItem}
+          activeItem={activeItem}
+          menuItems={menuItems}
+          onClose={mobileBurgerOnClick}
+          triggerRefs={[mobileMenuBurgerRef, desktopMenuBurgerRef]}
+        />
+      )}
+    </div>
+  );
+};
+
+const BurgerAction = React.forwardRef((props, ref) => (
+  <div
+    ref={ref}
+    className={`burger-action ${props.className}`}
+    role="none"
+    onClick={props.onClick}
+  >
+    {props.children}
+  </div>
+));
+
+Header.BurgerAction = BurgerAction;
+Header.Main = Main;
+Header.TopDropdownMenu = TopDropdownMenu;
+Header.TopHeader = TopHeader;
+Header.TopItem = TopItem;
+
+export default Header;

package/src/ui/Header/HeaderMenuPopUp.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import cx from 'classnames';
+
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+
+const levels = ['first', 'second', 'third'];
+
+const Item = ({ item, renderMenuItem }) => (
+  <>
+    {item.items.length > 0 && (
+      <label htmlFor={`drop-${item['@id'] || item.url}`} className="toggle">
+        {item.title}
+      </label>
+    )}
+    {renderMenuItem(item)}
+    {item.items.length > 0 && (
+      <input type="checkbox" id={`drop-${item['@id'] || item.url}`} />
+    )}
+  </>
+);
+
+const ItemsList = ({ items, renderMenuItem, level = 0, activeItem }) => (
+  <ul
+    className={cx(
+      level === 0 ? 'menu' : 'sub',
+      levels[level],
+      `level-${level}`,
+    )}
+  >
+    {items.map((item) => (
+      <li
+        key={item['@id'] || item.url}
+        className={cx({
+          hasSubMenu: item.items?.length > 0,
+          active: (item['@id'] || item.url) === activeItem,
+        })}
+      >
+        <Item item={item} renderMenuItem={renderMenuItem} />
+
+        {item.items.length > 0 && (
+          <ItemsList
+            items={item.items}
+            level={level + 1}
+            renderMenuItem={renderMenuItem}
+            activeItem={activeItem}
+          />
+        )}
+      </li>
+    ))}
+  </ul>
+);
+
+function HeaderMenuPopUp({
+  menuItems,
+  onClose,
+  triggerRefs,
+  renderMenuItem,
+  activeItem,
+}) {
+  const nodeRef = React.useRef();
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  return (
+    <div id="mega-menu" ref={nodeRef}>
+      <Container>
+        <nav>
+          <ItemsList
+            items={menuItems}
+            renderMenuItem={renderMenuItem}
+            activeItem={activeItem}
+          />
+        </nav>
+      </Container>
+    </div>
+  );
+}
+
+export default HeaderMenuPopUp;

package/src/ui/Header/HeaderSearchPopUp.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Container, Input, Button, Icon } from 'semantic-ui-react';
+
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+
+function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
+  const nodeRef = React.useRef();
+
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  return (
+    <div id="search-box" ref={nodeRef}>
+      <Container>
+        <div className="wrapper">
+          <Input
+            className="search"
+            icon="search"
+            placeholder="Search..."
+            fluid
+          />
+          <div className="action">
+            <Button icon labelPosition="left" className="search">
+              <Icon name="search" />
+              Advanced Search
+            </Button>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+export default HeaderSearchPopUp;

package/src/ui/InpageNavigation/InpageNavigation.jsx

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import { Container, Icon } from 'semantic-ui-react';
+
+class InpageNavigation extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      scrollPosition: 0,
+      removeClass: 'hidden',
+    };
+  }
+
+  handleInpageNavigationVisibility = () => {
+    const position = window.scrollY;
+    this.setState({ scrollPosition: position });
+
+    if (this.state.scrollPosition > 50) {
+      return this.setState({ removeClass: '' });
+    } else {
+      return this.setState({ removeClass: 'hidden' });
+    }
+  };
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleInpageNavigationVisibility);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleInpageNavigationVisibility);
+  }
+
+  onInpageNavigationClick = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  render() {
+    return (
+      <Container>
+        <div
+          id="inpage-navigation"
+          onClick={this.onInpageNavigationClick}
+          role="none"
+          className={this.state.removeClass}
+        >
+          <div className="mobile tablet only">
+            <Icon className="ri-arrow-up-s-line" />
+          </div>
+          <div className="tablet or lower hidden">
+            <Icon className="ri-arrow-up-s-line" />
+            <div className="text">top</div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+}
+
+export default InpageNavigation;

package/src/ui/InpageNavigation/InpageNavigation.stories.jsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import InpageNavigation from './InpageNavigation';
+import { Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Inpage Navigation',
+  component: InpageNavigation,
+  argTypes: {},
+};
+
+function InpageNavigationExample() {
+  return (
+    <div id="anchor">
+      <Container>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis
+          arcu egestas ultrices mollis. In facilisis, velit vel varius
+          fermentum, libero nisi mollis eros, non blandit nisi orci vel urna.
+          Maecenas efficitur rhoncus lorem, vitae volutpat nisi varius ut.
+          Aenean mattis maximus odio in rutrum. Nullam semper non purus a
+          eleifend. Aenean placerat in ligula sed efficitur. Phasellus viverra
+          vitae libero sed vestibulum. Nulla mattis tortor at odio suscipit, sed
+          finibus nulla interdum. Nullam semper augue nulla, eget volutpat purus
+          tempor blandit. Curabitur iaculis risus ac ipsum semper egestas. Sed
+          in condimentum lacus. Donec ac efficitur sapien. Integer sit amet
+          bibendum urna, eget rhoncus elit. Nam a diam sed dui consectetur
+          aliquet.
+        </p>
+      </Container>
+      <InpageNavigation linkId={'anchor'} />
+    </div>
+  );
+}
+
+const Template = (args) => (
+  <InpageNavigationExample {...args}></InpageNavigationExample>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/ui/KeyContent/KeyContent.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { List } from 'semantic-ui-react';
+
+KeyContent.propTypes = {
+  title: PropTypes.string,
+};
+
+function KeyContent({ children, ...rest }) {
+  return (
+    <div className={`eea key-content ${rest.variant}`} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+KeyContent.Title = ({ children }) => <p className="title">{children}</p>;
+KeyContent.List = ({ children, ...rest }) => (
+  <List bulleted horizontal={false} items={rest.items}></List>
+);
+
+export default KeyContent;

package/src/ui/KeyContent/KeyContent.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import KeyContent from './KeyContent';
+// eslint-disable-next-line import/no-unresolved
+
+export default {
+  title: 'Components/Key Content',
+  component: KeyContent,
+  argTypes: {
+    title: {
+      description: 'Key Content title',
+      table: {
+        defaultValue: { summary: '""' },
+        type: { summary: 'string' },
+      },
+    },
+    items: {
+      description: 'array of list content',
+      table: {
+        type: { summary: 'object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+  },
+};
+
+const DefaultTemplate = (args) => (
+  <KeyContent variant="colored" {...args}>
+    <KeyContent.Title>{args.title}</KeyContent.Title>
+    <KeyContent.List {...args}></KeyContent.List>
+  </KeyContent>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  title: 'Lorem ipsum',
+  items: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa volutpat, feugiat lacus libero morbi dui. Ipsum vestibulum, faucibus aliquam pharetra ullamcorper accumsan. Mauris et blandit magna velit aliquam mattis tristique cursus. Gravida quis porta dictum sed nisl gravida. Dictum sapien purus ultrices leo felis quis.',
+    'Turpis feugiat felis id imperdiet imperdiet suspendisse. Sed pulvinar nisi, convallis sed non non eu, erat. ',
+    'Felis malesuada in elementum turpis. Enim, eu adipiscing sit fames ornare amet, suscipit. Neque, faucibus facilisi egestas vitae viverra tristique cum viverra elit. Nunc fermentum bibendum fames ultricies turpis habitant. ',
+  ],
+};
+
+const SecondaryTemplate = (args) => (
+  <KeyContent {...args}>
+    <KeyContent.Title>{args.title}</KeyContent.Title>
+    <KeyContent.List {...args}></KeyContent.List>
+  </KeyContent>
+);
+
+export const Secondary = SecondaryTemplate.bind({});
+Secondary.args = {
+  title: 'Lorem ipsum',
+  items: [
+    'Sed pulvinar nisi, convallis sed non non eu, erat.',
+    'Consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis',
+    'Lorem ipsum dolor sit amet, consectetur',
+    'Purus sit amet luctus venenatis, lectus',
+    'Sed placerat sit erat sed massa in leo sit in ac vivamus tincidunt tincidunt tristique mi molestie dictum faucibus mauris',
+    'Luctus malesuada non in adipiscing convallis consectetur egestas sed',
+    'Vulputate gravida amet amet convallis quis',
+  ],
+};

package/src/ui/Loader/Loader.stories.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Loader } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+  argTypes: {
+    content: {
+      description: 'loader primary content',
+      table: {
+        type: {
+          summary: 'custom',
+        },
+        defaultValue: {
+          summary: '',
+        },
+      },
+    },
+  },
+};
+
+const Template = (args) => <Loader {...args} inline="centered" />;
+
+export const Default = Template.bind({});
+Default.args = {
+  active: true,
+  content: '',
+  size: 'medium',
+};
+
+Default.argTypes = {
+  size: {
+    options: [
+      'mini',
+      'tiny',
+      'small',
+      'medium',
+      'large',
+      'big',
+      'huge',
+      'massive',
+    ],
+    control: { type: 'select' },
+  },
+};