Example of a mask for a CPF input:

<AtomInput
  placeholder='999.999.999-99'
  mask='000.000.000-00'
/>

Ref

REF #67 #57

Inputs with required, patten, or specific types aren't being validated when form is submited
Example code:

<form onsubmit="return false">
     <atom-input required="true" type="text"></atom-input>
      <button>submit</button>
    </form>

or

<form onsubmit="return false">
     <atom-input  type="email"></atom-input>
      <button>submit</button>
    </form>

Evidence:
https://github.com/juntossomosmais/atomium/assets/6757777/52389899-58d4-4c54-8e8f-9bbf255aba18

Current behavior

• Atomium Button when in Loading state, is enabled

Expected behavior

• Atomium Button being disabled when loading

How to reproduce

Code example

import React from 'react'

import { AtomButton } from '@juntossomosmais/atomium/react'

export default function Teste() {
  return (
    <>
      <AtomButton loading onClick={() => console.log('LOADING CLICK')}>
        Loading
      </AtomButton>

      <AtomButton disabled onClick={() => console.log('DISABLED CLICK')}>
        Disabled
      </AtomButton>

      <AtomButton onClick={() => console.log('NORMAL CLICK')}>
        Normal
      </AtomButton>
    </>
  )
}

Video example

This issue is an live issue for us to keep track and an eye on the problem around package.json property exports with both Stencil and Jest

Context

While development of the Carousel Component(#235) we have discover a problem when using Swiper on the project.

Details

Swiper package.json uses the export property to export diferent modules inside the lib
We discovered this is as issue with stencil itself, once while trying to use like explained on Swiper docs we recieve the below error while building and starting the project:

[ WARN ] Bundling Warning UNRESOLVED_IMPORT
'swiper/element/bundle' is imported by src/components/my-component/my-component.tsx, but could not be
resolved – treating it as an external dependency

We opened the issue ionic-team/stencil#4660 on stencil's repository, and was informed to create a thread on the support discord channel.

We manage to be able to use Swiper with Stencil by change the way we import, from:

import { register } from 'swiper/element/bundle';
register();

to

import 'swiper/swiper-element-bundle.js';

This way Swiper register the custom element automaticaly using an IIFE.

Jest

We also discovered this to be an issue with Jest once our current version of jest doesn't support this property current. (jestjs/jest#9771 (comment))
This already had been reported on swipers oficial repository:

• nolimits4web/swiper#5451
• nolimits4web/swiper#4969

Even we had manage to work with Swiper on the element itself, we had trouble using it with stencil test suit .
In order to register a web component within the test Mock DOM we are required to pass it through components property inside the newSpecPage , but once we cant named import things from Swiper, it can anchieve full coverege on Swiper events, for exemple.

You can see that the PR's coverage is below the required only because of the three lines of the on functions.

REF #82

From https://juntossomosmais.github.io/venice/vue/?path=/story/components-loadinglogo--loading-logo

On the README.md file (root) we have a command npm run storybook:build that doesn't exist, we could:

• Remove it, since npm run start already does the job, or
• Create the script on package.json.

Ref: https://github.com/juntossomosmais/venice/tree/master/packages/react-ds/src/components/Progress

Wrapper of swiperjs.com

Ref: https://github.com/juntossomosmais/venice/tree/master/packages/react-ds/src/components/Checkbox

While implementing carousing within Loja Virtual, we face the issue of the Card componing looses its "connectin" with the framework. Stops to be interactible and reactive, stops to update values and other items, see the video below:

PS. I already uunderstood whats is going on and am current working on it, on the next hours i will open the PR fixint it 🙏🏻

• Material Design propose
• Figma