Feature/detail styles

packages/library/components/detail/src/detail-component.js

@@ -2,9 +2,9 @@ import { MuonElement, css, html, unsafeCSS, ifDefined, classMap } from '@muons/l
 import { DetailMixin } from '@muons/library/mixins/detail-mixin';
 import styles from './styles.css';
 import {
-  DETAIL_TOGGLE_ICON_OPEN,
-  DETAIL_TOGGLE_ICON_CLOSE,
-  DETAIL_TOGGLE_ICON_POSITION
+  DETAIL_TOGGLE_OPEN,
+  DETAIL_TOGGLE_CLOSE,
+  DETAIL_TOGGLE_POSITION
 } from '@muons/library/build/tokens/es6/muon-tokens';
 
 /**
@@ -22,9 +22,9 @@ export class Detail extends DetailMixin(MuonElement) {
 
   constructor() {
     super();
-    this._openIcon = DETAIL_TOGGLE_ICON_OPEN;
-    this._closeIcon = DETAIL_TOGGLE_ICON_CLOSE;
-    this._togglePosition = DETAIL_TOGGLE_ICON_POSITION;
+    this._toggleOpen = DETAIL_TOGGLE_OPEN;
+    this._toggleClose = DETAIL_TOGGLE_CLOSE;
+    this._togglePosition = DETAIL_TOGGLE_POSITION;
   }
 
   static get styles() {
@@ -34,9 +34,7 @@ export class Detail extends DetailMixin(MuonElement) {
   get _iconTemplate() {
     if (ifDefined(this.icon)) {
       return html`
-        <span class="icon">
-          <detail-icon name="${this.icon}"></detail-icon>
-        </span>
+        <detail-icon name="${this.icon}" class="icon"></detail-icon>
       `;
     }
     return undefined;
@@ -45,8 +43,8 @@ export class Detail extends DetailMixin(MuonElement) {
   get standardTemplate() {
     const classes = {
       details: true,
-      'tg-icon-start': this._togglePosition === 'start',
-      'tg-icon-end': this._togglePosition === 'end',
+      'toggle-start': this._togglePosition === 'start',
+      'toggle-end': this._togglePosition === 'end',
       'has-icon': !!this.icon
     };
     return html`
@@ -64,12 +62,10 @@ export class Detail extends DetailMixin(MuonElement) {
   _headingTemplate() {
     const isIconStart = this._togglePosition === 'start';
     return html`
-      <summary class="summary">
-        <span class="heading-wrapper">
-            ${isIconStart ? this.__toggleIconTemplate : this._iconTemplate}
-            <slot name="heading"></slot>
-            ${isIconStart ? this._iconTemplate : this.__toggleIconTemplate}
-        </span>
+      <summary class="heading">
+        ${isIconStart ? this.__toggleTemplate : this._iconTemplate}
+        <slot name="heading"></slot>
+        ${isIconStart ? this._iconTemplate : this.__toggleTemplate}
       </summary>`;
   }
 }

packages/library/components/detail/src/styles.css

@@ -2,32 +2,70 @@
 
 :host {
   display: block;
-  width: 20rem;
 
-  & .toggle-icon {
-    margin: 1rem 0.5rem;
-    width: 0.75rem;
-    height: 0.75rem;
+  & .toggle-start {
+    & .icon {
+      margin-inline-start: auto; /* this aligns the icon to the opposite end */
+    }
   }
 
-  & .summary {
-    display: block;
+  & .toggle-end {
+    & .toggle {
+      margin-inline-start: auto; /* this aligns the toggle to the opposite end */
+    }
   }
 
-  & .heading-wrapper {
+  & .heading {
     display: flex;
-    flex-direction: row;
-    font-size: 0.75rem;
+    align-items: center;
+    text-align: start;
+    column-gap: 1rem;
+    padding-block-start: 0.5rem;
+    padding-block-end: 0.5rem;
+    padding-inline-start: 1rem;
+    padding-inline-end: 1rem;
+    background-color: $DETAIL_DEFAULT_BACKGROUND_COLOR;
+    color: $DETAIL_DEFAULT_COLOR;
+    cursor: pointer;
+    font-size: 21px;
 
-    & .icon {
-      margin: 0.75rem 0.5rem;
-      width: 0.75rem;
-      height: 0.75rem;
+    & .icon,
+    & .toggle {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &:hover {
+      background-color: $DETAIL_HOVER_BACKGROUND_COLOR;
+      color: $DETAIL_HOVER_COLOR;
+      text-decoration: underline;
+    }
+
+    & :focus:not(:focus-visible) {
+      outline: none; /* https://matthiasott.com/notes/focus-visible-is-here and https://www.tpgi.com/focus-visible-and-backwards-compatibility/ */
+    }
+
+    &:focus-visible {
+      background-color: $DETAIL_FOCUS_BACKGROUND_COLOR;
+      color: $DETAIL_FOCUS_COLOR;
+      outline-color: $DETAIL_FOCUS_OUTLINE_COLOR;
+      outline-offset: 0; /* Chrome by default adds a 1px offset on the `<a>` */
+      outline-style: solid;
+      outline-width: 3px;
+      text-decoration: underline;
     }
   }
 
-  & .panel {
-    font-size: 0.75rem;
-    margin-left: 1.5rem;
+  & .content {
+    padding-block-start: 0.5rem;
+    padding-block-end: 0.5rem;
+    padding-inline-start: 1rem;
+    padding-inline-end: 1rem;
+  }
+
+  & .has-icon {
+    & .content {
+      padding-inline-start: 3.5rem;
+    }
   }
 }

packages/library/components/detail/src/token.json

@@ -1,15 +1,50 @@
 {
   "detail": {
-    "toggle-icon": {
+    "toggle": {
       "open": {
-        "value": "angle-double-down"
+        "value": "chevron-circle-down"
       },
       "close": {
-        "value": "angle-double-up"
+        "value": "chevron-circle-up"
       },
       "position": {
         "value": "end"
       }
+    },
+    "default": {
+      "color": {
+        "value": "{ colour.grey.darkest.value }"
+      },
+      "background": {
+        "color": {
+          "value": "{ colour.white.value }"
+        }
+      }
+    },
+    "hover": {
+      "color": {
+        "value": "{ colour.black.value }"
+      },
+      "background": {
+        "color": {
+          "value": "{ colour.white.value }"
+        }
+      }
+    },
+    "focus": {
+      "color": {
+        "value": "{ colour.black.value }"
+      },
+      "background": {
+        "color": {
+          "value": "{ colour.white.value }"
+        }
+      },
+      "outline": {
+        "color": {
+          "value": "{ colour.focus.value }"
+        }
+      }
     }
   }
 }

packages/library/components/detail/story.js

@@ -5,13 +5,11 @@ const details = setup('detail', Detail);
 export default details.defaultValues;
 
 const innerDetail = (args) => `
-<h3 slot="heading">${args.heading}</h3>
-<p>
-  ${args.content}
-</p>
+<div slot="heading">${args.heading}</div>
+${args.content}
 `;
 export const Standard = (args) => details.template(args, innerDetail);
-Standard.args = { heading: 'Can I manage my account online?', content: 'Yes, with an online account you can arrange a service visit, find out whatʼs happening with your appointment, submit a meter reading and book an engineer. Weʼve even got a free smartphone app.' };
+Standard.args = { icon: '', heading: 'Can I manage my account online?', content: 'Yes, with an online account you can arrange a service visit, find out whatʼs happening with your appointment, submit a meter reading and book an engineer. Weʼve even got a free smartphone app.' };
 
 export const WithIcon = (args) => details.template(args, innerDetail);
-WithIcon.args = { icon: 'mobile', heading: 'Can I manage my account online?', content: 'Yes, with an online account you can arrange a service visit, find out whatʼs happening with your appointment, submit a meter reading and book an engineer. Weʼve even got a free smartphone app.' };
+WithIcon.args = { icon: 'dot-circle', heading: 'Can I manage my account online?', content: 'Yes, with an online account you can arrange a service visit, find out whatʼs happening with your appointment, submit a meter reading and book an engineer. Weʼve even got a free smartphone app.' };

packages/library/components/inputter/src/inputter-component.js

@@ -1,9 +1,9 @@
 import { html, MuonElement, classMap, ScopedElementsMixin } from '@muons/library';
 import {
   INPUTTER_TYPE,
-  INPUTTER_DETAIL_TOGGLE_ICON_OPEN,
-  INPUTTER_DETAIL_TOGGLE_ICON_CLOSE,
-  INPUTTER_DETAIL_TOGGLE_ICON_POSITION
+  INPUTTER_DETAIL_TOGGLE_OPEN,
+  INPUTTER_DETAIL_TOGGLE_CLOSE,
+  INPUTTER_DETAIL_TOGGLE_POSITION
 } from '@muons/library/build/tokens/es6/muon-tokens';
 import { ValidationMixin } from '@muons/library/mixins/validation-mixin';
 import { DetailMixin } from '@muons/library/mixins/detail-mixin';
@@ -111,8 +111,8 @@ class InputterDetail extends DetailMixin(MuonElement) {
 
   constructor() {
     super();
-    this._openIcon = INPUTTER_DETAIL_TOGGLE_ICON_OPEN;
-    this._closeIcon = INPUTTER_DETAIL_TOGGLE_ICON_CLOSE;
-    this._togglePosition = INPUTTER_DETAIL_TOGGLE_ICON_POSITION;
+    this._toggleOpen = INPUTTER_DETAIL_TOGGLE_OPEN;
+    this._toggleClose = INPUTTER_DETAIL_TOGGLE_CLOSE;
+    this._togglePosition = INPUTTER_DETAIL_TOGGLE_POSITION;
   }
 }

packages/library/components/inputter/src/token.json

@@ -4,7 +4,7 @@
       "value": "standard"
     },
     "detail": {
-      "toggle-icon":{
+      "toggle":{
         "open": {
           "value": "chevron-down"
         },
@@ -17,4 +17,4 @@
       }
     }
   }
-}
+}

packages/library/mixins/detail-mixin.js

@@ -16,12 +16,12 @@ export const DetailMixin = (superClass) =>
           reflect: true
         },
 
-        _openIcon: {
+        _toggleOpen: {
           type: String,
           state: true
         },
 
-        _closeIcon: {
+        _toggleClose: {
           type: String,
           state: true
         },
@@ -63,36 +63,35 @@ export const DetailMixin = (superClass) =>
     get standardTemplate() {
       const classes = {
         details: true,
-        'tg-icon-start': this._togglePosition === 'start',
-        'tg-icon-end': this._togglePosition === 'end'
+        'toggle-start': this._togglePosition === 'start',
+        'toggle-end': this._togglePosition === 'end'
       };
       return html`
         <details class=${classMap(classes)} ?open="${this.open}" @toggle="${this._onToggle}">
-        ${this._headingTemplate()}
-        ${this._contentTemplate()}
+          ${this._headingTemplate()}
+          ${this._contentTemplate()}
         </details>
       `;
     }
 
-    get __toggleIconTemplate() {
-      const toggleIcon = this.open ? this._closeIcon : this._openIcon;
-      return html`<detail-icon name='${toggleIcon}' class="toggle-icon"></detail-icon>`;
+    get __toggleTemplate() {
+      const toggle = this.open ? this._toggleClose : this._toggleOpen;
+      return html`<detail-icon name='${toggle}' class="toggle"></detail-icon>`;
     }
 
     /**
      * A method to render the heading part.
      * @returns {RenderTemplate} - rendering template
      */
     _headingTemplate() {
-      const isIconStart = this._togglePosition === 'start';
+      const isToggleStart = this._togglePosition === 'start';
       return html`
-        <summary class="summary">
-          <span class="heading-wrapper">
-              ${isIconStart ? this.__toggleIconTemplate : undefined}
-              <slot name="heading"></slot>
-              ${isIconStart ? undefined : this.__toggleIconTemplate}
-          </span>
-        </summary>`;
+        <summary class="heading">
+          ${isToggleStart ? this.__toggleTemplate : undefined}
+          <slot name="heading"></slot>
+          ${isToggleStart ? undefined : this.__toggleTemplate}
+        </summary>
+      `;
     }
 
     /**
@@ -101,8 +100,9 @@ export const DetailMixin = (superClass) =>
      */
     _contentTemplate() {
       return html`
-        <div class="panel">
-          <slot></slot>
-        </div>`;
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
     }
   };