From 7bc79743d629cbd3dc9fc6049e784f0e0a767057 Mon Sep 17 00:00:00 2001
From: Wilbert Mui <wmui51@yahoo.com>
Date: Fri, 2 Jun 2023 09:59:29 -0700
Subject: [PATCH] feat: add optionalContent prop

---
 packages/tile/src/Tile.js                     |  4 ++++
 packages/tile/src/presenters/TilePresenter.js | 16 ++++++++++++++++
 packages/tile/src/presenters/stylesheet.js    |  4 ++++
 3 files changed, 24 insertions(+)

diff --git a/packages/tile/src/Tile.js b/packages/tile/src/Tile.js
index fb2fba071c..f64645735f 100644
--- a/packages/tile/src/Tile.js
+++ b/packages/tile/src/Tile.js
@@ -16,6 +16,7 @@ const Tile = (props) => {
     disabled,
     divider,
     media,
+    optionalContent,
     orientation = "vertical",
     selected,
     statusBadge,
@@ -64,6 +65,7 @@ const Tile = (props) => {
           hasHover={hasHover}
           isPressed={isPressed}
           media={media}
+          optionalContent={optionalContent}
           orientation={orientation}
           selected={selected}
           statusBadge={statusBadge}
@@ -100,6 +102,8 @@ Tile.propTypes = {
   divider: PropTypes.bool,
   /** The media associated with the Tile */
   media: PropTypes.node.isRequired,
+  /** Pass in the additional components for the complex variation */
+  optionalContent: PropTypes.node,
   /** Sets the orientation of the Tile */
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
   /** Sets the selected state of the Tile */
diff --git a/packages/tile/src/presenters/TilePresenter.js b/packages/tile/src/presenters/TilePresenter.js
index ba64deef40..794638be3f 100644
--- a/packages/tile/src/presenters/TilePresenter.js
+++ b/packages/tile/src/presenters/TilePresenter.js
@@ -21,6 +21,7 @@ const TilePresenter = (props) => {
     hasHover,
     isPressed,
     media,
+    optionalContent,
     orientation,
     selected,
     statusBadge,
@@ -58,6 +59,10 @@ const TilePresenter = (props) => {
   );
   const titleClassName = createCustomClassNames(className, "title");
   const subtitleClassName = createCustomClassNames(className, "subtitle");
+  const optionalContentClassName = createCustomClassNames(
+    className,
+    "optional-content-container"
+  );
 
   return (
     <ThemeContext.Consumer>
@@ -135,6 +140,16 @@ const TilePresenter = (props) => {
               >
                 {subtitle}
               </div>
+              {optionalContent && (
+                <div
+                  className={cx([
+                    optionalContentClassName,
+                    css(styles.higTileOptionContentContainer),
+                  ])}
+                >
+                  {optionalContent}
+                </div>
+              )}
             </div>
           </div>
         );
@@ -152,6 +167,7 @@ TilePresenter.propTypes = {
   hasHover: PropTypes.bool,
   isPressed: PropTypes.bool,
   media: PropTypes.node,
+  optionalContent: PropTypes.node,
   orientation: PropTypes.oneOf(AVAILABLE_ORIENTATIONS),
   selected: PropTypes.bool,
   statusBadge: PropTypes.node,
diff --git a/packages/tile/src/presenters/stylesheet.js b/packages/tile/src/presenters/stylesheet.js
index 07a8296e5c..c80fe0f832 100644
--- a/packages/tile/src/presenters/stylesheet.js
+++ b/packages/tile/src/presenters/stylesheet.js
@@ -146,6 +146,10 @@ export default function stylesheet(props, themeData, themeMeta) {
       top: `-${themeData["tile.haloWidth"]}`,
       zIndex: 2,
     },
+    higTileOptionContentContainer: {
+      fontSize: themeData["density.fontSizes.small"],
+      marginBottom: themeData["density.spacings.extraSmall"],
+    },
   };
 
   return customStylesheet