react-okr-ui
Version:
A React user interface toolkit for building OKR centric applications.
71 lines • 147 kB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.6a7c12fbc7ed3330cdc4.css" id="gatsby-global-css">@import url(https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,700;0,900;1,300;1,700;1,900&family=Heebo:wght@400;500&display=swap);@import url(https://fonts.googleapis.com/css?family=Inconsolata&display=swap);article.okr-objective h1{font-size:1.5rem;font-weight:700;margin-bottom:0;padding-right:2rem;margin-top:0}section.okr-result{border-bottom:1px solid #e5e7eb;padding-bottom:1rem;margin-top:1rem}section.okr-result.h1{font-weight:700;font-size:1.25rem;margin-bottom:0;margin-top:0}.okr-progress{height:24px;border-radius:5px 5px;border:1px solid #e5e7eb;overflow:hidden}.okr-progress-bar{height:24px}.okr-progress-wrapper.full-width{width:100%}.okr-progress-wrapper.grow{flex-grow:1;padding-left:2rem}.okr-value{font-size:90%}.okr-value.okr-circle{border:1px solid #e5e7eb;width:2.5rem;height:2.5rem;border-radius:50% 50%;font-weight:700;font-size:80%;color:#fff}.okr-label{font-weight:700}.okr-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.okr-ml-1{margin-left:1rem}.okr-mr-1{margin-right:1rem}.okr-wrap{flex-wrap:wrap;justify-content:space-between;margin-bottom:.5rem}.okr-center,.okr-wrap{display:flex;align-items:center}.okr-center{justify-content:center}h1,h2,h3,h4{font-family:Heebo,sans-serif!important;font-weight:500}div,p,ul{font-family:Heebo,sans-serif;font-weight:400}</style><meta name="generator" content="Gatsby 2.32.3"/><title data-rh="true">Components | OKR UI</title><meta data-rh="true" name="description" content="A React user interface toolkit for building OKR centric applications."/><meta data-rh="true" property="og:title" content="Components"/><meta data-rh="true" property="og:description" content="A React user interface toolkit for building OKR centric applications."/><meta data-rh="true" property="og:type" content="website"/><meta data-rh="true" name="twitter:card" content="summary"/><meta data-rh="true" name="twitter:title" content="Components"/><meta data-rh="true" name="twitter:description" content="A React user interface toolkit for building OKR centric applications."/><link as="script" rel="preload" href="/webpack-runtime-e89551046e53a3f1ffb8.js"/><link as="script" rel="preload" href="/framework-4db1d6f62123f03ed513.js"/><link as="script" rel="preload" href="/styles-55e82d6ff5158c00b714.js"/><link as="script" rel="preload" href="/app-5fb7d74d7969dcfe3942.js"/><link as="script" rel="preload" href="/bac1b955-b711947e81fae9e9bc2c.js"/><link as="script" rel="preload" href="/1b4a29c3bef1710ad174d7a34cfe3e4b14ab594a-a91e74eaa94e6bf20b41.js"/><link as="script" rel="preload" href="/component---src-docs-components-mdx-dc3af2f164d62b0ae18e.js"/><link as="fetch" rel="preload" href="/page-data/components/page-data.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/sq/d/1635659820.json" crossorigin="anonymous"/><link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><style data-emotion-css="1ouyflx">.css-1ouyflx{font-family:'Source Sans Pro',sans-serif;font-size:20px;font-weight:400;line-height:1.5;color:var(--theme-ui-colors-text,#2D3747);background-color:var(--theme-ui-colors-background,#FFFFFF);}</style><div class="css-1ouyflx"><style data-emotion-css="jrjj6h">.css-jrjj6h > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="1ubpee3">.css-1ubpee3{min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-1ubpee3 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><style data-emotion-css="hbri28">.css-hbri28{box-sizing:border-box;min-width:0;min-height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-hbri28 > div{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}</style><div data-testid="layout" class="css-hbri28"><style data-emotion-css="1xva7m0">body{margin:0;padding:0;}.icon-link{display:none;}.with-overlay{overflow:hidden;}</style><style data-emotion-css="zf0iqh">.css-zf0iqh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="1tjxv7i">.css-1tjxv7i{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><style data-emotion-css="238csb">.css-238csb{box-sizing:border-box;min-width:0;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh;}</style><main class="css-238csb"><style data-emotion-css="18wmtq">.css-18wmtq{background-color:var(--theme-ui-colors-header-bg,#F5F6F7);position:relative;z-index:1;border-bottom:1px solid var(--theme-ui-colors-border,#CED4DE);}</style><div data-testid="header" class="css-18wmtq"><style data-emotion-css="zankq9">.css-zankq9{display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-zankq9{display:block;}}</style><style data-emotion-css="1s0wdqz">.css-1s0wdqz{box-sizing:border-box;min-width:0;display:none;position:absolute;top:calc(100% + 15px);left:30px;}@media screen and (max-width:57.5em){.css-1s0wdqz{display:block;}}</style><div class="css-1s0wdqz"><style data-emotion-css="4019lz">.css-4019lz{padding:0;outline:none;background:transparent;border:none;color:var(--theme-ui-colors-header-text,#2D3747);opacity:0.5;cursor:pointer;}.css-4019lz:hover{cursor:pointer;}</style><button class="css-4019lz"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></div><style data-emotion-css="z6jak6">.css-z6jak6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-left:32px;padding-right:32px;position:relative;height:80px;}</style><div class="css-z6jak6"><style data-emotion-css="xenp3v">.css-xenp3v{-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="1abzlu">.css-1abzlu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><style data-emotion-css="ug0363">.css-ug0363{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;font-size:24px;}</style><div data-testid="logo" class="css-ug0363"><style data-emotion-css="gyijir">.css-gyijir{font-weight:600;color:var(--theme-ui-colors-header-text,#2D3747);-webkit-text-decoration:none;text-decoration:none;}.css-gyijir:hover{color:var(--theme-ui-colors-primary,#0B5FFF);}</style><a class="css-gyijir" href="/">OKR UI</a></div><style data-emotion-css="k008qs">.css-k008qs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion-css="80zs6q">.css-80zs6q{box-sizing:border-box;min-width:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-80zs6q"><style data-emotion-css="1is33jg">.css-1is33jg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;outline:none;padding:12px;border:none;border-radius:9999px;background-color:var(--theme-ui-colors-header-button-bg,#0B5FFF);color:var(--theme-ui-colors-header-button-color,#FFFFFF);font-size:12px;font-weight:600;cursor:pointer;}</style><button aria-label="Switch to light mode" class="css-1is33jg"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></button></div></div></div><style data-emotion-css="1nfi0ai">.css-1nfi0ai{padding-top:0;padding-bottom:0;-webkit-flex:1;-ms-flex:1;flex:1;display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh;}@media screen and (max-width:57.5em){.css-1nfi0ai{display:block;}}</style><div class="css-1nfi0ai"><style data-emotion-css="1tn7q1x">.css-1tn7q1x{z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><style data-emotion-css="h4snl3">.css-h4snl3{box-sizing:border-box;min-width:0;z-index:999;position:fixed;top:81px;right:0;bottom:0;left:0;background:rgba(0,0,0,0.6);-webkit-transition:all .2s ease-out;transition:all .2s ease-out;visibility:hidden;opacity:0;}</style><div class="css-h4snl3"></div><style data-emotion-css="1ethd5x">.css-1ethd5x{padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1ethd5x{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><style data-emotion-css="1li9yso">.css-1li9yso{box-sizing:border-box;min-width:0;padding-top:32px;padding-bottom:32px;padding-left:32px;padding-right:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:1;min-width:0;max-height:100vh;border-right:1px solid var(--theme-ui-colors-border,#CED4DE);overflow:auto;-webkit-overflow-scrolling:touch;background-color:var(--theme-ui-colors-sidebar-bg,#FFFFFF);}@media screen and (max-width:57.5em){.css-1li9yso{z-index:9999;display:block;position:fixed;top:81px;left:0;bottom:0;width:256px;padding-left:32px;padding-right:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);-webkit-transition:-webkit-transform .2s ease-out;-webkit-transition:transform .2s ease-out;transition:transform .2s ease-out;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}</style><div data-testid="sidebar" class="css-1li9yso"><style data-emotion-css="lcm9hh">.css-lcm9hh{margin-bottom:16px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}</style><div data-testid="nav-search" class="css-lcm9hh"><style data-emotion-css="1mo6uhh">.css-1mo6uhh{color:var(--theme-ui-colors-border,#CED4DE);margin-right:8px;}</style><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="css-1mo6uhh"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg><style data-emotion-css="1bbueiu">.css-1bbueiu{outline:none;background:none;border:none;color:var(--theme-ui-colors-text,#2D3747);font-size:14px;}</style><input placeholder="Type to search..." value="" class="css-1bbueiu"/></div><style data-emotion-css="1rqvyud">.css-1rqvyud{margin-top:8px;margin-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-navGroup,#2D3747);-webkit-text-decoration:none;text-decoration:none;font-size:16px;}.css-1rqvyud.active{color:var(--theme-ui-colors-sidebar-navLinkActive,#0B5FFF);}</style><a class="css-1rqvyud" href="/about">About</a><a aria-current="page" class="css-1rqvyud active" href="/components">Components</a><style data-emotion-css="1ooej63">.css-1ooej63{margin-top:8px;margin-bottom:8px;display:block;color:var(--theme-ui-colors-sidebar-tocLink,#67788a);-webkit-text-decoration:none;text-decoration:none;font-size:14px;margin-left:16px;position:relative;}.css-1ooej63.active{color:var(--theme-ui-colors-sidebar-tocLinkActive,#1D2330);}.css-1ooej63.active::before{content:"";position:absolute;display:block;top:2px;left:-8px;height:1rem;background-color:var(--theme-ui-colors-primary,#0B5FFF);-webkit-transition:width 200ms ease 0s;transition:width 200ms ease 0s;width:2px;border-radius:1px;}</style><a class=" css-1ooej63" href="/components#okr">Okr</a><a class=" css-1ooej63" href="/components#objective">Objective</a><a class=" css-1ooej63" href="/components#result">Result</a><a class=" css-1ooej63" href="/components#goal">Goal</a><a class=" css-1ooej63" href="/components#due">Due</a><a class=" css-1ooej63" href="/components#progress">Progress</a><a class=" css-1ooej63" href="/components#current">Current</a><a class=" css-1ooej63" href="/components#score">Score</a><a class=" css-1ooej63" href="/components#row">Row</a><a class="css-1rqvyud" href="/contribution">Contribution</a><a class="css-1rqvyud" href="/">Home</a></div><style data-emotion-css="1w3d2mg">.css-1w3d2mg{background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1w3d2mg{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="kjtkh5">.css-kjtkh5{width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-kjtkh5{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><style data-emotion-css="1307vk3">.css-1307vk3{box-sizing:border-box;min-width:0;width:100%;min-width:0;max-width:1280px;margin-left:auto;margin-right:auto;padding:32px;background-color:var(--theme-ui-colors-background,#FFFFFF);position:relative;max-width:1280px;padding-top:48px;padding-bottom:48px;padding-left:32px;padding-right:32px;padding:32px;}@media screen and (max-width:57.5em){.css-1307vk3{padding-top:48px;padding-bottom:32px;padding-left:32px;padding-right:32px;}}</style><div data-testid="main-container" class="css-1307vk3"><style data-emotion-css="1vci3bl">.css-1vci3bl{padding:0;margin:0;margin-bottom:16px;font-size:48px;font-family:'Source Sans Pro',sans-serif;line-height:1.125;font-weight:700;}</style><h1 id="components" class="css-1vci3bl">Components</h1><style data-emotion-css="1ftn47p">.css-1ftn47p{padding:0;margin:0;margin-bottom:16px;}</style><p class="css-1ftn47p">React OKR UI provides a collection of highly compositional components for a wide range of possible OKR UI requirements.</p><p class="css-1ftn47p">Here's a live example. Adjust values in the Playground area to test how the components work and it's props work.</p><div style="position:relative;user-select:auto;margin:0;margin-right:auto;width:100%;height:auto;max-width:100%;min-width:260px;box-sizing:border-box;flex-shrink:0" data-testid="playground"><style data-emotion-css="79elbk">.css-79elbk{position:relative;}</style><div class="css-79elbk"><style data-emotion-css="nxr1xe">.css-nxr1xe{height:auto;display:block;min-height:100%;width:calc(100% - 2px);background-color:var(--theme-ui-colors-playground-bg,#FFFFFF);border:1px solid var(--theme-ui-colors-playground-border,#CED4DE);border-radius:4px 4px 0 0;}</style><div class="css-nxr1xe"><style data-emotion-css="mxobd5">.css-mxobd5{margin:0;padding:20px;}</style><div data-testid="live-preview" class="css-mxobd5"><div class="okr"><article class="okr-objective"><div class="okr-flex"><div class="okr-goal"><small class="okr-label">Objective</small><h1>Carve out a niche</h1></div><div class="okr-due"><small class="okr-label">Due date</small><div class="okr-value">Jan 1, 2022</div></div></div><div class="okr-progress-wrapper"><small class="okr-label">progress</small><div class="okr-progress"><div role="progressbar" class="okr-progress-bar" aria-label="Progress" aria-valuenow="0.75" aria-valuemin="0" aria-valuemax="100" style="width:75%;background:#10b981"></div></div></div><section class="okr-result"><div class="okr-flex"><div class="okr-goal"><small class="okr-label">Key Result</small><h1><span>Increase product revenue</span><span> from </span><span>20%</span><span> to </span><span>50%</span></h1></div><div class="okr-flex"><div class="okr-current okr-mr-1"><small class="okr-label">Current<!-- --> </small><div class="okr-value"><span>30%</span></div></div><div class="okr-score okr-ml-1"><div class="okr-value okr-circle okr-center" style="border-color:#ef4444;background:#ef4444"><span>33%</span></div></div></div></div></section></article></div></div></div><style data-emotion-css="4qwwu">.css-4qwwu{z-index:9;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;bottom:-20px;right:32px;}</style><div class="css-4qwwu"><style data-emotion-css="1ounbqd">.css-1ounbqd{padding:8px;outline:none;background:transparent;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-top:4px;padding-bottom:4px;background-color:var(--theme-ui-colors-border,#CED4DE);color:var(--theme-ui-colors-muted,#67788a);border-radius:0 0 3px 3px;}.css-1ounbqd:hover{cursor:pointer;}.css-1ounbqd ~ .css-1ounbqd{margin-left:4px;}</style><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg></button><button class="css-1ounbqd"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button></div></div><style data-emotion-css="ycvwe1">.css-ycvwe1{height:auto;display:block;min-height:100%;width:calc(100% - 2px);background-color:var(--theme-ui-colors-playground-bg,#FFFFFF);border:1px solid var(--theme-ui-colors-playground-border,#CED4DE);border-top:0;border-radius:0 0 4px 4px;}</style><div class="css-ycvwe1"><style data-emotion-css="d45ar4">.css-d45ar4{padding:8px;background:#f6f8fa;border-top:0;font-family:Inconsolata;font-size:18px;}.css-d45ar4 * > textarea:focus{outline:none;}</style><div class="css-d45ar4"><div data-testid="live-editor" style="position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;white-space:pre;font-family:Inconsolata;color:#393A34;background-color:#f6f8fa"><textarea style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px" class="npm__react-simple-code-editor__textarea" autoCapitalize="off" autoComplete="off" autoCorrect="off" spellcheck="false" data-gramm="false">() => {
// Setup metrics
const metrics = [
{
id: '1',
name: 'product revenue',
prefix: '',
suffix: '%',
space: false, // Fix
allowNegative: false,
decimalScale: 2,
},
]
// Set grades
const grades = [
{
id: '1',
name: 'Fail',
range: [0.0, 0.75],
color: '#ef4444',
},
{
id: '2',
name: 'Pass',
range: [0.75, 2.0],
color: '#10b981',
},
]
return (
<Okr metrics={metrics} grades={grades}>
<Objective>
<Row type="flex">
<Goal label="Objective" text="Carve out a niche" />
<Due
label="Due date"
date="2022/01/01"
options={{ year: 'numeric', month: 'short', day: 'numeric' }}
/>
</Row>
<Progress label="progress" value={0.75} />
<Result>
<Row type="flex">
<Goal
label="Key Result"
direction="increase"
metricId="1"
start={20}
end={50}
/>
<Row type="flex">
<Current
className="okr-mr-1"
label="Current"
metricId="1"
value={30}
/>
<Score
className="okr-ml-1"
direction="increase"
start={20}
end={50}
current={30}
circle
/>
</Row>
</Row>
</Result>
</Objective>
</Okr>
)
}</textarea><pre aria-hidden="true" style="margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;position:relative;pointer-events:none;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Setup metrics</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> metrics </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'1'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'product revenue'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> prefix</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">''</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> suffix</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'%'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> space</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Fix</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> allowNegative</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> decimalScale</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Set grades</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> grades </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'1'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'Fail'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> range</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0.0</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0.75</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'#ef4444'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> id</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'2'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'Pass'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> range</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0.75</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2.0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'#10b981'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Okr</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">metrics</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">metrics</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">grades</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f">grades</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Objective</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Row</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">type</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">flex</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Goal</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Objective</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">text</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Carve out a niche</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Due</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Due date</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">date</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">2022/01/01</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">options</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript" style="color:#00009f"> year</span><span class="token tag script language-javascript punctuation" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">'numeric'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"> month</span><span class="token tag script language-javascript punctuation" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">'short'</span><span class="token tag script language-javascript punctuation" style="color:#393A34">,</span><span class="token tag script language-javascript" style="color:#00009f"> day</span><span class="token tag script language-javascript punctuation" style="color:#393A34">:</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript string" style="color:#e3116c">'numeric'</span><span class="token tag script language-javascript" style="color:#00009f"> </span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag class-name" style="color:#00009f">Row</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Progress</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">progress</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">value</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">0.75</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Result</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Row</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">type</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">flex</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Goal</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">label</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">Key Result</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">direction</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">increase</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">metricId</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">1</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">start</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">20</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">end</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#393A34">=</span><span class="token tag script language-javascript punctuation" style="color:#393A34">{</span><span class="token tag script language-javascript number" style="color:#36acaa">50</span><span class="token tag script language-javascript punctuation" style="color:#393A34">}</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag punctuation" style="color:#393A34">/></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Row</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">type</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#e3116c">flex</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token plain"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag class-name" style="color:#00009f">Current</span><span class="token tag" style="color:#00009f"></span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#00a4db">className</span><span class="token tag attr-value punctuation" style="color:#393A34">=</span><span class="token tag attr-value punctuat