Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: add record type icon to form input labels #103

Merged
merged 3 commits into from
Sep 12, 2024
Merged

feat: add record type icon to form input labels #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9245d03
chore(deps): add font awesome
joshuagraber Sep 12, 2024
f20fc70
feat(components): create RecordTypeIcon component and associated tests
joshuagraber Sep 12, 2024
524c82f
refactor(form and inputs): update form and input components
joshuagraber Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 109 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,11 @@
"vue-tsc": "^1.8.22"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0",
"@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/vue-fontawesome": "^3.0.8",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"fs-extra": "^11.1.1",
Expand Down
72 changes: 60 additions & 12 deletions src/components/Form/__snapshots__/form.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,56 @@ exports[`Form component > Renders component in form error state 1`] = `
<div class="pdap-input pdap-input-text">
<input id="test-1" name="testOne" placeholder="Enter a value here" type="text">
<!--v-if-->
<label class="pdap-input-label" for="test-1">First test input</label>
<label class="pdap-input-label" for="test-1">First test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-text">
<input id="test-email" name="email" placeholder="Email" type="text">
<!--v-if-->
<label class="pdap-input-label" for="test-email">Email test input</label>
<label class="pdap-input-label" for="test-email">Email test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-password">
<input id="test-password" name="password" placeholder="Password" type="password">
<!--v-if-->
<label class="pdap-input-label" for="test-password">Password test input</label>
<label class="pdap-input-label" for="test-password">Password test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-text">
<input id="test-2" name="testTwo" placeholder="Enter another value here" type="text">
<!--v-if-->
<label class="pdap-input-label" for="test-2">Second test input</label>
<label class="pdap-input-label" for="test-2">Second test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-checkbox pdap-input-checkbox-checked">
<input checked class="pdap-input-checkbox" id="checkbox-default-checked" name="checkboxDefaultChecked" type="checkbox" value="true">
<!--v-if-->
<label class="pdap-input-label" for="checkbox-default-checked">Keep this box checked?</label>
<label class="pdap-input-label" for="checkbox-default-checked">Keep this box checked?
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-checkbox">
<input class="pdap-input-checkbox" id="checkbox-default-unchecked" name="checkboxDefaultUnchecked" type="checkbox" value="false">
<!--v-if-->
<label class="pdap-input-label" for="checkbox-default-unchecked">Check this box?</label>
<label class="pdap-input-label" for="checkbox-default-unchecked">Check this box?
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<button type="submit">Submit</button>
</form>
Expand All @@ -43,32 +67,56 @@ exports[`Form component > Renders component in static state 1`] = `
<div class="pdap-input pdap-input-text">
<input id="test-1" name="testOne" placeholder="Enter a value here" type="text">
<!--v-if-->
<label class="pdap-input-label" for="test-1">First test input</label>
<label class="pdap-input-label" for="test-1">First test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-text">
<input id="test-email" name="email" placeholder="Email" type="text">
<!--v-if-->
<label class="pdap-input-label" for="test-email">Email test input</label>
<label class="pdap-input-label" for="test-email">Email test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-password">
<input id="test-password" name="password" placeholder="Password" type="password">
<!--v-if-->
<label class="pdap-input-label" for="test-password">Password test input</label>
<label class="pdap-input-label" for="test-password">Password test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-text">
<input id="test-2" name="testTwo" placeholder="Enter another value here" type="text">
<!--v-if-->
<label class="pdap-input-label" for="test-2">Second test input</label>
<label class="pdap-input-label" for="test-2">Second test input
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-checkbox pdap-input-checkbox-checked">
<input checked class="pdap-input-checkbox" id="checkbox-default-checked" name="checkboxDefaultChecked" type="checkbox" value="true">
<!--v-if-->
<label class="pdap-input-label" for="checkbox-default-checked">Keep this box checked?</label>
<label class="pdap-input-label" for="checkbox-default-checked">Keep this box checked?
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<div class="pdap-input pdap-input-checkbox">
<input class="pdap-input-checkbox" id="checkbox-default-unchecked" name="checkboxDefaultUnchecked" type="checkbox" value="false">
<!--v-if-->
<label class="pdap-input-label" for="checkbox-default-unchecked">Check this box?</label>
<label class="pdap-input-label" for="checkbox-default-unchecked">Check this box?
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<!--v-if-->
</label>
</div>
<button type="submit">Submit</button>
</form>
Expand Down
14 changes: 13 additions & 1 deletion src/components/Input/PdapInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@
{{ error }}
</div>

<label class="pdap-input-label" :for="id">{{ label }}</label>
<label class="pdap-input-label" :for="id">
{{ label }}
<!-- This is a hacky and extremely implementation-specific way to render these icons. Would be better to decouple Form and Input rendering a bit more so that we can more easily use slots, etc. -->
<!-- Issue created to create V2 of form and input components to handle more flexible UI: https://github.com/Police-Data-Accessibility-Project/design-system/issues/102 -->
<RecordTypeIcon :record-type="label" />
</label>
</div>
</template>

Expand All @@ -37,6 +42,7 @@ import {
} from './types';
import PdapInputText from './Text/InputText.vue';
import PdapInputCheckbox from './Checkbox/InputCheckbox.vue';
import RecordTypeIcon from '../RecordTypeIcon/RecordTypeIcon.vue';

const props = withDefaults(defineProps<PdapInputProps>(), {});

Expand Down Expand Up @@ -117,4 +123,10 @@ const errorMessageId = computed(() => `pdap-${props.name}-input-error`);
@apply cursor-pointer;
}
}

/* stylelint-disable */
.svg-inline--fa {
@apply ml-2;
}
/* stylelint-enable */
</style>
Loading
Loading