Merge pull request #213 from Tap30/feat/add-design-guidline-template

docs: add design layout

Author: amir78729

.gitignore

@@ -64,4 +64,4 @@ storybook-static
 # Vitepress
 docs/.vitepress/dist
 docs/.vitepress/cache
-docs/components/custom-elements.json
+docs/dev/components/custom-elements.json

docs/.vitepress/nav.ts

@@ -3,11 +3,15 @@ import { DefaultTheme } from "vitepress";
 export default [
   {
     text: 'Getting Started',
-    link: '/getting-started',
+    link: '/dev/getting-started',
   },
   {
     text: 'Components',
-    link: '/components/tap-avatar',
+    link: '/dev/components/tap-avatar',
+  },
+  {
+    text: 'Design Guidelines',
+    link: '/design/guidelines',
   },
   {
     text: 'Related Links',

docs/.vitepress/sidebar.ts

@@ -2,50 +2,83 @@ import fs from 'fs';
 import { DefaultTheme } from "vitepress";
 import type { Package } from "custom-elements-manifest";
 
-const file = fs.readFileSync('dist/custom-elements.json');
-const manifest = JSON.parse(file.toString()) as Package;
+const getComponentsDevItems = ()  => {
+  const file = fs.readFileSync('dist/custom-elements.json');
+  const manifest = JSON.parse(file.toString()) as Package;
+  return manifest.modules
+    .filter((module) => !!module.declarations?.length)
+    .map((module) => {
+      if (!module.exports)
+        throw new Error(`Module has no export: ${module.path}`);
 
-const components = manifest.modules
-  .filter((module) => !!module.declarations?.length)
-  .map((module) => {
-    if (!module.exports)
-      throw new Error(`Module has no export: ${module.path}`);
+      const components = module.exports.filter(
+        (exp) => exp.kind === 'custom-element-definition',
+      );
 
-    const components = module.exports.filter(
-      (exp) => exp.kind === 'custom-element-definition',
-    );
-
-    // For now we asume we have only one custom element per moduel
-    const component = components[0];
+      // For now, we assume we have only one custom element per module
+      const component = components[0];
 
     return {
       link: '/components/' + component.name,
       text: component.name,
     };
   });
+}
+
+const getSidebarDevContents = (): DefaultTheme.Sidebar => {
+  return [
+    {text: 'Getting Started', link: '/getting-started'},
+    {
+      text: 'Design System Guidelines',
+      base: '/design/',
+      link: '/guidelines'
+    },
+    {
+      text: 'Components',
+      collapsed: false,
+      items: getComponentsDevItems(),
+    },
+    {
+      text: 'API References',
+      collapsed: false,
+      items: [
+        {text: 'CSS Parts', link: '/references/css-parts'},
+        {
+          text: 'Design Tokens', items: [
+            {text: 'Colors', link: '/references/color-tokens'},
+            {text: 'Radius', link: '/references/radius-tokens'},
+            {text: 'Spacing', link: '/references/spacing-tokens'},
+            {text: 'Stroke', link: '/references/stroke-tokens'},
+            {text: 'Typography', link: '/references/typography-tokens'},
+            {text: 'Components', link: '/references/components-tokens'},
+          ]
+        },
+      ],
+    },
+  ];
+}
+
+const getComponentsDesignItems = ()  => {
+  const componentGuidelinesBasePath = 'docs/design/components'
+  const files = fs.readdirSync(componentGuidelinesBasePath)
+    .filter((file) => file.endsWith('.md'))
+    .map((file) => file.replace('.md', ''));
+  return files.map((file) => {
+    return {
+      link: 'components/' + file,
+      text: file,
+    };
+  });
+};
+
+const getSidebarDesignContents = (): DefaultTheme.Sidebar => {
+  return [
+    {text: 'Introduction', link: '/guidelines'},
+    {text: 'Component Guidelines', base: '/design/', items: getComponentsDesignItems()}
+  ];
+}
 
-export default [
-  { text: 'Getting Started', link: '/getting-started' },
-  {
-    text: 'Components',
-    collapsed: false,
-    items: components,
-  },
-  {
-    text: 'API References',
-    collapsed: false,
-    items: [
-      { text: 'CSS Parts', link: '/references/css-parts' },
-      {
-        text: 'Design Tokens', items: [
-          { text: 'Colors', link: '/references/color-tokens' },
-          { text: 'Radius', link: '/references/radius-tokens' },
-          { text: 'Spacing', link: '/references/spacing-tokens' },
-          { text: 'Stroke', link: '/references/stroke-tokens' },
-          { text: 'Typography', link: '/references/typography-tokens' },
-          { text: 'Components', link: '/references/components-tokens' },
-        ]
-      },
-    ],
-  },
-] as DefaultTheme.SidebarItem[]
+export default {
+  '/dev/': { base: '/dev/', items: getSidebarDevContents() },
+  '/design/': { base: '/design/', items: getSidebarDesignContents() },
+} as DefaultTheme.Sidebar

docs/.vitepress/theme/index.ts

@@ -1,5 +1,8 @@
-// .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme'
 import './custom.css'
+import '../../components'
+import '../../../styles/theme.css'
 
-export default DefaultTheme
+export default {
+  extends: DefaultTheme,
+}

docs/assets/bottom-sheet-action-bar.png

@@ -0,0 +1,73 @@
+import {css} from "lit";
+
+export default css`
+  :host {
+    box-sizing: border-box;
+    flex: 1;
+    align-self: stretch;
+    display: flex;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  .guideline-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    border-radius: 8px;
+    padding: 16px 16px 8px;
+    line-height: 24px;
+    font-size: var(--vp-custom-block-font-size);
+    border-color: var(--vp-custom-block-info-border);
+    color: var(--vp-custom-block-info-text);
+    background-color: var(--vp-custom-block-info-bg);
+  }
+
+  .image {
+    margin: auto;
+  }
+  .image img {
+    width: 100%;
+  }
+
+  .badge {
+    display: inline-block;
+    margin-left: 2px;
+    border: 1px solid transparent;
+    height: 26px;
+    border-radius: 12px;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
+    transform: translateY(10px);
+  }
+
+  .do {
+    background-color: var(--tap-palette-green-400);
+    color: #ffffff;
+  }
+  .dont {
+    background-color: var(--tap-palette-red-400);
+    color: #ffffff;
+  }
+  .caution {
+    background-color: var(--tap-palette-yellow-400);
+    color: #000000;
+  }
+
+  @media (max-width: 1100px) {
+    :host {
+      width: 100%;
+      align-items: stretch;
+    }
+    .guideline-card {
+      width: 100%;
+    }
+  }
+`;

docs/assets/bottom-sheet-anatomy.png

@@ -0,0 +1,48 @@
+import {html, LitElement, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+
+export class GuidelineCard extends LitElement {
+  @property({ attribute: 'image-url' }) imageUrl = '';
+
+  @property() variant?: 'do' | 'dont' | 'caution';
+
+  private renderBadge () {
+
+    const badgeConfig = {
+      do: {
+        title: 'Do',
+        class: 'do'
+      },
+      dont: {
+        title: 'Don\'t',
+        class: 'dont'
+      },
+      caution: {
+        title: 'Caution',
+        class: 'caution'
+      },
+    }
+
+
+    if (this.variant && Object.keys(badgeConfig).includes(this.variant)) {
+      const selectedBadge = badgeConfig[this.variant];
+      return html`<div class="badge ${selectedBadge.class}">${selectedBadge.title}</div>`
+    }
+    return nothing
+  }
+
+  render() {
+    return html`
+      <div part="guideline-card" class="guideline-card ">
+        <div class="image">
+          <slot name="card-image"></slot>
+        </div>
+        ${this.renderBadge()}
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+

docs/assets/bottom-sheet-caution-1.png

@@ -0,0 +1,14 @@
+import { customElement } from 'lit/decorators.js';
+import styles from './doc-guideline-card.style';
+import {GuidelineCard} from "./doc-guideline-card";
+
+@customElement('doc-guideline-card')
+export class DocGuidelineCard extends GuidelineCard {
+  static readonly styles = [styles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'doc-guideline-card': DocGuidelineCard;
+  }
+}