Fix/2775/grid examples moved into the ds repo (#2777)

* first commit

* added grid examples to ds repo

* updated style

* stylelint issue fixed

* fixed style lint issue

.stylelintrc.yml

@@ -5,6 +5,7 @@ extends:
     - stylelint-config-sass-guidelines
 plugins:
     - stylelint-scss
+    - stylelint-order
 rules:
     # Line Spacing
     rule-empty-line-before:
@@ -39,7 +40,8 @@ rules:
         - ignoreProperties:
             - 'box-orient'
         - ignoreAtRules: ['each', 'else', 'extend', 'for', 'function', 'if', 'include', 'mixin', 'return', 'while']
-
+    # Imports
+    import-notation: 'string'
     # Nesting
     max-nesting-depth:
         - 5

package.json

@@ -43,7 +43,7 @@
       "git add"
     ],
     "*.scss": [
-      "prettier --print-width 140 --single-quote --parser postcss --write",
+      "prettier --print-width 140 --single-quote --parser scss --write",
       "yarn run stylelint-fix",
       "git add"
     ]
@@ -123,6 +123,7 @@
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-order": "^6.0.3",
     "stylelint-scss": "^5.0.1",
     "through2": "^4.0.2",
     "tick-manager": "^1.0.3",

src/components/access-code/access-code.scss

@@ -6,17 +6,17 @@
     text-transform: uppercase;
     width: 15.1em;
 
-    @media all and (min-width: 375px) {
+    @media all and (width >= 375px) {
       font-size: 20px !important;
       width: 15.1em !important;
     }
 
-    @media all and (max-width: 374px) {
+    @media all and (width <= 374px) {
       letter-spacing: 0;
       max-width: 12.6em !important;
     }
 
-    @media all and (max-width: 299px) {
+    @media all and (width <= 299px) {
       max-width: 100%;
     }
 

src/components/autosuggest/_autosuggest.scss

@@ -51,7 +51,7 @@
       border-bottom: 1px solid var(--ons-color-input-border);
     }
 
-    &:not(&--no-results):not(&--more-results):hover,
+    &:not(&--no-results, &--more-results):hover,
     &--focused:not(&--no-results) {
       background: var(--ons-color-text-link-hover);
       border-color: var(--ons-color-text-link-hover);
@@ -63,7 +63,7 @@
       }
     }
 
-    &:active:not(&--no-results):not(&--more-results) {
+    &:active:not(&--no-results, &--more-results) {
       background: var(--ons-color-focus);
       color: var(--ons-color-text-link-focus);
 
@@ -128,7 +128,7 @@
   &--header {
     .ons-autosuggest__results {
       border: none;
-      box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.6);
+      box-shadow: 0 0 5px 0 rgb(34 34 34 / 60%);
       left: 0;
       position: absolute;
       z-index: 10;

src/components/button/_button.scss

@@ -15,19 +15,16 @@ $button-shadow-size: 3px;
   position: relative;
   text-align: center;
   text-decoration: none;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
   vertical-align: top;
   white-space: nowrap;
 
   // Transparent border for IE11 High Contrast mode support due to 'border: 0' on buttons
   &::after {
     border: ems($button-shadow-size) solid transparent;
-    bottom: -(ems($button-shadow-size)); // makes sure button shadow is selectable
+    inset: 0 0 - (ems($button-shadow-size)) 0; // makes sure button shadow is selectable
     content: '';
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &--search {
@@ -172,8 +169,8 @@ $button-shadow-size: 3px;
     text-decoration: none;
   }
 
-  &--link:focus:not(:active):not(&--secondary) &,
-  &--link:focus:hover:not(:active):not(&--secondary) & {
+  &--link:focus:not(:active, &--secondary) &,
+  &--link:focus:hover:not(:active, &--secondary) & {
     outline: inherit;
 
     &__inner {
@@ -245,7 +242,8 @@ $button-shadow-size: 3px;
   &--text-link:active:focus & {
     &__inner {
       background-color: var(--ons-color-focus);
-      box-shadow: 0 -2px var(--ons-color-focus), 0 4px var(--ons-color-text-link-focus) !important;
+      box-shadow: 0 -2px var(--ons-color-focus),
+        0 4px var(--ons-color-text-link-focus) !important;
       color: var(--ons-color-text-link-focus);
       .ons-icon {
         fill: var(--ons-color-text-link-focus);
@@ -256,7 +254,7 @@ $button-shadow-size: 3px;
   &--ghost & {
     &__inner {
       background: transparent;
-      border: 2px solid rgba(255, 255, 255, 0.6);
+      border: 2px solid rgb(255 255 255 / 60%);
       box-shadow: none;
       color: var(--ons-color-text-inverse);
       .ons-icon {
@@ -314,7 +312,7 @@ $button-shadow-size: 3px;
 
   &--ghost:hover & {
     &__inner {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgb(0 0 0 / 10%);
       border-color: var(--ons-color-white);
     }
   }
@@ -323,8 +321,8 @@ $button-shadow-size: 3px;
   &--ghost:active:focus &,
   &--ghost.active & {
     &__inner {
-      background: rgba(0, 0, 0, 0.2);
-      border-color: rgba(255, 255, 255, 0.6);
+      background: rgb(0 0 0 / 20%);
+      border-color: rgb(255 255 255 / 60%);
       color: var(--ons-color-text-inverse);
       .ons-icon {
         fill: var(--ons-color-text-inverse);
@@ -514,8 +512,7 @@ $button-shadow-size: 3px;
 
   align-items: baseline;
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 
   & .ons-btn,
   & a {

src/components/checkboxes/_checkbox.scss

@@ -156,12 +156,9 @@ $checkbox-padding: 11px;
       background: var(--ons-color-white);
       border: 1px solid var(--ons-color-input-border);
       border-radius: 3px;
-      bottom: 0;
+      inset: 0;
       content: '';
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
       z-index: -1;
     }
 

src/components/download-resources/_download-resources.scss

@@ -49,22 +49,20 @@
 
   &__panel--is-visible {
     background-color: var(--ons-color-white);
-    bottom: 0;
+    inset: 0;
     display: block;
     height: calc(100% - 76px); // Height of action buttons
-    left: 0;
     overflow-y: scroll;
     padding: 1rem;
     position: fixed;
-    right: 0;
-    top: 0;
     z-index: 10;
   }
 
   &__actions {
     background-color: var(--ons-color-white);
     bottom: 0;
-    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.5), 0 -1px 0 0 rgba(65, 64, 66, 0.5);
+    box-shadow: 0 0 5px 0 rgb(34 34 34 / 50%),
+      0 -1px 0 0 rgb(65 64 66 / 50%);
     display: flex;
     left: 0;
     padding: 1rem;

src/components/helpers/_grid.scss

@@ -0,0 +1,6 @@
+.ons-pl-grid-col {
+  background: var(--ons-color-grey-5);
+  font-size: 0.8rem;
+  margin: 0 0 1rem;
+  padding: 1rem;
+}

src/components/helpers/grid.njk

@@ -0,0 +1,19 @@
+{% macro patternLibExampleGrid(params) %}
+  {% if params.container -%}
+    <div class="ons-container">
+  {% endif -%}
+
+  <div class="ons-grid">
+      {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+          {% for i in range(0, item.repeat | default(1)  ) -%}
+              <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                  <div class="ons-pl-grid-col">{{ item.col }} col</div>
+              </div>
+          {%- endfor %}
+      {%- endfor %}
+  </div>
+
+  {% if params.container -%}
+    </div>
+  {% endif -%}
+{% endmacro %}

src/components/input/_input-type.scss

@@ -57,13 +57,10 @@
     @extend %ons-input-focus;
 
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
     content: '';
     display: block;
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &:not(&--prefix) & {
@@ -100,16 +97,13 @@
 
   & + .ons-input-type__type::after {
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
 
     // Style input + prefix/suffix for errors
     box-shadow: 0 0 0 1px var(--ons-color-errors);
     content: '';
     display: block;
-    left: 0;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     position: absolute;
-    right: 0;
-    top: 0;
   }
 }

src/components/input/_input.scss

@@ -1,5 +1,6 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), 0 0 0 4px var(--ons-color-focus);
+  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border),
+    0 0 0 4px var(--ons-color-focus);
 
   // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   outline: 3px solid transparent;
@@ -31,7 +32,7 @@
   @include mq(s) {
     &--text,
     &--select {
-      &:not(.ons-input--block):not([class*='input--w-']) {
+      &:not(.ons-input--block, [class*='input--w-']) {
         width: $input-width;
       }
     }
@@ -131,7 +132,7 @@
 }
 
 .ons-input--ghost {
-  border: 2px solid rgba(255, 255, 255, 0.6);
+  border: 2px solid rgb(255 255 255 / 60%);
   &:focus {
     border: 2px solid var(--ons-color-input-border);
   }

src/components/modal/_modal.scss

@@ -1,4 +1,4 @@
-$backdrop-colour: rgba(0, 0, 0, 0.8);
+$backdrop-colour: rgb(0 0 0 / 80%);
 
 .ons-modal {
   border: none;
@@ -13,20 +13,17 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   position: fixed;
   top: 0;
 
-  @media screen and (min-width: 600px) {
+  @media screen and (width >= 600px) {
     margin-left: auto;
     margin-right: auto;
     max-width: 500px;
   }
 
   &-ie11 & {
     background: var(--ons-color-white);
-    bottom: 0;
+    inset: 50% 0 0;
     height: 350px;
-    left: 0;
     position: fixed;
-    right: 0;
-    top: 50%;
     transform: translate(0, -50%);
   }
 

src/components/table/_table.scss

@@ -115,7 +115,9 @@
       overflow-x: auto;
       width: 100%;
       &:focus {
-        box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus);
+        box-shadow: 0 0 0 3px var(--ons-color-page-light),
+          0 0 0 5px var(--ons-color-text-link-focus),
+          0 0 0 8px var(--ons-color-focus);
         outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
         outline-offset: 1px;
       }
@@ -141,13 +143,15 @@
       .ons-table__right-shadow {
         right: 0;
         &.ons-visible {
-          box-shadow: inset -1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+          box-shadow: inset -1px 0 0 0 #bfc1c3,
+            inset -5px 0 0 0 rgb(191 193 195 / 40%);
         }
       }
       .ons-table__left-shadow {
         left: 0;
         &.ons-visible {
-          box-shadow: inset 1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+          box-shadow: inset 1px 0 0 0 #bfc1c3,
+            inset -5px 0 0 0 rgb(191 193 195 / 40%);
         }
       }
     }