@takaro/lib-components 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takaro/lib-components",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": false,
   "description": "Takaro UI is a simple and customizable component library to build React apps faster within the Takaro eco system",
   "license": "AGPL-3.0-or-later",

package/src/components/actions/Button/Button.test.tsx

@@ -3,6 +3,6 @@ import { expect, it } from 'vitest';
 import { render } from '../../../test/testUtils';
 
 it('Should render <Button/>', () => {
-  const { container } = render(<Button text="button text" />);
+  const { container } = render(<Button>button text</Button>);
   expect(container).toMatchSnapshot();
 });

package/src/components/actions/Button/index.tsx

@@ -1,4 +1,4 @@
-import { JSX, cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement } from 'react';
+import { JSX, cloneElement, forwardRef, MouseEvent as ReactMouseEvent, ReactElement, PropsWithChildren } from 'react';
 import { Spinner } from '../../../components';
 import { ButtonColor, Default, Outline, Clear, White } from './style';
 import { Size, Variant } from '../../../styled';
@@ -16,13 +16,11 @@ export interface ButtonProps {
   // TODO: clear should be renamed to text
   variant?: Variant | 'white' | 'clear';
   color?: ButtonColor | 'white';
-  text: string;
-
   /// When nesting forms a button can be linked to only fire the form with the given name.
   form?: string;
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
   {
     icon,
     iconPosition = 'left',
@@ -30,8 +28,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     type = 'button',
     isLoading = false,
     className,
+    children,
     form,
-    text,
     color = 'primary',
     disabled = false,
     fullWidth = false,
@@ -69,25 +67,25 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       case 'default':
         return (
           <Default {...props}>
-            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
           </Default>
         );
       case 'outline':
         return (
           <Outline {...props}>
-            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
           </Outline>
         );
       case 'clear':
         return (
           <Clear {...props}>
-            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
           </Clear>
         );
       case 'white':
         return (
           <White {...props}>
-            {iconPosition === 'left' && getIcon()} <span>{text}</span> {iconPosition === 'right' && getIcon()}
+            {iconPosition === 'left' && getIcon()} <span>{children}</span> {iconPosition === 'right' && getIcon()}
           </White>
         );
     }

package/src/components/charts/ZoomControls.tsx

@@ -40,7 +40,9 @@ export const ZoomControls: FC<ZoomControlsProps> = ({ zoom }) => {
         </Tooltip.Trigger>
         <Tooltip.Content>Zoom out</Tooltip.Content>
       </Tooltip>
-      <Button size="tiny" onClick={zoom.reset} text="Reset" />
+      <Button size="tiny" onClick={zoom.reset}>
+        Reset
+      </Button>
       {/*<Button size="tiny" onClick={zoom.center} text="Center" />*/}
     </Controls>
   );

package/src/components/data/Console/Console.tsx

@@ -78,8 +78,12 @@ export const Console: FC<ConsoleProps> = ({ listenerFactory, onExecuteCommand, s
   return (
     <Wrapper>
       <Header>
-        <Button onClick={() => setIsLiveModeEnabled(true)} text="Follow" disabled={isLiveModeEnabled} />
-        <Button onClick={() => setMessages([])} text="Clear" color="background" icon={<ClearIcon />} />
+        <Button onClick={() => setIsLiveModeEnabled(true)} disabled={isLiveModeEnabled}>
+          Follow
+        </Button>
+        <Button onClick={() => setMessages([])} color="background" icon={<ClearIcon />}>
+          Clear
+        </Button>
       </Header>
       <MessageContainer>
         <Autosizer>

package/src/components/data/Drawer/DrawerContent.tsx

@@ -149,8 +149,12 @@ export const DrawerContent = forwardRef<HTMLElement, HTMLProps<HTMLDivElement>>(
                       <h2>Your progress will be lost</h2>
                       <p>Are you sure you want to exit? Your progress will not be saved.</p>
                       <ButtonContainer>
-                        <Button text="Cancel" color="secondary" onClick={() => setShowConfirmDialog(false)} />
-                        <Button text="Discard changes" onClick={() => setOpen(false)} color="error" />
+                        <Button color="secondary" onClick={() => setShowConfirmDialog(false)}>
+                          Cancel
+                        </Button>
+                        <Button onClick={() => setOpen(false)} color="error">
+                          Discard changes
+                        </Button>
                       </ButtonContainer>
                     </CloseConfirmationContainer>
                   </CloseConfirmationWrapper>

package/src/components/data/InfiniteScroll/index.tsx

@@ -36,7 +36,9 @@ export const InfiniteScroll = forwardRef<HTMLElement, InfiniteScrollProps>(funct
           ref={ref}
           style={{ display: 'flex', height: '100%', width: '100%', justifyContent: 'center', alignItems: 'center' }}
         >
-          <Button text="Load more" ref={ref} onClick={handleOnClick} />
+          <Button ref={ref} onClick={handleOnClick}>
+            Load more
+          </Button>
         </div>
       )}
       {hasNextPage && isFetchingNextPage && (

package/src/components/data/Table/index.tsx

@@ -375,8 +375,9 @@ export function Table<DataType extends object>({
                             key={id + '-learn-more-button'}
                             variant="clear"
                             onClick={() => window.open('https://docs.takaro.io')}
-                            text="Learn more"
-                          />,
+                          >
+                            Learn more
+                          </Button>,
                         ]}
                       />
                     </div>

package/src/components/data/Table/subcomponents/Filter/index.tsx

@@ -195,7 +195,9 @@ export function Filter<DataType extends object>({ table }: FilterProps<DataType>
             })}
             <ButtonContainer justifyContent={fields.length > 0 ? 'space-between' : 'flex-end'}>
               {fields.length > 0 && (
-                <Button type="button" variant="clear" text="Clear filters" onClick={handleClearFilters} />
+                <Button type="button" variant="clear" onClick={handleClearFilters}>
+                  Clear filters
+                </Button>
               )}
               <FilterActions>
                 <Button
@@ -208,9 +210,10 @@ export function Filter<DataType extends object>({ table }: FilterProps<DataType>
                     })
                   }
                   variant="clear"
-                  text="Add filter"
-                />
-                <Button type="submit" text="Apply filters" />
+                >
+                  Add filter
+                </Button>
+                <Button type="submit">Apply filters</Button>
               </FilterActions>
             </ButtonContainer>
           </form>

package/src/components/data/Table/subcomponents/Pagination/PagePicker.tsx

@@ -88,8 +88,9 @@ export const PagePicker: FC<PagePickerProps> = ({
             variant="outline"
             onClick={() => setPageIndex(i - 1)}
             className={i === pageIndex + 1 ? 'active' : ''}
-            text={`${i}`}
-          />
+          >
+            {i}
+          </Button>
         ))}
       {showButtons && (
         <IconButton size="tiny" icon={<NextIcon />} onClick={nextPage} disabled={!hasNext} ariaLabel="next page" />

package/src/components/feedback/Alert/index.tsx

@@ -95,9 +95,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
               className="action"
             >
               {action && (
-                <Button size="tiny" variant="outline" onClick={handleExecute} text={action.text} color={variant} />
+                <Button size="tiny" variant="outline" onClick={handleExecute} color={variant}>
+                  {action.text}
+                </Button>
+              )}
+              {dismiss && (
+                <Button size="tiny" color="white" variant="outline" onClick={handleDismiss}>
+                  Dismiss
+                </Button>
               )}
-              {dismiss && <Button size="tiny" color="white" variant="outline" onClick={handleDismiss} text="Dismiss" />}
             </ButtonContainer>
           </Grid>
         </Container>

package/src/components/feedback/snacks/CookieConsent/index.tsx

@@ -98,8 +98,8 @@ export const CookieConsentSnack = forwardRef<HTMLDivElement, CustomContentProps>
         </strong>
       </div>
       <ButtonContainer>
-        <Button text="Decline" />
-        <Button text="Accept" type="submit" />
+        <Button>Decline</Button>
+        <Button type="submit">Accept</Button>
       </ButtonContainer>
     </Wrapper>
   );

package/src/components/inputs/Date/DatePicker/Generic.tsx

@@ -262,16 +262,18 @@ export const GenericDatePicker: FC<GenericDatePickerProps> = ({
                 fullWidth
                 variant="default"
                 color="secondary"
-                text="Cancel"
-              />
+              >
+                Cancel
+              </Button>
               <Button
                 fullWidth
                 onClick={() => {
                   handleOnChange(selectedDateTime);
                   setOpen(false);
                 }}
-                text="Select"
-              />
+              >
+                Select
+              </Button>
             </ButtonContainer>
           )}
         </ContentContainer>

package/src/components/inputs/Date/DateRangePicker/QuickSelect/index.tsx

@@ -124,7 +124,7 @@ export const QuickSelect: FC<QuickSelectProps> = ({ id }) => {
             </SelectField.OptionGroup>
           </SelectField>
         </InputsContainer>
-        <Button type="submit" text="Apply" />
+        <Button type="submit">Apply</Button>
       </StyledForm>
 
       <Divider fullWidth />

package/src/components/inputs/Date/subcomponents/RelativePicker/index.tsx

@@ -125,7 +125,7 @@ export const RelativePicker: FC<RelativePickerProps> = ({ onChange, id, timeDire
               </SelectField.OptionGroup>
             </SelectField>
           </InputsContainer>
-          <Button type="submit" text="Apply" />
+          <Button type="submit">Apply</Button>
         </StyledForm>
 
         <Divider fullWidth />

package/src/components/inputs/DurationField/Generic.tsx

@@ -181,12 +181,13 @@ export const GenericDurationField = forwardRef<HTMLDivElement, GenericDurationFi
                 form={formId}
                 type="submit"
                 fullWidth
-                text="Apply"
                 onClick={(e) => {
                   e.preventDefault();
                   handleSubmit(onSubmit)();
                 }}
-              />
+              >
+                Apply
+              </Button>
             </ButtonContainer>
           </form>
         </InnerContent>

package/src/components/inputs/layout/Description.tsx

@@ -15,12 +15,11 @@ interface DescriptionProps {
 }
 
 export const Description: FC<DescriptionProps> = ({ description, inputName, style }) => {
-  const urlPattern = /(https?:\/\/[^\s]+)/g;
-
+  const urlPattern = /(https?:\/\/[^\s)]+)/g;
   return (
     <StyledP id={`${inputName}-description`} style={style}>
       {description.split(urlPattern).map((part, i) => {
-        if (part.match(urlPattern)) {
+        if (i % 2 === 1) {
           return (
             <a key={`${i}`} href={part} target="_blank" rel="noopener noreferrer" className="underline">
               {part}

package/src/components/other/Plan/index.tsx

@@ -81,7 +81,7 @@ export const Plan: FC<PlanProps> = ({
                 </p>
               )}
               <a style={{ width: '100%' }} className="button" href={to} target="_blank" rel="noreferrer">
-                <Button fullWidth text={buttonText} />
+                <Button fullWidth>{buttonText}</Button>
               </a>
               <p></p>
             </div>