refactor: faq outline mode (#1310)

* style(faq): adjust margin/layout

* refactor(faq): ux for collapse FAQ

Author: mydearxym

src/containers/thread/HelpThread/store.ts

@@ -13,7 +13,8 @@ import { markStates, toJS } from '@/utils/mobx'
 const log = buildLog('S:HelpThread')
 
 const HelpThread = T.model('HelpThread', {
-  mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'),
+  // mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'full'),
+  mode: T.optional(T.enumeration(['full', 'helpcenter', 'faq']), 'faq'),
 })
   .views((self) => ({
     get curCommunity(): TCommunity {

src/containers/thread/HelpThread/styles/faq_layout.ts

@@ -4,11 +4,10 @@ import css from '@/utils/css'
 import { MainWrapper } from './index'
 
 export const Wrapper = styled(MainWrapper)`
-  ${css.flexColumn()};
-  width: 100%;
-  max-width: 800px;
-  margin-top: 20px;
+  ${css.flexColumn('align-center')};
+  margin-top: 30px;
   padding-left: 22px;
+  padding-right: 0;
   border-right: none;
 `
 export const Holder = styled.div``

src/containers/unit/Footer/styles/desktop_view/simple_layout.ts

@@ -5,8 +5,6 @@ import css, { theme } from '@/utils/css'
 export const Wrapper = styled.div`
   ${css.flex('align-both')};
   width: 100%;
-  // the article page offset
-  padding-right: 40px;
 `
 export const Note = styled.div`
   font-size: 13px;

src/widgets/ChangelogItem/styles/outline_layout/cover.ts

@@ -6,7 +6,7 @@ import { theme } from '@/utils/css'
 export const Wrapper = styled.div`
   position: relative;
   border: 1px solid;
-  border-color: ${theme('border')};
+  border-color: #c2c2c2;
   border-radius: 4px;
   width: 40px;
   height: 50px;
@@ -22,7 +22,8 @@ export const CoverImg = styled(Img)`
 const BaseBar = styled.div`
   position: absolute;
   height: 2px;
-  background: ${theme('border')};
+  background: ${theme('thread.extraInfo')};
+  opacity: 0.4;
   border-radius: 2px;
 `
 export const DescBar = styled(BaseBar)`

src/widgets/ChangelogItem/styles/outline_layout/index.ts

@@ -10,16 +10,22 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
   ${css.flex('align-start')};
-  margin-bottom: 14px;
+  margin-bottom: 20px;
+  cursor: pointer;
 `
 export const Main = styled.div`
   width: 574px;
 `
 export const Title = styled.div`
-  color: ${theme('thread.articleTitle')};
+  color: ${theme('thread.articleDigest')};
   font-size: 15px;
   font-weight: 580;
   margin-bottom: 2px;
+  margin-top: 2px;
+
+  ${Wrapper}:hover & {
+    color: ${theme('thread.articleTitle')};
+  }
 `
 export const Version = styled.span`
   color: ${theme('thread.articleDigest')};
@@ -34,7 +40,11 @@ export const Body = styled.div`
   color: ${theme('thread.articleDigest')};
   ${css.lineClamp(1)};
   font-size: 14px;
-  opacity: 0.9;
+  opacity: 0.65;
+
+  ${Wrapper}:hover & {
+    opacity: 1;
+  }
 `
 export const Footer = styled.div`
   ${css.flex('align-center')};
@@ -66,9 +76,9 @@ export const DateTime = styled.div`
 `
 export const TagsWrapper = styled.div`
   ${css.flex('align-center')};
-  margin-top: 10px;
+  margin-top: 13px;
   opacity: 0.8;
-  margin-right: 2px;
+  margin-right: 3px;
 `
 export const TagDot = styled.div<{ color: string }>`
   ${css.circle(5)};

src/widgets/FaqList/Collapse.tsx

@@ -1,41 +1,62 @@
-import { FC, memo } from 'react'
+import { FC, memo, useState, useCallback } from 'react'
+import { includes, reject } from 'ramda'
+
+import type { TID } from '@/spec'
 
 import {
   Wrapper,
-  Header,
   FAQ,
   FAQTitle,
-  FAQDesc,
+  Header,
+  Title,
+  ArrowIcon,
+  Body,
   MoreLink,
   Section,
-  ArrowIcon,
-  Title,
+  Footer,
 } from './styles/collapse'
 
 import type { TProps as TIndex } from './index'
 
 type TProps = Pick<TIndex, 'articles'>
 
 const Collapse: FC<TProps> = ({ articles }) => {
+  const [openedIDs, setOpenedIDs] = useState<TID[]>([])
+
+  const toggle = useCallback(
+    (id) => {
+      includes(id, openedIDs)
+        ? setOpenedIDs(reject((_id) => _id === id, openedIDs))
+        : setOpenedIDs([id, ...openedIDs])
+    },
+    [openedIDs],
+  )
+
   return (
     <Wrapper>
-      <Header>
-        <FAQ>
-          <FAQTitle>常见问题</FAQTitle>
-        </FAQ>
-      </Header>
-
-      {articles.map((item) => (
-        <Section key={item.title}>
-          <ArrowIcon />
-          <Title>{item.title}</Title>
-        </Section>
-      ))}
-
-      <FAQDesc>
+      <FAQ>
+        <FAQTitle>常见问题</FAQTitle>
+      </FAQ>
+
+      {articles.map((item) => {
+        const isOpend = includes(item.id, openedIDs)
+
+        return (
+          <Section key={item.id}>
+            <Header onClick={() => toggle(item.id)}>
+              <Title $active={isOpend}>{item.title}</Title>
+              <ArrowIcon $active={isOpend} />
+            </Header>
+
+            <Body show={isOpend}>{item.body}</Body>
+          </Section>
+        )
+      })}
+
+      <Footer>
         <div>如有其他疑问，请</div>
         <MoreLink>告诉我们</MoreLink>。
-      </FAQDesc>
+      </Footer>
     </Wrapper>
   )
 }

src/widgets/FaqList/index.tsx

@@ -6,6 +6,7 @@
 
 import { FC, memo } from 'react'
 
+import type { TArticle } from '@/spec'
 import { buildLog } from '@/utils/logger'
 
 import Sidebar from './Sidebar'
@@ -19,38 +20,41 @@ const log = buildLog('c:FaqList:index')
 
 const defaultArticles = [
   {
+    id: '1',
     title: '购买标准版或者高级版是否可开具发票？',
-    body: '',
+    body: '首先很多西方国家员工能摆烂，很大部分原因是他们有资本积累，在行业上游。有主导权和议价权，竞争壁垒高，别人就是可以三五个人占据关键岗位，剩下的事交给别人来做。',
   },
   {
+    id: '2',
     title: '高级版使用过程中如何增加团队人数？',
-    body: '',
+    body: '曾遇见一个沃达丰的小哥，跑跨国业务线，工作之余就去学语言学管理。每次问他去不去摸鱼，他也去，只是期间我会选择玩几局王者，他在旁边看新语言的单词',
   },
   {
+    id: '3',
     title: '小画桌如何保障数据安全？',
-    body: '',
+    body: '有廉价又产出高的不用，选择养这帮喜欢吃大锅饭的人？矛盾冲突是生产力，这个世界运作动力来自于竞争，不管是欧美也好，欠发达地区也好。',
   },
   {
+    id: '4',
     title: '标准版是否可以升级为高级版？',
-    body: '',
+    body: '欧洲当年也内卷，然后罗曼洛夫一家都被扬了，整个苏联的资本家和贵族要么在电线杆上，要么不在俄国境内。',
   },
   {
+    id: '5',
     title: '小画桌语音是否支持额外购买？',
     body: '是否支持7天无理由退款？',
   },
   {
+    id: '6',
     title: '为什么修改了环境变量（或全局变量）值，而引用的地方没有生效？',
-    body: '',
+    body: '再然后只能吃土豆皮的基尔水兵就哗变了，整个德国的贵族和资本家害怕像俄国的同行们一样上电线杆，直接投降。',
   },
 ]
 
 export type TProps = {
   testid?: string
   mode?: 'sidebar' | 'search-hint' | 'collapse'
-  articles?: {
-    title: string
-    body?: string
-  }[]
+  articles?: TArticle[]
 }
 
 const FaqList: FC<TProps> = ({

src/widgets/FaqList/styles/collapse.ts

@@ -1,35 +1,39 @@
 import styled from 'styled-components'
 
+import type { TActive } from '@/spec'
+
 import css, { theme } from '@/utils/css'
 import FAQSVG from '@/icons/FAQ'
-import ArrowSVG from '@/icons/ArrowSolid'
+import ArrowSVG from '@/icons/ArrowSimple'
 
 export const Wrapper = styled.div`
   ${css.flexColumn()};
-`
-export const Header = styled.div`
-  margin-bottom: 20px;
+  width: 55%;
+  max-width: 55%;
+  min-width: 550px;
+  max-width: 550px;
 `
 export const FAQ = styled.div`
-  ${css.flex('align-center')};
+  ${css.flex('align-both')};
+  margin-bottom: 34px;
+  margin-left: -40px;
 `
 export const FAQIcon = styled(FAQSVG)`
-  ${css.size(16)};
+  ${css.size(18)};
   fill: ${theme('thread.articleDigest')};
-  margin-right: 10px;
   margin-top: 2px;
 `
 export const FAQTitle = styled.div`
   color: ${theme('thread.articleTitle')};
   font-size: 20px;
   font-weight: 500;
 `
-export const FAQDesc = styled.div`
-  ${css.flex('align-center')};
+export const Footer = styled.div`
+  ${css.flex('align-both')};
   color: ${theme('thread.articleDigest')};
-  padding-top: 5px;
   font-size: 12px;
-  margin-top: 35px;
+  margin-top: 60px;
+  margin-left: -50px;
 `
 export const MoreLink = styled.div`
   color: ${theme('link')};
@@ -42,25 +46,41 @@ export const MoreLink = styled.div`
   transition: all 0.2s;
 `
 export const Section = styled.div`
-  ${css.flex('align-center')};
-  padding-top: 20px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid;
-  border-bottom-color: ${theme('border')};
+  padding: 18px 0;
+  width: 100%;
 `
-export const ArrowIcon = styled(ArrowSVG)`
-  ${css.size(12)};
-  fill: ${theme('thread.extraInfo')};
-  margin-right: 10px;
+export const Header = styled.div`
+  ${css.flex('align-center', 'justify-between')};
+  cursor: pointer;
 `
-export const Title = styled.div`
-  ${css.lineClamp(1)}
-  color: ${theme('thread.articleDigest')};
+export const Title = styled.div<TActive>`
+  ${css.cutRest('440px')};
+  color: ${({ $active }) =>
+    $active ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: 16px;
   font-weight: 500;
 
-  &:hover {
+  ${Section}:hover & {
     color: ${theme('thread.articleTitle')};
-    cursor: pointer;
   }
 `
+export const Body = styled.div<TActive>`
+  color: ${theme('thread.articleDigest')};
+  font-size: 15px;
+  margin-top: ${({ show }) => (show ? '12px' : 0)};
+  max-height: ${({ show }) => (show ? 'auto' : 0)};
+  line-height: 1.8;
+  overflow: hidden;
+
+  opacity: ${({ show }) => (show ? 1 : 0)};
+  transition: all 0.3s;
+`
+export const ArrowIcon = styled(ArrowSVG)<TActive>`
+  ${css.size(16)};
+  fill: ${theme('thread.extraInfo')};
+  margin-left: 20px;
+  margin-right: 10px;
+  transform: ${({ $active }) => ($active ? 'rotate(270deg)' : 'rotate(90deg)')};
+
+  transition: all 0.5s;
+`

src/widgets/FaqList/styles/index.ts

@@ -3,10 +3,12 @@ import styled from 'styled-components'
 import type { TTestable } from '@/spec'
 
 // import Img from '@/Img'
-// import { theme } from '@/utils/themes'
+import css from '@/utils/css'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
-}))<TTestable>``
+}))<TTestable>`
+  ${css.flexColumn('align-center')};
+`
 
 export const Title = styled.div``