Merge pull request #568 from vtexdocs/styles/improve-faststore-docs

style(faststore-components): improve faststore content rendering styles
vtexdocs · Jan 11, 2024 · 59a3204 · 59a3204
2 parents 46a226f + 3d0e148
commit 59a3204
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 73 deletions.
diff --git a/src/components/faststore-components/CardList/card-list.module.css b/src/components/faststore-components/CardList/card-list.module.css
@@ -4,6 +4,8 @@
     display: grid;
     row-gap: var(--fs-spacing-3);
     column-gap: var(--fs-spacing-3);
+    list-style-type: none;
+    padding: 0;
   }
 
   .cardList [data-doc-card-grid-columns="4"] {
@@ -42,6 +44,7 @@
     border: 1px solid #e5e7eb;
     border-radius: 4px;
     overflow: hidden;
+    color: #4a4a4a;
   }
 
   .cardList [data-doc-card-item-component] {
@@ -93,13 +96,14 @@
   .cardList [data-doc-card-item-title] {
     margin-bottom: var(--fs-spacing-0);
     font-weight: var(--fs-text-weight-bold);
-    font-size: var(--fs-text-size-3);
+    font-size: var(--fs-text-size-2);
   }
 
   .cardList [data-doc-card-item-content] {
     height: 100%;
     padding: var(--fs-spacing-3);
     background-color: #f1f2f386;
+    font-size: var(--fs-text-size-1);
   }
 
   .cardList [data-doc-card-item-content] p { line-height: 1.35; }
diff --git a/src/components/faststore-components/SectionItem/SectionItem.tsx b/src/components/faststore-components/SectionItem/SectionItem.tsx
@@ -4,9 +4,12 @@ import { Icon, LinkButton } from '@faststore/ui'
 
 export type SectionItemProps = {
   title: string
-  description: string | ReactNode
+  description?: string | ReactNode
   actionPath?: string
   containerStyle?: CSSProperties
+  zoomOut?: boolean
+  fullWidth?: boolean
+  smallHeight?: boolean
 }
 
 const SectionItem = ({
@@ -15,12 +18,22 @@ const SectionItem = ({
   children,
   actionPath,
   containerStyle,
+  zoomOut,
+  fullWidth,
+  smallHeight,
   ...otherProps
 }: PropsWithChildren<SectionItemProps>) => {
   return (
-    <li className="faststore-sectionItem" {...otherProps}>
+    <li
+      className="faststore-sectionItem"
+      {...otherProps}
+      data-doc-section-item-zoom-out={zoomOut}
+      data-doc-section-item-full-width={fullWidth}
+      data-doc-section-item-small-height={smallHeight}
+      {...otherProps}
+    >
       <div style={containerStyle}>{children}</div>
-      <article>
+      <article className="faststore-sectionItem-description">
         <h3 className="nx-font-semibold nx-tracking-tight nx-mt-8 nx-text-2xl">
           {title}
         </h3>

diff --git a/src/components/faststore-components/SectionItem/section-item.module.css b/src/components/faststore-components/SectionItem/section-item.module.css
@@ -1,49 +1,107 @@
-.faststore-sectionList [data-doc-section-grid="row"] {
-  row-gap: var(--fs-spacing-4);
+/* Section List */
+
+.faststore-sectionList [data-doc-section-grid] {
   display: flex;
   flex-direction: column;
+  row-gap: var(--fs-spacing-4);
+  padding: 0;
+}
+
+.faststore-sectionItem-description [data-fs-button] span {
+  color: #e31d58;
+}
+
+@media screen and (min-width: 1024px) {
+  .faststore-sectionList [data-doc-section-grid='row'] {
+    row-gap: var(--fs-spacing-4);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .faststore-sectionList [data-doc-section-grid='column'] {
+    display: grid;
+    grid-gap: var(--fs-spacing-5) var(--fs-spacing-4);
+    padding: 0;
+  }
+
+  .faststore-sectionList
+    [data-doc-section-grid='column'][data-doc-section-grid-columns='2'] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .faststore-sectionList
+    [data-doc-section-grid='column'][data-doc-section-grid-columns='3'] {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
-.faststore-sectionList [data-doc-section-grid="row"] .faststore-sectionItem > div {
-  width: 35%;
+/* Section Item */
+
+.faststore-sectionList
+  [data-doc-section-grid='row']
+  .faststore-sectionItem
+  > div {
   flex-shrink: 0;
   align-self: stretch;
 }
 
-.faststore-sectionList [data-doc-section-grid="column"] {
-  display: grid;
-  grid-gap: var(--fs-spacing-5) var(--fs-spacing-4);
+@media screen and (min-width: 1024px) {
+  .faststore-sectionList
+    [data-doc-section-grid='row']
+    .faststore-sectionItem
+    > div {
+    width: 35%;
+  }
 }
 
-.faststore-sectionList [data-doc-section-grid="column"][data-doc-section-grid-columns="2"] {
-  grid-template-columns: repeat(2, 1fr);
+.faststore-sectionList [data-doc-section-grid='column'] .faststore-sectionItem {
+  display: grid;
+  grid-template-rows: 200px 1fr;
 }
 
-.faststore-sectionList [data-doc-section-grid="column"][data-doc-section-grid-columns="3"] {
-  grid-template-columns: repeat(3, 1fr);
+@media screen and (min-width: 1024px) {
+  .faststore-sectionList
+    [data-doc-section-grid='column']
+    .faststore-sectionItem {
+    grid-template-rows: 2fr 1fr;
+  }
 }
 
-.faststore-sectionList [data-doc-section-grid="column"] .faststore-sectionItem {
-  display: grid;
-  grid-template-rows: 2fr 1fr;
+.faststore-sectionList
+  [data-doc-section-grid='column']
+  .faststore-sectionItem[data-doc-section-item-small-height] {
+  grid-template-rows: 1fr 1fr;
 }
 
-.faststore-sectionList [data-doc-section-grid="column"] .faststore-sectionItem > div {
+.faststore-sectionList
+  [data-doc-section-grid='column']
+  .faststore-sectionItem
+  > div {
   height: 100%;
 }
 
-.faststore-sectionList [data-doc-section-grid="column"] .faststore-sectionItem > article {
+.faststore-sectionList
+  [data-doc-section-grid='column']
+  .faststore-sectionItem
+  > article {
   height: 100%;
   width: 100%;
 }
 
 .faststore-sectionItem {
   display: flex;
+  flex-direction: column;
   align-items: center;
   column-gap: var(--fs-spacing-4);
   row-gap: var(--fs-spacing-3);
 }
 
+@media screen and (min-width: 1024px) {
+  .faststore-sectionItem {
+    flex-direction: row;
+  }
+}
+
 .faststore-sectionItem > div {
   width: 100%;
   display: flex;
@@ -53,7 +111,21 @@
   background-color: var(--fs-color-neutral-bkg);
   border-radius: 4px;
   overflow-y: auto;
-  max-height: 21rem;
+  max-height: 24rem;
+}
+
+.faststore-sectionItem[data-doc-section-item-full-width] > div > * {
+  width: 100%;
+}
+
+.faststore-sectionItem[data-doc-section-item-full-width]
+  [data-fs-product-shelf-items] {
+  width: 100%;
+}
+
+.faststore-sectionItem[data-doc-section-item-zoom-out='true'] > div > * {
+  width: 100%;
+  zoom: 60%;
 }
 
 .faststore-sectionItem > article [data-fs-button] {
@@ -66,16 +138,21 @@
   margin-top: 0;
 }
 
+/* Tokens Links */
+
 .faststore-tokensLinks {
   margin-top: var(--fs-spacing-4);
 }
 
-.faststore-tokensLinks [data-doc-section-grid="column"] .faststore-sectionItem {
+.faststore-tokensLinks [data-doc-section-grid='column'] .faststore-sectionItem {
   display: flex;
   flex-direction: column;
 }
 
-.faststore-tokensLinks [data-doc-section-grid="column"] .faststore-sectionItem > div {
+.faststore-tokensLinks
+  [data-doc-section-grid='column']
+  .faststore-sectionItem
+  > div {
   height: 170px;
   background-repeat: no-repeat;
   background-position: center center;
@@ -94,27 +171,27 @@
 }
 
 .faststore-tokensLinks .faststore-sectionItem:nth-child(1) > div {
-  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/colors___038effcf345acf3d037bc63ed8671455.png");
+  background-image: url('https://vtexhelp.vtexassets.com/assets/docs/src/colors___038effcf345acf3d037bc63ed8671455.png');
 }
 
 .faststore-tokensLinks .faststore-sectionItem:nth-child(2) > div {
-  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/typography___318fbc78202402728a2113e63b47241f.png");
+  background-image: url('https://vtexhelp.vtexassets.com/assets/docs/src/typography___318fbc78202402728a2113e63b47241f.png');
 }
 
 .faststore-tokensLinks .faststore-sectionItem:nth-child(3) > div {
-  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/spacing___ca1d02b0bcc238811347eddc66a807ad.png");
+  background-image: url('https://vtexhelp.vtexassets.com/assets/docs/src/spacing___ca1d02b0bcc238811347eddc66a807ad.png');
 }
 
 .faststore-tokensLinks .faststore-sectionItem:nth-child(4) > div {
-  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/grid___6dfb4949712be94273bc119b7945babf.png");
+  background-image: url('https://vtexhelp.vtexassets.com/assets/docs/src/grid___6dfb4949712be94273bc119b7945babf.png');
 }
 
 .faststore-tokensLinks .faststore-sectionItem:nth-child(5) > div {
-  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/controls___a8302bd539d61653e60cb0aacd1c18e7.png");
+  background-image: url('https://vtexhelp.vtexassets.com/assets/docs/src/controls___a8302bd539d61653e60cb0aacd1c18e7.png');
 }
 
 .faststore-tokensLinks .faststore-sectionItem:nth-child(6) > div {
-  background-image: url("https://vtexhelp.vtexassets.com/assets/docs/src/refinements___ca4c7814b2771e84601f4a6d457612fd.png");
+  background-image: url('https://vtexhelp.vtexassets.com/assets/docs/src/refinements___ca4c7814b2771e84601f4a6d457612fd.png');
 }
 
 .faststore-tokensLinks .faststore-sectionItem > article [data-fs-button] {

diff --git a/src/components/faststore-components/Tokens/token-table.module.css b/src/components/faststore-components/Tokens/token-table.module.css
@@ -2,44 +2,20 @@
   width: 100%;
   display: table;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  border-spacing: 0;
-  border-collapse: unset;
-}
-
-.faststore-tokenTable th {
-  color: var(--fs-color-text);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 10px;
-}
-
-.faststore-tokenTable th:first-child {
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.faststore-tokenTable tr:last-child td {
-  border-bottom: none;
 }
 
 .faststore-tokenTable td {
   width: 50%;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: var(--fs-spacing-1);
 }
 
-.faststore-tokenTable td:first-child {
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-}
-
 .faststore-tokenTable td code {
   margin: 0px 2px;
   padding: 3px 5px;
   white-space: nowrap;
   border-radius: 3px;
+  background-color: var(--md-code-background, #f6f8fa);
   font-size: 13px;
-  border: 1px solid rgb(238, 238, 238);
-  color: rgba(51, 51, 51, 0.9);
-  background-color: rgb(248, 248, 248);
 }
 
 .faststore-tokenTable td code {
@@ -57,9 +33,9 @@
 }
 
 .faststore-tokenDivider td {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: #e7e7ee;
   padding: 0;
-  height: 12px;
+  height: 3px;
 }
 
 .faststore-tokenDivider td:first-of-type {

diff --git a/src/components/faststore-components/Tokens/typeset.module.css b/src/components/faststore-components/Tokens/typeset.module.css
@@ -9,6 +9,7 @@
   background-position: -22px -24px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   overflow: auto;
+  line-height: normal;
 }
 
 .faststore-typeset li {

diff --git a/src/components/faststore-components/markdown-renderer/fastStoreComponents.tsx b/src/components/faststore-components/markdown-renderer/fastStoreComponents.tsx
@@ -36,14 +36,9 @@ const Tabs = ({ items, defaultIndex, children }: TabsProps) => {
 
 const Tab = ({ children }: { children: ReactChildren }) => <Box>{children}</Box>
 
-const Steps = ({ children }: { children: ReactChildren }) => (
-  <Box>{children}</Box>
-)
-
 export default {
   Tabs,
   Tab,
-  Steps,
   ...usageComponents,
   ...components,
   SearchProvider,

diff --git a/src/pages/docs/guides/[slug].tsx b/src/pages/docs/guides/[slug].tsx
@@ -44,6 +44,7 @@ import getFileContributors, {
 import { getLogger } from 'utils/logging/log-util'
 import { flattenJSON, getKeyByValue, getParents } from 'utils/navigation-utils'
 import { LibraryContext } from '@vtexdocs/components'
+import ReactMarkdown from 'react-markdown'
 
 const docsPathsGLOBAL = await getDocsPaths()
 
@@ -123,9 +124,11 @@ const DocumentationPage: NextPage<Props> = ({
                   <Text sx={styles.documentationTitle} className="title">
                     {serialized.frontmatter?.title}
                   </Text>
-                  <Text sx={styles.documentationExcerpt}>
-                    {serialized.frontmatter?.excerpt}
-                  </Text>
+                  <Box sx={styles.documentationExcerpt}>
+                    <ReactMarkdown>
+                      {serialized.frontmatter?.excerpt as string}
+                    </ReactMarkdown>
+                  </Box>
                 </header>
                 <MarkdownRenderer serialized={serialized} />
               </article>