style(vwc-accordion): extract divider from expansion panel (#937)

* style(vwc-accordion): extract divider from expansion panel * removed unused wrapper * group story * snapshot changed tree structure
Vonage · Jul 6, 2021 · 911bf45 · 911bf45
1 parent 418a2db
commit 911bf45
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 37 deletions.
diff --git a/__snapshots__/expansion panel.md b/__snapshots__/expansion panel.md
@@ -3,34 +3,32 @@
 #### `should have internal contents`
 
 ```html
-<div class="expansion-panel">
- <div class="expansion-panel-header">
- <mwc-ripple>
- </mwc-ripple>
- <span class="leading-icon">
- <slot name="icon">
- </slot>
- </span>
- click me
- <span class="trailing-icon">
- <slot name="trailingIcon">
- <vwc-icon
- class="toggle-open"
- type="chevron-down-solid"
- >
- </vwc-icon>
- <vwc-icon
- class="toggle-close"
- type="chevron-up-solid"
- >
- </vwc-icon>
- </slot>
- </span>
- </div>
- <div class="expansion-panel-body">
- <slot>
+<div class="expansion-panel-header">
+ <mwc-ripple>
+ </mwc-ripple>
+ <span class="leading-icon">
+ <slot name="icon">
  </slot>
- </div>
+ </span>
+ click me
+ <span class="trailing-icon">
+ <slot name="trailingIcon">
+ <vwc-icon
+ class="toggle-open"
+ type="chevron-down-solid"
+ >
+ </vwc-icon>
+ <vwc-icon
+ class="toggle-close"
+ type="chevron-up-solid"
+ >
+ </vwc-icon>
+ </slot>
+ </span>
+</div>
+<div class="expansion-panel-body">
+ <slot>
+ </slot>
 </div>
 
 ```

diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -33,7 +33,8 @@
  "tslib": "^2.3.0"
  },
  "devDependencies": {
+ "@vonage/vvd-design-tokens": "2.13.0",
  "@vonage/vvd-umbrella": "2.13.0",
  "typescript": "^4.3.2"
  }
-}
+}
diff --git a/components/accordion/src/vwc-accordion.scss b/components/accordion/src/vwc-accordion.scss
@@ -1,4 +1,10 @@
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+
 :host {
  display: flex;
  flex-direction: column;
 }
+
+::slotted(vwc-expansion-panel:not(:only-of-type)) {
+ border-bottom: 1px solid var(#{scheme-variables.$vvd-color-neutral-30});
+}
diff --git a/components/expansion-panel/src/vwc-expansion-panel.scss b/components/expansion-panel/src/vwc-expansion-panel.scss
@@ -26,10 +26,6 @@
  }
 }
 
-.expansion-panel {
- border-bottom: 1px solid var(#{scheme-variables.$vvd-color-neutral-30});
-}
-
 .expansion-panel-header {
  @include typography.typography-cat-shorthand('subtitle-2');
  position: relative;

diff --git a/components/expansion-panel/src/vwc-expansion-panel.ts b/components/expansion-panel/src/vwc-expansion-panel.ts
@@ -71,7 +71,7 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
  }
 
  protected render(): TemplateResult {
- return html`<div class="expansion-panel">
+ return html`
  <div class="expansion-panel-header"
  @mousedown="${this.handleRippleActivate}"
  @mouseenter="${this.handleRippleMouseEnter}"
@@ -95,8 +95,7 @@ export class VWCExpansionPanel extends VWCExpansionPanelBase {
  </div>
  <div class="expansion-panel-body">
  <slot></slot>
- </div>
- </div>`;
+ </div>`;
  }
 
  protected renderIconOrToggle(): TemplateResult | string {

diff --git a/components/expansion-panel/stories/expansion-panel.stories.js b/components/expansion-panel/stories/expansion-panel.stories.js
@@ -5,8 +5,8 @@ import { spread } from '@open-wc/lit-helpers';
 import { argTypes } from './arg-types.js';
 
 export default {
- title: 'Alpha/Components/Expansion Panel',
- component: 'vwc-expansion-panel',
+ title: 'Alpha/Components/Accordion/Accordion Item',
+ component: 'vwc-accordion-item',
  argTypes
 };