fix(elevation): new elevation dp (#1177)

* fix(elevation): new elevation dp & implementations

* revert the accordion change

* replaced display with width

* default border radius

common/design-tokens/package.json

@@ -25,7 +25,7 @@
 		"url": "https://github.com/Vonage/vivid/issues"
 	},
 	"devDependencies": {
-		"@vonage/vvd-design-tokens-properties": "0.8.4",
+		"@vonage/vvd-design-tokens-properties": "0.9.0",
 		"lodash": "^4.17.21",
 		"ramda": "^0.27.1",
 		"style-dictionary": "^3.0.1"

components/elevation/readme.md

@@ -20,16 +20,16 @@ Note that this component is responsible for the perceived elevation alone and no
 
 ### Properties/Attributes
 
-|name|attr/prop/reflected|type|description|
-|--- |--- |--- |--- |
-|dp|property/attribute|string|Level in Density-Independent Pixels (DP). Possible values: `2`,`4`,`8`,`12`,`16`,`24`|
+|name|attr/prop/reflected|type| description                                                                               |
+|--- |--- |--- |-------------------------------------------------------------------------------------------|
+|dp|property/attribute|string| Level in Density-Independent Pixels (DP). Possible values: `0`,`2`,`4`,`8`,`12`,`16`,`24` |
 
 ### CSS Variables
 
-|name|description|
-|--- |--- |
-|`--vvd-elevation-background-color`|Color for the elevation surface background (defaults to theme’s surface background)|
-|`--vvd-elevation-border-radius`|Border radius of the elevation’s surface in pixels|
+|name|description|default|
+|--- |--- |--- |
+|`--vvd-elevation-background-color`|Color for the elevation surface background | defaults to theme’s surface background |
+|`--vvd-elevation-border-radius`|Border radius of the elevation’s surface in pixels| 6px |
 
 # Example:
 

components/elevation/src/vwc-elevation.scss

@@ -1,6 +1,6 @@
 @use 'sass:list';
 
-$dps: 2 4 8 12 16 24;
+$dps: 0 2 4 8 12 16 24;
 $vvd-elevation-background-color: --vvd-elevation-background-color;
 $vvd-elevation-border-radius: --vvd-elevation-border-radius;
 
@@ -26,5 +26,7 @@ $vvd-elevation-border-radius: --vvd-elevation-border-radius;
 }
 
 .vwc-elevation {
-	border-radius: var(#{$vvd-elevation-border-radius}, 0);
+	width: fit-content;
+	border-radius: var(#{$vvd-elevation-border-radius}, 6px);
+	contain: content;
 }

components/elevation/stories/arg-types.js

@@ -1,15 +1,6 @@
 export const argTypes = {
-	connotation: {
-		control: {
-			type: 'select',
-			options: ['primary', 'cta', 'success', 'error', 'info', 'announcement'],
-		}
-	},
-	disabled: {
-		control: {
-			type: 'inline-radio',
-			options: { 'true': '', 'false': undefined }
-		}
-	},
-	styles: { table: { disable: true } },
+	dp : {
+		type: 'select',
+		options: ['0', '2', '4', '8', '12', '16', '24'],
+	}
 }

components/elevation/stories/elevation.stories.js

@@ -9,40 +9,45 @@ export default {
 	argTypes
 };
 
-const dpLevels = [2, 4, 8, 12, 16, 24];
+const dpLevels = [0, 2, 4, 8, 12, 16, 24];
 const styles = () => html`
 	<style>
+
+		.wrapper {
+			display: grid;
+			grid-template-columns: 1fr;
+			gap: 2rem;
+		}
 		.card {
 			height: 20px;
-			width: 90px;
 			padding: 20px;
 			text-align: center;
-			border: 2px solid black;
-			border-radius: var(--vvd-elevation-border-radius, 0);
-		}
-
-		vwc-elevation {
-			display: inline-block;
+			width: 500px;
 		}
 	</style>
 `;
 const elevations = () => dpLevels.map(dpLevel => html`
 		<vwc-elevation dp="${dpLevel}"><div class="card">DP ${dpLevel}</div></vwc-elevation>
 	`);
 
-const BasicTemplate = args => html`
-	${styles()}
-	${elevations()}
+const AllTemplate = args => html`
+	<div class="wrapper">
+		${styles()}
+		${elevations()}
+	</div>
 `;
 
 const Template = args => html`
 	${styles()}
-	<vwc-elevation ...=${spread(args)}><div class="card"</div></vwc-elevation>
+	<vwc-elevation ...=${spread(args)}><div class="card">elevation</div></vwc-elevation>
 `;
 
-export const Basic = BasicTemplate.bind({});
+export const Basic = Template.bind({});
 Basic.args = { label: 'Basic' };
 
+export const AllElevations = AllTemplate.bind({});
+AllTemplate.args = { label: 'All' };
+
 export const BackgroundColor = Template.bind({});
 BackgroundColor.args = { label: 'Background Color', style: '--vvd-elevation-background-color: lightblue', dp: 8 };
 

ui-tests/tests/vwc-elevation/index.js

@@ -20,9 +20,9 @@ export async function createElementVariations(wrapper) {
 					text-align: center;
 				}
 			</style>
-		  <vwc-elevation style="--vvd-elevation-border-radius: 16px; --vvd-elevation-background-color:lightblue;">
+			<vwc-elevation dp="0">
 		  	<div class="card">
-					This is the content inside the elevation with background and radius
+					This is the content inside the elevation with DP 2
 				</div>
 			</vwc-elevation>
 
@@ -61,6 +61,24 @@ export async function createElementVariations(wrapper) {
 					This is the content inside the elevation with DP 24
 				</div>
 			</vwc-elevation>
+
+			<vwc-elevation style="--vvd-elevation-border-radius: 16px; --vvd-elevation-background-color:lightblue;">
+		  	<div class="card">
+					This is the content inside the elevation with background and radius
+				</div>
+			</vwc-elevation>
+
+			<vwc-elevation>
+		  	<div class="card" style="background-color: lightpink; height: auto;">
+					This is the content inside the elevation with radius and inside element with background color
+				</div>
+			</vwc-elevation>
+
+						<vwc-elevation style="--vvd-elevation-border-radius: 0;">
+		  	<div class="card" style="background-color: lightpink; height: auto;">
+					This is the content inside the elevation with no border-radius
+				</div>
+			</vwc-elevation>
 		`;
 	wrapper.appendChild(elementWrapper);
 }

yarn.lock

@@ -5298,10 +5298,10 @@
     terminal-kit "^2.0.5"
     yargs-parser "^20.2.7"
 
-"@vonage/vvd-design-tokens-properties@0.8.4":
-  version "0.8.4"
-  resolved "https://npm.pkg.github.com/download/@vonage/vvd-design-tokens-properties/0.8.4/456a74896b67dc157ba95ab5b972ac350d471a470dbd1bb3335dbe5e29640482#df363fa18c102a96cac3d37f0915d5e3931b5916"
-  integrity sha512-M3C33ucfMvxrUZhR+McECslMxPFG1GCjRw970XSWRm+FSnngrtsV3G4wr9wlYF0GX/C8eLFkN7xCgT9+f8SVlA==
+"@vonage/vvd-design-tokens-properties@0.9.0":
+  version "0.9.0"
+  resolved "https://npm.pkg.github.com/download/@vonage/vvd-design-tokens-properties/0.9.0/39074fe87290867d16c269c899f45829e741180028c06f098759657d32fc3824#f601a90d475f5f543ee0dcf8d22c852327ef5a44"
+  integrity sha512-VYa1UT1fAEkvP8Uax9YBD2MGQBlZcPAzL3AwhEjllb/rl74OX6dyl+KPG9bPdxIXfUSafuTQpugseFZb5Ef/IA==
 
 "@vue/compiler-core@3.1.5":
   version "3.1.5"