easy to see

Signed-off-by: 8845musign <[email protected]>
ubie-oss · Apr 20, 2024 · 35a06ea · 35a06ea
1 parent c8e2318
commit 35a06ea
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 83 deletions.
diff --git a/src/components/astro/PropsTable.astro b/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>
diff --git a/src/components/react/Table/Cell.module.css b/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;
+}
diff --git a/src/components/react/Table/HeadCell.module.css b/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;
+}
diff --git a/src/components/react/Table/Th.module.css b/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;
+}
diff --git a/src/components/react/Table/index.module.css b/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%;
 }
diff --git a/src/components/react/Table/index.tsx b/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>
 );
 

diff --git a/src/components/react/figures/color/semantic/BaseGrid.module.css b/src/components/react/figures/color/semantic/BaseGrid.module.css
@@ -1,47 +1,57 @@
 .table {
-    width: 100%;
-    border-collapse: collapse;
+  width: 100%;
+  border-collapse: collapse;
 }
 
 .tableWrapper {
-    width: 100%;
-    overflow-x: auto;
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
 }
 
 .rowHead {
-    background-color: var(--color-background-gray);
+  background-color: var(--color-background-gray);
+}
+
+.row + .row {
+  border-top: 1px solid var(--color-border);
 }
 
 .cellHead {
-    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;
 }
 
 .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);
+  white-space: nowrap;
+  border: none !important;
 }
 
 .cellCopy {
-    white-space: nowrap;
+  padding: var(--size-spacing-sm) !important;
+  white-space: nowrap;
+  border: none !important;
 }
 
 .colorChip {
-    display: inline-flex;
-    width: 30px;
-    height: 19px;
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
+  display: inline-flex;
+  width: 30px;
+  height: 19px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
 }
 
 .colorName {
-    display: flex;
-    gap: var(--size-spacing-xs);
-    align-items: center;
-    font-weight: bold;
-}
+  display: flex;
+  gap: var(--size-spacing-xs);
+  align-items: center;
+  font-weight: bold;
+}
diff --git a/src/components/react/figures/color/semantic/BaseGrid.tsx b/src/components/react/figures/color/semantic/BaseGrid.tsx
@@ -32,7 +32,7 @@ const BaseGrid: FC<Props> = ({ colors }) => (
       </thead>
       <tbody>
         {colors.map((color) => (
-          <tr key={color.token.name}>
+          <tr key={color.token.name} className={styles.row}>
             <th scope="row" className={styles.cell}>
               <div className={styles.colorName}>
                 <span className={styles.colorChip} style={{ backgroundColor: color.token.value }} />