@royallondon/design-system-component-content-banner 0.0.0-stage → 2.5.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/LICENSE.md +54 -0
- package/README.md +48 -2
- package/dist/content-banner.css +1 -0
- package/package.json +38 -3
package/LICENSE.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
Authorised Use Licence v1.0
|
|
2
|
+
|
|
3
|
+
Copyright © 2026 Royal London.
|
|
4
|
+
All rights reserved.
|
|
5
|
+
|
|
6
|
+
1. Grant of Licence
|
|
7
|
+
|
|
8
|
+
The Licensor grants a non-exclusive, non-transferable,
|
|
9
|
+
revocable, royalty-free licence to use the Software only where:
|
|
10
|
+
|
|
11
|
+
(a) the individual, organisation, or business has been
|
|
12
|
+
expressly authorised in writing by the Licensor; and
|
|
13
|
+
|
|
14
|
+
(b) such authorisation remains in force.
|
|
15
|
+
|
|
16
|
+
2. Restrictions
|
|
17
|
+
|
|
18
|
+
The Software may not be:
|
|
19
|
+
|
|
20
|
+
(a) used by any unauthorised person or organisation;
|
|
21
|
+
|
|
22
|
+
(b) redistributed, sublicensed, sold, rented or made
|
|
23
|
+
available to third parties;
|
|
24
|
+
|
|
25
|
+
(c) incorporated into another product or service without
|
|
26
|
+
written approval;
|
|
27
|
+
|
|
28
|
+
(d) reverse engineered except where prohibited by law.
|
|
29
|
+
|
|
30
|
+
3. Ownership
|
|
31
|
+
|
|
32
|
+
The Software remains the exclusive property of the Licensor.
|
|
33
|
+
No ownership rights are transferred under this Licence.
|
|
34
|
+
|
|
35
|
+
4. Termination
|
|
36
|
+
|
|
37
|
+
The Licensor may revoke authorisation at any time by
|
|
38
|
+
written notice.
|
|
39
|
+
|
|
40
|
+
Upon termination the Licensee must immediately cease use
|
|
41
|
+
of the Software and destroy all copies.
|
|
42
|
+
|
|
43
|
+
5. No Warranty
|
|
44
|
+
|
|
45
|
+
The Software is provided "as is" without warranty of any kind.
|
|
46
|
+
|
|
47
|
+
6. Limitation of Liability
|
|
48
|
+
|
|
49
|
+
The Licensor shall not be liable for any damages arising
|
|
50
|
+
from use of the Software.
|
|
51
|
+
|
|
52
|
+
7. Governing Law
|
|
53
|
+
|
|
54
|
+
This Licence shall be governed by the laws of England and Wales.
|
package/README.md
CHANGED
|
@@ -1,3 +1,49 @@
|
|
|
1
|
-
|
|
1
|
+
### Installation
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Install the Content Banner package from npm
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @royallondon/design-system-component-content-banner
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
Import the required CSS file
|
|
10
|
+
|
|
11
|
+
```css
|
|
12
|
+
@import '@royallondon/design-system-component-content-banner/dist/content-banner';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
[Start using the Content Banner component](https://design.royallondon.com/components/content-banner/#live-example)
|
|
16
|
+
|
|
17
|
+
### Support
|
|
18
|
+
|
|
19
|
+
Issues and questions are handled through the [Royal London Design System support page](https://design.royallondon.com/support/).
|
|
20
|
+
|
|
21
|
+
### Licence
|
|
22
|
+
|
|
23
|
+
#### @royallondon/design-system-component-content-banner
|
|
24
|
+
|
|
25
|
+
This package is published primarily for use in Royal London products. It is made available publicly so that partners and suppliers building Royal London experiences can consume it directly.
|
|
26
|
+
|
|
27
|
+
Use of this package is subject to the Royal London Authorised Use Licence. See the `LICENSE.md` file included in this package.
|
|
28
|
+
|
|
29
|
+
The Content banner component for the [Royal London Design System](https://design.royallondon.com). For design guidance, examples and accessibility notes, see the [Content banner page](https://design.royallondon.com/components/content-banner/).
|
|
30
|
+
|
|
31
|
+
### Release log
|
|
32
|
+
|
|
33
|
+
| Version | Release notes |
|
|
34
|
+
| ------- | ---------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| 2.5.0 | Prepare for public npm release: add licence, publish `dist` only (`src` removed), remove source maps |
|
|
36
|
+
| 2.4.4 | Move to new feed |
|
|
37
|
+
| 2.4.1 | Reset row spacing after grid update in foundations (2.17.0) |
|
|
38
|
+
| 2.4.0 | Update layout to adapt to the inclusion of a Badge |
|
|
39
|
+
| 2.3.0 | Apply new icons and latest tokens added to foundations |
|
|
40
|
+
| 2.2.0 | Update styles to include type tokens |
|
|
41
|
+
| 2.1.3 | Add missing colour option and remove legacy colour option |
|
|
42
|
+
| 2.1.2 | Update alignment once max line length reached in condensed variant |
|
|
43
|
+
| 2.1.1 | Fix issue with media query processing without postcss |
|
|
44
|
+
| 2.1.0 | Add condensed variant with reduced height |
|
|
45
|
+
| 2.0.1 | Fix for background purple variant |
|
|
46
|
+
| 2.0.0 | Upgrade for compatibility with foundations v2 |
|
|
47
|
+
| 1.0.2 | Fix for overlapping content on medium screen sizes |
|
|
48
|
+
| 1.0.1 | Update package wasn't compiled correctly, missing dist folder |
|
|
49
|
+
| 1.0.0 | First release after testing |
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@custom-media --mq-xsmall (max-width: 31.9375rem);@custom-media --mq-small (min-width: 32rem);@custom-media --mq-medium (min-width: 48rem);@custom-media --mq-large (min-width: 64rem);@custom-media --mq-medium-max (max-width: 47.9375rem);@custom-media --mq-large-max (max-width: 63.9375rem);@custom-media --mq-xs-max (max-width: 31.9375rem);@custom-media --mq-sm (min-width: 32rem);@custom-media --mq-sm-max (max-width: 47.9375rem);@custom-media --mq-md (min-width: 48rem);@custom-media --mq-md-max (max-width: 63.9375rem);@custom-media --mq-lg (min-width: 64rem);@custom-media --mq-lg-max (max-width: 79.9375rem);@custom-media --mq-xl (min-width: 80rem);@custom-media --mq-xl-max (max-width: 95.9375rem);@custom-media --mq-xxl (min-width: 96rem);.rl-c-content-banner,[class*=rl-c-content-banner--]{background:var(--content-banner-fill-white);color:var(--content-banner-text-body);width:100%}:is(.rl-c-content-banner,[class*=rl-c-content-banner--]):where(.rl-l-grid){row-gap:0}.rl-c-content-banner_image{align-items:center;display:flex;justify-content:center}@media (min-width:48rem){.rl-c-content-banner--image-right .rl-c-content-banner_image{order:1}}@media (--mq-medium ){.rl-c-content-banner--image-right .rl-c-content-banner_image{order:1}}.rl-c-content-banner_image:has([class*=rl-icon]),.rl-c-content-banner_image:has(svg){padding:var(--spacing-06) var(--spacing-06) 0}@media (min-width:48rem){.rl-c-content-banner_image:has([class*=rl-icon]),.rl-c-content-banner_image:has(svg){padding:var(--spacing-04) 0}}@media (--mq-medium ){.rl-c-content-banner_image:has([class*=rl-icon]),.rl-c-content-banner_image:has(svg){padding:var(--spacing-04) 0}}.rl-c-content-banner_image picture{height:100%}.rl-c-content-banner_image img{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top right;object-position:top right;width:100%}@media (min-width:48rem){.rl-c-content-banner_image img{min-height:26.25rem}}@media (--mq-medium ){.rl-c-content-banner_image img{min-height:26.25rem}}.rl-c-content-banner_content{align-items:start;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-06) var(--spacing-05)}@media (min-width:64rem){.rl-c-content-banner:has(.rl-c-content-banner_image img) .rl-c-content-banner_content,[class*=rl-c-content-banner--]:has(.rl-c-content-banner_image img) .rl-c-content-banner_content{padding-right:var(--spacing-08)}}@media (--mq-large ){.rl-c-content-banner:has(.rl-c-content-banner_image img) .rl-c-content-banner_content,[class*=rl-c-content-banner--]:has(.rl-c-content-banner_image img) .rl-c-content-banner_content{padding-right:var(--spacing-08)}}@media (min-width:48rem){.rl-l-grid>.rl-c-content-banner_content{margin-left:calc(var(--grid-gutters)*-1)}}@media (--mq-medium ){.rl-l-grid>.rl-c-content-banner_content{margin-left:calc(var(--grid-gutters)*-1)}}@media (min-width:48rem){.rl-l-grid.rl-c-content-banner--image-right .rl-c-content-banner_content{margin-left:0;margin-right:calc(var(--grid-gutters)*-1)}}@media (--mq-medium ){.rl-l-grid.rl-c-content-banner--image-right .rl-c-content-banner_content{margin-left:0;margin-right:calc(var(--grid-gutters)*-1)}}.rl-c-content-banner_content .rl-c-badge{margin-bottom:var(--spacing-02)}.rl-c-content-banner__action,.rl-c-content-banner__description,.rl-c-content-banner__title{max-width:var(--size-limit-text-max)}.rl-c-content-banner__title{color:var(--content-banner-text-headline);display:block;font-family:var(--typography-font-family-headline-large);font-size:var(--typography-size-headline-large);font-weight:var(--typography-weight-headline-large);line-height:var(--type-line-height);margin-bottom:var(--spacing-02)}.rl-c-content-banner__description{margin-bottom:var(--spacing-04)}.rl-c-content-banner__description>*{color:var(--content-banner-text-body);font-size:var(--typography-size-body-large)}.rl-c-content-banner__description>:last-child{margin-bottom:0}.rl-c-content-banner__action{display:flex;flex-direction:column}@media (min-width:48rem){.rl-c-content-banner__action{flex-direction:unset}}@media (--mq-medium ){.rl-c-content-banner__action{flex-direction:unset}}.rl-c-content-banner__action [class*=rl-c-button--]{text-align:center;width:100%}:is(.rl-c-content-banner__action [class*=rl-c-button--]):nth-child(2){margin-top:var(--spacing-04)}@media (min-width:48rem){.rl-c-content-banner__action [class*=rl-c-button--]{width:auto}:is(.rl-c-content-banner__action [class*=rl-c-button--]):nth-child(2){margin:0 0 0 var(--spacing-04)}}@media (--mq-medium ){.rl-c-content-banner__action [class*=rl-c-button--]{width:auto}:is(.rl-c-content-banner__action [class*=rl-c-button--]):nth-child(2){margin:0 0 0 var(--spacing-04)}}:is(.rl-c-content-banner--condensed .rl-c-content-banner_image) img{min-height:0}.rl-c-content-banner--condensed .rl-c-content-banner_content{padding:var(--spacing-05)}@media (min-width:32rem){.rl-c-content-banner--condensed .rl-c-content-banner_content{padding-inline:var(--spacing-07)}}@media (--mq-sm ){.rl-c-content-banner--condensed .rl-c-content-banner_content{padding-inline:var(--spacing-07)}}.rl-c-content-banner--condensed:has(.rl-c-content-banner_image img) .rl-c-content-banner_content{padding-left:var(--spacing-05)}.rl-c-content-banner--condensed .rl-c-content-banner__title{font-size:var(--typography-size-title-large)}.rl-c-content-banner--condensed .rl-c-content-banner__description>*{font-size:var(--typography-size-body-medium)}.rl-c-content-banner--no-image{display:flex;flex-direction:column;gap:var(--spacing-06);justify-content:center;padding:var(--spacing-06) var(--spacing-05)}@media (min-width:32rem){.rl-c-content-banner--no-image{align-items:center;flex-direction:row}}@media (--mq-sm ){.rl-c-content-banner--no-image{align-items:center;flex-direction:row}}.rl-c-content-banner--no-image.rl-c-content-banner--condensed{justify-content:start;padding:var(--spacing-05)}@media (min-width:32rem){.rl-c-content-banner--no-image.rl-c-content-banner--condensed{padding-inline:var(--spacing-07)}}@media (--mq-sm ){.rl-c-content-banner--no-image.rl-c-content-banner--condensed{padding-inline:var(--spacing-07)}}.rl-c-content-banner--no-image .rl-c-content-banner_content,.rl-c-content-banner--no-image .rl-c-content-banner_image{padding:0}.rl-c-content-banner--no-image .rl-c-content-banner_image{display:block}.rl-c-content-banner--no-image:not(.rl-c-content-banner--condensed) .rl-c-content-banner_content:first-child{text-align:center}:is(.rl-c-content-banner--no-image:not(.rl-c-content-banner--condensed) .rl-c-content-banner_content:first-child) .rl-c-content-banner__action{justify-content:center}:is(.rl-c-content-banner--white,.rl-c-content-banner--ice,.rl-c-content-banner--cloud,.rl-c-content-banner--purple-20) .rl-c-content-banner__title{color:var(--content-banner-text-headline)}:is(.rl-c-content-banner--white,.rl-c-content-banner--ice,.rl-c-content-banner--cloud,.rl-c-content-banner--purple-20) .rl-c-content-banner__description>*{color:var(--content-banner-text-body)}.rl-c-content-banner--white{background:var(--content-banner-fill-white)}.rl-c-content-banner--ice{background:var(--content-banner-fill-neutral-20)}.rl-c-content-banner--cloud{background:var(--content-banner-fill-neutral-30)}.rl-c-content-banner--purple-20{background:var(--content-banner-fill-primary-20)}.rl-c-content-banner--purple{background:var(--content-banner-fill-primary-100)}.rl-c-content-banner--purple .rl-c-content-banner__title{color:var(--content-banner-text-title-inverted)}.rl-c-content-banner--purple .rl-c-content-banner__description>*{color:var(--content-banner-text-body-inverted)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,41 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@royallondon/design-system-component-content-banner",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "2.5.0",
|
|
4
|
+
"description": "Royal London Design System - Content banner package",
|
|
5
|
+
"homepage": "https://design.royallondon.com/components/content-banner/",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://dev.azure.com/RLG-UK/GTC/_git/design-system",
|
|
9
|
+
"directory": "ds-packages/packages/design-system-component-content-banner"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://design.royallondon.com/support/"
|
|
13
|
+
},
|
|
14
|
+
"keywords": [
|
|
15
|
+
"royal-london-design-system-component-content-banner",
|
|
16
|
+
"rlds-content-banner",
|
|
17
|
+
"royal-london"
|
|
18
|
+
],
|
|
19
|
+
"author": "Design System Squad <DesignSystem@royallondon.com>",
|
|
20
|
+
"license": "SEE LICENSE IN LICENSE.md",
|
|
21
|
+
"main": "dist/content-banner.css",
|
|
22
|
+
"style": "dist/content-banner.css",
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build:clean": "npx rimraf dist",
|
|
25
|
+
"build:lint": "stylelint src/**/*.{css,pcss} --fix",
|
|
26
|
+
"build:css": "postcss src/**/content-banner.pcss --base src --dir dist/ --ext css",
|
|
27
|
+
"build": "npm-run-all --serial build:clean build:css"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@royallondon/design-system-foundations": "^2.23.0"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"@royallondon/design-system-foundations": ">= 2.15.0 < 3"
|
|
34
|
+
},
|
|
35
|
+
"files": [
|
|
36
|
+
"dist"
|
|
37
|
+
],
|
|
38
|
+
"publishConfig": {
|
|
39
|
+
"access": "public"
|
|
40
|
+
}
|
|
6
41
|
}
|