feat: add optionalContent prop

Autodesk · Jun 4, 2023 · 7bc7974 · 7bc7974
1 parent 9e83bba
commit 7bc7974
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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