@nl-rvo/css-hero 1.7.4 → 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.
Files changed (11) hide show
  1. package/dist/hero.css +1 -0
  2. package/dist/hero.css.map +1 -0
  3. package/package.json +16 -16
  4. package/CHANGELOG.md +0 -91
  5. package/README.md +0 -3
  6. package/design-tokens.json +0 -96
  7. package/dist/index.css +0 -95
  8. package/dist/index.min.css +0 -1
  9. package/dist/index.mjs +0 -1
  10. package/dist/index.mjs.d.ts +0 -2
  11. /package/src/{index.scss → hero.scss} +0 -0
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 */
package/dist/hero.css.map ADDED
@@ -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.4",
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,26 +9,26 @@
9
9
  "css",
10
10
  "hero"
11
11
  ],
12
- "files": [
13
- "src/index.scss",
14
- "dist/",
15
- "design-tokens.json",
16
- "*.md"
17
- ],
18
- "main": "dist/index.css",
19
- "publishConfig": {
20
- "access": "public"
21
- },
22
12
  "repository": {
23
13
  "type": "git+ssh",
24
14
  "url": "git@github.com:nl-design-system/rvo.git",
25
- "directory": "components/hero"
15
+ "directory": "components/hero/style"
26
16
  },
27
- "devDependencies": {
28
- "@nl-rvo/build-utils-css": "0.1.0"
17
+ "files": [
18
+ "src/",
19
+ "dist/"
20
+ ],
21
+ "exports": {
22
+ ".": "./dist/hero.css",
23
+ "./dist/*": "./dist/*"
24
+ },
25
+ "publishConfig": {
26
+ "access": "public",
27
+ "provenance": true
29
28
  },
30
29
  "scripts": {
31
- "build": "build-css-package",
32
- "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/"
33
33
  }
34
34
  }
package/CHANGELOG.md DELETED
@@ -1,91 +0,0 @@
1
- # `@nl-rvo/css-hero`
2
-
3
- ## 1.7.4
4
-
5
- ### Patch Changes
6
-
7
- - 93fdefc: Use CSS Logical properties, to support both `dir=ltr` and `dir=rtl`.
8
-
9
- ## 1.7.3
10
-
11
- ### Patch Changes
12
-
13
- - c4973ba: Removed min-height for hero image on mobile
14
- - c4973ba: removed min-height from hero image container
15
-
16
- ## 1.7.2
17
-
18
- ### Patch Changes
19
-
20
- - e9104b7: Added additional styling to Hero component when on mobile
21
-
22
- ## 1.7.1
23
-
24
- ### Patch Changes
25
-
26
- - 2ed4a39: Add new `violet` color option to the hero component.
27
-
28
- ## 1.7.0
29
-
30
- ### Minor Changes
31
-
32
- - fa36e07: Project structure updates
33
-
34
- - Moved all Storybook stories to the /stories directory.
35
- - Moved all documentation files to the /docs directory.
36
- - Removed React components from library-component-react and moved them into this package.
37
- - Update all .stories imports to the right react package "component-library-react"
38
- - Fix all Redundant / PascalCase lint warnings for .stories files.
39
-
40
- ## 1.6.0
41
-
42
- ### Minor Changes
43
-
44
- - 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'
45
-
46
- ## 1.5.1
47
-
48
- ### Patch Changes
49
-
50
- - 11eb258: Update imports to support storybook v10
51
-
52
- ## 1.5.0
53
-
54
- ### Minor Changes
55
-
56
- - fac57b8: Make image required and enable the props: fetchPriority, width, height, loading, sizes and srcSet.
57
-
58
- ## 1.4.0
59
-
60
- ### Minor Changes
61
-
62
- - 00a912a: Remove content option for hero component.
63
-
64
- ## 1.3.0
65
-
66
- ### Minor Changes
67
-
68
- - 82d7db9: Added support to use img as a acceptable param for the hero image.
69
-
70
- ## 1.2.0
71
-
72
- ### Minor Changes
73
-
74
- - 0cdf4eb: Remove utrecht-components-css reference and include utrecht css per component when needed
75
-
76
- ## 1.0.1
77
-
78
- ### Patch Changes
79
-
80
- - 0a14f60: Added Hero content box as a separate div and class (not h1)
81
-
82
- ## 1.0.0
83
-
84
- ### Major Changes
85
-
86
- - daa0537: Create npm package for each component.
87
-
88
- ## Pre-releases
89
-
90
- _@nl-rvo/component-library-css@1.0.0-alpha.264_:
91
- 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`.
package/design-tokens.json DELETED
@@ -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
- }
package/dist/index.min.css DELETED
@@ -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}";
package/dist/index.mjs.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const css: string;
2
- export default css;
/package/src/{index.scss → hero.scss} RENAMED
File without changes