@antv/dumi-theme-antv 0.1.0

package/src/antv/Banner/Banner.module.less

@@ -0,0 +1,412 @@
+@import '../mixins';
+.container1440() {
+  width: 1440px;
+  max-width: calc(100% - 80px);
+  margin-left: auto;
+  margin-right: auto;
+
+  @media only screen and (max-width: 931.99px) {
+    & {
+      max-width: calc(100% - 60px);
+    }
+  }
+
+  @media only screen and (max-width: 767.99px) {
+    & {
+      max-width: calc(100% - 32px);
+    }
+  }
+}
+
+.wrapper {
+  min-height: 650px;
+  max-height: 803px;
+  background: linear-gradient(225deg, #ffffff, #f0f5ff);
+  height: calc(94vh);
+  position: relative;
+  overflow: hidden;
+  .content {
+    .container1440;
+    height: 100%;
+    position: relative;
+  }
+  .text {
+    position: relative;
+    top: 26%;
+    z-index: 1;
+    margin-left: 4.5%;
+    .title {
+      font-size: 3.4em; //2.875em;
+      font-weight: 800;
+      color: rgba(0, 0, 0, 1);
+      position: relative;
+    }
+    .description {
+      margin-top: 0.83%; //12px;
+      margin-bottom: 0px;
+      color: rgba(106, 123, 140, 1);
+      font-size: 1.14em;
+      font-weight: 200;
+      position: relative;
+      width: 40%;
+      max-width: 700px;
+    }
+    .buttons {
+      display: flex;
+      margin-top: 5.56%;
+
+      .buttonLink + .buttonLink {
+        margin-left: 16px;
+      }
+
+      .buttonLink {
+        cursor: pointer;
+        border-radius: 50px;
+        min-width: 134px;
+        padding-left: 15px;
+        padding-right: 15px;
+        height: 40px;
+        z-index: 10;
+        position: relative;
+        transition: all 0.3s;
+        border: 1px solid @primary-color;
+        color: @primary-color;
+        background: transparent;
+        text-align: center;
+        font-size: 1.14em;
+        line-height: 40px;
+
+        &:hover {
+          color: tint(@primary-color, 25%);
+          border: 1px solid tint(@primary-color, 25%);
+          background-color: fade(@primary-color, 3%);
+        }
+
+        &.primary {
+          border: none;
+          outline: none;
+          color: #fff;
+          background: linear-gradient(60deg, fade(@primary-color, 70%), shade(@primary-color, 20%));
+          opacity: 0.8;
+          box-shadow: 0 8px 10px fade(@primary-color, 20%);
+
+          &:hover {
+            opacity: 1;
+          }
+        }
+      }
+      .videoButtonWrapper {
+        margin-left: 16px;
+        width: fit-content;
+        height: fit-content;
+        .videoButton {
+          width: 40px;
+          height: 40px;
+          background-size: contain;
+          border: 1px solid @primary-color;
+          border-radius: 20px;
+          transition: all 0.15s;
+          display: flex;
+          cursor: pointer;
+          overflow: hidden;
+          .videoButtonIcon {
+            margin-left: 12px;
+            font-size: 16px;
+            color: @primary-color;
+            line-height: 44px;
+          }
+          .videoButtonText {
+            line-height: 40px;
+            margin-left: 10px;
+            color: @primary-color;
+          }
+          &:hover {
+            width: 134px;
+          }
+        }
+      }
+      .githubWrapper {
+        margin-left: 16px;
+        display: flex;
+        :global {
+          .gh-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            padding: 9px;
+            border: 1px solid #ced4d9;
+            background: transparent;
+            text-decoration: none;
+            white-space: nowrap;
+            display: flex;
+            cursor: pointer;
+            float: left;
+            transition: all 0.15s;
+            &:hover {
+              background: #f2f4f5;
+            }
+            .gh-ico {
+              width: 16px;
+              height: 16px;
+              margin-left: 2px;
+              margin-top: 2px;
+              background-image: url(https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Nk9mQ48ZoZMAAAAAAAAAAABkARQnAQ);
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+              box-sizing: border-box;
+              cursor: pointer;
+              color: #333;
+            }
+            .gh-text {
+              display: none;
+            }
+          }
+          .gh-count {
+            position: relative;
+            display: none;
+            /* hidden to start */
+            margin-left: 52px;
+            margin-top: 7px;
+            border: 1px solid #d4d4d4;
+            padding: 2px 10px;
+            font-weight: 700;
+            height: 65%;
+            border-radius: 5px;
+            color: rgb(49, 70, 89);
+            &:hover {
+              background: #f2f4f5;
+              transition: all 0.15s;
+            }
+          }
+          .gh-count:hover,
+          .gh-count:focus {
+            color: #4183c4;
+          }
+          .gh-count:before,
+          .gh-count:after {
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+          }
+          .gh-count:before {
+            top: 50%;
+            left: -3px;
+            margin-top: -5px;
+            border-width: 4px 4px 4px 0;
+            border-right-color: #fafafa;
+          }
+          .gh-count:after {
+            top: 50%;
+            border-width: 5px 5px 5px 0;
+            border-right-color: #d4d4d4;
+            left: -5px;
+            z-index: -1;
+            margin-top: -6px;
+          }
+        }
+      }
+    }
+  }
+  .notifications {
+    width: 80%;
+    display: flex;
+    bottom: 40px;
+    position: absolute;
+    z-index: 3;
+    margin-left: 4.5%;
+  }
+  .teaser {
+    display: flex;
+    position: absolute;
+    right: 0;
+    margin-top: -300px;
+    width: 52%;
+    max-width: 598px;
+    height: 324px;
+    margin: auto;
+    margin-top: 0;
+    top: 0;
+    bottom: 0;
+    .teaserimg {
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+  }
+  .backLeftBottom {
+    position: absolute;
+    left: -8%;
+    bottom: -20px;
+  }
+}
+.videoModal {
+  :global {
+    .video-react-big-play-button {
+      display: none !important;
+    }
+    .video-react-control-bar {
+      border-radius: 0 0 4px 4px;
+    }
+    .video-react {
+      border-radius: 4px;
+      .video-react-video {
+        border-radius: 4px;
+      }
+    }
+    .ant-modal-close {
+      right: -50px;
+      top: -12px;
+      color: #fff;
+    }
+    .anticon-info-circle {
+      display: none !important;
+    }
+    .ant-modal-confirm-btns {
+      display: none !important;
+    }
+    .ant-modal-confirm-title {
+      display: none !important;
+    }
+    .ant-modal-close {
+      display: block !important;
+    }
+    .ant-modal-body {
+      padding: 0 !important;
+      .ant-modal-confirm-content {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 1144px) {
+  .wrapper {
+    .teaser {
+      transition: 0.3s all;
+      margin: auto;
+      margin-top: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .wrapper {
+    .content {
+      width: 91.46%;
+      margin-left: 4.27%;
+      margin-bottom: 5%;
+      position: relative;
+    }
+    .text {
+      top: 16.7%;
+      text-align: center;
+      margin-left: 0;
+      .title {
+        font-size: 2.857em;
+        margin-left: 0;
+      }
+      .description {
+        width: 100%;
+        max-width: 100%;
+        margin-left: 0;
+        font-size: 1em;
+      }
+      .buttons {
+        display: inline-flex;
+        .more {
+          font-size: 1em;
+        }
+        .githubIframe {
+          height: 40px;
+        }
+        .videoButtonWrapper {
+          width: fit-content;
+          height: fit-content;
+        }
+      }
+    }
+    .notifications {
+      width: 100%;
+      display: block;
+      bottom: 20px;
+      height: 44px;
+      overflow: hidden;
+    }
+    .teaser {
+      width: 100%;
+      max-width: 1200px;
+      margin-top: auto;
+      margin-left: unset;
+      margin-right: unset;
+      right: unset;
+      top: 30%;
+      display: flex;
+      justify-content: center;
+      .teaserimg {
+        width: 40%;
+        margin-left: unset;
+        margin-right: unset;
+      }
+    }
+  }
+}
+
+@media (max-width: 786px) {
+  .wrapper {
+    .text {
+      .buttons {
+        .videoButtonWrapper {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 510px) {
+  .wrapper {
+    .text {
+      .buttons {
+        margin-top: 70%;
+        .githubWrapper {
+          display: none;
+        }
+      }
+    }
+    .teaser {
+      width: 100%;
+      top: 5%;
+      .teaserimg {
+        width: 100%;
+      }
+    }
+    .backLeftBottom {
+      display: none;
+    }
+  }
+}
+@media (max-width: 480px) {
+  .wrapper {
+    .text {
+      height: 70%;
+      .buttons {
+        bottom: 10px;
+        margin-top: unset;
+        z-index: 1;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        justify-content: center;
+      }
+    }
+    .teaser {
+      top: 14%;
+    }
+  }
+}

package/src/antv/Banner/Notification.module.less

@@ -0,0 +1,108 @@
+.notification {
+  width: 50%;
+  margin-right: 2%;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  .container {
+    height: 44px;
+    display: flex;
+    .number {
+      height: 100%;
+      width: 44px;
+    }
+    .content {
+      padding-left: 20px;
+      color: rgba(49, 70, 89, 1);
+      text-align: left;
+      .description {
+        top: 0;
+        font-size: 1.14em;
+        margin-bottom: 0;
+        transition: all 0.3s;
+      }
+      .date {
+        color: rgba(216, 203, 249, 1);
+        bottom: 0;
+        font-size: 1em;
+        margin-top: 4px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &:hover .description {
+    color: rgba(89, 126, 247, 1);
+  }
+}
+
+@media (max-width: 900px) {
+  .notification {
+    position: absolute;
+    width: 100%;
+
+    &:nth-child(1) {
+      animation: showAndHide0 6s infinite;
+    }
+
+    &:nth-child(2) {
+      top: 44px;
+      animation: showAndHide1 6s infinite;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .notification {
+    width: 100%;
+  }
+}
+
+@keyframes showAndHide0 {
+  0% {
+    opacity: 1;
+    top: 0px;
+  }
+  33.3% {
+    opacity: 1;
+    top: 0px;
+  }
+  50% {
+    opacity: 0;
+    top: -30px;
+  }
+  83.3% {
+    opacity: 0;
+    top: 30px;
+  }
+  100% {
+    opacity: 1;
+    top: 0px;
+  }
+}
+
+/* Standard syntax */
+@keyframes showAndHide1 {
+  0% {
+    opacity: 0;
+    top: 30px;
+  }
+  33.3% {
+    opacity: 0;
+    top: 30px;
+  }
+  50% {
+    opacity: 1;
+    top: 0px;
+  }
+  83.3% {
+    opacity: 1;
+    top: 0px;
+  }
+  100% {
+    opacity: 0;
+    top: -30px;
+  }
+}

package/src/antv/Banner/Notification.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+// @ts-ignore
+import styles from './Notification.module.less';
+
+export interface NotificationProps {
+  index?: number;
+  type: string;
+  title: string;
+  date: string;
+  link: string;
+}
+
+const numberImages = [
+  'https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png',
+  'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png',
+];
+
+const Notification: React.FC<NotificationProps> = ({ index = 0, type, title, date, link = '' }) => {
+  const children = (
+    <div className={styles.container}>
+      <img className={styles.number} src={numberImages[index]} alt={index.toString()} />
+      <div className={styles.content}>
+        <p className={styles.description}>
+          {type} ‧ {title}
+        </p>
+        <p className={styles.date}>{date}</p>
+      </div>
+    </div>
+  );
+  if (link.startsWith('http')) {
+    return (
+      <a href={link} target="_blank" rel="noopener noreferrer" className={styles.notification}>
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link to={link} className={styles.notification}>
+      {children}
+    </Link>
+  );
+};
+
+export default Notification;

package/src/antv/Banner/index.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useContext } from 'react';
+
+import GitHubButton from 'react-github-button';
+import gh from 'parse-github-url';
+import classNames from 'classnames';
+import { context } from 'dumi/theme';
+// @ts-ignore
+import styles from './Banner.module.less';
+import Notification, { NotificationProps } from './Notification';
+
+type BannerButtonShape = 'round' | 'square';
+
+interface BannerButton {
+  text: string;
+  link: string;
+  style?: React.CSSProperties;
+  type?: string;
+  shape?: BannerButtonShape;
+}
+
+interface BannerProps {
+  coverImage?: React.ReactNode;
+  title: string;
+  description: string;
+  notifications?: NotificationProps[];
+  style?: React.CSSProperties;
+  className?: string;
+  video?: string;
+  showGithubStars?: boolean;
+  buttons?: BannerButton[];
+  onCloseVideo?: () => void;
+  onPlayVideo?: () => void;
+}
+
+const backLeftBottom = 'https://gw.alipayobjects.com/zos/basement_prod/441d5eaf-e623-47cd-b9b9-2a581d9ce1e3.svg';
+
+const Banner: React.FC<BannerProps> = ({
+  coverImage,
+  title,
+  description,
+  notifications,
+  style = {},
+  className,
+  showGithubStars = true,
+  buttons = [],
+}) => {
+  const {
+    config: { repository },
+  } = useContext(context);
+
+  const githubUrl = repository.url;
+
+  const notificationsNode = notifications
+    .slice(0, 2)
+    .map((notification, i) => <Notification index={i} key={i} {...notification} />);
+
+  const renderButtons = buttons.map((button: BannerButton, i) => {
+    const ButtonLink = 'a';
+    const buttonProps = {} as any;
+    if (button.link.startsWith('http')) {
+      buttonProps.target = '_blank';
+      buttonProps.rel = 'noopener noreferrer';
+    }
+    if (ButtonLink === 'a') {
+      buttonProps.href = button.link;
+    } else {
+      buttonProps.to = button.link;
+    }
+    const { shape = 'round' } = button;
+    return (
+      <ButtonLink
+        {...buttonProps}
+        className={classNames(
+          styles.buttonLink,
+          styles[button.type || ''],
+          button.type === 'primary' ? 'primary-button' : 'common-button',
+        )}
+        key={i}
+        style={{
+          borderRadius: shape === 'round' ? '1000px' : '4px',
+          ...button.style,
+        }}
+      >
+        <span className={styles.button}>{button.text}</span>
+      </ButtonLink>
+    );
+  });
+
+  if (showGithubStars) {
+    const githubObj = gh(githubUrl);
+
+    if (githubObj && githubObj.owner && githubObj.name) {
+      renderButtons.push(
+        <div key="github" className={styles.githubWrapper}>
+          <GitHubButton type="stargazers" size="large" namespace={githubObj.owner} repo={githubObj.name} />
+        </div>,
+      );
+    }
+  }
+
+  return (
+    <section className={classNames(styles.wrapper, className)} style={style}>
+      <div className={styles.content}>
+        <div className={styles.text}>
+          <div className={classNames(styles.title, 'banner-title')}>{title}</div>
+          <div className={classNames(styles.description, 'banner-description')}>{description}</div>
+          <div className={classNames(styles.buttons, 'banner-buttons')}>{renderButtons}</div>
+        </div>
+        <div className={classNames(styles.notifications, 'notifications')}>{notificationsNode}</div>
+        <div className={classNames(styles.teaser, 'teaser')}>
+          <div className={classNames(styles.teaserimg, 'teaser-img')}>{coverImage}</div>
+        </div>
+        <img className={styles.backLeftBottom} src={backLeftBottom} alt="back" />
+      </div>
+    </section>
+  );
+};
+
+export default Banner;