diff --git a/__snapshots__/expansion panel.md b/__snapshots__/expansion panel.md index 6387bfa82..1a2ffac35 100644 --- a/__snapshots__/expansion panel.md +++ b/__snapshots__/expansion panel.md @@ -3,34 +3,32 @@ #### `should have internal contents` ```html -
-
- - - - - - - click me - - - - - - - - -
-
- +
+ + + + -
+ + click me + + + + + + + + +
+
+ +
``` diff --git a/components/accordion/package.json b/components/accordion/package.json index e1c81526a..e934da34b 100644 --- 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" } -} +} \ No newline at end of file diff --git a/components/accordion/src/vwc-accordion.scss b/components/accordion/src/vwc-accordion.scss index 4b64a6331..3c5b9427f 100644 --- 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 index 4f1f6e3fc..a1c436f55 100644 --- 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 index 856a92396..7bddc590e 100644 --- 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`
+ return html`
-
-
`; +
`; } protected renderIconOrToggle(): TemplateResult | string { diff --git a/components/expansion-panel/stories/expansion-panel.stories.js b/components/expansion-panel/stories/expansion-panel.stories.js index d202982b2..37d923d2d 100644 --- 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 };