From 73fe5db37ff7b7fe3a43f2acf158caeb8d401a7e Mon Sep 17 00:00:00 2001 From: Soji Soyoye Date: Wed, 24 Jul 2019 13:27:10 +0100 Subject: [PATCH] feat(molecule): setup image with article row molecule - setup container for the atoms - include image atom - include text and title atom - write test for component [Finishes #167454777] --- package-lock.json | 132 +++++++++--------- package.json | 4 +- src/components/UI/atoms/Text/Text.jsx | 7 +- src/components/UI/atoms/Title/Title.jsx | 5 + .../layouts/FlexContainer/FlexContainer.jsx | 13 +- .../ArticleContent/ArticleContent.jsx | 113 +++++++++++++++ .../ArticleContent/ArticleContent.md | 19 +++ .../ArticleContent/ArticleContent.spec.js | 55 ++++++++ .../UI/molecules/ImageText/ImageText.jsx | 56 ++++++++ .../UI/molecules/ImageText/ImageText.md | 19 +++ .../UI/molecules/ImageText/ImageText.spec.js | 41 ++++++ .../UI/molecules/SearchBar/SearchBar.spec.js | 2 - .../templates/PageLayout/PageLayout.jsx | 1 + src/styles/variables/colorPalette.js | 3 + src/styles/variables/fonts.js | 11 +- src/styles/variables/mainTheme.js | 3 +- src/styles/variables/spacing.js | 2 +- src/styles/variables/width.js | 2 + 18 files changed, 414 insertions(+), 74 deletions(-) create mode 100644 src/components/UI/molecules/ArticleContent/ArticleContent.jsx create mode 100644 src/components/UI/molecules/ArticleContent/ArticleContent.md create mode 100644 src/components/UI/molecules/ArticleContent/ArticleContent.spec.js create mode 100644 src/components/UI/molecules/ImageText/ImageText.jsx create mode 100644 src/components/UI/molecules/ImageText/ImageText.md create mode 100644 src/components/UI/molecules/ImageText/ImageText.spec.js diff --git a/package-lock.json b/package-lock.json index 7b59a92..80585d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5256,25 +5256,25 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "optional": true, "requires": { @@ -5284,13 +5284,13 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "optional": true, "requires": { @@ -5300,37 +5300,37 @@ }, "chownr": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz", "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "optional": true }, "debug": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "optional": true, "requires": { @@ -5339,25 +5339,25 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "optional": true, "requires": { @@ -5366,13 +5366,13 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { @@ -5388,7 +5388,7 @@ }, "glob": { "version": "7.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "optional": true, "requires": { @@ -5402,13 +5402,13 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": false, + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "optional": true, "requires": { @@ -5417,7 +5417,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "optional": true, "requires": { @@ -5426,7 +5426,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { @@ -5436,19 +5436,19 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "optional": true, "requires": { @@ -5457,13 +5457,13 @@ }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "optional": true, "requires": { @@ -5472,13 +5472,13 @@ }, "minimist": { "version": "0.0.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "optional": true }, "minipass": { "version": "2.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "optional": true, "requires": { @@ -5488,7 +5488,7 @@ }, "minizlib": { "version": "1.2.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz", "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "optional": true, "requires": { @@ -5497,7 +5497,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "optional": true, "requires": { @@ -5506,13 +5506,13 @@ }, "ms": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "optional": true }, "needle": { "version": "2.3.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz", "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "optional": true, "requires": { @@ -5523,7 +5523,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "optional": true, "requires": { @@ -5541,7 +5541,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "optional": true, "requires": { @@ -5551,13 +5551,13 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz", "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "optional": true, "requires": { @@ -5567,7 +5567,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { @@ -5579,19 +5579,19 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "optional": true, "requires": { @@ -5600,19 +5600,19 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "optional": true, "requires": { @@ -5622,19 +5622,19 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "optional": true }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "optional": true, "requires": { @@ -5646,7 +5646,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "optional": true } @@ -5654,7 +5654,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "optional": true, "requires": { @@ -5669,7 +5669,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "optional": true, "requires": { @@ -5678,43 +5678,43 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "optional": true }, "semver": { "version": "5.7.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "optional": true, "requires": { @@ -5725,7 +5725,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "optional": true, "requires": { @@ -5734,7 +5734,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "optional": true, "requires": { @@ -5743,13 +5743,13 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "optional": true }, "tar": { "version": "4.4.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz", "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "optional": true, "requires": { @@ -5764,13 +5764,13 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "optional": true, "requires": { @@ -5779,13 +5779,13 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "optional": true }, "yallist": { "version": "3.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", "optional": true } diff --git a/package.json b/package.json index 8cd4492..dcdf154 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,9 @@ { "name": "king-kong-ah-frontend", "jest": { - "roots": ["/src/"], + "roots": [ + "/src/" + ], "verbose": true, "moduleNameMapper": { "\\.(css|less)$": "/src/config/assetsTransformer.js", diff --git a/src/components/UI/atoms/Text/Text.jsx b/src/components/UI/atoms/Text/Text.jsx index 02785f8..39aedb7 100644 --- a/src/components/UI/atoms/Text/Text.jsx +++ b/src/components/UI/atoms/Text/Text.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { fontWeights, fontSizes } from '/fonts'; +import { fontWeights, fontSizes, lineHeights } from '/fonts'; import { textColors } from '/colorPalette'; import spacing from '/spacing'; @@ -30,6 +30,7 @@ const Text = ({ fontWeight, padding, content, + lineHeight, children, }) => ( {children} @@ -62,6 +64,7 @@ Text.propTypes = { content: PropTypes.oneOf(['true', 'false']), padding: PropTypes.oneOf(Object.keys(spacing)), fontWeight: PropTypes.oneOf(Object.keys(fontWeights)), + lineHeight: PropTypes.oneOf(Object.keys(lineHeights)), }; Text.defaultProps = { @@ -83,6 +86,7 @@ Text.Container = styled.span` display, textAlign, color, + lineHeight, theme, }) => ` text-align: ${textAlign}; @@ -92,6 +96,7 @@ Text.Container = styled.span` font-size: ${theme.fontSizes[fontSize]}; font-weight: ${theme.fontWeights[fontWeight]}; font-family: ${(content === 'true' && 'Inknut Antiqua') || 'roboto'}; + line-height: ${theme.lineHeights[lineHeight]}; text-transform: ${textTransform}; @media ${theme.device.mobileS} { diff --git a/src/components/UI/atoms/Title/Title.jsx b/src/components/UI/atoms/Title/Title.jsx index 50f44d6..fb55127 100644 --- a/src/components/UI/atoms/Title/Title.jsx +++ b/src/components/UI/atoms/Title/Title.jsx @@ -24,6 +24,7 @@ const Title = ({ color, display, paddingBottom, + content, children, }) => ( {children} @@ -43,6 +45,7 @@ Title.propTypes = { color: PropTypes.oneOf(Object.keys(textColors)), display: PropTypes.oneOf(['block', 'inline', 'inline-block', 'none']), paddingBottom: PropTypes.oneOf(Object.keys(spacing)), + content: PropTypes.oneOf(['true', 'false']), children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) .isRequired, }; @@ -60,6 +63,7 @@ Title.Container = styled.span` color, display, paddingBottom, + content, theme, }) => ` display: ${display}; @@ -67,6 +71,7 @@ Title.Container = styled.span` color: ${theme.textColors[color]}; padding-bottom: ${theme.spacing[paddingBottom]}; font-size: ${theme.fontSizes[fontSize]}; + font-family: ${(content === 'true' && 'Inknut Antiqua') || 'roboto'}; font-weight: ${theme.fontWeights.bold} @media ${theme.device.mobileS} { diff --git a/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx b/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx index 46d22b1..ede9b66 100644 --- a/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx +++ b/src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx @@ -23,8 +23,10 @@ import width from '/width'; */ const FlexContainer = ({ children, + height, margin, padding, + paddingLeft, display, backgroundColor, borderColor, @@ -37,7 +39,9 @@ const FlexContainer = ({ }) => ( ` + height: ${height} display: ${display}; background-color: ${backgroundColors[backgroundColor]}; margin: ${spacing[margin]}; padding: ${spacing[padding]}; + padding-left: ${spacing[paddingLeft]} border-radius: ${spacing[borderRadius]}; box-shadow: ${boxShadows[boxShadow]}; - border: 1px solid ${borderColors[borderColor] || 'transparent'}; + border: ${borderWidth} solid ${borderColors[borderColor] || 'transparent'}; justify-content: ${justifyContent} flex-direction: ${flexDirection}; width: ${width[containerWidth]} @@ -101,6 +110,7 @@ FlexContainer.propTypes = { children: PropTypes.node, margin: PropTypes.oneOf(Object.keys(spacing)), padding: PropTypes.oneOf(Object.keys(spacing)), + paddingLeft: PropTypes.oneOf(Object.keys(spacing)), backgroundColor: PropTypes.oneOf(Object.keys(backgroundColors)), display: PropTypes.oneOf(['block', 'inline', 'flex', 'inline-block', 'none']), borderColor: PropTypes.oneOf(Object.keys(borderColors)), @@ -122,6 +132,7 @@ FlexContainer.propTypes = { 'space-around', ]), flexDirection: PropTypes.oneOf(['row', 'column']), + height: PropTypes.string, }; export default FlexContainer; diff --git a/src/components/UI/molecules/ArticleContent/ArticleContent.jsx b/src/components/UI/molecules/ArticleContent/ArticleContent.jsx new file mode 100644 index 0000000..a5a6257 --- /dev/null +++ b/src/components/UI/molecules/ArticleContent/ArticleContent.jsx @@ -0,0 +1,113 @@ +/* eslint-disable no-use-before-define */ +import React from 'react'; +import PropTypes from 'prop-types'; + +import FlexContainer from '/layouts/FlexContainer/FlexContainer'; +import Title from '/Title/Title'; +import Text from '/Text/Text'; +import { fontSizes, lineHeights } from '/fonts'; + +/** + * @description - ArticleContent Component + * + * @prop {string} title - title + * @prop {string} author - author + * @prop {string} description - description + * @prop {string} titleFontSize - titleFontSize + * @prop {string} authorFontSize - authorFontSize + * @prop {string} descriptionFontSize - descriptionFontSize + * + * @return {component} ArticleContent + */ +const ArticleContent = ({ + title, + author, + description, + authorLineHeight, + titleFontSize, + authorFontSize, + descriptionFontSize, +}) => { + return ( + + + {title && (renderTitle(titleFontSize))} + {author && (renderAuthor(authorFontSize, authorLineHeight))} + + + {description && (renderDescription(descriptionFontSize))} + + + ); + + function renderTitle(size) { + return ( + + {title} + + ); + } + + function renderAuthor(size, height) { + return ( +
+ + {author} + +
+ ); + } + + function renderDescription(size) { + return ( +
+ + {description} + +
+ ); + } +}; + + +ArticleContent.defaultProps = { + titleFontSize: 'xlarge', + authorFontSize: 'medx', + descriptionFontSize: 'medium', + authorLineHeight: 'zero', +}; + +ArticleContent.propTypes = { + title: PropTypes.string, + author: PropTypes.string, + description: PropTypes.string, + titleFontSize: PropTypes.oneOf(Object.keys(fontSizes)), + authorFontSize: PropTypes.oneOf(Object.keys(fontSizes)), + descriptionFontSize: PropTypes.oneOf(Object.keys(fontSizes)), + authorLineHeight: PropTypes.oneOf(Object.keys(lineHeights)), +}; + +export default ArticleContent; diff --git a/src/components/UI/molecules/ArticleContent/ArticleContent.md b/src/components/UI/molecules/ArticleContent/ArticleContent.md new file mode 100644 index 0000000..635c2bd --- /dev/null +++ b/src/components/UI/molecules/ArticleContent/ArticleContent.md @@ -0,0 +1,19 @@ +ArticleContent Default: + +```jsx + +``` + +ArticleContent with all attributes: + +```jsx + +``` \ No newline at end of file diff --git a/src/components/UI/molecules/ArticleContent/ArticleContent.spec.js b/src/components/UI/molecules/ArticleContent/ArticleContent.spec.js new file mode 100644 index 0000000..7124cc2 --- /dev/null +++ b/src/components/UI/molecules/ArticleContent/ArticleContent.spec.js @@ -0,0 +1,55 @@ +/* eslint-disable max-len */ +import React from 'react'; +import { render, cleanup } from '/helpers/testUtils'; +import ArticleContent from './ArticleContent'; +import '@testing-library/jest-dom/extend-expect'; + +afterEach(cleanup); + +const setup = () => { + const utils = render( + , + ); + + return { ...utils }; +}; + +describe('ArticleContent', () => { + it('should render the ArticleContent component', () => { + const { container } = setup(); + + expect(container).toBeTruthy(); + }); + + it('should render the ArticleContent Component with titleFontSize', () => { + const { container } = render(); + + expect(container.lastChild).toHaveStyle(` + titleFontSize: large + `); + }); + + it('should render the ArticleContent Component with authorFontSize', () => { + const { container } = render(); + + expect(container.lastChild).toHaveStyle(` + authorFontSize: medium, + `); + }); + + it('should render the ArticleContent Component with descriptionFontSize', () => { + const { container } = render(); + + expect(container.lastChild).toHaveStyle(` + descriptionFontSize: medium, + `); + }); + + it('should render the ArticleContent Component with authorLineHeight', () => { + const { container } = render(); + + expect(container.lastChild).toHaveStyle(` + authorLineHeight: single, + `); + }); +}); diff --git a/src/components/UI/molecules/ImageText/ImageText.jsx b/src/components/UI/molecules/ImageText/ImageText.jsx new file mode 100644 index 0000000..c5d1a09 --- /dev/null +++ b/src/components/UI/molecules/ImageText/ImageText.jsx @@ -0,0 +1,56 @@ +/* eslint-disable no-use-before-define */ +import React from 'react'; +import PropTypes from 'prop-types'; + +import FlexContainer from '/layouts/FlexContainer/FlexContainer'; +import ArticleContent from '/ArticleContent/ArticleContent'; +import Image from '/Image/Image'; + +/** + * @description - ImageText Component + * + * @prop {string} imageUrl - imageUrl + * @prop {string} title - title + * @prop {string} author - author + * @prop {string} description - description + * + * @return {component} ImageText + */ +const ImageText = ({ + imageUrl, + title, + author, + description, +}) => { + return ( + + + + + + + ); +}; + +ImageText.propTypes = { + imageUrl: PropTypes.string, + title: PropTypes.string, + author: PropTypes.string, + description: PropTypes.string, +}; + +export default ImageText; diff --git a/src/components/UI/molecules/ImageText/ImageText.md b/src/components/UI/molecules/ImageText/ImageText.md new file mode 100644 index 0000000..a9f23db --- /dev/null +++ b/src/components/UI/molecules/ImageText/ImageText.md @@ -0,0 +1,19 @@ +ImageText Default: + +```jsx + +``` + +Icon with all attributes +```jsx +import FlexContainer from '/layouts/FlexContainer/FlexContainer'; + + + +``` \ No newline at end of file diff --git a/src/components/UI/molecules/ImageText/ImageText.spec.js b/src/components/UI/molecules/ImageText/ImageText.spec.js new file mode 100644 index 0000000..7b79272 --- /dev/null +++ b/src/components/UI/molecules/ImageText/ImageText.spec.js @@ -0,0 +1,41 @@ +/* eslint-disable max-len */ +import React from 'react'; +import { render, cleanup } from '/helpers/testUtils'; +import ImageText from './ImageText'; +import '@testing-library/jest-dom/extend-expect'; + +afterEach(cleanup); + +const setup = (props) => { + const utils = render( + , + ); + + return { ...utils }; +}; + +describe('ImageText', () => { + it('should render the ImageText component', () => { + const { container } = setup(); + + expect(container).toBeTruthy(); + }); + + it('should render ImageText with title', () => { + const { getByText } = render(); + + expect(getByText('City by the bay')).toBeTruthy(); + }); + + it('should render ImageText with author', () => { + const { getByText } = render(); + + expect(getByText('By : Emmy Joan')).toBeTruthy(); + }); + + it('should render ImageText with description', () => { + const { getByText } = render(); + + expect(getByText('This is a description')).toBeTruthy(); + }); +}); diff --git a/src/components/UI/molecules/SearchBar/SearchBar.spec.js b/src/components/UI/molecules/SearchBar/SearchBar.spec.js index 6b3fbb9..ea1a8d9 100644 --- a/src/components/UI/molecules/SearchBar/SearchBar.spec.js +++ b/src/components/UI/molecules/SearchBar/SearchBar.spec.js @@ -36,7 +36,6 @@ describe('Search Bar', () => { padding: 0.9rem; border-radius: 4.05rem; box-shadow: none; - border: 1px solid transparent; `); }); @@ -52,7 +51,6 @@ describe('Search Bar', () => { padding: 0.9rem; border-radius: 4.05rem; box-shadow: none; - border: 1px solid transparent; `); }); diff --git a/src/components/templates/PageLayout/PageLayout.jsx b/src/components/templates/PageLayout/PageLayout.jsx index 06cab1b..23b523c 100644 --- a/src/components/templates/PageLayout/PageLayout.jsx +++ b/src/components/templates/PageLayout/PageLayout.jsx @@ -52,6 +52,7 @@ PageLayout.Container = styled.div` display: flex; justify-content: ${justifyContent}; align-items: ${alignItems}; + flex-direction: column `} `; diff --git a/src/styles/variables/colorPalette.js b/src/styles/variables/colorPalette.js index 02fae9d..a220e76 100644 --- a/src/styles/variables/colorPalette.js +++ b/src/styles/variables/colorPalette.js @@ -22,6 +22,8 @@ export const textColors = { grey: '#7A757E', red: '#FF0000', pink: '#D97BC4', + lightBrown: '#C2A3A3', + white001: '#FFFFFF', }; export const backgroundColors = { @@ -29,6 +31,7 @@ export const backgroundColors = { primary: '#690375', white001: '#FFFFFF', transparent: 'transparent', + darkPink: '#B02091', }; export const borderColors = { diff --git a/src/styles/variables/fonts.js b/src/styles/variables/fonts.js index 869748c..542d0f4 100644 --- a/src/styles/variables/fonts.js +++ b/src/styles/variables/fonts.js @@ -4,8 +4,9 @@ export const fontSizes = { normal: '1.6rem', title: '2.0rem', medium: '2.4rem', + medx: '2.6rem', large: '3.2rem', - xlarge: '4.8rem', + xlarge: '4.5rem', }; export const fontWeights = { @@ -13,3 +14,11 @@ export const fontWeights = { bold: 700, heavy: 900, }; + +export const lineHeights = { + zero: '0', + single: '1.0', + medium: '1.5', + double: '2.0', + max: '6.2', +}; diff --git a/src/styles/variables/mainTheme.js b/src/styles/variables/mainTheme.js index 8974d77..4640a28 100644 --- a/src/styles/variables/mainTheme.js +++ b/src/styles/variables/mainTheme.js @@ -1,5 +1,5 @@ import spacing from './spacing'; -import { fontSizes, fontWeights } from './fonts'; +import { fontSizes, fontWeights, lineHeights } from './fonts'; import { buttonColors, textColors, @@ -21,6 +21,7 @@ export default { fontSizes, iconSizes, fontWeights, + lineHeights, buttonColors, textColors, backgroundColors, diff --git a/src/styles/variables/spacing.js b/src/styles/variables/spacing.js index 3f8070d..429cb30 100644 --- a/src/styles/variables/spacing.js +++ b/src/styles/variables/spacing.js @@ -11,7 +11,7 @@ const spacing = { md: '3.2rem', mds: '3.8rem', xl: '4.05rem', - xxl: '8.2rem', + xxl: '6.0rem', }; export default spacing; diff --git a/src/styles/variables/width.js b/src/styles/variables/width.js index 1824a50..42673d0 100644 --- a/src/styles/variables/width.js +++ b/src/styles/variables/width.js @@ -1,6 +1,8 @@ export const width = { fullWidth: '100%', searchBarWidth: '50%', + imageWidth: '46%', + articleWidth: '54%', }; export default width;