@drivy/cobalt 2.11.1 → 2.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Buttons/Button/index.js.map +1 -1
- package/components/EmptyState/index.js.map +1 -1
- package/components/Form/Stepper.js +3 -3
- package/components/Form/Stepper.js.map +1 -1
- package/components/Helper/index.js.map +1 -1
- package/components/Pagination/index.js +6 -4
- package/components/Pagination/index.js.map +1 -1
- package/package.json +5 -5
- package/styles/components/Buttons/Button/index.scss +7 -7
- package/styles/components/Form/CheckablePill.scss +4 -13
- package/styles/components/Pagination/index.scss +1 -1
- package/types/src/components/Buttons/Button/index.d.ts +1 -0
- package/types/src/components/EmptyState/index.d.ts +3 -3
- package/types/src/components/Helper/index.d.ts +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n ButtonComponentProps,\n ButtonLinkComponentProps,\n ButtonProps,\n isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n isIconOnly,\n fullWidth,\n selected,\n}: {\n className?: ButtonProps[\"className\"]\n variant?: ButtonProps[\"variant\"]\n size?: ButtonProps[\"size\"]\n destructive?: ButtonProps[\"destructive\"]\n primary?: ButtonProps[\"primary\"]\n text?: ButtonProps[\"text\"]\n isIconOnly?: boolean\n fullWidth?: ButtonProps[\"fullWidth\"]\n selected?: ButtonProps[\"selected\"]\n}) => {\n return cx(className, \"cobalt-button\", {\n \"cobalt-button--primary\": primary,\n \"cobalt-button--destructive\": destructive,\n \"cobalt-button--text\": text,\n \"cobalt-button--icon-only\": isIconOnly,\n \"cobalt-button--small\": size === \"small\",\n \"cobalt-button--large\": size === \"large\",\n \"cobalt-button--warning\": variant === \"warning\",\n \"cobalt-button--secondary\": variant === \"secondary\",\n \"cobalt-button--tertiary\": variant === \"tertiary\",\n \"cobalt-button--business\": variant === \"business\",\n \"cobalt-button--success\": variant === \"success\",\n \"cobalt-button--neutral\": variant === \"neutral\",\n \"cobalt-button--selected\": selected,\n \"c-w-full\": fullWidth,\n })\n}\n\ninterface ButtonOverloads {\n (\n props: Exclude<ButtonProps, ButtonComponentProps> &\n React.RefAttributes<HTMLAnchorElement>\n ): React.ReactElement\n (\n props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n React.RefAttributes<HTMLButtonElement>\n ): React.ReactElement\n displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (props, ref) => {\n const {\n children,\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n icon,\n fullWidth,\n selected,\n ...restProps\n } = props\n\n const computedClassName = getComputedClassName({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n fullWidth,\n selected,\n isIconOnly: !!icon && !children,\n })\n\n const content = (\n <>\n {icon}\n {children}\n {text && children ? <ChevronRightIcon /> : null}\n </>\n )\n\n if (isLinkProps(restProps)) {\n return (\n <ButtonLinkBase\n {...(restProps as ButtonLinkComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n >\n {content}\n </ButtonLinkBase>\n )\n }\n\n return (\n <ButtonBase\n {...(restProps as ButtonComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\n >\n {content}\n </ButtonBase>\n )\n }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GAWT,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,yBAAyB,EAAE,QAAQ;AACnC,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n ButtonComponentProps,\n ButtonLinkComponentProps,\n ButtonProps,\n isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n isIconOnly,\n fullWidth,\n selected,\n}: {\n className?: ButtonProps[\"className\"]\n variant?: ButtonProps[\"variant\"]\n size?: ButtonProps[\"size\"]\n destructive?: ButtonProps[\"destructive\"]\n primary?: ButtonProps[\"primary\"]\n text?: ButtonProps[\"text\"]\n isIconOnly?: boolean\n fullWidth?: ButtonProps[\"fullWidth\"]\n selected?: ButtonProps[\"selected\"]\n}) => {\n return cx(className, \"cobalt-button\", {\n \"cobalt-button--primary\": primary,\n \"cobalt-button--destructive\": destructive,\n \"cobalt-button--text\": text,\n \"cobalt-button--icon-only\": isIconOnly,\n \"cobalt-button--small\": size === \"small\",\n \"cobalt-button--large\": size === \"large\",\n \"cobalt-button--warning\": variant === \"warning\",\n \"cobalt-button--secondary\": variant === \"secondary\",\n \"cobalt-button--tertiary\": variant === \"tertiary\",\n \"cobalt-button--business\": variant === \"business\",\n \"cobalt-button--success\": variant === \"success\",\n \"cobalt-button--neutral\": variant === \"neutral\",\n \"cobalt-button--selected\": selected,\n \"c-w-full\": fullWidth,\n })\n}\n\ninterface ButtonOverloads {\n (\n props: Exclude<ButtonProps, ButtonComponentProps> &\n React.RefAttributes<HTMLAnchorElement>\n ): React.ReactElement\n (\n props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n React.RefAttributes<HTMLButtonElement>\n ): React.ReactElement\n displayName?: string\n}\n\nexport type CobaltButtonElement = React.ReactElement<\n React.ComponentProps<typeof Button>,\n typeof Button\n>\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (props, ref) => {\n const {\n children,\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n icon,\n fullWidth,\n selected,\n ...restProps\n } = props\n\n const computedClassName = getComputedClassName({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n fullWidth,\n selected,\n isIconOnly: !!icon && !children,\n })\n\n const content = (\n <>\n {icon}\n {children}\n {text && children ? <ChevronRightIcon /> : null}\n </>\n )\n\n if (isLinkProps(restProps)) {\n return (\n <ButtonLinkBase\n {...(restProps as ButtonLinkComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n >\n {content}\n </ButtonLinkBase>\n )\n }\n\n return (\n <ButtonBase\n {...(restProps as ButtonComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\n >\n {content}\n </ButtonBase>\n )\n }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GAWT,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,yBAAyB,EAAE,QAAQ;AACnC,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAmBK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;QACT,QAAQ;AACR,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ;AACR,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React from \"react\"\n\nimport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React from \"react\"\n\nimport type { CobaltButtonElement } from \"../Buttons/Button\"\nimport ButtonsGroup from \"../Buttons/ButtonsGroup\"\n\nexport interface EmptyStateProps {\n children?: React.ReactNode\n title: string\n action?: CobaltButtonElement\n secondaryAction?: CobaltButtonElement\n image: string\n}\n\nexport const EmptyState = ({\n title,\n children,\n action,\n secondaryAction,\n image,\n}: EmptyStateProps) => {\n return (\n <div className=\"cobalt-EmptyState\">\n <img\n className=\"cobalt-EmptyState__Image\"\n role=\"presentation\"\n alt=\"\"\n src={image}\n height={188}\n width={188}\n />\n <h2 className=\"cobalt-EmptyState__Title\">{title}</h2>\n {children && <div className=\"cobalt-EmptyState__Body\">{children}</div>}\n {action && (\n <ButtonsGroup align=\"center\">\n <>\n {action}\n {secondaryAction}\n </>\n </ButtonsGroup>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":";;;AAaa,MAAA,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,eAAe,EACf,KAAK,GACW,KAAI;AACpB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,EAAA;QAChC,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,cAAc,EACnB,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,KAAK,EACV,MAAM,EAAE,GAAG,EACX,KAAK,EAAE,GAAG,EACV,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAM;AACpD,QAAA,QAAQ,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA,EAAE,QAAQ,CAAO;AACrE,QAAA,MAAM,KACL,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAA;AAC1B,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;gBACG,MAAM;AACN,gBAAA,eAAe,CACf,CACU,CAChB,CACG,EACP;AACH;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { PureComponent } from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
import { withFieldLabelAndHint } from './field.js';
|
|
4
|
-
import
|
|
4
|
+
import Button from '../Buttons/Button/index.js';
|
|
5
5
|
import '../Icon/index.js';
|
|
6
6
|
import MinusIcon from '../Icon/__generated__/MinusIcon.js';
|
|
7
7
|
import PlusIcon from '../Icon/__generated__/PlusIcon.js';
|
|
@@ -80,7 +80,7 @@ class Stepper extends PureComponent {
|
|
|
80
80
|
"cobalt-Stepper--error": status === "error",
|
|
81
81
|
}) },
|
|
82
82
|
React.createElement("div", { className: "cobalt-Stepper__Wrapper" },
|
|
83
|
-
React.createElement(
|
|
83
|
+
React.createElement(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === min, ...(!disabled && {
|
|
84
84
|
onPointerDown: () => this.onPointerDown(this.onDecrement),
|
|
85
85
|
onPointerUp: this.onPointerUp,
|
|
86
86
|
onPointerLeave: this.onPointerUp,
|
|
@@ -89,7 +89,7 @@ class Stepper extends PureComponent {
|
|
|
89
89
|
React.createElement("div", { className: "cobalt-Stepper__ContentWrapper" },
|
|
90
90
|
children ? children(this.state.value) : this.state.value,
|
|
91
91
|
React.createElement("input", { type: "hidden", name: name, value: this.state.value })),
|
|
92
|
-
React.createElement(
|
|
92
|
+
React.createElement(Button, { className: "cobalt-Stepper__ActionButton", disabled: disabled || this.state.value === max, ...(!disabled && {
|
|
93
93
|
onPointerDown: () => this.onPointerDown(this.onIncrement),
|
|
94
94
|
onPointerUp: this.onPointerUp,
|
|
95
95
|
onPointerLeave: this.onPointerUp,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport
|
|
1
|
+
{"version":3,"file":"Stepper.js","sources":["../../../src/components/Form/Stepper.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport classNames from \"classnames\"\nimport { FormElement } from \"./form\"\nimport { withFieldLabelAndHint } from \"./field\"\nimport Button from \"../Buttons/Button\"\nimport { MinusIcon, PlusIcon } from \"../Icon\"\n\nconst AUTO_CHANGE_TIMEOUT_IN_MS = 750\nconst AUTO_CHANGE_INTERVAL_IN_MS = 150\n\nconst enforceInRange = (\n value: number,\n min: number | undefined,\n max: number | undefined\n) => {\n let enforcedValue = value\n if (typeof max !== \"undefined\") {\n enforcedValue = Math.min(enforcedValue, max)\n }\n if (typeof min !== \"undefined\") {\n enforcedValue = Math.max(enforcedValue, min)\n }\n return enforcedValue\n}\n\ntype Props = {\n value: number\n name?: string\n disabled?: boolean\n min?: number\n max?: number\n step: number\n onChange?: (value: number) => void\n children?: (value: number) => React.ReactNode\n} & FormElement\n\ntype State = {\n value: number\n}\n\nclass Stepper extends PureComponent<Props, State> {\n constructor(props: Props) {\n super(props)\n\n if (props.step < 0)\n throw new Error(\"Incorrect step value. Can't be below zero\")\n\n this.onDecrement = this.onDecrement.bind(this)\n this.onIncrement = this.onIncrement.bind(this)\n this.changeValue = this.changeValue.bind(this)\n this.onPointerDown = this.onPointerDown.bind(this)\n this.onPointerUp = this.onPointerUp.bind(this)\n\n this.state = {\n value: enforceInRange(props.value, props.min, props.max),\n }\n }\n\n timeout: ReturnType<typeof setTimeout> | null = null\n interval: ReturnType<typeof setInterval> | null = null\n\n componentDidUpdate(_prevProps: Props, prevState: State) {\n if (prevState.value !== this.state.value) {\n this.changeValue(this.state.value)\n } else if (this.props.value !== this.state.value) {\n this.changeValue(this.props.value)\n }\n }\n\n onDecrement = () => {\n ;(this.props.min !== null || this.state.value > this.props.min) &&\n this.changeValue(\n parseFloat((this.state.value - this.props.step).toFixed(10))\n )\n }\n\n onIncrement = () => {\n ;(this.props.max !== null || this.state.value < this.props.max) &&\n this.changeValue(\n parseFloat((this.state.value + this.props.step).toFixed(10))\n )\n }\n\n onPointerDown = (callback: () => void) => {\n callback()\n this.timeout && clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n this.interval && clearInterval(this.interval)\n this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS)\n }, AUTO_CHANGE_TIMEOUT_IN_MS)\n }\n\n onPointerUp = () => {\n if (this.interval) {\n clearInterval(this.interval)\n this.interval = null\n }\n this.timeout && clearTimeout(this.timeout)\n }\n\n changeValue = (value: number) => {\n this.setState(\n {\n value: enforceInRange(value, this.props.min, this.props.max),\n },\n () => {\n this.props.onChange && this.props.onChange(this.state.value)\n }\n )\n }\n\n render() {\n const { name, status, disabled, min, max, children } = this.props\n\n return (\n <div\n className={classNames(\"cobalt-Stepper\", {\n \"cobalt-Stepper--disabled\": disabled,\n \"cobalt-Stepper--success\": status === \"success\",\n \"cobalt-Stepper--error\": status === \"error\",\n })}\n >\n <div className=\"cobalt-Stepper__Wrapper\">\n <Button\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === min}\n {...(!disabled && {\n onPointerDown: () => this.onPointerDown(this.onDecrement),\n onPointerUp: this.onPointerUp,\n onPointerLeave: this.onPointerUp,\n })}\n type=\"button\"\n data-label=\"stepper-minus\"\n >\n <MinusIcon />\n </Button>\n <div className=\"cobalt-Stepper__ContentWrapper\">\n {children ? children(this.state.value) : this.state.value}\n <input type=\"hidden\" name={name} value={this.state.value} />\n </div>\n <Button\n className=\"cobalt-Stepper__ActionButton\"\n disabled={disabled || this.state.value === max}\n {...(!disabled && {\n onPointerDown: () => this.onPointerDown(this.onIncrement),\n onPointerUp: this.onPointerUp,\n onPointerLeave: this.onPointerUp,\n })}\n type=\"button\"\n data-label=\"stepper-plus\"\n >\n <PlusIcon />\n </Button>\n </div>\n </div>\n )\n }\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Stepper)\nwrappedComponent.displayName = \"Stepper\"\n\nexport { wrappedComponent as Stepper }\n\ntype StepperMetaProps = {\n children: React.ReactNode\n}\nconst StepperMeta = ({ children }: StepperMetaProps) => {\n return <div className=\"cobalt-Stepper__Meta\">{children}</div>\n}\n\nexport { StepperMeta }\n"],"names":["classNames"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Helper/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nimport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Helper/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nimport type { CobaltButtonElement } from \"../Buttons/Button\"\n\ntype HelperPropsType = {\n children?: React.ReactNode\n className?: string\n title: string\n titleClassName?: string\n contentClassName?: string\n cta?: CobaltButtonElement\n}\n\nconst Helper = ({\n className,\n titleClassName,\n contentClassName,\n title,\n children,\n cta,\n}: HelperPropsType) => (\n <div className={cx(\"cobalt-helper\", className)}>\n <strong className={cx(\"cobalt-helper__title\", titleClassName)}>\n {title}\n </strong>\n <div className={cx(\"cobalt-helper__content\", contentClassName)}>\n {children}\n </div>\n {cta}\n </div>\n)\n\nexport default Helper\n"],"names":[],"mappings":";;;AAcA,MAAM,MAAM,GAAG,CAAC,EACd,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,GACa,MAChB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;IAC5C,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,cAAc,CAAC,EAC1D,EAAA,KAAK,CACC;IACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAC3D,EAAA,QAAQ,CACL;IACL,GAAG,CACA;;;;"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
|
-
import
|
|
3
|
+
import Button from '../Buttons/Button/index.js';
|
|
4
4
|
import '../Icon/index.js';
|
|
5
|
+
import ChevronLeftIcon from '../Icon/__generated__/ChevronLeftIcon.js';
|
|
5
6
|
import DotsHorizontalIcon from '../Icon/__generated__/DotsHorizontalIcon.js';
|
|
7
|
+
import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';
|
|
6
8
|
|
|
7
9
|
const PaginationButton = ({ currentPage, pageNumber, onPageChange, }) => {
|
|
8
10
|
const isActive = currentPage === pageNumber;
|
|
9
|
-
return (React.createElement(
|
|
11
|
+
return (React.createElement(Button, { className: cx("cobalt-pagination__Button"), selected: isActive, onClick: () => !isActive && onPageChange(pageNumber) }, pageNumber));
|
|
10
12
|
};
|
|
11
13
|
const PAGE_DOTS_VALUE = -1; // Unrevelant value only used to represent dots in the pages array
|
|
12
14
|
const generatePages = (currentPage, totalPages, options) => {
|
|
@@ -60,9 +62,9 @@ const Pagination = ({ onPageChange, currentPage, totalPages, options = {
|
|
|
60
62
|
return null;
|
|
61
63
|
const pages = generatePages(currentPage, totalPages, options);
|
|
62
64
|
return (React.createElement("div", { className: "cobalt-pagination" },
|
|
63
|
-
React.createElement(
|
|
65
|
+
React.createElement(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === 1, onClick: () => onPageChange(currentPage - 1), icon: React.createElement(ChevronLeftIcon, null) }),
|
|
64
66
|
pages.map((page, index) => page === PAGE_DOTS_VALUE ? (React.createElement(DotsHorizontalIcon, { key: `dots-${index}`, className: "cobalt-pagination__threeDots", color: "primary" })) : (React.createElement(PaginationButton, { key: page, currentPage: currentPage, pageNumber: page, onPageChange: onPageChange }))),
|
|
65
|
-
React.createElement(
|
|
67
|
+
React.createElement(Button, { className: cx("cobalt-pagination__Button"), disabled: currentPage === totalPages, onClick: () => onPageChange(currentPage + 1), icon: React.createElement(ChevronRightIcon, null) })));
|
|
66
68
|
};
|
|
67
69
|
|
|
68
70
|
export { Pagination as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport Button from \"../Buttons/Button\"\nimport { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from \"../Icon\"\n\nconst PaginationButton = ({\n currentPage,\n pageNumber,\n onPageChange,\n}: {\n currentPage: number\n pageNumber: number\n onPageChange: (page: number) => void\n}) => {\n const isActive = currentPage === pageNumber\n return (\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n selected={isActive}\n onClick={() => !isActive && onPageChange(pageNumber)}\n >\n {pageNumber}\n </Button>\n )\n}\n\nconst PAGE_DOTS_VALUE = -1 // Unrevelant value only used to represent dots in the pages array\n\nconst generatePages = (\n currentPage: number,\n totalPages: number,\n options: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n) => {\n const pages: number[] = []\n const maxVisiblePages = options.maxVisibleLength // Max visible pages (excluding dots)\n const edgeButtons = options.edgeVisibleLength // Number of fixed edge buttons\n\n if (totalPages <= maxVisiblePages) {\n // Show all pages\n for (let i = 1; i <= totalPages; i++) {\n pages.push(i)\n }\n return pages\n }\n\n // Calculate dynamic range for middle pages\n const middlePagesCount = maxVisiblePages - 2 * edgeButtons // Remaining pages for the middle\n let startMiddlePage = Math.max(\n currentPage - Math.floor(middlePagesCount / 2),\n edgeButtons + 1\n )\n let endMiddlePage = Math.min(\n currentPage + Math.floor(middlePagesCount / 2),\n totalPages - edgeButtons\n )\n\n // Adjust start and end pages if they exceed boundaries\n if (startMiddlePage === edgeButtons + 1) {\n endMiddlePage = startMiddlePage + middlePagesCount - 1\n } else if (endMiddlePage === totalPages - edgeButtons) {\n startMiddlePage = endMiddlePage - middlePagesCount + 1\n }\n\n // Add leading edge buttons\n for (let i = 1; i <= edgeButtons; i++) {\n pages.push(i)\n }\n if (startMiddlePage > edgeButtons + 1) {\n pages.push(PAGE_DOTS_VALUE)\n }\n\n // Add middle pages\n for (let i = startMiddlePage; i <= endMiddlePage; i++) {\n pages.push(i)\n }\n\n // Add trailing edge buttons\n if (endMiddlePage < totalPages - edgeButtons) {\n pages.push(PAGE_DOTS_VALUE)\n }\n for (let i = totalPages - edgeButtons + 1; i <= totalPages; i++) {\n pages.push(i)\n }\n\n return pages\n}\n\n// eslint-disable-next-line complexity\nconst Pagination = ({\n onPageChange,\n currentPage,\n totalPages,\n options = {\n maxVisibleLength: 11,\n edgeVisibleLength: 3,\n },\n}: {\n currentPage: number\n totalPages: number\n onPageChange: (page: number) => void\n options?: {\n maxVisibleLength: number\n edgeVisibleLength: number\n }\n}) => {\n if (totalPages <= 1) return null\n const pages = generatePages(currentPage, totalPages, options)\n\n return (\n <div className=\"cobalt-pagination\">\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n disabled={currentPage === 1}\n onClick={() => onPageChange(currentPage - 1)}\n icon={<ChevronLeftIcon />}\n />\n {pages.map((page, index) =>\n page === PAGE_DOTS_VALUE ? (\n <DotsHorizontalIcon\n key={`dots-${index}`}\n className=\"cobalt-pagination__threeDots\"\n color=\"primary\"\n />\n ) : (\n <PaginationButton\n key={page}\n currentPage={currentPage}\n pageNumber={page}\n onPageChange={onPageChange}\n />\n )\n )}\n <Button\n className={cx(\"cobalt-pagination__Button\")}\n disabled={currentPage === totalPages}\n onClick={() => onPageChange(currentPage + 1)}\n icon={<ChevronRightIcon />}\n />\n </div>\n )\n}\n\nexport default Pagination\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@drivy/cobalt",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.1",
|
|
4
4
|
"description": "Opinionated design system for Drivy's projects.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"types": "types/src/index.d.ts",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@storybook/react-webpack5": "7.6.21",
|
|
53
53
|
"@svgr/cli": "7.0.0",
|
|
54
54
|
"@testing-library/jest-dom": "6.9.1",
|
|
55
|
-
"@testing-library/react": "16.3.
|
|
55
|
+
"@testing-library/react": "16.3.2",
|
|
56
56
|
"@testing-library/react-hooks": "8.0.1",
|
|
57
57
|
"@types/fs-extra": "11.0.4",
|
|
58
58
|
"@types/jest": "29.5.14",
|
|
@@ -61,9 +61,9 @@
|
|
|
61
61
|
"@types/node": "22.14.1",
|
|
62
62
|
"@types/react": "18.3.24",
|
|
63
63
|
"@types/react-dom": "18.3.7",
|
|
64
|
-
"autoprefixer": "10.4.
|
|
64
|
+
"autoprefixer": "10.4.24",
|
|
65
65
|
"core-js": "3.48.0",
|
|
66
|
-
"css-loader": "7.1.
|
|
66
|
+
"css-loader": "7.1.3",
|
|
67
67
|
"eslint": "8.57.1",
|
|
68
68
|
"eslint-plugin-storybook": "^0.12.0",
|
|
69
69
|
"file-loader": "6.2.0",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"rollup-plugin-copy": "3.5.0",
|
|
89
89
|
"rollup-plugin-svgo": "2.0.0",
|
|
90
90
|
"rollup-plugin-typescript2": "0.36.0",
|
|
91
|
-
"sass": "1.97.
|
|
91
|
+
"sass": "1.97.3",
|
|
92
92
|
"sass-loader": "13.3.3",
|
|
93
93
|
"sharp-cli": "5.2.0",
|
|
94
94
|
"storybook": "7.6.21",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.cobalt-button--small {
|
|
89
|
-
@apply c-px-[12px] c-border-
|
|
89
|
+
@apply c-px-[12px] c-border-outline hover:c-drop-shadow-md;
|
|
90
90
|
min-width: 32px;
|
|
91
91
|
min-height: 32px;
|
|
92
92
|
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
&.cobalt-button--warning {
|
|
101
|
-
@apply c-bg-warning c-text-onWarning;
|
|
101
|
+
@apply c-bg-warning c-border-transparent c-text-onWarning;
|
|
102
102
|
|
|
103
103
|
.cobalt-button__loading-icon {
|
|
104
104
|
@apply c-text-onWarning;
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
&.cobalt-button--tertiary {
|
|
109
|
-
@apply c-bg-tertiary c-text-onTertiary;
|
|
109
|
+
@apply c-bg-tertiary c-border-transparent c-text-onTertiary;
|
|
110
110
|
|
|
111
111
|
.cobalt-button__loading-icon {
|
|
112
112
|
@apply c-text-onTertiary;
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
&.cobalt-button--secondary {
|
|
117
|
-
@apply c-bg-secondary c-text-onSecondary;
|
|
117
|
+
@apply c-bg-secondary c-border-transparent c-text-onSecondary;
|
|
118
118
|
|
|
119
119
|
.cobalt-button__loading-icon {
|
|
120
120
|
@apply c-text-onSecondary;
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
&.cobalt-button--business {
|
|
125
|
-
@apply c-bg-businessContainer c-text-onBusinessContainer;
|
|
125
|
+
@apply c-bg-businessContainer c-border-transparent c-text-onBusinessContainer;
|
|
126
126
|
|
|
127
127
|
.cobalt-button__loading-icon {
|
|
128
128
|
@apply c-text-onBusinessContainer;
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
&.cobalt-button--success {
|
|
133
|
-
@apply c-bg-success c-text-onSuccess;
|
|
133
|
+
@apply c-bg-success c-border-transparent c-text-onSuccess;
|
|
134
134
|
|
|
135
135
|
.cobalt-button__loading-icon {
|
|
136
136
|
@apply c-text-onSuccess;
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
&.cobalt-button--neutral {
|
|
141
|
-
@apply c-bg-neutral c-text-onNeutral;
|
|
141
|
+
@apply c-bg-neutral c-border-transparent c-text-onNeutral;
|
|
142
142
|
|
|
143
143
|
.cobalt-button__loading-icon {
|
|
144
144
|
@apply c-text-onNeutral;
|
|
@@ -27,33 +27,24 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
&__Label {
|
|
30
|
-
@apply
|
|
30
|
+
@apply cobalt-button;
|
|
31
|
+
@apply c-text-onSurface c-font-regular c-font-base;
|
|
31
32
|
position: relative;
|
|
32
33
|
|
|
33
34
|
display: flex;
|
|
34
35
|
align-items: center;
|
|
35
36
|
height: $height;
|
|
36
|
-
box-sizing: border-box;
|
|
37
37
|
|
|
38
38
|
// We remove the border-bottom and border-top width
|
|
39
39
|
line-height: $height - 2px * 2;
|
|
40
40
|
|
|
41
|
-
border-radius: math.div($height, 2);
|
|
42
|
-
|
|
43
|
-
&:hover {
|
|
44
|
-
box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
|
|
45
|
-
|
|
46
|
-
transform: translateY(-1px);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
41
|
&:after {
|
|
42
|
+
@apply c-rounded-lg;
|
|
50
43
|
top: -1 * $toggle-switch-focus-offset;
|
|
51
44
|
left: -1 * $toggle-switch-focus-offset;
|
|
52
45
|
|
|
53
46
|
height: calc(100% + #{($toggle-switch-focus-offset) * 2});
|
|
54
47
|
width: calc(100% + #{($toggle-switch-focus-offset) * 2});
|
|
55
|
-
|
|
56
|
-
border-radius: math.div($height, 2);
|
|
57
48
|
}
|
|
58
49
|
}
|
|
59
50
|
|
|
@@ -77,7 +68,7 @@
|
|
|
77
68
|
}
|
|
78
69
|
|
|
79
70
|
&__Input:checked + #{ $self }__Label {
|
|
80
|
-
@apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer c-border-
|
|
71
|
+
@apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer c-border c-outline c-outline-1;
|
|
81
72
|
}
|
|
82
73
|
|
|
83
74
|
&--with-icon {
|
|
@@ -5,5 +5,6 @@ interface ButtonOverloads {
|
|
|
5
5
|
(props: Exclude<ButtonProps, ButtonLinkComponentProps> & React.RefAttributes<HTMLButtonElement>): React.ReactElement;
|
|
6
6
|
displayName?: string;
|
|
7
7
|
}
|
|
8
|
+
export type CobaltButtonElement = React.ReactElement<React.ComponentProps<typeof Button>, typeof Button>;
|
|
8
9
|
declare const Button: ButtonOverloads;
|
|
9
10
|
export default Button;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
2
|
+
import type { CobaltButtonElement } from "../Buttons/Button";
|
|
3
3
|
export interface EmptyStateProps {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
title: string;
|
|
6
|
-
action?:
|
|
7
|
-
secondaryAction?:
|
|
6
|
+
action?: CobaltButtonElement;
|
|
7
|
+
secondaryAction?: CobaltButtonElement;
|
|
8
8
|
image: string;
|
|
9
9
|
}
|
|
10
10
|
export declare const EmptyState: ({ title, children, action, secondaryAction, image, }: EmptyStateProps) => React.JSX.Element;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import
|
|
2
|
+
import type { CobaltButtonElement } from "../Buttons/Button";
|
|
3
3
|
type HelperPropsType = {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
className?: string;
|
|
6
6
|
title: string;
|
|
7
7
|
titleClassName?: string;
|
|
8
8
|
contentClassName?: string;
|
|
9
|
-
cta?:
|
|
9
|
+
cta?: CobaltButtonElement;
|
|
10
10
|
};
|
|
11
11
|
declare const Helper: ({ className, titleClassName, contentClassName, title, children, cta, }: HelperPropsType) => React.JSX.Element;
|
|
12
12
|
export default Helper;
|