Merge pull request #487 from Esri/feat/account-tile-updates

Feat/account tile updates
Esri · Jul 19, 2021 · 9e29759 · 9e29759
2 parents cfdefcd + 0307bf6
commit 9e29759
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/src/AccountTile/AccountTile-styled.js b/src/AccountTile/AccountTile-styled.js
@@ -20,6 +20,7 @@ import { CalciteTheme as theme } from '../CalciteThemeProvider';
 
 // Calcite components
 import { CalciteP } from '../Elements';
+import HandleVerticalIcon from 'calcite-ui-icons-react/HandleVerticalIcon';
 import Avatar from '../Avatar';
 
 const StyledAccountTile = styled.div`
@@ -32,7 +33,8 @@ const StyledAccountTile = styled.div`
   background-color: ${props =>
     props.open ? props.theme.palette.offWhite : props.theme.palette.white};
 
-  ${props => props.clickable &&
+  ${props =>
+    props.clickable &&
     css`
       &:hover {
         background-color: ${props.theme.palette.offWhite};
@@ -73,7 +75,6 @@ const StyledP = styled(CalciteP)`
 `;
 
 const StyledIconWrapper = styled.span`
-  width: 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -86,12 +87,17 @@ const StyledTextWrapper = styled.span`
   overflow: hidden;
 `;
 
+const StyledHandleVerticalIcon = styled(HandleVerticalIcon)`
+  margin-left: ${props => (props.marginLeft ? '0.5rem' : '0')};
+`;
+
 export {
   StyledAccountTile,
   StyledContentWrapper,
   StyledAvatarContainer,
   StyledOrgAvatar,
   StyledIconWrapper,
   StyledTextWrapper,
-  StyledP
+  StyledP,
+  StyledHandleVerticalIcon
 };
diff --git a/src/AccountTile/AccountTile.js b/src/AccountTile/AccountTile.js
@@ -20,7 +20,8 @@ import {
   StyledOrgAvatar,
   StyledIconWrapper,
   StyledTextWrapper,
-  StyledP
+  StyledP,
+  StyledHandleVerticalIcon
 } from './AccountTile-styled';
 
 import Avatar from '../Avatar';
@@ -29,7 +30,6 @@ import { MenuItem } from '../Menu';
 import Popover from '../Popover';
 import Menu from '../Menu';
 
-import HandleVerticalIcon from 'calcite-ui-icons-react/HandleVerticalIcon';
 import CheckCircleIcon from 'calcite-ui-icons-react/CheckCircleIcon';
 import ExclamationMarkTriangleIcon from 'calcite-ui-icons-react/ExclamationMarkTriangleIcon';
 
@@ -44,7 +44,7 @@ const AccountTile = ({
   expiredText,
   authenticatedText,
   clickable,
-  hideIcons,
+  hideAuthentication,
   ...other
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -135,8 +135,8 @@ const AccountTile = ({
               </StyledP>
             </StyledTextWrapper>
           </StyledContentWrapper>
-          {!hideIcons && (
-            <StyledIconWrapper>
+          <StyledIconWrapper>
+            {!hideAuthentication && (
               <Tooltip
                 title={isAuthenticated ? authenticatedText : expiredText}
                 placement="top"
@@ -159,9 +159,14 @@ const AccountTile = ({
                   />
                 )}
               </Tooltip>
-              {actions.length !== 0 && <HandleVerticalIcon scale={16} />}
-            </StyledIconWrapper>
-          )}
+            )}
+            {clickable && actions.length !== 0 && (
+              <StyledHandleVerticalIcon
+                scale={16}
+                marginLeft={!hideAuthentication}
+              />
+            )}
+          </StyledIconWrapper>
         </StyledAccountTile>
       }
     >
@@ -202,8 +207,8 @@ AccountTile.propTypes = {
   }),
   /** Can the time be clicked (false will disable hover effects and pointer events) */
   clickable: PropTypes.bool,
-  /** Should the account tiles be hidden */
-  hideIcons: PropTypes.bool
+  /** Should the account tile authentication be hidden */
+  hideAuthentication: PropTypes.bool
 };
 
 AccountTile.defaultProps = {
@@ -213,7 +218,7 @@ AccountTile.defaultProps = {
   authenticatedText: 'Signed in',
   expiredText: 'Session expired',
   clickable: true,
-  hideIcons: false
+  hideAuthentication: false
 };
 
 AccountTile.displayName = 'AccountTile';

diff --git a/src/AccountTile/doc/AccountTile.mdx b/src/AccountTile/doc/AccountTile.mdx
@@ -111,7 +111,7 @@ import AccountTile from 'calcite-react/AccountTile';
           userThumbnail={placeholders.userThumbnail}
           orgThumbnail={placeholders.orgThumbnail}
           clickable={false}
-          hideIcons={true}
+          hideAuthentication={true}
         />
       );
     }