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/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"
         />