@nl-rvo/css-hero 1.7.5 → 1.8.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.
package/dist/hero.css ADDED
@@ -0,0 +1 @@
1
+ .rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-block-size:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);color:var(--rvo-hero-title-color);margin-block-end:0;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)}@media(min-width: 540px){.rvo-hero .rvo-hero__content{border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);inset-block-end:0;max-inline-size:var(--rvo-hero-box-max-width);position:absolute;z-index:1}}.rvo-hero .rvo-hero__title,.rvo-hero .rvo-hero__subtitle{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--violet{--rvo-hero-box-background-color: var(--rvo-color-violet)}.rvo-hero--lichtblauw{--rvo-hero-box-background-color: var(--rvo-hero-kind-lichtblauw-background-color)}.rvo-hero--lichtblauw .rvo-hero__content,.rvo-hero--lichtblauw .rvo-hero__title,.rvo-hero--lichtblauw .rvo-hero__subtitle{color:var(--rvo-hero-kind-lichtblauw-color)}.rvo-hero__image-container{line-height:0;overflow:hidden}@media(min-width: 540px){.rvo-hero__image-container{max-block-size:500px;min-block-size:300px;padding-block-end:0}}.rvo-hero__image-container--lined::after{block-size:100%;border-color:var(--rvo-hero-image-line-border-color);border-style:var(--rvo-hero-image-line-border-style);border-width:var(--rvo-hero-image-line-border-width);border-end-start-radius:var(--rvo-hero-image-line-border-radius);content:"";display:block;inline-size:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute}@media(min-width: 540px){.rvo-hero__image-container--lined::after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{block-size:100%;inline-size:100%;min-block-size:300px;object-fit:cover}.rvo-hero__custom-image-wrapper img{block-size:100%;inline-size:100%;object-fit:cover}/*# sourceMappingURL=hero.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../src/hero.scss"],"names":[],"mappings":"AAIA,UACE,4DACA,uBACA,yBACA,qBACA,gBACA,kBAEA,6BACE,sDACA,kCACA,mBACA,wDACA,4DACA,0DACA,8DAEA,yBATF,6BAUI,oEACA,kBACA,8CACA,kBACA,WAIJ,yDAEE,kCAGF,8BACE,cACA,6CACA,+CACA,iDACA,iDAGF,kBACE,yDAGF,sBACE,kFAEA,0HAGE,4CAKN,2BACE,cACA,gBAEA,yBAJF,2BAKI,qBACA,qBACA,qBAIA,yCACE,gBACA,qDACA,qDACA,qDAEA,iEACA,WACA,cACA,iBACA,+DACA,kDACA,kBAEA,yBAdF,yCAeI,oDAMR,iBACE,gBACA,iBACA,qBACA,iBAGF,oCACE,gBACA,iBACA","file":"hero.css"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.7.5",
2
+ "version": "1.8.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-hero",
@@ -9,27 +9,26 @@
9
9
  "css",
10
10
  "hero"
11
11
  ],
12
+ "repository": {
13
+ "type": "git+ssh",
14
+ "url": "git@github.com:nl-design-system/rvo.git",
15
+ "directory": "components/hero/style"
16
+ },
12
17
  "files": [
13
- "src/index.scss",
14
- "dist/",
15
- "design-tokens.json",
16
- "*.md"
18
+ "src/",
19
+ "dist/"
17
20
  ],
18
- "main": "dist/index.css",
21
+ "exports": {
22
+ ".": "./dist/hero.css",
23
+ "./dist/*": "./dist/*"
24
+ },
19
25
  "publishConfig": {
20
26
  "access": "public",
21
27
  "provenance": true
22
28
  },
23
- "repository": {
24
- "type": "git+ssh",
25
- "url": "git@github.com:nl-design-system/rvo.git",
26
- "directory": "components/hero"
27
- },
28
- "devDependencies": {
29
- "@nl-rvo/build-utils-css": "0.1.0"
30
- },
31
29
  "scripts": {
32
- "build": "build-css-package",
33
- "clean": "rimraf dist"
30
+ "build": "sass --pkg-importer=node --style=compressed ./src/:./dist/",
31
+ "watch": "sass --pkg-importer=node --style=compressed --watch ./src/:./dist/",
32
+ "clean": "rimraf ./dist/"
34
33
  }
35
34
  }
package/CHANGELOG.md DELETED
@@ -1,97 +0,0 @@
1
- # `@nl-rvo/css-hero`
2
-
3
- ## 1.7.5
4
-
5
- ### Patch Changes
6
-
7
- - 084a230: Ensure package is published with provenance
8
-
9
- ## 1.7.4
10
-
11
- ### Patch Changes
12
-
13
- - 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
14
-
15
- ## 1.7.3
16
-
17
- ### Patch Changes
18
-
19
- - c4973ba: Removed min-height for hero image on mobile
20
- - c4973ba: removed min-height from hero image container
21
-
22
- ## 1.7.2
23
-
24
- ### Patch Changes
25
-
26
- - e9104b7: Added additional styling to Hero component when on mobile
27
-
28
- ## 1.7.1
29
-
30
- ### Patch Changes
31
-
32
- - 2ed4a39: Add new `violet` color option to the hero component.
33
-
34
- ## 1.7.0
35
-
36
- ### Minor Changes
37
-
38
- - fa36e07: Project structure updates
39
-
40
- - Moved all Storybook stories to the /stories directory.
41
- - Moved all documentation files to the /docs directory.
42
- - Removed React components from library-component-react and moved them into this package.
43
- - Update all .stories imports to the right react package "component-library-react"
44
- - Fix all Redundant / PascalCase lint warnings for .stories files.
45
-
46
- ## 1.6.0
47
-
48
- ### Minor Changes
49
-
50
- - 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'
51
-
52
- ## 1.5.1
53
-
54
- ### Patch Changes
55
-
56
- - 11eb258: Update imports to support storybook v10
57
-
58
- ## 1.5.0
59
-
60
- ### Minor Changes
61
-
62
- - fac57b8: Make image required and enable the props: fetchPriority, width, height, loading, sizes and srcSet.
63
-
64
- ## 1.4.0
65
-
66
- ### Minor Changes
67
-
68
- - 00a912a: Remove content option for hero component.
69
-
70
- ## 1.3.0
71
-
72
- ### Minor Changes
73
-
74
- - 82d7db9: Added support to use img as a acceptable param for the hero image.
75
-
76
- ## 1.2.0
77
-
78
- ### Minor Changes
79
-
80
- - 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
81
-
82
- ## 1.0.1
83
-
84
- ### Patch Changes
85
-
86
- - 0a14f60: Added Hero content box as a separate div and class (not h1)
87
-
88
- ## 1.0.0
89
-
90
- ### Major Changes
91
-
92
- - daa0537: Create npm package for each component.
93
-
94
- ## Pre-releases
95
-
96
- _@nl-rvo/component-library-css@1.0.0-alpha.264_:
97
- Added component
package/README.md DELETED
@@ -1,3 +0,0 @@
1
- Het Hero component wordt altijd bovenaan een pagina geplaatst.
2
- De afbeelding is verplicht en kan worden aangeleverd als een afbeeldingsobject `{ src, alt }` of als een HTML`<img />` element.
3
- Bij gebruik van een afbeeldingsobject kunnen optioneel extra instellingen worden meegegeven, zoals `loading`, `decoding`, `fetchPriority`, `width` en `height`.
@@ -1,96 +0,0 @@
1
- {
2
- "rvo": {
3
- "hero": {
4
- "border-end-end-radius": {
5
- "css": {
6
- "syntax": "<length>",
7
- "inherits": true
8
- }
9
- },
10
- "box": {
11
- "background-color": {
12
- "css": {
13
- "syntax": "<color>",
14
- "inherits": true
15
- }
16
- },
17
- "border-start-end-radius": {
18
- "css": {
19
- "syntax": "<length>",
20
- "inherits": true
21
- }
22
- },
23
- "max-width": {
24
- "css": {
25
- "syntax": "<length>",
26
- "inherits": true
27
- }
28
- },
29
- "padding-block-end": {
30
- "css": {
31
- "syntax": "<length>",
32
- "inherits": true
33
- }
34
- },
35
- "padding-block-start": {
36
- "css": {
37
- "syntax": "<length>",
38
- "inherits": true
39
- }
40
- },
41
- "padding-inline-end": {
42
- "css": {
43
- "syntax": "<length>",
44
- "inherits": true
45
- }
46
- },
47
- "padding-inline-start": {
48
- "css": {
49
- "syntax": "<length>",
50
- "inherits": true
51
- }
52
- }
53
- },
54
- "title": {
55
- "color": {
56
- "css": {
57
- "syntax": "<color>",
58
- "inherits": true
59
- }
60
- },
61
- "font-weight": {
62
- "css": {
63
- "syntax": "<*>",
64
- "inherits": true
65
- }
66
- }
67
- },
68
- "subtitle": {
69
- "font-size": {
70
- "css": {
71
- "syntax": "<number>",
72
- "inherits": true
73
- }
74
- },
75
- "font-style": {
76
- "css": {
77
- "syntax": "<*>",
78
- "inherits": true
79
- }
80
- },
81
- "font-weight": {
82
- "css": {
83
- "syntax": "<*>",
84
- "inherits": true
85
- }
86
- },
87
- "line-height": {
88
- "css": {
89
- "syntax": "<number>",
90
- "inherits": true
91
- }
92
- }
93
- }
94
- }
95
- }
96
- }
package/dist/index.css DELETED
@@ -1,95 +0,0 @@
1
- /**
2
- * @license CC0-1.0
3
- * Copyright (c) 2021 Community for NL Design System
4
- */
5
- .rvo-hero {
6
- border-end-end-radius: var(--rvo-hero-border-end-end-radius);
7
- margin-inline-end: auto;
8
- margin-inline-start: auto;
9
- min-block-size: 200px;
10
- overflow: hidden;
11
- position: relative;
12
- }
13
- .rvo-hero .rvo-hero__content {
14
- background-color: var(--rvo-hero-box-background-color);
15
- color: var(--rvo-hero-title-color);
16
- margin-block-end: 0;
17
- padding-block-end: var(--rvo-hero-box-padding-block-end);
18
- padding-block-start: var(--rvo-hero-box-padding-block-start);
19
- padding-inline-end: var(--rvo-hero-box-padding-inline-end);
20
- padding-inline-start: var(--rvo-hero-box-padding-inline-start);
21
- }
22
- @media (min-width: 540px) {
23
- .rvo-hero .rvo-hero__content {
24
- border-start-end-radius: var(--rvo-hero-box-border-start-end-radius);
25
- inset-block-end: 0;
26
- max-inline-size: var(--rvo-hero-box-max-width);
27
- position: absolute;
28
- z-index: 1;
29
- }
30
- }
31
- .rvo-hero .rvo-hero__title,
32
- .rvo-hero .rvo-hero__subtitle {
33
- color: var(--rvo-hero-title-color);
34
- }
35
- .rvo-hero .rvo-hero__subtitle {
36
- display: block;
37
- font-size: var(--rvo-hero-subtitle-font-size);
38
- font-style: var(--rvo-hero-subtitle-font-style);
39
- font-weight: var(--rvo-hero-subtitle-font-weight);
40
- line-height: var(--rvo-hero-subtitle-line-height);
41
- }
42
- .rvo-hero--violet {
43
- --rvo-hero-box-background-color: var(--rvo-color-violet);
44
- }
45
- .rvo-hero--lichtblauw {
46
- --rvo-hero-box-background-color: var(--rvo-hero-kind-lichtblauw-background-color);
47
- }
48
- .rvo-hero--lichtblauw .rvo-hero__content,
49
- .rvo-hero--lichtblauw .rvo-hero__title,
50
- .rvo-hero--lichtblauw .rvo-hero__subtitle {
51
- color: var(--rvo-hero-kind-lichtblauw-color);
52
- }
53
-
54
- .rvo-hero__image-container {
55
- line-height: 0;
56
- overflow: hidden;
57
- }
58
- @media (min-width: 540px) {
59
- .rvo-hero__image-container {
60
- max-block-size: 500px;
61
- min-block-size: 300px;
62
- padding-block-end: 0;
63
- }
64
- }
65
- .rvo-hero__image-container--lined::after {
66
- block-size: 100%;
67
- border-color: var(--rvo-hero-image-line-border-color);
68
- border-style: var(--rvo-hero-image-line-border-style);
69
- border-width: var(--rvo-hero-image-line-border-width);
70
- border-end-start-radius: var(--rvo-hero-image-line-border-radius);
71
- content: "";
72
- display: block;
73
- inline-size: 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
- }
78
- @media (min-width: 540px) {
79
- .rvo-hero__image-container--lined::after {
80
- inset-block-start: var(--rvo-hero-image-line-inset);
81
- }
82
- }
83
-
84
- .rvo-hero__image {
85
- block-size: 100%;
86
- inline-size: 100%;
87
- min-block-size: 300px;
88
- object-fit: cover;
89
- }
90
-
91
- .rvo-hero__custom-image-wrapper img {
92
- block-size: 100%;
93
- inline-size: 100%;
94
- object-fit: cover;
95
- }
@@ -1 +0,0 @@
1
- .rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-block-size:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);color:var(--rvo-hero-title-color);margin-block-end:0;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)}@media (min-width:540px){.rvo-hero .rvo-hero__content{border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);inset-block-end:0;max-inline-size:var(--rvo-hero-box-max-width);position:absolute;z-index:1}}.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--violet{--rvo-hero-box-background-color:var(--rvo-color-violet)}.rvo-hero--lichtblauw{--rvo-hero-box-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;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-block-size:500px;min-block-size:300px;padding-block-end:0}}.rvo-hero__image-container--lined:after{block-size:100%;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;inline-size:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{min-block-size:300px}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{block-size:100%;inline-size:100%;object-fit:cover}
package/dist/index.mjs DELETED
@@ -1 +0,0 @@
1
- export default ".rvo-hero{border-end-end-radius:var(--rvo-hero-border-end-end-radius);margin-inline-end:auto;margin-inline-start:auto;min-block-size:200px;overflow:hidden;position:relative}.rvo-hero .rvo-hero__content{background-color:var(--rvo-hero-box-background-color);color:var(--rvo-hero-title-color);margin-block-end:0;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)}@media (min-width:540px){.rvo-hero .rvo-hero__content{border-start-end-radius:var(--rvo-hero-box-border-start-end-radius);inset-block-end:0;max-inline-size:var(--rvo-hero-box-max-width);position:absolute;z-index:1}}.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--violet{--rvo-hero-box-background-color:var(--rvo-color-violet)}.rvo-hero--lichtblauw{--rvo-hero-box-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;overflow:hidden}@media (min-width:540px){.rvo-hero__image-container{max-block-size:500px;min-block-size:300px;padding-block-end:0}}.rvo-hero__image-container--lined:after{block-size:100%;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;inline-size:100%;inset-block-start:calc(var(--rvo-hero-image-line-inset) - 25%);inset-inline-end:var(--rvo-hero-image-line-inset);position:absolute}@media (min-width:540px){.rvo-hero__image-container--lined:after{inset-block-start:var(--rvo-hero-image-line-inset)}}.rvo-hero__image{min-block-size:300px}.rvo-hero__custom-image-wrapper img,.rvo-hero__image{block-size:100%;inline-size:100%;object-fit:cover}";
@@ -1,2 +0,0 @@
1
- declare const css: string;
2
- export default css;
File without changes