[Feat]: API section in docs - Add code examples for all wrappers

packages/embla-carousel-docs/package.json

@@ -43,19 +43,19 @@
     "embla-carousel-class-names": "8.0.0-rc21",
     "embla-carousel-react": "8.0.0-rc21",
     "focus-trap-react": "^8.10.0",
-    "gatsby": "^5.10.0",
-    "gatsby-plugin-layout": "^4.4.0",
-    "gatsby-plugin-manifest": "^5.4.0",
-    "gatsby-plugin-mdx": "^5.4.0",
+    "gatsby": "^5.13.3",
+    "gatsby-plugin-layout": "^4.13.1",
+    "gatsby-plugin-manifest": "^5.13.1",
+    "gatsby-plugin-mdx": "^5.13.1",
     "gatsby-plugin-react-svg": "^3.3.0",
-    "gatsby-plugin-sitemap": "^6.10.0",
-    "gatsby-plugin-styled-components": "^6.4.0",
-    "gatsby-remark-autolink-headers": "^6.4.0",
-    "gatsby-source-filesystem": "^5.4.0",
+    "gatsby-plugin-sitemap": "^6.13.1",
+    "gatsby-plugin-styled-components": "^6.13.1",
+    "gatsby-remark-autolink-headers": "^6.13.1",
+    "gatsby-source-filesystem": "^5.13.1",
     "inter-ui": "^3.19.3",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^1.3.5",
-    "prismjs": "^1.26.0",
+    "prismjs": "^1.29.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-intersection-observer": "^8.33.1",

packages/embla-carousel-docs/src/components/Header/HeaderLogo.tsx

@@ -6,8 +6,14 @@ import { MEDIA } from 'consts/breakpoints'
 import { COLORS } from 'consts/themes'
 import { SPACINGS } from 'consts/spacings'
 import { FONT_SIZES, FONT_WEIGHTS } from 'consts/fontSizes'
+import { BORDER_SIZES } from 'consts/border'
 import { LinkBare } from 'components/Link/LinkBare'
-import { SiteLogo } from 'components/SiteLogo/SiteLogo'
+import {
+  LogoDarkIcon,
+  LogoImage,
+  LogoLightIcon,
+  SiteLogo
+} from 'components/SiteLogo/SiteLogo'
 
 const HeaderLogoWrapper = styled(LinkBare)`
   color: ${COLORS.TEXT_HIGH_CONTRAST};
@@ -24,16 +30,19 @@ const HeaderLogoWrapper = styled(LinkBare)`
 `
 
 const HeaderLogoImage = styled(SiteLogo)`
-  ${createSquareSizeStyles('2.8rem')};
+  ${createSquareSizeStyles('4rem')};
+  border: ${BORDER_SIZES.DETAIL} solid ${COLORS.DETAIL_LOW_CONTRAST};
+  border-radius: 50%;
   margin-right: ${SPACINGS.CUSTOM(({ ONE }) => ONE + 0.2)};
   display: flex;
 
   ${MEDIA.MIN_XXS} {
-    ${createSquareSizeStyles('3rem')};
+    ${createSquareSizeStyles('4.4rem')};
   }
 
-  > img {
+  > ${LogoImage}, > ${LogoLightIcon}, > ${LogoDarkIcon} {
     ${createSquareSizeStyles('100%')};
+    padding: ${SPACINGS.ONE};
   }
 `
 

packages/embla-carousel-docs/src/components/Mdx/Components/Blockquote.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+import { COLORS } from 'consts/themes'
+import { SPACINGS } from 'consts/spacings'
+import { BORDER_SIZES } from 'consts/border'
+
+export const Blockquote = styled.blockquote`
+  padding-left: ${SPACINGS.FOUR};
+  border-left: ${BORDER_SIZES.ACCENT_VERTICAL} solid
+    ${COLORS.DETAIL_LOW_CONTRAST};
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+`

packages/embla-carousel-docs/src/components/Mdx/Components/Hr.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import { COLORS } from 'consts/themes'
+import { BORDER_SIZES } from 'consts/border'
+import { SPACINGS } from 'consts/spacings'
+import { HEADING_TOP_SPACING } from '../Styles/heading'
+
+const DECORATION_WIDTH = SPACINGS.CUSTOM(({ EIGHT }) => EIGHT + 0.2)
+
+export const Hr = styled.hr`
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: ${BORDER_SIZES.DETAIL} solid ${COLORS.DETAIL_MEDIUM_CONTRAST};
+  margin-top: ${HEADING_TOP_SPACING};
+  margin-bottom: ${HEADING_TOP_SPACING};
+  width: ${DECORATION_WIDTH};
+  background-color: ${COLORS.DETAIL_MEDIUM_CONTRAST};
+`

packages/embla-carousel-docs/src/components/Mdx/Components/Link.tsx

@@ -1,12 +1,25 @@
 import React, { AnchorHTMLAttributes } from 'react'
+import styled, { css } from 'styled-components'
+import { CODE_HIGHLIGHT_CLASS_NAME } from './Code'
+import { BRAND_GRADIENT_TEXT_STYLES } from 'consts/gradients'
 import { LinkContent } from 'components/Link/LinkContent'
 import { LinkBare } from 'components/Link/LinkBare'
 
+const linkStyles = css`
+  .${CODE_HIGHLIGHT_CLASS_NAME} > span {
+    ${BRAND_GRADIENT_TEXT_STYLES};
+  }
+`
+
+const LinkContentStyled = styled(LinkContent)`
+  ${linkStyles};
+`
+
 type PropType = AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const Link = (props: PropType) => {
   const { className, href = '' } = props
   const classList = className?.split(' ') || []
-  const Link = classList.indexOf('anchor') > -1 ? LinkBare : LinkContent
+  const Link = classList.indexOf('anchor') > -1 ? LinkBare : LinkContentStyled
   return <Link to={href} {...props} />
 }

packages/embla-carousel-docs/src/components/Mdx/Components/PrismSyntaxHighlight.tsx

@@ -18,10 +18,11 @@ type PropType = {
 export const PrismSyntaxHighlight = (props: PropType) => {
   const { children, className } = props
 
-  const { language, highlightedLines } = useMemo(() => {
-    const { language, highlight } = parseCodeBlockProps(className)
+  const { asLanguage, language, highlightedLines } = useMemo(() => {
+    const { asLanguage, language, highlight } = parseCodeBlockProps(className)
     return {
       language,
+      asLanguage,
       highlightedLines: parseHighlightedLines(highlight)
     }
   }, [className])
@@ -32,7 +33,7 @@ export const PrismSyntaxHighlight = (props: PropType) => {
         <Highlight
           {...defaultProps}
           code={children}
-          language={language}
+          language={asLanguage || language}
           theme={undefined}
         >
           {({ className, tokens, getLineProps, getTokenProps }) => (

packages/embla-carousel-docs/src/components/Mdx/Mdx.tsx

@@ -4,7 +4,9 @@ import { MdxStyles } from './Styles'
 import { Link } from 'components/Mdx/Components/Link'
 import { Pre } from 'components/Mdx/Components/Pre'
 import { Code } from 'components/Mdx/Components/Code'
+import { Hr } from './Components/Hr'
 import { H1 } from 'components/Mdx/Components/H1'
+import { Blockquote } from './Components/Blockquote'
 import { RepositoryLink } from 'components/Mdx/Components/RepositoryLink'
 import { PageChildLinks } from 'components/Mdx/Components/PageChildLinks'
 import { Admonition } from 'components/Mdx/Components/Admonition'
@@ -32,7 +34,9 @@ export const Mdx = (props: PropType) => {
           BrandPrimaryText,
           BrandSecondaryText,
           BrandAlternativeText,
-          Admonition
+          Admonition,
+          hr: Hr,
+          blockquote: Blockquote
         }}
       >
         {children}

packages/embla-carousel-docs/src/components/Mdx/Styles/code.ts

@@ -9,7 +9,7 @@ import { FONT_SIZES, FONT_WEIGHTS } from 'consts/fontSizes'
 import { CODE_HIGHLIGHT_CLASS_NAME } from '../Components/Code'
 import { PRISM_FRAME_RADIUS } from '../Components/PrismSyntaxFrame'
 import { AdmonitionWrapper } from '../Components/Admonition'
-import { createScrollBarStyles } from 'consts/scrollBars'
+import { SCROLLBAR_SIZE, createScrollBarStyles } from 'consts/scrollBars'
 import {
   PRISM_HIGHLIGHT_CLASS_NAME,
   PRISM_HIGHLIGHT_LINE_CLASS_NAME
@@ -137,10 +137,17 @@ export const codeStyles = css`
   }
 
   .${PRISM_HIGHLIGHT_CLASS_NAME} pre[class*='language-'] {
-    padding: ${PAGE_FRAME_SPACING} 0;
     background-color: transparent;
     border: 0;
     margin-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: ${PAGE_FRAME_SPACING};
+    padding-bottom: calc(${PAGE_FRAME_SPACING} - ${SCROLLBAR_SIZE});
+
+    @media (hover: none), (hover: on-demand) {
+      padding-bottom: ${PAGE_FRAME_SPACING};
+    }
   }
 
   .${PRISM_HIGHLIGHT_CLASS_NAME} pre code {
@@ -156,8 +163,12 @@ export const codeStyles = css`
   pre {
     ${createScrollBarStyles('x')};
     color: ${COLORS.TEXT_BODY};
-    overflow: auto;
     white-space: pre;
+    overflow-x: scroll;
+
+    @media (hover: none), (hover: on-demand) {
+      overflow-x: auto;
+    }
   }
 
   .token-line {
@@ -178,7 +189,7 @@ export const codeStyles = css`
   .token.function,
   .token.class-name,
   .token.maybe-class-name:not(.imports),
-  .token.literal-property.property,
+  .token.literal-property.property:not(.parameter),
   .token.unit,
   .token.symbol {
     color: ${COLORS.BRAND_ALTERNATIVE};
@@ -203,7 +214,7 @@ export const codeStyles = css`
 
   .token.attr-value,
   .token.keyword,
-  .token.property,
+  .token.property:not(.parameter),
   .token.control,
   .token.directive,
   .token.selector,

packages/embla-carousel-docs/src/components/Mdx/Styles/heading.ts

@@ -76,7 +76,7 @@ export const headingStyles = css`
       }
     }
 
-    > .anchor > div {
+    > .anchor > span {
       position: absolute;
       top: 0;
       left: 0;
@@ -102,18 +102,18 @@ export const headingStyles = css`
     }
   }
 
-  h1:hover .anchor > div > svg,
-  h2:hover .anchor > div > svg,
-  h3:hover .anchor > div > svg,
-  h4:hover .anchor > div > svg,
-  h5:hover .anchor > div > svg,
-  h6:hover .anchor > div > svg,
-  h1 .anchor:focus > div > svg,
-  h2 .anchor:focus > div > svg,
-  h3 .anchor:focus > div > svg,
-  h4 .anchor:focus > div > svg,
-  h5 .anchor:focus > div > svg,
-  h6 .anchor:focus > div > svg {
+  h1:hover .anchor > span > svg,
+  h2:hover .anchor > span > svg,
+  h3:hover .anchor > span > svg,
+  h4:hover .anchor > span > svg,
+  h5:hover .anchor > span > svg,
+  h6:hover .anchor > span > svg,
+  h1 .anchor:focus > span > svg,
+  h2 .anchor:focus > span > svg,
+  h3 .anchor:focus > span > svg,
+  h4 .anchor:focus > span > svg,
+  h5 .anchor:focus > span > svg,
+  h6 .anchor:focus > span > svg {
     visibility: visible;
   }
 `

packages/embla-carousel-docs/src/components/Mdx/Styles/index.ts

@@ -6,17 +6,11 @@ import { TabsWrapper } from 'components/Tabs/Tabs'
 import { TabsPanelWrapper } from 'components/Tabs/TabsPanel'
 import { AdmonitionWrapper, AdmonitionContent } from '../Components/Admonition'
 import { headingStyles } from './heading'
-import { blockquoteStyles } from './blockquote'
 import { listStyles } from './list'
 import { codeStyles } from './code'
-import { linkStyles } from './link'
-import { hrStyles } from './hr'
 
 export const MdxStyles = styled.div`
-  ${blockquoteStyles};
   ${codeStyles};
-  ${hrStyles};
-  ${linkStyles};
 
   color: ${COLORS.TEXT_BODY};
 
@@ -32,20 +26,18 @@ export const MdxStyles = styled.div`
     h4,
     h5,
     h6,
-    hgroup,
     ul,
     ol,
     dl,
-    blockquote,
     p,
+    hgroup,
     address,
     table,
     fieldset,
     figure,
     pre,
-    ul,
-    ol,
     dd,
+    blockquote,
     blockquote code,
     kbd,
     samp,