-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs(web-twig): Introduction TextField stories
- Loading branch information
1 parent
64037cb
commit 48e956c
Showing
9 changed files
with
268 additions
and
0 deletions.
There are no files selected for viewing
33 changes: 33 additions & 0 deletions
33
packages/web-twig/src/Resources/components/TextField/TextField.stories.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| {% extends 'layout/default.html.twig' %} | ||
|
|
||
| {% block content %} | ||
|
|
||
| <div class="docs-FormFieldGrid"> | ||
|
|
||
| {# TextField Default #} | ||
| {% include '@components/TextField/stories/TextField.twig' %} | ||
|
|
||
| {# TextField Password Toggle #} | ||
| {% include '@components/TextField/stories/TextFieldPasswordToggle.twig' %} | ||
|
|
||
| {# TextField Message #} | ||
| {% include '@components/TextField/stories/TextFieldMessage.twig' %} | ||
|
|
||
| {# TextField Validation State #} | ||
| {% include '@components/TextField/stories/TextFieldValidationState.twig' %} | ||
|
|
||
| {# TextField Fluid #} | ||
| {% include '@components/TextField/stories/TextFieldFluid.twig' %} | ||
|
|
||
| {# TextField Inline #} | ||
| {% include '@components/TextField/stories/TextFieldInline.twig' %} | ||
|
|
||
| {# TextField Helper Text #} | ||
| {% include '@components/TextField/stories/TextFieldHelperText.twig' %} | ||
|
|
||
| {# TextField V1 Feature - new disabled state #} | ||
| {% include '@components/TextField/stories/TextFieldV1DisabledFeature.twig' %} | ||
|
|
||
| </div> | ||
|
|
||
| {% endblock %} |
27 changes: 27 additions & 0 deletions
27
packages/web-twig/src/Resources/components/TextField/stories/TextField.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <TextField | ||
| id="textfieldSimple" | ||
| isRequired={true} | ||
| label="Label" | ||
| name="textfieldSimple" | ||
| placeholder="Placeholder" | ||
| /> | ||
| <TextField | ||
| id="textfieldPassword" | ||
| label="Password" | ||
| name="textfieldPassword" | ||
| placeholder="Password must be at least 6 characters long" | ||
| type="password" | ||
| /> | ||
| <TextField | ||
| id="textfieldEmail" | ||
| label="E-mail" | ||
| name="textfieldEmail" | ||
| type="email" | ||
| /> | ||
| <TextField | ||
| id="textfieldNumber" | ||
| inputWidth="2" | ||
| label="Number (2 digits)" | ||
| name="textfieldNumber" | ||
| type="number" | ||
| /> |
9 changes: 9 additions & 0 deletions
9
packages/web-twig/src/Resources/components/TextField/stories/TextFieldFluid.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <TextField | ||
| id="textfieldFluid" | ||
| isFluid | ||
| label="Label" | ||
| message="Message" | ||
| name="textfieldFluid" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> |
16 changes: 16 additions & 0 deletions
16
packages/web-twig/src/Resources/components/TextField/stories/TextFieldHelperText.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <TextField | ||
| helperText="This is helper text" | ||
| id="textfieldWithHelperText" | ||
| label="Label" | ||
| name="textfieldWithHelperText" | ||
| placeholder="Placeholder" | ||
| /> | ||
| <TextField | ||
| helperText="This is helper text" | ||
| id="textfieldWithHelperTextAndValidationMessage" | ||
| label="Label" | ||
| message="Danger validation message" | ||
| name="textfieldWithHelperTextAndValidationMessage" | ||
| placeholder="Placeholder" | ||
| validationState="danger" | ||
| /> |
44 changes: 44 additions & 0 deletions
44
packages/web-twig/src/Resources/components/TextField/stories/TextFieldInline.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <div style="display: flex; gap: 1rem"> | ||
| <TextField | ||
| id="textfieldInlineHiddenLabel" | ||
| isLabelHidden | ||
| label="Hidden Label" | ||
| name="textfieldInlineHiddenLabel" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> | ||
| <Button>Button</Button> | ||
| </div> | ||
| <div style="display: flex; align-items: start; gap: 1rem"> | ||
| <TextField | ||
| id="textfieldInlineDangerHiddenLabel" | ||
| isLabelHidden | ||
| label="Hidden Label" | ||
| message="Message" | ||
| name="textfieldInlineDangerHiddenLabel" | ||
| placeholder="Placeholder" | ||
| validationState="danger" | ||
| value="Filled" | ||
| /> | ||
| <Button>Button</Button> | ||
| </div> | ||
| <div style="display: flex; gap: 1rem"> | ||
| <TextField | ||
| id="textfieldInlineFirst" | ||
| isLabelHidden | ||
| label="Hidden Label" | ||
| name="textfieldInlineFirst" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> | ||
| <TextField | ||
| hasPasswordToggle | ||
| id="textfieldInlinePassword" | ||
| isLabelHidden | ||
| label="Hidden Label" | ||
| name="textfieldInlinePassword" | ||
| placeholder="Placeholder" | ||
| value="Password" | ||
| /> | ||
| <Button>Button</Button> | ||
| </div> |
23 changes: 23 additions & 0 deletions
23
packages/web-twig/src/Resources/components/TextField/stories/TextFieldMessage.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <TextField | ||
| id="textfieldMessage" | ||
| label="Label" | ||
| message="Message" | ||
| name="textfieldMessage" | ||
| placeholder="Placeholder" | ||
| /> | ||
| <TextField | ||
| id="textfieldFilled" | ||
| label="Label" | ||
| name="textfieldFilled" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> | ||
| <TextField | ||
| id="textfieldFilledMessage" | ||
| isRequired | ||
| label="Label" | ||
| message="Message" | ||
| name="textfieldFilledMessage" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> |
32 changes: 32 additions & 0 deletions
32
packages/web-twig/src/Resources/components/TextField/stories/TextFieldPasswordToggle.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <TextField | ||
| hasPasswordToggle | ||
| id="textfieldPasswordToggle" | ||
| label="Password Toggle" | ||
| name="textfieldPasswordToggle" | ||
| placeholder="Password must be at least 6 characters long" | ||
| /> | ||
| <TextField | ||
| hasPasswordToggle | ||
| id="textfieldPasswordToggle" | ||
| isDisabled | ||
| label="Password Toggle" | ||
| name="textfieldPasswordToggle" | ||
| value="Disabled" | ||
| /> | ||
| <TextField | ||
| hasPasswordToggle | ||
| id="textfieldPasswordToggle" | ||
| isFluid | ||
| label="Password Toggle" | ||
| name="textfieldPasswordToggle" | ||
| value="Fluid" | ||
| /> | ||
| <TextField | ||
| hasPasswordToggle | ||
| id="textfieldPasswordToggle" | ||
| label="Password Toggle" | ||
| message="Validation message" | ||
| name="textfieldPasswordToggle" | ||
| validationState="danger" | ||
| value="Danger" | ||
| /> |
28 changes: 28 additions & 0 deletions
28
packages/web-twig/src/Resources/components/TextField/stories/TextFieldV1DisabledFeature.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <div class="spirit-v1-box-field-disabled docs-FormFieldGrid"> | ||
| <h2 class="docs-Heading">V1 Feature — new disabled state</h2> | ||
|
|
||
| <TextField | ||
| hasPasswordToggle | ||
| id="textfieldPasswordToggleDisabledFeature" | ||
| isDisabled | ||
| label="Password Toggle" | ||
| name="textfieldPasswordToggleDisabledFeature" | ||
| value="Disabled" | ||
| /> | ||
| <TextField | ||
| id="textfieldDisabledFeature" | ||
| isDisabled | ||
| label="Label" | ||
| message="Message" | ||
| name="textfieldDisabledFeature" | ||
| placeholder="Placeholder" | ||
| /> | ||
| <TextField | ||
| id="textfieldDisabledFilledFeature" | ||
| isDisabled | ||
| label="Label" | ||
| name="textfieldDisabledFilledFeature" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> | ||
| </div> |
56 changes: 56 additions & 0 deletions
56
packages/web-twig/src/Resources/components/TextField/stories/TextFieldValidationState.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <TextField | ||
| id="textfieldDanger" | ||
| isRequired | ||
| label="Label" | ||
| name="textfieldDanger" | ||
| placeholder="Placeholder" | ||
| validationState="danger" | ||
| value="Filled" | ||
| /> | ||
| <TextField | ||
| id="textfieldDangerMessage" | ||
| isRequired | ||
| label="Label" | ||
| message="Validation message" | ||
| name="textfieldDangerMessage" | ||
| placeholder="Placeholder" | ||
| validationState="danger" | ||
| value="Filled" | ||
| /> | ||
| <TextField | ||
| id="textfieldSuccess" | ||
| isRequired | ||
| label="Label" | ||
| message="Validation message" | ||
| name="textfieldSuccess" | ||
| placeholder="Placeholder" | ||
| validationState="success" | ||
| value="Filled" | ||
| /> | ||
| <TextField | ||
| id="textfieldWarning" | ||
| isRequired | ||
| label="Label" | ||
| message="Validation message" | ||
| name="textfieldWarning" | ||
| placeholder="Placeholder" | ||
| validationState="warning" | ||
| value="Filled" | ||
| /> | ||
| <TextField | ||
| id="textfieldDisabled" | ||
| isDisabled | ||
| label="Label" | ||
| message="Message" | ||
| name="textfieldDisabled" | ||
| placeholder="Placeholder" | ||
| /> | ||
| <TextField | ||
| id="textfieldDisabledFilled" | ||
| isDisabled | ||
| label="Label" | ||
| message="Message" | ||
| name="textfieldDisabledFilled" | ||
| placeholder="Placeholder" | ||
| value="Filled" | ||
| /> |