268495 draft image

Jenkinsfile

@@ -337,7 +337,7 @@ pipeline {
        stage('Storybook') {
            when {
             expression {
-              env.GITHUB_COMMENT.contains("@eea-jenkins build all") || env.GITHUB_COMMENT.contains("@eea-jenkins build story")
+              env.GITHUB_COMMENT.contains("@eea-jenkins build all") || env.GITHUB_COMMENT.contains("@eea-jenkins build storybook")
               }
            }
 
@@ -352,7 +352,7 @@ pipeline {
                   sh '''git clone --branch develop https://github.com/eea/eea-storybook.git'''
 
                   withCredentials([string(credentialsId: 'eea-storybook-chromatica', variable: 'CHROMATICA_TOKEN')]) {
-                    def RETURN_STATUS = sh(script: '''cd eea-storybook; npm install -g mrs-developer chromatic; yarn cache clean; make develop; cd src/addons/$GIT_NAME; git fetch origin pull/${CHANGE_ID}/head:PR-${CHANGE_ID}; git checkout PR-${CHANGE_ID}; cd ../../..; yarn install; yarn build-storybook; if [ $? -eq 0 ]; then set -o pipefail; npx chromatic --no-interactive --exit-zero-on-changes --project-token=$CHROMATICA_TOKEN -d docs/ | tee chromatic.log; else exit 1; fi''', returnStatus: true)
+                    def RETURN_STATUS = sh(script: '''cd eea-storybook; npm install -g mrs-developer chromatic; make develop; cd src/addons/$GIT_NAME; git fetch origin pull/${CHANGE_ID}/head:PR-${CHANGE_ID}; git checkout PR-${CHANGE_ID}; cd ../../..; yarn install; yarn build-storybook; if [ $? -eq 0 ]; then set -o pipefail; npx chromatic --no-interactive --exit-zero-on-changes --project-token=$CHROMATICA_TOKEN -d docs/ | tee chromatic.log; else exit 1; fi''', returnStatus: true)
                     if ( RETURN_STATUS == 0 ) {
                       def STORY_URL = sh(script: '''grep "View your Storybook" eea-storybook/chromatic.log | sed "s/.*https/https/" ''', returnStdout: true).trim()
                       pullRequest.comment("### :heavy_check_mark: Storybook:\n${STORY_URL}\n\n:rocket: @${GITHUB_COMMENT_AUTHOR}")

package.json

@@ -35,7 +35,8 @@
     "babel-plugin-transform-class-properties": "^6.24.1",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "postcss-less": "6.0.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json}": [

src/ui/DraftContent/DraftContent.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Default as HeaderDefault, HeaderArgs } from '../Header/Header.stories';
+import './draft.css';
+
+export default {
+  title: 'Layout/Draft Content',
+  component: HeaderDefault,
+  argTypes: {
+    showDraftContent: { control: 'boolean' },
+  },
+};
+
+const HeaderTemplate = (args) => {
+  const draftClass = args.showDraftContent
+    ? 'view-viewview wf-state-is-draft'
+    : '';
+  return (
+    <div className={draftClass}>
+      <HeaderDefault {...HeaderArgs} />
+    </div>
+  );
+};
+
+export const Default = HeaderTemplate.bind({});
+Default.args = {
+  showDraftContent: true,
+};

src/ui/DraftContent/draft.css

@@ -0,0 +1,3 @@
+.view-viewview.wf-state-is-draft {
+  background-image: url('draft.png') !important;
+}

src/ui/Header/Header.stories.js

@@ -1540,7 +1540,7 @@ const Template = (args) => {
 };
 
 export const Default = Template.bind({});
-Default.args = {
+export const HeaderArgs = {
   linksMenuTitle: 'Environmental information systems',
   tabletLinksMenuTitle: 'EEA information systems',
   mobileLinksMenuTitle: 'EEA information systems',
@@ -1551,3 +1551,4 @@ Default.args = {
   transparency: false,
   inverted: false,
 };
+Default.args = HeaderArgs;

website/docs/webdev/4-Templates/5-DraftContent.mdx

@@ -0,0 +1,11 @@
+---
+title: Draft Content
+description: ""
+hide_table_of_contents: true
+---
+
+import EEATabs from '../md_components/tab_component.mdx';
+import Usage from '../md_components/draft_content_components/usage_markdown.md';
+import Showcase from '../md_components/draft_content_components/showcase_markdown.md';
+
+<EEATabs usage={<Usage />} showcase={<Showcase />}></EEATabs>

website/docs/webdev/md_components/draft_content_components/showcase_markdown.md

@@ -0,0 +1,6 @@
+
+import Iframe from '../iframe_component.mdx';
+
+## Default
+
+<Iframe id='layout-draft-contents--default'> </Iframe>

website/docs/webdev/md_components/draft_content_components/usage_markdown.md

@@ -0,0 +1,33 @@
+The Draft Content component is a React component that adds a visual indicator to the page when the current content is in a draft or unpublished state.  
+This is useful for content editors and administrators to
+easily distinguish between published and unpublished content.
+
+## Functionality
+
+The component checks the current content's review state, effective date, and parent content's review state to determine if the content should be considered published or not. If the content is not published, the component adds a CSS class (`wf-state-is-draft`) to the body element of the view page. This CSS class is used to apply a specific background to indicate the draft state.
+
+The component handles the following cases to determine that the draft image should be displayed:
+- If the content has an effective date set in the future, regardless of the review state, it is considered unpublished.
+- If the content has a review state which isn't explicitly set to "published" 
+
+The component handles the following cases to determine that the draft image should not be displayed:
+- If the content's review state is explicitly set to "published" and the effective date is not in the future.
+- If the content's review state is null, but its parent's review state is "published", (e.g., an image in a published folder).
+- If the content's review state is null, and there is no parent (e.g., the Plone site root).
+- If the content's review state is null, and the parent's review state is also null (e.g., an image in the Plone site root).
+- If the content view is not a view page (e.g., the /edit or /content pages).
+
+## Usage
+
+The Draft Content component is typically used in the main layout or template of the Volto application.  
+It should be rendered on every page to ensure that the draft state indicator is displayed consistently across the entire application.
+
+## Do's
+
+- Use the Draft Content component on every view page of your Volto application to ensure consistent draft state indication across the entire site.
+- Ensure that the CSS class `wf-state-is-draft` is applied to the body element when the content is in a draft or unpublished state, and remove it when the content is published.
+
+## Don'ts
+
+- Don't use the Draft Content component on pages where you don't want to display the draft state indicator.
+- Don't modify the logic for determining the draft state without considering all the edge cases and potential implications.

website/package.json

@@ -3,36 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "docusaurus start --port 5000",
+    "start": "docusaurus start --port 4000",
     "build": "docusaurus build --out-dir ../docs",
     "deploy": "docusaurus deploy --out-dir ../docs",
     "clear": "docusaurus clear ../docs",
     "serve": "docusaurus serve --dir ../docs",
     "write-heading-ids": "docusaurus write-heading-ids ../docs"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.13",
-    "@docusaurus/preset-classic": "2.0.0-beta.13",
+    "@docusaurus/core": "2.4.3",
+    "@docusaurus/preset-classic": "2.4.3",
     "@fontsource/roboto": "4.5.8",
-    "@mdx-js/react": "^1.6.21",
-    "clsx": "^1.1.1",
-    "eslint": "^7.26.0",
-    "eslint-cli": "^1.1.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
-    "eslint-plugin-flowtype": "^5.7.2",
-    "eslint-plugin-import": "^2.23.2",
-    "eslint-plugin-jest": "^24.3.6",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^4.5.0",
-    "eslint-webpack-plugin": "^2.5.4",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "remixicon": "^2.5.0"
   },
   "browserslist": {
@@ -47,7 +32,7 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "react-graph-vis": "^1.0.7"
+  "engines": {
+    "node": ">=16.14"
   }
-}
+}

website/src/components/HomepageFeatures.js

@@ -5,37 +5,37 @@ import styles from './HomepageFeatures.module.css';
 const FeatureList = [
   {
     title: 'Web developer',
-    link: 'docs/category/web-development',
+    link: 'docs/category/web-development/',
     Svg: require('../../static/img/undraw_proud_coder_re_exuy.svg').default,
     description: <>Design system for web developers</>,
   },
   {
     title: 'Web designer',
-    link: 'docs/category/web-development',
+    link: 'docs/category/web-development/',
     Svg: require('../../static/img/undraw_static_website_re_x70h.svg').default,
     description: <>Design system for web designers</>,
   },
   {
     title: 'Web content creator',
-    link: 'docs/category/web-content',
+    link: 'docs/category/web-content/',
     Svg: require('../../static/img/undraw_add_post_re_174w.svg').default,
     description: <>Tips and tricks for writing for the web</>,
   },
   {
     title: 'Publication writer',
-    link: 'docs/pubguide/writing',
+    link: 'docs/pubguide/writing/',
     Svg: require('../../static/img/undraw_education_f8ru.svg').default,
     description: <>Writing manual for publications</>,
   },
   {
     title: 'Publication designer',
-    link: 'docs/pubguide/design',
+    link: 'docs/pubguide/design/',
     Svg: require('../../static/img/undraw_online_articles_re_yrkj.svg').default,
     description: <>Design system for publications</>,
   },
   {
     title: 'Data scientist',
-    link: 'docs/category/maps-and-charts',
+    link: 'docs/category/maps-and-charts/',
     Svg: require('../../static/img/undraw_all_the_data_re_hh4w.svg').default,
     description: <>Design system for data scientists</>,
   },

website/src/css/custom.css

@@ -186,6 +186,12 @@ body {
   line-height: 1.5;
 }
 
+/* reduce the width of the paragraphs to something more reasonable */
+li,
+p {
+  max-width: 95ch;
+}
+
 .caption {
   font-size: 0.875rem;
 }