Merge pull request #143 from acid-info/typography-details

Typography details

src/components/Article/Article.Blocks.tsx

@@ -9,10 +9,6 @@ type Props = {
 }
 
 const ArticleBlocks = ({ data }: Props) => {
-  // const {data: searchResultBlocks = []} = useArticleContext()
-  // const ids = searchResultBlocks?.map(
-  //     (block) => (block as SearchResultsItemTypes).doc.id,
-  // )
   const { setTocId, tocId } = useArticleContainerContext()
   const headingElementsRef = useIntersectionObserver(setTocId)
 

src/components/Article/Article.ImageBlockWrapper.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
 import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
+import { lsdUtils } from '@/utils/lsd.utils'
 
 type Props = {
   image: LPE.Image.Document
@@ -10,8 +11,16 @@ export const ArticleImageBlockWrapper = ({ image }: Props) => {
   return (
     <Container>
       <ResponsiveImage data={image} />
+      <figcaption>{image.alt}</figcaption>
     </Container>
   )
 }
 
-const Container = styled.div``
+const Container = styled.figure`
+  margin: 0;
+  padding: 0;
+  figcaption {
+    padding-top: 8px;
+    ${lsdUtils.typography('body3')}
+  }
+`

src/components/Authors/Author.tsx

@@ -30,6 +30,7 @@ const Author = ({
 const AuthorInfo = styled.div`
   display: flex;
   flex-direction: column;
+  text-transform: capitalize;
 `
 
 export default Author

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -19,7 +19,6 @@ export const ResponsiveImage = ({
   data,
   height,
   fill = false,
-  alt = 'alt',
   nextImageProps,
   className,
 }: Props) => {
@@ -51,10 +50,10 @@ export const ResponsiveImage = ({
       }}
     >
       <div>
-        <img src={lazyUrl} alt={alt} />
+        <img src={lazyUrl} alt={data.alt} title={data.alt} />
       </div>
       <div className={imageProps.className}>
-        <Image {...imageProps} alt={alt} />
+        <Image {...imageProps} alt={data.alt} title={data.alt} />
       </div>
     </Container>
   )

src/components/SearchBox/SearchBox.tsx

@@ -17,6 +17,7 @@ import {
 } from 'use-query-params'
 import { useDeepCompareEffect } from 'react-use'
 import { lsdUtils } from '@/utils/lsd.utils'
+import { formatTagText } from '@/utils/string.utils'
 interface SearchBoxProps {
   onSearch?: (query: string, tags: string[], types: LPE.ContentType[]) => void
   tags?: string[]
@@ -227,7 +228,7 @@ const SearchBox = (props: SearchBoxProps) => {
         <Dropdown
           size={'small'}
           placeholder={'Topics'}
-          options={tags.map((t) => ({ name: t, value: t }))}
+          options={tags.map((t) => ({ name: formatTagText(t), value: t }))}
           value={hydrated ? (filterTags as string[]) : []}
           onChange={(n) => setFilterTags(n as string[])}
           multi={true}

src/pages/_app.tsx

@@ -98,6 +98,9 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
           .lsd-dropdown-menu {
             z-index: 99;
           }
+          .lsd-dropdown-item__label {
+            text-transform: capitalize;
+          }
         `}
       />
       <QueryClientProvider client={queryClient}>

src/styles/globals.css

@@ -1 +0,0 @@
-