From 754a33646dd9bc6be900ed273e8bf40a98a2ed1e Mon Sep 17 00:00:00 2001 From: Oli Jones Date: Wed, 13 Mar 2019 16:16:55 +0000 Subject: [PATCH] Add Details component --- package-lock.json | 71 ++++------ package.json | 2 +- src/components/Details/index.css | 1 + src/pages/components/content.js | 215 +++++++++++++++++++------------ 4 files changed, 160 insertions(+), 129 deletions(-) diff --git a/package-lock.json b/package-lock.json index 355aadb..e2a5261 100644 --- a/package-lock.json +++ b/package-lock.json @@ -981,9 +981,9 @@ } }, "@barnardos/stylelint-config-barnardos": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/@barnardos/stylelint-config-barnardos/-/stylelint-config-barnardos-0.5.2.tgz", - "integrity": "sha512-rkU/vDsWF0NY4APiSiBuYaHJVTv09erpUnQq9I+WXShbX3kcXiVPlebHDEMjDj7TfXspJ2RM6/ui9CYMnvSEKQ==", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@barnardos/stylelint-config-barnardos/-/stylelint-config-barnardos-0.5.3.tgz", + "integrity": "sha512-ttbsY/PP6Q4y4nVXAK4clC8TIokDUpIyiF1/vwmjT3Y2ZJQzFLYI/lyGsbEklOI8CI6vdDO3/YHTz9/TtIhFww==", "dev": true, "requires": { "lodash": "^4.17.11", @@ -6808,8 +6808,7 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -6833,15 +6832,13 @@ "version": "1.0.0", "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6858,22 +6855,19 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7004,8 +6998,7 @@ "version": "2.0.3", "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7019,7 +7012,6 @@ "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7036,7 +7028,6 @@ "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7045,15 +7036,13 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7074,7 +7063,6 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7163,8 +7151,7 @@ "version": "1.0.1", "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7178,7 +7165,6 @@ "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7274,8 +7260,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -7317,7 +7302,6 @@ "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7339,7 +7323,6 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7388,15 +7371,13 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", - "dev": true, - "optional": true + "dev": true } } }, @@ -8167,7 +8148,7 @@ "dependencies": { "minimist": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz", "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=", "dev": true } @@ -9114,7 +9095,7 @@ }, "is-builtin-module": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "dev": true, "requires": { @@ -9296,7 +9277,7 @@ }, "is-obj": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=", "dev": true }, @@ -10898,7 +10879,7 @@ }, "levenshtein-edit-distance": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/levenshtein-edit-distance/-/levenshtein-edit-distance-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/levenshtein-edit-distance/-/levenshtein-edit-distance-1.0.0.tgz", "integrity": "sha1-iVuvR4zOi1waDSfkXXwdl4pmHkk=", "dev": true }, @@ -10914,7 +10895,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -11781,7 +11762,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "requires": { @@ -13020,7 +13001,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -14332,9 +14313,9 @@ "dev": true }, "postcss-values-parser": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.0.1.tgz", - "integrity": "sha512-0vmRgdIi8L6g7gcboD2S3kG4Oc4wswt2iBd4YmxheQkxN3GoiGWirbpFc67DU/sJH5C1O2itk2wKbO9lTsstDg==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.0.2.tgz", + "integrity": "sha512-a1uZoPVcpwb45nIC88B3reeS9bh1N07ERdW4pgqhb6XVop/164Pf+vxHPtxl/O8UMIwW6GoXMm/v1bsTy/OuEQ==", "dev": true, "requires": { "color-name": "^1.1.4", @@ -17652,7 +17633,7 @@ }, "through": { "version": "2.3.8", - "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=", "dev": true }, @@ -18089,7 +18070,7 @@ }, "json5": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", "dev": true, "requires": { diff --git a/package.json b/package.json index 4e5360a..5216048 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "@barnardos/eslint-config-barnardos": "^0.2.0", - "@barnardos/stylelint-config-barnardos": "^0.5.2", + "@barnardos/stylelint-config-barnardos": "^0.5.3", "axe-puppeteer": "^1.0.0", "babel-eslint": "^10.0.1", "eslint": "^5.15.1", diff --git a/src/components/Details/index.css b/src/components/Details/index.css index 33126e0..4e89364 100644 --- a/src/components/Details/index.css +++ b/src/components/Details/index.css @@ -9,6 +9,7 @@ } .Details-summary { + cursor: pointer; font: 300 var(--type-0) system-ui; } diff --git a/src/pages/components/content.js b/src/pages/components/content.js index 90e4df5..317e030 100644 --- a/src/pages/components/content.js +++ b/src/pages/components/content.js @@ -11,6 +11,7 @@ import Code from "../../components/Code"; import Content from "../../components/Content"; import Contents from "../../components/Contents"; import ContentsMenu from "../../components/ContentsMenu"; +import Details from "../../components/Details"; import Example from "../../components/Example"; import Fact from "../../components/Fact"; import Heading from "../../components/Heading"; @@ -82,20 +83,12 @@ export const items = [ ] }, { - text: "Media", - href: "/components/content/#media", + text: "Disclosure", + href: "/components/content/#disclosure", items: [ { - text: "Image", - href: "/components/content/#image" - }, - { - text: "Video", - href: "/components/content/#video" - }, - { - text: "Caption", - href: "/components/content/#caption" + text: "Details", + href: "/components/content/#details" } ] }, @@ -127,6 +120,24 @@ export const items = [ } ] }, + { + text: "Media", + href: "/components/content/#media", + items: [ + { + text: "Image", + href: "/components/content/#image" + }, + { + text: "Video", + href: "/components/content/#video" + }, + { + text: "Caption", + href: "/components/content/#caption" + } + ] + }, { text: "Callouts", href: "/components/content/#callouts", @@ -330,85 +341,41 @@ export default () => ( {" "} on GitHub. - Media - Image - Use this component to display an image. - You should: - - match the tone of the surrounding copy - - include descriptive alt tags in the code - - - - Group collecting donations for Barnardo's - - - View{" "} - - Image code - {" "} - and{" "} - - Image research - {" "} - on GitHub. - - Video - Use this component to display a video. - You should: - - include subtitles - include a transcription - - - - - View{" "} - - Video code - {" "} - and{" "} - - Video research - {" "} - on GitHub. - - Caption + Disclosure + Details - Use this component to add a caption, for example to images and - videos. + Use this component to reveal extra information in situ. - You should: - - be clear and concise - - provide a description that makes sense out of context - - - - Lady holding a baby - + There are many methods to donate. +
+ + If you’d like to donate by post, simply send a cheque made + payable to Barnardo’s to: + + + Supporter Services [OPD] +
+ Barnardo’s +
+ Tanners Lane +
+ Barkingside +
+ Essex +
+ IG6 1QG + +
View{" "} - - Caption code + + Details code {" "} and{" "} - - Caption research + + Details research {" "} on GitHub. @@ -528,6 +495,88 @@ export default () => ( {" "} on GitHub. + Media + Image + Use this component to display an image. + You should: + + match the tone of the surrounding copy + + include descriptive alt tags in the code + + + + Group collecting donations for Barnardo's + + + View{" "} + + Image code + {" "} + and{" "} + + Image research + {" "} + on GitHub. + + Video + Use this component to display a video. + You should: + + include subtitles + include a transcription + + + + + View{" "} + + Video code + {" "} + and{" "} + + Video research + {" "} + on GitHub. + + Caption + + Use this component to add a caption, for example to images and + videos. + + You should: + + be clear and concise + + provide a description that makes sense out of context + + + + + Lady holding a baby + + + + View{" "} + + Caption code + {" "} + and{" "} + + Caption research + {" "} + on GitHub. + Callouts Callout