Merge pull request #3833 from thematters/fix/DialogBeta

Fix/dialog beta

src/components/AuthMethodFeed/styles.module.css

@@ -34,10 +34,14 @@
 }
 
 .info {
-  padding: 0 var(--spacing-base) var(--spacing-loose);
+  padding: 0 var(--spacing-base);
   color: var(--color-grey);
   text-align: center;
 
+  @media (--sm-up) {
+    padding-bottom: var(--spacing-x-tight);
+  }
+
   .errorHint {
     margin-bottom: var(--spacing-base);
     font-size: var(--font-size-sm);

src/components/DialogBeta/Content/index.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames'
+
+import Message from '../Message'
+import styles from './styles.module.css'
+
+interface DialogContentProps {
+  noSpacing?: boolean
+  smExtraSpacing?: boolean
+  fixedHeight?: boolean
+  noSpacingBottom?: boolean
+  noMaxHeight?: boolean
+}
+
+const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
+  Message: typeof Message
+} = ({
+  noSpacing,
+  smExtraSpacing = true,
+  noSpacingBottom,
+  noMaxHeight,
+  fixedHeight,
+  children,
+}) => {
+  const contentClasses = classNames({
+    [styles.content]: true,
+    [styles.spacing]: !noSpacing,
+    [styles.smExtraSpacing]: smExtraSpacing,
+    [styles.fixedHeight]: !!fixedHeight,
+    [styles.noSpacingBottom]: !!noSpacingBottom,
+    [styles.noMaxHeight]: !!noMaxHeight,
+  })
+
+  return (
+    <section className={contentClasses} data-dialog-entity>
+      {children}
+    </section>
+  )
+}
+
+DialogContent.Message = Message
+
+export default DialogContent

src/components/DialogBeta/Content/styles.module.css

@@ -0,0 +1,45 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  max-height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &.fixedHeight {
+    height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
+
+    @media (--sm-up) {
+      height: min(30rem, 64vh);
+    }
+  }
+
+  @media (--sm-up) {
+    max-height: min(30rem, 64vh);
+  }
+}
+
+.smExtraSpacing {
+  padding-bottom: var(--spacing-xx-loose);
+
+  @media (--sm-up) {
+    padding-bottom: 0;
+  }
+}
+
+.spacing {
+  padding: var(--spacing-base);
+
+  @media (--sm-up) {
+    padding: 0 var(--spacing-base-loose);
+  }
+}
+
+.noSpacingBottom {
+  padding-bottom: 0;
+}
+
+.noMaxHeight {
+  max-height: none;
+}

src/components/DialogBeta/Footer/index.tsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames'
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Media } from '~/components'
+import { RoundedButton, TextButton } from '~/components/Dialog/Buttons'
+
+import styles from './styles.module.css'
+
+type FooterProps = {
+  btns?: React.ReactNode
+  smUpBtns?: React.ReactNode
+  closeText?: React.ReactNode
+  closeDialog?: () => any
+}
+
+const Footer: React.FC<FooterProps> = ({
+  btns,
+  smUpBtns,
+  closeText,
+  closeDialog,
+}) => {
+  if (!btns && !smUpBtns && !closeDialog) {
+    return null
+  }
+
+  const text = closeText || <FormattedMessage defaultMessage="Cancel" />
+
+  const footerClasses = classNames({
+    [styles.footer]: true,
+  })
+  const hasBtns = btns || closeDialog
+  const hasSmUpBtns = smUpBtns || closeDialog
+
+  const smUpContentClasses = classNames({
+    [styles.smUpContent]: true,
+  })
+
+  const SmUpBtns = () => (
+    <>
+      {hasSmUpBtns && (
+        <Media greaterThan="sm">
+          <section className={smUpContentClasses}>
+            {closeDialog && (
+              <TextButton
+                text={text}
+                color="greyDarker"
+                onClick={closeDialog}
+              />
+            )}
+            {smUpBtns}
+          </section>
+        </Media>
+      )}
+    </>
+  )
+
+  if (hasBtns) {
+    return (
+      <footer className={footerClasses} data-dialog-entity>
+        <Media at="sm">
+          <section className={styles.content}>
+            {btns}
+            {closeDialog && (
+              <RoundedButton
+                text={text}
+                color="greyDarker"
+                onClick={closeDialog}
+              />
+            )}
+          </section>
+        </Media>
+
+        <SmUpBtns />
+      </footer>
+    )
+  }
+
+  return (
+    <footer className={footerClasses}>
+      <SmUpBtns />
+    </footer>
+  )
+}
+
+export default Footer

src/components/DialogBeta/Footer/styles.module.css

@@ -0,0 +1,41 @@
+.footer {
+  position: relative;
+}
+
+.content {
+  @mixin flex-center-space-between;
+  @mixin safe-area-botttom;
+
+  flex-direction: column;
+  flex-shrink: 0;
+  padding: var(--spacing-base-loose) var(--spacing-base) 0;
+
+  & > * {
+    flex: 1;
+    width: 100%;
+  }
+
+  & > * + * {
+    margin-top: var(--spacing-base);
+  }
+}
+
+.smUpContent {
+  @mixin flex-center-end;
+
+  padding: 0 var(--spacing-base-loose) 0;
+  margin: var(--spacing-base) 0 var(--spacing-base-loose);
+  text-align: right;
+
+  & > * + * {
+    margin-left: var(--spacing-x-loose);
+  }
+}
+
+/* .smUpContentNoSpacingBottom {
+  margin-bottom: 0;
+}
+
+.smUpSpaceBetween {
+  @mixin flex-center-space-between;
+} */

src/components/DialogBeta/Message/index.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames'
+
+import { capitalizeFirstLetter } from '~/common/utils'
+
+import styles from './styles.module.css'
+
+interface DialogMessageProps {
+  align?: 'left' | 'center'
+  smUpAlign?: 'left' | 'center'
+  type?: 'error'
+  spacingBottom?: boolean
+}
+
+/**
+ *
+ * Usage:
+ *
+ * ```jsx
+ *   <Dialog.Message>
+ *     <p>grey text</p>
+ *   </Dialog.Message>
+ *
+ *   <Dialog.Message>
+ *     <h3>bold text</h3>
+ *   </Dialog.Message>
+ * ```
+ *
+ */
+const DialogMessage: React.FC<React.PropsWithChildren<DialogMessageProps>> = ({
+  align = 'center',
+  smUpAlign = 'left',
+  spacingBottom,
+  type,
+
+  children,
+}) => {
+  const contentClasses = classNames({
+    [styles.content]: true,
+    [styles.spacingBottom]: !!spacingBottom,
+    [styles[`${type}`]]: !!type,
+    [align ? styles[`align${capitalizeFirstLetter(align)}`] : '']: !!align,
+    [smUpAlign ? styles[`alignSmUp${capitalizeFirstLetter(smUpAlign)}`] : '']:
+      !!smUpAlign,
+  })
+
+  return <section className={contentClasses}>{children}</section>
+}
+
+export default DialogMessage

src/components/DialogBeta/Message/styles.module.css

@@ -0,0 +1,75 @@
+.content {
+  & h2 {
+    font-size: var(--font-size-xm);
+  }
+
+  & h3 {
+    font-size: var(--font-size-md);
+    line-height: 2rem;
+  }
+
+  & p {
+    font-size: var(--font-size-sm);
+    line-height: 1.375rem;
+    color: var(--color-grey-dark);
+  }
+
+  & h2 + p,
+  h3 + p,
+  p + p {
+    margin-top: var(--spacing-tight);
+  }
+
+  & ul,
+  & ol {
+    padding-left: var(--spacing-loose);
+    font-size: var(--font-size-md-s);
+    line-height: 1.5rem;
+    color: var(--color-grey-dark);
+  }
+
+  & li {
+    padding-left: var(--spacing-xx-tight);
+    margin: var(--spacing-x-tight) 0;
+  }
+
+  & ul {
+    margin: var(--spacing-base) 0;
+    list-style-type: disc;
+  }
+
+  & ol {
+    margin: var(--spacing-base) 0;
+    list-style-type: decimal;
+  }
+}
+
+.error {
+  & h3 {
+    color: var(--color-red);
+  }
+}
+
+.alignCenter {
+  text-align: center;
+}
+
+.alignLeft {
+  text-align: left;
+}
+
+.alignSmUpCenter {
+  @media (--sm-up) {
+    text-align: center;
+  }
+}
+
+.alignSmUpLeft {
+  @media (--sm-up) {
+    text-align: left;
+  }
+}
+
+.spacingBottom {
+  padding-bottom: var(--spacing-base);
+}