Skip to content

Commit

Permalink
feat: add record type icon to form input labels (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuagraber
joshuagraber authored Sep 12, 2024
1 parent 44e2207 commit 7ac0e6e
Show file tree
Hide file tree
Showing 12 changed files with 488 additions and 21 deletions.
109 changes: 109 additions & 0 deletions package-lock.json
View file

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
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
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
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

0 comments on commit 7ac0e6e

Please # to comment.