diff --git a/common/design-tokens/package.json b/common/design-tokens/package.json index 0b4a3ecd1..275f0a619 100644 --- a/common/design-tokens/package.json +++ b/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" diff --git a/components/elevation/readme.md b/components/elevation/readme.md index 54e645345..3601cefb0 100644 --- a/components/elevation/readme.md +++ b/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: diff --git a/components/elevation/src/vwc-elevation.scss b/components/elevation/src/vwc-elevation.scss index a9bbdd96d..a2bcdd9dc 100644 --- a/components/elevation/src/vwc-elevation.scss +++ b/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; } diff --git a/components/elevation/stories/arg-types.js b/components/elevation/stories/arg-types.js index c87484ee8..eec8d5a2d 100644 --- a/components/elevation/stories/arg-types.js +++ b/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'], + } } diff --git a/components/elevation/stories/elevation.stories.js b/components/elevation/stories/elevation.stories.js index a84959725..48c9ee0d3 100644 --- a/components/elevation/stories/elevation.stories.js +++ b/components/elevation/stories/elevation.stories.js @@ -9,20 +9,20 @@ export default { argTypes }; -const dpLevels = [2, 4, 8, 12, 16, 24]; +const dpLevels = [0, 2, 4, 8, 12, 16, 24]; const styles = () => html` `; @@ -30,19 +30,24 @@ const elevations = () => dpLevels.map(dpLevel => html`
DP ${dpLevel}
 `); -const BasicTemplate = args => html` - ${styles()} - ${elevations()} +const AllTemplate = args => html` +
+ ${styles()} + ${elevations()} +
`; const Template = args => html` ${styles()} -
+
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 }; diff --git a/ui-tests/snapshots/vwc-elevation.png b/ui-tests/snapshots/vwc-elevation.png index b19b766f1..ef43ad543 100644 Binary files a/ui-tests/snapshots/vwc-elevation.png and b/ui-tests/snapshots/vwc-elevation.png differ diff --git a/ui-tests/tests/vwc-elevation/index.js b/ui-tests/tests/vwc-elevation/index.js index 479787249..bd8562dde 100644 --- a/ui-tests/tests/vwc-elevation/index.js +++ b/ui-tests/tests/vwc-elevation/index.js @@ -20,9 +20,9 @@ export async function createElementVariations(wrapper) { text-align: center; } - +
- This is the content inside the elevation with background and radius + This is the content inside the elevation with DP 2
@@ -61,6 +61,24 @@ export async function createElementVariations(wrapper) { This is the content inside the elevation with DP 24
+ + +
+ This is the content inside the elevation with background and radius +
+ + + +
+ This is the content inside the elevation with radius and inside element with background color +
+ + + +
+ This is the content inside the elevation with no border-radius +
+ `; wrapper.appendChild(elementWrapper); } diff --git a/yarn.lock b/yarn.lock index 2b5717496..22a291dea 100644 --- a/yarn.lock +++ b/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"