@entur/button 3.4.0-beta.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.
Files changed (5) hide show
  1. package/dist/IconButton.d.ts +1 -1
  2. package/dist/button.cjs.js.map +1 -1
  3. package/dist/button.esm.js.map +1 -1
  4. package/dist/styles.css +141 -161
  5. package/package.json +6 -6
package/dist/IconButton.d.ts CHANGED
@@ -18,7 +18,7 @@ export type IconButtonBaseProps = {
18
18
  /**Størrelsen på knappen
19
19
  * @default 'medium'
20
20
  */
21
- size?: 'small' | 'medium';
21
+ size?: 'small' | 'medium' | 'large';
22
22
  /** Om knappen er opptatt, f.eks. med å lagre eller å kjøpe
23
23
  * @default false
24
24
  */
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":"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"}
package/dist/styles.css CHANGED
@@ -235,119 +235,80 @@
235
235
  --components-button-success-standard-text:#08091c;
236
236
  }
237
237
 
238
+ [data-view-mode=standard],
238
239
  :root{
239
- /* number */
240
- --size-0:0rem;
241
- --size-1:0.0625rem;
242
- --size-2:0.125rem;
243
- --size-3:0.25rem;
244
- --size-4:0.375rem;
245
- --size-5:0.5rem;
246
- --size-6:0.75rem;
247
- --size-7:0.875rem;
248
- --size-8:1rem;
249
- --size-9:1.25rem;
250
- --size-10:1.5rem;
251
- --size-11:1.75rem;
252
- --size-12:2rem;
253
- --size-13:2.25rem;
254
- --size-14:2.5rem;
255
- --size-15:2.75rem;
256
- --size-16:3rem;
257
- --size-17:3.25rem;
258
- --size-18:3.5rem;
259
- --size-19:4rem;
260
- --size-20:4.5rem;
261
- --size-21:5rem;
262
- --size-22:5.5rem;
263
- --size-23:6rem;
264
- --size-24:6.5rem;
265
- --size-25:7rem;
266
- --size-26:7.5rem;
267
- --size-27:8rem;
268
- --size-28:8.5rem;
269
- --size-29:9rem;
270
- --size-30:9.5rem;
271
- --size-31:10rem;
240
+ --components-button-border-large:0.125rem;
241
+ --components-button-border-medium:0.125rem;
242
+ --components-button-border-small:0.125rem;
243
+ --components-button-gap-small:0.25rem;
244
+ --components-button-gap-large:0.5rem;
245
+ --components-button-gap-medium:0.5rem;
246
+ --components-button-height-horizontalcontent-small:2rem;
247
+ --components-button-height-horizontalcontent-medium:3rem;
248
+ --components-button-height-horizontalcontent-large:4rem;
249
+ --components-button-height-verticalcontent-small:3rem;
250
+ --components-button-height-verticalcontent-medium:3.5rem;
251
+ --components-button-height-verticalcontent-large:4.5rem;
252
+ --components-button-icon-small:1rem;
253
+ --components-button-icon-medium:1.25rem;
254
+ --components-button-icon-large:1.5rem;
255
+ --components-button-inlinepadding-small:0.75rem;
256
+ --components-button-inlinepadding-medium:1rem;
257
+ --components-button-inlinepadding-large:1.5rem;
258
+ --components-button-radius-small:0.375rem;
259
+ --components-button-radius-large:0.5rem;
260
+ --components-button-radius-medium:0.5rem;
261
+ --components-button-radius-round:6rem;
272
262
  }
273
263
 
274
- :root,
275
- [data-theme=standard]{
276
- /* number */
277
- --button-border-large:var(--size-2);
278
- --button-border-medium:var(--size-2);
279
- --button-border-small:var(--size-2);
280
- --button-gap-small:var(--size-3);
281
- --button-gap-large:var(--size-5);
282
- --button-gap-medium:var(--size-5);
283
- --button-height-horizontal-small:var(--size-12);
284
- --button-height-horizontal-medium:var(--size-16);
285
- --button-height-horizontal-large:var(--size-19);
286
- --button-height-vertical-small:var(--size-16);
287
- --button-height-vertical-medium:var(--size-18);
288
- --button-height-vertical-large:var(--size-20);
289
- --button-icon-small:var(--size-8);
290
- --button-icon-medium:var(--size-9);
291
- --button-icon-large:var(--size-10);
292
- --button-inline-padding-small:var(--size-6);
293
- --button-inline-padding-medium:var(--size-8);
294
- --button-inline-padding-large:var(--size-10);
295
- --button-radius-small:var(--size-4);
296
- --button-radius-large:var(--size-5);
297
- --button-radius-medium:var(--size-5);
298
- --button-radius-round:var(--size-23);
264
+ [data-view-mode=compact]{
265
+ --components-button-border-large:0.125rem;
266
+ --components-button-border-medium:0.125rem;
267
+ --components-button-border-small:0.125rem;
268
+ --components-button-gap-medium:0.25rem;
269
+ --components-button-gap-small:0.25rem;
270
+ --components-button-gap-large:0.5rem;
271
+ --components-button-height-horizontalcontent-small:1.75rem;
272
+ --components-button-height-horizontalcontent-medium:2.5rem;
273
+ --components-button-height-horizontalcontent-large:3.5rem;
274
+ --components-button-height-verticalcontent-small:2.5rem;
275
+ --components-button-height-verticalcontent-medium:3rem;
276
+ --components-button-height-verticalcontent-large:3.5rem;
277
+ --components-button-icon-medium:1rem;
278
+ --components-button-icon-small:1rem;
279
+ --components-button-icon-large:1.25rem;
280
+ --components-button-inlinepadding-small:0.5rem;
281
+ --components-button-inlinepadding-medium:0.75rem;
282
+ --components-button-inlinepadding-large:1rem;
283
+ --components-button-radius-small:0.25rem;
284
+ --components-button-radius-large:0.5rem;
285
+ --components-button-radius-medium:0.5rem;
286
+ --components-button-radius-round:6rem;
299
287
  }
300
288
 
301
- [data-theme=compact]{
302
- /* number */
303
- --button-border-large:var(--size-2);
304
- --button-border-medium:var(--size-2);
305
- --button-border-small:var(--size-2);
306
- --button-gap-medium:var(--size-3);
307
- --button-gap-small:var(--size-3);
308
- --button-gap-large:var(--size-5);
309
- --button-height-horizontal-small:var(--size-11);
310
- --button-height-horizontal-medium:var(--size-14);
311
- --button-height-horizontal-large:var(--size-18);
312
- --button-height-vertical-small:var(--size-14);
313
- --button-height-vertical-medium:var(--size-16);
314
- --button-height-vertical-large:var(--size-18);
315
- --button-icon-medium:var(--size-8);
316
- --button-icon-small:var(--size-8);
317
- --button-icon-large:var(--size-9);
318
- --button-inline-padding-small:var(--size-5);
319
- --button-inline-padding-medium:var(--size-6);
320
- --button-inline-padding-large:var(--size-8);
321
- --button-radius-small:var(--size-3);
322
- --button-radius-large:var(--size-5);
323
- --button-radius-medium:var(--size-5);
324
- --button-radius-round:var(--size-23);
325
- }
326
-
327
- [data-theme=display]{
328
- /* number */
329
- --button-border-small:var(--size-2);
330
- --button-border-large:var(--size-3);
331
- --button-border-medium:var(--size-3);
332
- --button-gap-small:var(--size-5);
333
- --button-gap-medium:var(--size-6);
334
- --button-gap-large:var(--size-8);
335
- --button-height-horizontal-small:var(--size-19);
336
- --button-height-horizontal-medium:var(--size-23);
337
- --button-height-horizontal-large:var(--size-26);
338
- --button-height-vertical-small:var(--size-21);
339
- --button-height-vertical-medium:var(--size-24);
340
- --button-height-vertical-large:var(--size-28);
341
- --button-icon-small:var(--size-10);
342
- --button-icon-medium:var(--size-12);
343
- --button-icon-large:var(--size-16);
344
- --button-inline-padding-small:var(--size-10);
345
- --button-inline-padding-medium:var(--size-12);
346
- --button-inline-padding-large:var(--size-14);
347
- --button-radius-small:var(--size-5);
348
- --button-radius-large:var(--size-8);
349
- --button-radius-medium:var(--size-8);
350
- --button-radius-round:var(--size-23);
289
+ [data-view-mode=display]{
290
+ --components-button-border-small:0.125rem;
291
+ --components-button-border-large:0.25rem;
292
+ --components-button-border-medium:0.25rem;
293
+ --components-button-gap-small:0.5rem;
294
+ --components-button-gap-medium:0.75rem;
295
+ --components-button-gap-large:1rem;
296
+ --components-button-height-horizontalcontent-small:4rem;
297
+ --components-button-height-horizontalcontent-medium:6rem;
298
+ --components-button-height-horizontalcontent-large:7.5rem;
299
+ --components-button-height-verticalcontent-small:5rem;
300
+ --components-button-height-verticalcontent-medium:6.5rem;
301
+ --components-button-height-verticalcontent-large:8.5rem;
302
+ --components-button-icon-small:1.5rem;
303
+ --components-button-icon-medium:2rem;
304
+ --components-button-icon-large:3rem;
305
+ --components-button-inlinepadding-small:1.5rem;
306
+ --components-button-inlinepadding-medium:2rem;
307
+ --components-button-inlinepadding-large:2.5rem;
308
+ --components-button-radius-small:0.5rem;
309
+ --components-button-radius-large:1rem;
310
+ --components-button-radius-medium:1rem;
311
+ --components-button-radius-round:6rem;
351
312
  }
352
313
  [data-color-mode=light],
353
314
  :root{
@@ -360,8 +321,8 @@
360
321
  --basecolors-frame-subdued:#d9dae8;
361
322
  --basecolors-frame-tint:#f6f6f9;
362
323
  --basecolors-shape-accent:#181c56;
363
- --basecolors-shape-bicycle-contrast:#00db9b;
364
- --basecolors-shape-bicycle-default:#33826b;
324
+ --basecolors-shape-bicycle-contrast:#00dbb6;
325
+ --basecolors-shape-bicycle-default:#0d827e;
365
326
  --basecolors-shape-bus-contrast:#ff6392;
366
327
  --basecolors-shape-bus-default:#c5044e;
367
328
  --basecolors-shape-cableway-contrast:#b482fb;
@@ -380,8 +341,8 @@
380
341
  --basecolors-shape-maskalt:#ffffff;
381
342
  --basecolors-shape-metro-contrast:#f08901;
382
343
  --basecolors-shape-metro-default:#bf5826;
383
- --basecolors-shape-mobility-contrast:#00db9b;
384
- --basecolors-shape-mobility-default:#33826b;
344
+ --basecolors-shape-mobility-contrast:#00dbb6;
345
+ --basecolors-shape-mobility-default:#0d827e;
385
346
  --basecolors-shape-plane-contrast:#fbafea;
386
347
  --basecolors-shape-plane-default:#800664;
387
348
  --basecolors-shape-subdued:#626493;
@@ -426,8 +387,8 @@
426
387
  --basecolors-frame-subdued:#2d2e3e;
427
388
  --basecolors-frame-tint:#141527;
428
389
  --basecolors-shape-accent:#e5e5e9;
429
- --basecolors-shape-bicycle-contrast:#4db295;
430
- --basecolors-shape-bicycle-default:#4db295;
390
+ --basecolors-shape-bicycle-contrast:#4db2a1;
391
+ --basecolors-shape-bicycle-default:#4db2a1;
431
392
  --basecolors-shape-bus-contrast:#ef7398;
432
393
  --basecolors-shape-bus-default:#ef7398;
433
394
  --basecolors-shape-cableway-contrast:#b898e5;
@@ -446,8 +407,8 @@
446
407
  --basecolors-shape-maskalt:#393a49;
447
408
  --basecolors-shape-metro-contrast:#dd973c;
448
409
  --basecolors-shape-metro-default:#dd973c;
449
- --basecolors-shape-mobility-contrast:#4db295;
450
- --basecolors-shape-mobility-default:#4db295;
410
+ --basecolors-shape-mobility-contrast:#4db2a1;
411
+ --basecolors-shape-mobility-default:#4db2a1;
451
412
  --basecolors-shape-plane-contrast:#f2b8e5;
452
413
  --basecolors-shape-plane-default:#f2b8e5;
453
414
  --basecolors-shape-subdued:#b3b4bd;
@@ -489,10 +450,10 @@
489
450
  width:-webkit-max-content;
490
451
  width:-moz-max-content;
491
452
  width:max-content;
492
- height:var(--button-height-horizontal-medium);
493
- -webkit-border-radius:var(--button-radius-medium);
494
- -moz-border-radius:var(--button-radius-medium);
495
- border-radius:var(--button-radius-medium);
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);
496
457
  cursor:pointer;
497
458
  display:inline-block;
498
459
  -webkit-appearance:none;
@@ -504,7 +465,7 @@
504
465
  -o-text-overflow:ellipsis;
505
466
  text-overflow:ellipsis;
506
467
  white-space:nowrap;
507
- padding-inline:var(--button-inline-padding-medium);
468
+ padding-inline:var(--components-button-inlinepadding-medium);
508
469
  font-size:var(--font-size-body-m);
509
470
  line-height:var(--font-line-height-body-m);
510
471
  font-weight:var(--font-weight-body);
@@ -513,7 +474,7 @@
513
474
  position:relative;
514
475
  vertical-align:middle;
515
476
  background-color:var(--eds-button-background);
516
- border:var(--button-border-medium) solid var(--eds-button-border);
477
+ border:var(--components-button-border-medium) solid var(--eds-button-border);
517
478
  color:var(--eds-button-text);
518
479
  }
519
480
  .eds-button:hover{
@@ -539,46 +500,46 @@
539
500
  background:var(--eds-button-text);
540
501
  }
541
502
  .eds-button :where(.eds-icon){
542
- position:relative;
543
- top:0.2em;
503
+ vertical-align:middle;
504
+ margin-bottom:0.1em;
544
505
  }
545
506
  .eds-button--trailing-icon :where(.eds-icon:last-child){
546
- margin-left:var(--button-gap-medium);
507
+ margin-left:var(--components-button-gap-medium);
547
508
  }
548
509
  .eds-button--trailing-icon:where(.eds-button--size-small .eds-icon:last-child){
549
- margin-left:var(--button-gap-small);
510
+ margin-left:var(--components-button-gap-small);
550
511
  }
551
512
  .eds-button--trailing-icon:where(.eds-button--size-large .eds-icon:last-child){
552
- margin-left:var(--button-gap-large);
513
+ margin-left:var(--components-button-gap-large);
553
514
  }
554
515
  .eds-button--leading-icon :where(.eds-icon:first-child){
555
- margin-right:var(--button-gap-medium);
516
+ margin-right:var(--components-button-gap-medium);
556
517
  }
557
518
  .eds-button--leading-icon:where(.eds-button--size-small .eds-icon:first-child){
558
- margin-right:var(--button-gap-small);
519
+ margin-right:var(--components-button-gap-small);
559
520
  }
560
521
  .eds-button--leading-icon:where(.eds-button--size-large .eds-icon:first-child){
561
- margin-right:var(--button-gap-large);
522
+ margin-right:var(--components-button-gap-large);
562
523
  }
563
524
  .eds-button--size-small{
564
- height:var(--button-height-horizontal-small);
565
- -webkit-border-radius:var(--button-radius-small);
566
- -moz-border-radius:var(--button-radius-small);
567
- border-radius:var(--button-radius-small);
568
- padding-inline:var(--button-inline-padding-small);
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);
569
530
  font-size:var(--font-size-body-s);
570
531
  line-height:var(--font-line-height-body-s);
571
- border:var(--button-border-small) solid var(--eds-button-border);
532
+ border:var(--components-button-border-small) solid var(--eds-button-border);
572
533
  }
573
534
  .eds-button--size-large{
574
- height:var(--button-height-horizontal-large);
575
- -webkit-border-radius:var(--button-radius-large);
576
- -moz-border-radius:var(--button-radius-large);
577
- border-radius:var(--button-radius-large);
578
- padding-inline:var(--button-inline-padding-large);
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);
579
540
  font-size:var(--font-size-body-xl);
580
541
  line-height:var(--font-line-height-body-xl);
581
- border:var(--button-border-large) solid var(--eds-button-border);
542
+ border:var(--components-button-border-large) solid var(--eds-button-border);
582
543
  }
583
544
  .eds-button--width-fluid{
584
545
  width:100%;
@@ -1006,27 +967,31 @@
1006
967
  width:2rem;
1007
968
  border-width:0.0625rem;
1008
969
  }.eds-icon-button{
1009
- border:0.125rem solid transparent;
1010
- -webkit-border-radius:0.25rem;
1011
- -moz-border-radius:0.25rem;
1012
- border-radius:0.25rem;
970
+ -webkit-box-align:center;
971
+ -webkit-align-items:center;
972
+ -moz-box-align:center;
973
+ align-items:center;
1013
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;
1014
979
  color:var(--components-button-iconbutton-standard-text);
1015
980
  cursor:pointer;
1016
- display:-webkit-box;
1017
- display:-webkit-flex;
1018
- display:-moz-box;
1019
- 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);
1020
989
  -webkit-box-pack:center;
1021
990
  -webkit-justify-content:center;
1022
991
  -moz-box-pack:center;
1023
992
  justify-content:center;
1024
- -webkit-box-align:center;
1025
- -webkit-align-items:center;
1026
- -moz-box-align:center;
1027
- align-items:center;
1028
- font-size:1rem;
1029
- padding:0.5rem;
993
+ line-height:var(--font-line-height-body-m);
994
+ padding-inline:var(--components-button-inlinepadding-medium);
1030
995
  }
1031
996
  .eds-contrast .eds-icon-button{
1032
997
  color:var(--components-button-iconbutton-contrast-text);
@@ -1034,11 +999,6 @@
1034
999
  .eds-contrast .eds-icon-button > .eds-loading-dots .eds-loading-dots__dot{
1035
1000
  background-color:var(--components-button-iconbutton-contrast-icon);
1036
1001
  }
1037
- .eds-icon-button--size-small{
1038
- height:1.5rem;
1039
- width:1.5rem;
1040
- padding:0;
1041
- }
1042
1002
  .eds-icon-button:hover{
1043
1003
  background-color:var(--components-button-iconbutton-standard-hover);
1044
1004
  }
@@ -1070,4 +1030,24 @@
1070
1030
  width:-webkit-fit-content;
1071
1031
  width:-moz-fit-content;
1072
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);
1073
1053
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/button",
3
- "version": "3.4.0-beta.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,10 +27,10 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/loader": "^0.5.36-beta.0",
31
- "@entur/tokens": "^3.20.0",
32
- "@entur/typography": "^2.0.4-beta.0",
33
- "@entur/utils": "^0.12.5",
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",
34
34
  "classnames": "^2.5.1"
35
35
  },
36
36
  "devDependencies": {
@@ -46,5 +46,5 @@
46
46
  "vite": "^7.1.3",
47
47
  "vite-plugin-dts": "^4.5.4"
48
48
  },
49
- "gitHead": "e3da53c27deec5444106581c2339049814f633fe"
49
+ "gitHead": "1297095691a8ddb2ff2de8889a83a6d80a17322f"
50
50
  }