box-ui-elements 16.1.0-beta.20 → 16.1.0-beta.21

package/es/components/inline-error/InlineError.stories.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import InlineError from './InlineError';
+export var regular = function regular() {
+  return React.createElement(InlineError, {
+    title: "Something bad happened"
+  }, "Username is required");
+};
+export default {
+  title: 'Components|InlineError',
+  component: InlineError
+};
+//# sourceMappingURL=InlineError.stories.js.map

package/es/components/inline-error/InlineError.stories.js.flow

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import InlineError from './InlineError';
+
+export const regular = () => <InlineError title="Something bad happened">Username is required</InlineError>;
+
+export default {
+    title: 'Components|InlineError',
+    component: InlineError,
+};

package/es/components/inline-error/InlineError.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inline-error/InlineError.stories.js"],"names":["React","InlineError","regular","title","component"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,WAAD;AAAa,IAAA,KAAK,EAAC;AAAnB,4BAAN;AAAA,CAAhB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,wBADI;AAEXC,EAAAA,SAAS,EAAEH;AAFA,CAAf","sourcesContent":["import * as React from 'react';\nimport InlineError from './InlineError';\n\nexport const regular = () => <InlineError title=\"Something bad happened\">Username is required</InlineError>;\n\nexport default {\n    title: 'Components|InlineError',\n    component: InlineError,\n};\n"],"file":"InlineError.stories.js"}

package/es/components/inline-notice/InlineNotice.stories.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import InlineNotice from './InlineNotice';
+import notes from './InlineNotice.stories.md';
+export var withoutTitle = function withoutTitle() {
+  return React.createElement("div", null, React.createElement(InlineNotice, {
+    type: "warning"
+  }, "This is a ", React.createElement("strong", null, "warning"), " notice. You might want to pay attention to this."), React.createElement(InlineNotice, {
+    type: "error"
+  }, "This is an ", React.createElement("strong", null, "error"), " notice. You really want to pay attention to this."), React.createElement(InlineNotice, {
+    type: "success"
+  }, "This is a ", React.createElement("strong", null, "success"), " notice. You ought to feel really good about this."), React.createElement(InlineNotice, {
+    type: "info"
+  }, "This is an ", React.createElement("strong", null, "info"), " notice. You should get some context from this."), React.createElement(InlineNotice, {
+    type: "generic"
+  }, "This is an ", React.createElement("strong", null, "generic"), " notice. You will just want to see this."));
+};
+export var withTitle = function withTitle() {
+  return React.createElement("div", null, React.createElement(InlineNotice, {
+    type: "warning",
+    title: "Warning Title"
+  }, "This is a warning notice. You might want to pay attention to this."), React.createElement(InlineNotice, {
+    type: "error",
+    title: "Error Title"
+  }, "This is an error notice. You really want to pay attention to this."), React.createElement(InlineNotice, {
+    type: "success",
+    title: "Success Title"
+  }, "This is a success notice. You ought to feel really good about this."), React.createElement(InlineNotice, {
+    type: "info",
+    title: "Info Title"
+  }, "This is an info notice. You should get some context from this."), React.createElement(InlineNotice, {
+    type: "generic",
+    title: "Generic Title"
+  }, "This is a generic notice. You will just want to notice this."));
+};
+export default {
+  title: 'Components|InlineNotice',
+  component: InlineNotice,
+  parameters: {
+    notes: notes
+  }
+};
+//# sourceMappingURL=InlineNotice.stories.js.map

package/es/components/inline-notice/InlineNotice.stories.js.flow

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import InlineNotice from './InlineNotice';
+import notes from './InlineNotice.stories.md';
+
+export const withoutTitle = () => (
+    <div>
+        <InlineNotice type="warning">
+            This is a <strong>warning</strong> notice. You might want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="error">
+            This is an <strong>error</strong> notice. You really want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="success">
+            This is a <strong>success</strong> notice. You ought to feel really good about this.
+        </InlineNotice>
+
+        <InlineNotice type="info">
+            This is an <strong>info</strong> notice. You should get some context from this.
+        </InlineNotice>
+
+        <InlineNotice type="generic">
+            This is an <strong>generic</strong> notice. You will just want to see this.
+        </InlineNotice>
+    </div>
+);
+
+export const withTitle = () => (
+    <div>
+        <InlineNotice type="warning" title="Warning Title">
+            This is a warning notice. You might want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="error" title="Error Title">
+            This is an error notice. You really want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="success" title="Success Title">
+            This is a success notice. You ought to feel really good about this.
+        </InlineNotice>
+
+        <InlineNotice type="info" title="Info Title">
+            This is an info notice. You should get some context from this.
+        </InlineNotice>
+
+        <InlineNotice type="generic" title="Generic Title">
+            This is a generic notice. You will just want to notice this.
+        </InlineNotice>
+    </div>
+);
+
+export default {
+    title: 'Components|InlineNotice',
+    component: InlineNotice,
+    parameters: {
+        notes,
+    },
+};

package/es/components/inline-notice/InlineNotice.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inline-notice/InlineNotice.stories.js"],"names":["React","InlineNotice","notes","withoutTitle","withTitle","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,KAAP,MAAkB,2BAAlB;AAEA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,SACxB,iCACI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,mBACc,8CADd,sDADJ,EAKI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,oBACe,4CADf,uDALJ,EASI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,mBACc,8CADd,uDATJ,EAaI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,oBACe,2CADf,oDAbJ,EAiBI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,oBACe,8CADf,6CAjBJ,CADwB;AAAA,CAArB;AAwBP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SACrB,iCACI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,SAAnB;AAA6B,IAAA,KAAK,EAAC;AAAnC,0EADJ,EAKI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,OAAnB;AAA2B,IAAA,KAAK,EAAC;AAAjC,0EALJ,EASI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,SAAnB;AAA6B,IAAA,KAAK,EAAC;AAAnC,2EATJ,EAaI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,MAAnB;AAA0B,IAAA,KAAK,EAAC;AAAhC,sEAbJ,EAiBI,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC,SAAnB;AAA6B,IAAA,KAAK,EAAC;AAAnC,oEAjBJ,CADqB;AAAA,CAAlB;AAwBP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEL,YAFA;AAGXM,EAAAA,UAAU,EAAE;AACRL,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\nimport InlineNotice from './InlineNotice';\nimport notes from './InlineNotice.stories.md';\n\nexport const withoutTitle = () => (\n    <div>\n        <InlineNotice type=\"warning\">\n            This is a <strong>warning</strong> notice. You might want to pay attention to this.\n        </InlineNotice>\n\n        <InlineNotice type=\"error\">\n            This is an <strong>error</strong> notice. You really want to pay attention to this.\n        </InlineNotice>\n\n        <InlineNotice type=\"success\">\n            This is a <strong>success</strong> notice. You ought to feel really good about this.\n        </InlineNotice>\n\n        <InlineNotice type=\"info\">\n            This is an <strong>info</strong> notice. You should get some context from this.\n        </InlineNotice>\n\n        <InlineNotice type=\"generic\">\n            This is an <strong>generic</strong> notice. You will just want to see this.\n        </InlineNotice>\n    </div>\n);\n\nexport const withTitle = () => (\n    <div>\n        <InlineNotice type=\"warning\" title=\"Warning Title\">\n            This is a warning notice. You might want to pay attention to this.\n        </InlineNotice>\n\n        <InlineNotice type=\"error\" title=\"Error Title\">\n            This is an error notice. You really want to pay attention to this.\n        </InlineNotice>\n\n        <InlineNotice type=\"success\" title=\"Success Title\">\n            This is a success notice. You ought to feel really good about this.\n        </InlineNotice>\n\n        <InlineNotice type=\"info\" title=\"Info Title\">\n            This is an info notice. You should get some context from this.\n        </InlineNotice>\n\n        <InlineNotice type=\"generic\" title=\"Generic Title\">\n            This is a generic notice. You will just want to notice this.\n        </InlineNotice>\n    </div>\n);\n\nexport default {\n    title: 'Components|InlineNotice',\n    component: InlineNotice,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"InlineNotice.stories.js"}

package/es/components/nav-sidebar/NavSidebar.stories.js

@@ -0,0 +1,37 @@
+/* eslint-disable */
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import NavSidebar from './NavSidebar';
+import NavListCollapseHeader from './NavListCollapseHeader';
+import NavList from './NavList';
+import Link from '../link/Link';
+import notes from './NavSidebar.stories.md';
+export var notCollapsible = function notCollapsible() {
+  return React.createElement(NavSidebar, {
+    "data-resin-component": "leftnav"
+  }, React.createElement(NavList, null, React.createElement(Link, null, "Item 1-1"), React.createElement(Link, null, "Item 1-2")), React.createElement(NavList, {
+    heading: "Item 2"
+  }, React.createElement(Link, null, "Item 2-1"), React.createElement(Link, null, "Item 2-2"), React.createElement(Link, null, "Item 2-3")));
+};
+export var collapsible = function collapsible() {
+  return React.createElement(NavSidebar, {
+    "data-resin-component": "leftnav"
+  }, React.createElement(NavList, {
+    heading: React.createElement(NavListCollapseHeader, {
+      onToggleCollapse: action('onToggleCollapse called')
+    }, "Collapse or Expand"),
+    className: "is-collapsible",
+    collapsed: boolean('collapsed', false)
+  }, React.createElement(Link, null, "Item 1-1"), React.createElement(Link, null, "Item 1-2")), React.createElement(NavList, {
+    heading: "Item 2"
+  }, React.createElement(Link, null, "Item 2-1"), React.createElement(Link, null, "Item 2-2"), React.createElement(Link, null, "Item 2-3")));
+};
+export default {
+  title: 'Components|NavSidebar',
+  component: NavSidebar,
+  parameters: {
+    notes: notes
+  }
+};
+//# sourceMappingURL=NavSidebar.stories.js.map

package/es/components/nav-sidebar/NavSidebar.stories.js.flow

@@ -0,0 +1,54 @@
+/* eslint-disable */
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import NavSidebar from './NavSidebar';
+import NavListCollapseHeader from './NavListCollapseHeader';
+import NavList from './NavList';
+import Link from '../link/Link';
+
+import notes from './NavSidebar.stories.md';
+
+export const notCollapsible = () => (
+    <NavSidebar data-resin-component="leftnav">
+        <NavList>
+            <Link>Item 1-1</Link>
+            <Link>Item 1-2</Link>
+        </NavList>
+        <NavList heading="Item 2">
+            <Link>Item 2-1</Link>
+            <Link>Item 2-2</Link>
+            <Link>Item 2-3</Link>
+        </NavList>
+    </NavSidebar>
+);
+
+export const collapsible = () => (
+    <NavSidebar data-resin-component="leftnav">
+        <NavList
+            heading={
+                <NavListCollapseHeader onToggleCollapse={action('onToggleCollapse called')}>
+                    Collapse or Expand
+                </NavListCollapseHeader>
+            }
+            className="is-collapsible"
+            collapsed={boolean('collapsed', false)}
+        >
+            <Link>Item 1-1</Link>
+            <Link>Item 1-2</Link>
+        </NavList>
+        <NavList heading="Item 2">
+            <Link>Item 2-1</Link>
+            <Link>Item 2-2</Link>
+            <Link>Item 2-3</Link>
+        </NavList>
+    </NavSidebar>
+);
+
+export default {
+    title: 'Components|NavSidebar',
+    component: NavSidebar,
+    parameters: {
+        notes,
+    },
+};

package/es/components/nav-sidebar/NavSidebar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/nav-sidebar/NavSidebar.stories.js"],"names":["React","action","boolean","NavSidebar","NavListCollapseHeader","NavList","Link","notes","notCollapsible","collapsible","title","component","parameters"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,OAAT,QAAwB,wBAAxB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,IAAP,MAAiB,cAAjB;AAEA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SAC1B,oBAAC,UAAD;AAAY,4BAAqB;AAAjC,KACI,oBAAC,OAAD,QACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,CADJ,EAKI,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAC;AAAjB,KACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,EAGI,oBAAC,IAAD,mBAHJ,CALJ,CAD0B;AAAA,CAAvB;AAcP,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;AAAA,SACvB,oBAAC,UAAD;AAAY,4BAAqB;AAAjC,KACI,oBAAC,OAAD;AACI,IAAA,OAAO,EACH,oBAAC,qBAAD;AAAuB,MAAA,gBAAgB,EAAER,MAAM,CAAC,yBAAD;AAA/C,4BAFR;AAMI,IAAA,SAAS,EAAC,gBANd;AAOI,IAAA,SAAS,EAAEC,OAAO,CAAC,WAAD,EAAc,KAAd;AAPtB,KASI,oBAAC,IAAD,mBATJ,EAUI,oBAAC,IAAD,mBAVJ,CADJ,EAaI,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAC;AAAjB,KACI,oBAAC,IAAD,mBADJ,EAEI,oBAAC,IAAD,mBAFJ,EAGI,oBAAC,IAAD,mBAHJ,CAbJ,CADuB;AAAA,CAApB;AAsBP,eAAe;AACXQ,EAAAA,KAAK,EAAE,uBADI;AAEXC,EAAAA,SAAS,EAAER,UAFA;AAGXS,EAAAA,UAAU,EAAE;AACRL,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["/* eslint-disable */\nimport * as React from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { boolean } from '@storybook/addon-knobs';\nimport NavSidebar from './NavSidebar';\nimport NavListCollapseHeader from './NavListCollapseHeader';\nimport NavList from './NavList';\nimport Link from '../link/Link';\n\nimport notes from './NavSidebar.stories.md';\n\nexport const notCollapsible = () => (\n    <NavSidebar data-resin-component=\"leftnav\">\n        <NavList>\n            <Link>Item 1-1</Link>\n            <Link>Item 1-2</Link>\n        </NavList>\n        <NavList heading=\"Item 2\">\n            <Link>Item 2-1</Link>\n            <Link>Item 2-2</Link>\n            <Link>Item 2-3</Link>\n        </NavList>\n    </NavSidebar>\n);\n\nexport const collapsible = () => (\n    <NavSidebar data-resin-component=\"leftnav\">\n        <NavList\n            heading={\n                <NavListCollapseHeader onToggleCollapse={action('onToggleCollapse called')}>\n                    Collapse or Expand\n                </NavListCollapseHeader>\n            }\n            className=\"is-collapsible\"\n            collapsed={boolean('collapsed', false)}\n        >\n            <Link>Item 1-1</Link>\n            <Link>Item 1-2</Link>\n        </NavList>\n        <NavList heading=\"Item 2\">\n            <Link>Item 2-1</Link>\n            <Link>Item 2-2</Link>\n            <Link>Item 2-3</Link>\n        </NavList>\n    </NavSidebar>\n);\n\nexport default {\n    title: 'Components|NavSidebar',\n    component: NavSidebar,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"NavSidebar.stories.js"}

package/es/src/styles/typography.stories.d.ts

@@ -0,0 +1,8 @@
+import './typography.stories.scss';
+export declare const lato: () => JSX.Element;
+export declare const heading: () => JSX.Element;
+export declare const text: () => JSX.Element;
+declare const _default: {
+    title: string;
+};
+export default _default;

package/es/styles/typography.stories.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import './typography.stories.scss';
+export var lato = function lato() {
+  return React.createElement("div", {
+    className: "typography"
+  }, React.createElement("div", {
+    className: "heading"
+  }, React.createElement("h1", null, "Lato 2.0")), React.createElement("div", {
+    className: "weights"
+  }, React.createElement("div", {
+    className: "regular"
+  }, React.createElement("div", {
+    className: "preview"
+  }, "Aa"), React.createElement("div", {
+    className: "weight"
+  }, "Regular")), React.createElement("div", {
+    className: "bold"
+  }, React.createElement("div", {
+    className: "preview"
+  }, "Aa"), React.createElement("div", {
+    className: "weight"
+  }, "Bold"))));
+};
+export var heading = function heading() {
+  return React.createElement("div", {
+    className: "typography"
+  }, React.createElement("div", {
+    className: "heading"
+  }, React.createElement("label", null, "H1"), React.createElement("h1", null, "Project Symphony")), React.createElement("div", {
+    className: "heading"
+  }, React.createElement("label", null, "H2"), React.createElement("h2", null, "Project Symphony")), React.createElement("div", {
+    className: "heading"
+  }, React.createElement("label", null, "H3"), React.createElement("h3", null, "Project Symphony")), React.createElement("div", {
+    className: "heading"
+  }, React.createElement("label", null, "H4"), React.createElement("h4", null, "Project Symphony")), React.createElement("div", {
+    className: "heading"
+  }, React.createElement("label", null, "H5"), React.createElement("h5", null, "Project Symphony")), React.createElement("div", {
+    className: "heading"
+  }, React.createElement("label", null, "H6"), React.createElement("h6", null, "Project Symphony")));
+};
+export var text = function text() {
+  return React.createElement("div", {
+    className: "typography"
+  }, React.createElement("div", null, React.createElement("label", null, "BODY"), React.createElement("span", {
+    className: "body"
+  }, "Project Symphony")), React.createElement("div", null, React.createElement("label", null, "INPUT LABEL"), React.createElement("span", {
+    className: "input-label"
+  }, "Project Symphony")), React.createElement("div", null, React.createElement("label", null, "INPUT TEXT"), React.createElement("span", {
+    className: "input-text"
+  }, "Project Symphony")));
+};
+export default {
+  title: 'Theming|Typography'
+};
+//# sourceMappingURL=typography.stories.js.map

package/es/styles/typography.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/typography.stories.tsx"],"names":["React","lato","heading","text","title"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAO,2BAAP;AAEA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,SAChB;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,2CADJ,CADJ,EAII;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,UADJ,EAEI;AAAK,IAAA,SAAS,EAAC;AAAf,eAFJ,CADJ,EAKI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,UADJ,EAEI;AAAK,IAAA,SAAS,EAAC;AAAf,YAFJ,CALJ,CAJJ,CADgB;AAAA,CAAb;AAkBP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SACnB;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,wCADJ,EAEI,mDAFJ,CADJ,EAKI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,wCADJ,EAEI,mDAFJ,CALJ,EASI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,wCADJ,EAEI,mDAFJ,CATJ,EAaI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,wCADJ,EAEI,mDAFJ,CAbJ,EAiBI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,wCADJ,EAEI,mDAFJ,CAjBJ,EAqBI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,wCADJ,EAEI,mDAFJ,CArBJ,CADmB;AAAA,CAAhB;AA6BP,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,SAChB;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,iCACI,0CADJ,EAEI;AAAM,IAAA,SAAS,EAAC;AAAhB,wBAFJ,CADJ,EAKI,iCACI,iDADJ,EAEI;AAAM,IAAA,SAAS,EAAC;AAAhB,wBAFJ,CALJ,EASI,iCACI,gDADJ,EAEI;AAAM,IAAA,SAAS,EAAC;AAAhB,wBAFJ,CATJ,CADgB;AAAA,CAAb;AAiBP,eAAe;AACXC,EAAAA,KAAK,EAAE;AADI,CAAf","sourcesContent":["import * as React from 'react';\nimport './typography.stories.scss';\n\nexport const lato = () => (\n    <div className=\"typography\">\n        <div className=\"heading\">\n            <h1>Lato 2.0</h1>\n        </div>\n        <div className=\"weights\">\n            <div className=\"regular\">\n                <div className=\"preview\">Aa</div>\n                <div className=\"weight\">Regular</div>\n            </div>\n            <div className=\"bold\">\n                <div className=\"preview\">Aa</div>\n                <div className=\"weight\">Bold</div>\n            </div>\n        </div>\n    </div>\n);\n\nexport const heading = () => (\n    <div className=\"typography\">\n        <div className=\"heading\">\n            <label>H1</label>\n            <h1>Project Symphony</h1>\n        </div>\n        <div className=\"heading\">\n            <label>H2</label>\n            <h2>Project Symphony</h2>\n        </div>\n        <div className=\"heading\">\n            <label>H3</label>\n            <h3>Project Symphony</h3>\n        </div>\n        <div className=\"heading\">\n            <label>H4</label>\n            <h4>Project Symphony</h4>\n        </div>\n        <div className=\"heading\">\n            <label>H5</label>\n            <h5>Project Symphony</h5>\n        </div>\n        <div className=\"heading\">\n            <label>H6</label>\n            <h6>Project Symphony</h6>\n        </div>\n    </div>\n);\n\nexport const text = () => (\n    <div className=\"typography\">\n        <div>\n            <label>BODY</label>\n            <span className=\"body\">Project Symphony</span>\n        </div>\n        <div>\n            <label>INPUT LABEL</label>\n            <span className=\"input-label\">Project Symphony</span>\n        </div>\n        <div>\n            <label>INPUT TEXT</label>\n            <span className=\"input-text\">Project Symphony</span>\n        </div>\n    </div>\n);\n\nexport default {\n    title: 'Theming|Typography',\n};\n"],"file":"typography.stories.js"}

package/es/styles/typography.stories.scss

@@ -0,0 +1,60 @@
+@import './base';
+
+.typography {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-top: 25px;
+
+    .weights {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+        color: $black;
+    }
+
+    .weights .preview {
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    .weights .regular {
+        margin-right: 15px;
+    }
+
+    .weights .bold .preview {
+        font-weight: bold;
+        font-family: 'Lato', sans-serif;
+    }
+
+    .font-container,
+    .headings-container {
+        width: 33%;
+    }
+
+    .heading {
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+    }
+
+    label {
+        margin-right: 10px;
+        color: $bdl-watermelon-red;
+    }
+
+    .form-font-container label {
+        display: inline-block;
+        width: 80px;
+        line-height: 30px;
+    }
+
+    .form-font-container .body,
+    .form-font-container .input-text {
+        font-size: 14px;
+    }
+
+    .form-font-container .input-label {
+        font-size: 13px;
+    }
+}

package/i18n/ko-KR.js

@@ -97,7 +97,7 @@ export default {
   "be.contentSidebar.activityFeed.commentForm.commentWrite": "코멘트 작성",
   "be.contentSidebar.activityFeed.commmon.showOriginalMessage": "원본 표시",
   "be.contentSidebar.activityFeed.common.activityStatusResolved": "해결됨",
-  "be.contentSidebar.activityFeed.common.editedMessage": " (편집됨)",
+  "be.contentSidebar.activityFeed.common.editedMessage": "(편집됨)",
   "be.contentSidebar.activityFeed.common.seeLessMessage": "간단히 보기",
   "be.contentSidebar.activityFeed.common.seeMoreMessage": "더 보기",
   "be.contentSidebar.activityFeed.common.translateMessage": "번역",

package/i18n/ko-KR.properties

@@ -195,7 +195,7 @@ be.contentSidebar.activityFeed.commmon.showOriginalMessage = 원본 표시
 # Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)
 be.contentSidebar.activityFeed.common.activityStatusResolved = 해결됨
 # Label indicating that message was edited, should be lowercase, should have escaped leading space
-be.contentSidebar.activityFeed.common.editedMessage = \ (편집됨)
+be.contentSidebar.activityFeed.common.editedMessage = \(편집됨)
 # See less button for hiding part of long message
 be.contentSidebar.activityFeed.common.seeLessMessage = 간단히 보기
 # See more button for showing whole long message

package/i18n/ru-RU.js

@@ -97,7 +97,7 @@ export default {
   "be.contentSidebar.activityFeed.commentForm.commentWrite": "Оставьте комментарий",
   "be.contentSidebar.activityFeed.commmon.showOriginalMessage": "Показать оригинал",
   "be.contentSidebar.activityFeed.common.activityStatusResolved": "Решено",
-  "be.contentSidebar.activityFeed.common.editedMessage": "(изменено)",
+  "be.contentSidebar.activityFeed.common.editedMessage": " (изменено)",
   "be.contentSidebar.activityFeed.common.seeLessMessage": "Показать меньше",
   "be.contentSidebar.activityFeed.common.seeMoreMessage": "Показать больше",
   "be.contentSidebar.activityFeed.common.translateMessage": "Перевести",

package/i18n/ru-RU.properties

@@ -195,7 +195,7 @@ be.contentSidebar.activityFeed.commmon.showOriginalMessage = Показать о
 # Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)
 be.contentSidebar.activityFeed.common.activityStatusResolved = Решено
 # Label indicating that message was edited, should be lowercase, should have escaped leading space
-be.contentSidebar.activityFeed.common.editedMessage = (изменено)
+be.contentSidebar.activityFeed.common.editedMessage = \ (изменено)
 # See less button for hiding part of long message
 be.contentSidebar.activityFeed.common.seeLessMessage = Показать меньше
 # See more button for showing whole long message

package/i18n/zh-CN.js

@@ -97,7 +97,7 @@ export default {
   "be.contentSidebar.activityFeed.commentForm.commentWrite": "留下评论",
   "be.contentSidebar.activityFeed.commmon.showOriginalMessage": "显示原始评论",
   "be.contentSidebar.activityFeed.common.activityStatusResolved": "Resolved",
-  "be.contentSidebar.activityFeed.common.editedMessage": "（编辑）",
+  "be.contentSidebar.activityFeed.common.editedMessage": "（已编辑）",
   "be.contentSidebar.activityFeed.common.seeLessMessage": "查看更少",
   "be.contentSidebar.activityFeed.common.seeMoreMessage": "查看更多",
   "be.contentSidebar.activityFeed.common.translateMessage": "翻译",

package/i18n/zh-CN.properties

@@ -195,7 +195,7 @@ be.contentSidebar.activityFeed.commmon.showOriginalMessage = 显示原始评论
 # Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)
 be.contentSidebar.activityFeed.common.activityStatusResolved = Resolved
 # Label indicating that message was edited, should be lowercase, should have escaped leading space
-be.contentSidebar.activityFeed.common.editedMessage = （编辑）
+be.contentSidebar.activityFeed.common.editedMessage = \（已编辑）
 # See less button for hiding part of long message
 be.contentSidebar.activityFeed.common.seeLessMessage = 查看更少
 # See more button for showing whole long message

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "16.1.0-beta.20",
+    "version": "16.1.0-beta.21",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",

package/src/components/inline-error/InlineError.stories.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import InlineError from './InlineError';
+
+export const regular = () => <InlineError title="Something bad happened">Username is required</InlineError>;
+
+export default {
+    title: 'Components|InlineError',
+    component: InlineError,
+};

package/src/components/inline-error/InlineError.stories.md

@@ -0,0 +1,3 @@
+`import InlineError from 'box-ui-elements/es/components/InlineError';`
+
+An alias for `<InlineNotice type="error">`

package/src/components/inline-notice/InlineNotice.stories.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import InlineNotice from './InlineNotice';
+import notes from './InlineNotice.stories.md';
+
+export const withoutTitle = () => (
+    <div>
+        <InlineNotice type="warning">
+            This is a <strong>warning</strong> notice. You might want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="error">
+            This is an <strong>error</strong> notice. You really want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="success">
+            This is a <strong>success</strong> notice. You ought to feel really good about this.
+        </InlineNotice>
+
+        <InlineNotice type="info">
+            This is an <strong>info</strong> notice. You should get some context from this.
+        </InlineNotice>
+
+        <InlineNotice type="generic">
+            This is an <strong>generic</strong> notice. You will just want to see this.
+        </InlineNotice>
+    </div>
+);
+
+export const withTitle = () => (
+    <div>
+        <InlineNotice type="warning" title="Warning Title">
+            This is a warning notice. You might want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="error" title="Error Title">
+            This is an error notice. You really want to pay attention to this.
+        </InlineNotice>
+
+        <InlineNotice type="success" title="Success Title">
+            This is a success notice. You ought to feel really good about this.
+        </InlineNotice>
+
+        <InlineNotice type="info" title="Info Title">
+            This is an info notice. You should get some context from this.
+        </InlineNotice>
+
+        <InlineNotice type="generic" title="Generic Title">
+            This is a generic notice. You will just want to notice this.
+        </InlineNotice>
+    </div>
+);
+
+export default {
+    title: 'Components|InlineNotice',
+    component: InlineNotice,
+    parameters: {
+        notes,
+    },
+};

package/src/components/inline-notice/InlineNotice.stories.md

@@ -0,0 +1 @@
+`import InlineNotice from 'box-ui-elements/es/components/InlineNotice';`

package/src/components/nav-sidebar/NavSidebar.stories.js

@@ -0,0 +1,54 @@
+/* eslint-disable */
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
+import NavSidebar from './NavSidebar';
+import NavListCollapseHeader from './NavListCollapseHeader';
+import NavList from './NavList';
+import Link from '../link/Link';
+
+import notes from './NavSidebar.stories.md';
+
+export const notCollapsible = () => (
+    <NavSidebar data-resin-component="leftnav">
+        <NavList>
+            <Link>Item 1-1</Link>
+            <Link>Item 1-2</Link>
+        </NavList>
+        <NavList heading="Item 2">
+            <Link>Item 2-1</Link>
+            <Link>Item 2-2</Link>
+            <Link>Item 2-3</Link>
+        </NavList>
+    </NavSidebar>
+);
+
+export const collapsible = () => (
+    <NavSidebar data-resin-component="leftnav">
+        <NavList
+            heading={
+                <NavListCollapseHeader onToggleCollapse={action('onToggleCollapse called')}>
+                    Collapse or Expand
+                </NavListCollapseHeader>
+            }
+            className="is-collapsible"
+            collapsed={boolean('collapsed', false)}
+        >
+            <Link>Item 1-1</Link>
+            <Link>Item 1-2</Link>
+        </NavList>
+        <NavList heading="Item 2">
+            <Link>Item 2-1</Link>
+            <Link>Item 2-2</Link>
+            <Link>Item 2-3</Link>
+        </NavList>
+    </NavSidebar>
+);
+
+export default {
+    title: 'Components|NavSidebar',
+    component: NavSidebar,
+    parameters: {
+        notes,
+    },
+};

package/src/components/nav-sidebar/NavSidebar.stories.md

@@ -0,0 +1 @@
+import NavSidebar from 'box-ui-elements/es/components/NavSidebar';

package/src/styles/typography.stories.scss

@@ -0,0 +1,60 @@
+@import './base';
+
+.typography {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-top: 25px;
+
+    .weights {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 20px;
+        color: $black;
+    }
+
+    .weights .preview {
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    .weights .regular {
+        margin-right: 15px;
+    }
+
+    .weights .bold .preview {
+        font-weight: bold;
+        font-family: 'Lato', sans-serif;
+    }
+
+    .font-container,
+    .headings-container {
+        width: 33%;
+    }
+
+    .heading {
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+    }
+
+    label {
+        margin-right: 10px;
+        color: $bdl-watermelon-red;
+    }
+
+    .form-font-container label {
+        display: inline-block;
+        width: 80px;
+        line-height: 30px;
+    }
+
+    .form-font-container .body,
+    .form-font-container .input-text {
+        font-size: 14px;
+    }
+
+    .form-font-container .input-label {
+        font-size: 13px;
+    }
+}

package/src/styles/typography.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import './typography.stories.scss';
+
+export const lato = () => (
+    <div className="typography">
+        <div className="heading">
+            <h1>Lato 2.0</h1>
+        </div>
+        <div className="weights">
+            <div className="regular">
+                <div className="preview">Aa</div>
+                <div className="weight">Regular</div>
+            </div>
+            <div className="bold">
+                <div className="preview">Aa</div>
+                <div className="weight">Bold</div>
+            </div>
+        </div>
+    </div>
+);
+
+export const heading = () => (
+    <div className="typography">
+        <div className="heading">
+            <label>H1</label>
+            <h1>Project Symphony</h1>
+        </div>
+        <div className="heading">
+            <label>H2</label>
+            <h2>Project Symphony</h2>
+        </div>
+        <div className="heading">
+            <label>H3</label>
+            <h3>Project Symphony</h3>
+        </div>
+        <div className="heading">
+            <label>H4</label>
+            <h4>Project Symphony</h4>
+        </div>
+        <div className="heading">
+            <label>H5</label>
+            <h5>Project Symphony</h5>
+        </div>
+        <div className="heading">
+            <label>H6</label>
+            <h6>Project Symphony</h6>
+        </div>
+    </div>
+);
+
+export const text = () => (
+    <div className="typography">
+        <div>
+            <label>BODY</label>
+            <span className="body">Project Symphony</span>
+        </div>
+        <div>
+            <label>INPUT LABEL</label>
+            <span className="input-label">Project Symphony</span>
+        </div>
+        <div>
+            <label>INPUT TEXT</label>
+            <span className="input-text">Project Symphony</span>
+        </div>
+    </div>
+);
+
+export default {
+    title: 'Theming|Typography',
+};

package/src/components/inline-error/README.md

@@ -1,10 +0,0 @@
-### Examples
-
-An alias for `<InlineNotice type="error">`
-
-**Basic**
-```
-    <InlineError title='Something bad happened'>
-        Username is required
-    </InlineError>
-```

package/src/components/inline-notice/README.md

@@ -1,57 +0,0 @@
-### Description
-
-Static div displaying a message to the user.
-
-### Examples
-
-**Without `title` pop**
-
-```
-<div style={ { width: '50%' } }>
-    <InlineNotice type="warning">
-        This is a <strong>warning</strong> notice. You might want to pay attention to this.
-    </InlineNotice>
-
-    <InlineNotice type="error">
-        This is an <strong>error</strong> notice. You really want to pay attention to this.
-    </InlineNotice>
-
-    <InlineNotice type="success">
-        This is a <strong>success</strong> notice. You ought to feel really good about this.
-    </InlineNotice>
-
-    <InlineNotice type="info">
-        This is an <strong>info</strong> notice. You should get some context from this.
-    </InlineNotice>
-
-    <InlineNotice type="generic">
-        This is an <strong>generic</strong> notice. You'll just want to see this.
-    </InlineNotice>
-</div>
-```
-
-**With `title` prop**
-
-```
-<div style={ { width: '50%' } }>
-    <InlineNotice type="warning" title="Warning Title">
-        This is a warning notice. You might want to pay attention to this.
-    </InlineNotice>
-    
-    <InlineNotice type="error" title="Error Title">
-        This is an error notice. You really want to pay attention to this.
-    </InlineNotice>
-
-     <InlineNotice type="success" title="Success Title">
-        This is a success notice. You ought to feel really good about this.
-    </InlineNotice>
-
-    <InlineNotice type="info" title="Info Title">
-        This is an info notice. You should get some context from this.
-    </InlineNotice>
-
-    <InlineNotice type="generic" title="Generic Title">
-        This is a generic notice. You'll just want to notice this.
-    </InlineNotice>
-</div>
-```

package/src/components/nav-sidebar/README.md

@@ -1,57 +0,0 @@
-### Examples
-
-#### Using `NavList`
-```
-const NavList = require('./NavList').default;
-
-<NavSidebar data-resin-component="leftnav">
-    <NavList>
-        <Link>Item 1-1</Link>
-        <Link>Item 1-2</Link>
-    </NavList>
-    <NavList heading="Item 2">
-        <Link>Item 2-1</Link>
-        <Link>Item 2-2</Link>
-        <Link>Item 2-3</Link>
-    </NavList>
-</NavSidebar>
-
-```
-
-#### Using `NavListCollapsible`
-```
-const NavList = require('./NavList').default;
-const NavListCollapseHeader = require('./NavListCollapseHeader').default;
-
-const handleOnToggle = (ev) => {
-    setState((prevState) => {
-        prevState.collapsed = !prevState.collapsed;
-        return prevState;
-    });
-};
-
-initialState = {
-    collapsed: true
-};
-
-<NavSidebar data-resin-component="leftnav">
-    <NavList
-        heading={
-            <NavListCollapseHeader onToggleCollapse={ handleOnToggle }>
-                Collapse or Expand
-            </NavListCollapseHeader>
-        }
-        className="is-collapsible example-collapsible"
-        collapsed={state.collapsed}
-    >
-        <Link>Item 1-1</Link>
-        <Link>Item 1-2</Link>
-    </NavList>
-    <NavList heading="Item 2">
-        <Link>Item 2-1</Link>
-        <Link>Item 2-2</Link>
-        <Link>Item 2-3</Link>
-    </NavList>
-</NavSidebar>
-
-```