box-ui-elements 16.0.0-beta.8 → 16.0.0

package/es/common/types/feed.js.flow

@@ -1,14 +1,30 @@
 // @flow strict
 import type { MessageDescriptor } from 'react-intl';
+import {
+    COMMENT_STATUS_OPEN,
+    COMMENT_STATUS_RESOLVED,
+    FEED_ITEM_TYPE_ANNOTATION,
+    FEED_ITEM_TYPE_APP_ACTIVITY,
+    FEED_ITEM_TYPE_COMMENT,
+    FEED_ITEM_TYPE_TASK,
+} from '../../constants';
 import type { BoxItemPermission, BoxItemVersion, Reply, User } from './core';
 import type { Annotation, AnnotationPermission, Annotations } from './annotations';
 
 // Feed item types that can receive deeplinks inline in the feed
-type FocusableFeedItemType = 'task' | 'comment' | 'annotation';
+type FocusableFeedItemType =
+    | typeof FEED_ITEM_TYPE_TASK
+    | typeof FEED_ITEM_TYPE_COMMENT
+    | typeof FEED_ITEM_TYPE_ANNOTATION;
+
+// Feed item types that represent user's written response (that also can have replies)
+type CommentFeedItemType = typeof FEED_ITEM_TYPE_COMMENT | typeof FEED_ITEM_TYPE_ANNOTATION;
 
 type BoxCommentPermission = {
     can_delete?: boolean,
     can_edit?: boolean,
+    can_reply?: boolean,
+    can_resolve?: boolean,
 };
 
 type BoxTaskPermission = {
@@ -22,11 +38,14 @@ type BaseFeedItem = {|
     id: string,
 |};
 
+// Used in Annotation and Comment
+type FeedItemStatus = typeof COMMENT_STATUS_OPEN | typeof COMMENT_STATUS_RESOLVED;
+
 // this is a subset of TaskNew, which imports as `any`
 type Task = {
     ...BaseFeedItem,
     permissions: BoxTaskPermission,
-    type: 'task',
+    type: typeof FEED_ITEM_TYPE_TASK,
 };
 
 type Tasks = {
@@ -36,12 +55,20 @@ type Tasks = {
 
 type Comment = {
     ...BaseFeedItem,
+    isRepliesLoading?: boolean,
     is_reply_comment?: boolean,
     message?: string,
     modified_at: string,
+    parent?: {
+        id: string,
+        type: CommentFeedItemType,
+    },
     permissions: BoxCommentPermission,
+    replies?: Array<Comment>,
+    status?: FeedItemStatus,
     tagged_message: string,
-    type: 'comment',
+    total_reply_count?: number,
+    type: typeof FEED_ITEM_TYPE_COMMENT,
 };
 
 type Comments = {
@@ -49,6 +76,12 @@ type Comments = {
     total_count: number,
 };
 
+type ThreadedComments = {
+    entries: Array<Comment>,
+    limit: number,
+    next_marker: string,
+};
+
 type ActivityTemplateItem = {|
     id: string,
     type: 'activity_template',
@@ -67,7 +100,7 @@ type BaseAppActivityItem = {|
     created_by: User,
     id: string,
     rendered_text: string,
-    type: 'app_activity',
+    type: typeof FEED_ITEM_TYPE_APP_ACTIVITY,
 |};
 
 type AppActivityAPIItem = {|
@@ -117,11 +150,14 @@ export type {
     AppItem,
     BoxCommentPermission,
     Comment,
+    CommentFeedItemType,
     Comments,
     FeedItem,
     FeedItems,
+    FeedItemStatus,
     FocusableFeedItemType,
     Reply,
     Task,
     Tasks,
+    ThreadedComments,
 };

package/es/common/types/feed.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"feed.js"}
+{"version":3,"sources":["../../../src/common/types/feed.js"],"names":["COMMENT_STATUS_OPEN","COMMENT_STATUS_RESOLVED","FEED_ITEM_TYPE_ANNOTATION","FEED_ITEM_TYPE_APP_ACTIVITY","FEED_ITEM_TYPE_COMMENT","FEED_ITEM_TYPE_TASK"],"mappings":"AAEA,SACIA,mBADJ,EAEIC,uBAFJ,EAGIC,yBAHJ,EAIIC,2BAJJ,EAKIC,sBALJ,EAMIC,mBANJ,QAOO,iBAPP","sourcesContent":["// @flow strict\nimport type { MessageDescriptor } from 'react-intl';\nimport {\n    COMMENT_STATUS_OPEN,\n    COMMENT_STATUS_RESOLVED,\n    FEED_ITEM_TYPE_ANNOTATION,\n    FEED_ITEM_TYPE_APP_ACTIVITY,\n    FEED_ITEM_TYPE_COMMENT,\n    FEED_ITEM_TYPE_TASK,\n} from '../../constants';\nimport type { BoxItemPermission, BoxItemVersion, Reply, User } from './core';\nimport type { Annotation, AnnotationPermission, Annotations } from './annotations';\n\n// Feed item types that can receive deeplinks inline in the feed\ntype FocusableFeedItemType =\n    | typeof FEED_ITEM_TYPE_TASK\n    | typeof FEED_ITEM_TYPE_COMMENT\n    | typeof FEED_ITEM_TYPE_ANNOTATION;\n\n// Feed item types that represent user's written response (that also can have replies)\ntype CommentFeedItemType = typeof FEED_ITEM_TYPE_COMMENT | typeof FEED_ITEM_TYPE_ANNOTATION;\n\ntype BoxCommentPermission = {\n    can_delete?: boolean,\n    can_edit?: boolean,\n    can_reply?: boolean,\n    can_resolve?: boolean,\n};\n\ntype BoxTaskPermission = {\n    can_delete?: boolean,\n    can_update?: boolean,\n};\n\ntype BaseFeedItem = {|\n    created_at: string,\n    created_by: User,\n    id: string,\n|};\n\n// Used in Annotation and Comment\ntype FeedItemStatus = typeof COMMENT_STATUS_OPEN | typeof COMMENT_STATUS_RESOLVED;\n\n// this is a subset of TaskNew, which imports as `any`\ntype Task = {\n    ...BaseFeedItem,\n    permissions: BoxTaskPermission,\n    type: typeof FEED_ITEM_TYPE_TASK,\n};\n\ntype Tasks = {\n    entries: Array<Task>,\n    next_marker: ?string,\n};\n\ntype Comment = {\n    ...BaseFeedItem,\n    isRepliesLoading?: boolean,\n    is_reply_comment?: boolean,\n    message?: string,\n    modified_at: string,\n    parent?: {\n        id: string,\n        type: CommentFeedItemType,\n    },\n    permissions: BoxCommentPermission,\n    replies?: Array<Comment>,\n    status?: FeedItemStatus,\n    tagged_message: string,\n    total_reply_count?: number,\n    type: typeof FEED_ITEM_TYPE_COMMENT,\n};\n\ntype Comments = {\n    entries: Array<Comment>,\n    total_count: number,\n};\n\ntype ThreadedComments = {\n    entries: Array<Comment>,\n    limit: number,\n    next_marker: string,\n};\n\ntype ActivityTemplateItem = {|\n    id: string,\n    type: 'activity_template',\n|};\n\ntype AppItem = {|\n    icon_url: string,\n    id: string,\n    name: string,\n    type: 'app',\n|};\n\ntype BaseAppActivityItem = {|\n    activity_template: ActivityTemplateItem,\n    app: AppItem,\n    created_by: User,\n    id: string,\n    rendered_text: string,\n    type: typeof FEED_ITEM_TYPE_APP_ACTIVITY,\n|};\n\ntype AppActivityAPIItem = {|\n    occurred_at: string,\n    ...BaseAppActivityItem,\n|};\n\ntype AppActivityAPIItems = {\n    entries: Array<AppActivityAPIItem>,\n    total_count: number,\n};\n\ntype AppActivityItem = {|\n    created_at: string,\n    permissions: BoxItemPermission,\n    ...BaseAppActivityItem,\n|};\n\ntype AppActivityItems = {\n    entries: Array<AppActivityItem>,\n    total_count: number,\n};\n\ntype FeedItem = Annotation | Comment | Task | BoxItemVersion | AppActivityItem;\n\ntype FeedItems = Array<FeedItem>;\n\ntype ActionItemError = {\n    action?: {\n        onAction: () => void,\n        text: MessageDescriptor,\n    },\n    message: MessageDescriptor,\n    title: MessageDescriptor,\n};\n\nexport type {\n    ActionItemError,\n    ActivityTemplateItem,\n    Annotation,\n    AnnotationPermission,\n    Annotations,\n    AppActivityAPIItem,\n    AppActivityAPIItems,\n    AppActivityItem,\n    AppActivityItems,\n    AppItem,\n    BoxCommentPermission,\n    Comment,\n    CommentFeedItemType,\n    Comments,\n    FeedItem,\n    FeedItems,\n    FeedItemStatus,\n    FocusableFeedItemType,\n    Reply,\n    Task,\n    Tasks,\n    ThreadedComments,\n};\n"],"file":"feed.js"}

package/es/components/accessible-svg/AccessibleSVG.stories.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from './AccessibleSVG';
+export var IconExample = function IconExample(props) {
+  return React.createElement(AccessibleSVG, _extends({
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32"
+  }, props), React.createElement("path", {
+    fill: vars.bdlGray50,
+    d: "M9 3h9.172a2 2 0 011.414.586l5.83 5.828A2 2 0 0126 10.83V26a3 3 0 01-3 3H9a3 3 0 01-3-3V6a3 3 0 013-3z"
+  }));
+};
+export default {
+  title: 'Components|AccessibleSVG',
+  component: AccessibleSVG
+};
+//# sourceMappingURL=AccessibleSVG.stories.js.map

package/es/components/accessible-svg/AccessibleSVG.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accessible-svg/AccessibleSVG.stories.tsx"],"names":["React","vars","AccessibleSVG","IconExample","props","bdlGray50","title","component"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAO,KAAKC,IAAZ,MAAsB,wBAAtB;AACA,OAAOC,aAAP,MAAwC,iBAAxC;AAEA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD;AAAA,SACvB,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAE,EAAtB;AAA0B,IAAA,MAAM,EAAE,EAAlC;AAAsC,IAAA,OAAO,EAAC;AAA9C,KAA8DA,KAA9D,GACI;AACI,IAAA,IAAI,EAAEH,IAAI,CAACI,SADf;AAEI,IAAA,CAAC,EAAC;AAFN,IADJ,CADuB;AAAA,CAApB;AASP,eAAe;AACXC,EAAAA,KAAK,EAAE,0BADI;AAEXC,EAAAA,SAAS,EAAEL;AAFA,CAAf","sourcesContent":["import * as React from 'react';\n\nimport * as vars from '../../styles/variables';\nimport AccessibleSVG, { SVGProps } from './AccessibleSVG';\n\nexport const IconExample = (props: SVGProps) => (\n    <AccessibleSVG width={32} height={32} viewBox=\"0 0 32 32\" {...props}>\n        <path\n            fill={vars.bdlGray50}\n            d=\"M9 3h9.172a2 2 0 011.414.586l5.83 5.828A2 2 0 0126 10.83V26a3 3 0 01-3 3H9a3 3 0 01-3-3V6a3 3 0 013-3z\"\n        />\n    </AccessibleSVG>\n);\n\nexport default {\n    title: 'Components|AccessibleSVG',\n    component: AccessibleSVG,\n};\n"],"file":"AccessibleSVG.stories.js"}

package/es/components/badge/Badge.stories.js

@@ -1,8 +1,5 @@
 import * as React from 'react';
 import Badge from './Badge';
-import BetaBadge from './BetaBadge';
-import TrialBadge from './TrialBadge';
-import UpgradeBadge from './UpgradeBadge';
 import notes from './Badge.stories.md';
 import { BadgeType } from './types';
 export var regular = function regular() {
@@ -38,17 +35,8 @@ export var success = function success() {
     type: BadgeType.SUCCESS
   }, "Success Badge");
 };
-export var betaBadge = function betaBadge() {
-  return React.createElement(BetaBadge, null);
-};
-export var trialBadge = function trialBadge() {
-  return React.createElement(TrialBadge, null);
-};
-export var upgradeBadge = function upgradeBadge() {
-  return React.createElement(UpgradeBadge, null);
-};
 export default {
-  title: 'Components|Badge',
+  title: 'Components|Badges/Badge',
   component: Badge,
   parameters: {
     notes: notes

package/es/components/badge/Badge.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/Badge.stories.tsx"],"names":["React","Badge","BetaBadge","TrialBadge","UpgradeBadge","notes","BadgeType","regular","info","INFO","warning","WARNING","highlight","HIGHLIGHT","error","ERROR","alert","ALERT","success","SUCCESS","betaBadge","trialBadge","upgradeBadge","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;AACA,SAASC,SAAT,QAA0B,SAA1B;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,KAAD,wBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEF,SAAS,CAACG;AAAvB,kBAAN;AAAA,CAAb;AAEP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEJ,SAAS,CAACK;AAAvB,qBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEN,SAAS,CAACO;AAAvB,uBAAN;AAAA,CAAlB;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAER,SAAS,CAACS;AAAvB,mBAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEV,SAAS,CAACW;AAAvB,mBAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEZ,SAAS,CAACa;AAAvB,qBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAM,oBAAC,SAAD,OAAN;AAAA,CAAlB;AAEP,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAM,oBAAC,UAAD,OAAN;AAAA,CAAnB;AAEP,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,SAAM,oBAAC,YAAD,OAAN;AAAA,CAArB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,kBADI;AAEXC,EAAAA,SAAS,EAAEvB,KAFA;AAGXwB,EAAAA,UAAU,EAAE;AACRpB,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport Badge from './Badge';\nimport BetaBadge from './BetaBadge';\nimport TrialBadge from './TrialBadge';\nimport UpgradeBadge from './UpgradeBadge';\nimport notes from './Badge.stories.md';\nimport { BadgeType } from './types';\n\nexport const regular = () => <Badge>Default Badge</Badge>;\n\nexport const info = () => <Badge type={BadgeType.INFO}>Info Badge</Badge>;\n\nexport const warning = () => <Badge type={BadgeType.WARNING}>Warning Badge</Badge>;\n\nexport const highlight = () => <Badge type={BadgeType.HIGHLIGHT}>Highlight Badge</Badge>;\n\nexport const error = () => <Badge type={BadgeType.ERROR}>Error Badge</Badge>;\n\nexport const alert = () => <Badge type={BadgeType.ALERT}>Alert Badge</Badge>;\n\nexport const success = () => <Badge type={BadgeType.SUCCESS}>Success Badge</Badge>;\n\nexport const betaBadge = () => <BetaBadge />;\n\nexport const trialBadge = () => <TrialBadge />;\n\nexport const upgradeBadge = () => <UpgradeBadge />;\n\nexport default {\n    title: 'Components|Badge',\n    component: Badge,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Badge.stories.js"}
+{"version":3,"sources":["../../../src/components/badge/Badge.stories.tsx"],"names":["React","Badge","notes","BadgeType","regular","info","INFO","warning","WARNING","highlight","HIGHLIGHT","error","ERROR","alert","ALERT","success","SUCCESS","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;AACA,SAASC,SAAT,QAA0B,SAA1B;AAEA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,KAAD,wBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAO;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEF,SAAS,CAACG;AAAvB,kBAAN;AAAA,CAAb;AAEP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEJ,SAAS,CAACK;AAAvB,qBAAN;AAAA,CAAhB;AAEP,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEN,SAAS,CAACO;AAAvB,uBAAN;AAAA,CAAlB;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAER,SAAS,CAACS;AAAvB,mBAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,KAAK,GAAG,SAARA,KAAQ;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEV,SAAS,CAACW;AAAvB,mBAAN;AAAA,CAAd;AAEP,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAM,oBAAC,KAAD;AAAO,IAAA,IAAI,EAAEZ,SAAS,CAACa;AAAvB,qBAAN;AAAA,CAAhB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,yBADI;AAEXC,EAAAA,SAAS,EAAEjB,KAFA;AAGXkB,EAAAA,UAAU,EAAE;AACRjB,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport Badge from './Badge';\nimport notes from './Badge.stories.md';\nimport { BadgeType } from './types';\n\nexport const regular = () => <Badge>Default Badge</Badge>;\n\nexport const info = () => <Badge type={BadgeType.INFO}>Info Badge</Badge>;\n\nexport const warning = () => <Badge type={BadgeType.WARNING}>Warning Badge</Badge>;\n\nexport const highlight = () => <Badge type={BadgeType.HIGHLIGHT}>Highlight Badge</Badge>;\n\nexport const error = () => <Badge type={BadgeType.ERROR}>Error Badge</Badge>;\n\nexport const alert = () => <Badge type={BadgeType.ALERT}>Alert Badge</Badge>;\n\nexport const success = () => <Badge type={BadgeType.SUCCESS}>Success Badge</Badge>;\n\nexport default {\n    title: 'Components|Badges/Badge',\n    component: Badge,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"Badge.stories.js"}

package/es/components/badge/BetaBadge.stories.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import BetaBadge from './BetaBadge';
+export var betaBadge = function betaBadge() {
+  return React.createElement(BetaBadge, null);
+};
+export default {
+  title: 'Components|Badges/BetaBadge',
+  component: BetaBadge
+};
+//# sourceMappingURL=BetaBadge.stories.js.map

package/es/components/badge/BetaBadge.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/BetaBadge.stories.tsx"],"names":["React","BetaBadge","betaBadge","title","component"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAM,oBAAC,SAAD,OAAN;AAAA,CAAlB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,6BADI;AAEXC,EAAAA,SAAS,EAAEH;AAFA,CAAf","sourcesContent":["import * as React from 'react';\nimport BetaBadge from './BetaBadge';\n\nexport const betaBadge = () => <BetaBadge />;\n\nexport default {\n    title: 'Components|Badges/BetaBadge',\n    component: BetaBadge,\n};\n"],"file":"BetaBadge.stories.js"}

package/es/components/badge/TrialBadge.stories.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import TrialBadge from './TrialBadge';
+export var trialBadge = function trialBadge() {
+  return React.createElement(TrialBadge, null);
+};
+export default {
+  title: 'Components|Badges/TrialBadge',
+  component: TrialBadge
+};
+//# sourceMappingURL=TrialBadge.stories.js.map

package/es/components/badge/TrialBadge.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/TrialBadge.stories.tsx"],"names":["React","TrialBadge","trialBadge","title","component"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAM,oBAAC,UAAD,OAAN;AAAA,CAAnB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,8BADI;AAEXC,EAAAA,SAAS,EAAEH;AAFA,CAAf","sourcesContent":["import * as React from 'react';\nimport TrialBadge from './TrialBadge';\n\nexport const trialBadge = () => <TrialBadge />;\n\nexport default {\n    title: 'Components|Badges/TrialBadge',\n    component: TrialBadge,\n};\n"],"file":"TrialBadge.stories.js"}

package/es/components/badge/UpgradeBadge.stories.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import UpgradeBadge from './UpgradeBadge';
+export var upgradeBadge = function upgradeBadge() {
+  return React.createElement(UpgradeBadge, null);
+};
+export default {
+  title: 'Components|Badges/UpgradeBadge',
+  component: UpgradeBadge
+};
+//# sourceMappingURL=UpgradeBadge.stories.js.map

package/es/components/badge/UpgradeBadge.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/UpgradeBadge.stories.tsx"],"names":["React","UpgradeBadge","upgradeBadge","title","component"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,SAAM,oBAAC,YAAD,OAAN;AAAA,CAArB;AAEP,eAAe;AACXC,EAAAA,KAAK,EAAE,gCADI;AAEXC,EAAAA,SAAS,EAAEH;AAFA,CAAf","sourcesContent":["import * as React from 'react';\nimport UpgradeBadge from './UpgradeBadge';\n\nexport const upgradeBadge = () => <UpgradeBadge />;\n\nexport default {\n    title: 'Components|Badges/UpgradeBadge',\n    component: UpgradeBadge,\n};\n"],"file":"UpgradeBadge.stories.js"}

package/es/components/breadcrumb/Breadcrumb.js

@@ -8,53 +8,66 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
+import classNames from 'classnames';
 import { MenuLinkItem } from '../menu';
 import EllipsisCrumb from './EllipsisCrumb';
 import Crumb from './Crumb';
 import messages from './messages';
 import './Breadcrumb.scss';
 
-var constructChildren = function constructChildren(children, threshold) {
-  var dotDotDotItems = children.slice(1, children.length + 1 - threshold);
-  var menuCrumbsItems = React.createElement(EllipsisCrumb, null, dotDotDotItems.reverse().map(function (crumb, index) {
-    return React.createElement(MenuLinkItem, {
-      key: index
-    }, crumb);
-  }));
-  return [].concat(_toConsumableArray(children.slice(0, 1)), [menuCrumbsItems], _toConsumableArray(children.slice(1 - threshold)));
-};
-
-var renderBreadcrumbs = function renderBreadcrumbs(children, threshold) {
-  var newChildren = children;
-  var length = children.length;
-  var hasEllipsis = false;
-
-  if (length > threshold) {
-    newChildren = constructChildren(children, threshold);
-    length = newChildren.length;
-    hasEllipsis = true;
-  }
-
-  return React.Children.map(newChildren, function (item, i) {
-    var isLastCrumb = length === 0 || i === length - 1;
-    return React.createElement(Crumb, {
-      className: hasEllipsis && i === 1 ? 'no-shrink' : undefined,
-      isLastCrumb: isLastCrumb
-    }, item);
-  });
-};
-
 var Breadcrumb = function Breadcrumb(_ref) {
-  var _ref$className = _ref.className,
+  var children = _ref.children,
+      _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$hasReverseOverfl = _ref.hasReverseOverflowOrder,
+      hasReverseOverflowOrder = _ref$hasReverseOverfl === void 0 ? false : _ref$hasReverseOverfl,
       intl = _ref.intl,
+      _ref$numItemsBeforeOv = _ref.numItemsBeforeOverflow,
+      numItemsBeforeOverflow = _ref$numItemsBeforeOv === void 0 ? 1 : _ref$numItemsBeforeOv,
+      overflowMenuButton = _ref.overflowMenuButton,
       _ref$threshold = _ref.threshold,
-      threshold = _ref$threshold === void 0 ? 4 : _ref$threshold,
-      children = _ref.children;
+      threshold = _ref$threshold === void 0 ? 4 : _ref$threshold;
+  var breadcrumbs = React.Children.toArray(children);
+
+  var constructChildren = function constructChildren() {
+    var overflowItems = breadcrumbs.slice(numItemsBeforeOverflow, breadcrumbs.length + 1 - threshold);
+    var dotDotDotItems = hasReverseOverflowOrder ? overflowItems : overflowItems.reverse();
+    var menuCrumbsItems = React.createElement(EllipsisCrumb, {
+      menuButton: overflowMenuButton
+    }, dotDotDotItems.map(function (crumb, index) {
+      return React.createElement(MenuLinkItem, {
+        key: index
+      }, crumb);
+    }));
+    return [].concat(_toConsumableArray(breadcrumbs.slice(0, numItemsBeforeOverflow)), [menuCrumbsItems], _toConsumableArray(breadcrumbs.slice(1 - threshold)));
+  };
+
+  var renderBreadcrumbs = function renderBreadcrumbs() {
+    var newChildren = breadcrumbs;
+    var length = breadcrumbs.length;
+    var hasEllipsis = false;
+
+    if (length > threshold) {
+      newChildren = constructChildren();
+      length = newChildren.length;
+      hasEllipsis = true;
+    }
+
+    return React.Children.map(newChildren, function (item, i) {
+      var isLastCrumb = length === 0 || i === length - 1;
+      return React.createElement(Crumb, {
+        className: classNames({
+          'no-shrink': hasEllipsis && i === numItemsBeforeOverflow
+        }),
+        isLastCrumb: isLastCrumb
+      }, item);
+    });
+  };
+
   return React.createElement("nav", {
     "aria-label": intl.formatMessage(messages.breadcrumbLabel),
-    className: "breadcrumbs ".concat(className)
-  }, React.createElement("ol", null, renderBreadcrumbs(React.Children.toArray(children), threshold)));
+    className: classNames('breadcrumbs', className)
+  }, React.createElement("ol", null, renderBreadcrumbs()));
 };
 
 export { Breadcrumb as BreadcrumbCore };

package/es/components/breadcrumb/Breadcrumb.js.flow

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
+import classNames from 'classnames';
 
 import { MenuLinkItem } from '../menu';
 import EllipsisCrumb from './EllipsisCrumb';
@@ -10,53 +11,78 @@ import messages from './messages';
 
 import './Breadcrumb.scss';
 
-const constructChildren = (children, threshold) => {
-    const dotDotDotItems = children.slice(1, children.length + 1 - threshold);
-    const menuCrumbsItems = (
-        <EllipsisCrumb>
-            {dotDotDotItems.reverse().map((crumb, index) => (
-                <MenuLinkItem key={index}>{crumb}</MenuLinkItem>
-            ))}
-        </EllipsisCrumb>
-    );
-    return [...children.slice(0, 1), menuCrumbsItems, ...children.slice(1 - threshold)];
-};
-
-const renderBreadcrumbs = (children, threshold) => {
-    let newChildren = children;
-    let { length } = children;
-    let hasEllipsis = false;
-
-    if (length > threshold) {
-        newChildren = constructChildren(children, threshold);
-        length = newChildren.length;
-        hasEllipsis = true;
-    }
-
-    return React.Children.map(newChildren, (item, i) => {
-        const isLastCrumb = length === 0 || i === length - 1;
-        return (
-            <Crumb className={hasEllipsis && i === 1 ? 'no-shrink' : undefined} isLastCrumb={isLastCrumb}>
-                {item}
-            </Crumb>
-        );
-    });
-};
-
-type Props = {
-    /** Class name for Breadcrumb */
-    children: React.Node,
+export type BreadcrumbProps = {
     /** Breadcrumb contents */
+    children: React.Node,
+    /** Class name for Breadcrumb */
     className?: string,
+    /** Reverse default overflow breadcrumb ordering to highest to lowest depth */
+    hasReverseOverflowOrder?: boolean,
+    /** Show number of breadcrumb items before overflow. Default is 1 */
+    numItemsBeforeOverflow?: number,
+    /** Element to override default overflow menu button */
+    overflowMenuButton?: React.Node,
     /** Number of crumbs to show before they collapse into an ellipsis */
     threshold?: number,
-} & InjectIntlProvidedProps;
+};
 
-const Breadcrumb = ({ className = '', intl, threshold = 4, children }: Props) => (
-    <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={`breadcrumbs ${className}`}>
-        <ol>{renderBreadcrumbs(React.Children.toArray(children), threshold)}</ol>
-    </nav>
-);
+type Props = BreadcrumbProps & InjectIntlProvidedProps;
+
+const Breadcrumb = ({
+    children,
+    className = '',
+    hasReverseOverflowOrder = false,
+    intl,
+    numItemsBeforeOverflow = 1,
+    overflowMenuButton,
+    threshold = 4,
+}: Props) => {
+    const breadcrumbs = React.Children.toArray(children);
+
+    const constructChildren = () => {
+        const overflowItems = breadcrumbs.slice(numItemsBeforeOverflow, breadcrumbs.length + 1 - threshold);
+        const dotDotDotItems = hasReverseOverflowOrder ? overflowItems : overflowItems.reverse();
+
+        const menuCrumbsItems = (
+            <EllipsisCrumb menuButton={overflowMenuButton}>
+                {dotDotDotItems.map((crumb, index) => (
+                    <MenuLinkItem key={index}>{crumb}</MenuLinkItem>
+                ))}
+            </EllipsisCrumb>
+        );
+        return [...breadcrumbs.slice(0, numItemsBeforeOverflow), menuCrumbsItems, ...breadcrumbs.slice(1 - threshold)];
+    };
+
+    const renderBreadcrumbs = () => {
+        let newChildren = breadcrumbs;
+        let { length } = breadcrumbs;
+        let hasEllipsis = false;
+
+        if (length > threshold) {
+            newChildren = constructChildren();
+            length = newChildren.length;
+            hasEllipsis = true;
+        }
+
+        return React.Children.map(newChildren, (item, i) => {
+            const isLastCrumb = length === 0 || i === length - 1;
+            return (
+                <Crumb
+                    className={classNames({ 'no-shrink': hasEllipsis && i === numItemsBeforeOverflow })}
+                    isLastCrumb={isLastCrumb}
+                >
+                    {item}
+                </Crumb>
+            );
+        });
+    };
+
+    return (
+        <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={classNames('breadcrumbs', className)}>
+            <ol>{renderBreadcrumbs()}</ol>
+        </nav>
+    );
+};
 
 export { Breadcrumb as BreadcrumbCore };
 export default injectIntl(Breadcrumb);

package/es/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/breadcrumb/Breadcrumb.js"],"names":["React","injectIntl","MenuLinkItem","EllipsisCrumb","Crumb","messages","constructChildren","children","threshold","dotDotDotItems","slice","length","menuCrumbsItems","reverse","map","crumb","index","renderBreadcrumbs","newChildren","hasEllipsis","Children","item","i","isLastCrumb","undefined","Breadcrumb","className","intl","formatMessage","breadcrumbLabel","toArray","BreadcrumbCore"],"mappings":";;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,QAA2B,YAA3B;AAGA,SAASC,YAAT,QAA6B,SAA7B;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,mBAAP;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,QAAD,EAAWC,SAAX,EAAyB;AAC/C,MAAMC,cAAc,GAAGF,QAAQ,CAACG,KAAT,CAAe,CAAf,EAAkBH,QAAQ,CAACI,MAAT,GAAkB,CAAlB,GAAsBH,SAAxC,CAAvB;AACA,MAAMI,eAAe,GACjB,oBAAC,aAAD,QACKH,cAAc,CAACI,OAAf,GAAyBC,GAAzB,CAA6B,UAACC,KAAD,EAAQC,KAAR;AAAA,WAC1B,oBAAC,YAAD;AAAc,MAAA,GAAG,EAAEA;AAAnB,OAA2BD,KAA3B,CAD0B;AAAA,GAA7B,CADL,CADJ;AAOA,sCAAWR,QAAQ,CAACG,KAAT,CAAe,CAAf,EAAkB,CAAlB,CAAX,IAAiCE,eAAjC,sBAAqDL,QAAQ,CAACG,KAAT,CAAe,IAAIF,SAAnB,CAArD;AACH,CAVD;;AAYA,IAAMS,iBAAiB,GAAG,SAApBA,iBAAoB,CAACV,QAAD,EAAWC,SAAX,EAAyB;AAC/C,MAAIU,WAAW,GAAGX,QAAlB;AAD+C,MAEzCI,MAFyC,GAE9BJ,QAF8B,CAEzCI,MAFyC;AAG/C,MAAIQ,WAAW,GAAG,KAAlB;;AAEA,MAAIR,MAAM,GAAGH,SAAb,EAAwB;AACpBU,IAAAA,WAAW,GAAGZ,iBAAiB,CAACC,QAAD,EAAWC,SAAX,CAA/B;AACAG,IAAAA,MAAM,GAAGO,WAAW,CAACP,MAArB;AACAQ,IAAAA,WAAW,GAAG,IAAd;AACH;;AAED,SAAOnB,KAAK,CAACoB,QAAN,CAAeN,GAAf,CAAmBI,WAAnB,EAAgC,UAACG,IAAD,EAAOC,CAAP,EAAa;AAChD,QAAMC,WAAW,GAAGZ,MAAM,KAAK,CAAX,IAAgBW,CAAC,KAAKX,MAAM,GAAG,CAAnD;AACA,WACI,oBAAC,KAAD;AAAO,MAAA,SAAS,EAAEQ,WAAW,IAAIG,CAAC,KAAK,CAArB,GAAyB,WAAzB,GAAuCE,SAAzD;AAAoE,MAAA,WAAW,EAAED;AAAjF,OACKF,IADL,CADJ;AAKH,GAPM,CAAP;AAQH,CAnBD;;AA8BA,IAAMI,UAAU,GAAG,SAAbA,UAAa;AAAA,4BAAGC,SAAH;AAAA,MAAGA,SAAH,+BAAe,EAAf;AAAA,MAAmBC,IAAnB,QAAmBA,IAAnB;AAAA,4BAAyBnB,SAAzB;AAAA,MAAyBA,SAAzB,+BAAqC,CAArC;AAAA,MAAwCD,QAAxC,QAAwCA,QAAxC;AAAA,SACf;AAAK,kBAAYoB,IAAI,CAACC,aAAL,CAAmBvB,QAAQ,CAACwB,eAA5B,CAAjB;AAA+D,IAAA,SAAS,wBAAiBH,SAAjB;AAAxE,KACI,gCAAKT,iBAAiB,CAACjB,KAAK,CAACoB,QAAN,CAAeU,OAAf,CAAuBvB,QAAvB,CAAD,EAAmCC,SAAnC,CAAtB,CADJ,CADe;AAAA,CAAnB;;AAMA,SAASiB,UAAU,IAAIM,cAAvB;AACA,eAAe9B,UAAU,CAACwB,UAAD,CAAzB","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\n\nimport { MenuLinkItem } from '../menu';\nimport EllipsisCrumb from './EllipsisCrumb';\nimport Crumb from './Crumb';\nimport messages from './messages';\n\nimport './Breadcrumb.scss';\n\nconst constructChildren = (children, threshold) => {\n    const dotDotDotItems = children.slice(1, children.length + 1 - threshold);\n    const menuCrumbsItems = (\n        <EllipsisCrumb>\n            {dotDotDotItems.reverse().map((crumb, index) => (\n                <MenuLinkItem key={index}>{crumb}</MenuLinkItem>\n            ))}\n        </EllipsisCrumb>\n    );\n    return [...children.slice(0, 1), menuCrumbsItems, ...children.slice(1 - threshold)];\n};\n\nconst renderBreadcrumbs = (children, threshold) => {\n    let newChildren = children;\n    let { length } = children;\n    let hasEllipsis = false;\n\n    if (length > threshold) {\n        newChildren = constructChildren(children, threshold);\n        length = newChildren.length;\n        hasEllipsis = true;\n    }\n\n    return React.Children.map(newChildren, (item, i) => {\n        const isLastCrumb = length === 0 || i === length - 1;\n        return (\n            <Crumb className={hasEllipsis && i === 1 ? 'no-shrink' : undefined} isLastCrumb={isLastCrumb}>\n                {item}\n            </Crumb>\n        );\n    });\n};\n\ntype Props = {\n    /** Class name for Breadcrumb */\n    children: React.Node,\n    /** Breadcrumb contents */\n    className?: string,\n    /** Number of crumbs to show before they collapse into an ellipsis */\n    threshold?: number,\n} & InjectIntlProvidedProps;\n\nconst Breadcrumb = ({ className = '', intl, threshold = 4, children }: Props) => (\n    <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={`breadcrumbs ${className}`}>\n        <ol>{renderBreadcrumbs(React.Children.toArray(children), threshold)}</ol>\n    </nav>\n);\n\nexport { Breadcrumb as BreadcrumbCore };\nexport default injectIntl(Breadcrumb);\n"],"file":"Breadcrumb.js"}
+{"version":3,"sources":["../../../src/components/breadcrumb/Breadcrumb.js"],"names":["React","injectIntl","classNames","MenuLinkItem","EllipsisCrumb","Crumb","messages","Breadcrumb","children","className","hasReverseOverflowOrder","intl","numItemsBeforeOverflow","overflowMenuButton","threshold","breadcrumbs","Children","toArray","constructChildren","overflowItems","slice","length","dotDotDotItems","reverse","menuCrumbsItems","map","crumb","index","renderBreadcrumbs","newChildren","hasEllipsis","item","i","isLastCrumb","formatMessage","breadcrumbLabel","BreadcrumbCore"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\n\nimport { MenuLinkItem } from '../menu';\nimport EllipsisCrumb from './EllipsisCrumb';\nimport Crumb from './Crumb';\nimport messages from './messages';\n\nimport './Breadcrumb.scss';\n\nexport type BreadcrumbProps = {\n    /** Breadcrumb contents */\n    children: React.Node,\n    /** Class name for Breadcrumb */\n    className?: string,\n    /** Reverse default overflow breadcrumb ordering to highest to lowest depth */\n    hasReverseOverflowOrder?: boolean,\n    /** Show number of breadcrumb items before overflow. Default is 1 */\n    numItemsBeforeOverflow?: number,\n    /** Element to override default overflow menu button */\n    overflowMenuButton?: React.Node,\n    /** Number of crumbs to show before they collapse into an ellipsis */\n    threshold?: number,\n};\n\ntype Props = BreadcrumbProps & InjectIntlProvidedProps;\n\nconst Breadcrumb = ({\n    children,\n    className = '',\n    hasReverseOverflowOrder = false,\n    intl,\n    numItemsBeforeOverflow = 1,\n    overflowMenuButton,\n    threshold = 4,\n}: Props) => {\n    const breadcrumbs = React.Children.toArray(children);\n\n    const constructChildren = () => {\n        const overflowItems = breadcrumbs.slice(numItemsBeforeOverflow, breadcrumbs.length + 1 - threshold);\n        const dotDotDotItems = hasReverseOverflowOrder ? overflowItems : overflowItems.reverse();\n\n        const menuCrumbsItems = (\n            <EllipsisCrumb menuButton={overflowMenuButton}>\n                {dotDotDotItems.map((crumb, index) => (\n                    <MenuLinkItem key={index}>{crumb}</MenuLinkItem>\n                ))}\n            </EllipsisCrumb>\n        );\n        return [...breadcrumbs.slice(0, numItemsBeforeOverflow), menuCrumbsItems, ...breadcrumbs.slice(1 - threshold)];\n    };\n\n    const renderBreadcrumbs = () => {\n        let newChildren = breadcrumbs;\n        let { length } = breadcrumbs;\n        let hasEllipsis = false;\n\n        if (length > threshold) {\n            newChildren = constructChildren();\n            length = newChildren.length;\n            hasEllipsis = true;\n        }\n\n        return React.Children.map(newChildren, (item, i) => {\n            const isLastCrumb = length === 0 || i === length - 1;\n            return (\n                <Crumb\n                    className={classNames({ 'no-shrink': hasEllipsis && i === numItemsBeforeOverflow })}\n                    isLastCrumb={isLastCrumb}\n                >\n                    {item}\n                </Crumb>\n            );\n        });\n    };\n\n    return (\n        <nav aria-label={intl.formatMessage(messages.breadcrumbLabel)} className={classNames('breadcrumbs', className)}>\n            <ol>{renderBreadcrumbs()}</ol>\n        </nav>\n    );\n};\n\nexport { Breadcrumb as BreadcrumbCore };\nexport default injectIntl(Breadcrumb);\n"],"file":"Breadcrumb.js"}

package/es/components/breadcrumb/EllipsisCrumb.js

@@ -4,10 +4,12 @@ import { Menu } from '../menu';
 import PlainButton from '../plain-button';
 
 var EllipsisCrumb = function EllipsisCrumb(_ref) {
-  var children = _ref.children;
-  return React.createElement(DropdownMenu, null, React.createElement(PlainButton, {
+  var children = _ref.children,
+      menuButton = _ref.menuButton;
+  var defaultMenuButton = React.createElement(PlainButton, {
     className: "breadcrumb-toggler"
-  }, "\u22EF"), React.createElement(Menu, null, children));
+  }, "\u22EF");
+  return React.createElement(DropdownMenu, null, menuButton || defaultMenuButton, React.createElement(Menu, null, children));
 };
 
 export default EllipsisCrumb;

package/es/components/breadcrumb/EllipsisCrumb.js.flow

@@ -7,13 +7,17 @@ import PlainButton from '../plain-button';
 
 type Props = {
     children: React.Node,
+    menuButton?: React.Node,
 };
 
-const EllipsisCrumb = ({ children }: Props) => (
-    <DropdownMenu>
-        <PlainButton className="breadcrumb-toggler">⋯</PlainButton>
-        <Menu>{children}</Menu>
-    </DropdownMenu>
-);
+const EllipsisCrumb = ({ children, menuButton }: Props) => {
+    const defaultMenuButton = <PlainButton className="breadcrumb-toggler">⋯</PlainButton>;
+    return (
+        <DropdownMenu>
+            {menuButton || defaultMenuButton}
+            <Menu>{children}</Menu>
+        </DropdownMenu>
+    );
+};
 
 export default EllipsisCrumb;

package/es/components/breadcrumb/EllipsisCrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/breadcrumb/EllipsisCrumb.js"],"names":["React","DropdownMenu","Menu","PlainButton","EllipsisCrumb","children"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAMA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,SAClB,oBAAC,YAAD,QACI,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,cADJ,EAEI,oBAAC,IAAD,QAAOA,QAAP,CAFJ,CADkB;AAAA,CAAtB;;AAOA,eAAeD,aAAf","sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport DropdownMenu from '../dropdown-menu';\nimport { Menu } from '../menu';\nimport PlainButton from '../plain-button';\n\ntype Props = {\n    children: React.Node,\n};\n\nconst EllipsisCrumb = ({ children }: Props) => (\n    <DropdownMenu>\n        <PlainButton className=\"breadcrumb-toggler\">⋯</PlainButton>\n        <Menu>{children}</Menu>\n    </DropdownMenu>\n);\n\nexport default EllipsisCrumb;\n"],"file":"EllipsisCrumb.js"}
+{"version":3,"sources":["../../../src/components/breadcrumb/EllipsisCrumb.js"],"names":["React","DropdownMenu","Menu","PlainButton","EllipsisCrumb","children","menuButton","defaultMenuButton"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAOA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAAqC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;AAAA,MAAxBC,UAAwB,QAAxBA,UAAwB;AACvD,MAAMC,iBAAiB,GAAG,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,cAA1B;AACA,SACI,oBAAC,YAAD,QACKD,UAAU,IAAIC,iBADnB,EAEI,oBAAC,IAAD,QAAOF,QAAP,CAFJ,CADJ;AAMH,CARD;;AAUA,eAAeD,aAAf","sourcesContent":["// @flow\nimport * as React from 'react';\n\nimport DropdownMenu from '../dropdown-menu';\nimport { Menu } from '../menu';\nimport PlainButton from '../plain-button';\n\ntype Props = {\n    children: React.Node,\n    menuButton?: React.Node,\n};\n\nconst EllipsisCrumb = ({ children, menuButton }: Props) => {\n    const defaultMenuButton = <PlainButton className=\"breadcrumb-toggler\">⋯</PlainButton>;\n    return (\n        <DropdownMenu>\n            {menuButton || defaultMenuButton}\n            <Menu>{children}</Menu>\n        </DropdownMenu>\n    );\n};\n\nexport default EllipsisCrumb;\n"],"file":"EllipsisCrumb.js"}

package/es/components/count-badge/CountBadge.stories.js

@@ -27,7 +27,7 @@ export var withHTMLSymbol2 = function withHTMLSymbol2() {
   });
 };
 export default {
-  title: 'Components|CountBadge',
+  title: 'Components|Badges/CountBadge',
   component: CountBadge,
   parameters: {
     notes: notes

package/es/components/count-badge/CountBadge.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/count-badge/CountBadge.stories.tsx"],"names":["React","CountBadge","notes","withAnimation","withoutAnimation","withHTMLSymbol1","String","fromCharCode","withHTMLSymbol2","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,aAAa,MAAnC;AAAoC,IAAA,KAAK,EAAC;AAA1C,IAAN;AAAA,CAAtB;AAEP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,KAAK,EAAC;AAA5B,IAAN;AAAA,CAAzB;AAEP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,KAAK,EAAEC,MAAM,CAACC,YAAP,CAAoB,IAApB;AAA7B,IAAN;AAAA,CAAxB;AAEP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,KAAK,EAAEF,MAAM,CAACC,YAAP,CAAoB,GAApB;AAA7B,IAAN;AAAA,CAAxB;AAEP,eAAe;AACXE,EAAAA,KAAK,EAAE,uBADI;AAEXC,EAAAA,SAAS,EAAET,UAFA;AAGXU,EAAAA,UAAU,EAAE;AACRT,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport CountBadge from './CountBadge';\nimport notes from './CountBadge.stories.md';\n\nexport const withAnimation = () => <CountBadge isVisible shouldAnimate value=\"1\" />;\n\nexport const withoutAnimation = () => <CountBadge isVisible value=\"3,000\" />;\n\nexport const withHTMLSymbol1 = () => <CountBadge isVisible value={String.fromCharCode(8226)} />;\n\nexport const withHTMLSymbol2 = () => <CountBadge isVisible value={String.fromCharCode(215)} />;\n\nexport default {\n    title: 'Components|CountBadge',\n    component: CountBadge,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"CountBadge.stories.js"}
+{"version":3,"sources":["../../../src/components/count-badge/CountBadge.stories.tsx"],"names":["React","CountBadge","notes","withAnimation","withoutAnimation","withHTMLSymbol1","String","fromCharCode","withHTMLSymbol2","title","component","parameters"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AAEA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,aAAa,MAAnC;AAAoC,IAAA,KAAK,EAAC;AAA1C,IAAN;AAAA,CAAtB;AAEP,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,KAAK,EAAC;AAA5B,IAAN;AAAA,CAAzB;AAEP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,KAAK,EAAEC,MAAM,CAACC,YAAP,CAAoB,IAApB;AAA7B,IAAN;AAAA,CAAxB;AAEP,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB;AAAA,SAAM,oBAAC,UAAD;AAAY,IAAA,SAAS,MAArB;AAAsB,IAAA,KAAK,EAAEF,MAAM,CAACC,YAAP,CAAoB,GAApB;AAA7B,IAAN;AAAA,CAAxB;AAEP,eAAe;AACXE,EAAAA,KAAK,EAAE,8BADI;AAEXC,EAAAA,SAAS,EAAET,UAFA;AAGXU,EAAAA,UAAU,EAAE;AACRT,IAAAA,KAAK,EAALA;AADQ;AAHD,CAAf","sourcesContent":["import * as React from 'react';\n\nimport CountBadge from './CountBadge';\nimport notes from './CountBadge.stories.md';\n\nexport const withAnimation = () => <CountBadge isVisible shouldAnimate value=\"1\" />;\n\nexport const withoutAnimation = () => <CountBadge isVisible value=\"3,000\" />;\n\nexport const withHTMLSymbol1 = () => <CountBadge isVisible value={String.fromCharCode(8226)} />;\n\nexport const withHTMLSymbol2 = () => <CountBadge isVisible value={String.fromCharCode(215)} />;\n\nexport default {\n    title: 'Components|Badges/CountBadge',\n    component: CountBadge,\n    parameters: {\n        notes,\n    },\n};\n"],"file":"CountBadge.stories.js"}