box-ui-elements 16.1.0-beta.9 → 17.0.0

package/es/features/collaborator-avatars/CollaboratorList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/collaborator-avatars/CollaboratorList.js"],"names":["React","FormattedMessage","ModalActions","Button","PlainButton","Link","CollaborationBadge","commonMessages","CollaboratorListItem","messages","MAX_COLLABORATOR_LIST_SIZE","CollaboratorList","children","trackingProp","item","props","type","id","collaboratorsPageLink","collaborators","onDoneClick","maxCollaboratorListSize","trackingProps","usernameProps","emailProps","manageLinkProps","viewAdditionalProps","doneButtonProps","manageAllBtn","manageAllLinkText","maxListSizeToRender","Math","min","createCollaboratorPageLink","slice","map","collaborator","index","collabID","length","viewAdditionalPeopleText","done","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ModalActions } from '../../components/modal';\nimport Button from '../../components/button';\nimport PlainButton from '../../components/plain-button';\nimport { Link } from '../../components/link';\nimport CollaborationBadge from '../../icons/badges/CollaborationBadge';\nimport type {\n    collaboratorListTrackingType,\n    item as ItemType,\n    collaboratorType,\n} from '../unified-share-modal/flowTypes';\n\nimport commonMessages from '../../common/messages';\n\nimport CollaboratorListItem from './CollaboratorListItem';\nimport messages from './messages';\nimport './CollaboratorList.scss';\n\nconst MAX_COLLABORATOR_LIST_SIZE = 90;\n\ntype Props = {\n    collaborators: Array<collaboratorType>,\n    doneButtonProps?: Object,\n    item: ItemType,\n    maxCollaboratorListSize: number,\n    onDoneClick: Function,\n    trackingProps: collaboratorListTrackingType,\n};\n\nclass CollaboratorList extends React.Component<Props> {\n    static defaultProps = {\n        maxCollaboratorListSize: MAX_COLLABORATOR_LIST_SIZE,\n    };\n\n    createCollaboratorPageLink(children: React.Node, trackingProp: ?Object) {\n        const { item } = this.props;\n        const { type, id } = item;\n        const collaboratorsPageLink = `/${type}/${id}/collaborators/`;\n\n        return (\n            <Link href={collaboratorsPageLink} rel=\"noopener\" target=\"_blank\" {...trackingProp}>\n                {children}\n            </Link>\n        );\n    }\n\n    render() {\n        const { collaborators, onDoneClick, maxCollaboratorListSize, trackingProps } = this.props;\n        const { usernameProps, emailProps, manageLinkProps, viewAdditionalProps, doneButtonProps } = trackingProps;\n        const manageAllBtn = (\n            <PlainButton className=\"manage-all-btn\" type=\"button\">\n                <FormattedMessage {...messages.manageAllLinkText} />\n            </PlainButton>\n        );\n        const maxListSizeToRender = Math.min(maxCollaboratorListSize, MAX_COLLABORATOR_LIST_SIZE);\n\n        return (\n            <div className=\"usm-collaborator-list\">\n                <div className=\"manage-all-btn-container\">\n                    {this.createCollaboratorPageLink(manageAllBtn, manageLinkProps)}\n                </div>\n                <ul className=\"be collaborator-list\">\n                    {collaborators.slice(0, maxListSizeToRender).map((collaborator, index) => {\n                        const { collabID, type } = collaborator;\n                        return (\n                            <CollaboratorListItem\n                                key={`${collabID}-${type}`}\n                                collaborator={collaborator}\n                                index={index}\n                                trackingProps={{\n                                    usernameProps,\n                                    emailProps,\n                                }}\n                            />\n                        );\n                    })}\n                    {collaborators.length > maxListSizeToRender && (\n                        <li className=\"collaborator-list-item more\">\n                            <div>\n                                <CollaborationBadge height={32} width={32} />\n                            </div>\n                            <div>\n                                {this.createCollaboratorPageLink(\n                                    <FormattedMessage {...messages.viewAdditionalPeopleText} />,\n                                    viewAdditionalProps,\n                                )}\n                            </div>\n                        </li>\n                    )}\n                </ul>\n                <ModalActions>\n                    <Button className=\"btn-done\" onClick={onDoneClick} {...doneButtonProps}>\n                        <FormattedMessage {...commonMessages.done} />\n                    </Button>\n                </ModalActions>\n            </div>\n        );\n    }\n}\n\nexport default CollaboratorList;\n"],"file":"CollaboratorList.js"}
+{"version":3,"sources":["../../../src/features/collaborator-avatars/CollaboratorList.js"],"names":["React","FormattedMessage","ModalActions","Button","Link","CollaborationBadge","commonMessages","CollaboratorListItem","messages","MAX_COLLABORATOR_LIST_SIZE","CollaboratorList","children","trackingProp","item","props","type","id","collaboratorsPageLink","collaborators","onDoneClick","maxCollaboratorListSize","trackingProps","usernameProps","emailProps","manageLinkProps","viewAdditionalProps","doneButtonProps","manageAllBtn","manageAllLinkText","maxListSizeToRender","Math","min","createCollaboratorPageLink","slice","map","collaborator","index","collabID","length","viewAdditionalPeopleText","done","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ModalActions } from '../../components/modal';\nimport Button from '../../components/button';\nimport { Link } from '../../components/link';\nimport CollaborationBadge from '../../icons/badges/CollaborationBadge';\nimport type {\n    collaboratorListTrackingType,\n    item as ItemType,\n    collaboratorType,\n} from '../unified-share-modal/flowTypes';\n\nimport commonMessages from '../../common/messages';\n\nimport CollaboratorListItem from './CollaboratorListItem';\nimport messages from './messages';\nimport './CollaboratorList.scss';\n\nconst MAX_COLLABORATOR_LIST_SIZE = 90;\n\ntype Props = {\n    collaborators: Array<collaboratorType>,\n    doneButtonProps?: Object,\n    item: ItemType,\n    maxCollaboratorListSize: number,\n    onDoneClick: Function,\n    trackingProps: collaboratorListTrackingType,\n};\n\nclass CollaboratorList extends React.Component<Props> {\n    static defaultProps = {\n        maxCollaboratorListSize: MAX_COLLABORATOR_LIST_SIZE,\n    };\n\n    createCollaboratorPageLink(children: React.Node, trackingProp: ?Object) {\n        const { item } = this.props;\n        const { type, id } = item;\n        const collaboratorsPageLink = `/${type}/${id}/collaborators/`;\n\n        return (\n            <Link href={collaboratorsPageLink} rel=\"noopener\" target=\"_blank\" {...trackingProp}>\n                {children}\n            </Link>\n        );\n    }\n\n    render() {\n        const { collaborators, onDoneClick, maxCollaboratorListSize, trackingProps } = this.props;\n        const { usernameProps, emailProps, manageLinkProps, viewAdditionalProps, doneButtonProps } = trackingProps;\n        const manageAllBtn = (\n            <span className=\"manage-all-btn\">\n                <FormattedMessage {...messages.manageAllLinkText} />\n            </span>\n        );\n        const maxListSizeToRender = Math.min(maxCollaboratorListSize, MAX_COLLABORATOR_LIST_SIZE);\n\n        return (\n            <div className=\"usm-collaborator-list\">\n                <div className=\"manage-all-btn-container\">\n                    {this.createCollaboratorPageLink(manageAllBtn, manageLinkProps)}\n                </div>\n                <ul className=\"be collaborator-list\">\n                    {collaborators.slice(0, maxListSizeToRender).map((collaborator, index) => {\n                        const { collabID, type } = collaborator;\n                        return (\n                            <CollaboratorListItem\n                                key={`${collabID}-${type}`}\n                                collaborator={collaborator}\n                                index={index}\n                                trackingProps={{\n                                    usernameProps,\n                                    emailProps,\n                                }}\n                            />\n                        );\n                    })}\n                    {collaborators.length > maxListSizeToRender && (\n                        <li className=\"collaborator-list-item more\">\n                            <div>\n                                <CollaborationBadge height={32} width={32} />\n                            </div>\n                            <div>\n                                {this.createCollaboratorPageLink(\n                                    <FormattedMessage {...messages.viewAdditionalPeopleText} />,\n                                    viewAdditionalProps,\n                                )}\n                            </div>\n                        </li>\n                    )}\n                </ul>\n                <ModalActions>\n                    <Button className=\"btn-done\" onClick={onDoneClick} type=\"button\" {...doneButtonProps}>\n                        <FormattedMessage {...commonMessages.done} />\n                    </Button>\n                </ModalActions>\n            </div>\n        );\n    }\n}\n\nexport default CollaboratorList;\n"],"file":"CollaboratorList.js"}

package/es/features/collaborator-avatars/CollaboratorListItem.js

@@ -30,22 +30,22 @@ var CollaboratorListItem = function CollaboratorListItem(props) {
   }, React.createElement(Link, _extends({
     href: profileURL || "/profile/".concat(userID),
     rel: "noopener",
-    target: "_blank",
-    title: name
+    target: "_blank"
   }, usernameProps), name)) : React.createElement("div", {
     className: classnames('name', type)
   }, name);
   var emailContent = type !== COLLAB_GROUP_TYPE && email ? React.createElement("div", {
     className: "email"
   }, React.createElement(Link, _extends({
-    href: "mailto:".concat(email),
-    title: email
+    href: "mailto:".concat(email)
   }, emailProps), email)) : null;
   return React.createElement("li", null, React.createElement("div", {
     className: "collaborator-list-item"
   }, React.createElement("div", {
-    className: "user"
-  }, React.createElement(CollaboratorAvatarItem, {
+    className: "bdl-CollaboratorListItem-user user"
+  }, React.createElement("div", {
+    className: "info"
+  }, userOrGroupNameContent, emailContent), React.createElement(CollaboratorAvatarItem, {
     allowBadging: true,
     avatarUrl: imageURL,
     email: email,
@@ -54,9 +54,7 @@ var CollaboratorListItem = function CollaboratorListItem(props) {
     id: index,
     isExternalCollab: isExternalCollab,
     name: name
-  }), React.createElement("div", {
-    className: "info"
-  }, userOrGroupNameContent, emailContent)), React.createElement("div", {
+  })), React.createElement("div", {
     className: "role"
   }, type === COLLAB_PENDING_TYPE ? React.createElement(FormattedMessage, messages.pendingCollabText) : translatedRole)));
 };

package/es/features/collaborator-avatars/CollaboratorListItem.js.flow

@@ -35,13 +35,7 @@ const CollaboratorListItem = (props: Props) => {
     const userOrGroupNameContent =
         type !== COLLAB_GROUP_TYPE ? (
             <div className={classnames('name', type)}>
-                <Link
-                    href={profileURL || `/profile/${userID}`}
-                    rel="noopener"
-                    target="_blank"
-                    title={name}
-                    {...usernameProps}
-                >
+                <Link href={profileURL || `/profile/${userID}`} rel="noopener" target="_blank" {...usernameProps}>
                     {name}
                 </Link>
             </div>
@@ -52,7 +46,7 @@ const CollaboratorListItem = (props: Props) => {
     const emailContent =
         type !== COLLAB_GROUP_TYPE && email ? (
             <div className="email">
-                <Link href={`mailto:${email}`} title={email} {...emailProps}>
+                <Link href={`mailto:${email}`} {...emailProps}>
                     {email}
                 </Link>
             </div>
@@ -61,7 +55,11 @@ const CollaboratorListItem = (props: Props) => {
     return (
         <li>
             <div className="collaborator-list-item">
-                <div className="user">
+                <div className="bdl-CollaboratorListItem-user user">
+                    <div className="info">
+                        {userOrGroupNameContent}
+                        {emailContent}
+                    </div>
                     <CollaboratorAvatarItem
                         allowBadging
                         avatarUrl={imageURL}
@@ -72,10 +70,6 @@ const CollaboratorListItem = (props: Props) => {
                         isExternalCollab={isExternalCollab}
                         name={name}
                     />
-                    <div className="info">
-                        {userOrGroupNameContent}
-                        {emailContent}
-                    </div>
                 </div>
                 <div className="role">
                     {type === COLLAB_PENDING_TYPE ? (

package/es/features/collaborator-avatars/CollaboratorListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/collaborator-avatars/CollaboratorListItem.js"],"names":["React","classnames","FormattedMessage","Link","COLLAB_GROUP_TYPE","COLLAB_PENDING_TYPE","messages","CollaboratorAvatarItem","CollaboratorListItem","props","index","trackingProps","usernameProps","emailProps","collaborator","email","expiration","hasCustomAvatar","name","type","imageURL","isExternalCollab","profileURL","translatedRole","userID","userOrGroupNameContent","emailContent","pendingCollabText"],"mappings":";;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AAEA,SAASC,IAAT,QAAqB,uBAArB;AAEA,SAASC,iBAAT,EAA4BC,mBAA5B,QAAuD,aAAvD;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,sBAAP,MAAmC,0BAAnC;AACA,OAAO,6BAAP;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAkB;AAAA,MACnCC,KADmC,GACVD,KADU,CACnCC,KADmC;AAAA,MAC5BC,aAD4B,GACVF,KADU,CAC5BE,aAD4B;AAAA,MAEnCC,aAFmC,GAELD,aAFK,CAEnCC,aAFmC;AAAA,MAEpBC,UAFoB,GAELF,aAFK,CAEpBE,UAFoB;AAAA,4BAcvCJ,KAAK,CAACK,YAdiC;AAAA,MAIvCC,KAJuC,uBAIvCA,KAJuC;AAAA,MAKvCC,UALuC,uBAKvCA,UALuC;AAAA,MAMvCC,eANuC,uBAMvCA,eANuC;AAAA,MAOvCC,IAPuC,uBAOvCA,IAPuC;AAAA,MAQvCC,IARuC,uBAQvCA,IARuC;AAAA,MASvCC,QATuC,uBASvCA,QATuC;AAAA,MAUvCC,gBAVuC,uBAUvCA,gBAVuC;AAAA,MAWvCC,UAXuC,uBAWvCA,UAXuC;AAAA,MAYvCC,cAZuC,uBAYvCA,cAZuC;AAAA,MAavCC,MAbuC,uBAavCA,MAbuC;AAgB3C,MAAMC,sBAAsB,GACxBN,IAAI,KAAKf,iBAAT,GACI;AAAK,IAAA,SAAS,EAAEH,UAAU,CAAC,MAAD,EAASkB,IAAT;AAA1B,KACI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEG,UAAU,uBAAgBE,MAAhB,CADpB;AAEI,IAAA,GAAG,EAAC,UAFR;AAGI,IAAA,MAAM,EAAC,QAHX;AAII,IAAA,KAAK,EAAEN;AAJX,KAKQN,aALR,GAOKM,IAPL,CADJ,CADJ,GAaI;AAAK,IAAA,SAAS,EAAEjB,UAAU,CAAC,MAAD,EAASkB,IAAT;AAA1B,KAA2CD,IAA3C,CAdR;AAiBA,MAAMQ,YAAY,GACdP,IAAI,KAAKf,iBAAT,IAA8BW,KAA9B,GACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,IAAD;AAAM,IAAA,IAAI,mBAAYA,KAAZ,CAAV;AAA+B,IAAA,KAAK,EAAEA;AAAtC,KAAiDF,UAAjD,GACKE,KADL,CADJ,CADJ,GAMI,IAPR;AASA,SACI,gCACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,sBAAD;AACI,IAAA,YAAY,MADhB;AAEI,IAAA,SAAS,EAAEK,QAFf;AAGI,IAAA,KAAK,EAAEL,KAHX;AAII,IAAA,UAAU,EAAEC,UAJhB;AAKI,IAAA,eAAe,EAAEC,eALrB;AAMI,IAAA,EAAE,EAAEP,KANR;AAOI,IAAA,gBAAgB,EAAEW,gBAPtB;AAQI,IAAA,IAAI,EAAEH;AARV,IADJ,EAWI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKO,sBADL,EAEKC,YAFL,CAXJ,CADJ,EAiBI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKP,IAAI,KAAKd,mBAAT,GACG,oBAAC,gBAAD,EAAsBC,QAAQ,CAACqB,iBAA/B,CADH,GAGGJ,cAJR,CAjBJ,CADJ,CADJ;AA6BH,CAvED;;AAyEA,eAAef,oBAAf","sourcesContent":["// @flow\nimport React from 'react';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Link } from '../../components/link';\n\nimport { COLLAB_GROUP_TYPE, COLLAB_PENDING_TYPE } from './constants';\nimport messages from './messages';\nimport CollaboratorAvatarItem from './CollaboratorAvatarItem';\nimport './CollaboratorListItem.scss';\n\ntype Props = {\n    collaborator: Object,\n    index: number,\n    trackingProps: { emailProps: ?Object, usernameProps: ?Object },\n};\n\nconst CollaboratorListItem = (props: Props) => {\n    const { index, trackingProps } = props;\n    const { usernameProps, emailProps } = trackingProps;\n    const {\n        email,\n        expiration,\n        hasCustomAvatar,\n        name,\n        type,\n        imageURL,\n        isExternalCollab,\n        profileURL,\n        translatedRole,\n        userID,\n    } = props.collaborator;\n\n    const userOrGroupNameContent =\n        type !== COLLAB_GROUP_TYPE ? (\n            <div className={classnames('name', type)}>\n                <Link\n                    href={profileURL || `/profile/${userID}`}\n                    rel=\"noopener\"\n                    target=\"_blank\"\n                    title={name}\n                    {...usernameProps}\n                >\n                    {name}\n                </Link>\n            </div>\n        ) : (\n            <div className={classnames('name', type)}>{name}</div>\n        );\n\n    const emailContent =\n        type !== COLLAB_GROUP_TYPE && email ? (\n            <div className=\"email\">\n                <Link href={`mailto:${email}`} title={email} {...emailProps}>\n                    {email}\n                </Link>\n            </div>\n        ) : null;\n\n    return (\n        <li>\n            <div className=\"collaborator-list-item\">\n                <div className=\"user\">\n                    <CollaboratorAvatarItem\n                        allowBadging\n                        avatarUrl={imageURL}\n                        email={email}\n                        expiration={expiration}\n                        hasCustomAvatar={hasCustomAvatar}\n                        id={index}\n                        isExternalCollab={isExternalCollab}\n                        name={name}\n                    />\n                    <div className=\"info\">\n                        {userOrGroupNameContent}\n                        {emailContent}\n                    </div>\n                </div>\n                <div className=\"role\">\n                    {type === COLLAB_PENDING_TYPE ? (\n                        <FormattedMessage {...messages.pendingCollabText} />\n                    ) : (\n                        translatedRole\n                    )}\n                </div>\n            </div>\n        </li>\n    );\n};\n\nexport default CollaboratorListItem;\n"],"file":"CollaboratorListItem.js"}
+{"version":3,"sources":["../../../src/features/collaborator-avatars/CollaboratorListItem.js"],"names":["React","classnames","FormattedMessage","Link","COLLAB_GROUP_TYPE","COLLAB_PENDING_TYPE","messages","CollaboratorAvatarItem","CollaboratorListItem","props","index","trackingProps","usernameProps","emailProps","collaborator","email","expiration","hasCustomAvatar","name","type","imageURL","isExternalCollab","profileURL","translatedRole","userID","userOrGroupNameContent","emailContent","pendingCollabText"],"mappings":";;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AAEA,SAASC,IAAT,QAAqB,uBAArB;AAEA,SAASC,iBAAT,EAA4BC,mBAA5B,QAAuD,aAAvD;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,sBAAP,MAAmC,0BAAnC;AACA,OAAO,6BAAP;;AAQA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAkB;AAAA,MACnCC,KADmC,GACVD,KADU,CACnCC,KADmC;AAAA,MAC5BC,aAD4B,GACVF,KADU,CAC5BE,aAD4B;AAAA,MAEnCC,aAFmC,GAELD,aAFK,CAEnCC,aAFmC;AAAA,MAEpBC,UAFoB,GAELF,aAFK,CAEpBE,UAFoB;AAAA,4BAcvCJ,KAAK,CAACK,YAdiC;AAAA,MAIvCC,KAJuC,uBAIvCA,KAJuC;AAAA,MAKvCC,UALuC,uBAKvCA,UALuC;AAAA,MAMvCC,eANuC,uBAMvCA,eANuC;AAAA,MAOvCC,IAPuC,uBAOvCA,IAPuC;AAAA,MAQvCC,IARuC,uBAQvCA,IARuC;AAAA,MASvCC,QATuC,uBASvCA,QATuC;AAAA,MAUvCC,gBAVuC,uBAUvCA,gBAVuC;AAAA,MAWvCC,UAXuC,uBAWvCA,UAXuC;AAAA,MAYvCC,cAZuC,uBAYvCA,cAZuC;AAAA,MAavCC,MAbuC,uBAavCA,MAbuC;AAgB3C,MAAMC,sBAAsB,GACxBN,IAAI,KAAKf,iBAAT,GACI;AAAK,IAAA,SAAS,EAAEH,UAAU,CAAC,MAAD,EAASkB,IAAT;AAA1B,KACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEG,UAAU,uBAAgBE,MAAhB,CAAtB;AAAgD,IAAA,GAAG,EAAC,UAApD;AAA+D,IAAA,MAAM,EAAC;AAAtE,KAAmFZ,aAAnF,GACKM,IADL,CADJ,CADJ,GAOI;AAAK,IAAA,SAAS,EAAEjB,UAAU,CAAC,MAAD,EAASkB,IAAT;AAA1B,KAA2CD,IAA3C,CARR;AAWA,MAAMQ,YAAY,GACdP,IAAI,KAAKf,iBAAT,IAA8BW,KAA9B,GACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,IAAD;AAAM,IAAA,IAAI,mBAAYA,KAAZ;AAAV,KAAmCF,UAAnC,GACKE,KADL,CADJ,CADJ,GAMI,IAPR;AASA,SACI,gCACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKU,sBADL,EAEKC,YAFL,CADJ,EAKI,oBAAC,sBAAD;AACI,IAAA,YAAY,MADhB;AAEI,IAAA,SAAS,EAAEN,QAFf;AAGI,IAAA,KAAK,EAAEL,KAHX;AAII,IAAA,UAAU,EAAEC,UAJhB;AAKI,IAAA,eAAe,EAAEC,eALrB;AAMI,IAAA,EAAE,EAAEP,KANR;AAOI,IAAA,gBAAgB,EAAEW,gBAPtB;AAQI,IAAA,IAAI,EAAEH;AARV,IALJ,CADJ,EAiBI;AAAK,IAAA,SAAS,EAAC;AAAf,KACKC,IAAI,KAAKd,mBAAT,GACG,oBAAC,gBAAD,EAAsBC,QAAQ,CAACqB,iBAA/B,CADH,GAGGJ,cAJR,CAjBJ,CADJ,CADJ;AA6BH,CAjED;;AAmEA,eAAef,oBAAf","sourcesContent":["// @flow\nimport React from 'react';\nimport classnames from 'classnames';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Link } from '../../components/link';\n\nimport { COLLAB_GROUP_TYPE, COLLAB_PENDING_TYPE } from './constants';\nimport messages from './messages';\nimport CollaboratorAvatarItem from './CollaboratorAvatarItem';\nimport './CollaboratorListItem.scss';\n\ntype Props = {\n    collaborator: Object,\n    index: number,\n    trackingProps: { emailProps: ?Object, usernameProps: ?Object },\n};\n\nconst CollaboratorListItem = (props: Props) => {\n    const { index, trackingProps } = props;\n    const { usernameProps, emailProps } = trackingProps;\n    const {\n        email,\n        expiration,\n        hasCustomAvatar,\n        name,\n        type,\n        imageURL,\n        isExternalCollab,\n        profileURL,\n        translatedRole,\n        userID,\n    } = props.collaborator;\n\n    const userOrGroupNameContent =\n        type !== COLLAB_GROUP_TYPE ? (\n            <div className={classnames('name', type)}>\n                <Link href={profileURL || `/profile/${userID}`} rel=\"noopener\" target=\"_blank\" {...usernameProps}>\n                    {name}\n                </Link>\n            </div>\n        ) : (\n            <div className={classnames('name', type)}>{name}</div>\n        );\n\n    const emailContent =\n        type !== COLLAB_GROUP_TYPE && email ? (\n            <div className=\"email\">\n                <Link href={`mailto:${email}`} {...emailProps}>\n                    {email}\n                </Link>\n            </div>\n        ) : null;\n\n    return (\n        <li>\n            <div className=\"collaborator-list-item\">\n                <div className=\"bdl-CollaboratorListItem-user user\">\n                    <div className=\"info\">\n                        {userOrGroupNameContent}\n                        {emailContent}\n                    </div>\n                    <CollaboratorAvatarItem\n                        allowBadging\n                        avatarUrl={imageURL}\n                        email={email}\n                        expiration={expiration}\n                        hasCustomAvatar={hasCustomAvatar}\n                        id={index}\n                        isExternalCollab={isExternalCollab}\n                        name={name}\n                    />\n                </div>\n                <div className=\"role\">\n                    {type === COLLAB_PENDING_TYPE ? (\n                        <FormattedMessage {...messages.pendingCollabText} />\n                    ) : (\n                        translatedRole\n                    )}\n                </div>\n            </div>\n        </li>\n    );\n};\n\nexport default CollaboratorListItem;\n"],"file":"CollaboratorListItem.js"}

package/es/features/collaborator-avatars/CollaboratorListItem.scss

@@ -33,7 +33,7 @@
         }
 
         .email .link {
-            color: $bdl-gray-62;
+            color: $bdl-gray-65;
         }
 
         .name .link:hover,
@@ -48,14 +48,14 @@
         .email {
             max-width: 200px;
             overflow: hidden;
-            color: $bdl-gray-62;
+            color: $bdl-gray-65;
             font-size: 12px;
             line-height: 16px;
             text-overflow: ellipsis;
         }
 
         .role {
-            color: $bdl-gray-62;
+            color: $bdl-gray-65;
             line-height: 32px;
         }
     }
@@ -74,3 +74,7 @@
         }
     }
 }
+
+.bdl-CollaboratorListItem-user {
+    flex-direction: row-reverse;
+}

package/es/features/collapsible-sidebar/CollapsibleSidebar.js

@@ -120,7 +120,8 @@ function (_React$Component) {
           className = _this$props.className,
           expanded = _this$props.expanded,
           isHidden = _this$props.isHidden,
-          htmlAttributes = _this$props.htmlAttributes;
+          htmlAttributes = _this$props.htmlAttributes,
+          wrapperClassName = _this$props.wrapperClassName;
       var navClasses = classNames({
         'is-expanded': expanded
       }, 'bdl-CollapsibleSidebar', className);
@@ -128,7 +129,7 @@ function (_React$Component) {
         'aria-hidden': isHidden ? 'true' : undefined
       };
       return React.createElement("div", _extends({
-        className: "bdl-CollapsibleSidebar-wrapper"
+        className: classNames('bdl-CollapsibleSidebar-wrapper', wrapperClassName)
       }, htmlAttributes, ariaAttributes, {
         "data-testid": "CollapsibleSidebar-wrapper"
       }), React.createElement(StyledNav, {

package/es/features/collapsible-sidebar/CollapsibleSidebar.js.flow

@@ -39,6 +39,9 @@ type Props = {
 
     /** Optionally apply "aria-hidden": "true" to CollapsibleSidebar wrapper */
     isHidden?: boolean,
+
+    /** Optionally apply CSS to the CollapsibleSidebar wrapper */
+    wrapperClassName?: string,
 };
 
 class CollapsibleSidebar extends React.Component<Props> {
@@ -84,7 +87,7 @@ class CollapsibleSidebar extends React.Component<Props> {
     };
 
     render() {
-        const { children, className, expanded, isHidden, htmlAttributes } = this.props;
+        const { children, className, expanded, isHidden, htmlAttributes, wrapperClassName } = this.props;
         const navClasses = classNames(
             {
                 'is-expanded': expanded,
@@ -95,7 +98,7 @@ class CollapsibleSidebar extends React.Component<Props> {
         const ariaAttributes = { 'aria-hidden': isHidden ? 'true' : undefined };
         return (
             <div
-                className="bdl-CollapsibleSidebar-wrapper"
+                className={classNames('bdl-CollapsibleSidebar-wrapper', wrapperClassName)}
                 {...htmlAttributes}
                 {...ariaAttributes}
                 data-testid="CollapsibleSidebar-wrapper"

package/es/features/collapsible-sidebar/CollapsibleSidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebar.js"],"names":["React","classNames","styled","tabbable","KEYS","StyledNav","nav","props","theme","primary","background","border","foreground","CollapsibleSidebar","createRef","direction","navRef","current","tabbableEls","currentElIndex","findIndex","el","document","activeElement","index","length","focus","event","contains","key","arrowDown","stopPropagation","preventDefault","focusEl","arrowUp","children","className","expanded","isHidden","htmlAttributes","navClasses","ariaAttributes","undefined","handleKeyDown","Component"],"mappings":"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","sourcesContent":["/**\n * @flow\n * @file Sidebar component that supports rendering different elements based on expand/collapse state\n * @author Box\n *\n * A sidebar component that supports collapsed/expanded state and responsive sizing.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport tabbable from 'tabbable';\nimport { KEYS } from '../../constants';\n\nimport './CollapsibleSidebar.scss';\n\nconst StyledNav = styled.nav`\n    background-color: ${props => props.theme.primary.background};\n    border-right: 1px solid ${props => props.theme.primary.border};\n    color: ${props => props.theme.primary.foreground};\n\n    .crawler > div {\n        background-color: ${props => props.theme.primary.foreground};\n    }\n`;\n\ntype Props = {\n    /** Primary content */\n    children?: React.Node,\n\n    /** Additional classes */\n    className?: string,\n\n    /** Controls whether or not the sidebar is expanded on the page */\n    expanded?: boolean,\n\n    /** Optional HTML attributes to append to menu item */\n    htmlAttributes?: Object,\n\n    /** Optionally apply \"aria-hidden\": \"true\" to CollapsibleSidebar wrapper */\n    isHidden?: boolean,\n};\n\nclass CollapsibleSidebar extends React.Component<Props> {\n    navRef: { current: null | HTMLElement } = React.createRef();\n\n    static defaultProps = {\n        expanded: false,\n    };\n\n    focusEl = (direction: 'down' | 'up') => {\n        if (this.navRef.current) {\n            const tabbableEls = tabbable(this.navRef.current);\n            const currentElIndex = tabbableEls.findIndex(el => el === document.activeElement);\n            let index;\n            if (direction === 'down') {\n                index = currentElIndex === tabbableEls.length - 1 ? 0 : currentElIndex + 1;\n            } else {\n                index = currentElIndex === 0 ? tabbableEls.length - 1 : currentElIndex - 1;\n            }\n            tabbableEls[index].focus();\n        }\n    };\n\n    handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n        if (this.navRef.current && this.navRef.current.contains(document.activeElement)) {\n            switch (event.key) {\n                case KEYS.arrowDown:\n                    event.stopPropagation();\n                    event.preventDefault();\n                    this.focusEl('down');\n                    break;\n\n                case KEYS.arrowUp:\n                    event.stopPropagation();\n                    event.preventDefault();\n                    this.focusEl('up');\n                    break;\n\n                default:\n                    break;\n            }\n        }\n    };\n\n    render() {\n        const { children, className, expanded, isHidden, htmlAttributes } = this.props;\n        const navClasses = classNames(\n            {\n                'is-expanded': expanded,\n            },\n            'bdl-CollapsibleSidebar',\n            className,\n        );\n        const ariaAttributes = { 'aria-hidden': isHidden ? 'true' : undefined };\n        return (\n            <div\n                className=\"bdl-CollapsibleSidebar-wrapper\"\n                {...htmlAttributes}\n                {...ariaAttributes}\n                data-testid=\"CollapsibleSidebar-wrapper\"\n            >\n                <StyledNav ref={this.navRef} className={navClasses} onKeyDown={this.handleKeyDown}>\n                    {children}\n                </StyledNav>\n            </div>\n        );\n    }\n}\n\nexport default CollapsibleSidebar;\n"],"file":"CollapsibleSidebar.js"}
+{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebar.js"],"names":["React","classNames","styled","tabbable","KEYS","StyledNav","nav","props","theme","primary","background","border","foreground","CollapsibleSidebar","createRef","direction","navRef","current","tabbableEls","currentElIndex","findIndex","el","document","activeElement","index","length","focus","event","contains","key","arrowDown","stopPropagation","preventDefault","focusEl","arrowUp","children","className","expanded","isHidden","htmlAttributes","wrapperClassName","navClasses","ariaAttributes","undefined","handleKeyDown","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAQA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,QAAP,MAAqB,UAArB;AACA,SAASC,IAAT,QAAqB,iBAArB;AAEA,OAAO,2BAAP;AAEA,IAAMC,SAAS,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,4GACS,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAN,CAAYC,OAAZ,CAAoBC,UAAxB;AAAA,CADd,EAEe,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAN,CAAYC,OAAZ,CAAoBE,MAAxB;AAAA,CAFpB,EAGF,UAAAJ,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAN,CAAYC,OAAZ,CAAoBG,UAAxB;AAAA,CAHH,EAMa,UAAAL,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAN,CAAYC,OAAZ,CAAoBG,UAAxB;AAAA,CANlB,CAAf;;IA8BMC,kB;;;;;;;;;;;;;;;;;;6DACwCb,KAAK,CAACc,SAAN,E;;8DAMhC,UAACC,SAAD,EAA8B;AACpC,UAAI,MAAKC,MAAL,CAAYC,OAAhB,EAAyB;AACrB,YAAMC,WAAW,GAAGf,QAAQ,CAAC,MAAKa,MAAL,CAAYC,OAAb,CAA5B;AACA,YAAME,cAAc,GAAGD,WAAW,CAACE,SAAZ,CAAsB,UAAAC,EAAE;AAAA,iBAAIA,EAAE,KAAKC,QAAQ,CAACC,aAApB;AAAA,SAAxB,CAAvB;AACA,YAAIC,KAAJ;;AACA,YAAIT,SAAS,KAAK,MAAlB,EAA0B;AACtBS,UAAAA,KAAK,GAAGL,cAAc,KAAKD,WAAW,CAACO,MAAZ,GAAqB,CAAxC,GAA4C,CAA5C,GAAgDN,cAAc,GAAG,CAAzE;AACH,SAFD,MAEO;AACHK,UAAAA,KAAK,GAAGL,cAAc,KAAK,CAAnB,GAAuBD,WAAW,CAACO,MAAZ,GAAqB,CAA5C,GAAgDN,cAAc,GAAG,CAAzE;AACH;;AACDD,QAAAA,WAAW,CAACM,KAAD,CAAX,CAAmBE,KAAnB;AACH;AACJ,K;;oEAEe,UAACC,KAAD,EAAqC;AACjD,UAAI,MAAKX,MAAL,CAAYC,OAAZ,IAAuB,MAAKD,MAAL,CAAYC,OAAZ,CAAoBW,QAApB,CAA6BN,QAAQ,CAACC,aAAtC,CAA3B,EAAiF;AAC7E,gBAAQI,KAAK,CAACE,GAAd;AACI,eAAKzB,IAAI,CAAC0B,SAAV;AACIH,YAAAA,KAAK,CAACI,eAAN;AACAJ,YAAAA,KAAK,CAACK,cAAN;;AACA,kBAAKC,OAAL,CAAa,MAAb;;AACA;;AAEJ,eAAK7B,IAAI,CAAC8B,OAAV;AACIP,YAAAA,KAAK,CAACI,eAAN;AACAJ,YAAAA,KAAK,CAACK,cAAN;;AACA,kBAAKC,OAAL,CAAa,IAAb;;AACA;;AAEJ;AACI;AAdR;AAgBH;AACJ,K;;;;;;;6BAEQ;AAAA,wBACiF,KAAK1B,KADtF;AAAA,UACG4B,QADH,eACGA,QADH;AAAA,UACaC,SADb,eACaA,SADb;AAAA,UACwBC,QADxB,eACwBA,QADxB;AAAA,UACkCC,QADlC,eACkCA,QADlC;AAAA,UAC4CC,cAD5C,eAC4CA,cAD5C;AAAA,UAC4DC,gBAD5D,eAC4DA,gBAD5D;AAEL,UAAMC,UAAU,GAAGxC,UAAU,CACzB;AACI,uBAAeoC;AADnB,OADyB,EAIzB,wBAJyB,EAKzBD,SALyB,CAA7B;AAOA,UAAMM,cAAc,GAAG;AAAE,uBAAeJ,QAAQ,GAAG,MAAH,GAAYK;AAArC,OAAvB;AACA,aACI;AACI,QAAA,SAAS,EAAE1C,UAAU,CAAC,gCAAD,EAAmCuC,gBAAnC;AADzB,SAEQD,cAFR,EAGQG,cAHR;AAII,uBAAY;AAJhB,UAMI,oBAAC,SAAD;AAAW,QAAA,GAAG,EAAE,KAAK1B,MAArB;AAA6B,QAAA,SAAS,EAAEyB,UAAxC;AAAoD,QAAA,SAAS,EAAE,KAAKG;AAApE,SACKT,QADL,CANJ,CADJ;AAYH;;;;EAhE4BnC,KAAK,CAAC6C,S;;gBAAjChC,kB,kBAGoB;AAClBwB,EAAAA,QAAQ,EAAE;AADQ,C;;AAgE1B,eAAexB,kBAAf","sourcesContent":["/**\n * @flow\n * @file Sidebar component that supports rendering different elements based on expand/collapse state\n * @author Box\n *\n * A sidebar component that supports collapsed/expanded state and responsive sizing.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport tabbable from 'tabbable';\nimport { KEYS } from '../../constants';\n\nimport './CollapsibleSidebar.scss';\n\nconst StyledNav = styled.nav`\n    background-color: ${props => props.theme.primary.background};\n    border-right: 1px solid ${props => props.theme.primary.border};\n    color: ${props => props.theme.primary.foreground};\n\n    .crawler > div {\n        background-color: ${props => props.theme.primary.foreground};\n    }\n`;\n\ntype Props = {\n    /** Primary content */\n    children?: React.Node,\n\n    /** Additional classes */\n    className?: string,\n\n    /** Controls whether or not the sidebar is expanded on the page */\n    expanded?: boolean,\n\n    /** Optional HTML attributes to append to menu item */\n    htmlAttributes?: Object,\n\n    /** Optionally apply \"aria-hidden\": \"true\" to CollapsibleSidebar wrapper */\n    isHidden?: boolean,\n\n    /** Optionally apply CSS to the CollapsibleSidebar wrapper */\n    wrapperClassName?: string,\n};\n\nclass CollapsibleSidebar extends React.Component<Props> {\n    navRef: { current: null | HTMLElement } = React.createRef();\n\n    static defaultProps = {\n        expanded: false,\n    };\n\n    focusEl = (direction: 'down' | 'up') => {\n        if (this.navRef.current) {\n            const tabbableEls = tabbable(this.navRef.current);\n            const currentElIndex = tabbableEls.findIndex(el => el === document.activeElement);\n            let index;\n            if (direction === 'down') {\n                index = currentElIndex === tabbableEls.length - 1 ? 0 : currentElIndex + 1;\n            } else {\n                index = currentElIndex === 0 ? tabbableEls.length - 1 : currentElIndex - 1;\n            }\n            tabbableEls[index].focus();\n        }\n    };\n\n    handleKeyDown = (event: SyntheticKeyboardEvent<>) => {\n        if (this.navRef.current && this.navRef.current.contains(document.activeElement)) {\n            switch (event.key) {\n                case KEYS.arrowDown:\n                    event.stopPropagation();\n                    event.preventDefault();\n                    this.focusEl('down');\n                    break;\n\n                case KEYS.arrowUp:\n                    event.stopPropagation();\n                    event.preventDefault();\n                    this.focusEl('up');\n                    break;\n\n                default:\n                    break;\n            }\n        }\n    };\n\n    render() {\n        const { children, className, expanded, isHidden, htmlAttributes, wrapperClassName } = this.props;\n        const navClasses = classNames(\n            {\n                'is-expanded': expanded,\n            },\n            'bdl-CollapsibleSidebar',\n            className,\n        );\n        const ariaAttributes = { 'aria-hidden': isHidden ? 'true' : undefined };\n        return (\n            <div\n                className={classNames('bdl-CollapsibleSidebar-wrapper', wrapperClassName)}\n                {...htmlAttributes}\n                {...ariaAttributes}\n                data-testid=\"CollapsibleSidebar-wrapper\"\n            >\n                <StyledNav ref={this.navRef} className={navClasses} onKeyDown={this.handleKeyDown}>\n                    {children}\n                </StyledNav>\n            </div>\n        );\n    }\n}\n\nexport default CollapsibleSidebar;\n"],"file":"CollapsibleSidebar.js"}

package/es/features/collapsible-sidebar/CollapsibleSidebar.scss

@@ -7,6 +7,7 @@ $collapsible-side-bar-collapsed-width: 68px;
 $collapsible-side-bar-h-padding: $bdl-grid-unit * 3;
 $collapsible-side-bar-v-padding: $bdl-grid-unit * 3;
 $collaspsible-side-bar-logo-v-margin: $collapsible-side-bar-v-padding + $bdl-grid-unit;
+$collaspsible-side-bar-logo-h-margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px;
 $left-sidebar-z-index: 40 !default;
 
 .bdl-CollapsibleSidebar-wrapper {
@@ -50,7 +51,7 @@ $left-sidebar-z-index: 40 !default;
     // TODO: is there a grid-based value for this sizing?
     // fixed height is to keep the menu in the same spot vertically when Box logo is hidden
     height: 32px + $collapsible-side-bar-v-padding + 4 * 1px; // logo height + padding + border
-    margin: $collaspsible-side-bar-logo-v-margin -1px $collaspsible-side-bar-logo-v-margin $collapsible-side-bar-h-padding - 1px;
+    margin: $collaspsible-side-bar-logo-v-margin -1px $collaspsible-side-bar-logo-v-margin $collaspsible-side-bar-logo-h-margin-left;
     overflow-x: hidden;
 
     .bdl-CollapsibleSidebar-toggleButton {
@@ -111,14 +112,10 @@ $left-sidebar-z-index: 40 !default;
     }
 }
 
-@include large-size {
+@include breakpoint($xlarge-screen) {
     .bdl-CollapsibleSidebar-logo {
-        margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px /* border */;
-    }
-}
+        margin-left: $collapsible-side-bar-h-padding - 1px;
 
-@include medium-minus-size {
-    .bdl-CollapsibleSidebar-logo {
         .bdl-CollapsibleSidebar-toggleButton {
             display: block;
         }

package/es/features/collapsible-sidebar/CollapsibleSidebarLogo.js

@@ -43,6 +43,8 @@ function CollapsibleSidebarLogo(props) {
       buttonProps = props.buttonProps,
       className = props.className,
       expanded = props.expanded,
+      _props$isLogoVisible = props.isLogoVisible,
+      isLogoVisible = _props$isLogoVisible === void 0 ? true : _props$isLogoVisible,
       linkProps = props.linkProps,
       onToggle = props.onToggle,
       intl = props.intl;
@@ -61,7 +63,7 @@ function CollapsibleSidebarLogo(props) {
   }, React.createElement(CollapsibleSidebarItem, {
     collapsedElement: toggleButton,
     expanded: expanded,
-    expandedElement: React.createElement(React.Fragment, null, toggleButton, React.createElement(LinkBase, _extends({
+    expandedElement: React.createElement(React.Fragment, null, toggleButton, isLogoVisible && React.createElement(LinkBase, _extends({
       className: "bdl-CollapsibleSidebar-logoLink"
     }, linkProps), React.createElement(React.Fragment, null, React.createElement(StyledLogo, {
       className: "bdl-CollapsibleSidebar-logoIcon",

package/es/features/collapsible-sidebar/CollapsibleSidebarLogo.js.flow

@@ -72,13 +72,15 @@ type Props = {
     /** Controls whether or not the sidebar is expanded on the page */
     expanded: boolean,
 
+    isLogoVisible?: boolean,
+
     linkProps: Object,
 
     onToggle: () => void,
 } & InjectIntlProvidedProps;
 
 function CollapsibleSidebarLogo(props: Props) {
-    const { badge, buttonProps, className, expanded, linkProps, onToggle, intl } = props;
+    const { badge, buttonProps, className, expanded, isLogoVisible = true, linkProps, onToggle, intl } = props;
 
     const classes = classNames('bdl-CollapsibleSidebar-logo', className);
 
@@ -102,16 +104,18 @@ function CollapsibleSidebarLogo(props: Props) {
                 expandedElement={
                     <>
                         {toggleButton}
-                        <LinkBase className="bdl-CollapsibleSidebar-logoLink" {...linkProps}>
-                            <>
-                                <StyledLogo
-                                    className="bdl-CollapsibleSidebar-logoIcon"
-                                    height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}
-                                    width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}
-                                />
-                                {badge}
-                            </>
-                        </LinkBase>
+                        {isLogoVisible && (
+                            <LinkBase className="bdl-CollapsibleSidebar-logoLink" {...linkProps}>
+                                <>
+                                    <StyledLogo
+                                        className="bdl-CollapsibleSidebar-logoIcon"
+                                        height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}
+                                        width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}
+                                    />
+                                    {badge}
+                                </>
+                            </LinkBase>
+                        )}
                     </>
                 }
             />

package/es/features/collapsible-sidebar/CollapsibleSidebarLogo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebarLogo.js"],"names":["React","classNames","styled","injectIntl","bdlGridUnit","bdlBorderRadiusSizeLarge","Logo","PlainButton","LinkBase","IconHamburger","CollapsibleSidebarItem","messages","StyledLogo","props","theme","primary","foreground","StyledIconHamburger","StyledToggleButton","CollapsibleSidebarLogo","badge","buttonProps","className","expanded","linkProps","onToggle","intl","classes","toggleButton","formatMessage","collapseButtonLabel","expandButtonLabel"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport { bdlGridUnit, bdlBorderRadiusSizeLarge } from '../../styles/variables';\nimport Logo from '../../icon/logo/BoxLogo';\nimport PlainButton from '../../components/plain-button/PlainButton';\nimport LinkBase from '../../components/link/LinkBase';\nimport IconHamburger from '../../icons/general/IconHamburger';\n\nimport CollapsibleSidebarItem from './CollapsibleSidebarItem';\n\nimport messages from './messages';\n\nconst StyledLogo = styled(Logo)`\n    padding: ${bdlGridUnit};\n    border: 1px solid transparent;\n    border-radius: ${bdlBorderRadiusSizeLarge};\n\n    & path,\n    & .fill-color {\n        fill: ${props => props.theme?.primary?.foreground};\n    }\n\n    a:focus & {\n        /* since root navlink is focusable, give logo some kind of focus state */\n        border-color: ${props => props.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\nconst StyledIconHamburger = styled(IconHamburger)`\n    position: relative;\n    top: 1px; /* svg alignment */\n    & .fill-color {\n        fill: ${props => props.theme.primary.foreground};\n    }\n`;\n\nconst StyledToggleButton = styled(PlainButton)`\n    /* override .btn-plain's overzealous pseudoelement styling */\n    &,\n    &:focus,\n    &:active,\n    &:hover {\n        padding: 8px 12px; /* we don't have unitless variables to multiply in JS yet */\n        line-height: 1;\n        border-color: transparent;\n        border-style: solid;\n        border-width: 1px;\n        border-radius: ${bdlBorderRadiusSizeLarge};\n    }\n\n    &:focus {\n        border-color: ${props => props?.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\ntype Props = {\n    /** optional badge to be displayed next to logo */\n    badge?: React.Node,\n\n    buttonProps?: Object,\n\n    /** Additional classes */\n    className?: string,\n\n    /** Controls whether or not the sidebar is expanded on the page */\n    expanded: boolean,\n\n    linkProps: Object,\n\n    onToggle: () => void,\n} & InjectIntlProvidedProps;\n\nfunction CollapsibleSidebarLogo(props: Props) {\n    const { badge, buttonProps, className, expanded, linkProps, onToggle, intl } = props;\n\n    const classes = classNames('bdl-CollapsibleSidebar-logo', className);\n\n    const toggleButton = (\n        <StyledToggleButton\n            className=\"bdl-CollapsibleSidebar-toggleButton\"\n            onClick={onToggle}\n            aria-label={intl.formatMessage(expanded ? messages.collapseButtonLabel : messages.expandButtonLabel)}\n            type=\"button\"\n            {...buttonProps}\n        >\n            <StyledIconHamburger height={20} width={20} />\n        </StyledToggleButton>\n    );\n\n    return (\n        <div className={classes}>\n            <CollapsibleSidebarItem\n                collapsedElement={toggleButton}\n                expanded={expanded}\n                expandedElement={\n                    <>\n                        {toggleButton}\n                        <LinkBase className=\"bdl-CollapsibleSidebar-logoLink\" {...linkProps}>\n                            <>\n                                <StyledLogo\n                                    className=\"bdl-CollapsibleSidebar-logoIcon\"\n                                    height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                    width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                />\n                                {badge}\n                            </>\n                        </LinkBase>\n                    </>\n                }\n            />\n        </div>\n    );\n}\n\nexport default injectIntl(CollapsibleSidebarLogo);\n"],"file":"CollapsibleSidebarLogo.js"}
+{"version":3,"sources":["../../../src/features/collapsible-sidebar/CollapsibleSidebarLogo.js"],"names":["React","classNames","styled","injectIntl","bdlGridUnit","bdlBorderRadiusSizeLarge","Logo","PlainButton","LinkBase","IconHamburger","CollapsibleSidebarItem","messages","StyledLogo","props","theme","primary","foreground","StyledIconHamburger","StyledToggleButton","CollapsibleSidebarLogo","badge","buttonProps","className","expanded","isLogoVisible","linkProps","onToggle","intl","classes","toggleButton","formatMessage","collapseButtonLabel","expandButtonLabel"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\n\nimport { injectIntl } from 'react-intl';\nimport type { InjectIntlProvidedProps } from 'react-intl';\nimport { bdlGridUnit, bdlBorderRadiusSizeLarge } from '../../styles/variables';\nimport Logo from '../../icon/logo/BoxLogo';\nimport PlainButton from '../../components/plain-button/PlainButton';\nimport LinkBase from '../../components/link/LinkBase';\nimport IconHamburger from '../../icons/general/IconHamburger';\n\nimport CollapsibleSidebarItem from './CollapsibleSidebarItem';\n\nimport messages from './messages';\n\nconst StyledLogo = styled(Logo)`\n    padding: ${bdlGridUnit};\n    border: 1px solid transparent;\n    border-radius: ${bdlBorderRadiusSizeLarge};\n\n    & path,\n    & .fill-color {\n        fill: ${props => props.theme?.primary?.foreground};\n    }\n\n    a:focus & {\n        /* since root navlink is focusable, give logo some kind of focus state */\n        border-color: ${props => props.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\nconst StyledIconHamburger = styled(IconHamburger)`\n    position: relative;\n    top: 1px; /* svg alignment */\n    & .fill-color {\n        fill: ${props => props.theme.primary.foreground};\n    }\n`;\n\nconst StyledToggleButton = styled(PlainButton)`\n    /* override .btn-plain's overzealous pseudoelement styling */\n    &,\n    &:focus,\n    &:active,\n    &:hover {\n        padding: 8px 12px; /* we don't have unitless variables to multiply in JS yet */\n        line-height: 1;\n        border-color: transparent;\n        border-style: solid;\n        border-width: 1px;\n        border-radius: ${bdlBorderRadiusSizeLarge};\n    }\n\n    &:focus {\n        border-color: ${props => props?.theme?.primary?.foreground};\n        outline: none;\n    }\n`;\n\ntype Props = {\n    /** optional badge to be displayed next to logo */\n    badge?: React.Node,\n\n    buttonProps?: Object,\n\n    /** Additional classes */\n    className?: string,\n\n    /** Controls whether or not the sidebar is expanded on the page */\n    expanded: boolean,\n\n    isLogoVisible?: boolean,\n\n    linkProps: Object,\n\n    onToggle: () => void,\n} & InjectIntlProvidedProps;\n\nfunction CollapsibleSidebarLogo(props: Props) {\n    const { badge, buttonProps, className, expanded, isLogoVisible = true, linkProps, onToggle, intl } = props;\n\n    const classes = classNames('bdl-CollapsibleSidebar-logo', className);\n\n    const toggleButton = (\n        <StyledToggleButton\n            className=\"bdl-CollapsibleSidebar-toggleButton\"\n            onClick={onToggle}\n            aria-label={intl.formatMessage(expanded ? messages.collapseButtonLabel : messages.expandButtonLabel)}\n            type=\"button\"\n            {...buttonProps}\n        >\n            <StyledIconHamburger height={20} width={20} />\n        </StyledToggleButton>\n    );\n\n    return (\n        <div className={classes}>\n            <CollapsibleSidebarItem\n                collapsedElement={toggleButton}\n                expanded={expanded}\n                expandedElement={\n                    <>\n                        {toggleButton}\n                        {isLogoVisible && (\n                            <LinkBase className=\"bdl-CollapsibleSidebar-logoLink\" {...linkProps}>\n                                <>\n                                    <StyledLogo\n                                        className=\"bdl-CollapsibleSidebar-logoIcon\"\n                                        height={32 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                        width={61 + 2 * 1 /* border */ + 2 * 4 /* padding */}\n                                    />\n                                    {badge}\n                                </>\n                            </LinkBase>\n                        )}\n                    </>\n                }\n            />\n        </div>\n    );\n}\n\nexport default injectIntl(CollapsibleSidebarLogo);\n"],"file":"CollapsibleSidebarLogo.js"}