@nl-rvo/css-hero 1.5.1 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/index.css +26 -0
  3. package/dist/index.min.css +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/package.json +1 -1
  6. package/src/index.scss +35 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # `@nl-rvo/css-hero`
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - fa36e07: Project structure updates
8
+
9
+ - Moved all Storybook stories to the /stories directory.
10
+ - Moved all documentation files to the /docs directory.
11
+ - Removed React components from library-component-react and moved them into this package.
12
+ - Update all .stories imports to the right react package "component-library-react"
13
+ - Fix all Redundant / PascalCase lint warnings for .stories files.
14
+
15
+ ## 1.6.0
16
+
17
+ ### Minor Changes
18
+
19
+ - a8c9e6f: Added two new parameter; kind and showLine. With this you can change the appearance of the Hero Component. Only kind currently available is 'lichtblauw'
20
+
3
21
  ## 1.5.1
4
22
 
5
23
  ### Patch Changes
package/dist/index.css CHANGED
@@ -6,6 +6,7 @@
6
6
  margin-inline-end: auto;
7
7
  margin-inline-start: auto;
8
8
  min-height: 200px;
9
+ overflow: hidden;
9
10
  position: relative;
10
11
  }
11
12
  .rvo-hero .rvo-hero__content {
@@ -33,6 +34,13 @@
33
34
  font-weight: var(--rvo-hero-subtitle-font-weight);
34
35
  line-height: var(--rvo-hero-subtitle-line-height);
35
36
  }
37
+ .rvo-hero--lichtblauw .rvo-hero__content {
38
+ background-color: var(--rvo-hero-kind-lichtblauw-background-color);
39
+ color: var(--rvo-hero-kind-lichtblauw-color);
40
+ }
41
+ .rvo-hero--lichtblauw .rvo-hero__title, .rvo-hero--lichtblauw .rvo-hero__subtitle {
42
+ color: var(--rvo-hero-kind-lichtblauw-color);
43
+ }
36
44
 
37
45
  .rvo-hero__image-container {
38
46
  line-height: 0;
@@ -55,6 +63,24 @@
55
63
  border-end-end-radius: var(--rvo-hero-border-end-end-radius);
56
64
  }
57
65
  }
66
+ .rvo-hero__image-container--lined::after {
67
+ border-color: var(--rvo-hero-image-line-border-color);
68
+ border-end-start-radius: var(--rvo-hero-image-line-border-radius);
69
+ border-style: var(--rvo-hero-image-line-border-style);
70
+ border-width: var(--rvo-hero-image-line-border-width);
71
+ content: "";
72
+ display: block;
73
+ height: 100%;
74
+ inset-block-start: calc(var(--rvo-hero-image-line-inset) - 25%);
75
+ inset-inline-end: var(--rvo-hero-image-line-inset);
76
+ position: absolute;
77
+ width: 100%;
78
+ }
79
+ @media (min-width: 540px) {
80
+ .rvo-hero__image-container--lined::after {
81
+ inset-block-start: var(--rvo-hero-image-line-inset);
82
+ }
83
+ }
58
84
 
59
85
  .rvo-hero__image {
60
86
  height: 100%;
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;margin-block-end:0;max-width:var(--rvo-hero-box-max-width);padding-block-end:var(--rvo-hero-box-padding-block-end);padding-block-start:var(--rvo-hero-box-padding-block-start);padding-inline-end:var(--rvo-hero-box-padding-inline-end);padding-inline-start:var(--rvo-hero-box-padding-inline-start);position:absolute;z-index:1}.rvo-hero .rvo-hero__content,.rvo-hero .rvo-hero__subtitle,.rvo-hero .rvo-hero__title{color:var(--rvo-hero-title-color)}.rvo-hero .rvo-hero__subtitle{display:block;font-size:var(--rvo-hero-subtitle-font-size);font-style:var(--rvo-hero-subtitle-font-style);font-weight:var(--rvo-hero-subtitle-font-weight);line-height:var(--rvo-hero-subtitle-line-height)}.rvo-hero__image-container{line-height:0;min-height:300px;overflow:hidden;padding-block-end:20%}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}@media (min-width:780px){.rvo-hero__image-container{border-end-end-radius:var(--rvo-hero-border-end-end-radius)}}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}
1
+ .rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;margin-block-end:0;max-width:var(--rvo-hero-box-max-width);padding-block-end:var(--rvo-hero-box-padding-block-end);padding-block-start:var(--rvo-hero-box-padding-block-start);padding-inline-end:var(--rvo-hero-box-padding-inline-end);padding-inline-start:var(--rvo-hero-box-padding-inline-start);position:absolute;z-index:1}.rvo-hero .rvo-hero__content,.rvo-hero .rvo-hero__subtitle,.rvo-hero .rvo-hero__title{color:var(--rvo-hero-title-color)}.rvo-hero .rvo-hero__subtitle{display:block;font-size:var(--rvo-hero-subtitle-font-size);font-style:var(--rvo-hero-subtitle-font-style);font-weight:var(--rvo-hero-subtitle-font-weight);line-height:var(--rvo-hero-subtitle-line-height)}.rvo-hero--lichtblauw .rvo-hero__content{background-color:var(--rvo-hero-kind-lichtblauw-background-color)}.rvo-hero--lichtblauw .rvo-hero__content,.rvo-hero--lichtblauw .rvo-hero__subtitle,.rvo-hero--lichtblauw .rvo-hero__title{color:var(--rvo-hero-kind-lichtblauw-color)}.rvo-hero__image-container{line-height:0;min-height:300px;overflow:hidden;padding-block-end:20%}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}@media (min-width:780px){.rvo-hero__image-container{border-end-end-radius:var(--rvo-hero-border-end-end-radius)}}.rvo-hero__image-container--lined:after{border-color:var(--rvo-hero-image-line-border-color);border-end-start-radius:var(--rvo-hero-image-line-border-radius);border-style:var(--rvo-hero-image-line-border-style);border-width:var(--rvo-hero-image-line-border-width);content:"";display:block;height:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute;width:100%}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;margin-block-end:0;max-width:var(--rvo-hero-box-max-width);padding-block-end:var(--rvo-hero-box-padding-block-end);padding-block-start:var(--rvo-hero-box-padding-block-start);padding-inline-end:var(--rvo-hero-box-padding-inline-end);padding-inline-start:var(--rvo-hero-box-padding-inline-start);position:absolute;z-index:1}.rvo-hero .rvo-hero__content,.rvo-hero .rvo-hero__subtitle,.rvo-hero .rvo-hero__title{color:var(--rvo-hero-title-color)}.rvo-hero .rvo-hero__subtitle{display:block;font-size:var(--rvo-hero-subtitle-font-size);font-style:var(--rvo-hero-subtitle-font-style);font-weight:var(--rvo-hero-subtitle-font-weight);line-height:var(--rvo-hero-subtitle-line-height)}.rvo-hero__image-container{line-height:0;min-height:300px;overflow:hidden;padding-block-end:20%}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}@media (min-width:780px){.rvo-hero__image-container{border-end-end-radius:var(--rvo-hero-border-end-end-radius)}}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}";
1
+ export default ".rvo-hero{margin-inline-end:auto;margin-inline-start:auto;min-height:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);bottom:0;margin-block-end:0;max-width:var(--rvo-hero-box-max-width);padding-block-end:var(--rvo-hero-box-padding-block-end);padding-block-start:var(--rvo-hero-box-padding-block-start);padding-inline-end:var(--rvo-hero-box-padding-inline-end);padding-inline-start:var(--rvo-hero-box-padding-inline-start);position:absolute;z-index:1}.rvo-hero .rvo-hero__content,.rvo-hero .rvo-hero__subtitle,.rvo-hero .rvo-hero__title{color:var(--rvo-hero-title-color)}.rvo-hero .rvo-hero__subtitle{display:block;font-size:var(--rvo-hero-subtitle-font-size);font-style:var(--rvo-hero-subtitle-font-style);font-weight:var(--rvo-hero-subtitle-font-weight);line-height:var(--rvo-hero-subtitle-line-height)}.rvo-hero--lichtblauw .rvo-hero__content{background-color:var(--rvo-hero-kind-lichtblauw-background-color)}.rvo-hero--lichtblauw .rvo-hero__content,.rvo-hero--lichtblauw .rvo-hero__subtitle,.rvo-hero--lichtblauw .rvo-hero__title{color:var(--rvo-hero-kind-lichtblauw-color)}.rvo-hero__image-container{line-height:0;min-height:300px;overflow:hidden;padding-block-end:20%}@media (min-width:540px){.rvo-hero__image-container{max-height:500px;padding-block-end:0}}@media (min-width:780px){.rvo-hero__image-container{border-end-end-radius:var(--rvo-hero-border-end-end-radius)}}.rvo-hero__image-container--lined:after{border-color:var(--rvo-hero-image-line-border-color);border-end-start-radius:var(--rvo-hero-image-line-border-radius);border-style:var(--rvo-hero-image-line-border-style);border-width:var(--rvo-hero-image-line-border-width);content:\"\";display:block;height:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute;width:100%}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{height:100%;object-fit:cover;width:100%}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.5.1",
2
+ "version": "1.7.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-hero",
package/src/index.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  margin-inline-end: auto;
7
7
  margin-inline-start: auto;
8
8
  min-height: 200px;
9
+ overflow: hidden;
9
10
  position: relative;
10
11
 
11
12
  .rvo-hero__content {
@@ -35,6 +36,20 @@
35
36
  font-weight: var(--rvo-hero-subtitle-font-weight);
36
37
  line-height: var(--rvo-hero-subtitle-line-height);
37
38
  }
39
+
40
+ &--lichtblauw {
41
+ .rvo-hero {
42
+ &__content {
43
+ background-color: var(--rvo-hero-kind-lichtblauw-background-color);
44
+ color: var(--rvo-hero-kind-lichtblauw-color);
45
+ }
46
+
47
+ &__title,
48
+ &__subtitle {
49
+ color: var(--rvo-hero-kind-lichtblauw-color);
50
+ }
51
+ }
52
+ }
38
53
  }
39
54
 
40
55
  .rvo-hero__image-container {
@@ -54,6 +69,26 @@
54
69
  @media (min-width: 780px) {
55
70
  border-end-end-radius: var(--rvo-hero-border-end-end-radius);
56
71
  }
72
+
73
+ &--lined {
74
+ &::after {
75
+ border-color: var(--rvo-hero-image-line-border-color);
76
+ border-end-start-radius: var(--rvo-hero-image-line-border-radius);
77
+ border-style: var(--rvo-hero-image-line-border-style);
78
+ border-width: var(--rvo-hero-image-line-border-width);
79
+ content: "";
80
+ display: block;
81
+ height: 100%;
82
+ inset-block-start: calc(#{var(--rvo-hero-image-line-inset)} + -25%);
83
+ inset-inline-end: var(--rvo-hero-image-line-inset);
84
+ position: absolute;
85
+ width: 100%;
86
+
87
+ @media (min-width: 540px) {
88
+ inset-block-start: var(--rvo-hero-image-line-inset);
89
+ }
90
+ }
91
+ }
57
92
  }
58
93
 
59
94
  .rvo-hero__image {