Merge pull request #184 from silinternational/feature/add-target-to-u…

…rl-buttons feat(Components): add target prop to Button, Fab, and IconButton
silinternational · Feb 14, 2023 · 74e8c4c · 74e8c4c
2 parents 3df973d + d0e92bc
commit 74e8c4c
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 14 deletions.
diff --git a/components/mdc/Button/Button.svelte b/components/mdc/Button/Button.svelte
@@ -9,6 +9,7 @@ export let raised = false
 export let prependIcon = undefined
 export let appendIcon = undefined
 export let url = undefined
+export let target = ''
 
 let element = {}
 onMount(() => {
@@ -24,6 +25,7 @@ onMount(() => {
     role="button"
     class:mdc-button--outlined={outlined}
     class:mdc-button--raised={raised}
+    {target}
     {disabled}
     on:click
     bind:this={element}

diff --git a/components/mdc/Fab/Fab.svelte b/components/mdc/Fab/Fab.svelte
@@ -9,6 +9,7 @@ export let mini = false
 export let extended = false
 export let url = ''
 export let action = {}
+export let target = ''
 
 let element = {}
 
@@ -38,7 +39,7 @@ onMount(() => {
     <span class="mdc-fab__label">{label}</span>
   </button>
 {:else if url}
-  <a class="mdc-fab {$$props.class}" aria-label={label} bind:this={element} href={url}>
+  <a class="mdc-fab {$$props.class}" aria-label={label} bind:this={element} href={url} {target}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </a>

diff --git a/components/mdc/IconButton/IconButton.svelte b/components/mdc/IconButton/IconButton.svelte
@@ -7,6 +7,7 @@ export let icon
 export let ariaLabel
 export let url = ''
 export let disabled = false
+export let target = ''
 
 let element = {}
 onMount(() => {
@@ -25,15 +26,17 @@ onMount(() => {
     class="mdc-icon-button material-icons {$$props.class}"
     aria-label={ariaLabel}
     {disabled}
+    {target}
     on:click
     on:mousedown
     on:blur
     on:focus
-    bind:this={element}>
-    <div class="mdc-icon-button__ripple"></div>
-    <span class="mdc-icon-button__focus-ring"></span>
+    bind:this={element}
+  >
+    <div class="mdc-icon-button__ripple" />
+    <span class="mdc-icon-button__focus-ring" />
     {icon}
-</a>
+  </a>
 {:else}
   <button
     class="mdc-icon-button material-icons {$$props.class}"
@@ -43,9 +46,10 @@ onMount(() => {
     on:mousedown
     on:blur
     on:focus
-    bind:this={element}>
-    <div class="mdc-icon-button__ripple"></div>
-    <span class="mdc-icon-button__focus-ring"></span>
+    bind:this={element}
+  >
+    <div class="mdc-icon-button__ripple" />
+    <span class="mdc-icon-button__focus-ring" />
     {icon}
   </button>
 {/if}
diff --git a/index.d.ts b/index.d.ts
@@ -5,11 +5,12 @@ declare module '@silintl/ui-components' {
   export type actions = writable<any[]>
 
   interface ButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+    appendIcon?: string
     disabled?: boolean
     outlined?: boolean
-    raised?: boolean
     prependIcon?: string
-    appendIcon?: string
+    raised?: boolean
+    target?: string
     url?: string
   }
   export class Button extends SvelteComponentTyped<ButtonProps> {}
@@ -134,14 +135,16 @@ declare module '@silintl/ui-components' {
     extended?: boolean
     url?: string
     action?: Function
+    target?: string
   }
   export class Fab extends SvelteComponentTyped<FabProps> {}
 
   interface IconButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
-    icon?: string
     ariaLabel?: string
-    url?: string
     disabled?: boolean
+    icon?: string
+    target?: string
+    url?: string
   }
   export class IconButton extends SvelteComponentTyped<IconButtonProps> {}
 

diff --git a/stories/Button.stories.svelte b/stories/Button.stories.svelte
@@ -28,5 +28,19 @@ const args = {
 
 <Story
   name="Url"
-  args={copyAndModifyArgs(args, { url: 'https://github.com/silinternational', raised: false, 'on:click': () => {} })}
+  args={copyAndModifyArgs(args, {
+    url: '/?path=/story/atoms-button--url',
+    raised: false,
+    'on:click': () => {},
+  })}
+/>
+
+<Story
+  name="Target"
+  args={copyAndModifyArgs(args, {
+    url: '/?path=/story/atoms-button--url',
+    target: '_blank',
+    raised: false,
+    'on:click': () => {},
+  })}
 />
diff --git a/stories/Fab.stories.svelte b/stories/Fab.stories.svelte
@@ -20,3 +20,6 @@ const args = {
 <Story name="Default" {args} />
 <Story name="Mini" args={copyAndModifyArgs(args, { mini: true })} />
 <Story name="Extended" args={copyAndModifyArgs(args, { extended: true })} />
+<Story name="Action" args={copyAndModifyArgs(args, { action: () => alert('This is an action') })} />
+<Story name="Target" args={copyAndModifyArgs(args, { target: '_blank', url: '/?path=/story/atoms-fab--target' })} />
+<Story name="Url" args={copyAndModifyArgs(args, { url: '/?path=/story/atoms-fab--url' })} />
diff --git a/stories/IconButton.stories.svelte b/stories/IconButton.stories.svelte
@@ -26,7 +26,19 @@ import { IconButton } from '../components/mdc'
     icon: 'done',
     ariaLabel: 'ariaLabel',
     class: '', //will only work with global class
-    url: 'https://google.com',
+    url: '/?path=/story/atoms-iconbutton--url',
+    disabled: false,
+    'on:click': () => alert('click'),
+  }}
+/>
+<Story
+  name="Target"
+  args={{
+    icon: 'done',
+    ariaLabel: 'ariaLabel',
+    class: '', //will only work with global class
+    url: '/?path=/story/atoms-iconbutton--target',
+    target: '_blank',
     disabled: false,
     'on:click': () => alert('click'),
   }}