kup-accordion : design and token application

smeup · Feb 23, 2024 · a0ce48c · a0ce48c
1 parent b0fcc2d
commit a0ce48c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -146,6 +146,11 @@ export namespace Components {
           * @param props - Object containing props that will be set to the component.
          */
         "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * Sets the type of the button
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing": KupComponentSizing;
         /**
           * This method activates or deactivates an item
           * @param itemName - Name of the item.
@@ -5234,6 +5239,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "ripple"?: boolean;
+        /**
+          * Sets the type of the button
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing"?: KupComponentSizing;
     }
     interface KupAutocomplete {
         /**

diff --git a/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx b/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx
@@ -13,7 +13,11 @@ import {
     Watch,
 } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
-import type { GenericObject, KupComponent } from '../../types/GenericTypes';
+import {
+    GenericObject,
+    KupComponent,
+    KupComponentSizing,
+} from '../../types/GenericTypes';
 import {
     KupManager,
     kupManagerInstance,
@@ -72,7 +76,12 @@ export class KupAccordion {
      * When enabled displays Material's ripple effect on item headers.
      * @default true
      */
-    @Prop() ripple: boolean = true;
+    @Prop() ripple: boolean = false;
+    /**
+     * Sets the type of the button
+     * @default KupComponentSizing.MEDIUM
+     */
+    @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -248,6 +257,7 @@ export class KupAccordion {
                 'accordion-item__header--expanded':
                     isItemExpandible && isItemSelected ? true : false,
                 'mdc-ripple-surface': this.ripple ? true : false,
+                [`accordion-item--${this.sizing}`]: this.sizing ? true : false,
             };
 
             const itemContentClass: GenericObject = {
@@ -260,6 +270,7 @@ export class KupAccordion {
             items.push(
                 <div class="accordion-item">
                     <div
+                        tabindex="1"
                         title={column.title}
                         class={itemHeaderClass}
                         onClick={() => this.toggleItem(itemName)}

diff --git a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss
@@ -96,13 +96,25 @@
       color var(--kup_accordion_transition);
     width: 100%;
     outline: 2px solid transparent;
+    outline-offset: -2px;
     padding-left: 16px;
     padding-right: 16px;
 
+    &:focus {
+      outline: 2px solid var(--kup_accordion_item_outline_color_active);
+    }
+
+    &.accordion-item--small {
+      height: var(--kup_accordion_item_small_height);
+    }
+    &.accordion-item--large {
+      height: var(--kup_accordion_item_large_height);
+    }
+
     &:hover:not(.accordion-item__header--selected) {
       background-color: var(--kup_accordion_header_background_color_hover);
     }
-    &:active:not(.accordion-item__header--selected) {
+    &:focus(.accordion-item__header--selected) {
       outline: 2px solid var(--kup_accordion_item_outline_color_active);
     }
 
@@ -113,10 +125,6 @@
         transform: rotate(-180deg);
       }
     }
-
-    &--selected {
-      outline: 2px solid red;
-    }
   }
 
   &__text {