react-okr-ui
Version:
A React user interface toolkit for building OKR centric applications.
1 lines • 44.1 kB
JSON
{"expireTime":9007200867386061000,"key":"gatsby-plugin-mdx-entire-payload-f6df71a5848f1bdb49f4df38fe2af956-","val":{"mdast":{"type":"root","children":[{"type":"import","value":"import DefaultLayout from \"/Users/seanrioux/products/open-source-okr/code/react-okr-ui/node_modules/gatsby-theme-docz/src/base/Layout.js\"","position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":138,"offset":139},"indent":[]}},{"type":"export","default":true,"value":"export default DefaultLayout","position":{"start":{"line":5,"column":1,"offset":141},"end":{"line":5,"column":29,"offset":169},"indent":[]}},{"type":"import","value":"import Objective from \"../components/Objective\";\nimport Progress from \"../components/Progress\";\nimport Result from \"../components/Result\";\nimport Current from \"../components/Current\";\nimport Score from \"../components/Score\";\nimport Goal from \"../components/Goal\";\nimport Due from \"../components/Due\";\nimport Okr from \"../components/Okr\";\nimport Row from \"../components/Row\";","position":{"start":{"line":8,"column":1,"offset":172},"end":{"line":16,"column":37,"offset":546},"indent":[1,1,1,1,1,1,1,1]}},{"type":"import","value":"import { Playground, Props } from \"docz\";\nimport { dateOptions, metrics, results, grades } from \"../data/example.js\";","position":{"start":{"line":18,"column":1,"offset":548},"end":{"line":19,"column":76,"offset":665},"indent":[1]}},{"type":"heading","depth":1,"children":[{"type":"text","value":"Components","position":{"start":{"line":21,"column":3,"offset":669},"end":{"line":21,"column":13,"offset":679},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":667},"end":{"line":21,"column":13,"offset":679},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"React OKR UI provides a collection of highly compositional components for a wide range of possible OKR UI requirements.","position":{"start":{"line":23,"column":1,"offset":681},"end":{"line":23,"column":120,"offset":800},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":681},"end":{"line":23,"column":120,"offset":800},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Here's a live example. Adjust values in the Playground area to test how the components work and it's props work.","position":{"start":{"line":25,"column":1,"offset":802},"end":{"line":25,"column":113,"offset":914},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":802},"end":{"line":25,"column":113,"offset":914},"indent":[]}},{"type":"jsx","value":"<Playground>\n\t{() => {\n\t\t// Setup metrics\n\t\tconst metrics = [\n\t\t\t{\n\t\t\t\tid: \"1\",\n\t\t\t\tname: \"product revenue\",\n\t\t\t\tprefix: \"\",\n\t\t\t\tsuffix: \"%\",\n\t\t\t\tspace: false, // Fix\n\t\t\t\tallowNegative: false,\n\t\t\t\tdecimalScale: 2,\n\t\t\t},\n\t\t];\n\t\t// Set grades\n\t\tconst grades = [\n\t\t\t{\n\t\t\t\tid: \"1\",\n\t\t\t\tname: \"Fail\",\n\t\t\t\trange: [0.0, 0.75],\n\t\t\t\tcolor: \"#ef4444\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"2\",\n\t\t\t\tname: \"Pass\",\n\t\t\t\trange: [0.75, 2.0],\n\t\t\t\tcolor: \"#10b981\",\n\t\t\t},\n\t\t];\n\t\treturn (\n\t\t\t<Okr metrics={metrics} grades={grades}>\n\t\t\t\t<Objective>\n\t\t\t\t\t<Row type=\"flex\">\n\t\t\t\t\t\t<Goal label=\"Objective\" text=\"Carve out a niche\" />\n\t\t\t\t\t\t<Due\n\t\t\t\t\t\t\tlabel=\"Due date\"\n\t\t\t\t\t\t\tdate=\"2022/01/01\"\n\t\t\t\t\t\t\toptions={{ year: \"numeric\", month: \"short\", day: \"numeric\" }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Row>\n\t\t\t\t\t<Progress label=\"progress\" value={0.75} />\n\t\t\t\t\t<Result>\n\t\t\t\t\t\t<Row type=\"flex\">\n\t\t\t\t\t\t\t<Goal\n\t\t\t\t\t\t\t\tlabel=\"Key Result\"\n\t\t\t\t\t\t\t\tdirection=\"increase\"\n\t\t\t\t\t\t\t\tmetricId=\"1\"\n\t\t\t\t\t\t\t\tstart={20}\n\t\t\t\t\t\t\t\tend={50}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Row type=\"flex\">\n\t\t\t\t\t\t\t\t<Current\n\t\t\t\t\t\t\t\t\tclassName=\"okr-mr-1\"\n\t\t\t\t\t\t\t\t\tlabel=\"Current\"\n\t\t\t\t\t\t\t\t\tmetricId=\"1\"\n\t\t\t\t\t\t\t\t\tvalue={30}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Score\n\t\t\t\t\t\t\t\t\tclassName=\"okr-ml-1\"\n\t\t\t\t\t\t\t\t\tdirection=\"increase\"\n\t\t\t\t\t\t\t\t\tstart={20}\n\t\t\t\t\t\t\t\t\tend={50}\n\t\t\t\t\t\t\t\t\tcurrent={30}\n\t\t\t\t\t\t\t\t\tcircle\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</Result>\n\t\t\t\t</Objective>\n\t\t\t</Okr>\n\t\t);\n\t}}\n</Playground>","position":{"start":{"line":27,"column":1,"offset":916},"end":{"line":99,"column":14,"offset":2283},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"thematicBreak","position":{"start":{"line":101,"column":1,"offset":2285},"end":{"line":101,"column":4,"offset":2288},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Okr","position":{"start":{"line":103,"column":4,"offset":2293},"end":{"line":103,"column":7,"offset":2296},"indent":[]}}],"position":{"start":{"line":103,"column":1,"offset":2290},"end":{"line":103,"column":7,"offset":2296},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The ","position":{"start":{"line":105,"column":1,"offset":2298},"end":{"line":105,"column":5,"offset":2302},"indent":[]}},{"type":"inlineCode","value":"<Okr>","position":{"start":{"line":105,"column":5,"offset":2302},"end":{"line":105,"column":12,"offset":2309},"indent":[]}},{"type":"text","value":" component acts as a general countainer wrapper:","position":{"start":{"line":105,"column":12,"offset":2309},"end":{"line":105,"column":60,"offset":2357},"indent":[]}}],"position":{"start":{"line":105,"column":1,"offset":2298},"end":{"line":105,"column":60,"offset":2357},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"<Okr metrics={metrics} grades={grades}>\n\t{children}\n</Okr>","position":{"start":{"line":107,"column":1,"offset":2359},"end":{"line":111,"column":4,"offset":2428},"indent":[1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":113,"column":5,"offset":2434},"end":{"line":113,"column":15,"offset":2444},"indent":[]}}],"position":{"start":{"line":113,"column":1,"offset":2430},"end":{"line":113,"column":15,"offset":2444},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Okr has the properties:","position":{"start":{"line":115,"column":1,"offset":2446},"end":{"line":115,"column":24,"offset":2469},"indent":[]}}],"position":{"start":{"line":115,"column":1,"offset":2446},"end":{"line":115,"column":24,"offset":2469},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"inlineCode","value":"metrics","position":{"start":{"line":117,"column":3,"offset":2473},"end":{"line":117,"column":12,"offset":2482},"indent":[]}},{"type":"text","value":": i.e., the things you are measuring as results","position":{"start":{"line":117,"column":12,"offset":2482},"end":{"line":117,"column":59,"offset":2529},"indent":[]}}],"position":{"start":{"line":117,"column":3,"offset":2473},"end":{"line":117,"column":59,"offset":2529},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":2471},"end":{"line":117,"column":59,"offset":2529},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"inlineCode","value":"grades","position":{"start":{"line":118,"column":3,"offset":2532},"end":{"line":118,"column":11,"offset":2540},"indent":[]}},{"type":"text","value":": i.e., how scores are interpreted e.g., ","position":{"start":{"line":118,"column":11,"offset":2540},"end":{"line":118,"column":52,"offset":2581},"indent":[]}},{"type":"inlineCode","value":"pass","position":{"start":{"line":118,"column":52,"offset":2581},"end":{"line":118,"column":58,"offset":2587},"indent":[]}},{"type":"text","value":" or ","position":{"start":{"line":118,"column":58,"offset":2587},"end":{"line":118,"column":62,"offset":2591},"indent":[]}},{"type":"inlineCode","value":"fail","position":{"start":{"line":118,"column":62,"offset":2591},"end":{"line":118,"column":68,"offset":2597},"indent":[]}}],"position":{"start":{"line":118,"column":3,"offset":2532},"end":{"line":118,"column":68,"offset":2597},"indent":[]}}],"position":{"start":{"line":118,"column":1,"offset":2530},"end":{"line":118,"column":68,"offset":2597},"indent":[]}}],"position":{"start":{"line":117,"column":1,"offset":2471},"end":{"line":118,"column":68,"offset":2597},"indent":[1]}},{"type":"jsx","value":"<Props of={Okr} />","position":{"start":{"line":120,"column":1,"offset":2599},"end":{"line":120,"column":19,"offset":2617},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"text","value":"Example metrics and grades","position":{"start":{"line":122,"column":6,"offset":2624},"end":{"line":122,"column":32,"offset":2650},"indent":[]}}],"position":{"start":{"line":122,"column":1,"offset":2619},"end":{"line":122,"column":32,"offset":2650},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Here is some example configuration:","position":{"start":{"line":124,"column":1,"offset":2652},"end":{"line":124,"column":36,"offset":2687},"indent":[]}}],"position":{"start":{"line":124,"column":1,"offset":2652},"end":{"line":124,"column":36,"offset":2687},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"// Metrics\nconst metrics = [\n\t{\n\t\tid: \"1\",\n\t\tname: \"product revenue\",\n\t\tprefix: \"\",\n\t\tsuffix: \"%\",\n\t\tspace: false, // Fix\n\t\tallowNegative: false,\n\t\tdecimalScale: 2,\n\t},\n];\n\n// Grades\nconst grades = [\n\t{\n\t\tid: \"1\",\n\t\tname: \"Fail\",\n\t\trange: [0.0, 0.75],\n\t\tcolor: \"#ef4444\",\n\t},\n\t{\n\t\tid: \"2\",\n\t\tname: \"Pass\",\n\t\trange: [0.75, 2.0],\n\t\tcolor: \"#10b981\",\n\t},\n];","position":{"start":{"line":126,"column":1,"offset":2689},"end":{"line":155,"column":4,"offset":3053},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"thematicBreak","position":{"start":{"line":157,"column":1,"offset":3055},"end":{"line":157,"column":4,"offset":3058},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Objective","position":{"start":{"line":159,"column":4,"offset":3063},"end":{"line":159,"column":13,"offset":3072},"indent":[]}}],"position":{"start":{"line":159,"column":1,"offset":3060},"end":{"line":159,"column":13,"offset":3072},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The ","position":{"start":{"line":161,"column":1,"offset":3074},"end":{"line":161,"column":5,"offset":3078},"indent":[]}},{"type":"inlineCode","value":"<Objective>","position":{"start":{"line":161,"column":5,"offset":3078},"end":{"line":161,"column":18,"offset":3091},"indent":[]}},{"type":"text","value":" component provides a wrapper for each objective:","position":{"start":{"line":161,"column":18,"offset":3091},"end":{"line":161,"column":67,"offset":3140},"indent":[]}}],"position":{"start":{"line":161,"column":1,"offset":3074},"end":{"line":161,"column":67,"offset":3140},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"<Objective className=\"card\">{children}</Objective>","position":{"start":{"line":163,"column":1,"offset":3142},"end":{"line":165,"column":4,"offset":3203},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":167,"column":5,"offset":3209},"end":{"line":167,"column":15,"offset":3219},"indent":[]}}],"position":{"start":{"line":167,"column":1,"offset":3205},"end":{"line":167,"column":15,"offset":3219},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The component takes a className and passes it on to the component:","position":{"start":{"line":169,"column":1,"offset":3221},"end":{"line":169,"column":67,"offset":3287},"indent":[]}}],"position":{"start":{"line":169,"column":1,"offset":3221},"end":{"line":169,"column":67,"offset":3287},"indent":[]}},{"type":"jsx","value":"<Props of={Objective} />","position":{"start":{"line":171,"column":1,"offset":3289},"end":{"line":171,"column":25,"offset":3313},"indent":[]}},{"type":"thematicBreak","position":{"start":{"line":173,"column":1,"offset":3315},"end":{"line":173,"column":4,"offset":3318},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Result","position":{"start":{"line":175,"column":4,"offset":3323},"end":{"line":175,"column":10,"offset":3329},"indent":[]}}],"position":{"start":{"line":175,"column":1,"offset":3320},"end":{"line":175,"column":10,"offset":3329},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The ","position":{"start":{"line":177,"column":1,"offset":3331},"end":{"line":177,"column":5,"offset":3335},"indent":[]}},{"type":"inlineCode","value":"<Result>","position":{"start":{"line":177,"column":5,"offset":3335},"end":{"line":177,"column":15,"offset":3345},"indent":[]}},{"type":"text","value":" component provides a wrapper for each result:","position":{"start":{"line":177,"column":15,"offset":3345},"end":{"line":177,"column":61,"offset":3391},"indent":[]}}],"position":{"start":{"line":177,"column":1,"offset":3331},"end":{"line":177,"column":61,"offset":3391},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"<Result className=\"card\">{children}</Result>","position":{"start":{"line":179,"column":1,"offset":3393},"end":{"line":181,"column":4,"offset":3448},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":183,"column":5,"offset":3454},"end":{"line":183,"column":15,"offset":3464},"indent":[]}}],"position":{"start":{"line":183,"column":1,"offset":3450},"end":{"line":183,"column":15,"offset":3464},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The component takes a className and passes it on to the component.","position":{"start":{"line":185,"column":1,"offset":3466},"end":{"line":185,"column":67,"offset":3532},"indent":[]}}],"position":{"start":{"line":185,"column":1,"offset":3466},"end":{"line":185,"column":67,"offset":3532},"indent":[]}},{"type":"jsx","value":"<Props of={Result} />","position":{"start":{"line":187,"column":1,"offset":3534},"end":{"line":187,"column":22,"offset":3555},"indent":[]}},{"type":"thematicBreak","position":{"start":{"line":189,"column":1,"offset":3557},"end":{"line":189,"column":4,"offset":3560},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Goal","position":{"start":{"line":191,"column":4,"offset":3565},"end":{"line":191,"column":8,"offset":3569},"indent":[]}}],"position":{"start":{"line":191,"column":1,"offset":3562},"end":{"line":191,"column":8,"offset":3569},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The ","position":{"start":{"line":193,"column":1,"offset":3571},"end":{"line":193,"column":5,"offset":3575},"indent":[]}},{"type":"inlineCode","value":"<Goal>","position":{"start":{"line":193,"column":5,"offset":3575},"end":{"line":193,"column":13,"offset":3583},"indent":[]}},{"type":"text","value":" component displays the goal text, either by processing the result object properties or simply taking objective text.","position":{"start":{"line":193,"column":13,"offset":3583},"end":{"line":193,"column":130,"offset":3700},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":3571},"end":{"line":193,"column":130,"offset":3700},"indent":[]}},{"type":"jsx","value":"<Playground>\n\t<Okr metrics={metrics} grades={grades}>\n\t\t<Objective>\n\t\t\t<Goal label=\"Objective\" text=\"Carve out a niche\" />\n\t\t\t<Result>\n\t\t\t\t<Goal\n\t\t\t\t\tlabel=\"Key Result\"\n\t\t\t\t\tdirection=\"increase\"\n\t\t\t\t\tmetricId=\"1\"\n\t\t\t\t\tstart={20}\n\t\t\t\t\tend={50}\n\t\t\t\t/>\n\t\t\t</Result>\n\t\t</Objective>\n\t</Okr>\n</Playground>","position":{"start":{"line":195,"column":1,"offset":3702},"end":{"line":210,"column":14,"offset":4001},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":212,"column":5,"offset":4007},"end":{"line":212,"column":15,"offset":4017},"indent":[]}}],"position":{"start":{"line":212,"column":1,"offset":4003},"end":{"line":212,"column":15,"offset":4017},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"The component takes objective properties to calculate the goal or simply text. It also includes an optional label:","position":{"start":{"line":214,"column":1,"offset":4019},"end":{"line":214,"column":115,"offset":4133},"indent":[]}}],"position":{"start":{"line":214,"column":1,"offset":4019},"end":{"line":214,"column":115,"offset":4133},"indent":[]}},{"type":"jsx","value":"<Props of={Goal} />","position":{"start":{"line":216,"column":1,"offset":4135},"end":{"line":216,"column":20,"offset":4154},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Due","position":{"start":{"line":218,"column":4,"offset":4159},"end":{"line":218,"column":7,"offset":4162},"indent":[]}}],"position":{"start":{"line":218,"column":1,"offset":4156},"end":{"line":218,"column":7,"offset":4162},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Input any parsable date string (or timestamp) to display the date. Customize using options:","position":{"start":{"line":220,"column":1,"offset":4164},"end":{"line":220,"column":92,"offset":4255},"indent":[]}}],"position":{"start":{"line":220,"column":1,"offset":4164},"end":{"line":220,"column":92,"offset":4255},"indent":[]}},{"type":"jsx","value":"<Playground>\n\t<Due\n\t\tlabel=\"Due date\"\n\t\tdate=\"2022/01/01\"\n\t\toptions={{ year: \"numeric\", month: \"short\", day: \"numeric\" }}\n\t/>\n</Playground>","position":{"start":{"line":222,"column":1,"offset":4257},"end":{"line":228,"column":14,"offset":4396},"indent":[1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Progress","position":{"start":{"line":230,"column":4,"offset":4401},"end":{"line":230,"column":12,"offset":4409},"indent":[]}}],"position":{"start":{"line":230,"column":1,"offset":4398},"end":{"line":230,"column":12,"offset":4409},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Progress indicator for objectives, calculated from result scores or input as a percentage value.","position":{"start":{"line":232,"column":1,"offset":4411},"end":{"line":232,"column":97,"offset":4507},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":4411},"end":{"line":232,"column":97,"offset":4507},"indent":[]}},{"type":"jsx","value":"<Playground>\n\t<Okr metrics={metrics} grades={grades}>\n\t\t<Objective>\n\t\t\t<Progress label=\"progress\" value={0.75} />\n\t\t\t<Progress label=\"progress\" results={results} />\n\t\t</Objective>\n\t</Okr>\n</Playground>","position":{"start":{"line":234,"column":1,"offset":4509},"end":{"line":241,"column":14,"offset":4710},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":243,"column":5,"offset":4716},"end":{"line":243,"column":15,"offset":4726},"indent":[]}}],"position":{"start":{"line":243,"column":1,"offset":4712},"end":{"line":243,"column":15,"offset":4726},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Takes either a percentage value, or an array of results.","position":{"start":{"line":245,"column":1,"offset":4728},"end":{"line":245,"column":57,"offset":4784},"indent":[]}}],"position":{"start":{"line":245,"column":1,"offset":4728},"end":{"line":245,"column":57,"offset":4784},"indent":[]}},{"type":"jsx","value":"<Props of={Progress} />","position":{"start":{"line":247,"column":1,"offset":4786},"end":{"line":247,"column":24,"offset":4809},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Results example","position":{"start":{"line":249,"column":5,"offset":4815},"end":{"line":249,"column":20,"offset":4830},"indent":[]}}],"position":{"start":{"line":249,"column":1,"offset":4811},"end":{"line":249,"column":20,"offset":4830},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Here is how to structure your results in an array:","position":{"start":{"line":251,"column":1,"offset":4832},"end":{"line":251,"column":51,"offset":4882},"indent":[]}}],"position":{"start":{"line":251,"column":1,"offset":4832},"end":{"line":251,"column":51,"offset":4882},"indent":[]}},{"type":"code","lang":"js","meta":null,"value":"\tconst results = [\n\t\tid: \"1\",\n\t\tmetricId: \"1\",\n\t\tdirection: \"increase\",\n\t\tstart: 50,\n\t\tend: 10,\n\t\tcurrent: 20,\n\t},\n]","position":{"start":{"line":253,"column":1,"offset":4884},"end":{"line":263,"column":4,"offset":5010},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Current","position":{"start":{"line":265,"column":4,"offset":5015},"end":{"line":265,"column":11,"offset":5022},"indent":[]}}],"position":{"start":{"line":265,"column":1,"offset":5012},"end":{"line":265,"column":11,"offset":5022},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Display the current result value.","position":{"start":{"line":267,"column":1,"offset":5024},"end":{"line":267,"column":34,"offset":5057},"indent":[]}}],"position":{"start":{"line":267,"column":1,"offset":5024},"end":{"line":267,"column":34,"offset":5057},"indent":[]}},{"type":"jsx","value":"<Playground>\n\t<Okr metrics={metrics} grades={grades}>\n\t\t<Objective>\n\t\t\t<Result>\n\t\t\t\t<Current label=\"Current\" metricId=\"1\" value={30} />\n\t\t\t</Result>\n\t\t</Objective>\n\t</Okr>\n</Playground>","position":{"start":{"line":269,"column":1,"offset":5059},"end":{"line":277,"column":14,"offset":5244},"indent":[1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":279,"column":5,"offset":5250},"end":{"line":279,"column":15,"offset":5260},"indent":[]}}],"position":{"start":{"line":279,"column":1,"offset":5246},"end":{"line":279,"column":15,"offset":5260},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Takes the current value from the result and the metricId to format the number.","position":{"start":{"line":281,"column":1,"offset":5262},"end":{"line":281,"column":79,"offset":5340},"indent":[]}}],"position":{"start":{"line":281,"column":1,"offset":5262},"end":{"line":281,"column":79,"offset":5340},"indent":[]}},{"type":"jsx","value":"<Props of={Current} />","position":{"start":{"line":283,"column":1,"offset":5342},"end":{"line":283,"column":23,"offset":5364},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Score","position":{"start":{"line":285,"column":4,"offset":5369},"end":{"line":285,"column":9,"offset":5374},"indent":[]}}],"position":{"start":{"line":285,"column":1,"offset":5366},"end":{"line":285,"column":9,"offset":5374},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Score the result based on start, end (goal), and current value.","position":{"start":{"line":287,"column":1,"offset":5376},"end":{"line":287,"column":64,"offset":5439},"indent":[]}}],"position":{"start":{"line":287,"column":1,"offset":5376},"end":{"line":287,"column":64,"offset":5439},"indent":[]}},{"type":"jsx","value":"<Playground>\n\t<Okr metrics={metrics} grades={grades}>\n\t\t<Objective>\n\t\t\t<Result>\n\t\t\t\t<Score\n\t\t\t\t\tlabel=\"score\"\n\t\t\t\t\tdirection=\"increase\"\n\t\t\t\t\tstart={20}\n\t\t\t\t\tend={50}\n\t\t\t\t\tcurrent={30}\n\t\t\t\t\tcircle\n\t\t\t\t/>\n\t\t\t</Result>\n\t\t</Objective>\n\t</Okr>\n</Playground>","position":{"start":{"line":289,"column":1,"offset":5441},"end":{"line":304,"column":14,"offset":5693},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":306,"column":5,"offset":5699},"end":{"line":306,"column":15,"offset":5709},"indent":[]}}],"position":{"start":{"line":306,"column":1,"offset":5695},"end":{"line":306,"column":15,"offset":5709},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Takes result properties, as well as a ","position":{"start":{"line":308,"column":1,"offset":5711},"end":{"line":308,"column":39,"offset":5749},"indent":[]}},{"type":"inlineCode","value":"label","position":{"start":{"line":308,"column":39,"offset":5749},"end":{"line":308,"column":46,"offset":5756},"indent":[]}},{"type":"text","value":", and ","position":{"start":{"line":308,"column":46,"offset":5756},"end":{"line":308,"column":52,"offset":5762},"indent":[]}},{"type":"inlineCode","value":"className","position":{"start":{"line":308,"column":52,"offset":5762},"end":{"line":308,"column":63,"offset":5773},"indent":[]}},{"type":"text","value":". Can display as a ","position":{"start":{"line":308,"column":63,"offset":5773},"end":{"line":308,"column":82,"offset":5792},"indent":[]}},{"type":"inlineCode","value":"circle","position":{"start":{"line":308,"column":82,"offset":5792},"end":{"line":308,"column":90,"offset":5800},"indent":[]}},{"type":"text","value":" which uses the score grade to determine its background color.","position":{"start":{"line":308,"column":90,"offset":5800},"end":{"line":308,"column":152,"offset":5862},"indent":[]}}],"position":{"start":{"line":308,"column":1,"offset":5711},"end":{"line":308,"column":152,"offset":5862},"indent":[]}},{"type":"jsx","value":"<Props of={Score} />","position":{"start":{"line":310,"column":1,"offset":5864},"end":{"line":310,"column":21,"offset":5884},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Row","position":{"start":{"line":312,"column":4,"offset":5889},"end":{"line":312,"column":7,"offset":5892},"indent":[]}}],"position":{"start":{"line":312,"column":1,"offset":5886},"end":{"line":312,"column":7,"offset":5892},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"A flex row utility component (very optional).","position":{"start":{"line":314,"column":1,"offset":5894},"end":{"line":314,"column":46,"offset":5939},"indent":[]}}],"position":{"start":{"line":314,"column":1,"offset":5894},"end":{"line":314,"column":46,"offset":5939},"indent":[]}},{"type":"code","lang":"jsx","meta":null,"value":"<Row type=\"flex\">{children}</Row>","position":{"start":{"line":316,"column":1,"offset":5941},"end":{"line":318,"column":4,"offset":5985},"indent":[1,1]}},{"type":"heading","depth":3,"children":[{"type":"text","value":"Properties","position":{"start":{"line":320,"column":5,"offset":5991},"end":{"line":320,"column":15,"offset":6001},"indent":[]}}],"position":{"start":{"line":320,"column":1,"offset":5987},"end":{"line":320,"column":15,"offset":6001},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Use to layout your row using ","position":{"start":{"line":322,"column":1,"offset":6003},"end":{"line":322,"column":30,"offset":6032},"indent":[]}},{"type":"inlineCode","value":"flex","position":{"start":{"line":322,"column":30,"offset":6032},"end":{"line":322,"column":36,"offset":6038},"indent":[]}},{"type":"text","value":" or ","position":{"start":{"line":322,"column":36,"offset":6038},"end":{"line":322,"column":40,"offset":6042},"indent":[]}},{"type":"inlineCode","value":"wrap","position":{"start":{"line":322,"column":40,"offset":6042},"end":{"line":322,"column":46,"offset":6048},"indent":[]}},{"type":"text","value":".","position":{"start":{"line":322,"column":46,"offset":6048},"end":{"line":322,"column":47,"offset":6049},"indent":[]}}],"position":{"start":{"line":322,"column":1,"offset":6003},"end":{"line":322,"column":47,"offset":6049},"indent":[]}},{"type":"jsx","value":"<Props of={Row} />","position":{"start":{"line":324,"column":1,"offset":6051},"end":{"line":324,"column":19,"offset":6069},"indent":[]}},{"type":"export","value":"export const _frontmatter = {}","position":{"start":{"line":327,"column":1,"offset":6072},"end":{"line":327,"column":31,"offset":6102},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":327,"column":31,"offset":6102}}},"scopeImports":[],"scopeIdentifiers":[],"rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport DefaultLayout from \"/Users/seanrioux/products/open-source-okr/code/react-okr-ui/node_modules/gatsby-theme-docz/src/base/Layout.js\"\nimport Objective from \"../components/Objective\";\nimport Progress from \"../components/Progress\";\nimport Result from \"../components/Result\";\nimport Current from \"../components/Current\";\nimport Score from \"../components/Score\";\nimport Goal from \"../components/Goal\";\nimport Due from \"../components/Due\";\nimport Okr from \"../components/Okr\";\nimport Row from \"../components/Row\";\nimport { Playground, Props } from \"docz\";\nimport { dateOptions, metrics, results, grades } from \"../data/example.js\";\nexport const _frontmatter = {};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout\nexport default function MDXContent({\n components,\n ...props\n}) {\n return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n\n <h1 {...{\n \"id\": \"components\"\n }}>{`Components`}</h1>\n <p>{`React OKR UI provides a collection of highly compositional components for a wide range of possible OKR UI requirements.`}</p>\n <p>{`Here's a live example. Adjust values in the Playground area to test how the components work and it's props work.`}</p>\n <Playground __position={0} __code={'() => {\\n // Setup metrics\\n const metrics = [\\n {\\n id: \\'1\\',\\n name: \\'product revenue\\',\\n prefix: \\'\\',\\n suffix: \\'%\\',\\n space: false, // Fix\\n allowNegative: false,\\n decimalScale: 2,\\n },\\n ]\\n // Set grades\\n const grades = [\\n {\\n id: \\'1\\',\\n name: \\'Fail\\',\\n range: [0.0, 0.75],\\n color: \\'#ef4444\\',\\n },\\n {\\n id: \\'2\\',\\n name: \\'Pass\\',\\n range: [0.75, 2.0],\\n color: \\'#10b981\\',\\n },\\n ]\\n return (\\n <Okr metrics={metrics} grades={grades}>\\n <Objective>\\n <Row type=\\\"flex\\\">\\n <Goal label=\\\"Objective\\\" text=\\\"Carve out a niche\\\" />\\n <Due\\n label=\\\"Due date\\\"\\n date=\\\"2022/01/01\\\"\\n options={{ year: \\'numeric\\', month: \\'short\\', day: \\'numeric\\' }}\\n />\\n </Row>\\n <Progress label=\\\"progress\\\" value={0.75} />\\n <Result>\\n <Row type=\\\"flex\\\">\\n <Goal\\n label=\\\"Key Result\\\"\\n direction=\\\"increase\\\"\\n metricId=\\\"1\\\"\\n start={20}\\n end={50}\\n />\\n <Row type=\\\"flex\\\">\\n <Current\\n className=\\\"okr-mr-1\\\"\\n label=\\\"Current\\\"\\n metricId=\\\"1\\\"\\n value={30}\\n />\\n <Score\\n className=\\\"okr-ml-1\\\"\\n direction=\\\"increase\\\"\\n start={20}\\n end={50}\\n current={30}\\n circle\\n />\\n </Row>\\n </Row>\\n </Result>\\n </Objective>\\n </Okr>\\n )\\n}'} __scope={{\n props,\n DefaultLayout,\n Objective,\n Progress,\n Result,\n Current,\n Score,\n Goal,\n Due,\n Okr,\n Row,\n Playground,\n Props,\n dateOptions,\n metrics,\n results,\n grades,\n DefaultLayout,\n _frontmatter\n }} mdxType=\"Playground\">\n\t{() => {\n // Setup metrics\n const metrics = [{\n id: \"1\",\n name: \"product revenue\",\n prefix: \"\",\n suffix: \"%\",\n space: false,\n // Fix\n allowNegative: false,\n decimalScale: 2\n }]; // Set grades\n\n const grades = [{\n id: \"1\",\n name: \"Fail\",\n range: [0.0, 0.75],\n color: \"#ef4444\"\n }, {\n id: \"2\",\n name: \"Pass\",\n range: [0.75, 2.0],\n color: \"#10b981\"\n }];\n return <Okr metrics={metrics} grades={grades} mdxType=\"Okr\">\n\t\t\t\t<Objective mdxType=\"Objective\">\n\t\t\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t\t\t<Goal label=\"Objective\" text=\"Carve out a niche\" mdxType=\"Goal\" />\n\t\t\t\t\t\t<Due label=\"Due date\" date=\"2022/01/01\" options={{\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\"\n }} mdxType=\"Due\" />\n\t\t\t\t\t</Row>\n\t\t\t\t\t<Progress label=\"progress\" value={0.75} mdxType=\"Progress\" />\n\t\t\t\t\t<Result mdxType=\"Result\">\n\t\t\t\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t\t\t\t<Goal label=\"Key Result\" direction=\"increase\" metricId=\"1\" start={20} end={50} mdxType=\"Goal\" />\n\t\t\t\t\t\t\t<Row type=\"flex\" mdxType=\"Row\">\n\t\t\t\t\t\t\t\t<Current className=\"okr-mr-1\" label=\"Current\" metricId=\"1\" value={30} mdxType=\"Current\" />\n\t\t\t\t\t\t\t\t<Score className=\"okr-ml-1\" direction=\"increase\" start={20} end={50} current={30} circle mdxType=\"Score\" />\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</Result>\n\t\t\t\t</Objective>\n\t\t\t</Okr>;\n }}\n </Playground>\n <hr></hr>\n <h2 {...{\n \"id\": \"okr\"\n }}>{`Okr`}</h2>\n <p>{`The `}<inlineCode parentName=\"p\">{`<Okr>`}</inlineCode>{` component acts as a general countainer wrapper:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-jsx\"\n }}>{`<Okr metrics={metrics} grades={grades}>\n {children}\n</Okr>\n`}</code></pre>\n <h3 {...{\n \"id\": \"properties\"\n }}>{`Properties`}</h3>\n <p>{`Okr has the properties:`}</p>\n <ul>\n <li parentName=\"ul\"><inlineCode parentName=\"li\">{`metrics`}</inlineCode>{`: i.e., the things you are measuring as results`}</li>\n <li parentName=\"ul\"><inlineCode parentName=\"li\">{`grades`}</inlineCode>{`: i.e., how scores are interpreted e.g., `}<inlineCode parentName=\"li\">{`pass`}</inlineCode>{` or `}<inlineCode parentName=\"li\">{`fail`}</inlineCode></li>\n </ul>\n <Props of={Okr} mdxType=\"Props\" />\n <h4 {...{\n \"id\": \"example-metrics-and-grades\"\n }}>{`Example metrics and grades`}</h4>\n <p>{`Here is some example configuration:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-js\"\n }}>{`// Metrics\nconst metrics = [\n {\n id: \"1\",\n name: \"product revenue\",\n prefix: \"\",\n suffix: \"%\",\n space: false, // Fix\n allowNegative: false,\n decimalScale: 2,\n },\n];\n\n// Grades\nconst grades = [\n {\n id: \"1\",\n name: \"Fail\",\n range: [0.0, 0.75],\n color: \"#ef4444\",\n },\n {\n id: \"2\",\n name: \"Pass\",\n range: [0.75, 2.0],\n color: \"#10b981\",\n },\n];\n`}</code></pre>\n <hr></hr>\n <h2 {...{\n \"id\": \"objective\"\n }}>{`Objective`}</h2>\n <p>{`The `}<inlineCode parentName=\"p\">{`<Objective>`}</inlineCode>{` component provides a wrapper for each objective:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-jsx\"\n }}>{`<Objective className=\"card\">{children}</Objective>\n`}</code></pre>\n <h3 {...{\n \"id\": \"properties-1\"\n }}>{`Properties`}</h3>\n <p>{`The component takes a className and passes it on to the component:`}</p>\n <Props of={Objective} mdxType=\"Props\" />\n <hr></hr>\n <h2 {...{\n \"id\": \"result\"\n }}>{`Result`}</h2>\n <p>{`The `}<inlineCode parentName=\"p\">{`<Result>`}</inlineCode>{` component provides a wrapper for each result:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-jsx\"\n }}>{`<Result className=\"card\">{children}</Result>\n`}</code></pre>\n <h3 {...{\n \"id\": \"properties-2\"\n }}>{`Properties`}</h3>\n <p>{`The component takes a className and passes it on to the component.`}</p>\n <Props of={Result} mdxType=\"Props\" />\n <hr></hr>\n <h2 {...{\n \"id\": \"goal\"\n }}>{`Goal`}</h2>\n <p>{`The `}<inlineCode parentName=\"p\">{`<Goal>`}</inlineCode>{` component displays the goal text, either by processing the result object properties or simply taking objective text.`}</p>\n <Playground __position={4} __code={'<Okr metrics={metrics} grades={grades}>\\n <Objective>\\n <Goal label=\\\"Objective\\\" text=\\\"Carve out a niche\\\" />\\n <Result>\\n <Goal\\n label=\\\"Key Result\\\"\\n direction=\\\"increase\\\"\\n metricId=\\\"1\\\"\\n start={20}\\n end={50}\\n />\\n </Result>\\n </Objective>\\n</Okr>'} __scope={{\n props,\n DefaultLayout,\n Objective,\n Progress,\n Result,\n Current,\n Score,\n Goal,\n Due,\n Okr,\n Row,\n Playground,\n Props,\n dateOptions,\n metrics,\n results,\n grades,\n DefaultLayout,\n _frontmatter\n }} mdxType=\"Playground\">\n\t<Okr metrics={metrics} grades={grades} mdxType=\"Okr\">\n\t\t<Objective mdxType=\"Objective\">\n\t\t\t<Goal label=\"Objective\" text=\"Carve out a niche\" mdxType=\"Goal\" />\n\t\t\t<Result mdxType=\"Result\">\n\t\t\t\t<Goal label=\"Key Result\" direction=\"increase\" metricId=\"1\" start={20} end={50} mdxType=\"Goal\" />\n\t\t\t</Result>\n\t\t</Objective>\n\t</Okr>\n </Playground>\n <h3 {...{\n \"id\": \"properties-3\"\n }}>{`Properties`}</h3>\n <p>{`The component takes objective properties to calculate the goal or simply text. It also includes an optional label:`}</p>\n <Props of={Goal} mdxType=\"Props\" />\n <h2 {...{\n \"id\": \"due\"\n }}>{`Due`}</h2>\n <p>{`Input any parsable date string (or timestamp) to display the date. Customize using options:`}</p>\n <Playground __position={6} __code={'<Due\\n label=\\\"Due date\\\"\\n date=\\\"2022/01/01\\\"\\n options={{ year: \\'numeric\\', month: \\'short\\', day: \\'numeric\\' }}\\n/>'} __scope={{\n props,\n DefaultLayout,\n Objective,\n Progress,\n Result,\n Current,\n Score,\n Goal,\n Due,\n Okr,\n Row,\n Playground,\n Props,\n dateOptions,\n metrics,\n results,\n grades,\n DefaultLayout,\n _frontmatter\n }} mdxType=\"Playground\">\n\t<Due label=\"Due date\" date=\"2022/01/01\" options={{\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\"\n }} mdxType=\"Due\" />\n </Playground>\n <h2 {...{\n \"id\": \"progress\"\n }}>{`Progress`}</h2>\n <p>{`Progress indicator for objectives, calculated from result scores or input as a percentage value.`}</p>\n <Playground __position={7} __code={'<Okr metrics={metrics} grades={grades}>\\n <Objective>\\n <Progress label=\\\"progress\\\" value={0.75} />\\n <Progress label=\\\"progress\\\" results={results} />\\n </Objective>\\n</Okr>'} __scope={{\n props,\n DefaultLayout,\n Objective,\n Progress,\n Result,\n Current,\n Score,\n Goal,\n Due,\n Okr,\n Row,\n Playground,\n Props,\n dateOptions,\n metrics,\n results,\n grades,\n DefaultLayout,\n _frontmatter\n }} mdxType=\"Playground\">\n\t<Okr metrics={metrics} grades={grades} mdxType=\"Okr\">\n\t\t<Objective mdxType=\"Objective\">\n\t\t\t<Progress label=\"progress\" value={0.75} mdxType=\"Progress\" />\n\t\t\t<Progress label=\"progress\" results={results} mdxType=\"Progress\" />\n\t\t</Objective>\n\t</Okr>\n </Playground>\n <h3 {...{\n \"id\": \"properties-4\"\n }}>{`Properties`}</h3>\n <p>{`Takes either a percentage value, or an array of results.`}</p>\n <Props of={Progress} mdxType=\"Props\" />\n <h3 {...{\n \"id\": \"results-example\"\n }}>{`Results example`}</h3>\n <p>{`Here is how to structure your results in an array:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-js\"\n }}>{` const results = [\n id: \"1\",\n metricId: \"1\",\n direction: \"increase\",\n start: 50,\n end: 10,\n current: 20,\n },\n]\n`}</code></pre>\n <h2 {...{\n \"id\": \"current\"\n }}>{`Current`}</h2>\n <p>{`Display the current result value.`}</p>\n <Playground __position={9} __code={'<Okr metrics={metrics} grades={grades}>\\n <Objective>\\n <Result>\\n <Current label=\\\"Current\\\" metricId=\\\"1\\\" value={30} />\\n </Result>\\n </Objective>\\n</Okr>'} __scope={{\n props,\n DefaultLayout,\n Objective,\n Progress,\n Result,\n Current,\n Score,\n Goal,\n Due,\n Okr,\n Row,\n Playground,\n Props,\n dateOptions,\n metrics,\n results,\n grades,\n DefaultLayout,\n _frontmatter\n }} mdxType=\"Playground\">\n\t<Okr metrics={metrics} grades={grades} mdxType=\"Okr\">\n\t\t<Objective mdxType=\"Objective\">\n\t\t\t<Result mdxType=\"Result\">\n\t\t\t\t<Current label=\"Current\" metricId=\"1\" value={30} mdxType=\"Current\" />\n\t\t\t</Result>\n\t\t</Objective>\n\t</Okr>\n </Playground>\n <h3 {...{\n \"id\": \"properties-5\"\n }}>{`Properties`}</h3>\n <p>{`Takes the current value from the result and the metricId to format the number.`}</p>\n <Props of={Current} mdxType=\"Props\" />\n <h2 {...{\n \"id\": \"score\"\n }}>{`Score`}</h2>\n <p>{`Score the result based on start, end (goal), and current value.`}</p>\n <Playground __position={11} __code={'<Okr metrics={metrics} grades={grades}>\\n <Objective>\\n <Result>\\n <Score\\n label=\\\"score\\\"\\n direction=\\\"increase\\\"\\n start={20}\\n end={50}\\n current={30}\\n circle\\n />\\n </Result>\\n </Objective>\\n</Okr>'} __scope={{\n props,\n DefaultLayout,\n Objective,\n Progress,\n Result,\n Current,\n Score,\n Goal,\n Due,\n Okr,\n Row,\n Playground,\n Props,\n dateOptions,\n metrics,\n results,\n grades,\n DefaultLayout,\n _frontmatter\n }} mdxType=\"Playground\">\n\t<Okr metrics={metrics} grades={grades} mdxType=\"Okr\">\n\t\t<Objective mdxType=\"Objective\">\n\t\t\t<Result mdxType=\"Result\">\n\t\t\t\t<Score label=\"score\" direction=\"increase\" start={20} end={50} current={30} circle mdxType=\"Score\" />\n\t\t\t</Result>\n\t\t</Objective>\n\t</Okr>\n </Playground>\n <h3 {...{\n \"id\": \"properties-6\"\n }}>{`Properties`}</h3>\n <p>{`Takes result properties, as well as a `}<inlineCode parentName=\"p\">{`label`}</inlineCode>{`, and `}<inlineCode parentName=\"p\">{`className`}</inlineCode>{`. Can display as a `}<inlineCode parentName=\"p\">{`circle`}</inlineCode>{` which uses the score grade to determine its background color.`}</p>\n <Props of={Score} mdxType=\"Props\" />\n <h2 {...{\n \"id\": \"row\"\n }}>{`Row`}</h2>\n <p>{`A flex row utility component (very optional).`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-jsx\"\n }}>{`<Row type=\"flex\">{children}</Row>\n`}</code></pre>\n <h3 {...{\n \"id\": \"properties-7\"\n }}>{`Properties`}</h3>\n <p>{`Use to layout your row using `}<inlineCode parentName=\"p\">{`flex`}</inlineCode>{` or `}<inlineCode parentName=\"p\">{`wrap`}</inlineCode>{`.`}</p>\n <Props of={Row} mdxType=\"Props\" />\n\n </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}