AppQuality · iacopolea · Dec 29, 2023 · Dec 29, 2023 · Dec 29, 2023
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@appquality/appquality-design-system": "^1.0.52",
+    "@appquality/appquality-design-system": "^1.0.57",
     "@appquality/craft-blocks": "^0.1.27",
     "@datadog/browser-logs": "^3.4.1",
     "@reduxjs/toolkit": "^1.8.2",

diff --git a/src/features/LoginForm/index.tsx b/src/features/LoginForm/index.tsx
@@ -110,10 +110,10 @@ const LoginForm = ({
           </Text>
           <Button
             className="aq-mb-3 capitalize-first"
-            type="primary"
+            kind="primary"
             size="block"
             flat
-            htmlType="submit"
+            type="submit"
             disabled={props.isSubmitting || !props.dirty || !props.isValid}
           >
             {props.isSubmitting ? t("wait...") : cta}

diff --git a/src/pages/BugForm/BugFormContainer.tsx b/src/pages/BugForm/BugFormContainer.tsx
@@ -314,8 +314,8 @@ export const BugFormContainer = () => {
                 <BugDetails className="aq-mb-3" />
                 <Button
                   className="hide-mobile"
-                  type="primary"
-                  htmlType="submit"
+                  kind="primary"
+                  type="submit"
                   size="block"
                   disabled={disableSubmit}
                   flat
@@ -334,8 +334,8 @@ export const BugFormContainer = () => {
                   <FileUploader />
                   <Button
                     className="aq-mt-3 hide-desktop aq-mb-4"
-                    type="primary"
-                    htmlType="submit"
+                    kind="primary"
+                    type="submit"
                     size="block"
                     disabled={disableSubmit}
                     flat

diff --git a/src/pages/Dashboard/ActiveCampaignsTable/useCampaigns.tsx b/src/pages/Dashboard/ActiveCampaignsTable/useCampaigns.tsx
@@ -67,7 +67,7 @@ const useCampaigns = ({ page, order, orderBy }: CampaignsTableProps) => {
             className="aq-nopadding"
             forwardedAs="a"
             href={href}
-            type="link-hover"
+            kind="link-hover"
             size="sm"
           >
             {t("Read manual")}

diff --git a/src/pages/Dashboard/AvailableCampaignsTable/useCampaigns.tsx b/src/pages/Dashboard/AvailableCampaignsTable/useCampaigns.tsx
@@ -37,7 +37,7 @@ const useCampaigns = ({ page, order, orderBy }: CampaignsTableProps) => {
             disabled={previewLink === "#"}
             forwardedAs="a"
             href={previewLink}
-            type="link-hover"
+            kind="link-hover"
             size="sm"
           >
             {previewLink === "#"

diff --git a/src/pages/Dashboard/FeedbackModal.tsx b/src/pages/Dashboard/FeedbackModal.tsx
@@ -39,7 +39,7 @@ export const FeedbackButton = ({
 }) => {
   return (
     <StyledButton onClick={handleClick}>
-      <Button type="secondary" className="feedback-icon">
+      <Button kind="secondary" className="feedback-icon">
         <ChatLeftDots />
       </Button>
     </StyledButton>

diff --git a/src/pages/Dashboard/FinishedCampaignsTable/useCampaigns.tsx b/src/pages/Dashboard/FinishedCampaignsTable/useCampaigns.tsx
@@ -41,7 +41,7 @@ const useCampaigns = ({ page, order, orderBy }: CampaignsTableProps) => {
                 ? "#"
                 : `${window.location.origin}${manualLink}`
             }
-            type="link-hover"
+            kind="link-hover"
             size="sm"
           >
             {t("Review the manual")}

diff --git a/src/pages/Dashboard/OnboardingModal/SlideFinal.tsx b/src/pages/Dashboard/OnboardingModal/SlideFinal.tsx
@@ -50,7 +50,7 @@ export default ({ onClose }: { onClose: () => void }) => {
         <div className="onboardingCTA">
           <Button
             flat
-            type="success"
+            kind="success"
             onClick={() => {
               API.setOnboardingComplete();
               onClose();

diff --git a/src/pages/Dashboard/SetPopupAsSeenButton.tsx b/src/pages/Dashboard/SetPopupAsSeenButton.tsx
@@ -20,7 +20,7 @@ export default ({ id }: { id: number }) => {
   return (
     <Button
       forwardedAs="a"
-      type="link"
+      kind="link"
       flat
       size="block"
       disabled={seen}

diff --git a/src/pages/Dashboard/effects/useActiveCampaigns.tsx b/src/pages/Dashboard/effects/useActiveCampaigns.tsx
@@ -90,7 +90,7 @@ export default () => {
                     className="aq-nopadding"
                     forwardedAs="a"
                     href={`${window.location.origin}${manualLink}`}
-                    type="link-hover"
+                    kind="link-hover"
                     size="sm"
                   >
                     {t("Read manual")}

diff --git a/src/pages/Dashboard/effects/useAvailableCampaigns.tsx b/src/pages/Dashboard/effects/useAvailableCampaigns.tsx
@@ -72,7 +72,7 @@ export default () => {
                   disabled={previewLink === "#"}
                   forwardedAs="a"
                   href={previewLink}
-                  type="link-hover"
+                  kind="link-hover"
                   size="sm"
                 >
                   {previewLink === "#"

diff --git a/src/pages/Dashboard/effects/useCompletedCampaigns.tsx b/src/pages/Dashboard/effects/useCompletedCampaigns.tsx
@@ -69,7 +69,7 @@ export default () => {
                       ? "#"
                       : `${window.location.origin}${manualLink}`
                   }
-                  type="link-hover"
+                  kind="link-hover"
                   size="sm"
                 >
                   {t("Review the manual")}

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -139,7 +139,7 @@ export default function Dashboard() {
               <Card shadow={true} className="aq-mb-3">
                 <Button
                   flat
-                  type="info"
+                  kind="info"
                   size="block"
                   onClick={() =>
                     setIsPopupArchiveModalOpen(!isPopupArchiveModalOpen)

diff --git a/src/pages/Devices/EditDeviceModal/DeviceModalFooter.tsx b/src/pages/Devices/EditDeviceModal/DeviceModalFooter.tsx
@@ -23,7 +23,7 @@ export const DeviceModalFooter = ({
     <div className="device-wizard-footer">
       {currentStep > 0 && (
         <Button
-          type="primary"
+          kind="primary"
           flat={true}
           onClick={() => setStep(currentStep - 1)}
           disabled={currentStep === 0}
@@ -33,8 +33,8 @@ export const DeviceModalFooter = ({
       )}
       {currentStep === steps.length - 1 ? (
         <Button
-          type="primary"
-          htmlType="submit"
+          kind="primary"
+          type="submit"
           onClick={onSubmit}
           flat={true}
           disabled={currentStep > steps.length - 1}
@@ -43,7 +43,7 @@ export const DeviceModalFooter = ({
         </Button>
       ) : (
         <Button
-          type="primary"
+          kind="primary"
           onClick={() => {
             setStep(currentStep + 1);
           }}

diff --git a/src/pages/Devices/RemoveDeviceModal.tsx b/src/pages/Devices/RemoveDeviceModal.tsx
@@ -40,7 +40,7 @@ const RemoveDeviceModal = () => {
             <Button
               size="block"
               flat
-              type="primary"
+              kind="primary"
               onClick={dispatchCloseModal}
             >
               {t("Keep")}
@@ -50,7 +50,7 @@ const RemoveDeviceModal = () => {
             <Button
               size="block"
               flat
-              type="danger"
+              kind="danger"
               onClick={() => {
                 API.deleteDevice({ deviceId: current.id })
                   .then(() => {

diff --git a/src/pages/Devices/index.tsx b/src/pages/Devices/index.tsx
@@ -52,7 +52,7 @@ export default function Devices() {
             <Button
               onClick={() => dispatch(openAddDeviceModal())}
               flat={true}
-              type="primary"
+              kind="primary"
               size="block"
             >
               {t("Add device")}

diff --git a/src/pages/Devices/tableRows/index.tsx b/src/pages/Devices/tableRows/index.tsx
@@ -45,7 +45,7 @@ export const getTableRows = (
                 dispatch(selectDevice(d));
                 dispatch(openEditDeviceModal());
               }}
-              type="link-hover"
+              kind="link-hover"
               className="aq-nopadding aq-mr-3"
             >
               <div title={t("Edit")}>{t("Edit")}</div>
@@ -55,7 +55,7 @@ export const getTableRows = (
                 dispatch(selectDevice(d));
                 dispatch(openDeleteDeviceModal());
               }}
-              type="link-hover"
+              kind="link-hover"
               className="aq-nopadding"
             >
               <div className="action-text" title={t("Delete")}>

diff --git a/src/pages/ExperiencePoints/index.tsx b/src/pages/ExperiencePoints/index.tsx
@@ -145,7 +145,7 @@ export default function ExperiencePoints() {
               <Button
                 forwardedAs="a"
                 href={`${t("/discover-experience-points/")}`}
-                type="info"
+                kind="info"
                 size="block"
                 flat={true}
               >

diff --git a/src/pages/GettingStarted/SignupForm.tsx b/src/pages/GettingStarted/SignupForm.tsx
@@ -187,9 +187,9 @@ export const SignupForm = ({
             <Button
               className="aq-mb-3"
               style={{ gridColumn: "auto / span 3" }}
-              type="success"
+              kind="success"
               size="block"
-              htmlType="submit"
+              type="submit"
               id="signup-simple"
               flat
               disabled={props.isSubmitting || !props.dirty || !props.isValid}

diff --git a/src/pages/GettingStarted/SignupMailSocial.tsx b/src/pages/GettingStarted/SignupMailSocial.tsx
@@ -45,7 +45,7 @@ export const SignupMailSocial = ({ redirectUrl }: SignupMailSocialProps) => {
             </Text>
             <CSSGrid min="50%" max="75%" gutter="0" fill="true">
               <HalfColumnButton
-                type="primary"
+                kind="primary"
                 size="block"
                 id="signup-with-fb"
                 className="aq-mb-3"
@@ -57,7 +57,7 @@ export const SignupMailSocial = ({ redirectUrl }: SignupMailSocialProps) => {
             </CSSGrid>
             <CSSGrid min="50%" max="75%" gutter="0" fill="true">
               <HalfColumnButton
-                type="info"
+                kind="info"
                 size="block"
                 id="signup-with-ln"
                 className="aq-mb-3"

diff --git a/src/pages/Home/Footer/index.tsx b/src/pages/Home/Footer/index.tsx
@@ -100,7 +100,7 @@ export default () => {
         <Button
           forwardedAs="a"
           href="https://www.facebook.com/tryber.me"
-          type="link"
+          kind="link"
           className="aq-nopadding aq-mr-4"
           target="_blank"
         >
@@ -109,7 +109,7 @@ export default () => {
         <Button
           forwardedAs="a"
           href="https://instagram.com/tryber.me?utm_medium=copy_link"
-          type="link"
+          kind="link"
           className="aq-nopadding aq-mr-4"
           target="_blank"
         >
@@ -118,7 +118,7 @@ export default () => {
         <Button
           forwardedAs="a"
           href="https://t.me/Tryber_me"
-          type="link"
+          kind="link"
           className="aq-nopadding aq-mr-4"
           target="_blank"
         >

diff --git a/src/pages/Home/_components/JoinInButton/index.tsx b/src/pages/Home/_components/JoinInButton/index.tsx
@@ -15,7 +15,7 @@ const JoinInButton = ({
 
   return (
     <Button
-      type="secondary"
+      kind="secondary"
       flat={flat}
       className={`${className} aq-mb-4`}
       forwardedAs="a"

diff --git a/src/pages/MyBugs/index.tsx b/src/pages/MyBugs/index.tsx
@@ -94,7 +94,7 @@ export default function MyBugs() {
                 href={`${window.location.origin}/${
                   i18n.language !== "en" ? `${i18n.language}/` : ""
                 }bugs/show/${res.id}`}
-                type="link-hover"
+                kind="link-hover"
                 size="sm"
               >
                 {t("View more")}

diff --git a/src/pages/PreviewSelectionForm/SelectionForm/SelectionForm.tsx b/src/pages/PreviewSelectionForm/SelectionForm/SelectionForm.tsx
@@ -101,8 +101,8 @@ export const SelectionForm = () => {
             <SelectionFormFields genderOptions={genderOptions} />
             <Button
               className="aq-mt-3"
-              type="primary"
-              htmlType="submit"
+              kind="primary"
+              type="submit"
               size="block"
               disabled={
                 formikProps.isSubmitting ||

diff --git a/src/pages/Profile/TabAdvanced/Certifications.tsx b/src/pages/Profile/TabAdvanced/Certifications.tsx
@@ -49,8 +49,8 @@ const Certifications = () => {
             <div className="remove-certification aq-text-right">
               <Button
                 className="aq-text-danger"
-                type="link"
-                htmlType="button"
+                kind="link"
+                type="button"
                 flat
                 size="sm"
                 onClick={() => {
@@ -73,8 +73,8 @@ const Certifications = () => {
         ))}
       <CSSGrid min="50%" gutter="0" fill="true">
         <HalfColumnButton
-          type="primary"
-          htmlType="button"
+          kind="primary"
+          type="button"
           flat={true}
           disabled={false}
           onClick={() => {

diff --git a/src/pages/Profile/TabAdvanced/DeleteCertificationsModal.tsx b/src/pages/Profile/TabAdvanced/DeleteCertificationsModal.tsx
@@ -73,7 +73,7 @@ export const DeleteCertificationsModalFooter = ({
   return (
     <CSSGrid min="40%">
       <Button
-        type="secondary"
+        kind="secondary"
         flat={true}
         onClick={() => {
           close();
@@ -82,7 +82,7 @@ export const DeleteCertificationsModalFooter = ({
       >
         {t("Keep")}
       </Button>
-      <Button type="danger" flat={true} onClick={handleDeleteCertification}>
+      <Button kind="danger" flat={true} onClick={handleDeleteCertification}>
         {t("Remove")}
       </Button>
     </CSSGrid>

diff --git a/src/pages/Profile/TabAdvanced/NewCertificationModal.tsx b/src/pages/Profile/TabAdvanced/NewCertificationModal.tsx
@@ -70,8 +70,8 @@ export const NewCertificationModalFooter = () => {
   return (
     <div className="aq-text-right">
       <Button
-        type="primary"
-        htmlType="submit"
+        kind="primary"
+        type="submit"
         flat={true}
         form="newCertificationForm"
         disabled={false}

diff --git a/src/pages/Profile/TabAdvanced/index.tsx b/src/pages/Profile/TabAdvanced/index.tsx
@@ -105,8 +105,8 @@ const TabAdvanced = () => {
               ) : null}
               <CSSGrid min="50%" gutter="0" fill="true">
                 <HalfColumnButton
-                  type="primary"
-                  htmlType="submit"
+                  kind="primary"
+                  type="submit"
                   flat
                   disabled={
                     !formikProps.isValid ||

diff --git a/src/pages/Profile/TabBase/index.tsx b/src/pages/Profile/TabBase/index.tsx
@@ -338,9 +338,9 @@ const TabBase = () => {
                 <CSSGrid min="50%" gutter="0" fill="true">
                   <HalfColumnButton
                     className="aq-mb-3"
-                    type="primary"
+                    kind="primary"
                     size="block"
-                    htmlType="submit"
+                    type="submit"
                     id="signup-simple"
                     data-qa="submit-base-info-cta"
                     flat