@entur/button 3.4.0 → 3.4.1-beta-automat.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/IconButton.d.ts +1 -1
- package/dist/button.cjs.js.map +1 -1
- package/dist/button.esm.js.map +1 -1
- package/dist/styles.css +107 -73
- package/package.json +6 -5
package/dist/IconButton.d.ts
CHANGED
package/dist/button.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.cjs.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n /** Farge og uttrykk på knappen */\n variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n * @default \"button\"\n */\n as?: string | React.ElementType;\n /**\n * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n */\n 'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n variant = 'primary',\n size = 'medium',\n loading,\n className,\n disabled = false,\n width = 'auto',\n 'aria-label': ariaLabel,\n ...rest\n }: ButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n const ariaLabelWhenLoading = childrenArray\n .filter(child => typeof child === 'string')\n .join(' ');\n\n const ariaLabelValue = () => {\n if (ariaLabel) return ariaLabel;\n if (loading) return ariaLabelWhenLoading;\n return undefined;\n };\n\n return (\n <Element\n className={cx(\n 'eds-button',\n {\n [`eds-button--variant-${variant}`]: variant,\n [`eds-button--size-${size}`]: size,\n 'eds-button--width-fluid': width === 'fluid',\n 'eds-button--loading': loading,\n 'eds-button--leading-icon': hasLeadingIcon,\n 'eds-button--trailing-icon': hasTrailingIcon,\n },\n className,\n )}\n ref={ref}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n aria-label={ariaLabelValue()}\n {...rest}\n >\n {loading ? (\n <LoadingDots className=\"eds-button__loading-dots\" />\n ) : (\n children\n )}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: PrimaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NegativeButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n <Button\n as={Element}\n {...props}\n ref={ref}\n variant=\"tertiary\"\n size=\"small\"\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n /** To eller flere Button-komponenter */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** HTML-elementet eller React-komponenten som lages\n * @default \"div\"\n */\n as?: string | React.ElementType;\n [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n as: Element = 'div',\n className,\n ...rest\n}) => {\n return (\n <Element className={classNames('eds-button-group', className)} {...rest} />\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n /** Beskrivende tekst for skjermlesere */\n 'aria-label': string;\n /** Ikon eller ikon-og-tekst */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Callback når knappen klikkes */\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Størrelse på knappen\n * @default \"medium\"\n */\n size?: 'medium' | 'small';\n [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n className,\n children,\n size = 'medium',\n ...rest\n}) => {\n return (\n <button\n className={classNames(\n 'eds-floating-button',\n { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n { 'eds-floating-button--small': size === 'small' },\n className,\n )}\n type=\"button\"\n {...rest}\n >\n {wrapStringsInSpans(children)}\n </button>\n );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n React.Children.map(children, child =>\n typeof child === 'string' ? <span>{child}</span> : child,\n );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\nexport type SquareButtonBaseProps = {\n /** Tekst og ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En type knapp */\n variant?: 'success' | 'secondary' | 'tertiary';\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n className,\n disabled = false,\n loading = false,\n variant = 'secondary',\n ...rest\n }: SquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <Element\n className={classNames(\n 'eds-square-button',\n `eds-square-button--${variant}`,\n {\n 'eds-square-button--loading': loading,\n },\n className,\n )}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n ref={ref}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (typeof child === 'string') {\n return <span className=\"eds-square-button__label\">{child}</span>;\n }\n return (\n <span className=\"eds-square-button__button\">\n {loading ? (\n <LoadingDots className=\"eds-square-button__loading-dots\" />\n ) : (\n child\n )}\n </span>\n );\n })}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n );\n },\n );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessSquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n );\n },\n );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n // @ts-expect-error TS error seems to stem from how the props are built up\n ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n /** Ikonet som du vil ha inne i knappen */\n children: React.ReactNode;\n /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n 'aria-label'?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** HTML-elementet eller React-komponenten som lager knappen\n * @default 'button'\n */\n as?: React.ElementType;\n /**Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n disabled = false,\n size = 'medium',\n as,\n loading,\n ...rest\n }: IconButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const IconWithAriaHidden = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n // @ts-expect-error aria-hidden does, in fact, exist\n return React.cloneElement(child, { 'aria-hidden': true });\n }\n return child;\n });\n\n const iconButtonElement = (\n <Element\n className={classNames(\n 'eds-icon-button',\n className,\n {\n 'eds-icon-button--disabled': disabled,\n },\n `eds-icon-button--size-${size}`,\n )}\n disabled={disabled}\n aria-disabled={disabled}\n aria-busy={loading}\n ref={ref}\n {...rest}\n >\n {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n </Element>\n );\n\n if (disabled) {\n return (\n <div className=\"eds-icon-button--disabled__wrapper\">\n {iconButtonElement}\n </div>\n );\n }\n return <>{iconButtonElement}</>;\n },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","React","jsx","cx","LoadingDots","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.cjs.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n /** Farge og uttrykk på knappen */\n variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n * @default \"button\"\n */\n as?: string | React.ElementType;\n /**\n * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n */\n 'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n variant = 'primary',\n size = 'medium',\n loading,\n className,\n disabled = false,\n width = 'auto',\n 'aria-label': ariaLabel,\n ...rest\n }: ButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n const ariaLabelWhenLoading = childrenArray\n .filter(child => typeof child === 'string')\n .join(' ');\n\n const ariaLabelValue = () => {\n if (ariaLabel) return ariaLabel;\n if (loading) return ariaLabelWhenLoading;\n return undefined;\n };\n\n return (\n <Element\n className={cx(\n 'eds-button',\n {\n [`eds-button--variant-${variant}`]: variant,\n [`eds-button--size-${size}`]: size,\n 'eds-button--width-fluid': width === 'fluid',\n 'eds-button--loading': loading,\n 'eds-button--leading-icon': hasLeadingIcon,\n 'eds-button--trailing-icon': hasTrailingIcon,\n },\n className,\n )}\n ref={ref}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n aria-label={ariaLabelValue()}\n {...rest}\n >\n {loading ? (\n <LoadingDots className=\"eds-button__loading-dots\" />\n ) : (\n children\n )}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: PrimaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NegativeButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n <Button\n as={Element}\n {...props}\n ref={ref}\n variant=\"tertiary\"\n size=\"small\"\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n /** To eller flere Button-komponenter */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** HTML-elementet eller React-komponenten som lages\n * @default \"div\"\n */\n as?: string | React.ElementType;\n [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n as: Element = 'div',\n className,\n ...rest\n}) => {\n return (\n <Element className={classNames('eds-button-group', className)} {...rest} />\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n /** Beskrivende tekst for skjermlesere */\n 'aria-label': string;\n /** Ikon eller ikon-og-tekst */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Callback når knappen klikkes */\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Størrelse på knappen\n * @default \"medium\"\n */\n size?: 'medium' | 'small';\n [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n className,\n children,\n size = 'medium',\n ...rest\n}) => {\n return (\n <button\n className={classNames(\n 'eds-floating-button',\n { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n { 'eds-floating-button--small': size === 'small' },\n className,\n )}\n type=\"button\"\n {...rest}\n >\n {wrapStringsInSpans(children)}\n </button>\n );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n React.Children.map(children, child =>\n typeof child === 'string' ? <span>{child}</span> : child,\n );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\nexport type SquareButtonBaseProps = {\n /** Tekst og ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En type knapp */\n variant?: 'success' | 'secondary' | 'tertiary';\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n className,\n disabled = false,\n loading = false,\n variant = 'secondary',\n ...rest\n }: SquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <Element\n className={classNames(\n 'eds-square-button',\n `eds-square-button--${variant}`,\n {\n 'eds-square-button--loading': loading,\n },\n className,\n )}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n ref={ref}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (typeof child === 'string') {\n return <span className=\"eds-square-button__label\">{child}</span>;\n }\n return (\n <span className=\"eds-square-button__button\">\n {loading ? (\n <LoadingDots className=\"eds-square-button__loading-dots\" />\n ) : (\n child\n )}\n </span>\n );\n })}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n );\n },\n );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessSquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n );\n },\n );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n // @ts-expect-error TS error seems to stem from how the props are built up\n ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n /** Ikonet som du vil ha inne i knappen */\n children: React.ReactNode;\n /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n 'aria-label'?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** HTML-elementet eller React-komponenten som lager knappen\n * @default 'button'\n */\n as?: React.ElementType;\n /**Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n disabled = false,\n size = 'medium',\n as,\n loading,\n ...rest\n }: IconButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const IconWithAriaHidden = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n // @ts-expect-error aria-hidden does, in fact, exist\n return React.cloneElement(child, { 'aria-hidden': true });\n }\n return child;\n });\n\n const iconButtonElement = (\n <Element\n className={classNames(\n 'eds-icon-button',\n className,\n {\n 'eds-icon-button--disabled': disabled,\n },\n `eds-icon-button--size-${size}`,\n )}\n disabled={disabled}\n aria-disabled={disabled}\n aria-busy={loading}\n ref={ref}\n {...rest}\n >\n {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n </Element>\n );\n\n if (disabled) {\n return (\n <div className=\"eds-icon-button--disabled__wrapper\">\n {iconButtonElement}\n </div>\n );\n }\n return <>{iconButtonElement}</>;\n },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","React","jsx","cx","LoadingDots","warnAboutMissingStyles"],"mappings":"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"}
|
package/dist/button.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.esm.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n /** Farge og uttrykk på knappen */\n variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n * @default \"button\"\n */\n as?: string | React.ElementType;\n /**\n * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n */\n 'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n variant = 'primary',\n size = 'medium',\n loading,\n className,\n disabled = false,\n width = 'auto',\n 'aria-label': ariaLabel,\n ...rest\n }: ButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n const ariaLabelWhenLoading = childrenArray\n .filter(child => typeof child === 'string')\n .join(' ');\n\n const ariaLabelValue = () => {\n if (ariaLabel) return ariaLabel;\n if (loading) return ariaLabelWhenLoading;\n return undefined;\n };\n\n return (\n <Element\n className={cx(\n 'eds-button',\n {\n [`eds-button--variant-${variant}`]: variant,\n [`eds-button--size-${size}`]: size,\n 'eds-button--width-fluid': width === 'fluid',\n 'eds-button--loading': loading,\n 'eds-button--leading-icon': hasLeadingIcon,\n 'eds-button--trailing-icon': hasTrailingIcon,\n },\n className,\n )}\n ref={ref}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n aria-label={ariaLabelValue()}\n {...rest}\n >\n {loading ? (\n <LoadingDots className=\"eds-button__loading-dots\" />\n ) : (\n children\n )}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: PrimaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NegativeButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n <Button\n as={Element}\n {...props}\n ref={ref}\n variant=\"tertiary\"\n size=\"small\"\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n /** To eller flere Button-komponenter */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** HTML-elementet eller React-komponenten som lages\n * @default \"div\"\n */\n as?: string | React.ElementType;\n [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n as: Element = 'div',\n className,\n ...rest\n}) => {\n return (\n <Element className={classNames('eds-button-group', className)} {...rest} />\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n /** Beskrivende tekst for skjermlesere */\n 'aria-label': string;\n /** Ikon eller ikon-og-tekst */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Callback når knappen klikkes */\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Størrelse på knappen\n * @default \"medium\"\n */\n size?: 'medium' | 'small';\n [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n className,\n children,\n size = 'medium',\n ...rest\n}) => {\n return (\n <button\n className={classNames(\n 'eds-floating-button',\n { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n { 'eds-floating-button--small': size === 'small' },\n className,\n )}\n type=\"button\"\n {...rest}\n >\n {wrapStringsInSpans(children)}\n </button>\n );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n React.Children.map(children, child =>\n typeof child === 'string' ? <span>{child}</span> : child,\n );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\nexport type SquareButtonBaseProps = {\n /** Tekst og ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En type knapp */\n variant?: 'success' | 'secondary' | 'tertiary';\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n className,\n disabled = false,\n loading = false,\n variant = 'secondary',\n ...rest\n }: SquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <Element\n className={classNames(\n 'eds-square-button',\n `eds-square-button--${variant}`,\n {\n 'eds-square-button--loading': loading,\n },\n className,\n )}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n ref={ref}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (typeof child === 'string') {\n return <span className=\"eds-square-button__label\">{child}</span>;\n }\n return (\n <span className=\"eds-square-button__button\">\n {loading ? (\n <LoadingDots className=\"eds-square-button__loading-dots\" />\n ) : (\n child\n )}\n </span>\n );\n })}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n );\n },\n );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessSquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n );\n },\n );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n // @ts-expect-error TS error seems to stem from how the props are built up\n ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n /** Ikonet som du vil ha inne i knappen */\n children: React.ReactNode;\n /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n 'aria-label'?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** HTML-elementet eller React-komponenten som lager knappen\n * @default 'button'\n */\n as?: React.ElementType;\n /**Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n disabled = false,\n size = 'medium',\n as,\n loading,\n ...rest\n }: IconButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const IconWithAriaHidden = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n // @ts-expect-error aria-hidden does, in fact, exist\n return React.cloneElement(child, { 'aria-hidden': true });\n }\n return child;\n });\n\n const iconButtonElement = (\n <Element\n className={classNames(\n 'eds-icon-button',\n className,\n {\n 'eds-icon-button--disabled': disabled,\n },\n `eds-icon-button--size-${size}`,\n )}\n disabled={disabled}\n aria-disabled={disabled}\n aria-busy={loading}\n ref={ref}\n {...rest}\n >\n {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n </Element>\n );\n\n if (disabled) {\n return (\n <div className=\"eds-icon-button--disabled__wrapper\">\n {iconButtonElement}\n </div>\n );\n }\n return <>{iconButtonElement}</>;\n },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","cx","React"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.esm.js","sources":["../src/Button.tsx","../src/PrimaryButton.tsx","../src/SecondaryButton.tsx","../src/SuccessButton.tsx","../src/NegativeButton.tsx","../src/TertiaryButton.tsx","../src/ButtonGroup.tsx","../src/FloatingButton.tsx","../src/SquareButton.tsx","../src/SecondarySquareButton.tsx","../src/SuccessSquareButton.tsx","../src/TertiarySquareButton.tsx","../src/IconButton.tsx","../src/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cx from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './Button.scss';\n\n/** @deprecated use variant=\"secondary\" size=\"small\" instead */\nconst tertiary = 'tertiary';\n\ntype ButtonBaseProps = {\n /** Farge og uttrykk på knappen */\n variant: 'primary' | 'secondary' | 'success' | 'negative' | typeof tertiary;\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n /** Et HTML-element eller en React-komponent som komponenten tar utgangspunkt i for å lage denne knappevarianten\n * @default \"button\"\n */\n as?: string | React.ElementType;\n /**\n * Tekst som leses opp på skjermleser (nødvendig når knappetekst mangler)\n */\n 'aria-label'?: string;\n};\n\nconst defaultElement = 'button';\n\nexport type ButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ButtonBaseProps>;\n\nexport type ButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const Button: ButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n variant = 'primary',\n size = 'medium',\n loading,\n className,\n disabled = false,\n width = 'auto',\n 'aria-label': ariaLabel,\n ...rest\n }: ButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n const ariaLabelWhenLoading = childrenArray\n .filter(child => typeof child === 'string')\n .join(' ');\n\n const ariaLabelValue = () => {\n if (ariaLabel) return ariaLabel;\n if (loading) return ariaLabelWhenLoading;\n return undefined;\n };\n\n return (\n <Element\n className={cx(\n 'eds-button',\n {\n [`eds-button--variant-${variant}`]: variant,\n [`eds-button--size-${size}`]: size,\n 'eds-button--width-fluid': width === 'fluid',\n 'eds-button--loading': loading,\n 'eds-button--leading-icon': hasLeadingIcon,\n 'eds-button--trailing-icon': hasTrailingIcon,\n },\n className,\n )}\n ref={ref}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n aria-label={ariaLabelValue()}\n {...rest}\n >\n {loading ? (\n <LoadingDots className=\"eds-button__loading-dots\" />\n ) : (\n children\n )}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type PrimaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type PrimaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, PrimaryButtonBaseProps>;\n\nexport type PrimaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: PrimaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const PrimaryButton: PrimaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: PrimaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"primary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SecondaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SecondaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondaryButtonBaseProps>;\n\nexport type SecondaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondaryButton: SecondaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"secondary\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type SuccessButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type SuccessButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessButtonBaseProps>;\n\nexport type SuccessButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessButton: SuccessButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"success\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type NegativeButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type NegativeButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NegativeButtonBaseProps>;\n\nexport type NegativeButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NegativeButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const NegativeButton: NegativeButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NegativeButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BaseButtonProps\n return <Button as={Element} {...props} ref={ref} variant=\"negative\" />;\n },\n);\n","import React from 'react';\nimport { Button } from './Button';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type TertiaryButtonBaseProps = {\n /** Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Bredden på knappen.\n * @default 'auto'\n */\n width?: 'fluid' | 'auto';\n /** Innholdet i knappen */\n children: React.ReactNode;\n};\n\nexport type TertiaryButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiaryButtonBaseProps>;\n\nexport type TertiaryButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiaryButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\n/** @deprecated use SecondaryButton size=\"small\" instead */\nexport const TertiaryButton: TertiaryButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiaryButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n <Button\n as={Element}\n {...props}\n ref={ref}\n variant=\"tertiary\"\n size=\"small\"\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './ButtonGroup.scss';\n\nexport type ButtonGroupProps = {\n /** To eller flere Button-komponenter */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** HTML-elementet eller React-komponenten som lages\n * @default \"div\"\n */\n as?: string | React.ElementType;\n [key: string]: any;\n};\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n as: Element = 'div',\n className,\n ...rest\n}) => {\n return (\n <Element className={classNames('eds-button-group', className)} {...rest} />\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport './FloatingButton.scss';\n\nexport type FloatingButtonProps = {\n /** Beskrivende tekst for skjermlesere */\n 'aria-label': string;\n /** Ikon eller ikon-og-tekst */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Callback når knappen klikkes */\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n /** Størrelse på knappen\n * @default \"medium\"\n */\n size?: 'medium' | 'small';\n [key: string]: any;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const FloatingButton: React.FC<FloatingButtonProps> = ({\n className,\n children,\n size = 'medium',\n ...rest\n}) => {\n return (\n <button\n className={classNames(\n 'eds-floating-button',\n { 'eds-floating-button--extended': React.Children.count(children) > 1 },\n { 'eds-floating-button--small': size === 'small' },\n className,\n )}\n type=\"button\"\n {...rest}\n >\n {wrapStringsInSpans(children)}\n </button>\n );\n};\n\nconst wrapStringsInSpans = (children: React.ReactNode) =>\n React.Children.map(children, child =>\n typeof child === 'string' ? <span>{child}</span> : child,\n );\n","import * as React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './SquareButton.scss';\n\nexport type SquareButtonBaseProps = {\n /** Tekst og ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En type knapp */\n variant?: 'success' | 'secondary' | 'tertiary';\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type SquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SquareButtonBaseProps>;\n\nexport type SquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SquareButton: SquareButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n as,\n children,\n className,\n disabled = false,\n loading = false,\n variant = 'secondary',\n ...rest\n }: SquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <Element\n className={classNames(\n 'eds-square-button',\n `eds-square-button--${variant}`,\n {\n 'eds-square-button--loading': loading,\n },\n className,\n )}\n aria-busy={loading}\n disabled={disabled}\n aria-disabled={disabled}\n ref={ref}\n {...rest}\n >\n {React.Children.map(children, child => {\n if (typeof child === 'string') {\n return <span className=\"eds-square-button__label\">{child}</span>;\n }\n return (\n <span className=\"eds-square-button__button\">\n {loading ? (\n <LoadingDots className=\"eds-square-button__loading-dots\" />\n ) : (\n child\n )}\n </span>\n );\n })}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SecondarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SecondarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SecondarySquareButtonBaseProps>;\n\nexport type SecondarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SecondarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SecondarySquareButton: SecondarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SecondarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"secondary\" />\n );\n },\n );\n","import React from 'react';\nimport { SquareButton } from './SquareButton';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\ntype SuccessSquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nexport type SuccessSquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, SuccessSquareButtonBaseProps>;\n\nexport type SuccessSquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: SuccessSquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const SuccessSquareButton: SuccessSquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: SuccessSquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = props.as || defaultElement;\n return (\n // @ts-expect-error type error due to props not being BaseButtonProps\n <SquareButton as={Element} ref={ref} {...props} variant=\"success\" />\n );\n },\n );\n","import React from 'react';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { SquareButton } from './SquareButton';\n\ntype TertiarySquareButtonBaseProps = {\n /** Tekst og ikon, ikon og tekst, eller bare ikon */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n /** DOM-elementet knappen rendres som */\n as?: string | React.ElementType;\n};\n\nexport type TertiarySquareButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, TertiarySquareButtonBaseProps>;\n\nexport type TertiarySquareButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: TertiarySquareButtonProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'button';\n\nexport const TertiarySquareButton: TertiarySquareButtonComponent =\n React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: TertiarySquareButtonProps<T>,\n ref: PolymorphicRef<T>,\n // @ts-expect-error TS error seems to stem from how the props are built up\n ) => <SquareButton ref={ref} {...props} variant=\"tertiary\" />,\n );\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { LoadingDots } from '@entur/loader';\nimport './IconButton.scss';\n\nexport type IconButtonBaseProps = {\n /** Ikonet som du vil ha inne i knappen */\n children: React.ReactNode;\n /** Tekst som forklarer knappens handling. MÅ være satt hvis du ikke har en forklarende tooltip på knappen */\n 'aria-label'?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Deaktivering av knappen\n * @default false\n */\n disabled?: boolean;\n /** HTML-elementet eller React-komponenten som lager knappen\n * @default 'button'\n */\n as?: React.ElementType;\n /**Størrelsen på knappen\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe\n * @default false\n */\n loading?: boolean;\n};\n\nconst defaultElement = 'button';\n\nexport type IconButtonProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, IconButtonBaseProps>;\n\nexport type IconButtonComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: IconButtonProps<T>,\n) => React.ReactElement | null;\n\nexport const IconButton: IconButtonComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n disabled = false,\n size = 'medium',\n as,\n loading,\n ...rest\n }: IconButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const IconWithAriaHidden = React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n // @ts-expect-error aria-hidden does, in fact, exist\n return React.cloneElement(child, { 'aria-hidden': true });\n }\n return child;\n });\n\n const iconButtonElement = (\n <Element\n className={classNames(\n 'eds-icon-button',\n className,\n {\n 'eds-icon-button--disabled': disabled,\n },\n `eds-icon-button--size-${size}`,\n )}\n disabled={disabled}\n aria-disabled={disabled}\n aria-busy={loading}\n ref={ref}\n {...rest}\n >\n {loading ? <LoadingDots /> : <>{IconWithAriaHidden}</>}\n </Element>\n );\n\n if (disabled) {\n return (\n <div className=\"eds-icon-button--disabled__wrapper\">\n {iconButtonElement}\n </div>\n );\n }\n return <>{iconButtonElement}</>;\n },\n);\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('button');\n\nexport * from './Button';\nexport * from './PrimaryButton';\nexport * from './SecondaryButton';\nexport * from './SuccessButton';\nexport * from './NegativeButton';\nexport * from './TertiaryButton';\nexport * from './ButtonGroup';\nexport * from './FloatingButton';\nexport * from './SecondarySquareButton';\nexport * from './SuccessSquareButton';\nexport * from './TertiarySquareButton';\nexport * from './IconButton';\n"],"names":["defaultElement","cx","React"],"mappings":";;;;;;AA0CA,MAAMA,mBAAiB;AAWhB,MAAM,SAA0B,MAAM;AAAA,EAC3C,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAMA;AACzC,UAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,iBACJ,cAAc,SAAS,KAAK,OAAO,cAAc,CAAC,MAAM;AAC1D,UAAM,kBACJ,cAAc,SAAS,KACvB,OAAO,cAAc,cAAc,SAAS,CAAC,MAAM;AAErD,UAAM,uBAAuB,cAC1B,OAAO,CAAA,UAAS,OAAO,UAAU,QAAQ,EACzC,KAAK,GAAG;AAEX,UAAM,iBAAiB,MAAM;AAC3B,UAAI,UAAW,QAAO;AACtB,UAAI,QAAS,QAAO;AACpB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAAA,UACT;AAAA,UACA;AAAA,YACE,CAAC,uBAAuB,OAAO,EAAE,GAAG;AAAA,YACpC,CAAC,oBAAoB,IAAI,EAAE,GAAG;AAAA,YAC9B,2BAA2B,UAAU;AAAA,YACrC,uBAAuB;AAAA,YACvB,4BAA4B;AAAA,YAC5B,6BAA6B;AAAA,UAAA;AAAA,UAE/B;AAAA,QAAA;AAAA,QAEF;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf,cAAY,eAAA;AAAA,QACX,GAAG;AAAA,QAEH,UAAA,UACC,oBAAC,aAAA,EAAY,WAAU,4BAA2B,IAElD;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AChFA,MAAMD,mBAAiB;AAEhB,MAAM,gBAAwCE,eAAM;AAAA,EACzD,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,WAAU;AAAA,EACrE;AACF;ACXA,MAAMA,mBAAiB;AAEhB,MAAM,kBAA4CE,eAAM;AAAA,EAC7D,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,aAAY;AAAA,EACvE;AACF;ACXA,MAAMA,mBAAiB;AAEhB,MAAM,gBAAwCE,eAAM;AAAA,EACzD,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,WAAU;AAAA,EACrE;AACF;ACXA,MAAMA,mBAAiB;AAEhB,MAAM,iBAA0CE,eAAM;AAAA,EAC3D,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAE/C,WAAO,oBAAC,UAAO,IAAI,SAAU,GAAG,OAAO,KAAU,SAAQ,YAAW;AAAA,EACtE;AACF;ACXA,MAAMA,mBAAiB;AAGhB,MAAM,iBAA0CE,eAAM;AAAA,EAC3D,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAC/C,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QACH,GAAG;AAAA,QACJ;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF;ACvCO,MAAM,cAA0C,CAAC;AAAA,EACtD,IAAI,UAAU;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,WAAQ,WAAW,WAAW,oBAAoB,SAAS,GAAI,GAAG,MAAM;AAE7E;ACJO,MAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,EAAE,iCAAiCE,eAAM,SAAS,MAAM,QAAQ,IAAI,EAAA;AAAA,QACpE,EAAE,8BAA8B,SAAS,QAAA;AAAA,QACzC;AAAA,MAAA;AAAA,MAEF,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH,6BAAmB,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,MAAM,qBAAqB,CAAC,aAC1BA,eAAM,SAAS;AAAA,EAAI;AAAA,EAAU,WAC3B,OAAO,UAAU,WAAW,oBAAC,QAAA,EAAM,iBAAM,IAAU;AACrD;ACXF,MAAMF,mBAAiB;AAEhB,MAAM,eAAsC,MAAM;AAAA,EACvD,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAMA;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,OAAO;AAAA,UAC7B;AAAA,YACE,8BAA8B;AAAA,UAAA;AAAA,UAEhC;AAAA,QAAA;AAAA,QAEF,aAAW;AAAA,QACX;AAAA,QACA,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH,UAAA,MAAM,SAAS,IAAI,UAAU,CAAA,UAAS;AACrC,cAAI,OAAO,UAAU,UAAU;AAC7B,mBAAO,oBAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,OAAM;AAAA,UAC3D;AACA,iBACE,oBAAC,QAAA,EAAK,WAAU,6BACb,UAAA,8BACE,aAAA,EAAY,WAAU,kCAAA,CAAkC,IAEzD,MAAA,CAEJ;AAAA,QAEJ,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;ACvDA,MAAMA,mBAAiB;AAEhB,MAAM,wBACXE,eAAM;AAAA,EACJ,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAC/C;AAAA;AAAA,MAEE,oBAAC,gBAAa,IAAI,SAAS,KAAW,GAAG,OAAO,SAAQ,YAAA,CAAY;AAAA;AAAA,EAExE;AACF;ACdF,MAAMA,mBAAiB;AAEhB,MAAM,sBACXE,eAAM;AAAA,EACJ,CACE,OACA,QACG;AACH,UAAM,UAA6B,MAAM,MAAMF;AAC/C;AAAA;AAAA,MAEE,oBAAC,gBAAa,IAAI,SAAS,KAAW,GAAG,OAAO,SAAQ,UAAA,CAAU;AAAA;AAAA,EAEtE;AACF;ACVK,MAAM,uBACXE,eAAM;AAAA,EACJ,CACE,OACA,QAEG,oBAAC,gBAAa,KAAW,GAAG,OAAO,SAAQ,WAAA,CAAW;AAC7D;ACRF,MAAM,iBAAiB;AAWhB,MAAM,aAAkCA,eAAM;AAAA,EACnD,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAM;AAEzC,UAAM,qBAAqBA,eAAM,SAAS,IAAI,UAAU,CAAA,UAAS;AAC/D,UAAIA,eAAM,eAAe,KAAK,GAAG;AAE/B,eAAOA,eAAM,aAAa,OAAO,EAAE,eAAe,MAAM;AAAA,MAC1D;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,oBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,YACE,6BAA6B;AAAA,UAAA;AAAA,UAE/B,yBAAyB,IAAI;AAAA,QAAA;AAAA,QAE/B;AAAA,QACA,iBAAe;AAAA,QACf,aAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH,UAAA,UAAU,oBAAC,aAAA,CAAA,CAAY,oCAAQ,UAAA,mBAAA,CAAmB;AAAA,MAAA;AAAA,IAAA;AAIvD,QAAI,UAAU;AACZ,aACE,oBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA,mBACH;AAAA,IAEJ;AACA,2CAAU,UAAA,kBAAA,CAAkB;AAAA,EAC9B;AACF;AC3FA,uBAAuB,QAAQ;"}
|
package/dist/styles.css
CHANGED
|
@@ -445,38 +445,15 @@
|
|
|
445
445
|
|
|
446
446
|
:root{
|
|
447
447
|
--eds-button:1;
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
display:-webkit-flex;
|
|
451
|
-
display:-moz-box;
|
|
452
|
-
display:flex;
|
|
453
|
-
-webkit-box-align:center;
|
|
454
|
-
-webkit-align-items:center;
|
|
455
|
-
-moz-box-align:center;
|
|
456
|
-
align-items:center;
|
|
457
|
-
-webkit-box-pack:center;
|
|
458
|
-
-webkit-justify-content:center;
|
|
459
|
-
-moz-box-pack:center;
|
|
460
|
-
justify-content:center;
|
|
461
|
-
}
|
|
462
|
-
a.eds-button .eds-icon{
|
|
463
|
-
position:static;
|
|
464
|
-
position:initial;
|
|
465
|
-
}
|
|
466
|
-
|
|
467
|
-
.eds-button{
|
|
468
|
-
min-width:9.5rem;
|
|
448
|
+
}.eds-button{
|
|
449
|
+
min-width:var(--size-30);
|
|
469
450
|
width:-webkit-max-content;
|
|
470
451
|
width:-moz-max-content;
|
|
471
452
|
width:max-content;
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
-webkit-border-radius:0.25rem;
|
|
477
|
-
-moz-border-radius:0.25rem;
|
|
478
|
-
border-radius:0.25rem;
|
|
479
|
-
font-size:inherit;
|
|
453
|
+
height:var(--components-button-height-horizontalcontent-medium);
|
|
454
|
+
-webkit-border-radius:var(--components-button-radius-medium);
|
|
455
|
+
-moz-border-radius:var(--components-button-radius-medium);
|
|
456
|
+
border-radius:var(--components-button-radius-medium);
|
|
480
457
|
cursor:pointer;
|
|
481
458
|
display:inline-block;
|
|
482
459
|
-webkit-appearance:none;
|
|
@@ -484,16 +461,20 @@ a.eds-button .eds-icon{
|
|
|
484
461
|
appearance:none;
|
|
485
462
|
-webkit-text-decoration:none;
|
|
486
463
|
text-decoration:none;
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
464
|
+
overflow-x:hidden;
|
|
465
|
+
-o-text-overflow:ellipsis;
|
|
466
|
+
text-overflow:ellipsis;
|
|
467
|
+
white-space:nowrap;
|
|
468
|
+
padding-inline:var(--components-button-inlinepadding-medium);
|
|
469
|
+
font-size:var(--font-size-body-m);
|
|
470
|
+
line-height:var(--font-line-height-body-m);
|
|
471
|
+
font-weight:var(--font-weight-body);
|
|
491
472
|
text-align:center;
|
|
492
473
|
font-family:inherit;
|
|
493
474
|
position:relative;
|
|
494
|
-
vertical-align:
|
|
475
|
+
vertical-align:middle;
|
|
495
476
|
background-color:var(--eds-button-background);
|
|
496
|
-
border:
|
|
477
|
+
border:var(--components-button-border-medium) solid var(--eds-button-border);
|
|
497
478
|
color:var(--eds-button-text);
|
|
498
479
|
}
|
|
499
480
|
.eds-button:hover{
|
|
@@ -518,25 +499,47 @@ a.eds-button .eds-icon{
|
|
|
518
499
|
.eds-button > .eds-button__loading-dots .eds-loading-dots__dot{
|
|
519
500
|
background:var(--eds-button-text);
|
|
520
501
|
}
|
|
521
|
-
.eds-button .eds-icon{
|
|
522
|
-
|
|
523
|
-
|
|
502
|
+
.eds-button :where(.eds-icon){
|
|
503
|
+
vertical-align:middle;
|
|
504
|
+
margin-bottom:0.1em;
|
|
524
505
|
}
|
|
525
|
-
.eds-button--
|
|
526
|
-
margin-
|
|
506
|
+
.eds-button--trailing-icon :where(.eds-icon:last-child){
|
|
507
|
+
margin-left:var(--components-button-gap-medium);
|
|
527
508
|
}
|
|
528
|
-
.eds-button--trailing-icon .eds-icon{
|
|
529
|
-
margin-left:
|
|
509
|
+
.eds-button--trailing-icon:where(.eds-button--size-small .eds-icon:last-child){
|
|
510
|
+
margin-left:var(--components-button-gap-small);
|
|
511
|
+
}
|
|
512
|
+
.eds-button--trailing-icon:where(.eds-button--size-large .eds-icon:last-child){
|
|
513
|
+
margin-left:var(--components-button-gap-large);
|
|
514
|
+
}
|
|
515
|
+
.eds-button--leading-icon :where(.eds-icon:first-child){
|
|
516
|
+
margin-right:var(--components-button-gap-medium);
|
|
517
|
+
}
|
|
518
|
+
.eds-button--leading-icon:where(.eds-button--size-small .eds-icon:first-child){
|
|
519
|
+
margin-right:var(--components-button-gap-small);
|
|
520
|
+
}
|
|
521
|
+
.eds-button--leading-icon:where(.eds-button--size-large .eds-icon:first-child){
|
|
522
|
+
margin-right:var(--components-button-gap-large);
|
|
530
523
|
}
|
|
531
524
|
.eds-button--size-small{
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
525
|
+
height:var(--components-button-height-horizontalcontent-small);
|
|
526
|
+
-webkit-border-radius:var(--components-button-radius-small);
|
|
527
|
+
-moz-border-radius:var(--components-button-radius-small);
|
|
528
|
+
border-radius:var(--components-button-radius-small);
|
|
529
|
+
padding-inline:var(--components-button-inlinepadding-small);
|
|
530
|
+
font-size:var(--font-size-body-s);
|
|
531
|
+
line-height:var(--font-line-height-body-s);
|
|
532
|
+
border:var(--components-button-border-small) solid var(--eds-button-border);
|
|
536
533
|
}
|
|
537
534
|
.eds-button--size-large{
|
|
538
|
-
|
|
539
|
-
|
|
535
|
+
height:var(--components-button-height-horizontalcontent-large);
|
|
536
|
+
-webkit-border-radius:var(--components-button-radius-large);
|
|
537
|
+
-moz-border-radius:var(--components-button-radius-large);
|
|
538
|
+
border-radius:var(--components-button-radius-large);
|
|
539
|
+
padding-inline:var(--components-button-inlinepadding-large);
|
|
540
|
+
font-size:var(--font-size-body-xl);
|
|
541
|
+
line-height:var(--font-line-height-body-xl);
|
|
542
|
+
border:var(--components-button-border-large) solid var(--eds-button-border);
|
|
540
543
|
}
|
|
541
544
|
.eds-button--width-fluid{
|
|
542
545
|
width:100%;
|
|
@@ -631,12 +634,6 @@ a.eds-button .eds-icon{
|
|
|
631
634
|
.eds-button--variant-tertiary:active{
|
|
632
635
|
background-color:#aeb7e2;
|
|
633
636
|
}
|
|
634
|
-
.eds-button--variant-tertiary.eds-button--leading-icon .eds-icon{
|
|
635
|
-
margin-right:0.5rem;
|
|
636
|
-
}
|
|
637
|
-
.eds-button--variant-tertiary.eds-button--trailing-icon .eds-icon{
|
|
638
|
-
margin-left:0.5rem;
|
|
639
|
-
}
|
|
640
637
|
.eds-contrast .eds-button--variant-tertiary{
|
|
641
638
|
background-color:transparent;
|
|
642
639
|
color:#ffffff;
|
|
@@ -668,6 +665,24 @@ a.eds-button .eds-icon{
|
|
|
668
665
|
background-color:var(--components-button-disabled-contrast-fill);
|
|
669
666
|
color:var(--components-button-disabled-contrast-text-disabled);
|
|
670
667
|
border-color:transparent;
|
|
668
|
+
}
|
|
669
|
+
.eds-button:where(a){
|
|
670
|
+
display:-webkit-box;
|
|
671
|
+
display:-webkit-flex;
|
|
672
|
+
display:-moz-box;
|
|
673
|
+
display:flex;
|
|
674
|
+
-webkit-box-align:center;
|
|
675
|
+
-webkit-align-items:center;
|
|
676
|
+
-moz-box-align:center;
|
|
677
|
+
align-items:center;
|
|
678
|
+
-webkit-box-pack:center;
|
|
679
|
+
-webkit-justify-content:center;
|
|
680
|
+
-moz-box-pack:center;
|
|
681
|
+
justify-content:center;
|
|
682
|
+
}
|
|
683
|
+
.eds-button:where(a) :where(.eds-icon){
|
|
684
|
+
position:static;
|
|
685
|
+
position:initial;
|
|
671
686
|
}.eds-button-group .eds-button{
|
|
672
687
|
margin-right:0.75rem;
|
|
673
688
|
margin-bottom:0.75rem;
|
|
@@ -952,27 +967,31 @@ a.eds-button .eds-icon{
|
|
|
952
967
|
width:2rem;
|
|
953
968
|
border-width:0.0625rem;
|
|
954
969
|
}.eds-icon-button{
|
|
955
|
-
|
|
956
|
-
-webkit-
|
|
957
|
-
-moz-
|
|
958
|
-
|
|
970
|
+
-webkit-box-align:center;
|
|
971
|
+
-webkit-align-items:center;
|
|
972
|
+
-moz-box-align:center;
|
|
973
|
+
align-items:center;
|
|
959
974
|
background:none;
|
|
975
|
+
-webkit-border-radius:var(--components-button-radius-medium);
|
|
976
|
+
-moz-border-radius:var(--components-button-radius-medium);
|
|
977
|
+
border-radius:var(--components-button-radius-medium);
|
|
978
|
+
border:var(--components-button-border-medium) solid transparent;
|
|
960
979
|
color:var(--components-button-iconbutton-standard-text);
|
|
961
980
|
cursor:pointer;
|
|
962
|
-
display:-webkit-box;
|
|
963
|
-
display:-webkit-flex;
|
|
964
|
-
display:-moz-box;
|
|
965
|
-
display:flex;
|
|
981
|
+
display:-webkit-inline-box;
|
|
982
|
+
display:-webkit-inline-flex;
|
|
983
|
+
display:-moz-inline-box;
|
|
984
|
+
display:inline-flex;
|
|
985
|
+
font-size:var(--font-size-body-m);
|
|
986
|
+
font-weight:var(--font-weight-body);
|
|
987
|
+
gap:var(--components-button-gap-medium);
|
|
988
|
+
height:var(--components-button-height-horizontalcontent-medium);
|
|
966
989
|
-webkit-box-pack:center;
|
|
967
990
|
-webkit-justify-content:center;
|
|
968
991
|
-moz-box-pack:center;
|
|
969
992
|
justify-content:center;
|
|
970
|
-
-
|
|
971
|
-
-
|
|
972
|
-
-moz-box-align:center;
|
|
973
|
-
align-items:center;
|
|
974
|
-
font-size:1rem;
|
|
975
|
-
padding:0.5rem;
|
|
993
|
+
line-height:var(--font-line-height-body-m);
|
|
994
|
+
padding-inline:var(--components-button-inlinepadding-medium);
|
|
976
995
|
}
|
|
977
996
|
.eds-contrast .eds-icon-button{
|
|
978
997
|
color:var(--components-button-iconbutton-contrast-text);
|
|
@@ -980,11 +999,6 @@ a.eds-button .eds-icon{
|
|
|
980
999
|
.eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot{
|
|
981
1000
|
background-color:var(--components-button-iconbutton-contrast-icon);
|
|
982
1001
|
}
|
|
983
|
-
.eds-icon-button--size-small{
|
|
984
|
-
height:1.5rem;
|
|
985
|
-
width:1.5rem;
|
|
986
|
-
padding:0;
|
|
987
|
-
}
|
|
988
1002
|
.eds-icon-button:hover{
|
|
989
1003
|
background-color:var(--components-button-iconbutton-standard-hover);
|
|
990
1004
|
}
|
|
@@ -1016,4 +1030,24 @@ a.eds-button .eds-icon{
|
|
|
1016
1030
|
width:-webkit-fit-content;
|
|
1017
1031
|
width:-moz-fit-content;
|
|
1018
1032
|
width:fit-content;
|
|
1033
|
+
}
|
|
1034
|
+
.eds-icon-button--size-small{
|
|
1035
|
+
-webkit-border-radius:var(--components-button-radius-small);
|
|
1036
|
+
-moz-border-radius:var(--components-button-radius-small);
|
|
1037
|
+
border-radius:var(--components-button-radius-small);
|
|
1038
|
+
border:var(--components-button-border-small) solid var(--eds-button-border);
|
|
1039
|
+
font-size:var(--font-size-body-s);
|
|
1040
|
+
height:var(--components-button-height-horizontalcontent-small);
|
|
1041
|
+
line-height:var(--font-line-height-body-s);
|
|
1042
|
+
padding-inline:var(--components-button-inlinepadding-small);
|
|
1043
|
+
}
|
|
1044
|
+
.eds-icon-button--size-large{
|
|
1045
|
+
-webkit-border-radius:var(--components-button-radius-large);
|
|
1046
|
+
-moz-border-radius:var(--components-button-radius-large);
|
|
1047
|
+
border-radius:var(--components-button-radius-large);
|
|
1048
|
+
border:var(--components-button-border-large) solid var(--eds-button-border);
|
|
1049
|
+
font-size:var(--font-size-body-xl);
|
|
1050
|
+
height:var(--components-button-height-horizontalcontent-large);
|
|
1051
|
+
line-height:var(--font-line-height-body-xl);
|
|
1052
|
+
padding-inline:var(--components-button-inlinepadding-large);
|
|
1019
1053
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/button",
|
|
3
|
-
"version": "3.4.0",
|
|
3
|
+
"version": "3.4.1-beta-automat.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/button.cjs.js",
|
|
6
6
|
"module": "dist/button.esm.js",
|
|
@@ -27,9 +27,10 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/loader": "^0.6.0",
|
|
31
|
-
"@entur/tokens": "^3.21.0",
|
|
32
|
-
"@entur/
|
|
30
|
+
"@entur/loader": "^0.6.1-beta-automat.0",
|
|
31
|
+
"@entur/tokens": "^3.21.1-beta-automat.0",
|
|
32
|
+
"@entur/typography": "^2.1.1-beta-automat.0",
|
|
33
|
+
"@entur/utils": "^0.12.6-beta-automat.0",
|
|
33
34
|
"classnames": "^2.5.1"
|
|
34
35
|
},
|
|
35
36
|
"devDependencies": {
|
|
@@ -45,5 +46,5 @@
|
|
|
45
46
|
"vite": "^7.1.3",
|
|
46
47
|
"vite-plugin-dts": "^4.5.4"
|
|
47
48
|
},
|
|
48
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "1297095691a8ddb2ff2de8889a83a6d80a17322f"
|
|
49
50
|
}
|