fix: fixed checkboxes, toggles, list groups, linting

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "htmlWhitespaceSensitivity": "ignore",
+  "printWidth": 100
+}

demo/pages/menu-selection.vue

@@ -13,35 +13,24 @@
       :selectedUid.sync="selectedUid"
     >
       <fd-menu-list>
-        <fd-menu-item data-cy-item-a-0 uid="a-id-0" value="a-value-0"
-          >a-title-0</fd-menu-item
-        >
-        <fd-menu-item data-cy-item-a-1 uid="a-id-1" value="a-value-1"
-          >a-title-1</fd-menu-item
-        >
-        <fd-menu-item data-cy-item-a-2 uid="a-id-2" value="a-value-2"
-          >a-title-2</fd-menu-item
-        >
+        <fd-menu-item data-cy-item-a-0 uid="a-id-0" value="a-value-0">a-title-0</fd-menu-item>
+        <fd-menu-item data-cy-item-a-1 uid="a-id-1" value="a-value-1">a-title-1</fd-menu-item>
+        <fd-menu-item data-cy-item-a-2 uid="a-id-2" value="a-value-2">a-title-2</fd-menu-item>
       </fd-menu-list>
     </fd-menu>
     <p>
-      highlightedUid: <span data-highlighted-uid>{{ highlightedUid }}</span>
+      highlightedUid:
+      <span data-highlighted-uid>{{ highlightedUid }}</span>
     </p>
     <p>
-      selectedUid: <span data-selected-uid>{{ selectedUid }}</span>
+      selectedUid:
+      <span data-selected-uid>{{ selectedUid }}</span>
     </p>
     <label>
       Highlight Uid:
-      <input
-        data-cy-uid-to-highlight
-        type="text"
-        v-model="uidToBeHighlighted"
-      />
+      <input data-cy-uid-to-highlight type="text" v-model="uidToBeHighlighted" />
     </label>
-    <button
-      data-cy-perform-highlight
-      @click="highlightedUid = uidToBeHighlighted"
-    >
+    <button data-cy-perform-highlight @click="highlightedUid = uidToBeHighlighted">
       Highlight
     </button>
   </div>

demo/pages/virtualized-list.vue

@@ -15,9 +15,7 @@
         <div data-cy-loading-indicator>Loading Indicator</div>
       </template>
       <template #item="{ item, index }">
-        <div data-cy-item style="height: 30px;">
-          {{ item.title }}[{{ index }}]
-        </div>
+        <div data-cy-item style="height: 30px;">{{ item.title }}[{{ index }}]</div>
       </template>
     </fd-virtualized-list>
   </div>

loaders/remove-docs-loader.js

@@ -20,13 +20,7 @@ const contentWithoutBlock = (content, block) => {
 };
 
 module.exports = content => {
-  const blocksToRemove = [
-    "condensed",
-    "fullscreen-only",
-    "docs",
-    "title",
-    "tip"
-  ];
+  const blocksToRemove = ["condensed", "fullscreen-only", "docs", "title", "tip"];
   const result = blocksToRemove
     .reduce((prev, curr) => contentWithoutBlock(prev, curr), content)
     .trim();

src/components/$Support/on-click-outside.vue

@@ -1,8 +1,7 @@
 // @ts-check
 <script>
 // Thanks @LinusBorg
-const isBrowser =
-  typeof window !== "undefined" && typeof document !== undefined;
+const isBrowser = typeof window !== "undefined" && typeof document !== undefined;
 const getRootEl = () => document.documentElement;
 
 const CLICK_OUTSIDE_EVENT = "do";

src/components/ActionBar/__tests__/ActionBar.test.js

@@ -24,9 +24,7 @@ describe("ActionBar", () => {
 
   it("renders correct props and slots", () => {
     expect(wrapper.find(".fd-action-bar__title").text()).toEqual(title);
-    expect(wrapper.find(".fd-action-bar__description").text()).toEqual(
-      description
-    );
+    expect(wrapper.find(".fd-action-bar__description").text()).toEqual(description);
     expect(wrapper.find(".fd-action-bar__back").text()).toEqual(back);
     expect(wrapper.find(".fd-action-bar__actions").text()).toEqual(actions);
   });
@@ -89,9 +87,7 @@ describe("ActionBar", () => {
     });
 
     it("renders title as slot", () => {
-      expect(wrapper.find(".fd-action-bar__description div").text()).toBe(
-        description
-      );
+      expect(wrapper.find(".fd-action-bar__description div").text()).toBe(description);
     });
   });
 });

src/components/Alert/Alert.vue

@@ -53,11 +53,7 @@ export default {
       type: String,
       default: "default",
       validator: value => {
-        return (
-          ["default", "warning", "error", "information", "success"].indexOf(
-            value
-          ) >= 0
-        );
+        return ["default", "warning", "error", "information", "success"].indexOf(value) >= 0;
       }
     }
   },

src/components/Badge/Badge.vue

@@ -34,8 +34,7 @@ export default {
   },
   computed: {
     classes() {
-      const type =
-        this.type == null ? {} : { [`fd-badge--${this.type}`]: true };
+      const type = this.type == null ? {} : { [`fd-badge--${this.type}`]: true };
       return {
         "fd-badge": true,
         "fd-badge--filled": this.filled,

src/components/BreadcrumbItem/BreadcrumbItem.vue

@@ -1,11 +1,6 @@
 <template>
   <li class="fd-breadcrumb__item">
-    <a
-      class="fd-breadcrumb__link"
-      @click="pushLocationIfPossible"
-      v-bind="attrs"
-      v-on="$listeners"
-    >
+    <a class="fd-breadcrumb__link" @click="pushLocationIfPossible" v-bind="attrs" v-on="$listeners">
       <!-- Anchor tag content -->
       <slot />
     </a>

src/components/Calendar/Calendar.vue

@@ -157,9 +157,7 @@ export default {
       return this.normalizedDate_.end;
     },
     yearPickerYears() {
-      return Array.from({ length: 12 }).map(
-        (_, index) => this.displayedYear + (index - 6)
-      );
+      return Array.from({ length: 12 }).map((_, index) => this.displayedYear + (index - 6));
     },
     currentRange() {
       const month = this.month;

src/components/Calendar/CalendarAction.vue

@@ -7,8 +7,9 @@
       :state="state"
       :icon="icon"
       @click="$emit('click')"
-      >{{ title }}</FdButton
     >
+      {{ title }}
+    </FdButton>
   </div>
 </template>
 

src/components/Calendar/CalendarItem.vue

@@ -53,16 +53,13 @@ export default {
   computed: {
     classes() {
       const state = this.state;
-      const isFirstOrLast =
-        state === "selectedRangeFirst" || state === "selectedRangeLast";
+      const isFirstOrLast = state === "selectedRangeFirst" || state === "selectedRangeLast";
       const stateClasses = [
         ...(isFirstOrLast ? [calendarItemStateMapping.selected] : []),
         ...(state != null ? [calendarItemStateMapping[state]] : [])
       ];
       const modifier = this.modifier;
-      return stateClasses.concat(
-        modifier == null ? [] : calendarItemModifierMapping[modifier]
-      );
+      return stateClasses.concat(modifier == null ? [] : calendarItemModifierMapping[modifier]);
     }
   },
   render(h) {

src/components/Calendar/Pickers/DayPicker.vue

@@ -3,21 +3,13 @@
     <table class="fd-calendar__table" role="grid">
       <thead class="fd-calendar__group">
         <tr class="fd-calendar__row">
-          <th
-            v-for="dayName in dayNames"
-            :key="dayName"
-            class="fd-calendar__column-header"
-          >
+          <th v-for="dayName in dayNames" :key="dayName" class="fd-calendar__column-header">
             <span class="fd-calendar__day-of-week">{{ dayName }}</span>
           </th>
         </tr>
       </thead>
       <tbody class="fd-calendar__group">
-        <tr
-          class="fd-calendar__row"
-          v-for="(week, index) in month"
-          :key="String('week-' + index)"
-        >
+        <tr class="fd-calendar__row" v-for="(week, index) in month" :key="String('week-' + index)">
           <CalendarItem
             v-for="date in week"
             :key="date.toString()"
@@ -79,8 +71,7 @@ export default {
         return "blocked";
       }
       const { selectionStart, selectionEnd } = this;
-      const isFirst =
-        selectionStart != null ? sameDay(date, selectionStart) : false;
+      const isFirst = selectionStart != null ? sameDay(date, selectionStart) : false;
       const isLast = selectionEnd != null ? sameDay(date, selectionEnd) : false;
       const isFirstAndLast = isFirst && (isLast || this.mode === Mode.single);
       if (isFirstAndLast) {

src/components/Calendar/mixins/DisplayedDate.js

@@ -32,8 +32,7 @@ export default {
   data() {
     return {
       displayedDate:
-        typeof this.defaultValue === "string" ||
-        typeof this.defaultValue === "number"
+        typeof this.defaultValue === "string" || typeof this.defaultValue === "number"
           ? new Date(this.defaultValue)
           : this.defaultValue
     };

src/components/Calendar/util/index.js

@@ -1,9 +1,6 @@
 // @ts-check
 
-export const weekFromDate = (
-  date,
-  { firstDayOfWeek } = { firstDayOfWeek: 0 }
-) => {
+export const weekFromDate = (date, { firstDayOfWeek } = { firstDayOfWeek: 0 }) => {
   const startOfWeek = new Date(date.valueOf());
   startOfWeek.setDate(date.getDate() - date.getDay() + firstDayOfWeek);
 
@@ -21,10 +18,7 @@ export const weekFromDate = (
   return days;
 };
 
-export const monthFromDate = (
-  referenceDate,
-  options = { firstDayOfWeek: 0 }
-) => {
+export const monthFromDate = (referenceDate, options = { firstDayOfWeek: 0 }) => {
   const month = referenceDate.getMonth();
   const result = [];
   const firstDayOfMonth = new Date(referenceDate.getFullYear(), month, 1);

src/components/ComboboxBase/ComboboxBase.vue

@@ -1,18 +1,10 @@
 <template>
-  <fd-popover
-    ref="popover"
-    body-size-mode="equal-trigger"
-    placement="bottom-start"
-  >
+  <fd-popover ref="popover" body-size-mode="equal-trigger" placement="bottom-start">
     <template #control="{ hide, show, toggle }">
       <div class="fd-combobox-control">
         <fd-input-group :compact="compact">
           <template #input>
-            <slot
-              name="input"
-              :hideCompletions="hide"
-              :showCompletions="show"
-            />
+            <slot name="input" :hideCompletions="hide" :showCompletions="show" />
           </template>
 
           <template #after>

src/components/DateInput/DateInput.vue

@@ -23,18 +23,11 @@ export default {
   computed: {
     displayedValue: {
       get() {
-        const {
-          mode,
-          normalizedDate,
-          dateFormatter,
-          dateRangeFormatter
-        } = this;
+        const { mode, normalizedDate, dateFormatter, dateRangeFormatter } = this;
         if (mode === "single") {
           return dateFormatter(NormalizedDate.from(normalizedDate).start);
         }
-        return dateRangeFormatter(
-          NormalizedDate.from(normalizedDate).asStartEndValue()
-        );
+        return dateRangeFormatter(NormalizedDate.from(normalizedDate).asStartEndValue());
       },
       set(newDateString) {
         const { mode, dateParser, dateRangeParser, normalizedDate } = this;
@@ -67,10 +60,7 @@ export default {
     emitCurrentValue() {
       // Emitted whenever the date or range has been confirmed by the user.
       // @arg An object with two keys: `from` and `to` – both can be either `null` or `Date`. In `single`-mode only `from` will be a `Date`.
-      this.$emit(
-        "input",
-        NormalizedDate.from(this.normalizedDate).asFromToValue()
-      );
+      this.$emit("input", NormalizedDate.from(this.normalizedDate).asFromToValue());
     },
     dateInputChanged(inputString) {
       this.displayedValue = inputString;

src/components/DropdownControl/DropdownControl.vue

@@ -1,7 +1,5 @@
 <template>
-  <fd-button class="fd-dropdown__control" v-on="$listeners" v-bind="$attrs"
-    ><slot
-  /></fd-button>
+  <fd-button class="fd-dropdown__control" v-on="$listeners" v-bind="$attrs"><slot /></fd-button>
 </template>
 
 <script>

src/components/Form/Controls/Checkbox.vue

@@ -7,12 +7,12 @@
     v-on="$listeners"
     :value="value"
     type="checkbox"
+    v-bind="$attrs"
+    :id="inputId"
   />
 </template>
 
 <script>
-// v-bind="$attrs" -->
-// :id="inputId"
 import { isInputElement } from "./Helper";
 import { withoutDuplicates } from "./../../../util";
 import InputMixin from "./InputMixin";
@@ -21,7 +21,7 @@ import { $modelValueWithDefault, $valueWithDefault } from "./Helper/prop";
 export default {
   name: "FdCheckbox",
   mixins: [InputMixin],
-  inheritAttrs: true,
+  // inheritAttrs: true,
   inject: {
     // We need the form item so that we can say tell the form item
     // to render the checked-style

src/components/Form/Controls/Helper/dom.js

@@ -1,3 +1,2 @@
 export const isElement = target => "tagName" in target;
-export const isInputElement = target =>
-  isElement(target) && target.tagName === "INPUT";
+export const isInputElement = target => isElement(target) && target.tagName === "INPUT";

src/components/Form/Controls/Toggle.vue

@@ -7,8 +7,7 @@
       :value="value"
       :disabled="disabled"
       @update="$emit('update', $event)"
-    >
-    </FdCheckbox>
+    ></FdCheckbox>
     <span class="fd-toggle__switch" role="presentation" />
   </span>
 </template>

src/components/Form/FormLabel.vue

@@ -2,9 +2,9 @@
   <label class="fd-form__label" :for="itemId" :aria-required="String(required)">
     <slot name="control" />
     <slot />
-    <template v-if="required"
-      >*</template
-    >
+    <template v-if="required">
+      *
+    </template>
   </label>
 </template>
 

src/components/Form/index.js

@@ -15,6 +15,7 @@ import * as Controls from "./Controls";
 import { pluginify } from "./../../util";
 import FdFormItemRadio from "./items/form-item-radio.vue";
 import FdFormItemCheckbox from "./items/form-item-checkbox.vue";
+import FdFormItemToggle from "./items/form-item-toggle.vue";
 
 export default pluginify(
   Form,
@@ -31,7 +32,8 @@ export default pluginify(
   Legend,
   FieldSet,
   FdFormItemRadio,
-  FdFormItemCheckbox
+  FdFormItemCheckbox,
+  FdFormItemToggle
 );
 export {
   Form,
@@ -49,5 +51,6 @@ export {
   FieldSet,
   Controls,
   FdFormItemRadio,
-  FdFormItemCheckbox
+  FdFormItemCheckbox,
+  FdFormItemToggle
 };