[WNMGDS-293] Adjust prettier config (#539)

* Change prettier config

* Run prettier on files

* Rename Dropdown.example.html

* Remove outdated DateField.example.html naming

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 100
 }

packages/core/src/components/Alert/Alert.example.jsx

@@ -9,9 +9,7 @@ ReactDOM.render(
     </Alert>
     <Alert heading="Alert with only a heading" />
     <Alert>
-      <p className="ds-c-alert__text">
-        This is a React Alert component without a heading.
-      </p>
+      <p className="ds-c-alert__text">This is a React Alert component without a heading.</p>
     </Alert>
   </div>,
   document.getElementById('js-example')

packages/core/src/components/Alert/alert.example.html

@@ -3,44 +3,44 @@
     <div class="ds-c-alert__body">
       <h3 class="ds-c-alert__heading">Informative status</h3>
       <p class="ds-c-alert__text">
-        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
-        consectetur adipiscing elit, sed do eiusmod.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
   <div class="ds-c-alert ds-c-alert--error">
     <div class="ds-c-alert__body">
       <h3 class="ds-c-alert__heading">Error status</h3>
       <p class="ds-c-alert__text">
-        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
-        consectetur adipiscing elit, sed do eiusmod.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
   <div class="ds-c-alert ds-c-alert--warn">
     <div class="ds-c-alert__body">
       <h3 class="ds-c-alert__heading">Warning status</h3>
       <p class="ds-c-alert__text">
-        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
-        consectetur adipiscing elit, sed do eiusmod.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
   <div class="ds-c-alert ds-c-alert--success">
     <div class="ds-c-alert__body">
       <h3 class="ds-c-alert__heading">Success status</h3>
       <p class="ds-c-alert__text">
-        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
-        consectetur adipiscing elit, sed do eiusmod.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>
   <div class="ds-c-alert ds-c-alert--hide-icon">
     <div class="ds-c-alert__body">
       <h3 class="ds-c-alert__heading">Status without icon</h3>
       <p class="ds-c-alert__text">
-        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>,
-        consectetur adipiscing elit, sed do eiusmod.
+        Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing
+        elit, sed do eiusmod.
       </p>
     </div>
   </div>

packages/core/src/components/Badge/badge.example.html

@@ -7,29 +7,21 @@
   <div>
     <span class="ds-c-badge ds-c-badge--info">2</span>
     <span class="ds-c-badge ds-c-badge--info">Info badge</span>
-    <span class="ds-c-badge ds-c-badge--info ds-u-font-size--base"
-      >Larger info badge</span
-    >
+    <span class="ds-c-badge ds-c-badge--info ds-u-font-size--base">Larger info badge</span>
   </div>
   <div>
     <span class="ds-c-badge ds-c-badge--success">3</span>
     <span class="ds-c-badge ds-c-badge--success">Success badge</span>
-    <span class="ds-c-badge ds-c-badge--success ds-u-font-size--base"
-      >Larger success badge</span
-    >
+    <span class="ds-c-badge ds-c-badge--success ds-u-font-size--base">Larger success badge</span>
   </div>
   <div>
     <span class="ds-c-badge ds-c-badge--warn">4</span>
     <span class="ds-c-badge ds-c-badge--warn">Warning badge</span>
-    <span class="ds-c-badge ds-c-badge--warn ds-u-font-size--base"
-      >Larger warning badge</span
-    >
+    <span class="ds-c-badge ds-c-badge--warn ds-u-font-size--base">Larger warning badge</span>
   </div>
   <div>
     <span class="ds-c-badge ds-c-badge--alert">5</span>
     <span class="ds-c-badge ds-c-badge--alert">Alert badge</span>
-    <span class="ds-c-badge ds-c-badge--alert ds-u-font-size--base"
-      >Larger alert badge</span
-    >
+    <span class="ds-c-badge ds-c-badge--alert ds-u-font-size--base">Larger alert badge</span>
   </div>
 </div>

packages/core/src/components/Button/button.example.html

@@ -16,91 +16,55 @@ <h6 class="preview__label">Primary button</h6>
 <button type="button" class="ds-c-button ds-c-button--primary">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--primary ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--primary ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--primary ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--disabled">
   Disabled
 </button>
 
 <h6 class="preview__label">Danger button</h6>
 <button type="button" class="ds-c-button ds-c-button--danger">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--danger ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--danger ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--danger ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--disabled">
   Disabled
 </button>
 
 <h6 class="preview__label">Success button</h6>
 <button type="button" class="ds-c-button ds-c-button--success">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--success ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--success ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--success ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--disabled">
   Disabled
 </button>
 
 <h6 class="preview__label">Transparent button</h6>
 <button type="button" class="ds-c-button ds-c-button--transparent">
   Default
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--transparent ds-c-button--hover"
->
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--hover">
   Hover
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--transparent ds-c-button--active"
->
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--active">
   Active
 </button>
-<button
-  type="button"
-  class="ds-c-button ds-c-button--transparent ds-c-button--disabled"
->
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--disabled">
   Disabled
 </button>
 

packages/core/src/components/ChoiceList/checkbox-radio-right-to-left.example.html

@@ -1,7 +1,5 @@
 <div class="ds-u-clearfix">
-  <div
-    class="ds-u-padding--2 ds-u-text-align--right ds-u-border--2 ds-u-float--left"
-  >
+  <div class="ds-u-padding--2 ds-u-text-align--right ds-u-border--2 ds-u-float--left">
     <fieldset class="ds-c-fieldset ds-u-margin-top--0">
       <legend class="ds-c-label">Right to left</legend>
       <span class="ds-c-field__hint ds-u-margin-bottom--1">
@@ -47,9 +45,7 @@
   >
     <fieldset class="ds-c-fieldset ds-u-margin-top--0">
       <legend class="ds-c-label">Right to left</legend>
-      <span
-        class="ds-c-field__hint ds-c-field__hint--inverse ds-u-margin-bottom--1"
-      >
+      <span class="ds-c-field__hint ds-c-field__hint--inverse ds-u-margin-bottom--1">
         Select desired fruits
       </span>
       <input

packages/core/src/components/ChoiceList/checkbox-radio-size.example.html

@@ -0,0 +1,41 @@
+<div class="ds-u-clearfix">
+  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left">
+    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
+      <legend class="ds-c-label">Size variants</legend>
+      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
+      <input
+        class="ds-c-choice"
+        id="normal-1"
+        type="checkbox"
+        name="size-1"
+        value="normal"
+        checked
+      />
+      <label for="normal-1">Normal</label>
+      <input
+        class="ds-c-choice ds-c-choice--small"
+        id="small-1"
+        type="checkbox"
+        name="size-1"
+        value="small"
+      />
+      <label for="small-1">Small</label>
+    </fieldset>
+  </div>
+  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left ds-u-margin-left--2">
+    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
+      <legend class="ds-c-label">Size variants</legend>
+      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
+      <input class="ds-c-choice" id="normal-2" type="radio" name="size-2" value="normal" checked />
+      <label for="normal-2">Normal</label>
+      <input
+        class="ds-c-choice ds-c-choice--small"
+        id="small-2"
+        type="radio"
+        name="size-2"
+        value="small"
+      />
+      <label for="small-2">Small</label>
+    </fieldset>
+  </div>
+</div>

packages/core/src/components/ChoiceList/checkbox-radio.example.html

@@ -48,21 +48,9 @@
       Radio 1
       <span class="ds-c-field__hint">Choice hint text</span>
     </label>
-    <input
-      class="ds-c-choice"
-      id="radio-2"
-      type="radio"
-      name="radio-choices"
-      value="radio-2"
-    />
+    <input class="ds-c-choice" id="radio-2" type="radio" name="radio-choices" value="radio-2" />
     <label for="radio-2">Radio 2</label>
-    <input
-      class="ds-c-choice"
-      id="radio-3"
-      type="radio"
-      name="radio-choices"
-      value="radio-3"
-    />
+    <input class="ds-c-choice" id="radio-3" type="radio" name="radio-choices" value="radio-3" />
     <label for="radio-3">Radio 3</label>
   </fieldset>
   <fieldset class="ds-c-fieldset">
@@ -88,12 +76,8 @@
   <div class="example--wrapper example--inverse ds-u-margin-top--2">
     <fieldset class="ds-c-fieldset">
       <legend class="ds-c-label">Inverse example</legend>
-      <span class="ds-c-field__hint ds-c-field__hint--inverse"
-        >Helpful hint text</span
-      >
-      <span class="ds-c-field__hint ds-u-color--error-light"
-        >Error message example</span
-      >
+      <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
+      <span class="ds-c-field__hint ds-u-color--error-light">Error message example</span>
       <input
         class="ds-c-choice ds-c-choice--inverse"
         id="inverse =1"

packages/core/src/components/ChoiceList/select.example.html

@@ -15,11 +15,7 @@
       Helpful hint text
     </span>
   </label>
-  <select
-    class="ds-c-field ds-c-field--inverse"
-    name="options-inverse"
-    id="options-inverse"
-  >
+  <select class="ds-c-field ds-c-field--inverse" name="options-inverse" id="options-inverse">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>