Merge pull request #20 from sebgroup/develop

Redesigned the accordion
seb-oss · May 21, 2019 · 98df084 · 98df084
2 parents 8b48538 + 6399049
commit 98df084
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 24 deletions.
diff --git a/develop/components/pages/AccordionPage.tsx b/develop/components/pages/AccordionPage.tsx
@@ -11,6 +11,7 @@ export default class AccordionPage extends React.Component<any, any>  {
             accordionList: [
                 {
                     category: "Accordion List Item 1",
+                    subHeaderText: "Accordion Sub Header",
                     text: {
                         title: "Tempor incididun",
                         desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +

diff --git a/src/Accordion/Accordion.tsx b/src/Accordion/Accordion.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import "./accordion-style.scss";
 
-const angleRightIcon: JSX.Element = <svg name="angle-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z" /></svg>;
+const chevronUpIcon: JSX.Element = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4.465 366.475l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L224 178.053l195.494 195.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.051c-4.686-4.686-12.284-4.686-16.971 0L4.465 349.505c-4.687 4.686-4.687 12.284 0 16.97z"/></svg>;
 
 export interface AccordionText {
     title?: string;
@@ -10,6 +10,7 @@ export interface AccordionText {
 
 export interface AccrodionListItem {
     category: string;
+    subHeaderText?: string;
     text?: AccordionText | Array<AccordionText>;
 }
 
@@ -44,9 +45,10 @@ export class Accordion extends React.Component<AccordionProps, AccordionState> {
             <div className={"custom-accordion" + (this.props.className ? ` ${this.props.className}` : "")}>
                 {this.props.list.map((item: AccrodionListItem, index: number) =>
                     <div className={"accordion-item" + (this.state.active === index ? " active" : "")} key={index}>
-                        <div className="header-wrapper" onClick={() => { this.toggle(index); }}>
-                            {angleRightIcon}
-                            <div className="accordion-category">{item.category}</div>
+                        <div className={`header-wrapper${item.subHeaderText ? " with-sub-header" : ""}`} onClick={() => { this.toggle(index); }}>
+                            {chevronUpIcon}
+                            <div className={"accordion-header"}>{item.category}</div>
+                            {item.subHeaderText && <div className="accordion-sub-header">{item.subHeaderText}</div>}
                         </div>
                         <div className="content-wrapper">
                             {!(item.text instanceof Array) &&

diff --git a/src/Accordion/accordion-style.scss b/src/Accordion/accordion-style.scss
@@ -1,16 +1,13 @@
-$green: #60cd18;
-$green-dark: #45B400;
-$green-darker: #379D00;
-$blue: #41B0EE;
 $blue-dark: #0092E1;
-$blue-darker: #007AC7;
 $white: #fff;
-$gray-200: #e9e9e9 !default; // #e9ecef !default;
+$gray-8: #e6e6e6 !default;
+$gray-background: #f5f5f5;
 $transition-time: 300ms;
 $default: 14px;
 $standard: 16px;
 $header-size: 20px;
-$icon-size: 30px;
+$sub-header-size: 14px;
+$icon-size: 20px;
 @mixin transform($props) {
     -webkit-transform: $props;
     -moz-transform: $props;
@@ -35,33 +32,47 @@ $icon-size: 30px;
 
 .custom-accordion {
     position: relative;
+    background-color: $white;
     .accordion-item {
         position: relative;
-        border-bottom: 1px solid $gray-200;
-        border-left: 3px solid $white;
-        padding: 5px 0;
-        min-height: 50px;
+        border-bottom: 1px solid $gray-8;
+        &:hover {
+            background-color: $gray-background;
+        }    
         &:first-child {
-            border-top: 1px solid $gray-200;
+            border-top: 1px solid $gray-8;
         }
         .header-wrapper {
             position: relative;
             display: block;
             padding: 5px 10px 5px 35px;
             cursor: pointer;
+            min-height: 48px;
+
+            &.with-sub-header {
+                min-height: 64px;
+            }
             >svg {
                 position: absolute;
-                width: 30px;
-                height: 30px;
-                left: 0px;
+                width: $icon-size;
+                height: $icon-size;
+                left: 7px;
                 fill: $blue-dark;
                 will-change: transform;
                 @include transition($transition-time);
+                top: 14px;
             }
-            .accordion-category {
-                display: inline-block;
+            .accordion-header {
+                display: block;
                 font-size: $header-size;
                 font-weight: 500;
+                padding-top: 5px;
+                @include user-select(none);
+                line-height: 28px;
+            }
+            .accordion-sub-header {
+                display: block;
+                font-size: $sub-header-size;
                 @include user-select(none);
             }
         }
@@ -91,10 +102,9 @@ $icon-size: 30px;
             }
         }
         &.active {
-            border-left: 3px solid $green;
             .header-wrapper {
                 >svg {
-                    @include transform(rotate(90deg));
+                    @include transform(rotate(180deg));
                 }
             }
             .content-wrapper {

diff --git a/src/Accordion/readme.md b/src/Accordion/readme.md
@@ -15,7 +15,7 @@ Type: Form Component
 ```
 
 ## Element information 
-This React component is based on SEB Bootstrap style. Supports customization and configurations. The module name of this component is `Accordion` and the selector is `<Accordion/>`.
+This React component is based on SEB Bootstrap style. Supports customization and configurations. Use this component mainly for text content. The module name of this component is `Accordion` and the selector is `<Accordion/>`.
 
 ## Basic use
 ```html
@@ -37,6 +37,7 @@ These are the current available properties:
 ```typescript
 interface AccordionListItem {
       category: string;
+      subHeaderText?: string;
       text?: AccordionText | Array<AccordionText>;
 }
 ```