feat(app-components): update card design

fixtures/firestore-data/cards.json

@@ -45,61 +45,61 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "sAgOgpSk0phDUfJ7d3Q7": {
-    "type": "Pipeline Step",
-    "tags": ["Delivery Step", "Manual Step"],
+    "type": "pipeline-step",
+    "tags": ["delivery-step", "manual-step"],
     "title": "A Developer Commits Code",
-    "subtitle": "Delivery Step",
+    "subtitle": "delivery-step",
     "content": "A developer shares their code\nby pushing a commit to a\nversion control server, such\nas Git.\nIf you include steps before\nthis, they do not count\ntowards your deployment\nlead time.",
     "number": 13,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "vpttIdLCr7AEwNyFv75m": {
-    "type": "Pipeline Step",
-    "tags": ["Delivery Step", "Deploy Step"],
+    "type": "pipeline-step",
+    "tags": ["delivery-step", "deploy-step"],
     "title": "Deploy to Production Environment",
-    "subtitle": "Delivery Step",
+    "subtitle": "delivery-step",
     "content": "A Release Candidate is deployed to\nproduction where there are actual\nusers and live data.\nYou cannot complete this step\nuntil you have built the Release\nCandidate.\nIf you include steps after this,\nthey do not count towards your\ndeployment lead time.",
     "number": 14,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "gFDFKdnMmbwL5Vt7ouDE": {
-    "type": "Pipeline Step",
-    "tags": ["Package"],
+    "type": "pipeline-step",
+    "tags": ["package"],
     "title": "Build Release Candidate",
     "subtitle": "Build Step",
     "content": "Code is compiled and built\ninto a deployable Release\nCandidate.\nYou cannot complete this step\nbefore the Code is Merged to\nTrunk.",
     "number": 15,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "oMSlvF0Vn5Bt0F9YYZbQ": {
-    "type": "Pipeline Step",
-    "tags": ["Deploy Step"],
+    "type": "pipeline-step",
+    "tags": ["deploy-step"],
     "title": "Deploy to Production-Like\nTest Environment 1",
     "subtitle": "Deployment Step",
     "content": "Deploy to protected environment\nwith production-like hardware where\neveryone in the IT department can\nuse and test it with (anonymized)\nproduction-like data. (May be called ‘QA’\nor ‘Pre-prod’, etc instead of 1, 2, 3).",
     "number": 16,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "4wEMpQdP5N52iurAkiZR": {
-    "type": "Pipeline Step",
-    "tags": ["Deploy Step"],
+    "type": "pipeline-step",
+    "tags": ["deploy-step"],
     "title": "Deploy to Production-Like\nTest Environment 2",
     "subtitle": "Deployment Step",
     "content": "Deploy to protected environment\nwith production-like hardware where\neveryone in the IT department can\nuse and test it with (anonymized)\nproduction-like data. (May be called ‘QA’\nor ‘Pre-prod’, etc instead of 1, 2, 3).",
     "number": 17,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "7MpHg7z6NSNKkcNmY11a": {
-    "type": "Pipeline Step",
-    "tags": ["Deploy Step"],
+    "type": "pipeline-step",
+    "tags": ["deploy-step"],
     "title": "Deploy to Production-Like\nTest Environment 3",
     "subtitle": "Deployment Step",
     "content": "Deploy to protected environment\nwith production-like hardware where\neveryone in the IT department can\nuse and test it with (anonymized)\nproduction-like data. (May be called ‘QA’\nor ‘Pre-prod’, etc instead of 1, 2, 3).",
     "number": 18,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "5Hq5DBmvxTtsFyto0weW": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Unit Testing",
     "subtitle": "Test Step",
@@ -108,16 +108,16 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "bG1qFmdarVbhXquuWkly": {
-    "type": "Pipeline Step",
-    "tags": ["System Test"],
+    "type": "pipeline-step",
+    "tags": ["system-test"],
     "title": "Automated Load Test",
     "subtitle": "Test Step",
     "content": "Bombard the system with\nmany concurrent requests,\nmeasure response times and\nsystem performance.",
     "number": 20,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "Q8339NFFpyhfDz83s0ke": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Static Code Analysis",
     "subtitle": "Test Step",
@@ -126,88 +126,88 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "EWGhSgDp444Bvx90TI9W": {
-    "type": "Pipeline Step",
-    "tags": ["Manual Step", "System Test"],
+    "type": "pipeline-step",
+    "tags": ["manual-step", "system-test"],
     "title": "User Acceptance Testing",
     "subtitle": "Test Step",
     "content": "End-user representatives\nvalidate that the functionality\nworks in the way they want it\nto work.",
     "number": 22,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "7tuSNJdQmKPnGIaqrf6u": {
-    "type": "Pipeline Step",
-    "tags": ["Manual Step", "System Test"],
+    "type": "pipeline-step",
+    "tags": ["manual-step", "system-test"],
     "title": "Security & Penetration Testing",
     "subtitle": "Test Step",
     "content": "Skilled testers explore the\nsystem in a structured way\nlooking for security issues.",
     "number": 23,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "KRdlU3yCjCDu7LXDDkkQ": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Code is Merged to Trunk (Master)",
-    "subtitle": "Delivery Step",
+    "subtitle": "delivery-step",
     "content": "All developers can now see,\nuse, and build on this code.\nYou cannot build the Release\nCandidate before this pipeline\nstep has completed.",
     "number": 24,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "aqmtzNJsJ2Rq0amtNaVC": {
-    "type": "Pipeline Step",
-    "tags": ["Manual Step", "System Test"],
+    "type": "pipeline-step",
+    "tags": ["manual-step", "system-test"],
     "title": "Usability Testing",
     "subtitle": "Test Step",
     "content": "UX experts observe real users\nusing the system to see how\nthey behave and how they use\nfeatures.",
     "number": 25,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "9tzSep5ORXJoylxVlb6M": {
-    "type": "Pipeline Step",
-    "tags": ["System Test"],
+    "type": "pipeline-step",
+    "tags": ["system-test"],
     "title": "Automated Smoke Test",
     "subtitle": "Test Step",
     "content": "One very basic feature is\nexercised, such as “View the\nlogin screen”. Nothing more is\ntested.",
     "number": 26,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "Smxjkq3JZNEJ7r3zVfyK": {
-    "type": "Pipeline Step",
-    "tags": ["System Test"],
+    "type": "pipeline-step",
+    "tags": ["system-test"],
     "title": "Automated User Interface Testing",
     "subtitle": "Test Step",
     "content": "Test scripts exercise a wide\nvariety of functionality in the\nsystem, using the UI in the\nsame way as an actual user.",
     "number": 27,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "EoORqrovfdC02W0GWKyb": {
-    "type": "Pipeline Step",
-    "tags": ["Deploy Step"],
+    "type": "pipeline-step",
+    "tags": ["deploy-step"],
     "title": "Deploy on Build Agent",
     "subtitle": "Deployment Step",
     "content": "The whole system is deployed\non a single machine. Third\nparty services are replaced by\nmocks or stubs. Databases,\nload balancers, and queues\nmay be omitted, or substituted\nby in-memory lightweight\nalternatives.",
     "number": 28,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "euc9onmGXFCKz4EMXAh2": {
-    "type": "Pipeline Step",
-    "tags": ["Manual Step"],
+    "type": "pipeline-step",
+    "tags": ["manual-step"],
     "title": "Code Review",
     "subtitle": "Test Step",
     "content": "Source code is examined and\nassessed by developers other\nthan the original author.",
     "number": 29,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "15tVTz9XKHPxagkBwFLD": {
-    "type": "Pipeline Step",
-    "tags": ["System Test"],
+    "type": "pipeline-step",
+    "tags": ["system-test"],
     "title": "Deployment Health Check",
     "subtitle": "Test Step",
     "content": "Verify the software has deployed\ncorrectly. For example, you could\ncheck:\n• The database schema is valid.\n• All services are registered and\ndiscoverable.\n• Needed ports are opened.\n• Logs are being produced.",
     "number": 30,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "TdUxJ7APAa8mHfANtlRn": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Contract Testing",
     "subtitle": "Test Step",
@@ -216,7 +216,7 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "16c8sWQTSXcXoFx3QJCe": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Third Party Integration Testing",
     "subtitle": "Test Step",
@@ -225,7 +225,7 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "oW2c37tpOK3qYQWdb9M7": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Component Testing",
     "subtitle": "Test Step",
@@ -234,25 +234,25 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "6IqpaCa4X9RfXlJS9WE3": {
-    "type": "Pipeline Step",
-    "tags": ["System Test"],
+    "type": "pipeline-step",
+    "tags": ["system-test"],
     "title": "Automated Functional Testing",
     "subtitle": "Test Step",
     "content": "These tests each execute a\nfunction of the system, checking\nboth happy paths and error\nconditions. They use an API to\naccess functionality instead of the\nUser Interface.",
     "number": 34,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "ST0wgNZhTclzqSRizg0Y": {
-    "type": "Pipeline Step",
-    "tags": ["System Test"],
+    "type": "pipeline-step",
+    "tags": ["system-test"],
     "title": "End-to-End Testing",
     "subtitle": "Test Step",
     "content": "These tests execute all parts of\nthe system, including third party\ncomponents. They may be manual\nor automated.",
     "number": 35,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "gkCXoVnzA0r3TM3xJZsh": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Create Release Notes",
     "subtitle": "Build Step",
@@ -261,16 +261,16 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "KdqSH6RykC4qsYENGpnh": {
-    "type": "Pipeline Step",
-    "tags": ["Package"],
+    "type": "pipeline-step",
+    "tags": ["package"],
     "title": "Build Snapshot Version",
     "subtitle": "Build Step",
     "content": "Code is compiled and built\ninto a deployable unit, which\nis labelled as “snapshot.”\nThis means it is not suitable for\ndeployment in production, it is\nonly for testing.",
     "number": 37,
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "V3KgW196nrobZiQXAL5g": {
-    "type": "Pipeline Step",
+    "type": "pipeline-step",
     "tags": [],
     "title": "Decide Release Version Number",
     "subtitle": "Build Step",
@@ -279,8 +279,8 @@
     "deckId": "7p5qqvE8kCV9WWysVc2n"
   },
   "4OLftJ9cS5lJ49xtdUzT": {
-    "type": "Pipeline Step",
-    "tags": ["Manual Step"],
+    "type": "pipeline-step",
+    "tags": ["manual-step"],
     "title": "Go/No Go Decision Meeting",
     "subtitle": "Test Step",
     "content": "A group of managers, testers and\nother stakeholders meet to assess\nwhether to deploy the new version\nof the software. They base their\ndecision on test results, perceived\nrisks, market conditions and cost\nof delay.",

packages/common/package.json

@@ -12,7 +12,8 @@
     "build:watch": "tsc --watch  --declaration --outDir build"
   },
   "devDependencies": {
-    "typescript": "4.1.3"
+    "typescript": "4.1.3",
+    "react-refresh": "^0.9.0"
   },
   "dependencies": {
     "firebase": "^8.2.1"

packages/game-app/.storybook/preview-head.html

@@ -7,4 +7,52 @@
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
+
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, menu, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed,
+    figure, figcaption, footer, header, hgroup,
+    main, menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure,
+    footer, header, hgroup, main, menu, nav, section {
+        display: block;
+    }
+    /* HTML5 hidden-attribute fix for newer browsers */
+    *[hidden] {
+        display: none;
+    }
+    body {
+        line-height: 1;
+    }
+    menu, ol, ul {
+        list-style: none;
+    }
+    blockquote, q {
+        quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+        content: '';
+        content: none;
+    }
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
 </style>