@redocly/theme-experimental 0.74.2-pingfed.3 → 0.81.2-rc.2

package/markdoc/Cards/Card.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from './Card';
+
+type Story = StoryObj<typeof Card>;
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+};
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    title: 'Card Links',
+    links: {
+      type: 'group' as const,
+      label: 'Card Links',
+      items: [
+        {
+          type: 'link' as const,
+          link: '#1',
+          label: 'Link 1',
+        },
+        {
+          type: 'link' as const,
+          link: '#2',
+          label: 'Link 2',
+        },
+      ],
+    },
+  },
+  render: (args) => <Card {...args} />,
+};

package/markdoc/Cards/Card.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { H3 } from '@redocly/theme/components/Typography/H3';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+import type { ResolvedNavItem } from '@redocly/theme/core/types';
+
+export interface CardProps {
+  title?: string;
+  icon?: string;
+  links: ResolvedNavItem;
+  className?: string;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  return (
+    <CardWrapper data-component-name="Cards/Card" className={props.className}>
+      {props.icon && <img src={props?.icon} alt={props?.title} />}
+      {props.title && <H3>{props.title}</H3>}
+      {props.links.items && (
+        <CardLinksList>
+          {props.links.items.map((item) => (
+            <li key={item.label}>
+              <Link to={item.link as string}>
+                {translate(item.labelTranslationKey, item.label)}
+              </Link>
+            </li>
+          ))}
+        </CardLinksList>
+      )}
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.div`
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  min-width: 25%;
+  font-family: var(--font-family-base);
+`;
+
+const CardLinksList = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin-bottom: 10px;
+  }
+`;

package/markdoc/Cards/CardsBlock.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const CardsBlock = styled.div.attrs<{ className?: string }>(({ className }) => ({
+  'data-component-name': 'Cards/CardsBlock',
+  className,
+}))`
+  display: flex;
+  padding: 20px 0;
+  justify-content: space-between;
+`;

package/markdoc/Cards/__tests__/Card.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { Card } from '../Card';
+import { renderWithRouter } from '../../../../../tests/utils/';
+
+jest.mock('@redocly/theme/hooks/useThemeHooks');
+
+const links = {
+  type: 'group' as const,
+  label: 'Card Links',
+  items: [
+    {
+      type: 'link' as const,
+      link: '#1',
+      label: 'Link 1',
+    },
+    {
+      type: 'link' as const,
+      link: '#2',
+      label: 'Link 2',
+    },
+  ],
+};
+
+describe('Card', () => {
+  const props = {
+    title: 'Example Card',
+    icon: 'example.png',
+    links,
+  };
+
+  it('renders', () => {
+    const { container } = renderWithRouter(<Card title="Card Links" links={links} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders the title when provided', () => {
+    const screen = renderWithRouter(<Card {...props} />);
+    expect(screen.getByText('Example Card')).toBeInTheDocument();
+  });
+
+  it('renders the icon when provided', () => {
+    const screen = renderWithRouter(<Card {...props} />);
+    expect(screen.getByAltText('Example Card')).toHaveAttribute('src', 'example.png');
+  });
+
+  it('renders the links when provided', () => {
+    const screen = renderWithRouter(<Card {...props} />);
+    expect(screen.getByText('Link 1')).toHaveAttribute('href', '/#1');
+    expect(screen.getByText('Link 2')).toHaveAttribute('href', '/#2');
+  });
+
+  it('does not render the title when not provided', () => {
+    const { container } = renderWithRouter(<Card links={props.links} />);
+    expect(container.querySelector('h3')).toBeNull();
+  });
+
+  it('does not render the icon when not provided', () => {
+    const { container } = renderWithRouter(<Card title={props.title} links={props.links} />);
+    expect(container.querySelector('img')).toBeNull();
+  });
+});

package/markdoc/Cards/__tests__/CardsBlock.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { CardsBlock } from '../CardsBlock';
+
+describe('CardsBlock', () => {
+  it('renders', () => {
+    const { container } = render(<CardsBlock></CardsBlock>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/markdoc/Cards/index.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './CardsBlock';

package/markdoc/CodeStep/CodeStep.tsx

@@ -57,7 +57,7 @@ const Wrapper = styled.div<{ active: boolean }>`
   box-sizing: border-box;
   border-left: 3px solid;
   border-left-color: ${({ active }) => (active ? 'var(--color-primary-base)' : 'transparent')};
-  background-color: ${({ active }) => (active ? 'var(--bg-raised)' : 'transparent')};
+  background-color: ${({ active }) => (active ? 'var(--bg-color-raised)' : 'transparent')};
   border-top: 1px solid #cbccd1;
   cursor: pointer;
 

package/markdoc/components.tsx

@@ -1 +1,2 @@
 export { CodeStep } from './CodeStep/CodeStep';
+export * from './Cards/index';

package/markdoc/schema.ts

@@ -6,3 +6,18 @@ export const codeStep: Schema = {
   },
   render: 'CodeStep',
 };
+
+export const card: Schema = {
+  attributes: {
+    title: { type: String, required: false },
+    icon: { type: String, required: false },
+    links: { type: String },
+  },
+  selfClosing: true,
+  render: 'Card',
+};
+
+export const cardsBlock: Schema = {
+  attributes: {},
+  render: 'CardsBlock',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme-experimental",
-  "version": "0.74.2-pingfed.3",
+  "version": "0.81.2-rc.2",
   "description": "Experimental UI components lib",
   "keywords": [
     "theme-experimental",
@@ -44,8 +44,8 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.45",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
     "@typescript-eslint/eslint-plugin": "5.55.0",
@@ -58,32 +58,32 @@
     "jest-when": "3.6.0",
     "json-schema-to-ts": "2.7.2",
     "lodash.throttle": "4.1.1",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.0",
     "react-router-dom": "6.21.1",
+    "rimraf": "5.0.5",
     "storybook": "7.6.4",
     "storybook-addon-pseudo-states": "2.1.2",
     "storybook-design-token": "3.0.0-beta.6",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
-    "ts-jest": "29.1.1",
+    "ts-jest": "29.1.2",
     "ts-node": "10.9.1",
     "ts-node-dev": "2.0.0",
     "tsc-alias": "1.8.3",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.2.2",
-    "webpack": "5.88.2",
-    "@redocly/portal-types": "1.2.1"
+    "webpack": "5.88.2"
   },
   "dependencies": {
-    "@redocly/theme": "^0.74.2-pingfed.3"
+    "@redocly/theme": "^0.81.2-rc.2"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
     "ts:check": "tsc --noEmit --skipLibCheck",
-    "clean": "rm -rf lib",
+    "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "build": "npm run clean && npm run compile",
     "storybook": "storybook dev -p 6007",

package/src/layouts/CodeGuide/CodeDemo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
-import { CodeBlock } from '@theme/components/CodeBlock/CodeBlock';
 import { CodeGuideContext, useCodeGuideHighlightLines } from '@portal/CodeGuide';
 
 export function CodeDemo() {

package/src/layouts/CodeGuide/CodeGuide.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 
-import { CodeDemo } from '@theme/layouts/CodeGuide/CodeDemo';
-import { MarkdownWrapper } from '@theme/components/Markdown/MarkdownWrapper';
 import { CodeGuideProvider } from '@portal/CodeGuide';
 
+import { CodeDemo } from './CodeDemo';
+
 export default function CodeGuide(props: React.PropsWithChildren<any>) {
   const {
     pageProps: { codeGuideFiles },
@@ -20,7 +21,7 @@ export default function CodeGuide(props: React.PropsWithChildren<any>) {
   return (
     <CodeGuideProvider initialState={initialState}>
       <Wrapper data-component-name="layouts/CodeGuide">
-        <MarkdownWrapper>{children}</MarkdownWrapper>
+        <Markdown>{children}</Markdown>
         <div>
           <StickyPosition>
             <CodeDemo />