Skip to content

Commit d805b9d

Browse files
jeverhart-dialpadjeverhart-dialpad
authored
docs: DLT-2908 ui kits landing page (#1049)
1 parent a2dc3f0 commit d805b9d

15 files changed

Lines changed: 457 additions & 116 deletions

File tree

‎apps/dialtone-documentation/docs/.vuepress/baseComponents/UiKitsComparisonTable.vue‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<div v-dt-scrollbar:never class="d-hmx464 d-bar8 d-ba d-bc-subtle d-mt24">
3+
<div>
4+
<table class="d-table dialtone-doc-table">
5+
<thead class="d-bgc-primary d-ps-sticky d-zi-base1 d-t0">
6+
<tr>
7+
<th scope="col" class="d-p0 d-bbw0 d-tt-none">
8+
<div class="d-p16 d-bb d-bbw1">
9+
Criteria
10+
</div>
11+
</th>
12+
<th scope="col" class="d-p0 d-bbw0 d-tt-none">
13+
<div class="d-p16 d-bb d-bbw1">
14+
Design System Component
15+
</div>
16+
</th>
17+
<th scope="col" class="d-p0 d-bbw0 d-tt-none">
18+
<div class="d-p16 d-bb d-bbw1">
19+
UI Kit Component
20+
</div>
21+
</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr>
26+
<td class="d-ta-left">
27+
<strong>Token &amp; theming dependency</strong>
28+
</td>
29+
<td class="d-ta-left">
30+
Fully token-driven; adapts to themes/brands.
31+
</td>
32+
<td class="d-ta-left">
33+
May extend tokens with product-specific styles.
34+
</td>
35+
</tr>
36+
<tr>
37+
<td class="d-ta-left">
38+
<strong>Level of abstraction</strong>
39+
</td>
40+
<td class="d-ta-left">
41+
Atomic or small molecule (Button, Input, Modal).
42+
</td>
43+
<td class="d-ta-left">
44+
Composite pattern (Message Composer, Callbar Row).
45+
</td>
46+
</tr>
47+
<tr>
48+
<td class="d-ta-left">
49+
<strong>Scope of applicability</strong>
50+
</td>
51+
<td class="d-ta-left">
52+
Broad, cross-product and cross-platform usage.
53+
</td>
54+
<td class="d-ta-left">
55+
Specific to one feature, product, or surface.
56+
</td>
57+
</tr>
58+
<tr>
59+
<td class="d-ta-left">
60+
<strong>Reusability</strong>
61+
</td>
62+
<td class="d-ta-left">
63+
Reusable across many contexts by design.
64+
</td>
65+
<td class="d-ta-left">
66+
Reusable across some teams/features, not universal.
67+
</td>
68+
</tr>
69+
<tr>
70+
<td class="d-ta-left">
71+
<strong>API stability</strong>
72+
</td>
73+
<td class="d-ta-left">
74+
Stable, minimal, generic API; rare breaking changes.
75+
</td>
76+
<td class="d-ta-left">
77+
APIs evolve quickly with product needs.
78+
</td>
79+
</tr>
80+
<tr>
81+
<td class="d-ta-left">
82+
<strong>Behavioral independence</strong>
83+
</td>
84+
<td class="d-ta-left">
85+
Presentation-level only, no business logic.
86+
</td>
87+
<td class="d-ta-left">
88+
Encodes domain/feature-specific behaviors.
89+
</td>
90+
</tr>
91+
<tr>
92+
<td class="d-ta-left">
93+
<strong>Surface area</strong>
94+
</td>
95+
<td class="d-ta-left">
96+
Singular control or simple combination.
97+
</td>
98+
<td class="d-ta-left">
99+
Large composition of atoms + HTML + logic.
100+
</td>
101+
</tr>
102+
<tr>
103+
<td class="d-ta-left">
104+
<strong>Cross-platform support</strong>
105+
</td>
106+
<td class="d-ta-left">
107+
Exists or planned across Web, Mobile, Desktop.
108+
</td>
109+
<td class="d-ta-left">
110+
Only relevant on one platform or channel.
111+
</td>
112+
</tr>
113+
<tr>
114+
<td class="d-ta-left">
115+
<strong>Adoption signal</strong>
116+
</td>
117+
<td class="d-ta-left">
118+
Adopted or requested by multiple teams.
119+
</td>
120+
<td class="d-ta-left">
121+
Primarily used by one team/feature until proven.
122+
</td>
123+
</tr>
124+
<tr>
125+
<td class="d-ta-left">
126+
<strong>Accessibility &amp; i18n</strong>
127+
</td>
128+
<td class="d-ta-left">
129+
Meets full accessibility and internationalization standards.
130+
</td>
131+
<td class="d-ta-left">
132+
Accessibility handled contextually, may be lighter.
133+
</td>
134+
</tr>
135+
</tbody>
136+
</table>
137+
</div>
138+
</div>
139+
</template>
140+
141+
<script setup>
142+
defineOptions({
143+
name: 'UiKitsComparisonTable',
144+
});
145+
</script>

‎apps/dialtone-documentation/docs/.vuepress/client.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import CodeExampleTabs from './baseComponents/CodeExampleTabs.vue';
1919
import SvgLoader from './baseComponents/SvgLoader.vue';
2020
import DialtoneUsage from './baseComponents/DialtoneUsage.vue';
2121
import FlexStackNotice from './baseComponents/FlexStackNotice.vue';
22+
import UiKitsComparisonTable from './baseComponents/UiKitsComparisonTable.vue';
2223

2324
export default defineClientConfig({
2425
enhance ({ app }) {
@@ -40,6 +41,7 @@ export default defineClientConfig({
4041
app.component('SvgLoader', SvgLoader);
4142
app.component('DialtoneUsage', DialtoneUsage);
4243
app.component('FlexStackNotice', FlexStackNotice);
44+
app.component('UiKitsComparisonTable', UiKitsComparisonTable);
4345
},
4446
setup () {
4547
const headers = shallowRef([]);

0 commit comments

Comments
 (0)