#58 use transient attributes in styled-components

Zuehlke · Jul 1, 2023 · 02dfc30 · 02dfc30
1 parent ca39245
commit 02dfc30
Show file tree

Hide file tree

Showing 35 changed files with 101 additions and 98 deletions.
diff --git a/client/app/components/ActionLog/ActionLog.js b/client/app/components/ActionLog/ActionLog.js
@@ -20,13 +20,13 @@ import {
 const ActionLog = ({actionLog, shown}) => {
   const {t} = useContext(L10nContext);
   return (
-    <StyledActionLog shown={shown}>
+    <StyledActionLog $shown={shown}>
       <h4>{t('log')}</h4>
 
       <StyledActionLogInner>
         <StyledActionLogList>
           {actionLog.map((entry) => (
-            <StyledActionLogListItem isError={entry.isError} key={`logline_${entry.logId}`}>
+            <StyledActionLogListItem $isError={entry.isError} key={`logline_${entry.logId}`}>
               <span>{entry.tstamp}</span>
               <span style={{whiteSpace: 'pre-line'}}>{entry.message}</span>
             </StyledActionLogListItem>

diff --git a/client/app/components/ActionLog/_styled.js b/client/app/components/ActionLog/_styled.js
@@ -9,7 +9,7 @@ import {
 } from '../colors';
 
 export const StyledActionLog = styled.div`
-  display: ${({shown}) => (shown ? 'block' : 'none')};
+  display: ${({$shown}) => ($shown ? 'block' : 'none')};
   -webkit-overflow-scrolling: touch;
   box-sizing: border-box;
   padding: 0 8px;
@@ -40,8 +40,8 @@ export const StyledActionLogListItem = styled.li`
   margin-bottom: 8px;
   box-sizing: border-box;
   border: 1px solid ${COLOR_LIGHTER_GREY};
-  border-left: ${({isError}) =>
-    isError ? '2px solid ' + COLOR_WARNING : '1px solid ' + COLOR_LIGHTER_GREY};
+  border-left: ${({$isError}) =>
+    $isError ? '2px solid ' + COLOR_WARNING : '1px solid ' + COLOR_LIGHTER_GREY};
 
   > span {
     display: block;

diff --git a/client/app/components/Backlog/Backlog.js b/client/app/components/Backlog/Backlog.js
@@ -52,7 +52,7 @@ const Backlog = ({
   }, []);
 
   return (
-    <StyledBacklog shown={backlogShown} data-testid="backlog" width={backlogWidth}>
+    <StyledBacklog $shown={backlogShown} data-testid="backlog" $width={backlogWidth}>
       <StyledBacklogWidthDragHandle ref={drag}>
         <div />
         <div />

diff --git a/client/app/components/Backlog/BacklogFileDropWrapper.js b/client/app/components/Backlog/BacklogFileDropWrapper.js
@@ -39,9 +39,9 @@ const BacklogFileDropWrapper = ({importCsvFile, children}) => {
   return (
     <div {...getRootProps()}>
       <StyledFileImportDropZoneOverlay
-        active={isDragActive}
-        isAccept={isDragAccept}
-        isReject={isDragReject}
+        $active={isDragActive}
+        $isAccept={isDragAccept}
+        $isReject={isDragReject}
       />
       {children}
     </div>

diff --git a/client/app/components/Backlog/BacklogToolbar.js b/client/app/components/Backlog/BacklogToolbar.js
@@ -43,7 +43,7 @@ const BacklogToolbar = ({filterQuery, onQueryChanged, sorting, onSortingChanged,
           <StyledDropdown data-testid="sortOptions">
             {sortings.map((sortingItem) => (
               <StyledSortDropdownItem
-                selected={sortingItem.id === sorting.id}
+                $selected={sortingItem.id === sorting.id}
                 className="clickable"
                 key={`sorting-item-${sortingItem.id}`}
                 onClick={() => onSortingOptionClicked(sortingItem)}

diff --git a/client/app/components/Backlog/Story.js b/client/app/components/Backlog/Story.js
@@ -76,10 +76,10 @@ const Story = ({
       id={'story.' + story.id}
       data-testid={isSelected ? 'storySelected' : 'story'}
       onClick={onStoryClicked}
-      selected={isSelected}
-      highlighted={isHighlighted}
+      $selected={isSelected}
+      $highlighted={isHighlighted}
       className={isWaiting ? 'waiting-spinner' : ''}
-      isDragging={isDragging}
+      $isDragging={isDragging}
     >
       <StyledStoryToolbar>
         <i

diff --git a/client/app/components/Backlog/StoryEditForm.js b/client/app/components/Backlog/StoryEditForm.js
@@ -25,7 +25,7 @@ const StoryEditForm = ({story, selectedStoryId, changeStory, cancelEditStory, is
 
   return (
     <StyledStory
-      noShadow={true}
+      $noShadow={true}
       className={isWaiting ? 'waiting-spinner' : ''}
       data-testid={isSelected ? 'storySelected' : 'story'}
     >

diff --git a/client/app/components/Backlog/_styled.js b/client/app/components/Backlog/_styled.js
@@ -12,7 +12,7 @@ import {device, TOPBAR_HEIGHT} from '../dimensions';
 
 export const StyledBacklog = styled.div.attrs((props) => ({
   style: {
-    width: props.shown ? '100%' : props.width + 'px'
+    width: props.$shown ? '100%' : props.$width + 'px'
   }
 }))`
   position: relative;
@@ -22,7 +22,7 @@ export const StyledBacklog = styled.div.attrs((props) => ({
   flex-shrink: 0;
   flex-grow: 0;
 
-  display: ${({shown}) => (shown ? 'flex' : 'none')};
+  display: ${({$shown}) => ($shown ? 'flex' : 'none')};
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
@@ -160,7 +160,7 @@ const dzOverlayRejectBorder = '4px dashed rgba(255, 130, 10, 0.3)';
 const dzOverlayRejectBg = 'rgba(255, 130, 10, 0.06)';
 
 export const StyledFileImportDropZoneOverlay = styled.div`
-  display: ${({active}) => (active ? 'block' : 'none')};
+  display: ${({$active}) => ($active ? 'block' : 'none')};
   position: absolute;
   left: 0;
   right: 0;
@@ -169,18 +169,18 @@ export const StyledFileImportDropZoneOverlay = styled.div`
   margin: 4px;
   font-size: 62px;
   color: rgba(0, 153, 204, 0.25);
-  z-index: ${({active}) => (active ? 1000 : 0)};
+  z-index: ${({$active}) => ($active ? 1000 : 0)};
 
-  border: ${({active, isAccept, isReject}) =>
-    active && isAccept
+  border: ${({$active, $isAccept, $isReject}) =>
+    $active && $isAccept
       ? dzOverlayAcceptBorder
-      : active && isReject
+      : $active && $isReject
       ? dzOverlayRejectBorder
       : 'none'};
-  background: ${({active, isAccept, isReject}) =>
-    active && isAccept
+  background: ${({$active, $isAccept, $isReject}) =>
+    $active && $isAccept
       ? dzOverlayAcceptBg
-      : active && isReject
+      : $active && $isReject
       ? dzOverlayRejectBg
       : 'transparent'};
 `;
@@ -193,17 +193,17 @@ export const StyledStory = styled.div`
   box-sizing: border-box;
   border: 1px solid ${COLOR_LIGHTER_GREY};
   cursor: pointer;
-  opacity: ${(props) => (props.isDragging ? 0 : 1)};
-  border-left: ${({selected, highlighted}) =>
-    selected
+  opacity: ${(props) => (props.$isDragging ? 0 : 1)};
+  border-left: ${({$selected, $highlighted}) =>
+    $selected
       ? '2px solid ' + COLOR_ORANGE
-      : highlighted
+      : $highlighted
       ? '1px solid ' + COLOR_BLUE
       : '1px solid ' + COLOR_LIGHTER_GREY};
 
   &:hover {
-    box-shadow: ${({noShadow}) =>
-      noShadow ? 'none' : 'inset 0 82px 50px -60px rgba(194, 194, 194, 0.45)'};
+    box-shadow: ${({$noShadow}) =>
+      $noShadow ? 'none' : 'inset 0 82px 50px -60px rgba(194, 194, 194, 0.45)'};
   }
 `;
 
@@ -295,7 +295,7 @@ export const StyledBacklogToolbar = styled.form`
 `;
 
 export const StyledSortDropdownItem = styled.div`
-  color: ${({selected}) => (selected ? COLOR_LIGHTER_GREY : 'inherit')};
+  color: ${({$selected}) => ($selected ? COLOR_LIGHTER_GREY : 'inherit')};
 
   > i {
     margin-right: 4px;

diff --git a/client/app/components/EstimationArea/Card.js b/client/app/components/EstimationArea/Card.js
@@ -14,8 +14,8 @@ const Card = ({isWaiting, isSelected, cardCfg, onClick}) => {
     <StyledCard onClick={onClick} data-testid={'estimationCard.' + cardCfg.value}>
       <StyledCardInner
         className={isWaiting ? 'waiting-spinner' : ''}
-        cardColor={cardCfg.color}
-        selected={isSelected}
+        $cardColor={cardCfg.color}
+        $selected={isSelected}
       >
         {cardCfg.label}
       </StyledCardInner>

diff --git a/client/app/components/EstimationArea/ConfidenceButtons.js b/client/app/components/EstimationArea/ConfidenceButtons.js
@@ -44,7 +44,7 @@ const ConfButton = ({label, title, onClick, active}) => (
     className="pure-button"
     type="button"
     onClick={onClick}
-    active={active}
+    $active={active}
     title={title}
   >
     {label}

diff --git a/client/app/components/EstimationArea/EstimationArea.js b/client/app/components/EstimationArea/EstimationArea.js
@@ -64,14 +64,14 @@ const EstimationArea = ({
           textExpandThreshold={500}
         />
 
-        {hasConsensus && applause && <StyledApplauseHighlight color={consensusCardConfig.color} />}
+        {hasConsensus && applause && <StyledApplauseHighlight $color={consensusCardConfig.color} />}
         {hasConsensus && activeEasterEgg && applause && (
           <EasterEgg activeEasterEgg={activeEasterEgg} />
         )}
       </StyledSelectedStory>
 
       {!revealed && (
-        <EstimationAreaButtons alignment="space-between">
+        <EstimationAreaButtons $alignment="space-between">
           <button
             type="button"
             className="pure-button pure-button-primary"
@@ -85,7 +85,7 @@ const EstimationArea = ({
 
       {revealed && (
         <React.Fragment>
-          <EstimationAreaButtons alignment="flex-end">
+          <EstimationAreaButtons $alignment="flex-end">
             <button
               type="button"
               className="pure-button pure-button-primary"

diff --git a/client/app/components/EstimationArea/EstimationSummaryCard.js b/client/app/components/EstimationArea/EstimationSummaryCard.js
@@ -11,10 +11,10 @@ const EstimationSummaryCard = ({t, cardCfg, count, onClick}) => {
     <StyledEstmSummCard
       data-testid={`summaryCard.${cardCfg.value}`}
       onClick={onClick}
-      clickable={true}
+      $clickable={true}
       title={t('settle', {label: cardCfg.label})}
     >
-      <StyledEstmSummCardInner wasEstimated={!!count} cardColor={cardCfg.color}>
+      <StyledEstmSummCardInner $wasEstimated={!!count} $cardColor={cardCfg.color}>
         {cardCfg.label}
         {count && <span>{count}</span>}
       </StyledEstmSummCardInner>

diff --git a/client/app/components/EstimationArea/_styled.js b/client/app/components/EstimationArea/_styled.js
@@ -14,7 +14,7 @@ export const StyledEstimation = styled.div`
 export const EstimationAreaButtons = styled.div`
   margin-top: 16px;
   display: flex;
-  justify-content: ${({alignment}) => alignment};
+  justify-content: ${({$alignment}) => $alignment};
 
   > button {
     margin-right: 4px;
@@ -45,8 +45,8 @@ export const StyledApplauseHighlight = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  border: ${({color}) => '1px solid ' + color};
-  box-shadow: ${({color}) => '0 0 10px ' + color};
+  border: ${({$color}) => '1px solid ' + $color};
+  box-shadow: ${({$color}) => '0 0 10px ' + $color};
   animation-name: ${FlashAnimation};
   animation-duration: 2s;
   animation-timing-function: linear;
@@ -96,12 +96,12 @@ export const StyledCard = styled.button`
 
 export const StyledCardInner = styled.div`
   position: relative;
-  background: ${({cardColor}) => (cardColor ? cardColor : 'white')};
-  color: ${({cardColor}) => (cardColor ? 'white' : 'inherit')};
+  background: ${({$cardColor}) => ($cardColor ? $cardColor : 'white')};
+  color: ${({$cardColor}) => ($cardColor ? 'white' : 'inherit')};
   padding: 28px 0;
   box-sizing: border-box;
   border-radius: 12px;
-  border: ${({selected}) => (selected ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
+  border: ${({$selected}) => ($selected ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
 
   &:hover {
     box-shadow: inset 0 -113px 113px -44px rgba(19, 18, 18, 0.39);
@@ -122,16 +122,16 @@ export const StyledEstmSummCard = styled(StyledCard)`
   &,
   &:focus,
   &:hover {
-    cursor: ${({clickable}) => (clickable ? 'pointer' : 'default')};
+    cursor: ${({$clickable}) => ($clickable ? 'pointer' : 'default')};
   }
 `;
 
 export const StyledEstmSummCardInner = styled(StyledCardInner)`
   height: 80px; /* slightly smaller cards in estimation summary */
   padding: 23px 0;
 
-  opacity: ${({wasEstimated}) => (wasEstimated ? 1 : 0.3)};
-  border: ${({wasEstimated}) => (wasEstimated ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
+  opacity: ${({$wasEstimated}) => ($wasEstimated ? 1 : 0.3)};
+  border: ${({$wasEstimated}) => ($wasEstimated ? '2px solid ' + COLOR_ORANGE : '2px solid white')};
 
   > span {
     display: block;

diff --git a/client/app/components/EstimationMatrix/EstimationMatrixColumn.js b/client/app/components/EstimationMatrix/EstimationMatrixColumn.js
@@ -21,7 +21,7 @@ export const EstimationMatrixColumn = ({stories, columnWidth, cc, onStoryDropped
   }));
 
   return (
-    <StyledEMColumn ref={drop} width={columnWidth} isOver={isOver}>
+    <StyledEMColumn ref={drop} $width={columnWidth} $isOver={isOver}>
       <div>
         <ValueBadge cardValue={cc.value} />
       </div>
@@ -54,7 +54,7 @@ const EstimationMatrixStory = ({color, story}) => {
   );
 
   return (
-    <StyledEMStory ref={drag} color={color} isDragging={isDragging}>
+    <StyledEMStory ref={drag} $color={color} $isDragging={isDragging}>
       <h4>{story.title}</h4>
     </StyledEMStory>
   );

diff --git a/client/app/components/EstimationMatrix/_styled.js b/client/app/components/EstimationMatrix/_styled.js
@@ -36,9 +36,9 @@ export const StyledEMColumn = styled.div`
   margin-top: 4px;
   padding: 0 2px;
   box-sizing: border-box;
-  width: ${({width}) => width}%;
-  background: ${({isOver}) => (isOver ? dzOverlayAcceptBg : 'transparent')};
-  border: ${({isOver}) => (isOver ? dzOverlayAcceptBorder : '4px solid transparent')};
+  width: ${({$width}) => $width}%;
+  background: ${({$isOver}) => ($isOver ? dzOverlayAcceptBg : 'transparent')};
+  border: ${({$isOver}) => ($isOver ? dzOverlayAcceptBorder : '4px solid transparent')};
 
   /** header row **/
 
@@ -65,8 +65,8 @@ export const StyledEMStory = styled.div`
   padding: 4px;
   margin: 2px 0;
   width: 100%;
-  background: ${({color}) => color};
-  opacity: ${({isDragging}) => (isDragging ? 0.2 : 1)};
+  background: ${({$color}) => $color};
+  opacity: ${({$isDragging}) => ($isDragging ? 0.2 : 1)};
   color: white;
   border-radius: 4px;
   text-align: center;

diff --git a/client/app/components/Help/Help.js b/client/app/components/Help/Help.js
@@ -17,7 +17,7 @@ import {StyledSection} from '../common/_styled';
 const Help = ({shown}) => {
   const {t} = useContext(L10nContext);
   return (
-    <StyledHelp shown={shown}>
+    <StyledHelp $shown={shown}>
       <h4>{t('help')}</h4>
 
       <StyledHelpInner>

diff --git a/client/app/components/Help/_styled.js b/client/app/components/Help/_styled.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import {COLOR_BACKGROUND_GREY} from '../colors';
 
 export const StyledHelp = styled.div`
-  display: ${({shown}) => (shown ? 'block' : 'none')};
+  display: ${({$shown}) => ($shown ? 'block' : 'none')};
   -webkit-overflow-scrolling: touch;
   box-sizing: border-box;
   padding: 0 8px;

diff --git a/client/app/components/Landing/Landing.js b/client/app/components/Landing/Landing.js
@@ -42,7 +42,7 @@ const Landing = ({pendingJoin, actionLog}) => {
         <JoinRoomForm />
 
         <StyledEyecatcher>
-          <StyledInfoText small={true}>
+          <StyledInfoText $small={true}>
             <i className="icon-attention"></i>
             {t('disclaimer')}
           </StyledInfoText>

diff --git a/client/app/components/Landing/_styled.js b/client/app/components/Landing/_styled.js
@@ -53,7 +53,7 @@ export const StyledInfoText = styled.div`
   align-items: center;
 
   i {
-    font-size: ${({small}) => (small ? '20px' : '30px')};
+    font-size: ${({$small}) => ($small ? '20px' : '30px')};
     margin-right: 16px;
   }
 `;

diff --git a/client/app/components/Room/Board.js b/client/app/components/Room/Board.js
@@ -51,7 +51,7 @@ const Board = ({roomId, isAStorySelected, sidebarShown, matrixShown, toggleMatri
       {matrixShown && <EstimationMatrix />}
     </StyledBoardCenter>
 
-    <StyledSidebarRight shown={sidebarShown}>
+    <StyledSidebarRight $shown={sidebarShown}>
       <Settings />
       <ActionLog />
       <Help />

diff --git a/client/app/components/Room/MatrixToggle.js b/client/app/components/Room/MatrixToggle.js
@@ -15,7 +15,7 @@ const MatrixToggle = ({onToggle, matrixShown}) => {
           className="pure-button"
           type="button"
           onClick={onToggle}
-          active={!matrixShown}
+          $active={!matrixShown}
           title={'Story'}
         >
           <i className="icon-list-alt" />
@@ -25,7 +25,7 @@ const MatrixToggle = ({onToggle, matrixShown}) => {
           className="pure-button"
           type="button"
           onClick={onToggle}
-          active={matrixShown}
+          $active={matrixShown}
           title={t('matrix')}
         >
           <i className="icon-table" />