From ff1f1b133a43b7daefc3ff1285e7fae01c6a95c3 Mon Sep 17 00:00:00 2001 From: bdunni Date: Mon, 13 Feb 2023 13:54:20 +0100 Subject: [PATCH 1/8] Custom icon functionality to utills and use http --- .../examples/link-examples.shared.scss | 4 ++++ .../link-example/examples/trailing-icon.ts | 24 +++++++++++++++++++ .../link-example/link-example.module.ts | 7 +++++- .../link-showcase.component.html | 17 +++++++++++++ libs/core/src/scss/_global-styles.scss | 23 ++++++------------ libs/core/src/scss/base/_functions.scss | 22 +++++++++++++++++ 6 files changed, 80 insertions(+), 17 deletions(-) create mode 100644 apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts diff --git a/apps/cookbook/src/app/examples/link-example/examples/link-examples.shared.scss b/apps/cookbook/src/app/examples/link-example/examples/link-examples.shared.scss index 96bd78212b..b1d3b9cc23 100644 --- a/apps/cookbook/src/app/examples/link-example/examples/link-examples.shared.scss +++ b/apps/cookbook/src/app/examples/link-example/examples/link-examples.shared.scss @@ -8,3 +8,7 @@ margin-right: utils.size('s'); } } + +.trailing-icon-example { + @include utils.trailing-icon('navigation'); +} diff --git a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts new file mode 100644 index 0000000000..ddde156c6a --- /dev/null +++ b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +const config = { + selector: 'cookbook-link-example-trailing-icon', + template: `Trailing icon`, + style: `.trailing-icon-example +{ +@include utils.trailing-icon("navigation") +/* +@include utils.trailing-icon("https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/heart.svg") +@include utils.trailing-icon() +*/ +}`, +}; + +@Component({ + selector: config.selector, + template: config.template, + styleUrls: ['./link-examples.shared.scss'], +}) +export class LinkExampleTrailingIconComponent { + template: string = config.template; + style: string = config.style; +} diff --git a/apps/cookbook/src/app/examples/link-example/link-example.module.ts b/apps/cookbook/src/app/examples/link-example/link-example.module.ts index b363743e4d..e4563dc7a7 100644 --- a/apps/cookbook/src/app/examples/link-example/link-example.module.ts +++ b/apps/cookbook/src/app/examples/link-example/link-example.module.ts @@ -6,8 +6,13 @@ import { KirbyModule } from '@kirbydesign/designsystem'; import { LinkExampleDefaultComponent } from './examples/default'; import { LinkExampleNewTabComponent } from './examples/new-tab'; +import { LinkExampleTrailingIconComponent } from '~/app/examples/link-example/examples/trailing-icon'; -const COMPONENT_DECLARATIONS = [LinkExampleNewTabComponent, LinkExampleDefaultComponent]; +const COMPONENT_DECLARATIONS = [ + LinkExampleNewTabComponent, + LinkExampleDefaultComponent, + LinkExampleTrailingIconComponent, +]; @NgModule({ imports: [CommonModule, KirbyModule, RouterModule], diff --git a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html index 763259dd67..b6812c0ed4 100644 --- a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html +++ b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html @@ -54,3 +54,20 @@

New tab

In a non-web context, i.e. an app, any link will most likely launch the device's browser and effectively open a new tab outside the app context.

+ +

Custom trailing-icon

+

+ If you want to use a custom icon at the end instead of the link then extend the mixin class + trailing-icon with @include and the icon name of your choosing: +

+

+ @include trailing-icon(iconName) + the class will now look for the icon in assets. The example below is using + "Navigation" + as iconName. If you want to use an external svg, then you can input an URL instead of iconName. + View code to see examples. +

+ + + + diff --git a/libs/core/src/scss/_global-styles.scss b/libs/core/src/scss/_global-styles.scss index dc219c2601..0e628084bc 100644 --- a/libs/core/src/scss/_global-styles.scss +++ b/libs/core/src/scss/_global-styles.scss @@ -219,22 +219,6 @@ ion-loading.kirby-loading-overlay { } } -/* - * Class to add link-icon to the right of e.g. anchor tag. - */ -.kirby-external-icon { - $icon-scaling-factor: 1.5em; - - white-space: nowrap; - background-image: url('/assets/kirby/icons/svg/link.svg'); - background-repeat: no-repeat; - background-position: right 50%; - background-size: $icon-scaling-factor; - - // Place icon to the right of text, with icons own width + the actual spacing - padding-right: calc(#{$icon-scaling-factor} + #{utils.size('xxxs')}); -} - /* * Modal V2. */ @@ -310,3 +294,10 @@ html.ios ion-modal.kirby-modal-v2 { display: flex; } } + +/* + * Class to add link-icon to the right of e.g. anchor tag. + */ +.kirby-external-icon { + @include utils.trailing-icon; +} diff --git a/libs/core/src/scss/base/_functions.scss b/libs/core/src/scss/base/_functions.scss index 0cb121a068..060a14a30c 100644 --- a/libs/core/src/scss/base/_functions.scss +++ b/libs/core/src/scss/base/_functions.scss @@ -205,3 +205,25 @@ text-overflow: ellipsis; } } + +@mixin trailing-icon($svg: 'link') { + $icon-scaling-factor: 1.5em; + + @if str-index($svg, 'http') { + // External icon + background-image: url('#{$svg}'); + } @else { + // Icon from library + $icon-url: '/assets/kirby/icons/svg/#{$svg}.svg'; + + background-image: url('#{$icon-url}'); + } + + white-space: nowrap; + background-repeat: no-repeat; + background-position: right 50%; + background-size: $icon-scaling-factor; + + // Place icon to the right of text, with icons own width + the actual spacing + padding-right: calc(#{$icon-scaling-factor} + #{size('xxxs')}); +} From c7718391b35f2d5b40225c82d52e65956fd0cb82 Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Thu, 8 Jun 2023 10:12:53 +0200 Subject: [PATCH 2/8] Update apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html Co-authored-by: Jakob Engelbrecht --- .../src/app/showcase/link-showcase/link-showcase.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html index b6812c0ed4..93f5738238 100644 --- a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html +++ b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html @@ -57,7 +57,7 @@

New tab

Custom trailing-icon

- If you want to use a custom icon at the end instead of the link then extend the mixin class + If you want to use a custom icon after the link instead of the external link icon then include the Kirby scss @mixin utils.trailing-icon trailing-icon with @include and the icon name of your choosing:

From 8e07aacd47ac03d0278c0f5a597d813fdc92d97e Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Thu, 8 Jun 2023 10:13:05 +0200 Subject: [PATCH 3/8] Update apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html Co-authored-by: Jakob Engelbrecht --- .../src/app/showcase/link-showcase/link-showcase.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html index 93f5738238..801f4dfba3 100644 --- a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html +++ b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html @@ -63,7 +63,7 @@

Custom trailing-icon

@include trailing-icon(iconName) the class will now look for the icon in assets. The example below is using - "Navigation" + "navigation" as iconName. If you want to use an external svg, then you can input an URL instead of iconName. View code to see examples.

From b2cbcd06ad3160958f527ccfef99a4c0580142bc Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Thu, 8 Jun 2023 10:14:38 +0200 Subject: [PATCH 4/8] Update apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts Co-authored-by: Jakob Engelbrecht --- .../src/app/examples/link-example/examples/trailing-icon.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts index ddde156c6a..32530bf608 100644 --- a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts +++ b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts @@ -8,7 +8,6 @@ const config = { @include utils.trailing-icon("navigation") /* @include utils.trailing-icon("https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/heart.svg") -@include utils.trailing-icon() */ }`, }; From d82f7c42fc16416835da04a90f05f5940ce19565 Mon Sep 17 00:00:00 2001 From: AgreSanGit Date: Thu, 8 Jun 2023 10:41:35 +0200 Subject: [PATCH 5/8] Add Use statement in example --- .../src/app/examples/link-example/examples/trailing-icon.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts index 32530bf608..d49caffaa6 100644 --- a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts +++ b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts @@ -3,7 +3,8 @@ import { Component } from '@angular/core'; const config = { selector: 'cookbook-link-example-trailing-icon', template: `Trailing icon`, - style: `.trailing-icon-example + style: `@use '@kirbydesign/core/src/scss/utils'; +.trailing-icon-example { @include utils.trailing-icon("navigation") /* From 70b09a91333cf316e5c99807c1eb6775bb1e20cc Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Wed, 14 Jun 2023 12:37:36 +0200 Subject: [PATCH 6/8] Update apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts Co-authored-by: Jakob Engelbrecht --- .../examples/link-example/examples/trailing-icon.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts index d49caffaa6..e1ca317baa 100644 --- a/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts +++ b/apps/cookbook/src/app/examples/link-example/examples/trailing-icon.ts @@ -4,12 +4,13 @@ const config = { selector: 'cookbook-link-example-trailing-icon', template: `Trailing icon`, style: `@use '@kirbydesign/core/src/scss/utils'; -.trailing-icon-example -{ -@include utils.trailing-icon("navigation") -/* -@include utils.trailing-icon("https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/heart.svg") -*/ + +.trailing-icon-example { + // Using a Kirby icon: + @include utils.trailing-icon("navigation"); + + // Using a URL to an svg: + @include utils.trailing-icon("https://cdn.jsdelivr.net/npm/open-iconic@1.1.1/svg/heart.svg"); }`, }; From 5425177ec41bbe126064951f7181663f0dea967b Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Wed, 14 Jun 2023 12:38:20 +0200 Subject: [PATCH 7/8] Update apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html Co-authored-by: Jakob Engelbrecht --- .../showcase/link-showcase/link-showcase.component.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html index 801f4dfba3..c4bb5cd971 100644 --- a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html +++ b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html @@ -57,12 +57,11 @@

New tab

Custom trailing-icon

- If you want to use a custom icon after the link instead of the external link icon then include the Kirby scss @mixin utils.trailing-icon - trailing-icon with @include and the icon name of your choosing: + If you want to use a custom icon after the link instead of the external link icon then include the Kirby SCSS @mixin utils.trailing-icon + and the icon name of your choosing: @include trailing-icon(iconName)

- @include trailing-icon(iconName) - the class will now look for the icon in assets. The example below is using + The example below is using "navigation" as iconName. If you want to use an external svg, then you can input an URL instead of iconName. View code to see examples. From 32a363c0b234d75f5b9b92cdbd6ba889b7fc7649 Mon Sep 17 00:00:00 2001 From: AgreSanGit <112690169+AgreSanGit@users.noreply.github.com> Date: Wed, 14 Jun 2023 14:39:31 +0200 Subject: [PATCH 8/8] Update apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html Co-authored-by: Jakob Engelbrecht --- .../src/app/showcase/link-showcase/link-showcase.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html index c4bb5cd971..78a3c649fc 100644 --- a/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html +++ b/apps/cookbook/src/app/showcase/link-showcase/link-showcase.component.html @@ -63,7 +63,7 @@

Custom trailing-icon

The example below is using "navigation" - as iconName. If you want to use an external svg, then you can input an URL instead of iconName. + as iconName. If you want to use an external svg, then you can input a URL instead of iconName. View code to see examples.