Merge pull request #387 from TykTechnologies/TUI-85/new-message-compo…

…nent

TUI-85: rebranding updates to the Message component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

src/common/css/variables.css

@@ -43,6 +43,12 @@
   --color-text-base:#414160;
   --color-text-dark:#03031C;
 
+  --color-icon-neutral-inactive: #656582;
+  --color-text-informative-default: #023056;
+  --color-text-success-default: #0E3129;
+  --color-text-warning-default: #473717;
+  --color-text-critical-default: #3E0E18;
+
   --text-color: var(--color-text-base);
   --label-color: var(--color-text-dark);
 

src/components/Message/Message.css

@@ -1,34 +1,33 @@
 :root {
-  --tyk-message-padding-top: var(--spacing-md);
-  --tyk-message-padding-right: var(--spacing-md);
-  --tyk-message-padding-bottom: var(--spacing-md);
-  --tyk-message-padding-left: var(--spacing-md);
+  --tyk-message-padding-top: 16px;
+  --tyk-message-padding-right: 16px;
+  --tyk-message-padding-bottom: 16px;
+  --tyk-message-padding-left: 16px;
   --tyk-message-border-radius: var(--general-border-radius);
-
-  --tyk-message-secondary-background: var(--color-secondary-light);
-  --tyk-message-secondary-border: var(--color-secondary-dark);
-  --tyk-message-secondary-text-color: var(--color-text-base);
-  --tyk-message-secondary-icon-color: var(--color-secondary-extra-dark1);
 
   --tyk-message-info-background: var(--color-info-extra-light);
   --tyk-message-info-border: var(--color-info-light);
+  --tyk-message-info-title-color: var(--color-text-informative-default);
   --tyk-message-info-text-color: var(--color-text-base);
-  --tyk-message-info-icon-color: var(--color-info-dark);
+  --tyk-message-info-icon-color: var(--color-info-base);
 
   --tyk-message-success-background: var(--color-success-extra-light);
   --tyk-message-success-border: var(--color-success-light);
+  --tyk-message-success-title-color: var(--color-text-success-default);
   --tyk-message-success-text-color: var(--color-text-base);
-  --tyk-message-success-icon-color: var(--color-success-dark);
+  --tyk-message-success-icon-color: var(--color-success-base);
 
   --tyk-message-warning-background: var(--color-warning-extra-light);
   --tyk-message-warning-border: var(--color-warning-light);
+  --tyk-message-warning-title-color: var(--color-text-warning-default);
   --tyk-message-warning-text-color: var(--color-text-base);
-  --tyk-message-warning-icon-color: var(--color-warning-dark);
+  --tyk-message-warning-icon-color: var(--color-warning-base);
 
   --tyk-message-danger-background: var(--color-danger-extra-light);
   --tyk-message-danger-border: var(--color-danger-light);
+  --tyk-message-danger-title-color: var(--color-text-critical-default);
   --tyk-message-danger-text-color: var(--color-text-base);
-  --tyk-message-danger-icon-color: var(--color-danger-dark);
+  --tyk-message-danger-icon-color: var(--color-danger-base);
 }
 
 .tyk-message {
@@ -40,10 +39,12 @@
   padding-inline: var(--tyk-message-padding-left) var(--tyk-message-padding-right);
 
   > .tyk-icon:first-child {
-    font-size: var(--xl-font-size);
+    font-size: var(--md-font-size);
     flex-shrink: 0;
     border-radius: 50%;
     color: white;
+    margin-inline-start: 2px;
+    margin-block-start: 2px;
 
     &::before {
       display: flex;
@@ -56,46 +57,63 @@
 
   > .tyk-icon:last-child {
     cursor: pointer;
+    color: var(--color-icon-neutral-inactive);
   }
 }
 
 .tyk-message__content {
   flex-grow: 1;
-  margin-inline: var(--spacing-md);
-  font-weight: bold;
+  margin-inline: 16px;
+  font-size: var(--xs-font-size);
+
+  .tyk-button {
+    margin-block-start: 8px;
+
+    + .tyk-button {
+      margin-inline-start: 8px;
+    }
+  }
+
+  > *,
+  a {
+    font-size: inherit;
+  }
 }
 
-.tyk-message--secondary {
-  --message-variant-background: var(--tyk-message-secondary-background);
-  --message-variant-border: var(--tyk-message-secondary-border);
-  --message-variant-color: var(--tyk-message-secondary-text-color);
-  --message-variant-icon-color: var(--tyk-message-secondary-icon-color);
+.tyk-message__title {
+  font-size: var(--sm-font-size);
+  font-weight: 600;
+  margin-block-end: 8px;
 }
 
 .tyk-message--info {
   --message-variant-background: var(--tyk-message-info-background);
   --message-variant-border: var(--tyk-message-info-border);
+  --message-variant-title-color: var(--tyk-message-info-title-color);
   --message-variant-color: var(--tyk-message-info-text-color);
   --message-variant-icon-color: var(--tyk-message-info-icon-color);
 }
 
 .tyk-message--success {
   --message-variant-background: var(--tyk-message-success-background);
   --message-variant-border: var(--tyk-message-success-border);
+  --message-variant-title-color: var(--tyk-message-success-title-color);
   --message-variant-color: var(--tyk-message-success-text-color);
   --message-variant-icon-color: var(--tyk-message-success-icon-color);
 }
 
 .tyk-message--warning {
   --message-variant-background: var(--tyk-message-warning-background);
   --message-variant-border: var(--tyk-message-warning-border);
+  --message-variant-title-color: var(--tyk-message-warning-title-color);
   --message-variant-color: var(--tyk-message-warning-text-color);
   --message-variant-icon-color: var(--tyk-message-warning-icon-color);
 }
 
 .tyk-message--danger {
   --message-variant-background: var(--tyk-message-danger-background);
   --message-variant-border: var(--tyk-message-danger-border);
+  --message-variant-title-color: var(--tyk-message-danger-title-color);
   --message-variant-color: var(--tyk-message-danger-text-color);
   --message-variant-icon-color: var(--tyk-message-danger-icon-color);
 }
@@ -112,4 +130,8 @@
   & > .tyk-icon:first-child {
     color: var(--message-variant-icon-color);
   }
+
+  .tyk-message__title {
+    color: var(--message-variant-title-color);
+  }
 }

src/components/Message/Message.test.js

@@ -16,6 +16,7 @@ describe('Message', () => {
   const selectors = {
     message: '.tyk-message',
     closeIcon: '.tyk-icon.fa-xmark',
+    title: '.tyk-message__title',
   };
 
   it('renders the component with the info theme by default', () => {
@@ -31,6 +32,13 @@ describe('Message', () => {
       .should('have.class', successThemeClass);
   });
 
+  it('can be rendered with a title', () => {
+    const title = 'Banner title';
+    cy.mount(<Component theme="success" title={title} />)
+      .get(selectors.title)
+      .should('exist');
+  });
+
   it('can be rendered with no margins', () => {
     cy.mount(<Component noMargin />)
       .get(selectors.message)

src/components/Message/Readme.md

@@ -1,8 +1,66 @@
-*Themes*
+**Themes**
 ```js
-<Message theme="secondary" onClose={() => { console.log('foo') }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
-<Message theme="success">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
-<Message theme="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
-<Message theme="warning" onClose={() => { console.log('bar') }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
-<Message theme="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
+<Message theme="info" title="Banner Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
+<Message theme="success" title="Banner Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
+<Message theme="warning"  title="Banner Title"onClose={() => { console.log('bar') }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
+<Message theme="danger" title="Banner Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum. </Message>
+```
+
+**Variation: Full options**
+```js
+import Button from '../Button';
+
+<Message
+  theme="info"
+  title="Banner Title"
+  onClose={() => console.log('close icon clicked')}
+>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam <a href="#">sollicitudin tempor</a> id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum.
+  </p>
+  <Button theme="secondary-outline" size="sm">Primary Action</Button>
+  <Button theme="secondary-link" size="sm">Secondary link</Button>
+</Message>
+```
+
+**Variation: Title and content and close icon**
+```js
+import Button from '../Button';
+
+<Message
+  theme="info"
+  title="Banner Title"
+  onClose={() => console.log('close icon clicked')}
+>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum.
+  </p>
+</Message>
+```
+
+**Variation: Content and close icon**
+```js
+import Button from '../Button';
+
+<Message
+  theme="info"
+  onClose={() => console.log('close icon clicked')}
+>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum.
+  </p>
+</Message>
+```
+
+**Variation: Content only**
+```js
+import Button from '../Button';
+
+<Message
+  theme="info"
+>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida in fermentum.
+  </p>
+</Message>
 ```

src/components/Message/index.js

@@ -10,30 +10,42 @@ import Icon from '../Icon';
  * consider using `toast` instead
  */
 function Message({
-  children, theme, onClose, noMargin, className,
+  children,
+  title,
+  theme: themeProp,
+  onClose,
+  noMargin,
+  className,
 }) {
+  const themes = ['info', 'success', 'warning', 'danger'];
+  const theme = themes.includes(themeProp) ? themeProp : 'info';
+
   function getCssClasses() {
     return [
       'tyk-message',
-      `tyk-message--${theme || 'info'}`,
+      `tyk-message--${theme}`,
       noMargin && 'no-margin',
       className,
     ].filter(Boolean).join(' ');
   }
 
   const iconType = {
-    'success': 'hexagon-check',
-    'danger': 'hexagon-exclamation',
-    'warning': 'triangle-exclamation',
-    'info': 'circle-exclamation',
-    'secondary': 'circle-exclamation',
+    info: 'circle-exclamation',
+    success: 'hexagon-check',
+    warning: 'triangle-exclamation',
+    danger: 'hexagon-exclamation',
   }[theme];
 
   return (
     <div className={getCssClasses()}>
       <Icon type={iconType} weight="solid" />
       <div className="tyk-message__content">
-        { children }
+        {title && (
+          <div className="tyk-message__title">
+            {title}
+          </div>
+        )}
+        {children}
       </div>
       {onClose && (
         <Icon type="xmark" onClick={onClose} />
@@ -50,6 +62,11 @@ Message.propTypes = {
     PropTypes.node,
     PropTypes.string,
   ]),
+  title: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.node,
+    PropTypes.string,
+  ]),
   /** add a class to loader */
   className: PropTypes.string,
   /** Removes margins by adding `no-margin` class */