@strapi/admin 4.6.0 → 4.6.2

package/admin/src/layouts/UnauthenticatedLayout/LocaleToggle/index.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { SimpleMenu, MenuItem } from '@strapi/design-system';
 import useLocalesProvider from '../../../components/LocalesProvider/useLocalesProvider';
 
 const LocaleToggle = () => {

package/admin/src/layouts/UnauthenticatedLayout/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
+import { Box, Flex } from '@strapi/design-system';
 import LocaleToggle from './LocaleToggle';
 
 const Wrapper = styled(Box)`

package/admin/src/pages/Admin/Onboarding/constants.js

@@ -0,0 +1,46 @@
+import { Book, PaperPlane } from '@strapi/icons';
+
+export const VIDEO_LINKS = [
+  {
+    label: {
+      id: 'app.components.Onboarding.link.build-content',
+      defaultMessage: 'Build a content architecture',
+    },
+    href: 'https://www.youtube.com/watch?v=G9GjN0RxhkE',
+    duration: '5:48',
+  },
+  {
+    label: {
+      id: 'app.components.Onboarding.link.manage-content',
+      defaultMessage: 'Add & manage content',
+    },
+    href: 'https://www.youtube.com/watch?v=DEZw4KbybAI',
+    duration: '3:18',
+  },
+  {
+    label: { id: 'app.components.Onboarding.link.manage-media', defaultMessage: 'Manage media' },
+    href: 'https://www.youtube.com/watch?v=-61MuiMQb38',
+    duration: '3:41',
+  },
+];
+
+export const WATCH_MORE = {
+  href: 'https://www.youtube.com/playlist?list=PL7Q0DQYATmvidz6lEmwE5nIcOAYagxWqq',
+  label: {
+    id: 'app.components.Onboarding.link.more-videos',
+    defaultMessage: 'Watch more videos',
+  },
+};
+
+export const DOCUMENTATION_LINKS = [
+  {
+    label: { id: 'global.documentation', defaultMessage: 'documentation' },
+    href: 'https://docs.strapi.io',
+    icon: Book,
+  },
+  {
+    label: { id: 'app.static.links.cheatsheet', defaultMessage: 'cheatsheet' },
+    href: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
+    icon: PaperPlane,
+  },
+];

package/admin/src/pages/Admin/Onboarding/index.js

@@ -1,92 +1,104 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Box, Flex, FocusTrap, Typography, Icon, Stack } from '@strapi/design-system';
-import { Book, Cross, Information, Question } from '@strapi/icons';
-import { pxToRem } from '@strapi/helper-plugin';
-
-import { useConfigurations } from '../../../hooks';
-
-const OnboardingWrapper = styled(Box)`
-  position: fixed;
-  bottom: ${({ theme }) => theme.spaces[2]};
-  right: ${({ theme }) => theme.spaces[2]};
-`;
-
-const Button = styled(Box)`
-  width: ${({ theme }) => theme.spaces[8]};
-  height: ${({ theme }) => theme.spaces[8]};
-  background: ${({ theme }) => theme.colors.primary600};
-  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+import { useAppInfos } from '@strapi/helper-plugin';
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  FocusTrap,
+  Icon,
+  Portal,
+  PopoverPrimitives,
+  Stack,
+  Typography,
+  VisuallyHidden,
+} from '@strapi/design-system';
+import { Cross, Message, Play, Question } from '@strapi/icons';
+
+import onboardingPreview from '../../../assets/images/onboarding-preview.png';
+import { VIDEO_LINKS, DOCUMENTATION_LINKS, WATCH_MORE } from './constants';
+
+// TODO: use new Button props derived from Box props with next DS release
+const HelperButton = styled(Button)`
   border-radius: 50%;
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.buttonNeutral0};
-  }
+  padding: ${({ theme }) => theme.spaces[3]};
+  /* Resetting 2rem height defined by Button component */
+  height: 100%;
 `;
 
-const LinksWrapper = styled(Box)`
-  bottom: ${({ theme }) => `${theme.spaces[9]}`};
-  min-width: ${200 / 16}rem;
-  position: absolute;
-  right: 0;
+const IconWrapper = styled(Flex)`
+  transform: translate(-50%, -50%);
 `;
 
-const StyledLink = styled(Flex)`
+const VideoLinkWrapper = styled(Flex)`
   text-decoration: none;
 
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
+  :focus-visible {
+    outline-offset: ${({ theme }) => `-${theme.spaces[1]}`};
   }
 
-  &:focus,
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
+  :hover {
+    background: ${({ theme }) => theme.colors.primary100};
 
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral700};
+    /* Hover style for the number displayed */
+    ${Typography}:first-child {
+      color: ${({ theme }) => theme.colors.primary500};
     }
 
-    ${[Typography]} {
-      color: ${({ theme }) => theme.colors.neutral700};
+    /* Hover style for the label */
+    ${Typography}:nth-child(1) {
+      color: ${({ theme }) => theme.colors.primary600};
     }
   }
 `;
 
+const Preview = styled.img`
+  width: ${({ theme }) => theme.spaces[10]};
+  height: ${({ theme }) => theme.spaces[8]};
+  /* Same overlay used in ModalLayout */
+  background: ${({ theme }) => `${theme.colors.neutral800}1F`};
+  border-radius: ${({ theme }) => theme.borderRadius};
+`;
+
+const TypographyLineHeight = styled(Typography)`
+  /* line height of label and watch more to 1 so they can be better aligned visually */
+  line-height: 1;
+`;
+
+const TextLink = styled(TypographyLineHeight)`
+  text-decoration: none;
+
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
 const Onboarding = () => {
+  const triggerRef = useRef();
   const [isOpen, setIsOpen] = useState(false);
   const { formatMessage } = useIntl();
-  const { showTutorials } = useConfigurations();
+  const { communityEdition } = useAppInfos();
 
-  if (!showTutorials) {
-    return null;
-  }
+  const handlePopoverVisibility = () => {
+    setIsOpen((prev) => !prev);
+  };
 
-  const STATIC_LINKS = [
-    {
-      Icon: <Book />,
-      label: formatMessage({
-        id: 'global.documentation',
-        defaultMessage: 'Documentation',
-      }),
-      destination: 'https://docs.strapi.io',
-    },
+  const docLinks = [
+    ...DOCUMENTATION_LINKS,
     {
-      Icon: <Information />,
-      label: formatMessage({ id: 'app.static.links.cheatsheet', defaultMessage: 'CheatSheet' }),
-      destination: 'https://strapi-showcase.s3-us-west-2.amazonaws.com/CheatSheet.pdf',
+      label: { id: 'Settings.application.get-help', defaultMessage: 'Get help' },
+      icon: Message,
+      href: communityEdition
+        ? 'https://discord.strapi.io'
+        : 'https://support.strapi.io/support/home',
     },
   ];
 
-  const handleClick = () => {
-    setIsOpen((prev) => !prev);
-  };
-
   return (
-    <OnboardingWrapper as="aside">
-      <Button
-        as="button"
-        id="onboarding"
+    <Box as="aside" position="fixed" bottom={2} right={2}>
+      <HelperButton
         aria-label={formatMessage(
           isOpen
             ? {
@@ -98,37 +110,110 @@ const Onboarding = () => {
                 defaultMessage: 'Open help menu',
               }
         )}
-        onClick={handleClick}
+        onClick={handlePopoverVisibility}
+        ref={triggerRef}
       >
-        <Icon as={isOpen ? Cross : Question} height={pxToRem(16)} width={pxToRem(16)} />
-      </Button>
+        <Icon as={isOpen ? Cross : Question} color="buttonNeutral0" />
+      </HelperButton>
 
-      {/* FIX ME - replace with popover when overflow popover is fixed 
-       + when v4 mockups for onboarding component are ready */}
       {isOpen && (
-        <FocusTrap onEscape={handleClick}>
-          <LinksWrapper background="neutral0" hasRadius shadow="tableShadow" padding={2}>
-            {STATIC_LINKS.map((link) => (
-              <StyledLink
-                as="a"
-                key={link.label}
-                rel="nofollow noreferrer noopener"
-                target="_blank"
-                href={link.destination}
-                padding={2}
-                hasRadius
-                alignItems="center"
+        <Portal>
+          <PopoverPrimitives.Content
+            padding={0}
+            source={triggerRef}
+            placement="top-end"
+            spacing={12}
+          >
+            <FocusTrap onEscape={handlePopoverVisibility}>
+              <Flex
+                justifyContent="space-between"
+                paddingBottom={5}
+                paddingRight={6}
+                paddingLeft={6}
+                paddingTop={6}
               >
-                <Stack horizontal spacing={2}>
-                  {link.Icon}
-                  <Typography color="neutral600">{link.label}</Typography>
-                </Stack>
-              </StyledLink>
-            ))}
-          </LinksWrapper>
-        </FocusTrap>
+                <TypographyLineHeight fontWeight="bold">
+                  {formatMessage({
+                    id: 'app.components.Onboarding.title',
+                    defaultMessage: 'Get started videos',
+                  })}
+                </TypographyLineHeight>
+                <TextLink
+                  as="a"
+                  href={WATCH_MORE.href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  variant="pi"
+                  textColor="primary600"
+                >
+                  {formatMessage(WATCH_MORE.label)}
+                </TextLink>
+              </Flex>
+              <Divider />
+              {VIDEO_LINKS.map(({ href, duration, label }, index) => (
+                <VideoLinkWrapper
+                  as="a"
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  key={href}
+                  hasRadius
+                  paddingTop={4}
+                  paddingBottom={4}
+                  paddingLeft={6}
+                  paddingRight={11}
+                >
+                  <Box paddingRight={5}>
+                    <Typography textColor="neutral200" variant="alpha">
+                      {index + 1}
+                    </Typography>
+                  </Box>
+                  <Box position="relative">
+                    <Preview src={onboardingPreview} alt="" />
+                    <IconWrapper
+                      position="absolute"
+                      top="50%"
+                      left="50%"
+                      background="primary600"
+                      borderRadius="50%"
+                      justifyContent="center"
+                      width={6}
+                      height={6}
+                    >
+                      <Icon as={Play} color="buttonNeutral0" width={3} height={3} />
+                    </IconWrapper>
+                  </Box>
+                  <Flex direction="column" alignItems="start" paddingLeft={4}>
+                    <Typography fontWeight="bold">{formatMessage(label)}</Typography>
+                    <VisuallyHidden>:</VisuallyHidden>
+                    <Typography textColor="neutral600" variant="pi">
+                      {duration}
+                    </Typography>
+                  </Flex>
+                </VideoLinkWrapper>
+              ))}
+              <Stack spacing={2} paddingLeft={5} paddingTop={2} paddingBottom={5}>
+                {docLinks.map(({ label, href, icon }) => (
+                  <Stack horizontal spacing={3} key={href}>
+                    <Icon as={icon} color="primary600" />
+                    <TextLink
+                      as="a"
+                      href={href}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                      variant="sigma"
+                      textColor="primary700"
+                    >
+                      {formatMessage(label)}
+                    </TextLink>
+                  </Stack>
+                ))}
+              </Stack>
+            </FocusTrap>
+          </PopoverPrimitives.Content>
+        </Portal>
       )}
-    </OnboardingWrapper>
+    </Box>
   );
 };
 

package/admin/src/pages/Admin/index.js

@@ -10,10 +10,11 @@ import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-
 import { useDispatch, useSelector } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+
 import GuidedTourModal from '../../components/GuidedTour/Modal';
 import LeftMenu from '../../components/LeftMenu';
 import AppLayout from '../../layouts/AppLayout';
-import { useMenu } from '../../hooks';
+import { useMenu, useConfigurations } from '../../hooks';
 import { createRoute } from '../../utils';
 import { SET_APP_RUNTIME_STATUS } from '../App/constants';
 import Onboarding from './Onboarding';
@@ -65,6 +66,7 @@ const Admin = () => {
   useTrackUsage();
   const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
   const { menu } = useStrapiApp();
+  const { showTutorials } = useConfigurations();
 
   const routes = useMemo(() => {
     return menu
@@ -106,7 +108,8 @@ const Admin = () => {
           </Switch>
         </Suspense>
         <GuidedTourModal />
-        <Onboarding />
+
+        {showTutorials && <Onboarding />}
       </AppLayout>
     </DndProvider>
   );

package/admin/src/pages/App/index.js

@@ -17,7 +17,7 @@ import {
   useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
-import { SkipToContent } from '@strapi/design-system/Main';
+import { SkipToContent } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import PrivateRoute from '../../components/PrivateRoute';
 import { createRoute, makeUniqueRoutes } from '../../utils';

package/admin/src/pages/AuthPage/components/FieldActionWrapper/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { FieldAction } from '@strapi/design-system/Field';
+import { FieldAction } from '@strapi/design-system';
 
 const FieldActionWrapper = styled(FieldAction)`
   svg {

package/admin/src/pages/AuthPage/components/ForgotPassword/index.js

@@ -2,13 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
 import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,

package/admin/src/pages/AuthPage/components/ForgotPasswordSuccess/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Main, Flex, Typography } from '@strapi/design-system';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import { Form, Link } from '@strapi/helper-plugin';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Typography } from '@strapi/design-system/Typography';
+import { EyeStriked, Eye } from '@strapi/icons';
+import {
+  Box,
+  Stack,
+  Main,
+  Flex,
+  Button,
+  TextInput,
+  Checkbox,
+  Typography,
+} from '@strapi/design-system';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import { useQuery, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Main, Flex, Typography } from '@strapi/design-system';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -15,17 +15,19 @@ import {
   getYupInnerErrors,
   Link,
 } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
+import {
+  Box,
+  Stack,
+  Main,
+  Flex,
+  Button,
+  TextInput,
+  Checkbox,
+  Grid,
+  GridItem,
+  Typography,
+} from '@strapi/design-system';
+import { EyeStriked, Eye } from '@strapi/icons';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -4,15 +4,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Formik } from 'formik';
 import { Form, Link } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Main } from '@strapi/design-system/Main';
-import { Flex } from '@strapi/design-system/Flex';
-import { Button } from '@strapi/design-system/Button';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Eye from '@strapi/icons/Eye';
+import { Box, Stack, Main, Flex, Button, TextInput, Typography } from '@strapi/design-system';
+import { EyeStriked, Eye } from '@strapi/icons';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -2,11 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { ContentBox, useTracking } from '@strapi/helper-plugin';
-import { Stack } from '@strapi/design-system/Stack';
-import InformationSquare from '@strapi/icons/InformationSquare';
-import CodeSquare from '@strapi/icons/CodeSquare';
-import PlaySquare from '@strapi/icons/PlaySquare';
-import FeatherSquare from '@strapi/icons/FeatherSquare';
+import { Stack } from '@strapi/design-system';
+import { InformationSquare, CodeSquare, PlaySquare, FeatherSquare } from '@strapi/icons';
 
 const BlockLink = styled.a`
   text-decoration: none;

package/admin/src/pages/HomePage/HomeHeader.js

@@ -2,12 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Link } from '@strapi/design-system/v2/Link';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Button } from '@strapi/design-system/Button';
-import ArrowRight from '@strapi/icons/ArrowRight';
+import { Typography, Stack, Box, Button } from '@strapi/design-system';
+import { Link } from '@strapi/design-system/v2';
+import { ArrowRight } from '@strapi/icons';
 
 const WordWrap = styled(Typography)`
   word-break: break-word;