Merge pull request #24 from 8845musign/add-heading-component-document

Add Heading Component Page

package.json

@@ -31,7 +31,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@ubie/design-tokens": "^0.1.4",
     "@ubie/ubie-icons": "^0.6.1",
-    "@ubie/ubie-ui": "^0.0.14",
+    "@ubie/ubie-ui": "^0.0.15",
     "@unocss/reset": "^0.58.5",
     "astro": "^4.4.4",
     "astro-icon": "^1.1.0",

src/components/astro/PropsTable.astro

@@ -18,71 +18,125 @@ const { propsArray } = Astro.props;
   propsArray.length === 0 ? (
     <p>Propsの説明がありません</p>
   ) : (
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Prop Name</th>
-          <th>Type</th>
-          <th>Default</th>
-          <th>required</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {propsArray.map((prop) => (
+    <div class="tableWrapper">
+      <table class="table">
+        <thead>
           <tr>
-            <td>{prop.name}</td>
-            <td>
-              {Array.isArray(prop.type) ? (
-                prop.type.map((type) => {
-                  return <code>{type}</code>;
-                })
-              ) : (
-                <code>{prop.type}</code>
-              )}
-            </td>
-            <td>
-              <code>{prop.defaultValue || '-'}</code>
-            </td>
-            <td>{prop.required ? 'YES' : 'NO'}</td>
-            <td>{prop.description || '-'}</td>
+            <th>Name</th>
+            <th class="type">Type</th>
+            <th>Default</th>
+            <th>Description</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {propsArray.map((prop) => (
+            <tr>
+              <th scope="row" class="nowrap">
+                {prop.name}
+                {prop.required && <div class="required">required</div>}
+                {!prop.required && !prop.defaultValue && <div class="optional">optional</div>}
+              </th>
+              <td class="type">
+                {Array.isArray(prop.type) ? (
+                  prop.type.map((type, i) => {
+                    return (
+                      <>
+                        {i !== 0 && <span> | </span>}
+                        <code>{type}</code>
+                      </>
+                    );
+                  })
+                ) : (
+                  <code>{prop.type}</code>
+                )}
+              </td>
+              <td>
+                <code>{prop.defaultValue || '-'}</code>
+              </td>
+              <td>{prop.description || '-'}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   )
 }
 
 <style>
+  .tableWrapper {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+  }
+
   table {
     width: 100%;
     text-align: left;
-    border-collapse: collapse;
+    vertical-align: top;
   }
 
   thead > tr {
     background-color: var(--color-background-gray);
   }
 
+  tr + tr {
+    border-top: 1px solid var(--color-border);
+  }
+
   th {
-    padding: var(--size-spacing-xs);
     font-size: var(--text-body-sm-size);
     line-height: var(--text-body-sm-tight-line);
     color: var(--color-ubie-black-500);
   }
 
   td {
-    padding: var(--size-spacing-xs);
     font-size: var(--text-body-sm-size);
     line-height: var(--text-body-sm-tight-line);
     word-break: break-word;
   }
 
+  tr > th,
+  tr > td {
+    padding: var(--size-spacing-sm);
+    vertical-align: top;
+    border: none;
+  }
+
+  th.type,
+  td.type {
+    width: 30%;
+  }
+
+  td.type code {
+    margin: 3px;
+  }
+
+  td.type code:first-child {
+    margin-left: 0;
+  }
+
+  tbody > tr > th {
+    color: var(--color-text-main);
+  }
+
+  th.nowrap {
+    white-space: nowrap;
+  }
+
   tbody > tr > td:first-child {
     font-weight: bold;
+    color: var(--color-alert);
   }
 
-  td > code {
-    margin: 3px;
+  .required {
+    font-size: var(--text-note-md-size);
+    line-height: var(--text-note-md-line);
+    color: var(--color-alert);
+  }
+
+  .optional {
+    font-size: var(--text-note-md-size);
+    font-weight: normal;
+    line-height: var(--text-note-md-line);
+    color: var(--color-text-sub);
   }
 </style>

src/components/react/Table/Cell.module.css

@@ -1,10 +1,12 @@
 .cell {
-    padding: var(--size-spacing-xs);
-    font-size: var(--text-body-sm-size);
-    line-height: var(--text-body-sm-tight-line);
-    white-space: nowrap;
+  padding: var(--size-spacing-sm) !important;
+  font-size: var(--text-body-sm-size);
+  line-height: var(--text-body-sm-tight-line);
+  text-align: left;
+  white-space: nowrap;
+  border: none !important;
 }
 
 .cell.header {
-    font-weight: bold;
-}
+  font-weight: bold;
+}

src/components/react/Table/HeadCell.module.css

@@ -1,7 +1,8 @@
 .cell {
-    padding: var(--size-spacing-xs) ;
-    font-size: var(--text-body-sm-size);
-    line-height: var(--text-body-sm-tight-line);
-    color: var(--color-ubie-black-500);
-    text-align: left;
-}
+  padding: var(--size-spacing-sm) !important;
+  font-size: var(--text-body-sm-size);
+  line-height: var(--text-body-sm-tight-line);
+  color: var(--color-ubie-black-500);
+  text-align: left;
+  border: none !important;
+}

src/components/react/Table/Th.module.css

@@ -1,6 +1,6 @@
 .th {
-    padding: var(--size-spacing-xs);
-    font-size: var(--text-heading-xs-size);
-    color: var(--color-ubie-black-700);
-    text-align-last: left;
-}
+  padding: var(--size-spacing-xs);
+  font-size: var(--text-heading-xs-size);
+  color: var(--color-ubie-black-700);
+  text-align-last: left;
+}

src/components/react/Table/index.module.css

@@ -1,6 +1,12 @@
 .wrapper {
-    width: 100%;
-    margin-top: 60px;
-    margin-bottom: 60px;
-    overflow: auto;
+  width: 100%;
+  margin-top: 60px;
+  margin-bottom: 60px;
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+}
+
+.table {
+  width: 100%;
 }

src/components/react/Table/index.tsx

@@ -14,7 +14,7 @@ interface Props {
 
 const Table: FC<Props> = ({ children }) => (
   <div className={styles.wrapper}>
-    <table>{children}</table>
+    <table className={styles.table}>{children}</table>
   </div>
 );
 

src/components/react/examples/heading/HasLink.tsx

@@ -0,0 +1,18 @@
+import { Heading, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const HasLink: FC = () => {
+  return (
+    <Stack spacing="md">
+      <Heading as="p" variant="secondary" size="md">
+        スマートフォン問診（secondary）<a href="https://vitals.ubie.life/">Link</a>
+      </Heading>
+
+      <Heading as="p" variant="primary" size="md">
+        スマートフォン問診（primary）<a href="https://vitals.ubie.life/">Link</a>
+      </Heading>
+    </Stack>
+  );
+};
+
+export default HasLink;

src/components/react/examples/heading/Icon.tsx

@@ -0,0 +1,25 @@
+import { UbieIcon, ThumbUpOutlineIcon, SetupIcon } from '@ubie/ubie-icons';
+import { Heading, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Icon: FC = () => {
+  return (
+    <Stack spacing="md">
+      <Heading as="p" primaryIcon={<UbieIcon />}>
+        スマートフォン問診
+      </Heading>
+
+      <Heading as="p" accentIcon={<ThumbUpOutlineIcon />}>
+        スマートフォン問診
+      </Heading>
+
+      <div style={{ backgroundColor: 'var(--color-primary)', padding: 'var(--size-spacing-xs)' }}>
+        <Heading as="p" variant="white" whiteIcon={<SetupIcon />}>
+          スマートフォン問診
+        </Heading>
+      </div>
+    </Stack>
+  );
+};
+
+export default Icon;

src/components/react/examples/heading/LeadingBorder.tsx

@@ -0,0 +1,12 @@
+import { Heading } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const LeadingBorder: FC = () => {
+  return (
+    <Heading as="p" leadingBorder>
+      スマートフォン問診
+    </Heading>
+  );
+};
+
+export default LeadingBorder;

src/components/react/examples/heading/Size.tsx

@@ -0,0 +1,51 @@
+import { Heading, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Size: FC = () => {
+  return (
+    <Stack spacing="md">
+      <Heading as="p" size="xs">
+        xs: スマートフォン問診
+      </Heading>
+      <Heading as="p" size="xs">
+        xs: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" size="sm">
+        sm: スマートフォン問診
+      </Heading>
+      <Heading as="p" size="sm">
+        sm: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" size="md">
+        md: スマートフォン問診
+      </Heading>
+      <Heading as="p">
+        md: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" size="lg">
+        lg: スマートフォン問診
+      </Heading>
+      <Heading as="p" size="lg">
+        lg: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" size="xl">
+        xl: スマートフォン問診
+      </Heading>
+      <Heading as="p" size="xl">
+        xl: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+    </Stack>
+  );
+};
+
+export default Size;

src/components/react/examples/heading/TextAlign.tsx

@@ -0,0 +1,20 @@
+import { Heading, Stack } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const TextAlign: FC = () => {
+  return (
+    <Stack spacing="md" alignItems="normal">
+      <Heading as="p" size="md" textAlign="left">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" size="md" textAlign="center">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" size="md" textAlign="right">
+        スマートフォン問診
+      </Heading>
+    </Stack>
+  );
+};
+
+export default TextAlign;