react-okr-ui
Version:
A React user interface toolkit for building OKR centric applications.
1 lines • 21 kB
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">Contribution | 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="Contribution"/><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="Contribution"/><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-contribution-mdx-0c7c129232efcbb89c0f.js"/><link as="fetch" rel="preload" href="/page-data/contribution/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 class="css-1rqvyud" href="/components">Components</a><a aria-current="page" class="css-1rqvyud active" href="/contribution">Contribution</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="/contribution#git">Git</a><a class=" css-1ooej63" href="/contribution#development">Development</a><a class=" css-1ooej63" href="/contribution#build">Build</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="contribution-guide" class="css-1vci3bl">Contribution guide</h1><h2 id="git"><style data-emotion-css="1r0pe6c">.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}</style><a href="#git" class="css-1r0pe6c">Git</a></h2><style data-emotion-css="1ftn47p">.css-1ftn47p{padding:0;margin:0;margin-bottom:16px;}</style><p class="css-1ftn47p">Contributors should work from the latest version branch in development (indicated using format <style data-emotion-css="ueqitl">.css-ueqitl{font-family:Inconsolata;}</style><code class="css-ueqitl">v0.1.0</code>).</p><p class="css-1ftn47p">Pull requests will be reviewed for contribution to future releases.</p><h2 id="development"><a href="#development" class="css-1r0pe6c">Development</a></h2><p class="css-1ftn47p">The easiest way to get started is via the included Docz site. Docz is a React based static site generator for documentation. It uses mdx.</p><p class="css-1ftn47p">Using Docz we have components in a living style guide. To run Docz locally for development:</p><div><style data-emotion-css="1h0sj8d">.css-1h0sj8d{padding:16px;margin:0;margin-bottom:32px;font-size:85%;margin-top:32px;text-align:left;font-family:Inconsolata;border-radius:4px;}.css-1h0sj8d dark{[object Object];}.css-1h0sj8d light{[object Object];}</style><pre class=" prism-code language-text css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa;overflow-x:auto" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><style data-emotion-css="1baulvz">.css-1baulvz{display:inline-block;}</style><span class="token plain css-1baulvz">npm install</span></div><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz">npm run docz:dev</span></div></pre></div><p class="css-1ftn47p">To run a build of the Docz site:</p><div><pre class=" prism-code language-text css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa;overflow-x:auto" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz">npm run docz:build</span></div></pre></div><p class="css-1ftn47p">To build and serve a Docz site:</p><div><pre class=" prism-code language-text css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa;overflow-x:auto" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz">npm run docz:serve</span></div></pre></div><h2 id="build"><a href="#build" class="css-1r0pe6c">Build</a></h2><p class="css-1ftn47p">Builds for distribution are via Webpack. To test your builds, you can:</p><div><pre class=" prism-code language-text css-1h0sj8d" style="font-family:Inconsolata;color:#393A34;background-color:#f6f8fa;overflow-x:auto" data-testid="code"><div class="token-line" style="font-family:Inconsolata;color:#393A34"><span class="token plain css-1baulvz">npm run build</span></div></pre></div><p class="css-1ftn47p">Builds are distributed via npm.</p></div></div></main></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/contribution";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-8fa9033beff8b07c3a65.js"],"app":["/app-5fb7d74d7969dcfe3942.js"],"component---src-docs-about-mdx":["/component---src-docs-about-mdx-8b1a82da6d1f3c1741aa.js"],"component---src-docs-components-mdx":["/component---src-docs-components-mdx-dc3af2f164d62b0ae18e.js"],"component---src-docs-contribution-mdx":["/component---src-docs-contribution-mdx-0c7c129232efcbb89c0f.js"],"component---src-docs-home-mdx":["/component---src-docs-home-mdx-9ac7b845d93575506038.js"],"component---src-pages-404-js":["/component---src-pages-404-js-236e1f90d7cf58f649c6.js"]};/*]]>*/</script><script src="/polyfill-8fa9033beff8b07c3a65.js" nomodule=""></script><script src="/component---src-docs-contribution-mdx-0c7c129232efcbb89c0f.js" async=""></script><script src="/1b4a29c3bef1710ad174d7a34cfe3e4b14ab594a-a91e74eaa94e6bf20b41.js" async=""></script><script src="/bac1b955-b711947e81fae9e9bc2c.js" async=""></script><script src="/app-5fb7d74d7969dcfe3942.js" async=""></script><script src="/styles-55e82d6ff5158c00b714.js" async=""></script><script src="/framework-4db1d6f62123f03ed513.js" async=""></script><script src="/webpack-runtime-e89551046e53a3f1ffb8.js" async=""></script></body></html>