refactor: wt-label colors + docs, wt-input colors [WTEL-3937, WTEL-3940]

docs/pages/webitel-ui/components/wt-label/Readme.md

@@ -0,0 +1,49 @@
+<script setup>
+import Docs from './wt-label-docs.vue';
+import ExampleLabel from './examples/example-label.vue';
+import ExampleErrorLabel from './examples/example-error-label.vue';
+import ExampleDisabledLabel from './examples/example-disabled-label.vue';
+import ExampleHintedLabel from './examples/example-hinted-label.vue';
+</script>
+
+# WtLabel
+
+## Props
+::: raw
+<Docs/>
+:::
+
+## Example label
+::: raw
+<ExampleLabel/>
+:::
+
+::: details Code
+<<< ./examples/example-label.vue
+:::
+## Error label
+::: raw
+<ExampleErrorLabel/>
+:::
+
+::: details Code
+<<< ./examples/example-error-label.vue
+:::
+
+## Disabled label
+::: raw
+<ExampleDisabledLabel/>
+:::
+
+::: details Code
+<<< ./examples/example-disabled-label.vue
+:::
+
+## Hinted label
+::: raw
+<ExampleHintedLabel/>
+:::
+
+::: details Code
+<<< ./examples/example-hinted-label.vue
+:::

docs/pages/webitel-ui/components/wt-label/examples/example-disabled-label.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-label
+    disabled
+  >
+    Disabled label
+  </wt-label>
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-label/examples/example-error-label.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-label
+    invalid
+  >
+    Error label
+  </wt-label>
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-label/examples/example-hinted-label.vue

@@ -0,0 +1,15 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-label
+    hint="Hint text"
+  >
+    Hinted label
+  </wt-label>
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-label/examples/example-label.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <wt-label>
+    Example label
+  </wt-label>
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-label/wt-label-docs.vue

@@ -1,12 +1,5 @@
 <template>
   <section>
-    <h2>Label</h2>
-    <article>
-      <div class="example-wrapper">
-        <wt-label>Input label</wt-label>
-        <pre><code class="language-html">&lt;wt-label&gt;Input label&lt;/wt-label&gt;</code></pre>
-      </div>
-    </article>
     <component-props
       :properties="properties"
     />
@@ -21,12 +14,6 @@
     name: 'WtLabelDocs',
     data: () => ({
       properties: [
-        {
-          value: 'for',
-          code: '<wt-label for="inputIdName"></wt-label>',
-          type: 'String',
-          description: 'Functionally binds label to its input',
-        },
         {
           value: 'disabled',
           code: '<wt-label disabled></wt-label>',