Fix placeholder styles, add typography settings to link

packages/standard-components/manifest.json

@@ -867,6 +867,7 @@
     "name": "Link",
     "description": "A basic link component for internal and external links",
     "icon": "Link",
+    "showSettingsBar": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -885,10 +886,85 @@
         "label": "New Tab",
         "key": "openInNewTab"
       },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "M",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
       {
         "type": "boolean",
-        "label": "External",
-        "key": "external"
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },

packages/standard-components/src/BackgroundImage.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -23,7 +23,7 @@
   <div class="outer" use:styleable={$component.styles}>
     <div class="inner" {style} />
   </div>
-{:else}
+{:else if $builderStore.inBuilder}
   <div
     class="placeholder"
     use:styleable={{ ...$component.styles, empty: true }}

packages/standard-components/src/Image.svelte

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import Placeholder from "./Placeholder.svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -10,7 +10,7 @@
 
 {#if url}
   <img src={url} alt={$component.name} use:styleable={$component.styles} />
-{:else}
+{:else if $builderStore.inBuilder}
   <div
     class="placeholder"
     use:styleable={{ ...$component.styles, empty: true }}

packages/standard-components/src/Link.svelte

@@ -1,31 +1,105 @@
 <script>
   import { getContext } from "svelte"
 
-  const { linkable, styleable } = getContext("sdk")
+  const { linkable, styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let url = ""
-  export let text = ""
-  export let openInNewTab = false
-  export let external = false
+  export let url
+  export let text
+  export let openInNewTab
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
 
+  $: external = url && !url.startsWith("/")
   $: target = openInNewTab ? "_blank" : "_self"
+  $: placeholder = $builderStore.inBuilder && !text
+  $: componentText = $builderStore.inBuilder
+    ? text || "Placeholder link"
+    : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>
 
-{#if external}
-  <a href={url || "/"} {target} use:styleable={$component.styles}>
-    {text}
-    <slot />
-  </a>
-{:else}
-  <a href={url || "/"} use:linkable {target} use:styleable={$component.styles}>
-    {text}
-    <slot />
-  </a>
+{#if $builderStore.inBuilder || componentText}
+  {#if external}
+    <a
+      {target}
+      href={url || "/"}
+      use:styleable={styles}
+      class:placeholder
+      class:bold
+      class:italic
+      class:underline
+      class="align--{align || 'left'} size--{size || 'M'}"
+    >
+      {componentText}
+    </a>
+  {:else}
+    <a
+      use:linkable
+      href={url || "/"}
+      use:styleable={styles}
+      class:placeholder
+      class:bold
+      class:italic
+      class:underline
+      class="align--{align || 'left'} size--{size || 'M'}"
+    >
+      {componentText}
+    </a>
+  {/if}
 {/if}
 
 <style>
   a {
     color: var(--spectrum-alias-text-color);
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+  .placeholder {
+    font-style: italic;
+    color: var(--grey-6);
+  }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 14px;
+  }
+  .size--M {
+    font-size: 16px;
+  }
+  .size--L {
+    font-size: 18px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
   }
 </style>