refactor(story-selector): hide story tags, fix selector styles (#485)

* refactor(story-selector): hide additional story tags, fix selector styles * style(story-selector): add empty lines
ubilabs · Aug 19, 2020 · 0bae587 · 0bae587
1 parent 1eeeb87
commit 0bae587
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 20 deletions.
diff --git a/src/scripts/components/stories/story-list-item/story-list-item.styl b/src/scripts/components/stories/story-list-item/story-list-item.styl
@@ -4,8 +4,8 @@
   display: flex
   flex-direction: column
   justify-content: flex-end
-  margin: 5px
-  border: 2px solid $darkGrey1
+  width: 100%
+  height: 100%
   border-radius: 4px
   background-size: cover
 
@@ -30,23 +30,25 @@
   line-height: 30px
 
 .imageInfo
-  display: flex
-  flex-direction: column
-  margin-top: emCalc(130px)
-  padding: 16px
-  height: 40%
+  overflow-y: auto
+  box-sizing: border-box
+  padding: emCalc(16px)
+  min-height: 50%
+  width: 100%
+  height: fit-content
+  border-bottom-right-radius: 2px
+  border-bottom-left-radius: 2px
   background-color: $darkGrey1
   opacity: 0.95
 
 .title
   margin: 0
   margin-top: 5px
   color: $main
-  font-size: 1.125em
+  font-weight: bold
 
 .description
   color: $textDefault
-  font-size: 1.125em
 
 a
   color: $textDefault

diff --git a/src/scripts/components/stories/story-list/story-list.styl b/src/scripts/components/stories/story-list/story-list.styl
@@ -8,8 +8,9 @@
 .storyListGrid
   display: grid
   padding: emCalc(20px)
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
-  grid-gap: 10px
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
+  grid-auto-rows: 300px
+  grid-gap: 16px
 
 .present
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr))
diff --git a/src/scripts/components/stories/story-tags/story-tags.styl b/src/scripts/components/stories/story-tags/story-tags.styl
@@ -5,13 +5,16 @@
   flex-wrap: wrap
 
 .tag
+  overflow: hidden
   margin-top: 0.5em
   margin-right: 0.5em
-  padding: 0.2em 1em
+  padding: remCalc(5px) remCalc(8px)
   border: 1px solid $darkGrey4
   border-radius: 12px
   color: $textDefault
   text-transform: uppercase
+  text-overflow: ellipsis
+  white-space: nowrap
   font-size: 0.8em
   cursor: pointer
 

diff --git a/src/scripts/components/stories/story-tags/story-tags.tsx b/src/scripts/components/stories/story-tags/story-tags.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 import {useDispatch} from 'react-redux';
 import cx from 'classnames';
@@ -14,30 +14,60 @@ interface Props {
 
 const StoryTags: FunctionComponent<Props> = ({tags, selected}) => {
   const dispatch = useDispatch();
+  const [showAllTags, setShowAllTags] = useState(false);
   const toggleTag = (tag: string) => {
     const newTags = selected.includes(tag)
       ? selected.filter(oldTag => oldTag !== tag)
       : selected.concat([tag]);
-
     dispatch(setSelectedStoryTags(newTags));
   };
   const getTagClasses = (tag: string) =>
     cx(styles.tag, selected.includes(tag) && styles.selected);
 
+  const sortedTags = tags.sort((a, b) => {
+    const isSelectedA = selected.includes(a);
+    const isSelectedB = selected.includes(b);
+
+    if (isSelectedA && !isSelectedB) {
+      return -1;
+    }
+
+    if (isSelectedB && !isSelectedA) {
+      return 1;
+    }
+
+    return 0;
+  });
+
+  const tagCount = 3;
+
   return (
     <div className={styles.tags}>
-      {tags.map(tag => (
+      {sortedTags
+        .slice(0, showAllTags ? sortedTags.length : tagCount)
+        .map(tag => (
+          <span
+            className={getTagClasses(tag)}
+            key={tag}
+            onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+              event.preventDefault();
+              event.stopPropagation();
+              toggleTag(tag);
+            }}>
+            <FormattedMessage id={`tags.${tag}`} />
+          </span>
+        ))}
+      {!showAllTags && sortedTags.length > tagCount && (
         <span
-          className={getTagClasses(tag)}
-          key={tag}
+          className={styles.tag}
           onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
             event.stopPropagation();
-            toggleTag(tag);
+            setShowAllTags(true);
           }}>
-          <FormattedMessage id={`tags.${tag}`} />
+          +{sortedTags.length - tagCount}
         </span>
-      ))}
+      )}
     </div>
   );
 };