@ons/design-system 70.0.6 → 70.0.8

package/components/image/_macro.spec.js

@@ -6,112 +6,112 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_IMAGE_URL_MINIMAL = {
-  url: 'example.png',
+    url: 'example.png',
 };
 
 const EXAMPLE_IMAGE_IMAGE_MINIMAL = {
-  image: {
-    smallSrc: 'example-small.png',
-    largeSrc: 'example-large.png',
-  },
+    image: {
+        smallSrc: 'example-small.png',
+        largeSrc: 'example-large.png',
+    },
 };
 
 describe('macro: image', () => {
-  it('outputs a `figure` element', () => {
-    const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
-
-    expect($('.ons-image')[0].tagName).toBe('figure');
-  });
-
-  it('outputs a `figurecaption` element when `caption` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('image', {
-        ...EXAMPLE_IMAGE_URL_MINIMAL,
-        caption: 'Example image caption',
-      }),
-    );
-
-    expect($('.ons-image__caption')[0].tagName).toBe('figcaption');
-  });
-
-  it('outputs a `figurecaption` element with provided `caption` text', () => {
-    const $ = cheerio.load(
-      renderComponent('image', {
-        ...EXAMPLE_IMAGE_URL_MINIMAL,
-        caption: 'Example image caption',
-      }),
-    );
-
-    expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
-  });
-
-  describe('mode: url', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
+    it('outputs a `figure` element', () => {
+        const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
+
+        expect($('.ons-image')[0].tagName).toBe('figure');
     });
 
-    it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
+    it('outputs a `figurecaption` element when `caption` is provided', () => {
+        const $ = cheerio.load(
+            renderComponent('image', {
+                ...EXAMPLE_IMAGE_URL_MINIMAL,
+                caption: 'Example image caption',
+            }),
+        );
 
-      expect($('.ons-image__img')[0].tagName).toBe('img');
+        expect($('.ons-image__caption')[0].tagName).toBe('figcaption');
     });
 
-    it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
+    it('outputs a `figurecaption` element with provided `caption` text', () => {
+        const $ = cheerio.load(
+            renderComponent('image', {
+                ...EXAMPLE_IMAGE_URL_MINIMAL,
+                caption: 'Example image caption',
+            }),
+        );
 
-      expect($('.ons-image__img').attr('src')).toBe('example.png');
+        expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
     });
 
-    it('outputs an `img` element with the expected alt text', () => {
-      const $ = cheerio.load(
-        renderComponent('image', {
-          ...EXAMPLE_IMAGE_URL_MINIMAL,
-          alt: 'Example alt text',
-        }),
-      );
+    describe('mode: url', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
-      expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
-    });
-  });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
 
-  describe('mode: image', () => {
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+        it('outputs an `img` element', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
+            expect($('.ons-image__img')[0].tagName).toBe('img');
+        });
 
-    it('outputs an `img` element', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+        it('outputs an `img` element with the expected `src`', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_URL_MINIMAL));
 
-      expect($('.ons-image__img')[0].tagName).toBe('img');
-    });
+            expect($('.ons-image__img').attr('src')).toBe('example.png');
+        });
 
-    it('outputs an `img` element with the expected `srcset`', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+        it('outputs an `img` element with the expected alt text', () => {
+            const $ = cheerio.load(
+                renderComponent('image', {
+                    ...EXAMPLE_IMAGE_URL_MINIMAL,
+                    alt: 'Example alt text',
+                }),
+            );
 
-      expect($('.ons-image__img').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+            expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+        });
     });
 
-    it('outputs an `img` element with the expected `src`', () => {
-      const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+    describe('mode: image', () => {
+        it('passes jest-axe checks', async () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
 
-      expect($('.ons-image__img').attr('src')).toBe('example-small.png');
-    });
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+        });
+
+        it('outputs an `img` element', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+            expect($('.ons-image__img')[0].tagName).toBe('img');
+        });
+
+        it('outputs an `img` element with the expected `srcset`', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+            expect($('.ons-image__img').attr('srcset')).toBe('example-small.png 1x, example-large.png 2x');
+        });
+
+        it('outputs an `img` element with the expected `src`', () => {
+            const $ = cheerio.load(renderComponent('image', EXAMPLE_IMAGE_IMAGE_MINIMAL));
+
+            expect($('.ons-image__img').attr('src')).toBe('example-small.png');
+        });
 
-    it('outputs an `img` element with the expected alt text', () => {
-      const $ = cheerio.load(
-        renderComponent('image', {
-          ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
-          alt: 'Example alt text',
-        }),
-      );
+        it('outputs an `img` element with the expected alt text', () => {
+            const $ = cheerio.load(
+                renderComponent('image', {
+                    ...EXAMPLE_IMAGE_IMAGE_MINIMAL,
+                    alt: 'Example alt text',
+                }),
+            );
 
-      expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+            expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
+        });
     });
-  });
 });

package/components/input/_input-type.scss

@@ -1,109 +1,106 @@
 .ons-input-type {
-  display: block;
-
-  // Keep the entire component display block, but use inline-flex on inner to prevent the orange focus from going full width
-  &__inner {
-    display: inline-flex;
-    position: relative;
-  }
-
-  // Double ampersand is needed to solve specificity issues
-  & &__input {
-    flex: 1 1 auto;
-    position: relative;
-    z-index: 1;
-
-    &:focus {
-      // Override default input focus so it can wrap prefix/suffix too
-      box-shadow: none;
-      outline: none;
-    }
+    display: block;
 
-    // Override default input error style so it can wrap prefix/suffix too
-    &.ons-input--error:not(:focus) {
-      border-right: $input-border-width solid var(--ons-color-input-border);
-      box-shadow: none;
-      outline: none;
+    // Keep the entire component display block, but use inline-flex on inner to prevent the orange focus from going full width
+    &__inner {
+        display: inline-flex;
+        position: relative;
     }
-  }
 
-  &__type {
-    background-color: var(--ons-color-button-secondary);
-    display: block;
-    flex: 0 0 auto;
-    font-size: 1rem;
-    font-weight: $font-weight-bold;
-    line-height: normal;
-    padding: $input-padding-vertical $input-padding-horizontal * 2;
-    text-align: center;
-    white-space: nowrap;
-
-    &[title] {
-      text-decoration: none;
+    // Double ampersand is needed to solve specificity issues
+    & &__input {
+        flex: 1 1 auto;
+        position: relative;
+        z-index: 1;
+
+        &:focus {
+            // Override default input focus so it can wrap prefix/suffix too
+            box-shadow: none;
+            outline: none;
+        }
+
+        // Override default input error style so it can wrap prefix/suffix too
+        &.ons-input--error:not(:focus) {
+            border-right: $input-border-width solid var(--ons-color-input-border);
+            box-shadow: none;
+            outline: none;
+        }
     }
-  }
 
-  &__type,
-  &__type[title] {
-    border: 1px solid var(--ons-color-input-border);
-  }
-
-  &__type[title] {
-    cursor: help;
-  }
+    &__type {
+        background-color: var(--ons-color-button-secondary);
+        display: block;
+        flex: 0 0 auto;
+        font-size: 1rem;
+        font-weight: $font-weight-bold;
+        line-height: normal;
+        padding: $input-padding-vertical $input-padding-horizontal * 2;
+        text-align: center;
+        white-space: nowrap;
+
+        &[title] {
+            text-decoration: none;
+            cursor: help;
+        }
+    }
 
-  &__input:focus + &__type::after {
-    // Style input + prefix/suffix on focus
-    @extend %ons-input-focus;
+    &__type,
+    &__type[title] {
+        border: 1px solid var(--ons-color-input-border);
+    }
 
-    border-radius: $input-radius;
-    inset: 0;
-    content: '';
-    display: block;
-    position: absolute;
-  }
+    &__input:focus + &__type::after {
+        // Style input + prefix/suffix on focus
+        @extend %ons-input-focus;
 
-  &:not(&--prefix) & {
-    &__type {
-      border-left: 0;
-      border-radius: 0 $input-radius $input-radius 0;
+        border-radius: $input-radius;
+        inset: 0;
+        content: '';
+        display: block;
+        position: absolute;
     }
 
-    &__input {
-      border-radius: $input-radius 0 0 $input-radius;
-    }
-  }
+    &:not(&--prefix) & {
+        &__type {
+            border-left: 0;
+            border-radius: 0 $input-radius $input-radius 0;
+        }
 
-  &--prefix & {
-    &__type[title] {
-      border-radius: $input-radius 0 0 $input-radius;
-      border-right: 0;
-      order: 0;
+        &__input {
+            border-radius: $input-radius 0 0 $input-radius;
+        }
     }
 
-    &__input {
-      border-radius: 0 $input-radius $input-radius 0;
-      order: 1;
+    &--prefix & {
+        &__type[title] {
+            border-radius: $input-radius 0 0 $input-radius;
+            border-right: 0;
+            order: 0;
+        }
+
+        &__input {
+            border-radius: 0 $input-radius $input-radius 0;
+            order: 1;
+        }
     }
-  }
 }
 
 // Errors
 .ons-input--error:not(:focus) {
-  & + .ons-input-type__type,
-  & + .ons-input-type__type[title] {
-    border-color: var(--ons-color-errors);
-  }
-
-  & + .ons-input-type__type::after {
-    border-radius: $input-radius;
-    inset: 0;
-
-    // Style input + prefix/suffix for errors
-    box-shadow: 0 0 0 1px var(--ons-color-errors);
-    content: '';
-    display: block;
-    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-    position: absolute;
-  }
+    + .ons-input-type__type,
+    + .ons-input-type__type[title] {
+        border-color: var(--ons-color-errors);
+    }
+
+    + .ons-input-type__type::after {
+        border-radius: $input-radius;
+        inset: 0;
+
+        // Style input + prefix/suffix for errors
+        box-shadow: 0 0 0 1px var(--ons-color-errors);
+        content: '';
+        display: block;
+        outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+        position: absolute;
+    }
 }