Skip to content

Commit

Permalink
feat(vivid templates): add login template (#1057)
Browse files Browse the repository at this point in the history 
* feat(vwc-side-drawer): 1st draft

* story added

* story added

* semi-transparent content model

* alternate scheme

* alternate

* devider check

* working example

* this will break

* this will not break

* slot="navigation"

* margin list

* side drawer bigger inline size

* side drawer position

* appContent inlined

* documentation, header, image

* vvd-umbrella under devDependencies

* @prop

* readme

* Update package.json

* Update package.json

* Update package.json

* Update package.json

* Update package.json

* add border and shadow to side drawer

* activated

* style

* Extension panel should not be activated

* wider side drawer

* slots documentation

* restore yarn.lock

* refer correct tokens

* refactor

* declartiveness

* correct module import

* ESlint

* refactor names

* update readme

* login template

* forgot password

* margin text

* lint

* remove css

* vwc-inline.sign-in-helper align-items

* 24 px gap

* add css properties to side drawer

* split stories

* default vars

* figure

* section

* section

* css vars

* css vars

* background color

* background-color

* default vars

* change cssprop default description

* use vwc-inline

* add grid-template-rows support

* remove inline-template from grid-template-rows

* InlineTemplate

* add tests

* add ui test

* lint

* firefox test fix

* firefox fix

* ui test

* ui test

* remove unnecessary

* remove unnecessary

* Add size = Block

* ui test

* login

* login

* login

* min-inline-size

* remove unnecessary

* add spacing sizes

* define props

* lit specifics

* renaming

* columnBasis

* attribute fix

* Update common/foundation/src/constants.ts

Co-authored-by: yinon <[email protected]>

* fix ui test

* add x_small size

* .

* add margin

* add layout class

* inline

* ui test

* test

* irrelevant

* Update components/inline/src/vwc-inline.scss

Co-authored-by: yinon <[email protected]>

* Update components/inline/src/vwc-inline.ts

Co-authored-by: yinon <[email protected]>

* InlineGutters

* fix tests

* add block story

* test fix

* remove duplications

* column-basis

* fix test

* fix test

* test fix

* usage-examples

* without inline-gutters

* inline-gutters=""

* add inline-gutters

* change test

* change name from template to auto-sizing

* size

* common var

* parent select layout

* fix test

* remove host

* gutters

* refactor vwc-inline

* Update components/layout/stories/inline-basic.stories.js

* test

* test

* ui test

* refactor

* test(textfield): enforce disable test unstable

* 1st test too

* ui test

* refactor

* side-drawer-inline-size

* gutters

* gutters

* redundant custom properties

* can't break out auto-sizing variable

* package name

* restore style

* refactor

* refactor

* add layout

* lit

Co-authored-by: yinonov <[email protected]>
Co-authored-by: tveinfeld <[email protected]>
Co-authored-by: Yonatan Kra <[email protected]>
  • Loading branch information
@rinaok @yinonov
@tveinfeld @YonatanKra
4 people authored Oct 11, 2021
1 parent 47dc919 commit ccaebb9
Show file tree
Hide file tree
Showing 10 changed files with 427 additions and 77 deletions.
2 changes: 1 addition & 1 deletion components/badge/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@
### Features

* **connotation:** adding support for warning connotation ([#488](https://github.com/vonage/vivid/issues/488)) ([245a9b9](https://github.com/vonage/vivid/commit/245a9b9c095b2af4f3d9a088d0c6219370199c2d))
* **vwc-inline:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))
* **vwc-layout:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))



Expand Down
218 changes: 217 additions & 1 deletion components/layout/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,220 @@
## [2.20.1](https://github.com/vonage/vivid/compare/v2.20.0...v2.20.1) (2021-10-07)
# [2.20.0](https://github.com/vonage/vivid/compare/v2.19.0...v2.20.0) (2021-10-07)


### Features

* **vwc-inline:** add more inline size options ([#1053](https://github.com/vonage/vivid/issues/1053)) ([1b8020d](https://github.com/vonage/vivid/commit/1b8020d4a0137801444bc5182d12949d902def86))



# [2.19.0](https://github.com/vonage/vivid/compare/v2.18.1...v2.19.0) (2021-10-04)



## [2.18.1](https://github.com/vonage/vivid/compare/v2.18.0...v2.18.1) (2021-08-25)



# [2.18.0](https://github.com/vonage/vivid/compare/v2.17.0...v2.18.0) (2021-08-24)



# [2.17.0](https://github.com/vonage/vivid/compare/v2.16.1...v2.17.0) (2021-08-09)



## [2.16.1](https://github.com/vonage/vivid/compare/v2.16.0...v2.16.1) (2021-07-29)



# [2.16.0](https://github.com/vonage/vivid/compare/v2.15.0...v2.16.0) (2021-07-28)



# [2.15.0](https://github.com/vonage/vivid/compare/v2.14.0...v2.15.0) (2021-07-20)



# [2.14.0](https://github.com/vonage/vivid/compare/v2.13.0...v2.14.0) (2021-07-13)



# [2.13.0](https://github.com/vonage/vivid/compare/v2.12.0...v2.13.0) (2021-07-04)



# [2.12.0](https://github.com/vonage/vivid/compare/v2.11.0...v2.12.0) (2021-06-14)



# [2.11.0](https://github.com/vonage/vivid/compare/v2.10.0...v2.11.0) (2021-06-07)



# [2.10.0](https://github.com/vonage/vivid/compare/v2.9.1...v2.10.0) (2021-06-04)



## [2.9.1](https://github.com/vonage/vivid/compare/v2.9.0...v2.9.1) (2021-05-27)



# [2.9.0](https://github.com/vonage/vivid/compare/v2.8.0...v2.9.0) (2021-05-24)



# [2.8.0](https://github.com/vonage/vivid/compare/v2.7.0...v2.8.0) (2021-05-20)



# [2.7.0](https://github.com/vonage/vivid/compare/v2.6.2...v2.7.0) (2021-05-17)



## [2.6.2](https://github.com/vonage/vivid/compare/v2.6.1...v2.6.2) (2021-05-05)



## [2.6.1](https://github.com/vonage/vivid/compare/v2.6.0...v2.6.1) (2021-05-04)



# [2.6.0](https://github.com/vonage/vivid/compare/v2.5.0...v2.6.0) (2021-05-03)



# [2.5.0](https://github.com/vonage/vivid/compare/v2.4.1...v2.5.0) (2021-04-22)



## [2.4.1](https://github.com/vonage/vivid/compare/v2.4.0...v2.4.1) (2021-04-21)



# [2.4.0](https://github.com/vonage/vivid/compare/v2.3.0...v2.4.0) (2021-04-19)



# [2.3.0](https://github.com/vonage/vivid/compare/v2.2.4...v2.3.0) (2021-04-08)


### Features

* **vwc-layout:** add support for auto-fill/fit variance ([#746](https://github.com/vonage/vivid/issues/746)) ([17732b3](https://github.com/vonage/vivid/commit/17732b372d14cbba7708e3cf9332e1899850d3cd))



## [2.2.4](https://github.com/vonage/vivid/compare/v2.2.3...v2.2.4) (2021-04-05)



## [2.2.3](https://github.com/vonage/vivid/compare/v2.2.2...v2.2.3) (2021-03-30)



## [2.2.2](https://github.com/vonage/vivid/compare/v2.2.1...v2.2.2) (2021-03-19)



## [2.2.1](https://github.com/vonage/vivid/compare/v2.2.0...v2.2.1) (2021-03-18)



# [2.2.0](https://github.com/vonage/vivid/compare/v2.1.0...v2.2.0) (2021-03-17)



# [2.1.0](https://github.com/vonage/vivid/compare/v2.0.4...v2.1.0) (2021-03-16)



## [2.0.4](https://github.com/vonage/vivid/compare/v2.0.3...v2.0.4) (2021-03-03)



## [2.0.3](https://github.com/vonage/vivid/compare/v2.0.2...v2.0.3) (2021-02-28)



## [2.0.2](https://github.com/vonage/vivid/compare/v2.0.1...v2.0.2) (2021-02-24)



## [2.0.1](https://github.com/vonage/vivid/compare/v2.0.0...v2.0.1) (2021-02-23)



# [2.0.0](https://github.com/vonage/vivid/compare/v1.3.1...v2.0.0) (2021-02-22)



## [1.3.1](https://github.com/vonage/vivid/compare/v1.3.0...v1.3.1) (2021-02-11)



# [1.3.0](https://github.com/vonage/vivid/compare/v1.2.0...v1.3.0) (2021-02-11)



# [1.2.0](https://github.com/vonage/vivid/compare/v1.1.3...v1.2.0) (2021-02-03)



## [1.1.3](https://github.com/vonage/vivid/compare/v1.1.2...v1.1.3) (2021-01-27)



## [1.1.2](https://github.com/vonage/vivid/compare/v1.1.1...v1.1.2) (2021-01-27)



## [1.1.1](https://github.com/vonage/vivid/compare/v1.1.0...v1.1.1) (2021-01-25)



# [1.1.0](https://github.com/vonage/vivid/compare/v1.0.4...v1.1.0) (2021-01-25)



## [1.0.4](https://github.com/vonage/vivid/compare/v1.0.3...v1.0.4) (2021-01-19)



## [1.0.2](https://github.com/vonage/vivid/compare/v1.0.1...v1.0.2) (2021-01-15)



## [1.0.1](https://github.com/vonage/vivid/compare/v1.0.0...v1.0.1) (2021-01-15)



# [1.0.0](https://github.com/vonage/vivid/compare/v0.19.1...v1.0.0) (2021-01-13)



## [0.19.1](https://github.com/vonage/vivid/compare/v0.19.0...v0.19.1) (2021-01-10)



# [0.19.0](https://github.com/vonage/vivid/compare/v0.17.2...v0.19.0) (2021-01-07)



## [0.17.2](https://github.com/vonage/vivid/compare/v0.17.1...v0.17.2) (2020-12-17)


### Bug Fixes

* **inline:** patched typescript warning ([6a96d02](https://github.com/vonage/vivid/commit/6a96d02c4c0181e955ba4450b1c278dbb556909d))



## [0.17.1](https://github.com/vonage/vivid/compare/v0.17.0...v0.17.1) (2020-12-15)


### Features

* **vwc-layout:** new component to handle inline layouts ([9b03d6b](https://github.com/vonage/vivid/commit/9b03d6b3171c891985a10c77edfc2f78b78be68d))



4 changes: 2 additions & 2 deletions components/layout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"scripts": {
"test": "echo \"Error: run tests from root\" && exit 1",
"build:typescript": "tsc -b",
"build:styles": "umbrella-style-modules",
"build:styles": "umbrella-style-modules --path=\"./src\"",
"build": "yarn run build:styles && yarn run build:typescript"
},
"bugs": {
Expand All @@ -36,4 +36,4 @@
"@vonage/vvd-umbrella": "2.20.1",
"typescript": "^4.3.2"
}
}
}
15 changes: 15 additions & 0 deletions components/layout/src/partials/_vwc-layout-functions.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
@function get-default-selector($list, $prefix) {
$selector: '';
@each $item in $list {
$selector: $selector + ':not(#{$prefix}-#{$item})';
}
@return $selector;
}

@function get-selector-with-default($prefix, $key, $default-key, $all-keys) {
$selector: '&#{$prefix}-#{$key}';
@if $key == $default-key {
$selector: '&#{get-default-selector($all-keys, $prefix)}', $selector;
}
@return $selector;
}
5 changes: 5 additions & 0 deletions components/layout/src/partials/_vwc-layout-mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@mixin measurement($types...) {
@each $type in $types {
@content($type);
}
}
22 changes: 22 additions & 0 deletions components/layout/src/partials/_vwc-layout-variables.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
$layout-auto-sizing: --layout-auto-sizing;

/* #region SIZEs */
$auto-sizes: (
fill: auto-fill,
fit: auto-fit,
);

/* #region BASES */
$bases: (
sm: 10rem,
md: 20rem,
lg: 30rem,
block: 1fr
);

/* #region SPACES */
$spaces: (
xs: 16px,
md: 24px,
xl: 32px,
);
71 changes: 25 additions & 46 deletions components/layout/src/vwc-layout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,37 @@
@use 'sass:map';

$items-min-inline-size-v-name: --items-min-inline-size;
$items-spacing-v-name: --items-spacing;
$gutters-v-name: --gutters;
$auto-sizing: --auto-sizing;

/* #region SIZE */
$items-min-inline-sizes: (
sm: 10rem,
md: 20rem,
lg: 30rem,
);

/* #region SPACEING */
$items-spacings: (
xs: 16px,
md: 24px,
xl: 32px,
);

@each $key, $value in $items-min-inline-sizes {
.layout-column-basis-#{$key} {
#{$items-min-inline-size-v-name}: $value;
}
}

@each $key, $value in $items-spacings {
.layout-column-spacing-#{$key} {
#{$items-spacing-v-name}: $value;
}
.layout-gutters-#{$key} {
#{$gutters-v-name}: $value;
}
}
@use 'partials/vwc-layout-variables' as variables;
@use 'partials/vwc-layout-mixins' as mixins;
@use 'partials/vwc-layout-functions' as functions;

.layout {
display: grid;
margin: var(#{$gutters-v-name}, 0);
gap: var(#{$items-spacing-v-name}, #{map.get($items-spacings, md)});
grid-auto-rows: min-content;
grid-template-columns: repeat(
var(#{$auto-sizing}),
minmax(var(#{$items-min-inline-size-v-name}, #{map.get($items-min-inline-sizes, lg)}), 1fr)
);

&:not(.layout-auto-sizing-fill),
&.layout-auto-sizing-fit {
#{$auto-sizing}: auto-fit;
@include mixins.measurement(map.keys(variables.$bases)...) using ($basis) {
#{functions.get-selector-with-default(".layout-column-basis", $basis, md, map.keys(variables.$bases))} {
grid-template-columns: repeat(
var(#{variables.$layout-auto-sizing}),
minmax(map.get(variables.$bases, $basis), 1fr)
);
}
}
&.layout-auto-sizing-fill {
#{$auto-sizing}: auto-fill;

@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
#{functions.get-selector-with-default(".layout-column-spacing", $space, md, map.keys(variables.$spaces))} {
gap: map.get(variables.$spaces, $space);
}
}

@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {
&.layout-gutters-#{$space} {
margin: map.get(variables.$spaces, $space);
}
}

&.layout-column-basis-block {
grid-template-columns: 1fr;
@include mixins.measurement(map.keys(variables.$auto-sizes)...) using ($size) {
#{functions.get-selector-with-default(".layout-auto-sizing", $size, fit, map.keys(variables.$auto-sizes))} {
#{variables.$layout-auto-sizing}: map.get(variables.$auto-sizes, $size);
}
}
}
0 ...ts/layout/stories/inline-basic.stories.js → ...ts/layout/stories/layout-basic.stories.js
View file
File renamed without changes.
Loading

0 comments on commit ccaebb9

Please sign in to comment.