fix(LeadSpace): simplify leadspace styles and remove BEM concatenatio…

…n for web component creation (carbon-design-system#4068)

### Related Ticket(s)

Web Component: Develop LeadSpace of the React version - Group 1 carbon-design-system#3561

### Description

Simplify the leadspace styles for web component development

### Changelog

**Removed**

- remove most of the center leadspace specific classes and use parent center class selector instead
- remove BEM concatenation

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->

packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

@@ -62589,19 +62589,19 @@ exports[`Storyshots Components|LeadSpace Centered 1`] = `
         data-autoid="dds--leadspace"
       >
         <div
-          className="bx--leadspace--centered__container"
+          className="bx--leadspace__container"
         >
           <div
-            className="bx--leadspace--centered__overlay"
+            className="bx--leadspace__overlay"
           >
             <div
-              className="bx--leadspace--centered--content__container"
+              className="bx--leadspace--content__container"
             >
               <div
-                className="bx--leadspace--centered__row"
+                className="bx--leadspace__row"
               >
                 <h1
-                  className="bx--leadspace--centered__title"
+                  className="bx--leadspace__title"
                 >
                   Leadspace Title
                 </h1>
@@ -62610,10 +62610,10 @@ exports[`Storyshots Components|LeadSpace Centered 1`] = `
                 className="bx--leadspace__content"
               >
                 <div
-                  className="bx--leadspace--centered__row"
+                  className="bx--leadspace__row"
                 >
                   <p
-                    className="bx--leadspace--centered__desc"
+                    className="bx--leadspace__desc"
                     data-autoid="dds--leadspace__desc"
                   >
                     Use this area for a short line of copy to support the title
@@ -62850,19 +62850,19 @@ exports[`Storyshots Components|LeadSpace Centered with image 1`] = `
         }
       >
         <div
-          className="bx--leadspace--centered__container"
+          className="bx--leadspace__container"
         >
           <div
-            className="bx--leadspace--centered__overlay bx--leadspace--centered__gradient"
+            className="bx--leadspace__overlay bx--leadspace--gradient"
           >
             <div
-              className="bx--leadspace--centered--content__container"
+              className="bx--leadspace--content__container"
             >
               <div
-                className="bx--leadspace--centered__row"
+                className="bx--leadspace__row"
               >
                 <h1
-                  className="bx--leadspace--centered__title"
+                  className="bx--leadspace__title"
                 >
                   Leadspace Title
                 </h1>
@@ -62871,10 +62871,10 @@ exports[`Storyshots Components|LeadSpace Centered with image 1`] = `
                 className="bx--leadspace__content"
               >
                 <div
-                  className="bx--leadspace--centered__row"
+                  className="bx--leadspace__row"
                 >
                   <p
-                    className="bx--leadspace--centered__desc"
+                    className="bx--leadspace__desc"
                     data-autoid="dds--leadspace__desc"
                   >
                     Use this area for a short line of copy to support the title

packages/react/src/components/LeadSpace/LeadSpace.js

@@ -35,33 +35,6 @@ const className = (theme, type, image) => {
   });
 };
 
-/**
- * @param {string} type returns centered or default
- * @param {string} element returns element name
- * @returns {string} classnames
- */
-function centeredClassname(type, element) {
-  if (type === 'centered') {
-    return `${prefix}--leadspace--centered__${element}`;
-  } else return `${prefix}--leadspace__${element}`;
-}
-
-/**
- *
- * @param {string} type returns centered or default
- * @param {string} gradient gradient
- * @returns {object} gradient
- */
-function newoverlayClassname(type, gradient) {
-  if (type === 'centered') {
-    return classnames(`${prefix}--leadspace--centered__overlay`, {
-      [`${prefix}--leadspace--centered__gradient`]: gradient,
-    });
-  } else
-    return classnames(`${prefix}--leadspace__overlay`, {
-      [`${prefix}--leadspace--gradient`]: gradient,
-    });
-}
 /**
  *
  * @param {string} type type
@@ -103,27 +76,23 @@ const LeadSpace = ({ buttons, copy, gradient, image, theme, title, type }) => {
       style={background}
       data-autoid={`${stablePrefix}--leadspace`}
       className={className(theme, type, image)}>
-      <div className={centeredClassname(type, 'container')}>
-        <div className={newoverlayClassname(type, gradient)}>
-          <div
-            className={
-              type !== 'centered'
-                ? `${prefix}--leadspace--content__container`
-                : `${prefix}--leadspace--centered--content__container`
-            }>
-            <div className={centeredClassname(type, 'row')}>
-              <h1 className={centeredClassname(type, 'title')}>{title}</h1>
+      <div className={`${prefix}--leadspace__container`}>
+        <div
+          className={classnames(`${prefix}--leadspace__overlay`, {
+            [`${prefix}--leadspace--gradient`]: gradient,
+          })}>
+          <div className={`${prefix}--leadspace--content__container`}>
+            <div className={`${prefix}--leadspace__row`}>
+              <h1 className={`${prefix}--leadspace__title`}>{title}</h1>
             </div>
             <div className={`${prefix}--leadspace__content`}>
               {copy && (
-                <div className={centeredClassname(type, 'row')}>
-                  {copy && (
-                    <p
-                      data-autoid={`${stablePrefix}--leadspace__desc`}
-                      className={centeredClassname(type, 'desc')}>
-                      {copy}
-                    </p>
-                  )}
+                <div className={`${prefix}--leadspace__row`}>
+                  <p
+                    data-autoid={`${stablePrefix}--leadspace__desc`}
+                    className={`${prefix}--leadspace__desc`}>
+                    {copy}
+                  </p>
                 </div>
               )}
               {buttons && buttons.length > 0 && (