fix: page title id and user list picker demo

Adslot · Apr 12, 2021 · f042937 · f042937
1 parent d38a77f
commit f042937
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 4 deletions.
diff --git a/src/components/Avatar/index.jsx b/src/components/Avatar/index.jsx
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import classnames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import './styles.scss';
@@ -7,7 +8,11 @@ const baseClass = 'avatar-component';
 const Avatar = ({ color, givenName, tooltip, image, surname }) => (
   <div
     data-testid="avatar-wrapper"
-    className={color ? `${baseClass} ${baseClass}-${color}` : baseClass}
+    className={classnames([
+      baseClass,
+      { [`${baseClass}-${color}`]: color && !image },
+      { [`${baseClass}-image-placeholder`]: image },
+    ])}
     title={tooltip !== undefined ? tooltip : `${givenName || ''} ${surname || ''}`}
   >
     {image ? <img data-testid="avatar-image" className={`${baseClass}-image`} src={image} alt="presentation" /> : null}

diff --git a/src/components/Avatar/styles.scss b/src/components/Avatar/styles.scss
@@ -21,9 +21,14 @@ $diameter: 35px;
   vertical-align: middle;
   width: $diameter;
 
+  &-image-placeholder {
+    background-color: transparent;
+  }
+
   &-image {
     border-radius: $border-radius-circle;
     height: 100%;
+    width: 100%;
     left: 0;
     position: absolute;
     top: 0;

diff --git a/src/components/PageTitle/index.jsx b/src/components/PageTitle/index.jsx
@@ -10,7 +10,7 @@ const baseClass = 'pagetitle-component';
 const PageTitle = ({ children, isFooter, title }) => {
   const className = classnames(baseClass, { [`${baseClass}-is-footer`]: isFooter });
   return (
-    <div data-testid="page-title-wrapper" className={className} id={_.kebabCase(title)}>
+    <div data-testid="page-title-wrapper" className={className} id={_.isString(title) ? _.kebabCase(title) : 'title'}>
       {children ? (
         <span data-testid="page-title-inline" className="flexible-wrapper-inline">
           {title}

diff --git a/www/assets/user-avatar.jpeg b/www/assets/user-avatar.jpeg
diff --git a/www/examples/UserListPicker.mdx b/www/examples/UserListPicker.mdx
@@ -4,10 +4,10 @@ import DesignNotes from '../containers/DesignNotes.jsx';
 ## User List Picker
 
 ```jsx live=true
-const avatarColor = () => 'cyan';
+const avatarColor = user => (user.avatar ? '' : 'cyan');
 const emptySvgSymbol = <SvgSymbol href="./assets/svg-symbols.svg#checklist-incomplete" />;
 const teamMember1 = {
-  avatar: '//lorempixel.com/35/35/people/7',
+  avatar: '../assets/user-avatar.jpeg',
   givenName: 'John',
   id: 1,
   surname: 'Smith',