diff --git a/Jenkinsfile b/Jenkinsfile index 30b1d76143..367188d98f 100644 --- a/Jenkinsfile +++ b/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}") diff --git a/package.json b/package.json index d2ee2e4d93..5eac78cdcd 100644 --- a/package.json +++ b/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}": [ diff --git a/src/ui/DraftContent/DraftContent.stories.jsx b/src/ui/DraftContent/DraftContent.stories.jsx new file mode 100644 index 0000000000..a7e3bd4c71 --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export const Default = HeaderTemplate.bind({}); +Default.args = { + showDraftContent: true, +}; diff --git a/src/ui/DraftContent/draft.css b/src/ui/DraftContent/draft.css new file mode 100644 index 0000000000..36c1db3779 --- /dev/null +++ b/src/ui/DraftContent/draft.css @@ -0,0 +1,3 @@ +.view-viewview.wf-state-is-draft { + background-image: url('draft.png') !important; +} diff --git a/src/ui/DraftContent/draft.png b/src/ui/DraftContent/draft.png new file mode 100644 index 0000000000..fd95568f4d Binary files /dev/null and b/src/ui/DraftContent/draft.png differ diff --git a/src/ui/Header/Header.stories.js b/src/ui/Header/Header.stories.js index 4d42d0eab4..106e9487b2 100644 --- a/src/ui/Header/Header.stories.js +++ b/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; diff --git a/website/docs/webdev/4-Templates/5-DraftContent.mdx b/website/docs/webdev/4-Templates/5-DraftContent.mdx new file mode 100644 index 0000000000..cb5c1afff4 --- /dev/null +++ b/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'; + +} showcase={}> diff --git a/website/docs/webdev/md_components/draft_content_components/showcase_markdown.md b/website/docs/webdev/md_components/draft_content_components/showcase_markdown.md new file mode 100644 index 0000000000..1d887bf578 --- /dev/null +++ b/website/docs/webdev/md_components/draft_content_components/showcase_markdown.md @@ -0,0 +1,6 @@ + +import Iframe from '../iframe_component.mdx'; + +## Default + + \ No newline at end of file diff --git a/website/docs/webdev/md_components/draft_content_components/usage_markdown.md b/website/docs/webdev/md_components/draft_content_components/usage_markdown.md new file mode 100644 index 0000000000..3da08a290f --- /dev/null +++ b/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. diff --git a/website/package.json b/website/package.json index 2a22dba6a8..2acdbdeabd 100644 --- a/website/package.json +++ b/website/package.json @@ -3,7 +3,7 @@ "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", @@ -11,28 +11,13 @@ "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" } -} +} \ No newline at end of file diff --git a/website/src/components/HomepageFeatures.js b/website/src/components/HomepageFeatures.js index bc3adba89f..e80202a956 100644 --- a/website/src/components/HomepageFeatures.js +++ b/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, }, diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 88dd5c0436..7a1a0d5f80 100644 --- a/website/src/css/custom.css +++ b/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; }