fix(logo-grid): styles and functionality fixes (carbon-design-system#…

…6097)

### Related Ticket(s)

carbon-design-system#6040 

### Description

This aligns both React and web components `logo-grid` to the grid, as well as various other styling fixes. Also includes fixes to the web components version behavior where a space would be rendered for the CTA even when it did not exist.

### Changelog

**New**

- company logos

**Changed**

- align both React and web component versions to the grid
- spacing fixes
- fixes web components CTA footer rendering behavior
- use `dds-hr` instead of CSS border

**Removed**

- CTA from `logo grid` stories


<!-- 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: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/src/components/DotcomShell/__stories__/data/content.js

@@ -27,8 +27,14 @@ import imgMd16x9 from '../../../../../../storybook-images/assets/480/fpo--16x9--
 import imgMd16x9_2 from '../../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
 import imgSm16x9 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--003.jpg';
 import imgSm16x9_2 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
-import imgSm1x1 from '../../../../../../storybook-images/assets/320/fpo--1x1--320x320--001.jpg';
 import imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--002.jpg';
+import logoAdobe from '../../../../../../storybook-images/assets/logos/logo-adobe.png';
+import logoCisco from '../../../../../../storybook-images/assets/logos/logo-cisco.png';
+import logoDell from '../../../../../../storybook-images/assets/logos/logo-dell.png';
+import logoMicrosoft from '../../../../../../storybook-images/assets/logos/logo-microsoft.png';
+import logoRabobank from '../../../../../../storybook-images/assets/logos/logo-rabobank.png';
+import logoUsBank from '../../../../../../storybook-images/assets/logos/logo-usbank.png';
+
 import React from 'react';
 
 /**
@@ -282,44 +288,36 @@ const Content = () => (
         heading="Lobortis elementum nibh tellus"
         logosGroup={[
           {
-            title: 'Company A',
-            imgSrc: imgSm1x1,
-            altText: 'Image alt text',
-            href: 'http://example.com/',
+            label: 'Microsoft',
+            imgSrc: logoMicrosoft,
+            altText: 'Microsoft',
           },
           {
-            title: 'Company B',
-            imgSrc: imgSm1x1,
-            altText: 'Image alt text',
-            href: 'http://example.com/',
+            label: 'Dell',
+            imgSrc: logoDell,
+            altText: 'Dell',
           },
           {
-            title: 'Company C',
-            imgSrc: imgSm1x1,
-            altText: 'Image alt text',
-            href: 'http://example.com/',
+            label: 'Rabobank',
+            imgSrc: logoRabobank,
+            altText: 'Rabobank',
           },
           {
-            title: 'Company D',
-            imgSrc: imgSm1x1,
-            altText: 'Image alt text',
-            href: 'http://example.com/',
+            label: 'Adobe',
+            imgSrc: logoAdobe,
+            altText: 'Adobe',
           },
           {
-            title: 'Company E',
-            imgSrc: imgSm1x1,
-            altText: 'Image alt text',
-            href: 'http://example.com/',
+            label: 'US Bank',
+            imgSrc: logoUsBank,
+            altText: 'US Bank',
           },
           {
-            title: 'Company F',
-            imgSrc: imgSm1x1,
-            altText: 'Image alt text',
-            href: 'http://example.com/',
+            label: 'Cisco',
+            imgSrc: logoCisco,
+            altText: 'Cisco',
           },
         ]}
-        ctaCopy="Amet justo donec"
-        ctaHref="https://www.example.com"
       />
 
       <a name="section-6" data-title="Aliquam condimentum interdum" />

packages/react/src/components/LogoGrid/LogoGrid.js

@@ -4,9 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import classNames from 'classnames';
 import ContentBlock from '../../internal/components/ContentBlock/ContentBlock';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings';
+import { HorizontalRule } from '../HorizontalRule';
 import { Image } from '../Image';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -41,12 +41,9 @@ const LogoGrid = ({ heading, logosGroup, ctaCopy, ctaHref, hideBorder }) => {
   return (
     <section
       data-autoid={`${stablePrefix}--logo-grid`}
-      className={classNames(`${prefix}--logo-grid`, {
-        [`${prefix}--logo-grid__no-border`]: hideBorder,
-      })}>
+      className={`${prefix}--logo-grid`}>
       <div className={`${prefix}--logo-grid__container`}>
-        <div
-          className={`${prefix}--logo-grid__wrapper ${prefix}--grid ${prefix}--grid--full-width`}>
+        <div className={`${prefix}--logo-grid__wrapper`}>
           <ContentBlock heading={heading} cta={cta}>
             <div className={`${prefix}--logo-grid__row`}>
               {logosGroup.map((placeholder, index) => (
@@ -67,6 +64,7 @@ const LogoGrid = ({ heading, logosGroup, ctaCopy, ctaHref, hideBorder }) => {
           </ContentBlock>
         </div>
       </div>
+      {!hideBorder && <HorizontalRule />}
     </section>
   );
 };

packages/react/src/components/LogoGrid/__stories__/LogoGrid.stories.js

@@ -6,56 +6,46 @@
  */
 
 import { boolean, text } from '@storybook/addon-knobs';
-import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--004.jpg';
+import logoAdobe from '../../../../../storybook-images/assets/logos/logo-adobe.png';
+import logoCisco from '../../../../../storybook-images/assets/logos/logo-cisco.png';
+import logoDell from '../../../../../storybook-images/assets/logos/logo-dell.png';
 import LogoGrid from '../LogoGrid';
+import logoMicrosoft from '../../../../../storybook-images/assets/logos/logo-microsoft.png';
+import logoRabobank from '../../../../../storybook-images/assets/logos/logo-rabobank.png';
+import logoUsBank from '../../../../../storybook-images/assets/logos/logo-usbank.png';
 import React from 'react';
 import readme from '../README.stories.mdx';
 
 const logos = [
   {
-    label: 'Company A',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
+    label: 'Microsoft',
+    imgSrc: logoMicrosoft,
+    altText: 'Microsoft',
   },
   {
-    label: 'Company B',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
+    label: 'Dell',
+    imgSrc: logoDell,
+    altText: 'Dell',
   },
   {
-    label: 'Company C',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
+    label: 'Rabobank',
+    imgSrc: logoRabobank,
+    altText: 'Rabobank',
   },
   {
-    label: 'Company D',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
+    label: 'Adobe',
+    imgSrc: logoAdobe,
+    altText: 'Adobe',
   },
   {
-    label: 'Company E',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
+    label: 'US Bank',
+    imgSrc: logoUsBank,
+    altText: 'US Bank',
   },
   {
-    label: 'Company F',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
-  },
-  {
-    label: 'Company G',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
-  },
-  {
-    label: 'Company H',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
-  },
-  {
-    label: 'Company I',
-    imgSrc: imgMd4x3,
-    altText: 'Image alt text',
+    label: 'Cisco',
+    imgSrc: logoCisco,
+    altText: 'Cisco',
   },
 ];
 
@@ -68,12 +58,6 @@ export default {
       LogoGrid: ({ groupId }) => ({
         heading: text('Heading (heading)', 'Our customers', groupId),
         logosGroup: logos,
-        ctaCopy: text(
-          'CTA Copy (ctaCopy)',
-          'Lorem ipsum dolor sit amet',
-          groupId
-        ),
-        ctaHref: text('CTA Href (ctaHref)', 'http://local.url.com/', groupId),
         hideBorder: boolean(
           'Hide border (hideBorder): Hide the bottom border',
           false,
@@ -92,17 +76,14 @@ export default {
 };
 
 export const Default = ({ parameters }) => {
-  const { heading, logosGroup, ctaCopy, ctaHref, hideBorder } =
-    parameters?.props?.LogoGrid ?? {};
+  const { heading, logosGroup, hideBorder } = parameters?.props?.LogoGrid ?? {};
   return (
     <div className="bx--grid">
       <div className="bx--row">
         <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-2">
           <LogoGrid
             heading={heading}
             logosGroup={logosGroup}
-            ctaCopy={ctaCopy}
-            ctaHref={ctaHref}
             hideBorder={hideBorder}
           />
         </div>

packages/styles/scss/components/card-group/_card-group.scss

@@ -133,7 +133,7 @@
 
     ::slotted(#{$dds-prefix}-card-group-item),
     .#{$prefix}--card-group__cards__col {
-      background: inherit;
+      background-color: inherit;
       padding: $carbon--spacing-03 0 0 0;
 
       @include carbon--breakpoint('md') {

packages/styles/scss/components/logo-grid/_logo-grid.scss

@@ -15,15 +15,14 @@
 @mixin logo-grid {
   .#{$prefix}--logo-grid,
   :host(#{$dds-prefix}-logo-grid) {
-    padding: $spacing-05;
-
     .#{$prefix}--content-block {
       padding-top: 0;
       padding-bottom: 0;
       background: $inverse-01;
     }
 
-    .#{$prefix}--content-block__heading {
+    .#{$prefix}--content-block__heading,
+    .#{$prefix}--content-layout--logo-grid ::slotted([slot]) {
       margin: $layout-03 0;
       color: $text-01;
 
@@ -38,7 +37,6 @@
 
     .#{$prefix}--content-block__cta {
       margin-top: $layout-01;
-      margin-bottom: $layout-07;
 
       @include carbon--make-col-ready;
       @include carbon--make-col(1, 1);
@@ -77,10 +75,10 @@
     }
   }
 
-  .#{$prefix}--logo-grid__container,
-  :host(#{$dds-prefix}-logo-grid):not([hide-border])
-    .#{$prefix}--content-block__cta-row {
-    border-bottom: 1px $ui-04 solid;
+  :host(#{$dds-prefix}-logo-grid) {
+    .#{$prefix}--content-block__cta-row[hidden] {
+      display: none;
+    }
   }
 
   .#{$prefix}--logo-grid__no-border {
@@ -98,19 +96,24 @@
   }
 
   .#{$prefix}--logo-grid__row {
-    @include carbon--make-row;
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-left: calc(-1 * #{$carbon--grid-gutter} / 2);
+    margin-right: calc(-1 * #{$carbon--grid-gutter} / 2);
+
+    @include carbon--breakpoint('md') {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include carbon--breakpoint('lg') {
+      grid-template-columns: repeat(3, 1fr);
+    }
   }
 
   .#{$prefix}--logo-grid__col,
   :host(#{$dds-prefix}-logo-grid-item) {
-    @include carbon--make-col-ready;
-    @include carbon--make-col(1, 2);
-
-    margin-bottom: $spacing-07;
-
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col(1, 3);
-    }
+    padding-left: $carbon--grid-gutter--condensed / 2;
+    padding-right: $carbon--grid-gutter--condensed / 2;
   }
 
   .#{$prefix}--logo-grid__heading {
@@ -121,8 +124,10 @@
     margin-bottom: $carbon--spacing-07;
   }
 
-  .#{$prefix}--logo-grid__wrapper {
+  .#{$prefix}--logo-grid__wrapper,
+  .#{$prefix}--content-layout--logo-grid {
     width: 100%;
+    margin-bottom: $layout-07;
   }
 
   :host(#{$dds-prefix}-logo-grid-link) ::slotted(svg) {
@@ -139,12 +144,16 @@
 
   .#{$prefix}--content-layout--logo-grid {
     display: grid;
-
     grid-template:
       'heading' auto
       'body' auto
       'footer' auto / 1fr;
   }
+
+  dds-hr,
+  .#{$prefix}--hr {
+    @include hang;
+  }
 }
 @include exports('logo-grid') {
   @include logo-grid;

packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts

@@ -191,10 +191,6 @@ const StoryContent = ({ type = 'default' }) =>
                     <dds-logo-grid-item default-src="${elem.imgSrc}" alt="${elem.altText}"></dds-logo-grid-item>
                   `
                 )}
-              <dds-logo-grid-link href="https://example.com">
-                <p>Amet justo donec</p>
-                ${ArrowRight20({ slot: 'footer' })}
-              </dds-logo-grid-link>
             </dds-logo-grid>
 
             <a name="6" data-title="Aliquam condimentum interdum"></a>