From 3dfbd6dfc9e1f0a2a6e1ce0f26695e55fd1b63c1 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 14 Oct 2020 17:28:55 -0700
Subject: [PATCH] feat(aspect-ratio): add AspectRatio component

---
 COMPONENT_INDEX.md                        | 31 ++++++++++++-
 docs/src/pages/components/AspectRatio.svx | 56 +++++++++++++++++++++++
 src/AspectRatio/AspectRatio.svelte        | 17 +++++++
 src/AspectRatio/index.js                  |  1 +
 src/index.js                              |  1 +
 types/index.d.ts                          | 12 +++++
 6 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/components/AspectRatio.svx
 create mode 100644 src/AspectRatio/AspectRatio.svelte
 create mode 100644 src/AspectRatio/index.js

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a5e20b8b..31632eff 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,11 +1,12 @@
 # Component Index
 
-> 147 components exported from carbon-components-svelte 0.16.0
+> 148 components exported from carbon-components-svelte 0.16.0
 
 - Accordion
   - [AccordionSkeleton](#accordionskeleton)
   - [Accordion](#accordion)
   - [AccordionItem](#accordionitem)
+- [AspectRatio](#aspectratio)
 - Breadcrumb
   - [BreadcrumbSkeleton](#breadcrumbskeleton)
   - [Breadcrumb](#breadcrumb)
@@ -289,6 +290,34 @@ No dispatched events.
 
 ---
 
+## AspectRatio
+
+### Import path
+
+```js
+import { AspectRatio } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type                                                                                               | Default value |
+| :-------- | :------------------------------------------------------------------------------------------------- | :------------ |
+| ratio     | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "9x16" &#124; "1x2"</code> | "2x1"         |
+
+### Slots
+
+- `<slot>...</slot>`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
 ## Breadcrumb
 
 ### Import path
diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx
new file mode 100644
index 00000000..46dd8819
--- /dev/null
+++ b/docs/src/pages/components/AspectRatio.svx
@@ -0,0 +1,56 @@
+<script>
+  import { AspectRatio, Tile } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+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: `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"`, `"1x2"`
+
+### Default (2x1)
+
+<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
+  2x1
+</AspectRatio>
+
+### Ratio 16x9
+
+<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
+  16x9
+</AspectRatio>
+
+### Ratio 4x3
+
+<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
+  4x3
+</AspectRatio>
+
+### Ratio 1x1
+
+<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
+  1x1
+</AspectRatio>
+
+### Ratio 3x4
+
+<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
+  3x4
+</AspectRatio>
+
+### Ratio 9x16
+
+<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
+  9x16
+</AspectRatio>
+
+### Ratio 1x2
+
+<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
+  1x2
+</AspectRatio>
+
+### Tile (16x9)
+
+<AspectRatio ratio="16x9">
+  <Tile style="height: 100%">Content</Tile>
+</AspectRatio>
\ No newline at end of file
diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte
new file mode 100644
index 00000000..aeaf4ed0
--- /dev/null
+++ b/src/AspectRatio/AspectRatio.svelte
@@ -0,0 +1,17 @@
+<script>
+  /**
+   * Specify the aspect ratio
+   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} [ratio="2x1"]
+   */
+  export let ratio = "2x1";
+</script>
+
+<div
+  {...$$restProps}
+  class:bx--aspect-ratio="{true}"
+  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
+>
+  <div class:bx--aspect-ratio--object="{true}">
+    <slot />
+  </div>
+</div>
diff --git a/src/AspectRatio/index.js b/src/AspectRatio/index.js
new file mode 100644
index 00000000..875586b3
--- /dev/null
+++ b/src/AspectRatio/index.js
@@ -0,0 +1 @@
+export { default as AspectRatio } from "./AspectRatio.svelte";
diff --git a/src/index.js b/src/index.js
index 48e844d9..fc6665ac 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
+export { AspectRatio } from "./AspectRatio";
 export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
 export { Button, ButtonSkeleton, ButtonSet } from "./Button";
 export { Checkbox, CheckboxSkeleton } from "./Checkbox";
diff --git a/types/index.d.ts b/types/index.d.ts
index 38423c34..37279c68 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -97,6 +97,18 @@ export class AccordionSkeleton extends CarbonSvelteComponent {
   };
 }
 
+export class AspectRatio extends CarbonSvelteComponent {
+  $$prop_def: {
+    /**
+     * Specify the aspect ratio
+     * @default "2x1"
+     */
+    ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
+  };
+
+  $$slot_def: { default: {} };
+}
+
 export class Breadcrumb extends CarbonSvelteComponent {
   $$prop_def: {
     /**