feat(Layout): mark layout components as deprecated

src/components/Layout/Layout.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -8,7 +9,7 @@ export default {
   title: 'Components/Layout',
   component: Layout,
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
   args: {
     children: (

src/components/Layout/Layout.tsx

@@ -35,10 +35,18 @@ export interface Props {
 }
 
 /**
+ * The Layout components are deprecated and will be removed in an upcoming release.
+ * Instead, please make use of utility libraries, like Tailwind CSS:
+ * * https://tailwindcss.com/docs/display
+ * * https://tailwindcss.com/docs/container
+ * * https://tailwindcss.com/docs/columns
+ *
  * `import {Layout} from "@chanzuckerberg/eds";`
  *
  * Component that controls an overarching page layout. By default, the layout renders
  * a fixed-position left sidebar on larger screens.
+ *
+ * @deprecated
  */
 export const Layout = ({
   behavior,

src/components/LayoutContainer/LayoutContainer.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -10,7 +11,7 @@ export default {
     axe: {
       skip: true,
     },
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
   args: {
     children: <div className="fpo">Layout container</div>,

src/components/LayoutContainer/LayoutContainer.tsx

@@ -24,9 +24,17 @@ export interface Props {
 }
 
 /**
+ * The Layout components are deprecated and will be removed in an upcoming release.
+ * Instead, please make use of utility libraries, like Tailwind CSS:
+ * * https://tailwindcss.com/docs/display
+ * * https://tailwindcss.com/docs/container
+ * * https://tailwindcss.com/docs/columns
+ *
  * `import {LayoutContainer} from "@chanzuckerberg/eds";`
  *
  * Layout container. Caps the width of the content to the maximum width and centers the container.
+ *
+ * @deprecated
  */
 export const LayoutContainer = ({
   className,

src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.stories.tsx

@@ -1,3 +1,4 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
@@ -7,7 +8,7 @@ export default {
   title: 'Components/Linelength Container',
   component: LayoutLinelengthContainer,
   parameters: {
-    badges: ['1.0'],
+    badges: ['1.0', BADGE.DEPRECATED],
   },
   args: {
     children: (

src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.tsx

@@ -15,9 +15,17 @@ export interface Props {
 }
 
 /**
+ * The Layout components are deprecated and will be removed in an upcoming release.
+ * Instead, please make use of utility libraries, like Tailwind CSS:
+ * * https://tailwindcss.com/docs/display
+ * * https://tailwindcss.com/docs/container
+ * * https://tailwindcss.com/docs/columns
+ *
  * `import {LayoutLinelengthContainer} from "@chanzuckerberg/eds";`
  *
  * Component that caps the length of an excerpt of text to be easily readable.
+ *
+ * @deprecated
  */
 export const LayoutLinelengthContainer = ({
   className,

src/components/LayoutSection/LayoutSection.tsx

@@ -19,9 +19,17 @@ export interface Props {
 }
 
 /**
+ * The Layout components are deprecated and will be removed in an upcoming release.
+ * Instead, please make use of utility libraries, like Tailwind CSS:
+ * * https://tailwindcss.com/docs/display
+ * * https://tailwindcss.com/docs/container
+ * * https://tailwindcss.com/docs/columns
+ *
  * `import {LayoutSection} from "@chanzuckerberg/eds";`
  *
  * Layout section.
+ *
+ * @deprecated
  */
 export const LayoutSection = ({
   children,