docs: updated info about getting started as a designer #1048
mrosvikcheck-storefront.yml
on: pull_request
Builds, lints and tests code
3m 8s
Annotations
5 errors and 5 warnings
|
packages/react/src/components/form/Switch/Switch.test.tsx > Switch > has correct description:
packages/react/src/components/form/Switch/Switch.test.tsx#L23
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox" and description "description"
Here are the accessible roles:
switch:
Name "test":
Description "description":
<input
aria-describedby="switch-description-:r1:"
class="fds-switch__input"
id="switch-:r1:"
role="switch"
type="checkbox"
value="test"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="fds-paragraph fds-paragraph--md fds-switch fds-switch--md"
>
<input
aria-describedby="switch-description-:r1:"
class="fds-switch__input"
id="switch-:r1:"
role="switch"
type="checkbox"
value="test"
/>
<label
class="fds-label fds-label--md fds-label--regular-weight fds-switch__label"
for="switch-:r1:"
>
<span
class="fds-switch__track"
>
<span
class="fds-switch__thumb"
/>
</span>
<span>
test
</span>
</label>
<div
class="fds-paragraph fds-paragraph--md fds-switch__description"
id="switch-description-:r1:"
>
description
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ packages/react/src/components/form/Switch/Switch.test.tsx:23:14
|
|
packages/react/src/components/form/Switch/Switch.test.tsx > Switch > calls onChange and onClick when user clicks:
packages/react/src/components/form/Switch/Switch.test.tsx#L43
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "label":
<input
class="fds-switch__input"
id="switch-:r2:"
role="switch"
type="checkbox"
value="test"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="fds-paragraph fds-paragraph--md fds-switch fds-switch--md"
>
<input
class="fds-switch__input"
id="switch-:r2:"
role="switch"
type="checkbox"
value="test"
/>
<label
class="fds-label fds-label--md fds-label--regular-weight fds-switch__label"
for="switch-:r2:"
>
<span
class="fds-switch__track"
>
<span
class="fds-switch__thumb"
/>
</span>
<span>
label
</span>
</label>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ packages/react/src/components/form/Switch/Switch.test.tsx:43:28
|
|
packages/react/src/components/form/Switch/Switch.test.tsx > Switch > does not call onChange or onClick when user clicks and the Switch is disabled:
packages/react/src/components/form/Switch/Switch.test.tsx#L70
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "disabled switch_":
<input
class="fds-switch__input"
disabled=""
id="switch-:r3:"
role="switch"
type="checkbox"
value="test"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="fds-paragraph fds-paragraph--md fds-switch fds-switch--md fds-switch--disabled"
>
<input
class="fds-switch__input"
disabled=""
id="switch-:r3:"
role="switch"
type="checkbox"
value="test"
/>
<label
class="fds-label fds-label--md fds-label--regular-weight fds-switch__label"
for="switch-:r3:"
>
<span
class="fds-switch__track"
>
<span
class="fds-switch__thumb"
/>
</span>
<span>
disabled switch_
</span>
</label>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ packages/react/src/components/form/Switch/Switch.test.tsx:70:28
|
|
packages/react/src/components/form/Switch/Switch.test.tsx > Switch > does not call onChange or onClick when user clicks and the Switch is readOnly:
packages/react/src/components/form/Switch/Switch.test.tsx#L94
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "readonly switch_":
<input
class="fds-switch__input"
id="switch-:r4:"
readonly=""
role="switch"
type="checkbox"
value="test"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="fds-paragraph fds-paragraph--md fds-switch fds-switch--md fds-switch--readonly"
>
<input
class="fds-switch__input"
id="switch-:r4:"
readonly=""
role="switch"
type="checkbox"
value="test"
/>
<label
class="fds-label fds-label--md fds-label--regular-weight fds-switch__label"
for="switch-:r4:"
>
<span
class="fds-switch__track"
>
<span
class="fds-switch__thumb"
/>
</span>
<svg
aria-hidden="true"
class="fds-switch__readonly__icon"
fill="none"
focusable="false"
height="1em"
role="img"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12 2.25A4.75 4.75 0 0 0 7.25 7v2.25H7A1.75 1.75 0 0 0 5.25 11v9c0 .414.336.75.75.75h12a.75.75 0 0 0 .75-.75v-9A1.75 1.75 0 0 0 17 9.25h-.25V7A4.75 4.75 0 0 0 12 2.25Zm3.25 7V7a3.25 3.25 0 0 0-6.5 0v2.25h6.5ZM12 13a1.5 1.5 0 0 0-.75 2.8V17a.75.75 0 0 0 1.5 0v-1.2A1.5 1.5 0 0 0 12 13Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<span>
readonly switch_
</span>
</label>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ packages/react/src/components/form/Switch/Switch.test.tsx:94:28
|
|
Builds, lints and tests code
Process completed with exit code 1.
|
|
Builds, lints and tests code:
apps/storefront/components/Blog/Contributors/Contributors.tsx#L14
Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
|
|
Builds, lints and tests code:
apps/storefront/components/ComponentCard/ComponentCard.tsx#L17
Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
|
|
Builds, lints and tests code:
apps/storefront/components/Image/Image.tsx#L17
Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
|
|
Builds, lints and tests code:
apps/storefront/components/Section/Section.tsx#L37
Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
|
|
Builds, lints and tests code:
apps/storefront/components/Tokens/TokenList/TokenList.tsx#L210
Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element
|