@performant-software/semantic-components 1.0.6-beta.3 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.6-beta.3",
+  "version": "1.0.6",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.6-beta.3",
+    "@performant-software/shared-components": "^1.0.6",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "citeproc": "^2.4.62",

package/src/components/HorizontalCards.js

@@ -19,6 +19,9 @@ import Draggable from './Draggable';
 import './HorizontalCards.css';
 
 type Props = {
+  cardClassName?: string,
+  cardsClassName?: string,
+  className?: string,
   inlineImage?: boolean,
   items: Array<any>,
   onClick?: (item: any, index: number) => void,
@@ -48,6 +51,25 @@ const HorizontalCards = (props: Props) => {
     flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
   }), [pageWidth, marginWidth, props.perPage]);
 
+  /**
+   * Helper function to concatenate class names.
+   *
+   * @type {function(*, *=): string}
+   */
+  const getClassName = useCallback((className, defaultClassName = null) => {
+    const classNames = [];
+
+    if (defaultClassName) {
+      classNames.push(defaultClassName);
+    }
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return classNames.join(' ');
+  }, []);
+
   /**
    * Initializes the page width and scroll pages on the sate.
    *
@@ -142,6 +164,7 @@ const HorizontalCards = (props: Props) => {
   const renderCard = (item, index) => {
     let card = (
       <Card
+        className={getClassName(props.cardClassName)}
         link
         onClick={props.onClick && props.onClick.bind(this, item, index)}
         style={cardStyle}
@@ -229,12 +252,14 @@ const HorizontalCards = (props: Props) => {
 
   return (
     <div
-      className='horizontal-cards'
+      className={getClassName(props.className, 'horizontal-cards')}
     >
       <Ref
         innerRef={ref}
       >
-        <Card.Group>
+        <Card.Group
+          className={getClassName(props.cardsClassName)}
+        >
           { _.map(props.items, renderCard.bind(this)) }
         </Card.Group>
       </Ref>

package/types/components/HorizontalCards.js.flow

@@ -19,6 +19,9 @@ import Draggable from './Draggable';
 import './HorizontalCards.css';
 
 type Props = {
+  cardClassName?: string,
+  cardsClassName?: string,
+  className?: string,
   inlineImage?: boolean,
   items: Array<any>,
   onClick?: (item: any, index: number) => void,
@@ -48,6 +51,25 @@ const HorizontalCards = (props: Props) => {
     flex: `0 0 ${(pageWidth / props.perPage) - marginWidth}px`
   }), [pageWidth, marginWidth, props.perPage]);
 
+  /**
+   * Helper function to concatenate class names.
+   *
+   * @type {function(*, *=): string}
+   */
+  const getClassName = useCallback((className, defaultClassName = null) => {
+    const classNames = [];
+
+    if (defaultClassName) {
+      classNames.push(defaultClassName);
+    }
+
+    if (className) {
+      classNames.push(className);
+    }
+
+    return classNames.join(' ');
+  }, []);
+
   /**
    * Initializes the page width and scroll pages on the sate.
    *
@@ -142,6 +164,7 @@ const HorizontalCards = (props: Props) => {
   const renderCard = (item, index) => {
     let card = (
       <Card
+        className={getClassName(props.cardClassName)}
         link
         onClick={props.onClick && props.onClick.bind(this, item, index)}
         style={cardStyle}
@@ -229,12 +252,14 @@ const HorizontalCards = (props: Props) => {
 
   return (
     <div
-      className='horizontal-cards'
+      className={getClassName(props.className, 'horizontal-cards')}
     >
       <Ref
         innerRef={ref}
       >
-        <Card.Group>
+        <Card.Group
+          className={getClassName(props.cardsClassName)}
+        >
           { _.map(props.items, renderCard.bind(this)) }
         </Card.Group>
       </Ref>