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

package/.coverage.babel.config.js

@@ -2,11 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push(
-    '@babel/plugin-transform-modules-commonjs',
-    'transform-class-properties',
-    'istanbul',
-  );
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/.i18n.babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');

package/.project.eslintrc.js

@@ -1,16 +1,15 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project'); // __dirname
+const projectRootPath = fs.realpathSync('./project');    // __dirname
 const packageJson = require(path.join(projectRootPath, 'package.json'));
-const jsConfig = require(path.join(projectRootPath, 'jsconfig.json'))
-  .compilerOptions;
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 
 const pathsConfig = jsConfig.paths;
 
 let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
 
-Object.keys(pathsConfig).forEach((pkg) => {
+Object.keys(pathsConfig).forEach(pkg => {
   if (pkg === '@plone/volto') {
     voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
   }
@@ -19,7 +18,7 @@ const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
 const reg = new AddonConfigurationRegistry(projectRootPath);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map((o) => [
+const addonAliases = Object.keys(reg.packages).map(o => [
   o,
   reg.packages[o].modulePath,
 ]);

package/CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.0-alpha.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.1...1.0.0-alpha.2) - 28 October 2022
+
+#### :nail_care: Enhancements
+
+- refactor(volto-slate): Upgrade to @plone/volto-slate - refs #153447 [Alin Voinea - [`853d9d1`](https://github.com/eea/volto-eea-design-system/commit/853d9d189dd17859e3999fbf53507df7083eefb4)]
+- change(documentation): grammarly proof-read suggestions [David Ichim - [`9f609be`](https://github.com/eea/volto-eea-design-system/commit/9f609be3758673b0d479d99baee69e7238a5b7f9)]
+
+#### :house: Internal changes
+
+- chore(docs): Back to dev [Alin Voinea - [`e33113a`](https://github.com/eea/volto-eea-design-system/commit/e33113a0541d082d93f61c7494bcce2ac5f79a8c)]
+
+#### :hammer_and_wrench: Others
+
+- test(cypress): Upgrade to Cypress 10 / Razzle 4 [Alin Voinea - [`c1c1f4b`](https://github.com/eea/volto-eea-design-system/commit/c1c1f4b280945a9f0b77eb0b59de003c1360bac9)]
+- Update dependencies [Alin Voinea - [`ee30a2b`](https://github.com/eea/volto-eea-design-system/commit/ee30a2bad3769163d3ab4d996c0a7be8fcb4bc6e)]
+- add announcement bar, showing that EEA DS is WIP [Antonio De Marinis - [`e14aeac`](https://github.com/eea/volto-eea-design-system/commit/e14aeac02cf922493aff4f83c8d80af95cc63eb9)]
+- more explanations [Antonio De Marinis - [`a8b2272`](https://github.com/eea/volto-eea-design-system/commit/a8b22728659125ba6ea6fb41f29571a8f1b9953b)]
 ### [1.0.0-alpha.1](https://github.com/eea/volto-eea-design-system/compare/0.9.5...1.0.0-alpha.1) - 20 October 2022
 
 #### :nail_care: Enhancements

package/README.md

@@ -27,39 +27,6 @@ This package provides the following features:
 
 ## Getting started
 
-### Try volto-eea-design-system with Docker
-
-1. Get the latest Docker images
-
-   ```
-   docker pull plone
-   docker pull plone/volto
-   ```
-
-2. Start Plone backend
-   ```
-   docker run -v $(pwd)/var:/data -e SITE=Plone -p 8080:8080 -e PROFILES="profile-plone.restapi:blocks" --name eea-plone -it --rm plone fg
-   ```
-3. Wait until you get the following message:
-
-   ```
-   Serving on http://0.0.0.0:8080
-   ```
-
-4. Start Volto frontend
-
-   ```
-   docker run -it --rm -p 3000:3000 --link eea-plone -e ADDONS="@eeacms/volto-eea-design-system" plone/volto
-   ```
-
-5. Wait until you get the following message:
-
-   ```
-   Volto started at http://localhost:8080
-   ```
-
-6. Go to http://localhost:3000, login with admin:admin if you need to edit the site.
-
 ### Add volto-eea-design-system to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
@@ -107,78 +74,7 @@ Checkout the docs found within the [mockups](https://github.com/eea/volto-eea-de
 
 ## Release
 
-### Automatic release using Jenkins
-
-*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
-* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
-* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
-* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
-* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
-* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
-* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
-* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
-
-### Manual release from the develop branch ( beta release )
-
-#### Installation and configuration of release-it
-
-You need to first install the [release-it](https://github.com/release-it/release-it)  client.
-
-   ```
-   npm install -g release-it
-   ```
-
-Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
-
-Release-it is a tool that automates 4 important steps in the release process:
-
-1. Version increase in `package.json` ( increased from the current version in `package.json`)
-2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
-3. GitHub release on the commit with the changelog and package.json modification on the develop branch
-4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
-
-To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
-
-   ```
-   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
-   ```
-
- To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
-
-   ```
-   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
-   ```
-
-#### Using release-it tool
-
-There are 3 yarn scripts that can be run to do the release
-
-##### yarn release-beta
-
-Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
-
-```
-? Select increment (next version):
-❯ prepatch (0.1.1-beta.0)
-  preminor (0.2.0-beta.0)
-  premajor (1.0.0-beta.0)
-  Other, please specify...
-```
-
-##### yarn release-major-beta
-
-Same as `yarn release-beta`, but with premajor version pre-selected.
-
-##### yarn release
-
-Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
-
-#### Important notes
-
-> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
-
-> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
-
+See [RELEASE.md](https://github.com/eea/volto-eea-design-system/blob/master/RELEASE.md).
 
 ## How to contribute
 

package/RELEASE.md

@@ -0,0 +1,74 @@
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+   
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+   
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens) 
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+ 
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+ 
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+  
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input). 
+
+```
+? Select increment (next version): 
+❯ prepatch (0.1.1-beta.0) 
+  preminor (0.2.0-beta.0) 
+  premajor (1.0.0-beta.0) 
+  Other, please specify... 
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+    
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.  
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+});

package/jest-addon.config.js

@@ -9,18 +9,18 @@ module.exports = {
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -26,9 +26,10 @@
     "react-countup": "^6.3.0"
   },
   "devDependencies": {
-    "md5": "^2.3.0",
-    "@cypress/code-coverage": "^3.9.5",
-    "babel-plugin-transform-class-properties": "^6.24.1"
+    "@plone/scripts": "*",
+    "@cypress/code-coverage": "^3.10.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "md5": "^2.3.0"
   },
   "scripts": {
     "release": "release-it",
@@ -37,16 +38,16 @@
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "test": "make test",
     "test:fix": "make test-update",
-    "i18n": "rm -rf build/messages && NODE_ENV=production node src/i18n.js",
     "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
-    "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
-    "stylelint:overrides": "../../../node_modules/.bin/stylelint  --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
-    "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
-    "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'; fi",
-    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
-    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
   }
 }

package/src/ui/Accordion/Accordion.stories.js

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { Accordion, Icon, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      name: 'Variation',
+      defaultValue: 'primary',
+      options: ['default', 'primary', 'secondary', 'tertiary'],
+      control: { type: 'select' },
+      description: 'call to action variation',
+      table: {
+        defaultValue: { summary: 'primary' },
+        type: { summary: 'string' },
+      },
+    },
+    toggle1: {
+      description: 'Text of the accordion toggler',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    toggle2: {
+      description: 'Text of the accordion toggler',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    toggle3: {
+      description: 'Text of the accordion toggler',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    content1: {
+      description: 'Text of the hidden content',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    content2: {
+      description: 'Text of the hidden content',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+    content3: {
+      description: 'Text of the hidden content',
+      table: {
+        type: {
+          summary: 'array',
+        },
+        defaultValue: {
+          summary: '""',
+        },
+      },
+    },
+  },
+};
+
+function AccordionContainer({ ...args }) {
+  const [activeIndex, setActiveIndex] = useState();
+
+  const toggleOpenAccordion = (e, titleProps) => {
+    const { index } = titleProps;
+    const newIndex = activeIndex === index ? -1 : index;
+
+    setActiveIndex(newIndex);
+  };
+
+  return (
+    <Container>
+      <Accordion className={args.variant}>
+        <Accordion.Title
+          active={activeIndex === 0}
+          index={0}
+          onClick={toggleOpenAccordion}
+        >
+          {args.toggle1}
+          <Icon className="ri-arrow-down-s-line" />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 0}>
+          {args.content1.length > 0 &&
+            args.content1.map((item, index) => <p key={index}>{item}</p>)}
+        </Accordion.Content>
+
+        <Accordion.Title
+          active={activeIndex === 1}
+          index={1}
+          onClick={toggleOpenAccordion}
+        >
+          {args.toggle2}
+          <Icon className="ri-arrow-down-s-line" />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 1}>
+          {args.content2.length > 0 &&
+            args.content2.map((item, index) => <p key={index}>{item}</p>)}
+        </Accordion.Content>
+
+        <Accordion.Title
+          active={activeIndex === 2}
+          index={2}
+          onClick={toggleOpenAccordion}
+        >
+          {args.toggle3}
+          <Icon className="ri-arrow-down-s-line" />
+        </Accordion.Title>
+        <Accordion.Content active={activeIndex === 2}>
+          {args.content3.length > 0 &&
+            args.content3.map((item, index) => <p key={index}>{item}</p>)}
+        </Accordion.Content>
+      </Accordion>
+    </Container>
+  );
+}
+
+const Template = (args) => <AccordionContainer {...args}></AccordionContainer>;
+
+export const Default = Template.bind({});
+Default.args = {
+  variant: 'secondary',
+  toggle1: 'Water and marine environment',
+  toggle2: 'Resource efficiency and waste',
+  toggle3: 'Air pollution',
+  content1: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  ],
+  content2: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  ],
+  content3: [
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna nisi mauris enim felis eget id sed tristique. At laoreet ligula pretium, pulvinar. Accumsan egestas ultricies erat sed. Eget non quis libero, odio elementum lectus lectus ullamcorper elit. In quam pulvinar amet, habitasse mi lorem nunc. Sed sed elementum est purus elementum eget. Elementum tortor at nulla nunc, tempor rhoncus, bibendum. Massa mauris, mauris, vel elementum adipiscing.',
+  ],
+};

package/src/ui/Comment/Comment.stories.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Comment, Header } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Comment',
+  component: CommentEEA,
+  argTypes: {
+    title: {
+      description: 'comment section header',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    comments: {
+      description: 'comments data',
+      table: {
+        type: { summary: 'Object' },
+        defaultValue: { summary: ' "" ' },
+      },
+    },
+    threaded: {
+      description: 'showing the relationship between comments',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    minimal: {
+      description: 'hide extra information',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+  },
+};
+
+function CommentEEA({ title, comments, threaded, minimal, size }) {
+  return (
+    <Comment.Group threaded={threaded} minimal={minimal} size={size}>
+      <Header dividing>{title}</Header>
+
+      {comments.map((comment, comIndex) => (
+        <Comment key={comIndex}>
+          <Comment.Avatar src={comment.src} alt="user avatar" />
+          <Comment.Content>
+            <Comment.Author as="a">{comment.author}</Comment.Author>
+            <Comment.Metadata>
+              <div>{comment.time}</div>
+            </Comment.Metadata>
+            <Comment.Text>{comment.text}</Comment.Text>
+            <Comment.Actions>
+              <Comment.Action>Reply</Comment.Action>
+            </Comment.Actions>
+          </Comment.Content>
+          <Comment.Group>
+            {comment.replies.map((reply, repIndex) => (
+              <Comment key={repIndex}>
+                <Comment.Avatar src={comment.src} alt="user avatar" />
+                <Comment.Content>
+                  <Comment.Author as="a">{reply.author}</Comment.Author>
+                  <Comment.Metadata>
+                    <div>{reply.time}</div>
+                  </Comment.Metadata>
+                  <Comment.Text>{reply.text}</Comment.Text>
+                  <Comment.Actions>
+                    <Comment.Action>Reply</Comment.Action>
+                  </Comment.Actions>
+                </Comment.Content>
+              </Comment>
+            ))}
+          </Comment.Group>
+        </Comment>
+      ))}
+    </Comment.Group>
+  );
+}
+
+const Template = (args) => <CommentEEA {...args}></CommentEEA>;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Comments Header',
+  threaded: false,
+  minimal: false,
+  comments: [
+    {
+      src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+      author: 'User 1',
+      time: 'Message timestamp',
+      text: 'Message Content',
+      replies: [
+        {
+          src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+          author: 'User 4',
+          time: 'Message timestamp',
+          text: 'Message Content',
+        },
+      ],
+    },
+    {
+      src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+      author: 'User 2',
+      time: 'Message timestamp',
+      text: 'Message Content',
+      replies: [],
+    },
+    {
+      src: 'https://react.semantic-ui.com/images/avatar/large/matthew.png',
+      author: 'User 3',
+      time: 'Message timestamp',
+      text: 'Message Content',
+      replies: [],
+    },
+  ],
+};