@redocly/theme 0.6.4 → 0.6.5

package/lib/globalStyle.js

@@ -1878,6 +1878,9 @@ const tile = (0, styled_components_1.css) `
   --wide-tile-background-color: var(--color-secondary-50);
   --thin-tile-background-color: var(--color-secondary-50);
 `;
+const apiLogsTable = (0, styled_components_1.css) `
+ --api-logs-row-hover-background-color: var(--color-secondary-300)
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${baseColors}
@@ -1906,6 +1909,7 @@ exports.styles = (0, styled_components_1.css) `
     ${lastUpdated}
     ${tile}
     ${loadProgressBar}
+    ${apiLogsTable}
   }
 
   :root.dark {

package/lib/index.d.ts

@@ -10,6 +10,7 @@ export * from './Tooltip';
 export * from './SourceCode';
 export * from './Panel';
 export * from './icons';
+export * from './Feedback';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';

package/lib/index.js

@@ -26,6 +26,7 @@ __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./SourceCode"), exports);
 __exportStar(require("./Panel"), exports);
 __exportStar(require("./icons"), exports);
+__exportStar(require("./Feedback"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./globalStyle"), exports);

package/lib/mocks/hooks/index.js

@@ -27,6 +27,12 @@ function useThemeConfig() {
         colorMode: {
             modes: ['light', 'dark'],
         },
+        feedback: {
+            type: 'sentiment',
+        },
+        userProfile: {
+            hide: false,
+        },
     };
 }
 exports.useThemeConfig = useThemeConfig;

package/lib/ui/Box.d.ts

@@ -1,5 +1,5 @@
-import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps } from 'styled-system';
-export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps {
+import type { SpaceProps, LayoutProps, TextAlignProps, ColorProps, PositionProps, FlexProps, BordersProps, GridProps } from 'styled-system';
+export interface BoxProps extends SpaceProps, LayoutProps, PositionProps, FlexProps, TextAlignProps, ColorProps, BordersProps, GridProps {
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, {
     'data-component-name': string;

package/lib/ui/Box.js

@@ -17,5 +17,6 @@ exports.Box = styled_components_1.default.div.attrs(() => ({
   ${styled_system_1.textAlign}
   ${styled_system_1.color}
   ${styled_system_1.border}
+  ${styled_system_1.grid}
 `;
 //# sourceMappingURL=Box.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.4",
-  "description": "Shared UI components",
+  "version": "0.6.5",
+  "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
   "main": "lib/index.js",

package/src/Feedback/Rating.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { RatingProps } from '@theme/Feedback';
+
+type StarsProps = {
+  onSubmit: RatingProps['onSubmit'];
+  max: number;
+};
+
+export const Rating = ({ settings, onSubmit }: RatingProps): JSX.Element => {
+  const { label, max, submitText } = settings || {};
+  const [submitValue, setSubmitValue] = React.useState(0);
+
+  if (submitValue) {
+    return (
+      <RatingWidget>
+        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+      </RatingWidget>
+    );
+  }
+
+  return (
+    <RatingWidget>
+      <Label>{label || 'How helpful was this page?'}</Label>
+      <Stars
+        max={max || 5}
+        onSubmit={(value: number) => {
+          setSubmitValue(value);
+          onSubmit(value);
+        }}
+      />
+    </RatingWidget>
+  );
+};
+
+const Stars = ({ max, onSubmit }: StarsProps): JSX.Element => {
+  const [hovered, setHovered] = React.useState(0);
+  const stars: JSX.Element[] = [];
+
+  for (let index = 1; index <= max; index++) {
+    stars.push(
+      <Star
+        key={index}
+        onClick={() => onSubmit(index)}
+        onMouseOver={() => setHovered(index)}
+        onMouseLeave={() => setHovered(0)}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+          {hovered < index ? (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
+            </g>
+          ) : (
+            <g fill="#e8c002">
+              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
+            </g>
+          )}
+        </svg>
+      </Star>,
+    );
+  }
+
+  return <>{stars}</>;
+};
+
+const RatingWidget = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Star = styled.span`
+  cursor: pointer;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+  font-family: var(--font-family-base);
+`;

package/src/Feedback/Sentiment.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import type { SentimentProps } from '@theme/Feedback';
+
+import { ThumbUp, ThumbDown } from './Thumbs';
+
+export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
+  const { label } = settings || {};
+  return (
+    <Wrapper>
+      <Label>{label || 'Was this page helpful?'}</Label>
+      <Vote onClick={() => onSubmit(1)}>
+        <ThumbUp text="Yes" />
+      </Vote>
+      <Vote onClick={() => onSubmit(-1)}>
+        <ThumbDown />
+      </Vote>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+
+const Label = styled.h3`
+  margin-right: 15px;
+`;
+
+const Vote = styled.div`
+  cursor: pointer;
+  margin: 0 10px;
+`;

package/src/Feedback/Thumbs.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export const ThumbUp = ({ text }: { text?: string }) => (
+  <Wrapper style={{ alignItems: 'normal' }}>
+    <Icon>
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
+        <g>
+          <g>
+            <g>
+              <path
+                d="M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918
+              c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533
+              c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855
+              c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6
+              s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6
+              s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067
+              c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79
+              c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845
+              c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229
+              c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267
+              C512,310.699,505.634,298.59,495.736,290.773z"
+              />
+              <path
+                d="M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067
+              S67.388,443.733,76.8,443.733z"
+              />
+              <path
+                d="M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1
+              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533
+              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6
+              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533
+              S174.481,247.467,179.2,247.467z"
+              />
+              <path
+                d="M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533
+              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467
+              V469.333z"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </Icon>
+    <span>{text || 'Yes'}</span>
+  </Wrapper>
+);
+
+export const ThumbDown = ({ text }: { text?: string }) => (
+  <Wrapper style={{ alignItems: 'end' }}>
+    <Icon>
+      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
+        <g>
+          <g>
+            <g>
+              <path
+                d="M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067
+				c-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z"
+              />
+              <path
+                d="M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996
+				c6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229
+				c0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845
+				c-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79
+				c14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067
+				c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6
+				c-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6
+				s-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951
+				c26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667
+				c0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467
+				c24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z"
+              />
+              <path
+                d="M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667
+				c-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167
+				c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166
+				c31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4
+				C358.4,319.556,354.586,315.733,349.867,315.733z"
+              />
+              <path
+                d="M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533
+				c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </Icon>
+    <span>{text || 'No'}</span>
+  </Wrapper>
+);
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  color: var(--color-primary-500);
+  &:hover {
+    color: var(--color-primary-600);
+    svg {
+      > g {
+        fill: var(--color-primary-600);
+      }
+    }
+  }
+`;
+
+const Icon = styled.div`
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  > svg {
+    > g {
+      fill: var(--color-primary-500);
+    }
+  }
+`;

package/src/Feedback/index.ts

@@ -0,0 +1,3 @@
+export { Rating } from './Rating';
+export { Sentiment } from './Sentiment';
+export * from './types';

package/src/Feedback/types.ts

@@ -0,0 +1,29 @@
+export type RatingProps = {
+  onSubmit: (value: number) => void;
+  settings?: {
+    label?: string;
+    max?: number;
+    submitText?: string;
+  };
+};
+
+export type SentimentProps = {
+  onSubmit: (value: -1 | 1) => void;
+  settings?: {
+    label?: string;
+  };
+};
+
+export type CommentProps = {
+  onSubmit: (value: string) => void;
+  settings?: {
+    label?: string;
+  };
+};
+
+export type ProblemProps = {
+  onSubmit: (value: string, location: string) => void; // TODO: maybe we don't need location here
+  settings?: {
+    label?: string;
+  };
+};

package/src/Markdown/MarkdownLayout.tsx

@@ -11,6 +11,7 @@ import { useThemeConfig } from '@theme/hooks';
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
+  feedback: React.ReactNode;
   editPage?: {
     to: string;
     text: string;
@@ -23,13 +24,14 @@ type MarkdownLayoutProps = {
 export function MarkdownLayout({
   tableOfContent,
   markdownWrapper,
+  feedback,
   editPage,
   lastModified,
 }: MarkdownLayoutProps): JSX.Element {
   const { markdown } = useThemeConfig();
   const { editPage: themeEditPage } = markdown || {};
 
-  const mergedConf = editPage ? { ...editPage, ...themeEditPage } : undefined;
+  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
 
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
@@ -41,6 +43,7 @@ export function MarkdownLayout({
           )}
         </LayoutTop>
         {markdownWrapper}
+        <LayoutBottom>{feedback}</LayoutBottom>
         <PageNavigation />
       </ContainerWrapper>
       {tableOfContent}
@@ -53,3 +56,9 @@ const LayoutTop = styled.div`
   justify-content: space-between;
   flex-flow: row nowrap;
 `;
+
+const LayoutBottom = styled(LayoutTop)`
+  > * {
+    margin: 25px 5px;
+  }
+`;

package/src/Navbar/Navbar.tsx

@@ -18,9 +18,10 @@ interface NavbarProps {
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
-  const { search: searchSettings, navbar } = useThemeConfig();
+  const { search: searchSettings, navbar, userProfile: userProfileSettings } = useThemeConfig();
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
+  const hideUserProfile = userProfileSettings?.hide;
 
   if (navbar?.hide) {
     return null;
@@ -43,7 +44,7 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
         {logo}
         <NavbarMenu menuItems={menu} />
         {hideSearch ? null : search}
-        {profile}
+        {hideUserProfile ? null : profile}
         <ColorModeSwitcher />
       </NavbarRow>
     </NavbarContainer>

package/src/Profile/LoginLink.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+
+export interface LoginLinkProps {
+  href: string;
+}
+
+export function LoginLink({ href }: LoginLinkProps): JSX.Element {
+  const { userProfile } = useThemeConfig();
+  return <StyledLink href={href}>{userProfile?.loginLabel || 'Login'}</StyledLink>;
+}
+
+const StyledLink = styled.a.attrs(() => ({
+  'data-component-name': 'Profile/LoginLink',
+}))`
+  display: inline-block;
+  color: var(--navbar-text-color);
+  text-decoration: none;
+  padding: 0 var(--navbar-item-padding-horizontal);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  font-weight: var(--navbar-item-font-weight);
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+  }
+`;

package/src/Profile/Profile.tsx

@@ -44,7 +44,9 @@ function ProfileComponent({ name, imageUrl, onClick, color }: ProfileProps): JSX
 
 export const Profile = memo<ProfileProps>(ProfileComponent);
 
-const ProfileWrapper = styled.div`
+const ProfileWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Profile/Profile',
+}))`
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/Profile/UserProfile.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { Profile } from '@theme/Profile/Profile';
+import { Tooltip } from '@theme/Tooltip/Tooltip';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+
+export interface UserProfileProps {
+  userInfo: {
+    isAuthenticated: boolean;
+    name: string;
+    picture: string;
+    logoutDisabled?: boolean;
+  };
+  handleLogout: (logoutRedirect?: string) => void;
+  hasDeveloperOnboarding?: boolean;
+  hasApiLogs?: boolean;
+}
+
+export function UserProfile({
+  userInfo,
+  handleLogout,
+  hasDeveloperOnboarding = false,
+  hasApiLogs = false,
+}: UserProfileProps): JSX.Element {
+  const [isOpened, setIsOpened] = useState<boolean>(false);
+
+  const { userProfile: userProfileSettings } = useThemeConfig();
+
+  const logoutRedirect = userProfileSettings?.logoutRedirect || '/';
+
+  return (
+    <StyledTooltip
+      isOpen={isOpened}
+      withArrow={false}
+      className="copy-button"
+      placement="bottom"
+      width="100%"
+      tip={
+        <StyledUl>
+          {hasDeveloperOnboarding ? (
+            <Link to="/apps">
+              <StyledLi>My Apps</StyledLi>
+            </Link>
+          ) : null}
+          {hasApiLogs ? (
+            <Link to="/api-logs">
+              <StyledLi>API logs</StyledLi>
+            </Link>
+          ) : null}
+          <StyledLi onClick={() => handleLogout(logoutRedirect)}>
+            {userProfileSettings?.logoutLabel || 'Log out'}
+          </StyledLi>
+        </StyledUl>
+      }
+    >
+      <Profile
+        name={userInfo.name}
+        imageUrl={userInfo.picture}
+        onClick={userInfo.logoutDisabled ? undefined : () => setIsOpened(!isOpened)}
+      />
+    </StyledTooltip>
+  );
+}
+
+const StyledTooltip = styled(Tooltip)`
+  > span {
+    padding: 0;
+  }
+`;
+
+const StyledUl = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+  background-color: var(--search-modal-background);
+  color: var(--search-modal-text-color);
+  min-width: 100px;
+  a {
+    text-decoration: none;
+    &:hover {
+      color: inherit;
+    }
+    &:visited {
+      color: inherit;
+    }
+  }
+`;
+
+const StyledLi = styled.li`
+  cursor: pointer;
+  font-size: 16px;
+  list-style: none;
+  padding: 15px 20px;
+  transition: background-color 0.25s ease 0s;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+`;

package/src/Profile/index.ts

@@ -1,2 +1,6 @@
 export { Profile } from './Profile';
 export type { ProfileProps } from './Profile';
+export { LoginLink } from './LoginLink';
+export type { LoginLinkProps } from './LoginLink';
+export { UserProfile } from './UserProfile';
+export type { UserProfileProps } from './UserProfile';

package/src/config.ts

@@ -81,6 +81,16 @@ export const ThemeConfig = z
       .optional(),
     links: z.array(LinksConfig).optional(),
 
+    feedback: z
+      .object({
+        type: z.string().default('sentiment'),
+        settings: z.string().optional(),
+      })
+      .extend(HideConfig.shape)
+      .strict()
+      .default({})
+      .optional(),
+
     search: z
       .object({
         placement: z.string().default('navbar').optional(),
@@ -159,6 +169,15 @@ export const ThemeConfig = z
       .optional(),
     openapi: z.object({}).passthrough().optional(),
     graphql: z.object({}).passthrough().optional(),
+    userProfile: z
+      .object({
+        loginLabel: z.string().default('Login').optional(),
+        logoutLabel: z.string().default('Logout').optional(),
+        logoutRedirect: z.string().default('/').optional(),
+      })
+      .extend(HideConfig.shape)
+      .optional()
+      .default({}),
   })
   .passthrough()
   .default({});

package/src/globalStyle.ts

@@ -1903,6 +1903,10 @@ const tile = css`
   --thin-tile-background-color: var(--color-secondary-50);
 `;
 
+const apiLogsTable = css`
+ --api-logs-row-hover-background-color: var(--color-secondary-300)
+`
+
 export const styles = css`
   :root {
     ${baseColors}
@@ -1931,6 +1935,7 @@ export const styles = css`
     ${lastUpdated}
     ${tile}
     ${loadProgressBar}
+    ${apiLogsTable}
   }
 
   :root.dark {

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './Tooltip';
 export * from './SourceCode';
 export * from './Panel';
 export * from './icons';
+export * from './Feedback';
 export * from './hooks';
 export * from './utils';
 export * from './globalStyle';

package/src/mocks/hooks/index.ts

@@ -32,6 +32,12 @@ export function useThemeConfig<T extends Record<string, unknown>>(): T & ThemeUI
     colorMode: {
       modes: ['light', 'dark'],
     },
+    feedback: {
+      type: 'sentiment',
+    },
+    userProfile: {
+      hide: false,
+    },
   } as ThemeUIConfig as T & ThemeUIConfig;
 }
 

package/src/settings.yaml

@@ -25,3 +25,5 @@ colorMode:
     - 'dark'
 lastUpdatedBlock:
   hide: false
+userProfile:
+  hide: false

package/src/types/portal/index.d.ts

@@ -1,2 +1,2 @@
 export * from './src/shared/types/nav';
-export type { MdHeading } from './src/shared/types/markdown';
+export type { MdHeading } from './src/shared/types/markdown';

package/src/ui/Box.tsx

@@ -1,4 +1,4 @@
-import { space, position, flex, textAlign, color, border, layout } from 'styled-system';
+import { space, position, flex, textAlign, color, border, layout, grid } from 'styled-system';
 import styled from 'styled-components';
 
 import type {
@@ -9,6 +9,7 @@ import type {
   PositionProps,
   FlexProps,
   BordersProps,
+  GridProps,
 } from 'styled-system';
 
 export interface BoxProps
@@ -18,7 +19,8 @@ export interface BoxProps
     FlexProps,
     TextAlignProps,
     ColorProps,
-    BordersProps {}
+    BordersProps,
+    GridProps {}
 
 export const Box = styled.div.attrs(() => ({
   'data-component-name': 'ui/Box',
@@ -31,4 +33,5 @@ export const Box = styled.div.attrs(() => ({
   ${textAlign}
   ${color}
   ${border}
+  ${grid}
 `;