Added security and target

fwt/components/Button.tsx

@@ -8,6 +8,7 @@ interface Props {
   edges?: 'curved' | 'rounded' | 'flat'
   design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
   submit?: boolean
+  newtab?: boolean
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -31,14 +32,14 @@ export default (props: Props) => {
       <Show when={props.to}>
         <Switch>
           <Match when={props.design}>
-            <a href={props.to} aria-label={props.label} data-astro-prefetch>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
               <button class={props.design} style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>
             </a>
           </Match>
           <Match when={!props.design}>
-            <a href={props.to} aria-label={props.label} data-astro-prefetch>
+            <a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
               <button class="button" style={borderRadius}>
                 {props.label || 'Click Me!'}
               </button>

fwt/components/Link.tsx

@@ -3,12 +3,13 @@ import '../styles/Link.sass'
 interface Props {
   to: string
   children?: any
+  newtab?: boolean
 }
 
 export default (props: Props) => {
   return (
     <>
-      <a href={props.to} aria-label={`Go to ${props.to}`} data-astro-prefetch>
+      <a href={props.to} aria-label={`Go to ${props.to}`} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
         {props.children}
       </a>
     </>