@takaro/lib-components 0.4.0 → 0.4.4

package/src/components/inputs/FileField/FileField.stories.tsx

@@ -56,10 +56,9 @@ export const OnSubmit: StoryFn<FileFieldProps> = (args) => {
 
   return (
     <>
-      <Alert
-        variant="warning"
-        text="Although the upload could be limited to a single file, the returned type will always be a FileList."
-      />
+      <Alert variant="warning">
+        Although the upload could be limited to a single file, the returned type will always be a FileList.
+      </Alert>
       <form onSubmit={handleSubmit(onSubmit)}>
         <FileField
           name="profileImage"

package/src/components/inputs/RadioGroup/RadioGroup.stories.tsx

@@ -74,7 +74,7 @@ export const OnSubmit: StoryFn<RadioGroupProps> = (args) => {
             </div>
           ))}
         </RadioGroup>
-        <Button text="submit" type="submit" />
+        <Button type="submit">submit</Button>
       </form>
       <div>Result: {result}</div>
     </>

package/src/components/inputs/Switch/Switch.stories.tsx

@@ -59,7 +59,7 @@ export const OnSubmit: StoryFn<SwitchProps> = (args) => {
           required={args.required}
           readOnly={args.readOnly}
         />
-        <Button type="submit" text="submit" />
+        <Button type="submit">submit</Button>
       </form>
       submitted value: {value ? 'true' : 'false'}
     </>

package/src/components/inputs/TagField/TagField.stories.tsx

@@ -48,7 +48,7 @@ export const OnSubmit: StoryFn<TagFieldProps> = (args) => {
       <pre>paste tester: apple,banana,jeroen</pre>
       <form onSubmit={handleSubmit(onSubmit)}>
         <TagField {...args} tagValidationSchema={beforeAddValidationSchema} control={control} name="tags" />
-        <Button type="submit" text="Submit" />
+        <Button type="submit">Submit</Button>
       </form>
       <pre>result: {result.join(', ')}</pre>
     </div>

package/src/components/inputs/TextAreaField/TextAreaField.stories.tsx

@@ -89,7 +89,9 @@ export const OnSubmit: StoryFn<TextAreaFieldProps> = (args) => {
           required={args.required}
           hint={args.hint}
         />
-        <Button type="submit" text="Submit form" size="large" />
+        <Button type="submit" size="large">
+          Submit form
+        </Button>
       </form>
       <pre>result: {result}</pre>
     </Wrapper>

package/src/components/inputs/TextField/TextField.stories.tsx

@@ -138,7 +138,9 @@ export const OnSubmit: StoryFn<TextFieldProps> = (args) => {
           disabled={args.disabled}
           description={args.description}
         />
-        <Button type="submit" text="Submit form" size="large" />
+        <Button type="submit" size="large">
+          Submit form
+        </Button>
       </form>
       <p>result: {result}</p>
     </Wrapper>

package/src/components/inputs/ValueConfirmationField/ValueConfirmationField.stories.tsx

@@ -25,7 +25,7 @@ export const OnChange: StoryFn<ValueConfirmationFieldProps> = (args) => {
             <strong>{args.value}</strong> to confirm
           </p>
           <ValueConfirmationField id={args.id} onValidChange={(valid) => setValid(valid)} value={args.value} />
-          <Button disabled={valid} text="Confirm" />
+          <Button disabled={valid}>Confirm</Button>
         </Dialog.Body>
       </Dialog.Content>
     </Dialog>

package/src/components/inputs/selects/SelectField/SelectField.stories.tsx

@@ -134,7 +134,7 @@ export const OnSubmit: StoryFn<SelectFieldProps> = (args) => {
             ))}
           </SelectField.OptionGroup>
         </SelectField>
-        <Button type="submit" text="Submit" />
+        <Button type="submit">Submit</Button>
       </form>
       <pre>result: {result}</pre>
     </>
@@ -200,7 +200,7 @@ export const MultiSelect: StoryFn<SelectFieldProps> = (args) => {
             ))}
           </SelectField.OptionGroup>
         </SelectField>
-        <Button type="submit" text="Submit" />
+        <Button type="submit">Submit</Button>
       </form>
       <pre>result: {result}</pre>
     </>

package/src/components/inputs/selects/SelectQueryField/SelectQueryField.stories.tsx

@@ -88,7 +88,7 @@ export const ServerSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
             ))}
           </SelectQueryField.OptionGroup>
         </SelectQueryField>
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       This is the submitted value:
       <div>{result}</div>
@@ -148,7 +148,7 @@ export const ClientSideSubmit: StoryFn<SelectQueryFieldProps> = (args) => {
             ))}
           </SelectQueryField.OptionGroup>
         </SelectQueryField>
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       The result returns the decade of the film:
       <div>{result}</div>
@@ -216,7 +216,7 @@ export const ClientSideMultiSelectSubmit: StoryFn<SelectQueryFieldProps> = (args
             ))}
           </SelectQueryField.OptionGroup>
         </SelectQueryField>
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       Selected films:
       <div>{result && result.join(',')}</div>

package/src/components/navigation/Steppers/SlimStepper/Stepper.stories.tsx

@@ -33,55 +33,55 @@ export const Numbers: StoryFn = () => {
         <SlimStepper.Step id="first" name="step 1">
           <StepBody>
             <p>Step 1</p>
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="second" name="step 2">
           <StepBody>
             <p>Step 2</p>
-            <Button onClick={decrementCurrentStep} text="previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="third" name="step 3">
           <StepBody>
             <p>Step 3</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="fourth" name="step 4">
           <StepBody>
             <p>Step 4</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="fifth" name="step 5">
           <StepBody>
             <p>Step 5</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="sixth" name="step 6">
           <StepBody>
             <p>Step 6</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="seventh" name="step 7">
           <StepBody>
             <p>Step 7</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </SlimStepper.Step>
         <SlimStepper.Step id="eight" name="step 8">
           <StepBody>
             <p>Step 8</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
           </StepBody>
         </SlimStepper.Step>
       </SlimStepper.Steps>

package/src/components/navigation/Steppers/Stepper/Stepper.stories.tsx

@@ -36,20 +36,20 @@ export const Numbers: StoryFn = () => {
         <Stepper.Step id="first" name="step 1">
           <StepBody>
             <p>Step 1</p>
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </Stepper.Step>
         <Stepper.Step id="second" name="step 2">
           <StepBody>
             <p>Step 2</p>
-            <Button onClick={decrementCurrentStep} text="previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </Stepper.Step>
         <Stepper.Step id="third" name="step 3">
           <StepBody>
             <p>Step 3</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
           </StepBody>
         </Stepper.Step>
       </Stepper.Steps>
@@ -66,20 +66,20 @@ export const Icons: StoryFn = () => {
         <Stepper.Step icon={<Bell size="24" />} id="first" name="Shopping">
           <StepBody>
             <p>Step 1</p>
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </Stepper.Step>
         <Stepper.Step icon={<Shipping size="24" />} id="second" name="Shipping">
           <StepBody>
             <p>Step 2</p>
-            <Button onClick={decrementCurrentStep} text="previous step" />
-            <Button onClick={incrementCurrentStep} text="Next step" />
+            <Button onClick={decrementCurrentStep}>previous step</Button>
+            <Button onClick={incrementCurrentStep}>Next step</Button>
           </StepBody>
         </Stepper.Step>
         <Stepper.Step icon={<Safety size="24" />} id="third" name="Payment">
           <StepBody>
             <p>Step 3</p>
-            <Button onClick={decrementCurrentStep} text="Previous step" />
+            <Button onClick={decrementCurrentStep}>Previous step</Button>
           </StepBody>
         </Stepper.Step>
       </Stepper.Steps>

package/src/components/other/ActionMenu/ActionMenu.stories.tsx

@@ -49,7 +49,6 @@ export const Default: StoryFn<ActionMenuProps> = () => {
               onClick={() => {
                 console.log('action 1 fired');
               }}
-              text="action 1"
             >
               action 1
             </Action>
@@ -57,7 +56,6 @@ export const Default: StoryFn<ActionMenuProps> = () => {
               onClick={() => {
                 console.log('action 2 fired');
               }}
-              text="action 2"
             >
               action 2
             </Action>
@@ -65,7 +63,6 @@ export const Default: StoryFn<ActionMenuProps> = () => {
               onClick={() => {
                 console.log('action 3 fired');
               }}
-              text="action 3"
             >
               action 3
             </Action>
@@ -73,7 +70,6 @@ export const Default: StoryFn<ActionMenuProps> = () => {
               onClick={() => {
                 console.log('action 4 fired');
               }}
-              text="action 4"
             >
               action 4
             </Action>

package/src/components/other/Empty/Empty.stories.tsx

@@ -10,7 +10,11 @@ export default {
   args: {
     header: 'Earn recurring revenue',
     description: 'Subscriptions allow you to grow recurring revenue by charging subscribers on a regular basis',
-    actions: [<Button key="new-project-button " size="medium" icon={<AddIcon />} text="New project" />],
+    actions: [
+      <Button key="new-project-button " size="medium" icon={<AddIcon />}>
+        New project
+      </Button>,
+    ],
     size: 'medium',
   },
 } as Meta<EmptyProps>;

package/src/components/other/PermissionsGuard/PermissionsGuard.stories.tsx

@@ -12,8 +12,9 @@ export default {
       <div>
         <Alert
           variant="warning"
-          text="It is unlikely you will use THIS permissionguard directly. There should be a specific permissionguard in web-* application"
-        />
+          text="It is unlikely you will use THIS permissionguard directly. There should be a specific permissionguard in web-*
+          application"
+        ></Alert>
         {story()}
       </div>
     ),