feat(Layout): mark layout components as deprecated (#1700)

- point users of the components to use tailwind CSS instead
chanzuckerberg · Jul 19, 2023 · 930a369 · 930a369
1 parent b4fd00c
commit 930a369
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 3 deletions.
diff --git a/src/components/Layout/Layout.stories.tsx b/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: (

diff --git a/src/components/Layout/Layout.tsx b/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,

diff --git a/src/components/LayoutContainer/LayoutContainer.stories.tsx b/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>,

diff --git a/src/components/LayoutContainer/LayoutContainer.tsx b/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,

diff --git a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.stories.tsx b/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: (

diff --git a/src/components/LayoutLinelengthContainer/LayoutLinelengthContainer.tsx b/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,

diff --git a/src/components/LayoutSection/LayoutSection.tsx b/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,