Feat/55 website footer (#191)

* chore: wip

* feat: website footer component

* chore: export types and remove duplicate prop extension

* chore: improve LinkColumn variants

* chore: fix width of demo items

* chore: renamed title

* chore: update docs

* fix: docs

* feat: the standard size footer is now responsive to screen size

* chore: update docs

* chore: renamed icon to OpenSource, made fill color inherited

src/assets/build/open-source.icon.tsx

@@ -0,0 +1,12 @@
+export const OpenSourceIcon = (props: any) => (
+  <svg viewBox="0 0 25 26" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g id="open-source">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.25 0.0669873C12.4047 -0.0223291 12.5953 -0.0223291 12.75 0.0669873L24.2391 6.70019C24.3938 6.7895 24.4891 6.95457 24.4891 7.1332V20.3996C24.4891 20.5782 24.3938 20.7433 24.2391 20.8326L15.4062 25.9322V19.0104L18.3695 17.2995C18.4469 17.2548 18.4945 17.1723 18.4945 17.083V10.4498C18.4945 10.3605 18.4469 10.278 18.3695 10.2333L12.625 6.91669C12.5477 6.87204 12.4524 6.87204 12.375 6.91669L6.63051 10.2333C6.55316 10.278 6.50551 10.3605 6.50551 10.4498V17.083C6.50551 17.1723 6.55316 17.2548 6.63051 17.2995L9.65625 19.0464V25.9683L0.760986 20.8326C0.606286 20.7433 0.510986 20.5782 0.510986 20.3996V7.1332C0.510986 6.95457 0.606286 6.7895 0.760986 6.70019L12.25 0.0669873Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+)

src/components/Button/index.tsx

@@ -56,8 +56,7 @@ const buttonVariants = cva(
           'focus:bg-button-tertiary-focus',
           'focus:border-button-tertiary-focus',
           'focus-visible:shadow-blue',
-          'disabled:text-foreground-subtle',
-          'dark:text-white'
+          'disabled:text-foreground-subtle'
         ],
         success: [
           'bg-button-success',

src/components/WebsiteFooter/index.tsx

@@ -0,0 +1,158 @@
+import { cn } from '@/lib/utils'
+import { VariantProps, cva } from 'class-variance-authority'
+import React, { Children } from 'react'
+
+const websiteFooterVariants = cva(
+  ['flex', 'flex-col', 'w-full', 'items-center', 'px-16', 'py-4'],
+  {
+    variants: {
+      size: {
+        standard: ['sm:[&>div]:flex-row', '[&>div]:flex-col'],
+        sm: [
+          '[&>div]:flex-col',
+          '[&>div]:items-center',
+          '[&>div]:[&>div]:items-center'
+        ]
+      }
+    },
+    defaultVariants: { size: 'standard' }
+  }
+)
+
+const footerStatementVariants = cva(
+  [
+    'flex',
+    'flex-col',
+    'gap-1',
+    'items-center',
+    'text-foreground-subtle',
+    'py-4',
+    'text-sm'
+  ],
+  {
+    variants: {
+      size: {
+        standard: [, 'sm:py-8', 'sm:text-base'],
+        sm: []
+      }
+    },
+    defaultVariants: { size: 'standard' }
+  }
+)
+
+const linkRowVariants = cva([
+  'flex',
+  'w-full',
+  'justify-between',
+  '[&>div]:text-xl',
+  '[&>*]:font-normal',
+  '[&>*]:text-sm'
+])
+
+const linkColumnVariants = cva(
+  [
+    'flex',
+    'flex-col',
+    'px-8',
+    'pb-6',
+    'gap-2',
+    'dark:text-white',
+    '[&>div]:font-semibold',
+    '[&>div]:mb-2',
+    '[&>div]:text-xl',
+    '[&>*]:font-normal',
+    '[&>*]:text-sm',
+    'items-center'
+  ],
+  {
+    variants: {
+      size: {
+        lg: [
+          'sm:gap-3',
+          'sm:[&>div]:text-2xl',
+          'sm:[&>*]:font-normal',
+          'sm:[&>*]:text-sm',
+          'sm:pb-0',
+          'sm:items-start'
+        ],
+        md: ['sm:items-start', 'sm:pb-0'],
+        sm: []
+      }
+    },
+    defaultVariants: {
+      size: 'lg'
+    }
+  }
+)
+
+interface WebsiteFooterProps
+  extends React.ComponentPropsWithoutRef<'div'>,
+    VariantProps<typeof websiteFooterVariants> {}
+{
+}
+
+const WebsiteFooter = React.forwardRef<HTMLDivElement, WebsiteFooterProps>(
+  ({ className, size, ...props }, ref) => (
+    <div
+      className={cn(websiteFooterVariants({ size }), className)}
+      {...props}
+      ref={ref}
+    ></div>
+  )
+)
+
+interface FooterStatementProps
+  extends React.ComponentPropsWithoutRef<'div'>,
+    VariantProps<typeof footerStatementVariants> {}
+
+const FooterStatement = React.forwardRef<HTMLDivElement, FooterStatementProps>(
+  ({ className, size, ...props }, ref) => (
+    <div>
+      <div
+        className={cn(footerStatementVariants({ size }), className)}
+        {...props}
+        ref={ref}
+      ></div>
+    </div>
+  )
+)
+
+interface LinkRowProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+const LinkRow = React.forwardRef<HTMLDivElement, LinkRowProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      className={cn(linkRowVariants(), className)}
+      {...props}
+      ref={ref}
+    ></div>
+  )
+)
+
+interface LinkColumnProps
+  extends React.ComponentPropsWithoutRef<'div'>,
+    VariantProps<typeof linkColumnVariants> {}
+
+const LinkColumn = React.forwardRef<HTMLDivElement, LinkColumnProps>(
+  ({ className, size, title, children, ...props }, ref) => (
+    <div
+      className={cn(linkColumnVariants({ size }), className)}
+      {...props}
+      ref={ref}
+    >
+      {title && <div>{title}</div>}
+      {children}
+    </div>
+  )
+)
+
+export {
+  WebsiteFooter,
+  FooterStatement,
+  LinkColumn,
+  LinkRow,
+  type WebsiteFooterProps,
+  type FooterStatementProps,
+  type LinkColumnProps,
+  type LinkRowProps
+}

src/components/index.ts

@@ -8,4 +8,5 @@ export * from './Tooltip'
 export * from './Input'
 export * from './Switch'
 export * from './Chip'
+export * from './WebsiteFooter'
 export * from './Select'