Merge pull request #336 from IBM/aspect-ratio

add AspectRatio component

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

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>

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>

src/AspectRatio/index.js

@@ -0,0 +1 @@
+export { default as AspectRatio } from "./AspectRatio.svelte";

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

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: {
     /**