npm - @graphcommerce/next-ui - Versions diffs - 3.0.1 - Mend

@graphcommerce/next-ui 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (153) hide show

package/.babelrc +3 -0
package/AnimatedRow/index.tsx +20 -0
package/ApolloError/ApolloErrorAlert.tsx +59 -0
package/ApolloError/ApolloErrorFullPage.tsx +25 -0
package/AppShell/AppShellHeader/appShellHeaderContext.tsx +11 -0
package/AppShell/AppShellHeader/index.tsx +433 -0
package/AppShell/AppShellHeader/useAppShellHeaderContext.tsx +6 -0
package/AppShell/AppShellProvider/index.tsx +18 -0
package/AppShell/AppShellSticky/index.tsx +66 -0
package/AppShell/AppShellTitle/index.tsx +45 -0
package/AppShell/DesktopNavActions.tsx +28 -0
package/AppShell/DesktopNavBar.tsx +110 -0
package/AppShell/FixedFab.tsx +41 -0
package/AppShell/ForwardButton.tsx +53 -0
package/AppShell/FullPageShellBase.tsx +59 -0
package/AppShell/Menu.tsx +7 -0
package/AppShell/MenuFab.tsx +132 -0
package/AppShell/MenuFabSecondaryItem.tsx +32 -0
package/AppShell/MinimalPageShellBase.tsx +22 -0
package/AppShell/PageShellHeader/index.tsx +14 -0
package/AppShell/SheetShellBase/index.tsx +107 -0
package/AppShell/SheetShellBase/useSheetStyles.ts +11 -0
package/AppShell/SheetShellDragIndicator/index.tsx +48 -0
package/AppShell/SheetShellHeader/index.tsx +28 -0
package/AppShell/ShellBase.tsx +45 -0
package/AppShell/useFabAnimation.tsx +19 -0
package/AppShell/useFixedFabAnimation.tsx +18 -0
package/AspectRatioContainer/index.tsx +27 -0
package/Blog/BlogAuthor/index.tsx +60 -0
package/Blog/BlogContent/index.tsx +24 -0
package/Blog/BlogHeader/index.tsx +64 -0
package/Blog/BlogList/index.tsx +27 -0
package/Blog/BlogListItem/index.tsx +83 -0
package/Blog/BlogTags/index.tsx +34 -0
package/Blog/BlogTitle/index.tsx +29 -0
package/Button/index.tsx +164 -0
package/ButtonLink/index.tsx +45 -0
package/CHANGELOG.md +1095 -0
package/ChipMenu/index.tsx +130 -0
package/ContainerWithHeader/index.tsx +49 -0
package/Debug/DebugSpacer.tsx +51 -0
package/FlagAvatar/index.tsx +28 -0
package/Form/FormActions.tsx +15 -0
package/Form/FormDivider.tsx +14 -0
package/Form/FormHeader.tsx +27 -0
package/Form/FormRow.tsx +14 -0
package/Form/InputCheckmark.tsx +19 -0
package/Form/index.tsx +62 -0
package/FramerNextPagesSlider/Slide.tsx +71 -0
package/FramerNextPagesSlider/Slider.tsx +39 -0
package/FramerNextPagesSlider/index.ts +1 -0
package/FramerNextPagesSlider/types.ts +3 -0
package/FramerScroller/components/SidebarGallery.tsx +246 -0
package/FramerScroller/components/SidebarSlider.tsx +103 -0
package/FullPageMessage/index.tsx +68 -0
package/Highlight/index.tsx +14 -0
package/IconHeader/index.tsx +109 -0
package/JsonLd/index.tsx +18 -0
package/Page/App.tsx +15 -0
package/Page/Document.tsx +23 -0
package/Page/framerFeatures.ts +4 -0
package/Page/types.ts +19 -0
package/PageLoadIndicator/index.tsx +46 -0
package/PageMeta/index.tsx +40 -0
package/Pagination/index.tsx +123 -0
package/RenderType/index.tsx +40 -0
package/Row/ButtonLinkList/index.tsx +53 -0
package/Row/ColumnOne/index.tsx +11 -0
package/Row/ColumnOneBoxed/index.tsx +27 -0
package/Row/ColumnOneCentered/index.tsx +22 -0
package/Row/ColumnThree/index.tsx +66 -0
package/Row/ColumnTwo/index.tsx +44 -0
package/Row/ColumnTwoSpread/index.tsx +41 -0
package/Row/ColumnTwoWithTop/index.tsx +53 -0
package/Row/ContentLinks/index.tsx +48 -0
package/Row/HeroBanner/index.tsx +102 -0
package/Row/IconBlocks/IconBlock/index.tsx +56 -0
package/Row/IconBlocks/index.tsx +57 -0
package/Row/ParagraphWithSidebarSlide/index.tsx +114 -0
package/Row/Quote/index.tsx +13 -0
package/Row/RowImageText/index.tsx +67 -0
package/Row/RowImageTextBoxed/index.tsx +75 -0
package/Row/SpecialBanner/index.tsx +107 -0
package/Row/index.tsx +13 -0
package/SectionContainer/index.tsx +39 -0
package/SectionHeader/index.tsx +69 -0
package/Separator/index.tsx +33 -0
package/Snackbar/ErrorSnackbar.tsx +9 -0
package/Snackbar/MessageSnackbar.tsx +5 -0
package/Snackbar/MessageSnackbarImpl.tsx +202 -0
package/StarRatingField/index.tsx +58 -0
package/Stepper/Stepper.tsx +45 -0
package/StyledBadge/index.tsx +21 -0
package/Styles/index.tsx +3 -0
package/Styles/responsiveVal.tsx +20 -0
package/SvgImage/SvgImageSimple.tsx +66 -0
package/SvgImage/index.tsx +76 -0
package/TextInputNumber/index.tsx +169 -0
package/Theme/types.ts +63 -0
package/TimeAgo/index.tsx +29 -0
package/Title/index.tsx +71 -0
package/ToggleButton/index.tsx +100 -0
package/ToggleButtonGroup/index.tsx +112 -0
package/UspList/UspListItem.tsx +46 -0
package/UspList/index.tsx +32 -0
package/icons/icon_addresses.svg +17 -0
package/icons/icon_arrow_back.svg +1 -0
package/icons/icon_arrow_forward.svg +1 -0
package/icons/icon_box.svg +6 -0
package/icons/icon_chat.svg +1 -0
package/icons/icon_checkmark.svg +1 -0
package/icons/icon_checkmark_green.svg +1 -0
package/icons/icon_chevron_back.svg +8 -0
package/icons/icon_chevron_down.svg +8 -0
package/icons/icon_chevron_left.svg +8 -0
package/icons/icon_chevron_right.svg +8 -0
package/icons/icon_chevron_up.svg +8 -0
package/icons/icon_close.svg +6 -0
package/icons/icon_close_circle.svg +1 -0
package/icons/icon_collapse_vertical.svg +11 -0
package/icons/icon_customer_service.svg +6 -0
package/icons/icon_email.svg +1 -0
package/icons/icon_email_outline.svg +6 -0
package/icons/icon_expand_vertical.svg +11 -0
package/icons/icon_heart.svg +15 -0
package/icons/icon_home.svg +6 -0
package/icons/icon_id.svg +6 -0
package/icons/icon_invoice_red.svg +7 -0
package/icons/icon_location_red.svg +7 -0
package/icons/icon_lock.svg +6 -0
package/icons/icon_menu.svg +1 -0
package/icons/icon_min.svg +1 -0
package/icons/icon_newspaper.svg +6 -0
package/icons/icon_party.svg +7 -0
package/icons/icon_person.svg +6 -0
package/icons/icon_person_alt.svg +6 -0
package/icons/icon_person_alt_big.svg +15 -0
package/icons/icon_phone.svg +1 -0
package/icons/icon_plus.svg +1 -0
package/icons/icon_sad_face.svg +11 -0
package/icons/icon_sad_shoppingbag.svg +16 -0
package/icons/icon_search.svg +1 -0
package/icons/icon_shopping_bag.svg +7 -0
package/icons/icon_shutdown.svg +6 -0
package/icons/icon_star.svg +6 -0
package/icons/icon_star_filled_muted.svg +6 -0
package/icons/icon_star_yellow.svg +6 -0
package/icons/index.tsx +42 -0
package/index.ts +163 -0
package/package.json +61 -0
package/tsconfig.json +5 -0
package/types.d.ts +13 -0
package/useIntersectionObserver/index.tsx +31 -0

package/PageMeta/index.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import Head from 'next/head'
+// https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
+export type MetaRobots =
+  | 'noindex'
+  | 'nofollow'
+  | 'noarchive'
+  | 'nosnippet'
+  | 'notranslate'
+  | 'noimageindex'
+  | `unavailable_after:${string}`
+  | `max-snippet:${number}`
+  | `max-image-preview:${'none' | 'standard' | 'large'}`
+  | `max-video-preview:${number}`
+type MetaRobotsAll = ['all' | 'none']
+export type PageMetaProps = {
+  title: string
+  canonical?: `http://${string}` | `https://${string}` | string
+  metaDescription?: string
+  metaRobots?: MetaRobotsAll | MetaRobots[]
+}
+export default function PageMeta(props: PageMetaProps) {
+  const { title, canonical, metaDescription, metaRobots = ['all'] } = props
+  if (!(canonical ?? 'http').startsWith('http'))
+    throw new Error(`canonical must start with http:// or https://, '${canonical}' given`)
+  return (
+    <Head>
+      <title>{title.trim()}</title>
+      {metaDescription && (
+        <meta name='description' content={metaDescription.trim()} key='meta-description' />
+      )}
+      <meta name='robots' content={metaRobots.join(',')} key='meta-robots' />
+      {canonical && <link rel='canonical' href={canonical} key='canonical' />}
+    </Head>
+  )
+}

package/Pagination/index.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { PaginationProps, usePagination } from '@material-ui/lab'
+import React from 'react'
+import { UseStyles } from '../Styles'
+import SvgImage from '../SvgImage'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+const useStyles = makeStyles((theme: Theme) => ({
+  pagination: {
+    gridArea: 'pagination',
+    justifyContent: 'center',
+    display: 'grid',
+    gap: 8,
+    gridAutoFlow: 'column',
+    alignItems: 'center',
+    marginBottom: theme.spacings.xxl,
+    [theme.breakpoints.up('md')]: {
+      marginBottom: theme.spacings.lg,
+    },
+    ...theme.typography.body1,
+    '& > *': {
+      whiteSpace: 'nowrap',
+      boxShadow: 'none',
+    },
+  },
+  disabled: {
+    background: 'none !important',
+  },
+  root: {
+    margin: '32px auto 0 auto',
+    marginTop: theme.spacings.lg,
+    marginBottom: theme.spacings.lg,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // fontSize: 18,
+    '& span': {
+      padding: '0 8px 0 0',
+    },
+    '& a': {
+      transition: 'background .25s ease',
+      borderRadius: '100%',
+      height: 40,
+      width: 40,
+      '&:hover': {
+        background: 'rgba(0, 0, 0, 0.04)',
+      },
+    },
+    [theme.breakpoints.down('xs')]: {
+      alignItems: 'center',
+    },
+  },
+  icon: {
+    borderRadius: '100%',
+    padding: 6,
+    height: 40,
+    width: 40,
+  },
+  label: {
+    textAlign: 'center',
+  },
+  labelTitle: {
+    display: 'inline',
+    [theme.breakpoints.down('xs')]: {
+      display: 'block',
+    },
+  },
+}))
+export type PagePaginationProps = {
+  count: number
+  page: number
+  renderLink: (page: number, icon: React.ReactNode, btnProps: any) => React.ReactNode
+} & Omit<PaginationProps, 'count' | 'defaultPage' | 'page' | 'renderItem'> &
+  UseStyles<typeof useStyles>
+/**
+ * Rel="prev" and rel="next" are deprecated by Google.
+ *
+ * Read more: https://ahrefs.com/blog/rel-prev-next-pagination/
+ */
+export default function Pagination(props: PagePaginationProps) {
+  const { count, page, renderLink, classes: styles, ...paginationProps } = props
+  const classes = useStyles(props)
+  const { items } = usePagination({
+    count,
+    defaultPage: 1,
+    page,
+    ...paginationProps,
+  })
+  const prevBtnProps = items[0]
+  const nextBtnProps = items[items.length - 1]
+  const chevronLeft = (
+    <SvgImage
+      src={iconChevronLeft}
+      alt='chevron left'
+      shade={page === 1 ? 'muted' : undefined}
+      classes={{ root: classes.icon }}
+    />
+  )
+  const chevronRight = (
+    <SvgImage
+      src={iconChevronRight}
+      alt='chevron right'
+      shade={page === count ? 'muted' : undefined}
+      classes={{ root: classes.icon }}
+    />
+  )
+  return (
+    <div className={classes.root}>
+      {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
+      <span className={classes.labelTitle}>Page</span>
+      <span className={classes.label}>{`${page} of ${Math.max(1, count)}`}</span>
+      {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}
+    </div>
+  )
+}

package/RenderType/index.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import React from 'react'
+/** To make renderers customizable we need to be able to provide renders for all types */
+type TypeObject = { __typename: string; [index: string]: unknown }
+type FilterTypeByTypename<A extends TypeObject, Typename extends string> = A extends unknown
+  ? A['__typename'] extends Typename
+    ? A
+    : never
+  : never
+type TypeRenderMethod<P> = (props: P) => React.ReactElement | null
+type TypeRenderMap<
+  T extends TypeObject,
+  TypeNames extends string,
+  TAdd extends Record<string, unknown>
+> = {
+  [K in TypeNames]: TypeRenderMethod<FilterTypeByTypename<T, K> & TAdd>
+}
+export type TypeRenderer<
+  T extends TypeObject,
+  TAdd extends Record<string, unknown> = Record<string, unknown>
+> = TypeRenderMap<T, T['__typename'], TAdd>
+/**
+ * A simple array with renderers but with strict typing that validates of the provided Renderer is
+ * actually able to render the Type
+ */
+export default function RenderType<
+  T extends TypeObject,
+  A extends Record<string, unknown> = Record<string, unknown>
+>(props: { renderer: TypeRenderer<T, A> } & FilterTypeByTypename<T, T['__typename']> & A) {
+  const { renderer, __typename, ...typeItemProps } = props
+  const TypeItem: TypeRenderMethod<typeof typeItemProps> = renderer[__typename]
+    ? renderer[__typename]
+    : () => <>{__typename}</>
+  return <TypeItem {...typeItemProps} __typename={__typename} />
+}

package/Row/ButtonLinkList/index.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/styles'
+import React from 'react'
+import Row from '..'
+import SectionContainer from '../../SectionContainer'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      maxWidth: 820,
+    },
+    h1: {
+      textAlign: 'center',
+      ...theme.typography.h2,
+    },
+    overline: {
+      display: 'block',
+      padding: `${theme.spacings.xs} 0`,
+      borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    },
+    links: ({ containsBigLinks }: ButtonLinkListPropsBase) => ({
+      display: 'grid',
+      gridTemplateColumns: containsBigLinks
+        ? undefined
+        : `repeat(auto-fill, minmax(${responsiveVal(210, 350)}, 1fr))`,
+      columnGap: theme.spacings.sm,
+    }),
+  }),
+  { name: 'ButtonLinkList' },
+)
+type ButtonLinkListPropsBase = {
+  title: string
+  links: React.ReactNode
+  containsBigLinks: boolean
+}
+export type ButtonLinkListProps = UseStyles<typeof useStyles> & ButtonLinkListPropsBase
+export default function ButtonLinkList(props: ButtonLinkListProps) {
+  const { title, links } = props
+  const classes = useStyles(props)
+  return (
+    <Row maxWidth='md' className={classes.container}>
+      <SectionContainer labelLeft={title}>
+        <div className={classes.links}>{links}</div>
+      </SectionContainer>
+    </Row>
+  )
+}

package/Row/ColumnOne/index.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { Container, styled } from '@material-ui/core'
+const ColumnOne = styled(Container)(
+  ({ theme }) => ({
+    maxWidth: 820,
+    marginBottom: theme.spacings.lg,
+  }),
+  { name: 'ColumnOne' },
+)
+export default ColumnOne

package/Row/ColumnOneBoxed/index.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { Container, ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '..'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    boxed: {
+      padding: theme.spacings.lg,
+      boxShadow: theme.shadows[24],
+      '& h1, & h2, & h3': {
+        marginTop: 0,
+      },
+    },
+  }),
+  { name: 'ColumnOneBoxed' },
+)
+export default function ColumnOneBoxed(props: ContainerProps) {
+  const { children } = props
+  const classes = useStyles(props)
+  return (
+    <Row {...props}>
+      <div className={classes.boxed}>{children}</div>
+    </Row>
+  )
+}

package/Row/ColumnOneCentered/index.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { ContainerProps, styled } from '@material-ui/core'
+import React from 'react'
+import ColumnOne from '../ColumnOne'
+const Wrapper = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacings.lg,
+  marginTop: theme.spacings.lg,
+  textAlign: 'center',
+  maxWidth: `calc(1050px + calc(${theme.spacings.md} * 2))`,
+  margin: `0 auto`,
+  position: 'relative',
+}))
+export default function ColumnOneCentered(props: ContainerProps) {
+  const { children } = props
+  return (
+    <ColumnOne>
+      <Wrapper>{children}</Wrapper>
+    </ColumnOne>
+  )
+}

package/Row/ColumnThree/index.tsx ADDED Viewed

@@ -0,0 +1,66 @@
+import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gridColumnGap: theme.spacings.md,
+      gridRowGap: theme.spacings.lg,
+      gridTemplateColumns: `1fr`,
+      gridTemplateAreas: `
+        "one"
+        "two"
+        "three"
+      `,
+      '& h2, & h3': {
+        ...theme.typography.h4,
+        [theme.breakpoints.up('md')]: {
+          marginBottom: '-25px',
+        },
+      },
+      '& p': {
+        [theme.breakpoints.up('md')]: {
+          marginTop: '65px',
+        },
+      },
+      [theme.breakpoints.up('sm')]: {
+        gridTemplateColumns: `1fr 1fr`,
+        gridTemplateAreas: `
+        "one two"
+        "three three"
+      `,
+      },
+      [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: `1fr 1fr 1fr`,
+        gridTemplateAreas: '"one two three"',
+      },
+    },
+    colOne: { gridArea: 'one', zIndex: 2 },
+    colTwo: { gridArea: 'two', zIndex: 2 },
+    colThree: { gridArea: 'three', zIndex: 2 },
+  }),
+  { name: 'ColumnThree' },
+)
+export type ColumnThreeProps = UseStyles<typeof useStyles> &
+  Omit<ContainerProps, 'children'> & {
+    colOneContent: React.ReactNode
+    colTwoContent: React.ReactNode
+    colThreeContent: React.ReactNode
+  }
+export default function ColumnThree(props: ColumnThreeProps) {
+  const { colOneContent, colTwoContent, colThreeContent, ...containerProps } = props
+  const classes = useStyles(props)
+  return (
+    <Row className={classes.root} {...containerProps}>
+      <div className={classes.colOne}>{colOneContent}</div>
+      <div className={classes.colTwo}>{colTwoContent}</div>
+      <div className={classes.colThree}>{colThreeContent}</div>
+    </Row>
+  )
+}

package/Row/ColumnTwo/index.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      gridColumnGap: theme.spacings.md,
+      gridRowGap: theme.spacings.lg,
+      display: `grid`,
+      gridTemplateColumns: `1fr`,
+      gridTemplateAreas: `"one" "two"`,
+      '& h2, & h3': {
+        ...theme.typography.h4,
+      },
+      [theme.breakpoints.up('sm')]: {
+        gridTemplateColumns: `1fr 1fr`,
+        gridTemplateAreas: `"one two"`,
+      },
+    },
+    colOne: { gridArea: 'one' },
+    colTwo: { gridArea: 'two' },
+  }),
+  { name: 'ColumnTwo' },
+)
+export type ColumnTwoProps = UseStyles<typeof useStyles> &
+  Omit<ContainerProps, 'children'> & {
+    colOneContent: React.ReactNode
+    colTwoContent: React.ReactNode
+  }
+export default function ColumnTwo(props: ColumnTwoProps) {
+  const { colOneContent, colTwoContent, ...containerProps } = props
+  const classes = useStyles(props)
+  return (
+    <Row maxWidth='lg' {...containerProps} className={classes.root}>
+      <div className={classes.colOne}>{colOneContent}</div>
+      <div className={classes.colTwo}>{colTwoContent}</div>
+    </Row>
+  )
+}

package/Row/ColumnTwoSpread/index.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import { UseStyles } from '../../Styles'
+import ColumnTwo from '../ColumnTwo'
+const useStyles = makeStyles(
+  ({ breakpoints }: Theme) => ({
+    root: {
+      [breakpoints.up('md')]: {
+        gridTemplateColumns: `1fr 1fr 1fr`,
+        gridTemplateAreas: ({ somethingWithNodeLength }: any) =>
+          somethingWithNodeLength ? `"one one two"` : `"one two two"`,
+        '& h2, & h3': {
+          '&:empty': {
+            display: 'block',
+            minHeight: 30,
+          },
+        },
+      },
+      gridTemplateColumns: `1fr`,
+      gridTemplateAreas: `
+        "one"
+        "two"
+      `,
+    },
+  }),
+  { name: 'ColumnTwoSpread' },
+)
+export type ColumnTwoSpreadProps = Omit<ContainerProps, 'children'> &
+  UseStyles<typeof useStyles> & {
+    nodeLength: boolean
+    colOneContent: React.ReactNode
+    colTwoContent: React.ReactNode
+  }
+export default function ColumnTwoSpread(props: ColumnTwoSpreadProps) {
+  const classes = useStyles(props)
+  return <ColumnTwo {...props} classes={classes} />
+}

package/Row/ColumnTwoWithTop/index.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import { Container, makeStyles, Theme } from '@material-ui/core'
+import React, { PropsWithChildren } from 'react'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gap: `${theme.spacings.lg} 0`,
+      gridTemplateAreas: `"top"
+    "left"
+    "right"`,
+      [theme.breakpoints.up('md')]: {
+        gridTemplateAreas: `"top ."
+      "left right"`,
+        gridTemplateColumns: '1fr auto',
+        gap: `${theme.spacings.sm} ${theme.spacings.xl}`,
+      },
+    },
+    top: {
+      gridArea: 'top',
+    },
+    left: {
+      gridArea: 'left',
+    },
+    right: {
+      gridArea: 'right',
+    },
+  }),
+  { name: 'ColumnTwoWithTop' },
+)
+export type ProductDescriptionProps = PropsWithChildren<
+  UseStyles<typeof useStyles> & {
+    top: React.ReactNode
+    left: React.ReactNode
+    right: React.ReactNode
+  }
+>
+export default function ColumnTwoWithTop(props: ProductDescriptionProps) {
+  const { top, left, right } = props
+  const classes = useStyles(props)
+  return (
+    <Row className={classes.root}>
+      <div className={classes.top}>{top}</div>
+      <div className={classes.left}>{left}</div>
+      <div className={classes.right}>{right}</div>
+    </Row>
+  )
+}

package/Row/ContentLinks/index.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { Container, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import React from 'react'
+import { UseStyles } from '../../Styles'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {},
+    scroller: {
+      marginBottom: `${theme.spacings.lg}`,
+      display: 'grid',
+      gridAutoFlow: 'column',
+      justifyContent: 'start',
+      gap: `${theme.spacings.md}`,
+      alignContent: 'center',
+      '& > *': {
+        minWidth: 'max-content',
+      },
+    },
+    title: {
+      fontWeight: 600,
+    },
+  }),
+  { name: 'ContentLinks' },
+)
+export type ContentLinksProps = UseStyles<typeof useStyles> & {
+  title: string
+  children: React.ReactNode
+}
+export default function ContentLinks(props: ContentLinksProps) {
+  const { title, children } = props
+  const classes = useStyles(props)
+  return (
+    <Container className={classes.root} maxWidth={false}>
+      <ScrollerProvider scrollSnapAlign='none'>
+        <Scroller className={classes.scroller} hideScrollbar>
+          <Typography variant='body1' component='h4' className={classes.title}>
+            {title}
+          </Typography>
+          {children}
+        </Scroller>
+      </ScrollerProvider>
+    </Container>
+  )
+}

package/Row/HeroBanner/index.tsx ADDED Viewed

@@ -0,0 +1,102 @@
+import { ContainerProps, Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/styles'
+import { m, useTransform, useViewportScroll } from 'framer-motion'
+import React from 'react'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      [theme.breakpoints.up('md')]: {
+        paddingTop: theme.spacings.xxs,
+      },
+      paddingLeft: 0,
+      paddingRight: 0,
+    },
+    wrapper: {
+      position: 'relative',
+    },
+    copy: {
+      zIndex: 1,
+      color: theme.palette.secondary.contrastText,
+      position: 'relative',
+      display: 'grid',
+      justifyItems: 'center',
+      alignContent: 'center',
+      padding: `${theme.spacings.lg} ${theme.spacings.md}`,
+      minHeight: '90vh',
+      '& > *': {
+        zIndex: 1,
+        maxWidth: 'max-content',
+      },
+      [theme.breakpoints.up('md')]: {
+        width: '70%',
+      },
+      [theme.breakpoints.up('lg')]: {
+        padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
+        width: '50%',
+      },
+    },
+    asset: {
+      position: 'absolute',
+      top: '0',
+      zIndex: 0,
+      width: '100%',
+      height: '100%',
+      display: 'grid',
+      justifyItems: 'center',
+      overflow: 'hidden',
+      '& video': {
+        objectFit: 'cover',
+        width: '100%',
+        height: '100%',
+      },
+      [theme.breakpoints.up('md')]: {
+        height: '100%',
+      },
+    },
+  }),
+  { name: 'HeroBanner' },
+)
+export type HeroBannerProps = UseStyles<typeof useStyles> &
+  ContainerProps & {
+    pageLinks: React.ReactNode
+    videoSrc: string
+    children: React.ReactNode
+  }
+export default function HeroBanner(props: HeroBannerProps) {
+  const { pageLinks, videoSrc, children, ...containerProps } = props
+  const classes = useStyles(props)
+  const { scrollY } = useViewportScroll()
+  const actionsAnimWidth = useTransform(
+    scrollY,
+    [10, 150],
+    [`calc(100% - ${responsiveVal(30, 60)})`, `calc(100% - ${responsiveVal(0, 0)})`],
+  )
+  return (
+    <Row maxWidth={false} {...containerProps} className={classes.container}>
+      <div className={classes.wrapper}>
+        <div className={classes.copy}>
+          {children}
+          {pageLinks}
+        </div>
+        <div className={classes.asset}>
+          <m.video
+            src={videoSrc}
+            autoPlay
+            muted
+            loop
+            playsInline
+            style={{ width: actionsAnimWidth }}
+          />
+        </div>
+      </div>
+    </Row>
+  )
+}