Initial pass at Layer (new component) carbon-design-system#1892

docs/src/pages/components/Layer.svx

@@ -0,0 +1,16 @@
+<script>
+  import { Layer } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+## Default
+
+<Layer>
+  <p>First layer</p>
+  <Layer>
+    <p>Second layer</p>
+    <Layer>
+      <p>Third layer</p>
+    </Layer>
+  </Layer>
+</Layer>

src/Layer/Layer.svelte

@@ -0,0 +1,45 @@
+<script>
+  import { getContext, setContext } from "svelte";
+
+  /**
+   * Specify the layer level and override any existing levels based on hierarchy.
+   * @type {0 | 1 | 2 }
+   */
+  export let level = undefined;
+
+  /**
+   * Specify the HTML element to render. If none is specified, a `div` is rendered.
+   * @type {typeof import("svelte").SvelteComponent}
+   */
+  export let as = "div";
+
+  /**
+   * Specify the Layer HTML element props
+   * @type {import('svelte/elements').HTMLElementAttributes}
+   */
+  export let layerProps = {};
+
+  /** Set an id for the Layer component */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  let ref = null;
+
+  // If there is no level override, determine the Level based on the hierarchy
+  const parentLevel = getContext("LAYER_CONTEXT");
+  if (level === undefined) {
+    level = typeof parentLevel === "number" ? parentLevel + 1 : 0;
+  }
+  setContext("LAYER_CONTEXT", level);
+</script>
+
+<svelte:element
+  this="{as}"
+  class:bx--layer-one="{level === 0}"
+  class:bx--layer-two="{level === 1}"
+  class:bx--layer-three="{level === 2}"
+  id="{id}"
+  bind:this="{ref}"
+  {...layerProps}
+>
+  <slot />
+</svelte:element>

src/Layer/index.js

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

src/index.js

@@ -58,6 +58,7 @@ export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
 export { ImageLoader } from "./ImageLoader";
 export { InlineLoading } from "./InlineLoading";
+export { Layer } from "./Layer";
 export { Link, OutboundLink } from "./Link";
 export {
   ListBox,

tests/Layer.test.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { Layer } from "carbon-components-svelte";
+</script>
+
+<Layer>
+  <p>First layer</p>
+  <Layer>
+    <p>Second layer</p>
+    <Layer>
+      <p>Third layer</p>
+    </Layer>
+  </Layer>
+</Layer>

types/Layer/Layer.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface LayerProps {
+  /**
+   * Specify the layer level and override any existing levels based on hierarchy.
+   * @default undefined
+   */
+  level?: 0 | 1 | 2;
+
+  /**
+   * Specify the HTML element to render. If none is specified, a `div` is rendered.
+   * @default "div"
+   */
+  as?: typeof import("svelte").SvelteComponent;
+
+  /**
+   * Specify the Layer HTML element props
+   * @default {}
+   */
+  layerProps?: import("svelte/elements").HTMLElementAttributes;
+
+  /**
+   * Set an id for the Layer component
+   * @default "ccs-" + Math.random().toString(36)
+   */
+  id?: string;
+}
+
+export default class Layer extends SvelteComponentTyped<
+  LayerProps,
+  Record<string, any>,
+  { default: {} }
+> {}

types/index.d.ts

@@ -64,6 +64,7 @@ export { default as Row } from "./Grid/Row.svelte";
 export { default as Column } from "./Grid/Column.svelte";
 export { default as ImageLoader } from "./ImageLoader/ImageLoader.svelte";
 export { default as InlineLoading } from "./InlineLoading/InlineLoading.svelte";
+export { default as Layer } from "./Layer/Layer.svelte";
 export { default as Link } from "./Link/Link.svelte";
 export { default as OutboundLink } from "./Link/OutboundLink.svelte";
 export { default as ListBox } from "./ListBox/ListBox.svelte";