@redocly/theme 0.4.2 → 0.4.3

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './CopyButton';
+export * from './EditPageButton';
 export * from './JsonViewer';
 export * from './Typography';
 export * from './SidebarLogo';

package/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Button"), exports);
 __exportStar(require("./CopyButton"), exports);
+__exportStar(require("./EditPageButton"), exports);
 __exportStar(require("./JsonViewer"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./SidebarLogo"), exports);

package/mocks/utils.d.ts

@@ -1 +1,2 @@
 export declare function withPathPrefix(link: string): string;
+export declare function timeAgo(lastModified: string | Date): string;

package/mocks/utils.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withPathPrefix = void 0;
+exports.timeAgo = exports.withPathPrefix = void 0;
 function withPathPrefix(link) {
     return link;
 }
 exports.withPathPrefix = withPathPrefix;
+function timeAgo(lastModified) {
+    // should return format(lastModified) in new-hope
+    var d = new Date(lastModified);
+    return "".concat(d.getDate(), "-").concat(d.getMonth() + 1, "-").concat(d.getFullYear());
+}
+exports.timeAgo = timeAgo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/EditPageButton/EditPageButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export interface EditPageButtonProps {
+  text: string;
+  to: string;
+  icon: string;
+}
+
+export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
+  return (
+    <EditButton to={to}>
+      <ButtonIcon src={icon} />
+      <ButtonText>{text}</ButtonText>
+    </EditButton>
+  );
+};
+
+const EditButton = styled(Link)`
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--color-content);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  text-decoration: none;
+`;
+
+const ButtonIcon = styled.img`
+  height: 14px;
+  padding-right: 3px;
+`;
+
+const ButtonText = styled.span`
+  line-height: 14px;
+`;

package/src/EditPageButton/index.ts

@@ -0,0 +1 @@
+export * from '@theme/EditPageButton/EditPageButton';

package/src/LastUpdated/LastUpdated.tsx

@@ -1,9 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
-import { format } from 'timeago.js';
 
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
+// import { timeAgo } from '@portal/utils';
+
+// TODO: use timeago.js instead
+// import { format } from 'timeago.js';
+// Last updated ${format(lastModified)}
+function timeAgo(date: string | Date) {
+  const d = new Date(date);
+  return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
+}
 
 export interface LastUpdatedProps {
   lastModified: string | Date;
@@ -18,15 +26,15 @@ export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | n
 
   return (
     <Wrapper data-component-name="LastUpdated/LastUpdated">
-      Last updated {format(lastModified)}
+      Last updated {timeAgo(lastModified)}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.time`
+const Wrapper = styled.div`
   color: var(--last-updated-text-color);
   font-size: var(--last-updated-font-size);
   font-family: var(--last-updated-font-family);
   line-height: var(--last-updated-line-height);
-  padding-bottom: 20px;
+  padding-bottom: 30px;
 `;

package/src/Markdown/MarkdownLayout.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
 import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
+import { EditPageButton } from '@theme/EditPageButton';
+import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
   showPrevButton?: boolean;
   showNextButton?: boolean;
+  editPage?: {
+    to: string;
+    text: string;
+    icon: string;
+  };
+  lastModified?: string | Date;
 };
 
 export function MarkdownLayout({
@@ -16,10 +25,18 @@ export function MarkdownLayout({
   markdownWrapper,
   showPrevButton,
   showNextButton,
+  editPage,
+  lastModified,
 }: MarkdownLayoutProps): JSX.Element {
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
+        <LayoutTop>
+          {lastModified && <LastUpdated lastModified={lastModified} />}
+          {editPage && (
+            <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
+          )}
+        </LayoutTop>
         {markdownWrapper}
         <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
       </ContainerWrapper>
@@ -27,3 +44,9 @@ export function MarkdownLayout({
     </PageWrapper>
   );
 }
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;

package/src/globalStyle.ts

@@ -1,12 +1,14 @@
 import { createGlobalStyle, css } from 'styled-components';
 
+import { darkMode } from './ui/darkColors';
+
 const baseColors = css`
   /* === Palette === */
 
   /**
-    * @tokens Base Colors
-    * @presenter Color
-    */
+      * @tokens Base Colors
+      * @presenter Color
+      */
 
   --color-primary-50: #87ceeb;
   --color-primary-100: #62a1ff;
@@ -85,22 +87,7 @@ const baseColors = css`
   --color-error-800: #ff1414;
   --color-error-900: #ff0000;
 
-  // @tokens End
-`;
-const baseDarkColors = css`
-  /**
-  * @tokens Base Dark Colors
-  * @presenter Color
-  */
-  --color-primary-100: #969ca6;
-  --color-primary-200: #7f8693;
-  --color-primary-300: #7d7d80;
-  --color-primary-400: #4b4f56;
-  --color-primary-500: #404042;
-  --color-primary-600: #36383d;
-  --color-primary-700: #28282a;
-  --color-primary-800: #202021;
-  --color-primary-900: #000000;
+  --colors-translucent: rgb(226 230 236 / 37%);
 
   // @tokens End
 `;
@@ -295,8 +282,8 @@ const common = css`
     */
   --border-color: var(--color-secondary-300);
   --border-color-secondary: var(--color-emphasis-600);
-  --background-color: transparent;
-
+  --background-color: var(--color-secondary-50);
+  --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);
   /**
     * @tokens Spacings
     * @presenter Spacing
@@ -425,7 +412,7 @@ const sidebar = css`
     * @tokens Sidebar colors
     * @presenter Color
     */
-  --sidebar-background-color: #fff;
+  --sidebar-background-color: var(--background-color);
   --sidebar-border-color: var(--border-color);
 
   /**
@@ -779,7 +766,7 @@ const apiReferencePanels = css`
   --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily
   --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-schemas-font-weight: var(--panel-font-weight); // @presenter
-  --panel-schemas-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-schemas-background-color: var(--background-color); // @presenter Color
   --panel-schemas-border: var(--panel-border); // @presenter Border
   --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color
 
@@ -792,7 +779,7 @@ const apiReferencePanels = css`
   --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize
   --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
   --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);
-  --panel-schemas-body-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-schemas-body-background-color: var(--background-color); // @presenter Color
   --panel-schemas-body-border: unset; // @presenter Border
 
   /**
@@ -805,7 +792,7 @@ const apiReferencePanels = css`
   --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight
   --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight
   --panel-schemas-heading-padding: var(--panel-heading-padding);
-  --panel-schemas-heading-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-schemas-heading-background-color: var(--background-color); // @presenter Color
   --panel-schemas-heading-border: unset; // @presenter Border
 
   /**
@@ -848,7 +835,7 @@ const apiReferencePanels = css`
   * @tokens Panel samples common
   */
 
-  --panel-samples-block-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-samples-block-background-color: var(--background-color); // @presenter Color
   --panel-samples-width: 50%;
 
   --panel-samples-text-color: var(--text-color-inverse); // @presenter Color
@@ -1171,7 +1158,7 @@ const tooltip = css`
     */
 
   --copy-button-tooltip-text-color: #000;
-  --copy-button-tooltip-background-color: var(--color-secondary-50);
+  --copy-button-tooltip-background-color: var(--background-color);
 
   .tooltip-copy-button {
     --tooltip-text-color: var(--copy-button-tooltip-text-color);
@@ -1197,7 +1184,7 @@ const code = css`
   --inline-code-font-size: var(--code-font-size); // @presenter FontSize
   --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
   --inline-code-text-color: #e53935; // @presenter Color
-  --inline-code-background-color: var(--color-secondary-100); // @presenter Color
+  --inline-code-background-color: var(--colors-translucent); // @presenter Color
   --inline-code-border-color: var(--border-color); // @presenter Color
   --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
 
@@ -1346,7 +1333,7 @@ const apiReferenceDocs = css`
   --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily
   --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize
   --schema-inline-code-text-color: var(--text-color); // @presenter Color
-  --schema-inline-background-color: var(--color-secondary-100); // @presenter Color
+  --schema-inline-background-color: var(--colors-translucent); // @presenter Color
   --schema-inline-border-color: var(--border-color); // @presenter Color
   --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
 
@@ -1408,7 +1395,7 @@ const apiReferenceDocs = css`
   */
 
   --schema-nested-offset: 1em; // @presenter Spacing
-  --schema-nested-background-color: var(--color-secondary-100); // @presenter Color
+  --schema-nested-background-color: var(--colors-translucent); // @presenter Color
 
   /**
   * @tokens API Reference Schema Buttons
@@ -1465,7 +1452,7 @@ const apiReferenceDocs = css`
   --linear-progress-background-color: var(--color-accent-100); // @presenter Color
 
   --fab-icon-color: var(--color-primary-500); // @presenter Color
-  --fab-background-color: var(--color-emphasis-50); // @presenter Color
+  --fab-background-color: var(--background-color); // @presenter Color
   --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow
 
   --fab-hover-background: var(--color-emphasis-200); // @presenter Color
@@ -1785,7 +1772,7 @@ const search = css`
   --search-input-hover-border: none; // @presenter Color
   --search-input-placeholder-color: var(--search-input-text-color);
 
-  --search-popover-background-color: #fff; // @presenter Color
+  --search-popover-background-color: var(--background-color); // @presenter Color
   --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
   --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
     0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow
@@ -1820,7 +1807,7 @@ const search = css`
     * @presenter Color
     */
 
-  --search-modal-background: #fff;
+  --search-modal-background: var(--background-color);
   --search-modal-text-color: var(--text-color);
   --search-modal-border: none;
   --search-modal-box-shadow: none;
@@ -1853,10 +1840,6 @@ const lastUpdated = css`
   --last-updated-line-height: var(--line-height-base);
 `;
 
-export const darkMode = css`
-  ${baseDarkColors}
-`;
-
 export const styles = css`
   :root {
     ${baseColors}

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './CopyButton';
+export * from './EditPageButton';
 export * from './JsonViewer';
 export * from './Typography';
 export * from './SidebarLogo';

package/src/mocks/utils.ts

@@ -1,3 +1,9 @@
 export function withPathPrefix(link: string): string {
   return link;
 }
+
+export function timeAgo(lastModified: string | Date): string {
+  // should return format(lastModified) in new-hope
+  const d = new Date(lastModified);
+  return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
+}

package/src/ui/darkColors.tsx

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+export const darkMode = css`
+  /**
+     * @tokens Dark Colors
+     * @presenter Color
+     */
+
+  --color-primary-300: #1e5ab1;
+  --color-primary-500: #003c95;
+
+  --color-accent-50: #6c91c0;
+
+  --color-secondary-50: #031e48;
+  --color-secondary-200: #142d62;
+  --color-secondary-300: #3f517c;
+  --color-secondary-500: #222222;
+
+  --color-emphasis-100: #5c5e62;
+  --color-emphasis-800: #f0f0f0;
+
+  --color-success-50: #627565;
+  --color-error-50: #bda3a7;
+  --color-warning-50: #8c8469;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
+`;

package/ui/darkColors.d.ts

@@ -0,0 +1 @@
+export declare const darkMode: import("styled-components").FlattenSimpleInterpolation;

package/ui/darkColors.js

@@ -0,0 +1,10 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkMode = void 0;
+var styled_components_1 = require("styled-components");
+exports.darkMode = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /**\n     * @tokens Dark Colors\n     * @presenter Color\n     */\n\n  --color-primary-300: #1e5ab1;\n  --color-primary-500: #003c95;\n\n  --color-accent-50: #6c91c0;\n\n  --color-secondary-50: #031e48;\n  --color-secondary-200: #142d62;\n  --color-secondary-300: #3f517c;\n  --color-secondary-500: #222222;\n\n  --color-emphasis-100: #5c5e62;\n  --color-emphasis-800: #f0f0f0;\n\n  --color-success-50: #627565;\n  --color-error-50: #bda3a7;\n  --color-warning-50: #8c8469;\n\n  background-color: var(--background-color);\n  color: var(--text-color);\n"], ["\n  /**\n     * @tokens Dark Colors\n     * @presenter Color\n     */\n\n  --color-primary-300: #1e5ab1;\n  --color-primary-500: #003c95;\n\n  --color-accent-50: #6c91c0;\n\n  --color-secondary-50: #031e48;\n  --color-secondary-200: #142d62;\n  --color-secondary-300: #3f517c;\n  --color-secondary-500: #222222;\n\n  --color-emphasis-100: #5c5e62;\n  --color-emphasis-800: #f0f0f0;\n\n  --color-success-50: #627565;\n  --color-error-50: #bda3a7;\n  --color-warning-50: #8c8469;\n\n  background-color: var(--background-color);\n  color: var(--text-color);\n"])));
+var templateObject_1;