-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add "backgroundImageUrl" and custom css properties for controlling background of the card component (#2047) * ✨ Make it possible to set & control card bg image * ✨ Add 'backgroundImageUrl' input property to card * 📝 Document background-image related API * 📝 Reword table text & remove type column * 📝 Add card with background image examples * 🚚 Move all card examples to a shared module * ✅ Add tests for backgroundImageUrl * 🖊️ Uppercase CSS in documentation Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * 📝 Expand documentation on card background image I've attempted expanding the documentation such that it explains the pros and cons of each method. * 📝 Modify css background example to use media queries Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> * 🤡 Add missing input properties to mocks (#2084) * Make it possible to use time scale as a custom option for chart (#2082) * Reintroduce TimeScale for ChartJS With stock charts we need Time Cartesian Axis for comparison of securities. When using time as X scale type we need a way providing zero labels (an empty array), since these are autogenerated by TimeScale. In chart-js.service the method labelsToApply needs a way of returning [] * ✨ Allow an empty array to disable labels * 🔥 Remove log statements * ✨ Make it possible to bypass default labels for stock Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> * 📝 Remove big Kirby v1 notice (#2086) * ✨ Allow usePopover to be turned on in calendar (#2102) * 📝 Fix dead links to annotation plugin docs (#2110) * 🐛 Push scaling of header to next cycle (#2111) With setTimeout we can avoid ResizeObserver loop exceeded warnings. These are hidden by browsers, but can be picked up by frontend error logging services. It most likely happens because the ResizeObserver observes repeated size changes before the original scaleHeader callback has finished. * ⬆️ Bump follow-redirects from 1.14.7 to 1.14.8 (#2049) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](follow-redirects/follow-redirects@v1.14.7...v1.14.8) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ⬆️ Bump prismjs from 1.25.0 to 1.27.0 (#2070) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.25.0 to 1.27.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](PrismJS/prism@v1.25.0...v1.27.0) --- updated-dependencies: - dependency-name: prismjs dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ⬆️ Bump url-parse from 1.5.3 to 1.5.10 (#2071) Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.10. - [Release notes](https://github.com/unshiftio/url-parse/releases) - [Commits](unshiftio/url-parse@1.5.3...1.5.10) --- updated-dependencies: - dependency-name: url-parse dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * 🔖Bumping version to 5.2.0 (designsystem) Co-authored-by: Mads Buchmann Frederiksen <mbf@prochimp.dk> Co-authored-by: Jesper Kaltoft Vind <git@jesperkaltoft.dk> Co-authored-by: Troels Strand <troelslenda@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
- Loading branch information
5 people
authored
Mar 17, 2022
1 parent
141c07f
commit b8ef64e
Showing
32 changed files
with
346 additions
and
74 deletions.
There are no files selected for viewing
27 changes: 27 additions & 0 deletions
27
apps/cookbook/src/app/examples/card-example/card-example.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NgModule } from '@angular/core'; | ||
|
|
||
| import { KirbyModule } from '@kirbydesign/designsystem'; | ||
|
|
||
| import { CardExampleComponent } from './card-example.component'; | ||
| import { CardBackgroundImageExampleComponent } from './examples/card-background-image-example.component'; | ||
| import { CardClickableExampleComponent } from './examples/card-clickable-example/card-clickable-example.component'; | ||
| import { CardCssBackgroundImageExampleComponent } from './examples/card-css-background-image-example/card-css-background-image-example.component'; | ||
| import { CardElevationsExampleComponent } from './examples/card-elevations-example/card-elevations-example.component'; | ||
| import { CardThemecolorExampleComponent } from './examples/card-themecolor-example/card-themecolor-example.component'; | ||
|
|
||
| const COMPONENT_DECLARATIONS = [ | ||
| CardExampleComponent, | ||
| CardClickableExampleComponent, | ||
| CardElevationsExampleComponent, | ||
| CardThemecolorExampleComponent, | ||
| CardBackgroundImageExampleComponent, | ||
| CardCssBackgroundImageExampleComponent, | ||
| ]; | ||
|
|
||
| @NgModule({ | ||
| declarations: COMPONENT_DECLARATIONS, | ||
| imports: [CommonModule, KirbyModule], | ||
| exports: COMPONENT_DECLARATIONS, | ||
| }) | ||
| export class CardExampleModule {} |
33 changes: 33 additions & 0 deletions
33
...ookbook/src/app/examples/card-example/examples/card-background-image-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| const config = { | ||
| selector: 'cookbook-card-background-image-example', | ||
| template: `<kirby-card | ||
| [hasPadding]="true" | ||
| backgroundImageUrl="https://images.unsplash.com/photo-1560840067-ddcaeb7831d2" | ||
| themeColor="dark" | ||
| > | ||
| <h3> | ||
| Example using input property to set background | ||
| </h3> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae | ||
| necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in | ||
| quia itaque cupiditate ratione repellat! | ||
| </p> | ||
| </kirby-card>`, | ||
| style: `kirby-card { | ||
| min-height: 300px; | ||
| } | ||
| `, | ||
| }; | ||
|
|
||
| @Component({ | ||
| selector: config.selector, | ||
| template: config.template, | ||
| styles: [config.style], | ||
| }) | ||
| export class CardBackgroundImageExampleComponent { | ||
| template: string = config.template; | ||
| style: string = config.style; | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
25 changes: 25 additions & 0 deletions
25
...amples/card-css-background-image-example/card-css-background-image-example.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /* | ||
| In order to use sass functionality the styles for this example | ||
| has to be stored in a seperate scss file. Otherwise the preprocessor | ||
| won't kick in. | ||
| */ | ||
| @use '~@kirbydesign/core/src/scss/utils'; | ||
|
|
||
| kirby-card { | ||
| --kirby-card-background-image: linear-gradient( | ||
| 0deg, | ||
| rgba(255, 255, 255, 0) 0%, | ||
| rgba(0, 0, 0, 0.6) 100% | ||
| ), | ||
| url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750'); | ||
|
|
||
| @include utils.media('>=medium') { | ||
| --kirby-card-background-image: linear-gradient( | ||
| 0deg, | ||
| rgba(255, 255, 255, 0) 0%, | ||
| rgba(0, 0, 0, 0.4) 100% | ||
| ), | ||
| url('https://images.unsplash.com/photo-1560840067-ddcaeb7831d2'); | ||
| } | ||
| min-height: 300px; | ||
| } |
46 changes: 46 additions & 0 deletions
46
...examples/card-css-background-image-example/card-css-background-image-example.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| const config = { | ||
| selector: 'cookbook-card-css-background-image-example', | ||
| template: ` | ||
| <kirby-card [hasPadding]="true" themeColor="dark"> | ||
| <h3> | ||
| Example using custom css property to set background | ||
| </h3> | ||
| <p> | ||
| Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia facere molestias recusandae necessitatibus ab veniam repellendus doloremque culpa quam libero, est quo accusamus cumque, in quia itaque cupiditate ratione repellat! | ||
| </p> | ||
| </kirby-card> | ||
| `, | ||
| style: `@use '~@kirbydesign/core/src/scss/utils'; | ||
| kirby-card { | ||
| min-height: 300px; | ||
| --kirby-card-background-image: linear-gradient( | ||
| 0deg, | ||
| rgba(255, 255, 255, 0) 0%, | ||
| rgba(0, 0, 0, 0.6) 100% | ||
| ), | ||
| url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750'); | ||
| @include utils.media('>=medium') { | ||
| --kirby-card-background-image: linear-gradient( | ||
| 0deg, | ||
| rgba(255, 255, 255, 0) 0%, | ||
| rgba(0, 0, 0, 0.4) 100% | ||
| ), | ||
| url('https://images.unsplash.com/photo-1560840067-ddcaeb7831d2'); | ||
| } | ||
| }`, | ||
| }; | ||
|
|
||
| @Component({ | ||
| selector: config.selector, | ||
| template: config.template, | ||
| styleUrls: ['./card-css-background-image-example.component.scss'], | ||
| }) | ||
| export class CardCssBackgroundImageExampleComponent { | ||
| template: string = config.template; | ||
| style: string = config.style; | ||
| } |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.