feat(web): add info card

.github/CODEOWNERS

@@ -132,7 +132,7 @@ codemagic.yaml
 /apps/services/regulations-admin-backend/                                                                @island-is/hugsmidjan
 /apps/services/user-profile/                                                                             @island-is/hugsmidjan @island-is/juni @island-is/aranja
 /apps/web/components/Grant/                                                                              @island-is/hugsmidjan
-/apps/web/components/PlazaCard/                                                                          @island-is/hugsmidjan
+/apps/web/components/InfoCard/                                                                           @island-is/hugsmidjan
 /apps/web/screens/Grants/                                                                                @island-is/hugsmidjan
 /apps/web/screens/Regulations/                                                                           @island-is/hugsmidjan
 /apps/web/components/Regulations/                                                                        @island-is/hugsmidjan

apps/web/components/InfoCard/DetailedInfoCard.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { useWindowSize } from 'react-use'
+
+import {
+  Box,
+  FocusableBox,
+  GridColumn,
+  GridContainer,
+  GridRow,
+  Icon,
+  IconMapIcon,
+  Inline,
+  LinkV2,
+  Stack,
+  Tag,
+  Text,
+} from '@island.is/island-ui/core'
+import { ActionCardProps } from '@island.is/island-ui/core/types'
+import { theme } from '@island.is/island-ui/theme'
+import { isDefined } from '@island.is/shared/utils'
+
+import { BaseProps } from './InfoCard'
+import * as styles from './InfoCard.css'
+
+const eyebrowColor = 'blueberry600'
+
+export type DetailedProps = BaseProps & {
+  logo?: string
+  logoAlt?: string
+  subEyebrow?: string
+  //max 5 lines
+  detailLines?: Array<{
+    icon: IconMapIcon
+    text: string
+  }>
+  tags?: Array<ActionCardProps['tag']>
+}
+
+export const DetailedInfoCard = ({
+  title,
+  description,
+  size = 'medium',
+  eyebrow,
+  subEyebrow,
+  detailLines,
+  tags,
+  logo,
+  logoAlt,
+  link,
+}: DetailedProps) => {
+  const [isTablet, setIsTablet] = useState(false)
+  const { width } = useWindowSize()
+
+  useEffect(() => {
+    if (width < theme.breakpoints.lg) {
+      return setIsTablet(true)
+    }
+    setIsTablet(false)
+  }, [width])
+
+  const renderLogo = () => {
+    if (!logo) {
+      return null
+    }
+
+    return (
+      <Box style={{ flex: '0 0 40px' }}>
+        <img height={40} src={logo} alt={logoAlt} />
+      </Box>
+    )
+  }
+
+  const renderDetails = () => {
+    if (!detailLines?.length) {
+      return null
+    }
+
+    return (
+      <Box marginTop={2}>
+        <Stack space={1}>
+          {detailLines?.slice(0, 5).map((d, index) => (
+            <Box
+              key={index}
+              display="flex"
+              flexDirection={'row'}
+              alignItems="center"
+            >
+              <Icon
+                icon={d.icon}
+                size="small"
+                type="outline"
+                color="blue400"
+                useStroke
+              />
+              <Box marginLeft={2}>
+                <Text variant="medium">{d.text}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    )
+  }
+
+  const renderTags = () => {
+    if (!tags?.length) {
+      return null
+    }
+
+    return (
+      <Inline space={1}>
+        {tags
+          .map((tag) => {
+            if (!tag) {
+              return null
+            }
+            return (
+              <Tag disabled variant={tag.variant}>
+                {tag.label}
+              </Tag>
+            )
+          })
+          .filter(isDefined)}
+      </Inline>
+    )
+  }
+
+  const renderHeader = () => {
+    return (
+      <Box
+        display="flex"
+        flexDirection="row"
+        justifyContent="spaceBetween"
+        marginBottom={3}
+      >
+        {subEyebrow ? (
+          <Box>
+            <Text fontWeight="semiBold" variant="eyebrow" color={eyebrowColor}>
+              {eyebrow}
+            </Text>
+            <Text fontWeight="light" variant="eyebrow" color={eyebrowColor}>
+              {subEyebrow}
+            </Text>
+          </Box>
+        ) : (
+          <Text variant="eyebrow" color={eyebrowColor}>
+            {eyebrow}
+          </Text>
+        )}
+        {renderLogo()}
+      </Box>
+    )
+  }
+
+  const renderContent = () => {
+    if (size === 'large' && !isTablet) {
+      return (
+        <GridContainer>
+          <GridRow direction="row">
+            <GridColumn span="8/12">
+              <Text variant="h3" color="blue400">
+                {title}
+              </Text>
+              {description && (
+                <Box flexGrow={1} marginTop={1}>
+                  <Text>{description}</Text>
+                </Box>
+              )}
+            </GridColumn>
+            <GridColumn span="4/12">{renderDetails()}</GridColumn>
+          </GridRow>
+        </GridContainer>
+      )
+    }
+    return (
+      <>
+        <Text variant="h3" color="blue400">
+          {title}
+        </Text>
+        {description && (
+          <Box marginTop={1}>
+            <Text>{description}</Text>
+          </Box>
+        )}
+        {renderDetails()}
+      </>
+    )
+  }
+
+  return (
+    <FocusableBox
+      className={
+        size === 'large'
+          ? styles.infoCardWide
+          : size === 'small'
+          ? styles.infoCardSmall
+          : styles.infoCard
+      }
+      component={LinkV2}
+      href={link.href}
+      background="white"
+      borderColor="white"
+      borderWidth="standard"
+      width="full"
+      borderRadius="standard"
+    >
+      <Box width="full" paddingX={4} paddingY={3}>
+        {renderHeader()}
+        {renderContent()}
+        <Box marginTop={3} display="flex" justifyContent="spaceBetween">
+          {renderTags()}
+        </Box>
+      </Box>
+    </FocusableBox>
+  )
+}

apps/web/components/InfoCard/InfoCard.css.ts

@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css'
+
+export const infoCardSmall = style({
+  maxWidth: 310,
+})
+
+export const infoCard = style({
+  maxWidth: 477,
+})
+
+export const infoCardWide = style({
+  maxWidth: 978,
+})
+
+export const wideTitleBox = style({
+  flexGrow: 2,
+})

apps/web/components/InfoCard/InfoCard.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { DetailedInfoCard, DetailedProps } from './DetailedInfoCard'
+import { SimpleInfoCard } from './SimpleInfoCard'
+
+export interface BaseProps {
+  title: string
+  description: string
+  eyebrow: string
+  size: 'large' | 'medium' | 'small'
+  link: {
+    label: string
+    href: string
+  }
+}
+
+export type InfoCardProps =
+  | (BaseProps & {
+      variant?: 'simple'
+    })
+  | (DetailedProps & {
+      variant: 'detailed'
+    })
+
+export const InfoCard = (props: InfoCardProps) => {
+  if (props.variant === 'detailed') {
+    return <DetailedInfoCard {...props} />
+  } else {
+    return <SimpleInfoCard {...props} />
+  }
+}

apps/web/components/InfoCard/InfoCardWrapper.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import { useWindowSize } from 'react-use'
+
+import { Inline, Stack } from '@island.is/island-ui/core'
+import { theme } from '@island.is/island-ui/theme'
+
+import { InfoCard, InfoCardProps } from './InfoCard'
+
+export type InfoCardItemProps = Omit<InfoCardProps, 'size' | 'variant'>
+
+interface Props {
+  cards: Array<InfoCardItemProps>
+  variant?: 'detailed' | 'simple'
+  columns?: 1 | 2 | 3
+}
+
+export const InfoCardWrapper = ({ cards, variant, columns }: Props) => {
+  const [isMobile, setIsMobile] = useState(false)
+  const { width } = useWindowSize()
+
+  useEffect(() => {
+    if (width < theme.breakpoints.md) {
+      return setIsMobile(true)
+    }
+    setIsMobile(false)
+  }, [width])
+
+  if (columns === 1 || isMobile) {
+    return (
+      <Stack space={3}>
+        {cards.map((c) => (
+          <InfoCard variant={variant} size={'large'} {...c} />
+        ))}
+      </Stack>
+    )
+  }
+
+  return (
+    <Inline space={3}>
+      {cards.map((c) => (
+        <InfoCard
+          variant={variant}
+          size={columns === 3 ? 'small' : 'medium'}
+          {...c}
+        />
+      ))}
+    </Inline>
+  )
+}