feat(layer): first pass at Layer component (#1932)

Closes #1892
carbon-design-system · Mar 23, 2024 · 5031d0b · 5031d0b
1 parent e4670a1
commit 5031d0b
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 2 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from carbon-components-svelte@1.0.0-next.1.
+> 166 components exported from carbon-components-svelte@1.0.0-next.1.
 
 ## Components
 
@@ -66,6 +66,7 @@
 - [`ImageLoader`](#imageloader)
 - [`InlineLoading`](#inlineloading)
 - [`InlineNotification`](#inlinenotification)
+- [`Layer`](#layer)
 - [`Link`](#link)
 - [`ListBox`](#listbox)
 - [`ListBoxField`](#listboxfield)
@@ -1959,6 +1960,26 @@ None.
 | mouseenter | forwarded  | --                                |
 | mouseleave | forwarded  | --                                |
 
+## `Layer`
+
+### Props
+
+| Prop name  | Required | Kind             | Reactive | Type                                                         | Default value          | Description                                                                 |
+| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------ | ---------------------- | --------------------------------------------------------------------------- |
+| level      | No       | <code>let</code> | Yes      | <code>0 &#124; 1 &#124; 2 </code>                            | <code>undefined</code> | Specify the layer level to override any existing levels based on hierarchy. |
+| as         | No       | <code>let</code> | No       | <code>string</code>                                          | <code>"div"</code>     | Specify the HTML element to render.                                         |
+| layerProps | No       | <code>let</code> | No       | <code>import('svelte/elements').HTMLElementAttributes</code> | <code>{}</code>        | Specify the Layer HTML element props                                        |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `Link`
 
 ### Props

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
 {
-  "total": 165,
+  "total": 166,
   "components": [
     {
       "moduleName": "Accordion",
@@ -5754,6 +5754,51 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
     },
+    {
+      "moduleName": "Layer",
+      "filePath": "src/Layer/Layer.svelte",
+      "props": [
+        {
+          "name": "level",
+          "kind": "let",
+          "description": "Specify the layer level to override any existing levels based on hierarchy.",
+          "type": "0 | 1 | 2 ",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": true
+        },
+        {
+          "name": "as",
+          "kind": "let",
+          "description": "Specify the HTML element to render.",
+          "type": "string",
+          "value": "\"div\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "layerProps",
+          "kind": "let",
+          "description": "Specify the Layer HTML element props",
+          "type": "import('svelte/elements').HTMLElementAttributes",
+          "value": "{}",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": []
+    },
     {
       "moduleName": "Link",
       "filePath": "src/Link/Link.svelte",

diff --git a/docs/src/pages/components/Layer.svx b/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>
diff --git a/src/Layer/Layer.svelte b/src/Layer/Layer.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { getContext, setContext } from "svelte";
+
+  /**
+   * Specify the layer level to override any existing levels based on hierarchy.
+   * @type {0 | 1 | 2 }
+   */
+  export let level = undefined;
+
+  /** Specify the HTML element to render. */
+  export let as = "div";
+
+  /**
+   * Specify the Layer HTML element props
+   * @type {import('svelte/elements').HTMLElementAttributes}
+   */
+  export let layerProps = {};
+
+  // 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}"
+  {...layerProps}
+>
+  <slot />
+</svelte:element>
diff --git a/src/Layer/index.js b/src/Layer/index.js
@@ -0,0 +1 @@
+export { default as Layer } from "./Layer.svelte";
diff --git a/src/index.js b/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,

diff --git a/tests/Layer.test.svelte b/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>
diff --git a/types/Layer/Layer.svelte.d.ts b/types/Layer/Layer.svelte.d.ts
@@ -0,0 +1,27 @@
+import type { SvelteComponentTyped } from "svelte";
+
+export interface LayerProps {
+  /**
+   * Specify the layer level to override any existing levels based on hierarchy.
+   * @default undefined
+   */
+  level?: 0 | 1 | 2;
+
+  /**
+   * Specify the HTML element to render.
+   * @default "div"
+   */
+  as?: string;
+
+  /**
+   * Specify the Layer HTML element props
+   * @default {}
+   */
+  layerProps?: import("svelte/elements").HTMLElementAttributes;
+}
+
+export default class Layer extends SvelteComponentTyped<
+  LayerProps,
+  Record<string, any>,
+  { default: {} }
+> {}
diff --git a/types/index.d.ts b/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";