diff --git a/libs/alert/src/Modal.tsx b/libs/alert/src/Modal.tsx index dbcad57..1bbea79 100644 --- a/libs/alert/src/Modal.tsx +++ b/libs/alert/src/Modal.tsx @@ -169,12 +169,12 @@ function Modal({ isOpen, onClose, state, icon, children, canDismiss tokens.Container.Content.container.backgroundColor, tokens.Container.Content.container.borderRadius, tokens.Container.Content.container.padding, - tokens.Container.Content.container.boxShadow + tokens.Container.Content.container.boxShadow, ); const overlayInnerClassName = cx( tokens.Container.Overlay.inner.master, - tokens.Container.Overlay.inner.backgroundColor + tokens.Container.Overlay.inner.backgroundColor, ); return ( @@ -211,7 +211,7 @@ function ModalDismiss({ ariaLabel = "Close", dismissIcon, ...props }: ModalDismi const dismissButtonClassName = cx( tokens.Dismiss.button.master, tokens.Dismiss.button.color, - tokens.Dismiss.button.hover + tokens.Dismiss.button.hover, ); const finalDismissIcon = useIcon("dismiss", dismissIcon); @@ -230,7 +230,7 @@ function ModalContent({ title, children, ...props }: ModalContentProps) { tokens.Content.title.fontSize, tokens.Content.title.lineHeight, tokens.Content.title.fontWeight, - tokens.Content.title.color + tokens.Content.title.color, ); return ( diff --git a/libs/core/src/PageHeading.tsx b/libs/core/src/PageHeading.tsx index 76ee1c1..cff4ddb 100644 --- a/libs/core/src/PageHeading.tsx +++ b/libs/core/src/PageHeading.tsx @@ -87,7 +87,7 @@ function PageHeading({ children, className, ...props }: PageHeadingProps) { return (
{breadcrumbs &&
{breadcrumbs}
} -
+
{title && (
{title} @@ -128,7 +128,7 @@ function PageHeadingTitle({ children, ...props }: PageHeadingTitleProps) { tokens.title.fontSize, tokens.title.fontWeight, tokens.title.lineHeight, - tokens.title.color + tokens.title.color, ); return

{children}

; } @@ -144,7 +144,7 @@ function PageHeadingSubtitle({ children, ...props }: PageHeadingSubtitleProps) { tokens.subtitle.marginTop, tokens.subtitle.fontSize, tokens.subtitle.lineHeight, - tokens.subtitle.color + tokens.subtitle.color, ); return

{children}

; } diff --git a/libs/core/src/ProgressBar.tsx b/libs/core/src/ProgressBar.tsx index 22a8483..b701eb6 100644 --- a/libs/core/src/ProgressBar.tsx +++ b/libs/core/src/ProgressBar.tsx @@ -137,6 +137,7 @@ export function Step({ active, children, ...props }: StepProps) { const indexIconDivClassName = cx( tokens.indexIcon.master, + tokens.indexIcon.borderRadius, { [tokens.indexIcon.backgroundColor]: before || completed }, { [tokens.indexIcon.borderWidth]: (active || after) && !completed }, { [tokens.indexIcon.borderColor]: active }, @@ -145,6 +146,9 @@ export function Step({ active, children, ...props }: StepProps) { const textIndexClassName = cx( tokens.textIndex.master, + tokens.textIndex.fontSize, + tokens.textIndex.fontWeight, + tokens.textIndex.lineHeight, { [tokens.textIndex.color]: active && !completed }, { [tokens.textIndex.beforeTextColor]: before || completed }, { [tokens.textIndex.afterTextColor]: after }, @@ -154,9 +158,6 @@ export function Step({ active, children, ...props }: StepProps) { tokens.stepContainer.master, tokens.stepContainer.padding, tokens.stepContainer.margin, - tokens.stepContainer.fontSize, - tokens.stepContainer.fontWeight, - tokens.stepContainer.lineHeight, ); const finalCompletedIcon = useIcon("completed", props.completedIcon, { diff --git a/libs/date/src/DatePicker.tsx b/libs/date/src/DatePicker.tsx index 0970e13..c0a70ff 100644 --- a/libs/date/src/DatePicker.tsx +++ b/libs/date/src/DatePicker.tsx @@ -503,7 +503,10 @@ function DatePickerDay({ dayLabel, date, ...props }: DatePickerDayProps) { const dayButtonClassName = cx( tokens.DatePicker.Button.base, - { [tokens.DatePicker.Button.selected]: datePicker.isDateSelected(date) }, + { + [tokens.DatePicker.Button.selected]: + datePicker.isDateSelected(date) && !datePicker.isFirstOrLastSelectedDate(date), + }, { [tokens.DatePicker.Button.firstOrLast]: datePicker.isFirstOrLastSelectedDate(date) }, { [tokens.DatePicker.Button.hovered]: datePicker.isDateHovered(date) && isDateRange }, { diff --git a/libs/form-elements/src/Toggle.tsx b/libs/form-elements/src/Toggle.tsx index bf90416..2d85c00 100644 --- a/libs/form-elements/src/Toggle.tsx +++ b/libs/form-elements/src/Toggle.tsx @@ -83,22 +83,23 @@ export default function Toggle({ tokens.base, { [tokens.backgroundColor]: checked }, { [tokens.gray]: !checked }, - { [tokens.disabled]: disabled } + { [tokens.disabled]: disabled }, ); const toggleClassName = cx( tokens.toggle, { "translate-x-5": checked }, { "translate-x-0": !checked }, - { [tokens.disabled]: disabled } + { [tokens.disabled]: disabled }, ); + const iconClassName = cx(tokens.icon.master, tokens.icon.margin); const finalCheckedIcon = useIcon("completed", checkedIcon, { - className: "flex items-center mt-[3px] ml-[3px]", - size: 3, + className: iconClassName, + size: tokens.icon.size, }); const finalUncheckedIcon = useIcon("dismiss", uncheckedIcon, { - className: "flex items-center mt-[3px] ml-[3px]", - size: 3, + className: iconClassName, + size: tokens.icon.size, }); return ( diff --git a/libs/menu/src/DropdownMenu.tsx b/libs/menu/src/DropdownMenu.tsx index 45ee2d2..c7aacb3 100644 --- a/libs/menu/src/DropdownMenu.tsx +++ b/libs/menu/src/DropdownMenu.tsx @@ -41,13 +41,13 @@ export type DropdownMenuMenuProps = { /** * Custom icon serving as a dropdown menu open button. - * If you wish to show this icon as a leading icon (before the title), set the 'leadingIcon' prop to 'true'. + * If you wish to show this icon as a leading icon (before the title), set the 'iconPlacement' prop to 'leading'. */ openExpanderIcon?: React.ReactElement; /** * Custom icon serving as a dropdown menu close button. - * If you wish to show this icon as a leading icon (before the title), set the 'leadingIcon' prop to 'true'. + * If you wish to show this icon as a leading icon (before the title), set the 'iconPlacement' prop to 'leading'. */ closeExpanderIcon?: React.ReactElement; @@ -123,7 +123,7 @@ function DropdownMenu({ const iconClassName = cx( { [tokens.Icon.color.default]: iconColor === "default" }, { [tokens.Icon.color.dark]: iconColor === "dark" }, - { [tokens.Icon.color.light]: iconColor === "light" } + { [tokens.Icon.color.light]: iconColor === "light" }, ); const iconProps = { className: iconClassName, size: 3 }; @@ -139,7 +139,7 @@ function DropdownMenu({ ); return ( - + {menuType === "text" && ( - @@ -80,8 +80,21 @@ export const WithState = () => { - } className="text-white" />}> - }> + } + tokens={{ + Icon: { + backgroundColor: "bg-primary", + }, + }} + className="text-white" + /> + } + > + }> {modal.state} @@ -110,10 +123,23 @@ export const WithStateRenderProp = () => { - } className="text-white" />}> + } + tokens={{ + Icon: { + backgroundColor: "bg-primary", + }, + }} + className="text-white" + /> + } + > {(state) => ( <> - }> + }> {state} @@ -147,7 +173,7 @@ export const WithoutIcon = () => { - , - , + , + , ], onDismiss: () => {}, - }; + }; - const withActionsRight: NotificationProps = { + const withActionsRight: NotificationProps = { title: "With Actions Right", content: "Anyone with a link can now view this file.", icon: , closeButton: false, actions: [Reply], onDismiss: () => {}, - }; - - return ( -
- - - - - - -
- ); + }; + + return ( +
+ + + + + + +
+ ); } ``` @@ -123,4 +122,5 @@ The story below demonstrates the functionality of the `NotificationProvider` wit ## Notification Provider Tokens: - + + diff --git a/storybook/src/core/ProgressBar.stories.tsx b/storybook/src/core/ProgressBar.stories.tsx index 0d3f79f..27b0435 100644 --- a/storybook/src/core/ProgressBar.stories.tsx +++ b/storybook/src/core/ProgressBar.stories.tsx @@ -70,7 +70,7 @@ export const Checked = () => { return ( - + Preparing @@ -79,7 +79,7 @@ export const Checked = () => { Created - + Reviewed diff --git a/storybook/src/data-display/DataTable.stories.tsx b/storybook/src/data-display/DataTable.stories.tsx index c491cda..8d2b82f 100644 --- a/storybook/src/data-display/DataTable.stories.tsx +++ b/storybook/src/data-display/DataTable.stories.tsx @@ -27,7 +27,7 @@ import { Icon } from "@tiller-ds/icons"; import { DropdownMenu } from "@tiller-ds/menu"; import { defaultThemeConfig } from "@tiller-ds/theme"; -import { getChangedTokensFromSource, showFactoryDecorator } from "../utils"; +import { beautifySource, getChangedTokensFromSource, showFactoryDecorator } from "../utils"; import mdx from "./DataTable.mdx"; @@ -37,7 +37,7 @@ export default { parameters: { docs: { page: mdx, - source: { type: "dynamic", excludeDecorators: true }, + source: { type: "auto", excludeDecorators: true }, transformSource: (source) => { const correctedSource = source .replace(/DataTableCardHeaderTitle/g, "DataTable.CardHeader.Title") @@ -51,7 +51,7 @@ export default { .replace(/DataTableExpander/g, "DataTable.Expander") .replace(/DataTableSelector/g, "DataTable.Selector") .replace(/function noRefCheck\(\)\s\{\}/g, "() => {}"); - return getChangedTokensFromSource(correctedSource, "DataTable"); + return beautifySource(getChangedTokensFromSource(correctedSource, "DataTable")); }, }, design: { diff --git a/storybook/src/date/DateInput.stories.tsx b/storybook/src/date/DateInput.stories.tsx index a9495ec..fc57a15 100644 --- a/storybook/src/date/DateInput.stories.tsx +++ b/storybook/src/date/DateInput.stories.tsx @@ -25,7 +25,7 @@ import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; import storybookDictionary from "../intl/storybookDictionary"; -import { beautifyDateSource } from "../utils"; +import { beautifySource } from "../utils"; import mdx from "./DateInput.mdx"; @@ -36,7 +36,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source: string) => beautifyDateSource(source), + transformSource: (source: string) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/date/DateRangeInput.stories.tsx b/storybook/src/date/DateRangeInput.stories.tsx index 0d13a3d..4866986 100644 --- a/storybook/src/date/DateRangeInput.stories.tsx +++ b/storybook/src/date/DateRangeInput.stories.tsx @@ -25,7 +25,7 @@ import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; import storybookDictionary from "../intl/storybookDictionary"; -import { beautifyDateSource } from "../utils"; +import { beautifySource } from "../utils"; import mdx from "./DateRangeInput.mdx"; @@ -40,7 +40,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source: string) => beautifyDateSource(source), + transformSource: (source: string) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/date/DateTimeInput.stories.tsx b/storybook/src/date/DateTimeInput.stories.tsx index 3bc50ef..52ed1c4 100644 --- a/storybook/src/date/DateTimeInput.stories.tsx +++ b/storybook/src/date/DateTimeInput.stories.tsx @@ -25,7 +25,7 @@ import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; import storybookDictionary from "../intl/storybookDictionary"; -import { beautifyDateSource } from "../utils"; +import { beautifySource } from "../utils"; import mdx from "./DateTimeInput.mdx"; @@ -40,7 +40,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source: string) => beautifyDateSource(source), + transformSource: (source: string) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/date/TimeInput.stories.tsx b/storybook/src/date/TimeInput.stories.tsx index 2f02690..bcdbce4 100644 --- a/storybook/src/date/TimeInput.stories.tsx +++ b/storybook/src/date/TimeInput.stories.tsx @@ -25,7 +25,7 @@ import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; import storybookDictionary from "../intl/storybookDictionary"; -import { beautifyDateSource } from "../utils"; +import { beautifySource } from "../utils"; import mdx from "./TimeInput.mdx"; @@ -36,7 +36,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source: string) => beautifyDateSource(source), + transformSource: (source: string) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/formik-elements/DateInputField.stories.tsx b/storybook/src/formik-elements/DateInputField.stories.tsx index 2b16edc..2d75d99 100644 --- a/storybook/src/formik-elements/DateInputField.stories.tsx +++ b/storybook/src/formik-elements/DateInputField.stories.tsx @@ -25,7 +25,7 @@ import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; import storybookDictionary from "../intl/storybookDictionary"; -import { beautifyDateSource, FormikDecorator } from "../utils"; +import { beautifySource, FormikDecorator } from "../utils"; import mdx from "./DateInputField.mdx"; @@ -55,7 +55,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source) => beautifyDateSource(source), + transformSource: (source) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/formik-elements/DateRangeInputField.stories.tsx b/storybook/src/formik-elements/DateRangeInputField.stories.tsx index f50f9e8..23fc76c 100644 --- a/storybook/src/formik-elements/DateRangeInputField.stories.tsx +++ b/storybook/src/formik-elements/DateRangeInputField.stories.tsx @@ -20,7 +20,7 @@ import * as React from "react"; import { withDesign } from "storybook-addon-designs"; import { DateRangeInputField } from "@tiller-ds/formik-elements"; -import { beautifyDateSource, FormikDecorator } from "../utils"; +import { beautifySource, FormikDecorator } from "../utils"; import { Tooltip } from "@tiller-ds/core"; import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; @@ -63,7 +63,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source) => beautifyDateSource(source), + transformSource: (source) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/formik-elements/DateTimeInputField.stories.tsx b/storybook/src/formik-elements/DateTimeInputField.stories.tsx index 3fed7b5..f4c68e3 100644 --- a/storybook/src/formik-elements/DateTimeInputField.stories.tsx +++ b/storybook/src/formik-elements/DateTimeInputField.stories.tsx @@ -20,7 +20,7 @@ import * as React from "react"; import { withDesign } from "storybook-addon-designs"; import { DateTimeInputField } from "@tiller-ds/formik-elements"; -import { beautifyDateSource, FormikDecorator } from "../utils"; +import { beautifySource, FormikDecorator } from "../utils"; import { Tooltip } from "@tiller-ds/core"; import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; @@ -55,7 +55,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source) => beautifyDateSource(source), + transformSource: (source) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/formik-elements/TimeInputField.stories.tsx b/storybook/src/formik-elements/TimeInputField.stories.tsx index 2ae0dbe..18888f0 100644 --- a/storybook/src/formik-elements/TimeInputField.stories.tsx +++ b/storybook/src/formik-elements/TimeInputField.stories.tsx @@ -25,7 +25,7 @@ import { Icon } from "@tiller-ds/icons"; import { Intl } from "@tiller-ds/intl"; import storybookDictionary from "../intl/storybookDictionary"; -import { beautifyDateSource, FormikDecorator } from "../utils"; +import { beautifySource, FormikDecorator } from "../utils"; import mdx from "./TimeInputField.mdx"; @@ -64,7 +64,7 @@ export default { docs: { page: mdx, source: { type: "auto", excludeDecorators: true }, - transformSource: (source) => beautifyDateSource(source), + transformSource: (source) => beautifySource(source), }, design: { type: "figma", diff --git a/storybook/src/intl/storybookDictionary.js b/storybook/src/intl/storybookDictionary.js index b89b216..284a564 100644 --- a/storybook/src/intl/storybookDictionary.js +++ b/storybook/src/intl/storybookDictionary.js @@ -66,10 +66,13 @@ export default { signOut: "Odjava", events: "Događaji", modalTitle: "Plaćanje uspješno", + modalOpenTitle: "Modal otvoren", modalContent: "Transakcija je uspješno izvršena.", modalCounter: "Koliko je puta ovaj modal otvoren: ", notificationTitle: "Uspješno spremljeno!", + notificationErrorTitle: "Dogodila se greška!", notificationContent: "Bilo tko s linkom sada može pregledati ovu datoteku.", + notificationErrorContent: "Nije moguće izvršiti željenu radnju.", errorLog: "Vidi zapisnik grešaka", badgeContent: "Badge", badgeBasic: "Zadana veličina", @@ -136,10 +139,13 @@ export default { signOut: "Sign Out", events: "Events", modalTitle: "Payment Successful", + modalOpenTitle: "Modal Opened", modalContent: "The transaction was successfully executed", modalCounter: "Number of times this modal was open: ", notificationTitle: "Successfully saved!", + notificationErrorTitle: "There was an error!", notificationContent: "Anyone with a link can now view this file.", + notificationErrorContent: "The action cannot be executed.", errorLog: "See error log", badgeContent: "Badge", badgeBasic: "Basic size", diff --git a/storybook/src/upload/FileList.stories.tsx b/storybook/src/upload/FileList.stories.tsx index b421387..29c18e1 100644 --- a/storybook/src/upload/FileList.stories.tsx +++ b/storybook/src/upload/FileList.stories.tsx @@ -76,18 +76,12 @@ export const WithActions = () => { {file.name} Download - - { - return helpers.deleteFile(file); - }} - > - Delete - - + helpers.deleteFile(file)}>Delete { return helpers.deleteFile(file); }} diff --git a/storybook/src/utils/index.tsx b/storybook/src/utils/index.tsx index 5d04578..289d570 100644 --- a/storybook/src/utils/index.tsx +++ b/storybook/src/utils/index.tsx @@ -25,4 +25,4 @@ export { default as FormikDecorator } from "./FormikDecorator"; export { default as promiseTimeout } from "./promiseTimeout"; export { default as useMockSender } from "./useMockSender"; export { default as ThemeTokens } from "./ThemeTokens"; -export { getChangedTokensFromSource, getObjectDiff, showFactoryDecorator, beautifyDateSource } from "./utils"; +export { getChangedTokensFromSource, getObjectDiff, showFactoryDecorator, beautifySource } from "./utils"; diff --git a/storybook/src/utils/utils.tsx b/storybook/src/utils/utils.tsx index 909a7fc..46b1c07 100644 --- a/storybook/src/utils/utils.tsx +++ b/storybook/src/utils/utils.tsx @@ -73,7 +73,7 @@ export function showFactoryDecorator(flex = false) { ]; } -export function beautifyDateSource(source) { +export function beautifySource(source) { const correctedSource = source .replace(/{name}/g, '"test"') .replace(/{}/g, '"Test label"') @@ -81,7 +81,10 @@ export function beautifyDateSource(source) { .replace(/{}/g, '"Test tooltip content"') .replace(/function noRefCheck\(\)\s\{\}/g, "() => {}"); if (correctedSource.indexOf("incl-code") === -1) { - return correctedSource.substring(correctedSource.indexOf("<"), correctedSource.lastIndexOf("/>") + 2); + return correctedSource.substring(correctedSource.indexOf("<"), correctedSource.lastIndexOf(">") + 1); } - return correctedSource.substring(correctedSource.indexOf("incl-code") + "incl-code".length); + return correctedSource.substring( + correctedSource.indexOf("incl-code") + "incl-code".length, + correctedSource.lastIndexOf(";") + 1, + ); }