Skip to content

Commit

Permalink
Merge pull request #692 from WestpacGEL/Input-code-examples
Browse files Browse the repository at this point in the history 
Input code examples
  • Loading branch information
@samithaf
samithaf authored Jan 29, 2024
2 parents d57fe38 + a54bce3 commit 2cf8a88
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 172 deletions.
4 changes: 2 additions & 2 deletions .../content/design-system/components/input/accessibility/notes-on-accessibility/content.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fa

**Input fields** - These fields have been carefully designed and tested to achieve optimal contrast and border line weight. This is crucial for users to quickly identify the element as an input field, providing significant assistance to individuals with low vision and those less familiar with prevailing web design trends. The border colour was modified from the original "Border" colour to a darker version named "Border Dark," to ensure ongoing compliance with WCAG colour contrast guidelines.

**Input labels** _-_ Input labels should be placed above the input field. This helps promote scanning, readability and faster progress.
**Input labels** *-* Input labels should be placed above the input field. This helps promote scanning, readability and faster progress.

**Hint text** _-_ Hint text should be placed directly under the input label for context. This also ensures on mobile the hint text is visible ‘on canvas’ and is not obscured by any select boxes or keypads when activated.
**Hint text** *-* Hint text should be placed directly under the input label for context. This also ensures on mobile the hint text is visible ‘on canvas’ and is not obscured by any select boxes or keypads when activated.

### Robust

Expand Down
77 changes: 17 additions & 60 deletions apps/site/src/content/design-system/components/input/code/development-examples/content.mdoc
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
### Default

```tsx
<div className="flex flex-col gap-4">

<div>
<p className="mb-2 typography-body-10 text-muted">
<em>Default</em>
</p>
<Input className="w-full" />
</div>
<Select className="w-full">
<option>Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</Select>
<Textarea />
</div>

```

---
Expand All @@ -26,33 +19,15 @@
() => {
const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
return (
<div className="grid grid-cols-3 gap-3">

<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Input className="w-full" placeholder={size} size={size} />
</div>
))}
</div>
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Select className="w-full" size={size}>
<option>{size}</option>
<option>1</option>
<option>2</option>
</Select>
</div>
))}
</div>
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Textarea placeholder={size} className="w-full" size={size} />
</div>
))}
</div>
</div>

);
};
```
Expand All @@ -63,46 +38,28 @@

```jsx
<div className="flex flex-col gap-4">
<div className="grid grid-cols-4 align-top gap-3">
<h3 className="typography-body-9">Invalid</h3>
<p className="typography-body-10 text-muted">
<em>Invalid</em>
</p>
<div>
<Input invalid />
</div>
<div>
<Select invalid className="w-full">
<option>Invalid</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</Select>
</div>
<div>
<Textarea invalid placeholder="Invalid" />
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<h3 className="typography-body-9">Disabled</h3>

<p className="typography-body-10 text-muted">
<em>Disabled</em>
</p>
<div>
<Input disabled />
</div>
<div>
<Select disabled className="w-full">
<option>Disabled</option>
</Select>
</div>
<div>
<Textarea disabled placeholder="Disabled" />
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<h3 className="typography-body-9">Read only</h3>


<p className="typography-body-10 text-muted">
<em>Read-only</em>
</p>
<div>
<Input readOnly value="This value is readonly" />
</div>
<div />
<div>
<Textarea readOnly value="This value is readonly" />
</div>
</div>

</div>
```
1 change: 1 addition & 0 deletions apps/site/src/content/design-system/components/input/index.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ description: >-
used in forms and search tools allowing users to submit information.
namedExport:
discriminant: false
excludeFromNavbar: false
design:
- title:
name: Sizes
Expand Down
63 changes: 14 additions & 49 deletions apps/site/src/content/design-system/components/select/code/development-examples/content.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,23 @@

```tsx
<div className="flex flex-col gap-4">
<div>
<p className="mb-2 typography-body-10 text-muted">
<em>Default</em>
</p>
<Input className="w-full" />
</div>
<Select className="w-full">
<option>Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</Select>
<Textarea />
</div>
```

---

### Input sizes
### Select sizes

```tsx
() => {
const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
return (
<div className="grid grid-cols-3 gap-3">
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Input className="w-full" placeholder={size} size={size} />
</div>
))}
</div>
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
Expand All @@ -45,14 +30,7 @@
</div>
))}
</div>
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Textarea placeholder={size} className="w-full" size={size} />
</div>
))}
</div>
</div>

);
};
```
Expand All @@ -63,11 +41,11 @@

```jsx
<div className="flex flex-col gap-4">
<div className="grid grid-cols-4 align-top gap-3">
<h3 className="typography-body-9">Invalid</h3>
<div>
<Input invalid />
</div>

<p className="typography-body-10 text-muted">
<em>Invalid</em>
</p>

<div>
<Select invalid className="w-full">
<option>Invalid</option>
Expand All @@ -77,32 +55,19 @@
</Select>
</div>
<div>
<Textarea invalid placeholder="Invalid" />
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<h3 className="typography-body-9">Disabled</h3>
<div>
<Input disabled />
</div>

<p className="typography-body-10 text-muted">
<em>Disabled</em>
</p>
<div>
<Select disabled className="w-full">
<option>Disabled</option>
</Select>
</div>
<div>
<Textarea disabled placeholder="Disabled" />
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<h3 className="typography-body-9">Read only</h3>
<div>
<Input readOnly value="This value is readonly" />
</div>


<div />
<div>
<Textarea readOnly value="This value is readonly" />
</div>
</div>

</div>
```
1 change: 1 addition & 0 deletions apps/site/src/content/design-system/components/select/index.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ description: >-
required to choose one option from a list of predefined choices.
namedExport:
discriminant: false
excludeFromNavbar: false
design:
- title:
name: Sizes
Expand Down
81 changes: 20 additions & 61 deletions ...site/src/content/design-system/components/textarea/code/development-examples/content.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,33 @@
```tsx
<div className="flex flex-col gap-4">
<div>
<p className="mb-2 typography-body-10 text-muted">
<p className="typography-body-10 text-muted">
<em>Default</em>
</p>
<Input className="w-full" />
</div>
<Select className="w-full">
<option>Select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</Select>
<Textarea />
</div>
```

---

### Input sizes
### Text area sizes

```tsx
() => {
const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
return (
<div className="grid grid-cols-3 gap-3">
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Input className="w-full" placeholder={size} size={size} />
</div>
))}
</div>
<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Select className="w-full" size={size}>
<option>{size}</option>
<option>1</option>
<option>2</option>
</Select>
</div>
))}
</div>



<div className="flex flex-col gap-4">
{SIZES.map(size => (
<div key={size}>
<Textarea placeholder={size} className="w-full" size={size} />
</div>
))}
</div>
</div>

);
};
```
Expand All @@ -63,46 +40,28 @@

```jsx
<div className="flex flex-col gap-4">
<div className="grid grid-cols-4 align-top gap-3">
<h3 className="typography-body-9">Invalid</h3>
<div>
<Input invalid />
</div>
<div>
<Select invalid className="w-full">
<option>Invalid</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</Select>
</div>
<p className="typography-body-10 text-muted">
<em>Invalid</em>
</p>

<div>
<Textarea invalid placeholder="Invalid" />
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<h3 className="typography-body-9">Disabled</h3>
<div>
<Input disabled />
</div>
<div>
<Select disabled className="w-full">
<option>Disabled</option>
</Select>
</div>

<p className="typography-body-10 text-muted">
<em>Disabled</em>
</p>

<div>
<Textarea disabled placeholder="Disabled" />
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<h3 className="typography-body-9">Read only</h3>
<div>
<Input readOnly value="This value is readonly" />
</div>
<div />
<p className="typography-body-10 text-muted">
<em>Read-only</em>
</p>

<div>
<Textarea readOnly value="This value is readonly" />
</div>
</div>

</div>
```
1 change: 1 addition & 0 deletions apps/site/src/content/design-system/components/textarea/index.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ description: >-
text.
namedExport:
discriminant: false
excludeFromNavbar: false
design:
- title:
name: Sizes
Expand Down

0 comments on commit 2cf8a88

Please sign in to comment.