From 32a5c4f25366c91c4218f863925cfdb8de78d08b Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 3 Nov 2020 23:55:07 -0500 Subject: [PATCH 1/9] Added react-trello package. --- react-ui/package-lock.json | 187 ++++++++++++++++++++++++++++++++++++- react-ui/package.json | 1 + 2 files changed, 185 insertions(+), 3 deletions(-) diff --git a/react-ui/package-lock.json b/react-ui/package-lock.json index 819a64c..c1a8ccd 100644 --- a/react-ui/package-lock.json +++ b/react-ui/package-lock.json @@ -1514,7 +1514,6 @@ "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "dev": true, "requires": { "@emotion/memoize": "0.7.4" } @@ -6661,6 +6660,11 @@ "postcss-value-parser": "^4.1.0" } }, + "autosize": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.2.tgz", + "integrity": "sha512-jnSyH2d+qdfPGpWlcuhGiHmqBJ6g3X+8T+iRwFrHPLVcdoGJE/x6Qicm6aDHfTsbgZKxyV8UU/YB2p4cjKDRRA==" + }, "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", @@ -7067,6 +7071,17 @@ "integrity": "sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==", "dev": true }, + "babel-plugin-styled-components": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz", + "integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11" + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -8057,6 +8072,11 @@ "map-obj": "^1.0.0" } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "can-use-dom": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz", @@ -9284,6 +9304,11 @@ "postcss": "^7.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -9379,6 +9404,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -9633,6 +9668,11 @@ "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=", "dev": true }, + "deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=" + }, "deep-equal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", @@ -12766,6 +12806,14 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz", "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==" }, + "immutability-helper": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.9.1.tgz", + "integrity": "sha512-r/RmRG8xO06s/k+PIaif2r5rGc3j4Yhc01jSBfwPCXDLYZwp/yxralI37Df1mwmuzcCsen/E/ITKcTEvc1PQmQ==", + "requires": { + "invariant": "^2.2.0" + } + }, "import-cwd": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", @@ -14326,6 +14374,11 @@ } } }, + "just-curry-it": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/just-curry-it/-/just-curry-it-3.1.0.tgz", + "integrity": "sha512-mjzgSOFzlrurlURaHVjnQodyPNvrHrf1TbQP2XU9NSqBtHQPuHZ+Eb6TAJP7ASeJN9h9K0KXoRTs8u6ouHBKvg==" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -18322,6 +18375,18 @@ "warning": "^4.0.3" } }, + "react-popopo": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/react-popopo/-/react-popopo-2.1.9.tgz", + "integrity": "sha512-zXOpcLSpaLZmBxhdtenJzQPLjY81XknVS/tXH4Kv5BBrnYIUPHvVdGmS7+o9s7DjCzzdK7AdVwtG+FVSO0cZ8g==", + "requires": { + "classnames": ">= 2.0", + "prop-types": "^15.7.2", + "react": ">= 16.3", + "react-dom": ">= 16.3", + "styled-components": ">= 4.0" + } + }, "react-popper": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", @@ -18355,6 +18420,27 @@ "react-popper": "^1.3.7" } }, + "react-redux": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.1.2.tgz", + "integrity": "sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==", + "requires": { + "@babel/runtime": "^7.1.2", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "loose-envify": "^1.1.0", + "prop-types": "^15.6.1", + "react-is": "^16.6.0", + "react-lifecycles-compat": "^3.0.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", @@ -18761,6 +18847,25 @@ "prop-types": "^15.6.2" } }, + "react-trello": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/react-trello/-/react-trello-2.2.8.tgz", + "integrity": "sha512-SsEYq6z8n2FE1jP54MP7hKtOuxFTJLL4fm/NvulWKeM6Z8zZnM1FnWeZ8W84iFkAWjd1BXytOaZb0dMz3/H0RQ==", + "requires": { + "autosize": "^4.0.2", + "classnames": "^2.2.6", + "immutability-helper": "^2.8.1", + "lodash": "^4.17.11", + "prop-types": "^15.7.2", + "react-popopo": "^2.1.9", + "react-redux": "^5.0.7", + "redux": "^4.0.0", + "redux-actions": "^2.6.1", + "redux-logger": "^3.0.6", + "trello-smooth-dnd": "1.0.0", + "uuid": "^3.3.2" + } + }, "reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", @@ -18863,6 +18968,40 @@ "strip-indent": "^3.0.0" } }, + "reduce-reducers": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/reduce-reducers/-/reduce-reducers-0.4.3.tgz", + "integrity": "sha512-+CNMnI8QhgVMtAt54uQs3kUxC3Sybpa7Y63HR14uGLgI9/QR5ggHvpxwhGGe3wmx5V91YwqQIblN9k5lspAmGw==" + }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, + "redux-actions": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/redux-actions/-/redux-actions-2.6.5.tgz", + "integrity": "sha512-pFhEcWFTYNk7DhQgxMGnbsB1H2glqhQJRQrtPb96kD3hWiZRzXHwwmFPswg6V2MjraXRXWNmuP9P84tvdLAJmw==", + "requires": { + "invariant": "^2.2.4", + "just-curry-it": "^3.1.0", + "loose-envify": "^1.4.0", + "reduce-reducers": "^0.4.3", + "to-camel-case": "^1.0.0" + } + }, + "redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "requires": { + "deep-diff": "^0.3.5" + } + }, "refractor": { "version": "2.10.1", "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.1.tgz", @@ -19827,8 +19966,7 @@ "shallowequal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", - "dev": true + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" }, "shebang-command": { "version": "1.2.0", @@ -20603,6 +20741,23 @@ "inline-style-parser": "0.1.1" } }, + "styled-components": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz", + "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^0.8.8", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -21056,11 +21211,24 @@ "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=" }, + "to-camel-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz", + "integrity": "sha1-GlYFSy+daWKYzmamCJcyK29CPkY=", + "requires": { + "to-space-case": "^1.0.0" + } + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" }, + "to-no-case": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz", + "integrity": "sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=" + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", @@ -21089,6 +21257,14 @@ "repeat-string": "^1.6.1" } }, + "to-space-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz", + "integrity": "sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=", + "requires": { + "to-no-case": "^1.0.0" + } + }, "toggle-selection": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz", @@ -21123,6 +21299,11 @@ "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", "dev": true }, + "trello-smooth-dnd": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trello-smooth-dnd/-/trello-smooth-dnd-1.0.0.tgz", + "integrity": "sha512-KgYEwmxX08Dl4OmioEv24LSnlNp9jNv8lwTQlUMbMm6B+VuwyQuuuoyu4wlsRweiMCCC6sZXpCCGkmAni/vCaQ==" + }, "trim": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", diff --git a/react-ui/package.json b/react-ui/package.json index 1594345..2438f58 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -24,6 +24,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "react-syntax-highlighter": "^12.2.1", + "react-trello": "^2.2.8", "startto-map": "code-for-canada/start-map#master" }, "devDependencies": { From 14622c1f34a914fade72d78e45190f1680bdf713 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Tue, 3 Nov 2020 23:55:53 -0500 Subject: [PATCH 2/9] Added stubs of custom Kanban components and stories. --- react-ui/.storybook/data/kanban.json | 129 ++++++++++++++++++ react-ui/src/components/Kanban/CustomCard.js | 8 ++ react-ui/src/components/Kanban/Kanban.js | 26 ++++ .../src/components/Kanban/Kanban.stories.js | 16 +++ .../src/components/Kanban/MaterialCard.js | 0 5 files changed, 179 insertions(+) create mode 100644 react-ui/.storybook/data/kanban.json create mode 100644 react-ui/src/components/Kanban/CustomCard.js create mode 100644 react-ui/src/components/Kanban/Kanban.js create mode 100644 react-ui/src/components/Kanban/Kanban.stories.js create mode 100644 react-ui/src/components/Kanban/MaterialCard.js diff --git a/react-ui/.storybook/data/kanban.json b/react-ui/.storybook/data/kanban.json new file mode 100644 index 0000000..cbd8262 --- /dev/null +++ b/react-ui/.storybook/data/kanban.json @@ -0,0 +1,129 @@ +{ + "lanes": [ + { + "id": "Uncategorized", + "title": "Uncategorized", + "label": "20/70", + "style": {"width": 280}, + "cards": [] + }, + { + "id": "New", + "title": "New", + "label": "20/70", + "style": {"width": 280}, + "cards": [ + { + "id": "Milk", + "title": "Buy milk", + "label": "15 mins", + "metadata": { + "foo": "bar" + }, + "description": "This card has metadata!" + }, + { + "id": "Plan2", + "title": "Dispose Garbage", + "label": "10 mins", + "description": "Sort out recyclable and waste as needed" + }, + { + "id": "Plan3", + "title": "Write Blog", + "label": "30 mins", + "description": "Can AI make memes?" + }, + { + "id": "Plan4", + "title": "Pay Rent", + "label": "5 mins", + "description": "Transfer to bank account" + } + ] + }, + { + "id": "In progress", + "title": "In progress", + "label": "10/20", + "style": {"width": 280}, + "cards": [ + { + "id": "Wip1", + "title": "Clean House", + "label": "30 mins", + "description": "Soap wash and polish floor. Polish windows and doors. Scrap all broken glasses" + } + ] + }, + { + "id": "Completed", + "title": "Completed", + "label": "0/0", + "style": {"width": 280}, + "cards": [] + }, + { + "id": "Documentation in progress", + "title": "Documentation in progress", + "style": {"width": 280}, + "label": "2/5", + "cards": [ + { + "id": "Completed1", + "title": "Practice Meditation", + "label": "15 mins", + "description": "Use Headspace app" + }, + { + "id": "Completed2", + "title": "Maintain Daily Journal", + "label": "15 mins", + "description": "Use Spreadsheet for now" + } + ] + }, + { + "id": "Published", + "title": "Published", + "style": {"width": 280}, + "label": "1/1", + "cards": [ + { + "id": "Repeat1", + "title": "Morning Jog", + "label": "30 mins", + "description": "Track using fitbit" + } + ] + }, + { + "id": "On hold", + "title": "On hold", + "style": {"width": 280}, + "label": "1/1", + "cards": [ + { + "id": "Archived1", + "title": "Go Trekking", + "label": "300 mins", + "description": "Completed 10km on cycle" + } + ] + }, + { + "id": "Needs repair", + "title": "Needs repair", + "style": {"width": 280}, + "label": "1/1", + "cards": [ + { + "id": "Archived2", + "title": "Go Jogging", + "label": "300 mins", + "description": "Completed 10km on cycle" + } + ] + } + ] +} diff --git a/react-ui/src/components/Kanban/CustomCard.js b/react-ui/src/components/Kanban/CustomCard.js new file mode 100644 index 0000000..11ff6f3 --- /dev/null +++ b/react-ui/src/components/Kanban/CustomCard.js @@ -0,0 +1,8 @@ +import React from 'react' +import Card from 'react-trello/dist/components/Card' + +const CustomCard = props => ( + +) + +export default CustomCard diff --git a/react-ui/src/components/Kanban/Kanban.js b/react-ui/src/components/Kanban/Kanban.js new file mode 100644 index 0000000..a4a59f5 --- /dev/null +++ b/react-ui/src/components/Kanban/Kanban.js @@ -0,0 +1,26 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Board from 'react-trello' +import CustomCard from './CustomCard' + +const Kanban = ({ data = {}, onCardClick }) => { + return ( + + ) +} + +Kanban.propTypes = { + data: PropTypes.object, + onCardClick: PropTypes.func +} + +export default Kanban diff --git a/react-ui/src/components/Kanban/Kanban.stories.js b/react-ui/src/components/Kanban/Kanban.stories.js new file mode 100644 index 0000000..d80f92b --- /dev/null +++ b/react-ui/src/components/Kanban/Kanban.stories.js @@ -0,0 +1,16 @@ +import React from 'react' +import Kanban from './Kanban' + +const data = require('./../../../.storybook/data/kanban.json') + +export default { + component: Kanban, + title: 'Kanban' +} + +const Template = args => + +export const Default = Template.bind({}) +Default.args = { + data: data +} diff --git a/react-ui/src/components/Kanban/MaterialCard.js b/react-ui/src/components/Kanban/MaterialCard.js new file mode 100644 index 0000000..e69de29 From 6a5744ab1ba35d5205b09fc38ebc8ea90a9af773 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Wed, 4 Nov 2020 04:13:13 -0500 Subject: [PATCH 3/9] Added artworks kanban data. Added Dialog component to Kanban. --- react-ui/.storybook/data/kanban-artworks.json | 97 +++++++++++++++++++ .../data/{kanban.json => kanban-generic.json} | 5 +- react-ui/src/components/Kanban/Kanban.js | 69 ++++++++++--- .../src/components/Kanban/Kanban.stories.js | 17 +++- 4 files changed, 169 insertions(+), 19 deletions(-) create mode 100644 react-ui/.storybook/data/kanban-artworks.json rename react-ui/.storybook/data/{kanban.json => kanban-generic.json} (96%) diff --git a/react-ui/.storybook/data/kanban-artworks.json b/react-ui/.storybook/data/kanban-artworks.json new file mode 100644 index 0000000..49b76e1 --- /dev/null +++ b/react-ui/.storybook/data/kanban-artworks.json @@ -0,0 +1,97 @@ +{ + "lanes": [ + { + "id": "Uncategorized", + "title": "Uncategorized", + "label": "20/70", + "style": {"width": 280}, + "cards": [] + }, + { + "id": "New", + "title": "New", + "label": "20/70", + "style": {"width": 280}, + "cards": [ + { + "id": "recD3d7eyJRd23Akp", + "title": "-", + "program": "StART Support", + "description": "" + }, + { + "id": "reclWYiF8w8f0mEPw", + "title": "-", + "program": "StART Support", + "description": "" + } + ] + }, + { + "id": "In progress", + "title": "In progress", + "label": "10/20", + "style": {"width": 280}, + "cards": [] + }, + { + "id": "Completed", + "title": "Completed", + "label": "0/0", + "style": {"width": 280}, + "cards": [] + }, + { + "id": "Documentation in progress", + "title": "Documentation in progress", + "style": {"width": 280}, + "label": "2/5", + "cards": [] + }, + { + "id": "Published", + "title": "Published", + "style": {"width": 280}, + "cards": [ + { + "id": "recsGkS5DtrZANnVe", + "title": "Roshni Wijayasinha - York St & Richmond St W", + "program": "Outside the Box", + "description": "This piece aims to use various bright colours, energetic lines and shapes that interact with each other, similar to the vibrant and diverse people, communities and landscapes that shape Toronto. " + }, + { + "id": "recIqwQAYh3fDPGOT", + "title": "Jeannette Nguyen - York Mills Rd & Fenside Dr", + "program": "Outside the Box", + "description": "This design pays homage to the sometimes pesky, always adorable furry critters Torontonians share the city with. A fox is on the front of the box, ready to eat; around the side of the box, a rabbit realizes he’s being eyed as the fox’s dinner. On the back of the box a raccoon shares his banana with a skunk depicted on the remaining side of the box." + }, + { + "id": "rec2Nb1anOd6iJMui", + "title": "Kelly Diamond - Yonge St & Yonge Blvd", + "program": "Outside the Box", + "description": "This piece highlights an incredibly beautiful relationship between bees and flowers, while also highlighting the relationship of bees today in urban environments to shed some light on the troubling numbers of current bee populations." + }, + { + "id": "rec3knQ2cKR2jhnOm", + "title": "Julii McMillan - Yonge St & Yonge Blvd", + "program": "Outside the Box", + "description": "A box becomes a mini park, full of people, kids and animals, inspired by real characters seen in the neighborhood!" + } + ] + }, + { + "id": "On hold", + "title": "On hold", + "style": {"width": 280}, + "label": "1/1", + "cards": [] + }, + { + "id": "Needs repair", + "title": "Needs repair", + "style": {"width": 280}, + "label": "1/1", + "cards": [] + } + ] +} diff --git a/react-ui/.storybook/data/kanban.json b/react-ui/.storybook/data/kanban-generic.json similarity index 96% rename from react-ui/.storybook/data/kanban.json rename to react-ui/.storybook/data/kanban-generic.json index cbd8262..ca51f47 100644 --- a/react-ui/.storybook/data/kanban.json +++ b/react-ui/.storybook/data/kanban-generic.json @@ -17,10 +17,7 @@ "id": "Milk", "title": "Buy milk", "label": "15 mins", - "metadata": { - "foo": "bar" - }, - "description": "This card has metadata!" + "description": "Pick it up at the store" }, { "id": "Plan2", diff --git a/react-ui/src/components/Kanban/Kanban.js b/react-ui/src/components/Kanban/Kanban.js index a4a59f5..f81e774 100644 --- a/react-ui/src/components/Kanban/Kanban.js +++ b/react-ui/src/components/Kanban/Kanban.js @@ -1,26 +1,69 @@ -import React from 'react' +import React, { useState } from 'react' import PropTypes from 'prop-types' import Board from 'react-trello' import CustomCard from './CustomCard' +import { Dialog, DialogTitle, DialogActions, DialogContent, DialogContentText } from '@material-ui/core' +import Slide from '@material-ui/core/Slide' +import { Button } from 'react-bootstrap' + +const DialogTransition = React.forwardRef(function DialogTransition(props, ref) { + return +}) + +const Kanban = ({ data = {}, onCardClick, onDataChange, onDragEnd }) => { + const [ showCard, setShowCard ] = useState(false) + const [ activeCard, setActiveCard ] = useState({}) + + const handleCardClick = (cardId, metadata, laneId) => { + onCardClick(cardId, metadata, laneId) + setActiveCard(metadata || {}) + setShowCard(true) + } + + const handleClose = () => { + setShowCard(false) + } -const Kanban = ({ data = {}, onCardClick }) => { return ( - + <> + + + {activeCard.title} + + + 
+              {JSON.stringify(activeCard, null, 2)}
+
+ + + + + + + ) } Kanban.propTypes = { data: PropTypes.object, - onCardClick: PropTypes.func + onCardClick: PropTypes.func, + onDataChange: PropTypes.func, + onDragEnd: PropTypes.func } export default Kanban diff --git a/react-ui/src/components/Kanban/Kanban.stories.js b/react-ui/src/components/Kanban/Kanban.stories.js index d80f92b..82d6fb0 100644 --- a/react-ui/src/components/Kanban/Kanban.stories.js +++ b/react-ui/src/components/Kanban/Kanban.stories.js @@ -1,7 +1,20 @@ import React from 'react' import Kanban from './Kanban' -const data = require('./../../../.storybook/data/kanban.json') +const data = require('./../../../.storybook/data/kanban-artworks.json') + +const populateMetadata = data => ({ + lanes: data.lanes.map(lane => ({ + ...lane, + label: lane.cards.length.toString(), + cards: lane.cards.map(card => ({ + ...card, + metadata: card + })) + })) +}) + +const populatedData = populateMetadata(data) export default { component: Kanban, @@ -12,5 +25,5 @@ const Template = args => export const Default = Template.bind({}) Default.args = { - data: data + data: populatedData } From 937c1a33312daed6ffd51560db7eac89a531b074 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Thu, 5 Nov 2020 00:21:42 -0500 Subject: [PATCH 4/9] Added fully fleshed out CustomCard component and story. --- react-ui/src/components/Kanban/CustomCard.js | 91 ++++++++++++++++++- .../components/Kanban/CustomCard.stories.js | 28 ++++++ 2 files changed, 114 insertions(+), 5 deletions(-) create mode 100644 react-ui/src/components/Kanban/CustomCard.stories.js diff --git a/react-ui/src/components/Kanban/CustomCard.js b/react-ui/src/components/Kanban/CustomCard.js index 11ff6f3..b6d64a4 100644 --- a/react-ui/src/components/Kanban/CustomCard.js +++ b/react-ui/src/components/Kanban/CustomCard.js @@ -1,8 +1,89 @@ -import React from 'react' -import Card from 'react-trello/dist/components/Card' +import React, {Component} from 'react' +import PropTypes from 'prop-types' -const CustomCard = props => ( - -) +import { + MovableCardWrapper, + CardHeader, + CardRightContent, + CardTitle, + Detail, + Footer +} from 'react-trello/dist/styles/Base' +import Tag from 'react-trello/dist/components/Card/Tag' +import DeleteButton from 'react-trello/dist/widgets/DeleteButton' + +class CustomCard extends Component { + onDelete = e => { + this.props.onDelete() + e.stopPropagation() + } + + render() { + const { + showDeleteButton, + style, + tagStyle, + onClick, + //onDelete, + className, + id, + title, + label, + description, + tags, + cardDraggable + } = this.props + + return ( + + + {title} + {label} + {showDeleteButton && } + + {description} + {tags && tags.length> 0 && ( +
+ {tags.map(tag => ( + + ))} +
+ )} + + ) + } +} + +CustomCard.propTypes = { + showDeleteButton: PropTypes.bool, + onDelete: PropTypes.func, + onClick: PropTypes.func, + style: PropTypes.object, + tagStyle: PropTypes.object, + className: PropTypes.string, + id: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + label: PropTypes.string, + description: PropTypes.string, + tags: PropTypes.array, +} + +CustomCard.defaultProps = { + showDeleteButton: true, + onDelete: () => {}, + onClick: () => {}, + style: {}, + tagStyle: {}, + title: 'no title', + description: '', + label: '', + tags: [], + className: '' +} export default CustomCard diff --git a/react-ui/src/components/Kanban/CustomCard.stories.js b/react-ui/src/components/Kanban/CustomCard.stories.js new file mode 100644 index 0000000..aba43d2 --- /dev/null +++ b/react-ui/src/components/Kanban/CustomCard.stories.js @@ -0,0 +1,28 @@ +import React from 'react' +import CustomCard from './CustomCard' + +const artworkData = { + id: 'recDiogvIMmmefeKs', + media: 'https://dl.airtable.com/.attachmentThumbnails/0ce069864d50a15f7ae81479bb893e10/e7c55186', + location: 'Danforth Ave & Amroth Ave', + title: 'Emilia Jajus', + program: 'Partnership Program', + artist: 'Emilia Jajus', + partner: 'Seeds of Hope Foundation', + year: 2012, + description: 'The Bell Box Murals project has transformed utility cabinets into works of art. This piece is an interpretation of a historical photograph of horses and wagons on old Danforth Avenue.', + ward: 19, + status: ['Published'] +} + +export default { + component: CustomCard, + title: 'Kanban Board/CustomCard' +} + +const Template = args => + +export const Default = Template.bind({}) +Default.args = { + ...artworkData +} From 4fd2c25149d52f7410fb4699578125c9ced5909f Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Thu, 5 Nov 2020 00:22:04 -0500 Subject: [PATCH 5/9] Added images to sample cards. --- react-ui/.storybook/data/kanban-artworks.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/react-ui/.storybook/data/kanban-artworks.json b/react-ui/.storybook/data/kanban-artworks.json index 49b76e1..023a489 100644 --- a/react-ui/.storybook/data/kanban-artworks.json +++ b/react-ui/.storybook/data/kanban-artworks.json @@ -56,24 +56,28 @@ { "id": "recsGkS5DtrZANnVe", "title": "Roshni Wijayasinha - York St & Richmond St W", + "media": "https://dl.airtable.com/.attachmentThumbnails/de07363e6a0be848cbcbb2ad92f6281c/5838a65d", "program": "Outside the Box", "description": "This piece aims to use various bright colours, energetic lines and shapes that interact with each other, similar to the vibrant and diverse people, communities and landscapes that shape Toronto. " }, { "id": "recIqwQAYh3fDPGOT", "title": "Jeannette Nguyen - York Mills Rd & Fenside Dr", + "media": "https://dl.airtable.com/.attachmentThumbnails/aa896b19b0ab351326478f54009a8fa3/ae6aab66", "program": "Outside the Box", "description": "This design pays homage to the sometimes pesky, always adorable furry critters Torontonians share the city with. A fox is on the front of the box, ready to eat; around the side of the box, a rabbit realizes he’s being eyed as the fox’s dinner. On the back of the box a raccoon shares his banana with a skunk depicted on the remaining side of the box." }, { "id": "rec2Nb1anOd6iJMui", "title": "Kelly Diamond - Yonge St & Yonge Blvd", + "media": "https://dl.airtable.com/.attachmentThumbnails/61529bd5e227cf798e7faf8b58ec6049/7fa98897", "program": "Outside the Box", "description": "This piece highlights an incredibly beautiful relationship between bees and flowers, while also highlighting the relationship of bees today in urban environments to shed some light on the troubling numbers of current bee populations." }, { "id": "rec3knQ2cKR2jhnOm", "title": "Julii McMillan - Yonge St & Yonge Blvd", + "media": "https://dl.airtable.com/.attachmentThumbnails/906f636c6ace0a7dd9f54be49519ff12/bad51517", "program": "Outside the Box", "description": "A box becomes a mini park, full of people, kids and animals, inspired by real characters seen in the neighborhood!" } From 69c7ea91e657a9ccb85471cd16b7772f8e3b76e0 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Thu, 5 Nov 2020 00:22:44 -0500 Subject: [PATCH 6/9] Added MaterialCard component and stories. --- react-ui/src/components/Kanban/Kanban.js | 4 +- .../src/components/Kanban/Kanban.stories.js | 2 +- .../src/components/Kanban/MaterialCard.js | 66 +++++++++++++++++++ .../components/Kanban/MaterialCard.stories.js | 28 ++++++++ react-ui/src/components/Kanban/ProgramChip.js | 31 +++++++++ 5 files changed, 128 insertions(+), 3 deletions(-) create mode 100644 react-ui/src/components/Kanban/MaterialCard.stories.js create mode 100644 react-ui/src/components/Kanban/ProgramChip.js diff --git a/react-ui/src/components/Kanban/Kanban.js b/react-ui/src/components/Kanban/Kanban.js index f81e774..6a1fe6b 100644 --- a/react-ui/src/components/Kanban/Kanban.js +++ b/react-ui/src/components/Kanban/Kanban.js @@ -1,7 +1,7 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' import Board from 'react-trello' -import CustomCard from './CustomCard' +import MaterialCard from './MaterialCard' import { Dialog, DialogTitle, DialogActions, DialogContent, DialogContentText } from '@material-ui/core' import Slide from '@material-ui/core/Slide' import { Button } from 'react-bootstrap' @@ -35,7 +35,7 @@ const Kanban = ({ data = {}, onCardClick, onDataChange, onDragEnd }) => { laneDraggable={false} hideCardDeleteIcon components={{ - Card: CustomCard + Card: MaterialCard }} /> diff --git a/react-ui/src/components/Kanban/MaterialCard.js b/react-ui/src/components/Kanban/MaterialCard.js index e69de29..7e4a8df 100644 --- a/react-ui/src/components/Kanban/MaterialCard.js +++ b/react-ui/src/components/Kanban/MaterialCard.js @@ -0,0 +1,66 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { + Card, + CardActionArea, + CardContent, + CardMedia, + createMuiTheme, + makeStyles, + Typography +} from '@material-ui/core' +import ProgramChip from './ProgramChip' + +// const BASE_ID = 'tbl5ApSEOzPpe4fwp' +// const TABLE_ID = 'viw2swQLeJ9xwU82F' + +const theme = createMuiTheme() +const useStyles = makeStyles({ + root: { + minWidth: 230, + maxWidth: 250, + marginBottom: theme.spacing(1) + }, + media: { + height: 140 + } +}) + +const MaterialCard = props => { + const classes = useStyles() + + return ( + + + {props.media && } + + + {props.title} + + + {props.description} + + + + + + ) +} + +MaterialCard.propTypes = { + foo: PropTypes.string, +} + +export default MaterialCard diff --git a/react-ui/src/components/Kanban/MaterialCard.stories.js b/react-ui/src/components/Kanban/MaterialCard.stories.js new file mode 100644 index 0000000..f88cd44 --- /dev/null +++ b/react-ui/src/components/Kanban/MaterialCard.stories.js @@ -0,0 +1,28 @@ +import React from 'react' +import MaterialCard from './MaterialCard' + +const artworkData = { + id: 'recDiogvIMmmefeKs', + media: 'https://dl.airtable.com/.attachmentThumbnails/0ce069864d50a15f7ae81479bb893e10/e7c55186', + location: 'Danforth Ave & Amroth Ave', + title: 'Emilia Jajus', + program: 'Partnership Program', + artist: 'Emilia Jajus', + partner: 'Seeds of Hope Foundation', + year: 2012, + description: 'The Bell Box Murals project has transformed utility cabinets into works of art. This piece is an interpretation of a historical photograph of horses and wagons on old Danforth Avenue.', + ward: 19, + status: ['Published'] +} + +export default { + component: MaterialCard, + title: 'Kanban Board/MaterialCard' +} + +const Template = args => + +export const Default = Template.bind({}) +Default.args = { + ...artworkData +} diff --git a/react-ui/src/components/Kanban/ProgramChip.js b/react-ui/src/components/Kanban/ProgramChip.js new file mode 100644 index 0000000..4f6de95 --- /dev/null +++ b/react-ui/src/components/Kanban/ProgramChip.js @@ -0,0 +1,31 @@ +import React from 'react' +import { Chip } from '@material-ui/core' + +const COLOR_PARTNERSHIP = '#004b84' +const COLOR_OUTSIDE_BOX = '#a41632' +const COLOR_START_SUPPORT = '#037f2f' +const COLOR_OTHER = '#cfb51c' + +const ProgramChip = props => { + const labelColors = { + 'Partnership Program': COLOR_PARTNERSHIP, + 'Outside the Box': COLOR_OUTSIDE_BOX, + 'StART Support': COLOR_START_SUPPORT, + 'Other': COLOR_OTHER + } + + const style = { + backgroundColor: labelColors[props.label], + color: '#ffffff' + } + + return ( + + ) +} + +export default ProgramChip From 0446c015e5cf7bcace8f91f463d022fe45079937 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Thu, 5 Nov 2020 01:34:48 -0500 Subject: [PATCH 7/9] Fixed multiline on Cards. Added placeholder image. Added link to edit on airtable. --- react-ui/src/assets/images/placeholder.png | Bin 0 -> 2227 bytes react-ui/src/components/Kanban/Kanban.js | 25 ++++++++++++------ .../src/components/Kanban/Kanban.stories.js | 1 + .../src/components/Kanban/MaterialCard.js | 8 +++++- 4 files changed, 25 insertions(+), 9 deletions(-) create mode 100644 react-ui/src/assets/images/placeholder.png diff --git a/react-ui/src/assets/images/placeholder.png b/react-ui/src/assets/images/placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..ace89d14caa68e727b9957aa21028d7d51852f87 GIT binary patch literal 2227 zcmV;k2u$~hP)005Z?0{{R3eky|k0000*P)t-s_V)I# zudn&}`K+w0^78V;#KiCK@3^?Qva+($($eee>#C}%-{0T+`}_3t^vlc3=H}+u*x0^@RCt{2o!hdbDiA;gL=Z#~HUIyqryIN{dur6w zac1oGlEh2ZcJ0;%8a2xZf*=TjAP9mW2!bF8g7~N4r@8wt|Kq62lk|pUZV2K$J-J-q zjbP^y{_em352Dr=Ofu0>SkB~EOfn%!<;Q4{@*Gb(v&8&dhk z36;DNf>ge9TxBf~zFX}OuiK`Jv|b!w_% zvyUoyyPNm|okYWzghMJ55L;U%Zz^}um)5Z+?EOAoWwy7pS6Rz%CE6iLMqR*%R8j0Ln^PZ$vdR-5@w}>R9<5J3>Q*)iFMu~m6urO9a4FT)O#kC-=H9s z--0iBhg4pJFOw)qtv7oE*q0^e__&XP= zn&<*cOL!x+&v;(NI(mrrIr7#jU-;Ma#^hA0YoSUAHeGNOIK8$ORMznxXMra+j>1LB z#>yZDjyIBvczH-GB|d5u^xDQ{A0PYukE4VHa~xH=Zmheq>21ohN~YqrEUJWadFU}d zArciIlM{TGE`DjP9v+x=P^IrcSX3EO-PNh-4Zuld!BmG=!@<6y(ps~;5Liv?;t3z% zYFU6vEkg)dx_%CK9@9;L%34D}C6zH6`MXLZl!MiVsTvZrh4@45T#hQ4MU_~&u((?f z=_))igM04bTBxJSS5!IA3P>tJAViusw#jk6fs>+ZTPYM~op^%hurr+XbI#^j$%MS^ zknRFi##wA=Bc*P$OFIyfnYXgB9#j@Mxd@_9FyUP*7*@UaD&ZPY2~pp3K=+|g8=S7F z5)-n+hjgn|V+e&Ryxj~u7n&82s#OI9(K&D!a_%OTZtm?kFW9Yzbq7%;KEqOAx5l!j z44Bd5y1d0^BSd7tdvl>d1kMa-?_GN9GR}w*x@!VlD;^L@X?g}-U9+v^5q^`BpZPaW2JFeBaS~pC#M9hBJ^WnLZRSAC4bpAEkc#N z!hZTj<$VWoKe^Uf2j}eAeGE9NTiU*0@shY#nQ4)|qVrZr;{z5eRw^5;@Z5GNH^T>r zE(oq1eYL!Z!Kg&R$5HjI$~f}tu|SE*3VPeYY*gY@S9Ry%+zBZ2E<=krV(EGdVdmkB z>*E;PUZu2^b4v6a)6Ot7c!6E144stCjYo4Ug~YpV+nFr8S{CcwoZfSGS+(4s$FUO zr+P$`7}Cd!V`~zcKzQonA{^db8bcL!hv3w1aa9maQkh|`EJh`)eYQ$SBdKBD$4`dM zbgt6WmRj4s?wEikH)pY;$SRxONjO-RwU%KpYlEc>EH`S`#hBIYBYpBdq(CZ^GWeW3 z=rk5mrt`H_O)jN`EqE7aS9N_z)yO<3UjV7``lheruW^ds z{(i@0*|;H}H-2v3AqavX2!bF8f*=TjAc%j0{{Xh3Y0GOEIjH~u002ovPDHLkV1j0? BM=}5a literal 0 HcmV?d00001 diff --git a/react-ui/src/components/Kanban/Kanban.js b/react-ui/src/components/Kanban/Kanban.js index 6a1fe6b..d261efd 100644 --- a/react-ui/src/components/Kanban/Kanban.js +++ b/react-ui/src/components/Kanban/Kanban.js @@ -2,15 +2,15 @@ import React, { useState } from 'react' import PropTypes from 'prop-types' import Board from 'react-trello' import MaterialCard from './MaterialCard' -import { Dialog, DialogTitle, DialogActions, DialogContent, DialogContentText } from '@material-ui/core' +import { Button, Dialog, DialogTitle, DialogActions, DialogContent, DialogContentText } from '@material-ui/core' import Slide from '@material-ui/core/Slide' -import { Button } from 'react-bootstrap' +import OpenInNewIcon from '@material-ui/icons/OpenInNew' const DialogTransition = React.forwardRef(function DialogTransition(props, ref) { return }) -const Kanban = ({ data = {}, onCardClick, onDataChange, onDragEnd }) => { +const Kanban = ({ data = {}, onCardClick, onDataChange, onDragEnd, airtableViewUrl }) => { const [ showCard, setShowCard ] = useState(false) const [ activeCard, setActiveCard ] = useState({}) @@ -45,14 +45,23 @@ const Kanban = ({ data = {}, onCardClick, onDataChange, onDragEnd }) => { > {activeCard.title} - - 
-              {JSON.stringify(activeCard, null, 2)}
-
+ + {JSON.stringify(activeCard, null, 2)} - + { + airtableViewUrl + ? + : null + } + diff --git a/react-ui/src/components/Kanban/Kanban.stories.js b/react-ui/src/components/Kanban/Kanban.stories.js index a1ec8a1..021cb37 100644 --- a/react-ui/src/components/Kanban/Kanban.stories.js +++ b/react-ui/src/components/Kanban/Kanban.stories.js @@ -25,5 +25,6 @@ const Template = args => export const Default = Template.bind({}) Default.args = { + airtableViewUrl: 'https://airtable.com/tbl5ApSEOzPpe4fwp/viw2swQLeJ9xwU82F', data: populatedData } diff --git a/react-ui/src/components/Kanban/MaterialCard.js b/react-ui/src/components/Kanban/MaterialCard.js index 7e4a8df..1aa9936 100644 --- a/react-ui/src/components/Kanban/MaterialCard.js +++ b/react-ui/src/components/Kanban/MaterialCard.js @@ -10,6 +10,7 @@ import { Typography } from '@material-ui/core' import ProgramChip from './ProgramChip' +import placeholder from 'assets/images/placeholder.png' // const BASE_ID = 'tbl5ApSEOzPpe4fwp' // const TABLE_ID = 'viw2swQLeJ9xwU82F' @@ -29,10 +30,12 @@ const useStyles = makeStyles({ const MaterialCard = props => { const classes = useStyles() + const image = props.media ? props.media : placeholder + return ( - {props.media && } + {props.title} @@ -43,6 +46,9 @@ const MaterialCard = props => { color="textSecondary" component="p" style={{ + // Allow multiline + whiteSpace: 'pre-wrap', + // Max 3 line before ellipses textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '3', From 586d8df522fbaf9079f071eaa2e54b399c1b1144 Mon Sep 17 00:00:00 2001 From: Patrick Connolly Date: Thu, 5 Nov 2020 01:53:04 -0500 Subject: [PATCH 8/9] Added ellipses for overflow on Card titles. --- react-ui/src/components/Kanban/MaterialCard.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/react-ui/src/components/Kanban/MaterialCard.js b/react-ui/src/components/Kanban/MaterialCard.js index 1aa9936..991e1aa 100644 --- a/react-ui/src/components/Kanban/MaterialCard.js +++ b/react-ui/src/components/Kanban/MaterialCard.js @@ -37,7 +37,16 @@ const MaterialCard = props => { - + {props.title} Date: Thu, 5 Nov 2020 02:05:32 -0500 Subject: [PATCH 9/9] Added new stories for MaterialCard states. Fixed up program color lookup. --- .../components/Kanban/MaterialCard.stories.js | 24 +++++++++++++++++++ react-ui/src/components/Kanban/ProgramChip.js | 16 +++++++------ 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/react-ui/src/components/Kanban/MaterialCard.stories.js b/react-ui/src/components/Kanban/MaterialCard.stories.js index f88cd44..5180d38 100644 --- a/react-ui/src/components/Kanban/MaterialCard.stories.js +++ b/react-ui/src/components/Kanban/MaterialCard.stories.js @@ -26,3 +26,27 @@ export const Default = Template.bind({}) Default.args = { ...artworkData } + +export const TitleOverflow = Template.bind({}) +TitleOverflow.args = { + ...Default.args, + title: 'Lorem Ipsum Delore blah blah' +} + +export const MissingImage = Template.bind({}) +MissingImage.args = { + ...Default.args, + media: null +} + +export const AlternativeProgram = Template.bind({}) +AlternativeProgram.args = { + ...Default.args, + program: "StART Support" +} + +export const TypoedProgram = Template.bind({}) +TypoedProgram.args = { + ...Default.args, + program: "StART Supports" +} diff --git a/react-ui/src/components/Kanban/ProgramChip.js b/react-ui/src/components/Kanban/ProgramChip.js index 4f6de95..d558c5f 100644 --- a/react-ui/src/components/Kanban/ProgramChip.js +++ b/react-ui/src/components/Kanban/ProgramChip.js @@ -8,14 +8,16 @@ const COLOR_OTHER = '#cfb51c' const ProgramChip = props => { const labelColors = { - 'Partnership Program': COLOR_PARTNERSHIP, - 'Outside the Box': COLOR_OUTSIDE_BOX, - 'StART Support': COLOR_START_SUPPORT, - 'Other': COLOR_OTHER + 'partnership program': COLOR_PARTNERSHIP, + 'outside the box': COLOR_OUTSIDE_BOX, + 'start support': COLOR_START_SUPPORT, + 'other': COLOR_OTHER } - const style = { - backgroundColor: labelColors[props.label], + const lookupKey = props.label.toLowerCase() + + const labelStyle = { + backgroundColor: labelColors[lookupKey], color: '#ffffff' } @@ -23,7 +25,7 @@ const ProgramChip = props => { ) }