Contact us page

.storybook/main.js

@@ -0,0 +1,23 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path')
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/react",
+  webpackFinal: async (config) => {
+    config.resolve.roots = [path.resolve(__dirname, '../public')];
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ];
+    return config;
+  },
+}

.storybook/preview-head.html

@@ -0,0 +1,14 @@
+<style type="text/css">
+  @font-face {
+    font-family: 'Manrope';
+    font-weight: bold;
+    font-style: normal;
+    src: url('fonts/manrope-bold.woff2') format("woff2");
+  }
+  @font-face {
+    font-family: 'Manrope';
+    font-weight: normal;
+    font-style: normal;
+    src: url('fonts/manrope-regular.woff2') format("woff2");
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.storybook/processDecorator.js

@@ -0,0 +1,9 @@
+// themeDecorator.js
+import React from 'react'
+import { UseProcessProvider, useProcess } from '@vocdoni/react-hooks'
+
+const processDecorator = (storyFn) => {
+  return <UseProcessProvider>{storyFn()}</UseProcessProvider>
+}
+
+export default processDecorator

components/blocks-v2/banner.tsx

@@ -0,0 +1,129 @@
+import { Card } from "@components/elements-v2/card";
+import { useIsMobile } from "@hooks/use-window-size";
+import { ReactNode } from "react";
+import { CardVariant, Spacer, Text, TextProps, Button, ButtonProps, Col, Row, JustifyOptions, RowGutter } from "../elements-v2";
+
+
+export interface BannerProps {
+  /**
+   * Children
+   */
+  children: string | ReactNode
+  /**
+   * React node with the image
+   */
+  image?: ReactNode
+  /**
+   * Card components variants are accepted
+   */
+  variant?: CardVariant
+  /**
+   * Object with the button props, icons are
+   * accepted
+   */
+  buttonProps?: ButtonProps
+  /**
+   * Object with the text props for the title
+   * only `size` and `weight` are supported
+   */
+  subtitleProps?: TextProps
+  /**
+   * Object with the text props for the subtitle
+   * only `size` and `weight` are supported
+   */
+  titleProps?: TextProps
+  /**
+   * Padding of the card
+   * md -> 24px 40px desktop (default)
+   *       20px mobile
+   * lg -> 32px 48px desktop
+   *       20px mobile
+   * @type {BannerPadding}
+   */
+  padding?: BannerPadding
+  /**
+   * Gutter of the main row
+   *
+   * @type {RowGutter}
+   */
+  gutter?: RowGutter
+  innerGutter?: RowGutter
+}
+type BannerPadding = 'md' | 'lg'
+const getBannerPadding = (isMobile: boolean, padding?: BannerPadding) => {
+  switch (padding) {
+    case 'lg':
+      if (isMobile) {
+        return '20px'
+      }
+      return '32px 48px'
+
+    default:
+      if (isMobile) {
+        return '20px'
+      }
+      return '24px 40px'
+  }
+}
+const getInnerRowGutter = (isMobile: boolean, gutter?: RowGutter) => {
+  if (gutter) {
+    return gutter
+  }
+  if (isMobile) {
+    return 'md'
+  }
+  return 'lg'
+}
+export const Banner = (props: BannerProps) => {
+  const isMobile = useIsMobile()
+  return (
+    <Card
+      // padding={getBannerPadding(isMobile, props.padding)}
+      variant={props.variant ? props.variant : "primary"}
+    >
+      <Row align='center' justify="space-between" gutter={props.gutter ? props.gutter : 'md'}>
+        <Col xs={12} md={props.buttonProps ? 9 : 12}>
+          <Row gutter={getInnerRowGutter(isMobile, props.innerGutter)} align="center" wrap={false} >
+            {props.image &&
+              <Col>
+                {props.image}
+              </Col>
+            }
+            <Col>
+              <Row gutter="xs">
+                <Col xs={12}>
+                  <Text
+                    weight={props?.titleProps?.weight ? props?.titleProps?.weight : 'bold'}
+                    size={props?.titleProps?.size ? props?.titleProps?.size : 'md'}
+                    color={props?.titleProps?.color ? props?.titleProps?.color : 'dark-blue'}
+                  >
+                    {props.children}
+                  </Text>
+                </Col>
+                <Col xs={12} hidden={props.subtitleProps === undefined}>
+                  <Text
+                    weight={props?.subtitleProps?.weight ? props?.subtitleProps?.weight : 'regular'}
+                    size={props?.subtitleProps?.size ? props?.subtitleProps?.size : 'sm'}
+                    color={props?.subtitleProps?.color ? props?.subtitleProps?.color : 'dark-blue'}
+                  >
+                    {props?.subtitleProps?.children}
+                  </Text>
+                </Col>
+              </Row>
+            </Col>
+          </Row>
+        </Col>
+        {props.buttonProps &&
+          <Col xs={12} md={3}>
+            <Button
+              {...props.buttonProps}
+            >
+              {props.buttonProps.children}
+            </Button>
+          </Col>
+        }
+      </Row>
+    </Card >
+  )
+}
+

components/blocks-v2/disconnect-modal.tsx

@@ -0,0 +1,87 @@
+import { Modal } from "react-rainbow-components"
+import { ModalProps } from "react-rainbow-components/components/Modal"
+import styled from "styled-components"
+import { useRef } from "react"
+import { useIsMobile } from "@hooks/use-window-size"
+import { Spacer, Button, Text, Col, Row } from "@components/elements-v2"
+import { theme } from "@theme/global"
+import { useTranslation } from "react-i18next"
+import { LogOutIcon } from "@components/elements-v2/icons"
+type StyledModalProps = {
+  isMobile: boolean
+}
+export interface DisconnectModalProps extends ModalProps {
+  onClose?: () => void
+  onDisconnect?: () => void
+}
+export const DisconnectModal = (props: DisconnectModalProps) => {
+  const modal = useRef(null)
+  const isMobile = useIsMobile()
+  const { i18n } = useTranslation()
+  if (modal.current?.containerRef?.current) {
+    modal.current.containerRef.current.style.backgroundColor = 'rgba(13, 71, 82, 0.86)'
+  }
+  return (
+    <StyledModal isMobile={isMobile} ref={modal} {...props} size='medium'>
+      <Row justify="center" gutter={isMobile ? 'md' : 'lg'}>
+        <Col xs={12}>
+          {/** HEADER */}
+          <Row justify="center" align="center" gutter="md">
+            <Col xs={12}>
+              <Row justify="center">
+                <Col>
+                  <LogOutIcon
+                    size={isMobile ? '48px' : '72px'}
+                  />
+                </Col>
+              </Row>
+            </Col>
+            <Col xs={12} justify="center">
+              <Text size="2xl" weight="medium" color="error">
+                {i18n.t("vote.disconnect_modal_title")}
+              </Text>
+            </Col>
+          </Row>
+        </Col>
+        <Col xs={12} justify="center">
+          <Text align="center" size="md" color="dark-gray">
+            {i18n.t("vote.disconnect_modal_subtitle")}
+          </Text>
+        </Col>
+        <Col xs={12}>
+          <Spacer size="md" direction="vertical" />
+        </Col>
+        <Col xs={12}>
+          <Row justify='space-between'>
+            {/** ACTIONS */}
+            <Col>
+              <Button
+                variant='outlined'
+                color={theme.warningText}
+                onClick={() => props.onDisconnect()}
+              >
+                {i18n.t("vote.disconnect_modal_confirm_button")}
+              </Button>
+            </Col>
+            <Col>
+              <Button
+                variant='white'
+                onClick={() => props.onRequestClose()}>
+                {i18n.t("vote.disconnect_modal_back_button")}
+              </Button>
+            </Col>
+          </Row >
+        </Col>
+      </Row>
+    </ StyledModal >
+  )
+}
+const getPadding = (props: StyledModalProps) => {
+  if (props.isMobile) {
+    return '32px 24px'
+  }
+  return '48px 64px'
+}
+const StyledModal = styled(Modal) <StyledModalProps>`
+  padding: ${getPadding};
+`

components/blocks-v2/index.tsx

@@ -0,0 +1,4 @@
+export * from './banner'
+export * from './disconnect-modal'
+export * from './waiting-banner'
+export * from './process-status-label'

components/blocks-v2/modal.tsx

@@ -0,0 +1,98 @@
+import { Modal as RainbowModal } from "react-rainbow-components"
+import { ModalProps as RainbowModalProps } from "react-rainbow-components/components/Modal"
+import styled from "styled-components"
+import { useEffect, useRef } from "react"
+import { useIsMobile } from "@hooks/use-window-size"
+import { Spacer, Button, Text, Col, Row } from "@components/elements-v2"
+import { theme } from "@theme/global"
+import { useTranslation } from "react-i18next"
+import { AvailableIcons, Icon, LogOutIcon } from "@components/elements-v2/icons"
+import { colorsV2 } from "@theme/colors-v2"
+type StyledModalProps = {
+  isMobile: boolean
+}
+export interface ModalProps extends RainbowModalProps {
+  onAccept?: () => void
+  icon: AvailableIcons
+  title: string
+  subtitle: string
+  acceptIcon: AvailableIcons
+  acceptText: string
+  loading?: boolean
+  closeText: string
+}
+export const Modal = (props: ModalProps) => {
+  const modal = useRef(null)
+  const isMobile = useIsMobile()
+  useEffect(() => {
+    if (modal.current?.containerRef?.current) {
+      modal.current.containerRef.current.style.backgroundColor = 'rgba(13, 71, 82, 0.86)'
+    }
+  }, [props.isOpen])
+  const { title, ...newProps } = props;
+  return (
+    <StyledModal isMobile={isMobile} ref={modal} {...newProps} size='medium' >
+      <Row justify="center" gutter={isMobile ? 'md' : 'lg'}>
+        <Col xs={12}>
+          {/** HEADER */}
+          <Row justify="center" align="center" gutter="md">
+            <Col xs={12}>
+              <Row justify="center">
+                <Col>
+                  <Icon
+                    color={colorsV2.support.critical[600]}
+                    name={props.icon}
+                    size={isMobile ? 48 : 72}
+                  />
+                </Col>
+              </Row>
+            </Col>
+            <Col xs={12} justify="center">
+              <Text size="2xl" weight="medium" color='error'>
+                {title}
+              </Text>
+            </Col>
+          </Row>
+        </Col>
+        <Col xs={12} justify="center">
+          <Text align="center" size="md" color="dark-gray" innerHTML={props.subtitle} />
+        </Col>
+        <Col xs={12}>
+          <Spacer size="md" direction="vertical" />
+        </Col>
+        <Col xs={12}>
+          <Row justify='space-between'>
+            {/** ACTIONS */}
+            <Col>
+              <Button
+                variant='outlined'
+                loading={props.loading}
+                color={colorsV2.support.critical[600]}
+                onClick={() => props.onAccept()}
+              >
+                {props.acceptText}
+              </Button>
+            </Col>
+            <Col>
+              <Button
+                variant='white'
+                disabled={props.loading}
+                onClick={() => props.onRequestClose()}>
+                {props.closeText}
+              </Button>
+            </Col>
+          </Row >
+        </Col>
+      </Row>
+    </ StyledModal >
+  )
+}
+const getPadding = (props: StyledModalProps) => {
+  if (props.isMobile) {
+    return '32px 24px'
+  }
+  return '48px 64px'
+}
+const StyledModal = styled(RainbowModal) <StyledModalProps>`
+  padding: ${getPadding};
+`