fix(components): add _readonly_ attribute for text-field and textarea (…

…#284) * fix: add story for readonly attr in text-field, also attr + story for textarea * docs(storybook): hide _readonly_ stories for textarea and text-field, for now * chore: undo changes to _develop_ npm script (separate PR onward)
telekom · Apr 28, 2021 · ac469a5 · ac469a5
1 parent d82a02f
commit ac469a5
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 0 deletions.
diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md
@@ -19,6 +19,7 @@
 | `minLength`   | `min-length`  | (optional) Input min length             | `number`                                          | `undefined` |
 | `name`        | `name`        | (optional) Input name                   | `string`                                          | `''`        |
 | `placeholder` | `placeholder` | (optional) Input placeHolder            | `string`                                          | `''`        |
+| `readonly`    | `readonly`    | (optional) Input readonly               | `boolean`                                         | `undefined` |
 | `required`    | `required`    | (optional) Input required               | `boolean`                                         | `undefined` |
 | `resize`      | `resize`      | (optional) textarea resize              | `"horizontal" \| "none" \| "unset" \| "vertical"` | `undefined` |
 | `rows`        | `rows`        | (optional) textarea row                 | `number`                                          | `undefined` |

diff --git a/packages/components/src/components/textarea/textarea.tsx b/packages/components/src/components/textarea/textarea.tsx
@@ -52,6 +52,8 @@ export class Textarea {
   @Prop() placeholder?: string = '';
   /** (optional) Input disabled */
   @Prop() disabled?: boolean;
+  /** (optional) Input readonly */
+  @Prop() readonly?: boolean;
   /** (optional) Input required */
   @Prop() required?: boolean;
   /** (optional) Input counter */
@@ -133,6 +135,7 @@ export class Textarea {
       this.status === 'error' ? { 'aria-invalid': true } : {};
     const helperTextId = `helper-message-${i}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
+    const readonlyAttr = this.readonly ? { readonly: 'readonly' } : {};
 
     return (
       <Host>
@@ -157,6 +160,7 @@ export class Textarea {
             onKeyDown={this.handleKeyDown}
             {...(!!this.placeholder ? { placeholder: this.placeholder } : {})}
             disabled={this.disabled}
+            {...readonlyAttr}
             {...(!!this.rows ? { rows: this.rows } : {})}
             {...(!!this.cols ? { cols: this.cols } : {})}
             {...ariaInvalidAttr}

diff --git a/packages/storybook-vue/stories/3_components/text-area/ScaleTextArea.vue b/packages/storybook-vue/stories/3_components/text-area/ScaleTextArea.vue
@@ -10,6 +10,7 @@
     :min-length="minLength"
     :placeholder="placeholder"
     :disabled="disabled"
+    :readonly="readonly"
     :required="required"
     :counter="counter"
     :resize="resize"
@@ -40,6 +41,7 @@ export default {
     minLength: { type: Number },
     placeholder: { type: String },
     disabled: { type: Boolean },
+    readonly: { type: Boolean },
     required: { type: Boolean },
     counter: { type: Boolean },
     resize: { type: String },

diff --git a/packages/storybook-vue/stories/3_components/text-area/TextArea.stories.mdx b/packages/storybook-vue/stories/3_components/text-area/TextArea.stories.mdx
@@ -30,6 +30,7 @@ export const Template = (args, { argTypes }) => ({
       :min-length="minLength"
       :placeholder="placeholder"
       :disabled="disabled"
+      :readonly="readonly"
       :required="required"
       :counter="counter"
       :resize="resize"
@@ -209,6 +210,28 @@ scale-textarea {
 ```
 
 
+<!--
+## Readonly 
+
+<Canvas withSource="none">
+  <Story
+    name="Readonly"
+    args={{
+      label: "Readonly",
+      readonly: true,
+      value: "This cannot be changed"
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-textarea label="Readonly" value="This cannot be changed" readonly></scale-textarea>
+```
+-->
+
+
 ## Max Length With Counter
 
 <Canvas withSource="none">

diff --git a/packages/storybook-vue/stories/3_components/text-field/ScaleTextField.vue b/packages/storybook-vue/stories/3_components/text-field/ScaleTextField.vue
@@ -9,6 +9,7 @@
     :min-length="minLength"
     :placeholder="placeholder"
     :disabled="disabled"
+    :readonly="readonly"
     :required="required"
     :counter="counter"
     :size="size"
@@ -37,6 +38,7 @@ export default {
     minLength: { type: Number },
     placeholder: { type: String },
     disabled: { type: Boolean },
+    readonly: { type: Boolean },
     required: { type: Boolean },
     counter: { type: Boolean },
     size: { type: String },

diff --git a/packages/storybook-vue/stories/3_components/text-field/TextField.stories.mdx b/packages/storybook-vue/stories/3_components/text-field/TextField.stories.mdx
@@ -46,6 +46,7 @@ export const Template = (args, { argTypes }) => ({
       :min-length="minLength"
       :placeholder="placeholder"
       :disabled="disabled"
+      :readonly="readonly"
       :required="required"
       :counter="counter"
       :size="size"
@@ -260,6 +261,28 @@ scale-text-field {
 ```
 
 
+<!--
+## Readonly 
+
+<Canvas withSource="none">
+  <Story
+    name="Readonly"
+    args={{
+      label: "Readonly",
+      readonly: true,
+      value: "This cannot be changed"
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-text-field label="Readonly" value="This cannot be changed" readonly></scale-text-field>
+```
+-->
+
+
 ## Max Length With Counter
 
 <Canvas withSource="none">