Align v10.33 (#619)

* chore(deps-dev): upgrade carbon-components to v10.33.0

* fix(clickable-tile): support disabled state for ClickableTile

* fix(aspect-ratio): add missing 3x2 ratio

* docs: update number of supported chart types

* feat(link): support link with icon

* refactor(outbound-link): use icon prop

* fix(search): wrap search icon with div

docs/src/COMPONENT_API.json

@@ -202,7 +202,7 @@
           "name": "ratio",
           "kind": "let",
           "description": "Specify the aspect ratio",
-          "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
+          "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
           "value": "\"2x1\"",
           "isFunction": false,
           "constant": false,
@@ -767,6 +767,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "disabled",
+          "kind": "let",
+          "description": "Set to `true` to disable the tile",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "href",
           "kind": "let",
@@ -779,14 +789,14 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "a" },
-        { "type": "forwarded", "name": "keydown", "element": "a" },
-        { "type": "forwarded", "name": "mouseover", "element": "a" },
-        { "type": "forwarded", "name": "mouseenter", "element": "a" },
-        { "type": "forwarded", "name": "mouseleave", "element": "a" }
+        { "type": "forwarded", "name": "click", "element": "Link" },
+        { "type": "forwarded", "name": "keydown", "element": "Link" },
+        { "type": "forwarded", "name": "mouseover", "element": "Link" },
+        { "type": "forwarded", "name": "mouseenter", "element": "Link" },
+        { "type": "forwarded", "name": "mouseleave", "element": "Link" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "a" }
+      "rest_props": { "type": "InlineComponent", "name": "Link" }
     },
     {
       "moduleName": "CodeSnippet",
@@ -4348,7 +4358,7 @@
           "name": "ratio",
           "kind": "let",
           "description": "Specify the aspect ratio for the image wrapper",
-          "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
+          "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
           "isFunction": false,
           "constant": false,
           "reactive": false
@@ -4604,6 +4614,15 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "icon",
+          "kind": "let",
+          "description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
+          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "disabled",
           "kind": "let",

docs/src/pages/components/AspectRatio.svx

@@ -5,7 +5,7 @@
 
 The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
 
-Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
+Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
 
 ### Default (2x1)
 
@@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
   3x4
 </AspectRatio>
 
+### Ratio 3x2
+
+<AspectRatio ratio="3x2">
+  3x2
+</AspectRatio>
+
 ### Ratio 9x16
 
 <AspectRatio ratio="9x16">

docs/src/pages/components/ClickableTile.svx

@@ -14,3 +14,7 @@ source: Tile/ClickableTile.svelte
 ### Light variant
 
 <ClickableTile light href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>
+
+### Disabled state
+
+<ClickableTile disabled href="https://www.carbondesignsystem.com/">Carbon Design System</ClickableTile>

docs/src/pages/components/ImageLoader.svx

@@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is
 
 If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
 
-Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
+Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
   
 <ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
 

docs/src/pages/components/Link.svx

@@ -4,6 +4,7 @@ components: ["Link", "OutboundLink"]
 
 <script>
   import { Link, OutboundLink } from "carbon-components-svelte";
+  import Carbon16 from "carbon-icons-svelte/lib/Carbon16"
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -32,6 +33,15 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
   <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
 </div>
 
+### Link with icon
+
+Note that `inline` must be `false` when rendering a link with an icon.
+
+<div>
+  Visit the
+  <Link href="https://www.carbondesignsystem.com/" icon={Carbon16}>Carbon Design System</Link>.
+</div>
+
 ### Large size
 
 <Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

docs/src/pages/index.svelte

@@ -100,7 +100,7 @@
       <Column xlg="{5}" lg="{8}" md="{4}">
         <TileCard
           title="Carbon Charts Svelte"
-          subtitle="16 chart types, powered by d3"
+          subtitle="17 chart types, powered by d3"
           target="_blank"
           href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
         />