From d60e853f130f4821ad01e049411e933b9153312d Mon Sep 17 00:00:00 2001 From: Amee Morris Date: Fri, 27 Oct 2023 14:57:30 +0100 Subject: [PATCH 01/15] prepend -gui to all classnames --- assets/loading.svg | 12 +- lib/Avatar/AvatarGroup/index.tsx | 19 ++- lib/Avatar/AvatarGroup/styles.scss | 32 ++--- lib/Avatar/AvatarInformation.tsx | 8 +- lib/Avatar/AvatarWithPopover.tsx | 4 +- lib/Avatar/README.md | 41 +++--- lib/Avatar/index.tsx | 66 +++++---- lib/Avatar/stories/Avatar.stories.tsx | 2 +- lib/Avatar/stories/AvatarGroupMock.tsx | 2 +- lib/Avatar/styles.scss | 94 ++++++------- lib/BlankSlate/.specs/BlankSlate.spec.tsx | 2 +- lib/BlankSlate/index.tsx | 15 +- lib/BlankSlate/styles.scss | 8 +- lib/BoundaryClickWatcher/index.tsx | 2 +- lib/BoundaryClickWatcher/styles.scss | 2 +- lib/Breadcrumb/BreadcrumbItem.tsx | 2 +- lib/Breadcrumb/index.tsx | 2 +- lib/Breadcrumb/styles.scss | 22 +-- lib/Button/index.tsx | 4 +- lib/Button/styles.scss | 128 ++++++++--------- lib/ButtonGroup/ButtonGroup.tsx | 2 +- lib/ButtonGroup/styles.scss | 10 +- lib/CheckToggle/index.tsx | 22 +-- lib/CheckToggle/styles.scss | 56 ++++---- lib/ColField/ColField.tsx | 31 ++-- lib/ColField/ColFieldBody.tsx | 2 +- lib/ColField/ColFieldFooter.tsx | 2 +- lib/ColField/ColFieldHeader.tsx | 2 +- lib/ColField/ColFieldInstructions.tsx | 2 +- lib/ColField/ColFieldLabel.tsx | 4 +- lib/ColField/styles.scss | 10 +- lib/CollectionsTable/CollectionsTableCell.tsx | 6 +- .../CollectionsTableCellContent.tsx | 4 +- lib/CollectionsTable/CollectionsTableHead.tsx | 2 +- .../CollectionsTableHeading.tsx | 2 +- lib/CollectionsTable/CollectionsTableRow.tsx | 8 +- lib/CollectionsTable/index.tsx | 6 +- lib/CollectionsTable/styles.scss | 70 +++++----- lib/Comment/Comment.tsx | 2 +- lib/Comment/CommentBody.tsx | 4 +- lib/Comment/CommentDeleteConfirmation.tsx | 2 +- lib/Comment/CommentForm.tsx | 12 +- lib/Comment/CommentHeader.tsx | 4 +- lib/Comment/CommentMeta.tsx | 2 +- lib/Comment/CommentText.tsx | 4 +- lib/Comment/styles.scss | 24 ++-- .../.specs/ConfirmationDropdown.spec.tsx | 111 ++++++++------- .../ConfirmationDropdownContent.tsx | 6 +- lib/ConfirmationDropdown/README.md | 32 +++-- lib/ConfirmationDropdown/index.tsx | 6 +- lib/ConfirmationDropdown/styles.scss | 20 +-- lib/ConfirmationOverlay/index.tsx | 6 +- lib/ConfirmationOverlay/styles.scss | 6 +- lib/Conversation/Conversation.tsx | 2 +- lib/Conversation/ConversationFooter.tsx | 2 +- lib/Conversation/ConversationHeader.tsx | 2 +- lib/Conversation/styles.scss | 98 ++++++------- lib/ConversationContext/index.tsx | 4 +- lib/ConversationContext/styles.scss | 6 +- lib/Counter/index.tsx | 2 +- lib/Counter/styles.scss | 12 +- lib/DismissiblePrompt/README.md | 14 +- lib/DismissiblePrompt/index.tsx | 6 +- lib/DismissiblePrompt/styles.scss | 2 +- lib/DnD/DragLine.tsx | 6 +- lib/DnD/stories/DndDropNotification.tsx | 2 +- lib/DnD/stories/FolderDndMock.tsx | 4 +- lib/DnD/stories/ItemDndMock.tsx | 2 +- lib/DnD/styles.scss | 8 +- lib/Dropdown/DropdownAction.tsx | 14 +- lib/Dropdown/DropdownActionGroup.tsx | 8 +- lib/Dropdown/DropdownContent.tsx | 20 +-- lib/Dropdown/DropdownFooter.tsx | 2 +- lib/Dropdown/DropdownHeader.tsx | 4 +- lib/Dropdown/DropdownInfo.tsx | 2 +- lib/Dropdown/DropdownProvider.tsx | 8 +- lib/Dropdown/DropdownSection.tsx | 2 +- lib/Dropdown/DropdownTrigger.tsx | 12 +- lib/Dropdown/styles.scss | 132 +++++++++--------- lib/DropdownMenu/DropdownMenuItem.tsx | 30 ++-- lib/DropdownMenu/index.tsx | 28 ++-- lib/DropdownMenu/styles.scss | 90 ++++++------ lib/DueDatePicker/DueDateButton.tsx | 8 +- lib/DueDatePicker/DueDateHeader.tsx | 14 +- lib/DueDatePicker/DueDateLabel.tsx | 8 +- lib/DueDatePicker/DueDateTime.tsx | 4 +- lib/DueDatePicker/index.tsx | 16 +-- lib/DueDatePicker/styles.scss | 78 ++++++----- lib/EditableChoiceInput/index.tsx | 6 +- .../EditableTextWrapperInput.tsx | 15 +- .../EditableTextWrapperText.tsx | 10 +- lib/EditableTextWrapper/styles.scss | 18 +-- lib/ExpandingTextArea/index.tsx | 25 ++-- lib/ExpandingTextArea/styles.scss | 2 +- lib/FigurePlaceholder/FigurePlaceholder.tsx | 4 +- lib/FigurePlaceholder/styles.scss | 2 +- lib/FinderNavigation/FinderGroup.tsx | 8 +- lib/FinderNavigation/FinderItem.tsx | 10 +- lib/FinderNavigation/FinderItemContent.tsx | 8 +- lib/FinderNavigation/FinderItemSettings.tsx | 4 +- lib/FinderNavigation/index.tsx | 2 +- lib/FinderNavigation/styles.scss | 98 ++++++------- .../FinderPanelLayoutHeader.tsx | 4 +- .../FinderPanelLayoutLeft.tsx | 2 +- .../FinderPanelLayoutLeftContent.tsx | 2 +- .../FinderPanelLayoutRight.tsx | 4 +- lib/FinderPanelLayout/index.tsx | 2 +- lib/FinderPanelLayout/styles.scss | 8 +- lib/FolderRow/FolderRow.tsx | 4 +- lib/FolderRow/FolderRowAction.tsx | 2 +- lib/FolderRow/FolderRowActions.tsx | 2 +- lib/FolderRow/FolderRowAside.tsx | 2 +- lib/FolderRow/FolderRowCell.tsx | 4 +- lib/FolderRow/FolderRowContents.tsx | 4 +- lib/FolderRow/FolderRowInner.tsx | 2 +- lib/FolderRow/FolderRowName.tsx | 8 +- lib/FolderRow/stories/FolderRow.stories.tsx | 14 +- lib/FolderRow/styles.scss | 46 +++--- lib/Form/Checkbox/Input.tsx | 2 +- lib/Form/Checkbox/index.tsx | 2 +- lib/Form/FormFooter.tsx | 2 +- lib/Form/FormGroup.tsx | 2 +- lib/Form/FormInput.tsx | 16 +-- lib/Form/Label/index.tsx | 22 +-- lib/Form/README.md | 42 +++--- lib/Form/RadioButton/Input.tsx | 2 +- lib/Form/RadioButton/Other.tsx | 12 +- lib/Form/RadioButton/index.tsx | 2 +- lib/Form/index.tsx | 2 +- lib/Form/styles.scss | 68 ++++----- lib/Guideline/index.tsx | 12 +- lib/Guideline/styles.scss | 14 +- lib/Hierarchy/styles.scss | 4 +- lib/Icon/README.md | 25 ++-- lib/Icon/index.tsx | 22 +-- lib/Icon/styles.scss | 60 ++++---- .../InputConfirmationModal.tsx | 2 +- lib/InputConfirmationModal/styles.scss | 14 +- lib/InputWithButton/index.tsx | 8 +- lib/InputWithButton/styles.scss | 12 +- lib/ItemRow/ItemRowAside.tsx | 2 +- lib/ItemRow/ItemRowData.tsx | 2 +- lib/ItemRow/ItemRowName.tsx | 2 +- lib/ItemRow/README.md | 15 +- lib/ItemRow/index.tsx | 8 +- lib/ItemRow/stories/ItemRow.stories.tsx | 7 +- lib/ItemRow/styles.scss | 44 +++--- lib/Layout/Body.tsx | 2 +- lib/Layout/Footer.tsx | 2 +- lib/Layout/Header.tsx | 2 +- lib/Layout/InlineSidebar.tsx | 4 +- lib/Layout/LayoutOverlaySidebar.tsx | 2 +- lib/Layout/Main.tsx | 2 +- lib/Layout/Section.tsx | 2 +- lib/Layout/SubHeader.tsx | 2 +- lib/Layout/index.tsx | 2 +- lib/Layout/styles.scss | 2 +- lib/List/ListHead.tsx | 8 +- lib/List/ListItem.tsx | 24 ++-- lib/List/index.tsx | 16 ++- lib/List/styles.scss | 68 ++++----- lib/LoadingOverlay/index.tsx | 10 +- lib/LoadingOverlay/styles.scss | 22 +-- lib/Logo/index.tsx | 4 +- lib/Logo/styles.scss | 4 +- lib/LogoGC/index.tsx | 6 +- lib/LogoGC/styles.scss | 2 +- lib/Modal/Modal.tsx | 20 +-- lib/Modal/ModalBody.tsx | 2 +- lib/Modal/ModalColumn.tsx | 4 +- lib/Modal/ModalFooter.tsx | 6 +- lib/Modal/ModalHeader.tsx | 4 +- lib/Modal/ModalHeaderNavigation.tsx | 4 +- lib/Modal/styles.scss | 120 ++++++++-------- lib/Navigation/index.tsx | 8 +- lib/Navigation/styles.scss | 18 +-- lib/Notification/bar/NotificationBarBase.tsx | 6 +- lib/Notification/blip/NotificationBlip.tsx | 8 +- .../blip/styles/NotificationBlip.scss | 4 +- .../inline/NotificationInlineBase.tsx | 5 +- lib/Notification/styles.scss | 2 +- lib/PageInformation/index.tsx | 12 +- lib/PageInformation/styles.scss | 12 +- lib/ParticipantInfo/index.tsx | 6 +- lib/ParticipantInfo/styles.scss | 6 +- lib/Pill/PillBase.tsx | 2 +- lib/Pill/PillBeta.tsx | 2 +- lib/Pill/PillBlueWhiteText.tsx | 2 +- lib/Pill/PillGreen.tsx | 2 +- lib/Pill/PillGreenWhiteText.tsx | 2 +- lib/Pill/PillPurple.tsx | 2 +- lib/Pill/PillRed.tsx | 2 +- lib/Pill/PillYellow.tsx | 2 +- lib/Pill/stories/Pill.stories.tsx | 78 ++++++----- lib/PillInput/DeleteablePill.tsx | 2 +- lib/PillInput/PillInput/PillInput.tsx | 6 +- lib/PillInput/styles.scss | 6 +- lib/Pillbox/styles.scss | 4 +- lib/Progress/Bar/index.tsx | 2 +- lib/Progress/Unit/index.tsx | 2 +- lib/Progress/styles.scss | 4 +- lib/ProgressButton/index.tsx | 8 +- lib/ProgressButton/styles.scss | 12 +- lib/Resizable/index.tsx | 8 +- lib/Resizable/styles.scss | 8 +- lib/Search/SearchBody.tsx | 4 +- lib/Search/SearchBoundaryListener.tsx | 2 +- lib/Search/SearchInput.tsx | 10 +- lib/Search/SearchList.tsx | 4 +- lib/Search/SearchListItem.tsx | 10 +- lib/Search/SearchOptions.tsx | 2 +- lib/Search/ToggleFilter.tsx | 2 +- lib/Search/styles.scss | 42 +++--- lib/SearchDropdown/SearchResults.tsx | 9 +- lib/SearchDropdown/index.tsx | 22 +-- lib/SearchDropdown/styles.scss | 10 +- lib/SearchInput/index.tsx | 2 +- lib/SectionFeature/SectionFeature.tsx | 6 +- lib/SectionFeature/styles.scss | 8 +- lib/SectionHeader/README.md | 18 ++- lib/SectionHeader/SectionHeaderTitle.tsx | 2 +- lib/SectionHeader/index.tsx | 8 +- lib/SectionHeader/styles.scss | 12 +- lib/SelectionBar/SelectionBarAction.tsx | 2 +- lib/SelectionBar/SelectionBarActions.tsx | 2 +- lib/SelectionBar/SelectionBarCancel.tsx | 6 +- lib/SelectionBar/SelectionBarCounter.tsx | 4 +- lib/SelectionBar/SelectionBarDivider.tsx | 2 +- lib/SelectionBar/SelectionBarInformation.tsx | 2 +- lib/SelectionBar/index.tsx | 8 +- lib/SelectionBar/styles.scss | 22 +-- lib/SelectionModal/SelectionModal.tsx | 2 +- lib/SelectionModal/styles.scss | 2 +- lib/Shortcut/ShortcutIcon.tsx | 2 +- lib/Shortcut/index.tsx | 10 +- lib/Shortcut/styles.scss | 26 ++-- lib/StatusIndicator/index.tsx | 42 +++--- lib/StatusIndicator/styles.scss | 63 +++++---- lib/TabsNew/TabAside.tsx | 2 +- lib/TabsNew/TabDragLine.tsx | 2 +- lib/TabsNew/TabName.tsx | 2 +- lib/TabsNew/TabNameForm.tsx | 2 +- lib/TabsNew/TabOptions.tsx | 4 +- lib/TabsNew/TabsActionGroup.tsx | 2 +- lib/TabsNew/TabsGroup.tsx | 2 +- lib/TabsNew/TabsRow.tsx | 4 +- lib/TabsNew/index.tsx | 2 +- lib/TabsNew/styles.scss | 8 +- lib/TooltipWrapper/index.tsx | 2 +- lib/TooltipWrapper/styles.scss | 6 +- lib/TopBar/TopBarCell.tsx | 4 +- lib/TopBar/TopBarContent.tsx | 10 +- lib/TopBar/TopBarGroup.tsx | 4 +- lib/TopBar/index.tsx | 14 +- lib/TopBar/styles.scss | 72 +++++----- lib/TreeLines/index.tsx | 4 +- lib/TreeLines/stories/TreeLines.stories.tsx | 26 ++-- lib/TreeLines/styles.scss | 2 +- lib/UserSearch/UserSearchHead.tsx | 10 +- lib/UserSearch/UserSearchList.tsx | 12 +- lib/UserSearch/UserSearchListUserName.tsx | 10 +- lib/UserSearch/index.tsx | 32 ++--- lib/UserSearch/styles.scss | 42 +++--- lib/UserSearchDropdown/index.tsx | 2 +- lib/UserSearchDropdown/styles.scss | 10 +- lib/Windowing/WindowingItem.tsx | 2 +- lib/Windowing/WindowingList.tsx | 2 +- lib/Windowing/styles.scss | 4 +- lib/images/ImageLoader/index.tsx | 8 +- lib/images/ImageLoader/styles.scss | 8 +- lib/src/components/card/Card.tsx | 22 +-- lib/src/components/card/CardContent.tsx | 11 +- lib/src/components/card/CardControls.tsx | 11 +- lib/src/components/card/CardDescription.tsx | 10 +- lib/src/components/card/CardFooter.tsx | 10 +- lib/src/components/card/card.scss | 56 ++++---- .../componentWrapper/ComponentWrapper.tsx | 22 +-- .../componentWrapper/ComponentWrapperBody.tsx | 30 ++-- .../ComponentWrapperFooter.tsx | 30 ++-- .../ComponentInstructions.tsx | 12 +- .../ComponentWrapperHeader/ComponentLabel.tsx | 4 +- .../ComponentWrapperHeader.tsx | 20 +-- .../componentWrapper/componentWrapper.scss | 24 ++-- .../dropdownContent/DropdownContent.tsx | 18 +-- .../dropdownContent/DropdownContentBody.tsx | 9 +- .../dropdownContent/DropdownContentFooter.tsx | 10 +- .../dropdownContent/DropdownContentHeader.tsx | 12 +- .../dropdownContent/DropdownContentList.tsx | 12 +- .../dropdownContent/dropdownContent.scss | 12 +- .../components/dropzone/Dropzone.stories.tsx | 30 ++-- lib/src/components/form/Form.stories.tsx | 30 ++-- lib/src/components/form/Form.tsx | 4 +- lib/src/components/form/FormBody.tsx | 10 +- lib/src/components/form/FormCancelButton.tsx | 2 +- lib/src/components/form/FormFieldset.tsx | 12 +- lib/src/components/form/FormHelper.tsx | 2 +- lib/src/components/form/FormLegend.tsx | 12 +- lib/src/components/form/FormSubmission.tsx | 6 +- lib/src/components/form/FormSubmitButton.tsx | 6 +- lib/src/components/form/form.scss | 12 +- lib/src/components/modal/Modal.tsx | 21 ++- .../components/modal/ModalFooterConfirm.tsx | 8 +- lib/src/components/modal/ModalHeader.tsx | 12 +- lib/src/components/modal/modal.scss | 20 +-- .../components/personSearch/PersonSearch.tsx | 2 +- lib/src/components/sidebar/Sidebar.tsx | 32 ++--- lib/src/components/sidebar/SidebarBody.tsx | 10 +- .../components/sidebar/SidebarDescription.tsx | 10 +- lib/src/components/sidebar/SidebarFooter.tsx | 10 +- lib/src/components/sidebar/SidebarHeader.tsx | 4 +- lib/src/components/sidebar/SidebarHeading.tsx | 2 +- lib/src/components/sidebar/SidebarSection.tsx | 2 +- .../components/sidebar/SidebarSectionHead.tsx | 2 +- .../sidebar/SidebarSectionToggle.tsx | 2 +- .../components/sidebar/SidebarSubHeading.tsx | 10 +- .../components/sidebar/SidebarSubSection.tsx | 10 +- lib/src/components/sidebar/sidebar.scss | 30 ++-- .../workflowStep/WorkflowStep.stories.tsx | 16 +-- .../components/workflowStep/workflowStep.scss | 18 +-- .../components/workflowStep/workflowStep.tsx | 4 +- .../workflowStep/workflowStepActions.tsx | 2 +- .../workflowStep/workflowStepBody.tsx | 8 +- .../workflowStepCollapsibleBody.tsx | 4 +- .../workflowStep/workflowStepHeader.tsx | 8 +- .../workflowStep/workflowStepMeta.tsx | 4 +- .../workflowStep/workflowStepTitle.tsx | 4 +- .../Button/ButtonAvatar/ButtonAvatar.tsx | 4 +- .../Button/ButtonAvatar/buttonAvatar.scss | 4 +- lib/src/modules/Button/ButtonBase.tsx | 12 +- .../modules/Button/ButtonIcon/ButtonIcon.tsx | 8 +- .../Button/ButtonIcon/ButtonIconBubble.tsx | 2 +- .../Button/ButtonIcon/ButtonIconContained.tsx | 2 +- .../ButtonIcon/ButtonIconContainedDanger.tsx | 2 +- .../Button/ButtonIcon/ButtonIconDanger.tsx | 6 +- .../Button/ButtonIcon/ButtonIconDark.tsx | 2 +- .../Button/ButtonIcon/ButtonIconWhite.tsx | 4 +- .../ButtonIcon/styles/buttonIconBase.scss | 14 +- .../styles/buttonIconContained.scss | 6 +- .../styles/buttonIconContainedDanger.scss | 6 +- .../ButtonIcon/styles/buttonIconDanger.scss | 4 +- .../ButtonIcon/styles/buttonIconDark.scss | 14 +- .../ButtonIcon/styles/buttonIconWhite.scss | 4 +- .../Button/ButtonPrimary/ButtonPrimary.tsx | 4 +- .../ButtonPrimary/styles/buttonPrimary.scss | 4 +- .../ButtonSecondary/ButtonSecondary.tsx | 4 +- .../ButtonSecondary/ButtonSecondaryDanger.tsx | 2 +- .../styles/buttonSecondary.scss | 12 +- .../Button/ButtonSuccess/ButtonSuccess.tsx | 2 +- .../Button/ButtonSuccess/buttonSuccess.scss | 2 +- .../Button/ButtonTertiary/ButtonTertiary.tsx | 6 +- .../ButtonTertiary/styles/buttonTertiary.scss | 6 +- lib/src/modules/Button/styles/buttonBase.scss | 2 +- lib/src/modules/calendar/Calendar.tsx | 24 ++-- lib/src/modules/calendar/calendar.scss | 24 ++-- lib/src/modules/closeButton/CloseButton.tsx | 4 +- lib/src/modules/closeButton/closeButton.scss | 2 +- lib/src/modules/controls/Control.tsx | 2 +- lib/src/modules/controls/Controls.tsx | 13 +- lib/src/modules/dateSet/DateSet.tsx | 22 ++- .../modules/dateSet/DateSetTimeDropdown.tsx | 2 +- lib/src/modules/dateSet/dateSet.scss | 4 +- lib/src/modules/grid/Col.tsx | 26 ++-- lib/src/modules/grid/Grid.tsx | 10 +- lib/src/modules/grid/grid.scss | 16 +-- lib/src/modules/input/Input.tsx | 8 +- lib/src/modules/input/InputHelper.tsx | 10 +- lib/src/modules/input/InputWithMentions.tsx | 4 +- lib/src/modules/input/input.scss | 28 ++-- lib/src/modules/input/inputIcon/InputIcon.tsx | 2 +- .../modules/input/inputIcon/inputIcon.scss | 6 +- .../modules/inventoryItem/InventoryItem.tsx | 6 +- .../modules/inventoryItem/inventoryitem.scss | 6 +- lib/src/modules/label/Label.tsx | 2 +- lib/src/modules/label/label.scss | 2 +- lib/src/modules/loader/Loader.tsx | 18 +-- lib/src/modules/loader/loader.scss | 10 +- lib/src/modules/menuItem/MenuItem.tsx | 16 +-- lib/src/modules/menuItem/menu-item.scss | 10 +- lib/src/modules/meta/Meta.tsx | 17 +-- lib/src/modules/meta/MetaFooter.tsx | 9 +- lib/src/modules/meta/MetaHeading.tsx | 9 +- lib/src/modules/meta/MetaText.tsx | 10 +- .../navigationItems/NavigationItem.tsx | 8 +- .../NavigationItems.stories.tsx | 28 ++-- .../navigationItems/NavigationItems.tsx | 2 +- .../navigationItems/navigationItems.scss | 8 +- .../modules/optionMenuItem/OptionMenuItem.tsx | 14 +- .../optionMenuItem/option-menu-item.scss | 24 ++-- lib/src/modules/person/Person.tsx | 24 ++-- lib/src/modules/person/person.scss | 26 ++-- lib/src/modules/preview/PreviewImage.tsx | 12 +- lib/src/modules/preview/previewImage.scss | 16 +-- lib/src/modules/renameInput/RenameInput.tsx | 28 ++-- .../modules/renameInput/RenameInputForm.tsx | 20 ++- lib/src/modules/renameInput/renameInput.scss | 18 +-- lib/src/modules/revisionList/RevisionList.tsx | 2 +- .../revisionList/RevisionListHeading.tsx | 2 +- .../modules/revisionList/RevisionListItem.tsx | 8 +- .../modules/revisionList/RevisionListNote.tsx | 4 +- .../revisionList/RevisionListStatus.tsx | 8 +- .../revisionList/RevisionListTimestamp.tsx | 4 +- .../modules/revisionList/revisionList.scss | 56 ++++---- .../SelectionControls.stories.tsx | 8 +- .../checkbox/CheckboxInput.tsx | 15 +- .../selectionControls/checkbox/checkbox.scss | 10 +- .../selectionControls/radio/RadioInput.tsx | 15 +- .../selectionControls/radio/radio.scss | 10 +- lib/src/modules/slider/Slider.tsx | 2 +- lib/src/modules/slider/slider.scss | 2 +- .../statusIndicatorCircle.scss | 2 +- .../statusIndicatorCircle.tsx | 6 +- lib/src/prefabs/files/fileCard/FileCard.tsx | 8 +- lib/src/prefabs/files/fileCard/fileCard.scss | 16 +-- .../prefabs/modalUpload/ModalUploadBody.tsx | 10 +- lib/src/prefabs/modalUpload/modalUpload.scss | 2 +- .../WorkflowDropdown.stories.tsx | 44 +++--- .../WorkflowDropdownContent.tsx | 12 +- .../workflowDropdown/workflowDropdown.scss | 6 +- stories/components/BlankSlate.stories.tsx | 8 +- stories/components/Breadcrumb.stories.tsx | 20 ++- .../CollectionsTable/BodyRowExample.tsx | 28 ++-- .../CollectionsTable.stories.tsx | 34 ++--- .../CollectionsTable/OtherBodyRowExample.tsx | 16 +-- stories/components/Dropdown.stories.tsx | 4 +- .../components/FinderNavigation.stories.tsx | 27 ++-- stories/components/List.stories.tsx | 2 +- stories/components/Modal.stories.tsx | 51 +++---- .../components/PageInformation.stories.tsx | 2 +- stories/components/ProgressUnit.stories.tsx | 16 +-- stories/components/Resizable.stories.tsx | 36 +++-- stories/components/SearchInput.stories.tsx | 54 +++---- stories/components/SelectionBar.stories.tsx | 12 +- stories/components/TopBar.stories.tsx | 34 ++--- stories/components/form/Form.stories.tsx | 24 ++-- stories/styleguide/StoryItem.tsx | 14 +- styles/base/_typography.scss | 4 +- styles/generic/_global.scss | 2 +- styles/generic/_normalize.scss | 2 +- styles/helpers/_borders.scss | 10 +- styles/helpers/_colours.scss | 14 +- styles/helpers/_disabled.scss | 4 +- styles/helpers/_fills.scss | 6 +- styles/helpers/_forms.scss | 2 +- styles/helpers/_interactive.scss | 2 +- styles/helpers/_layout.scss | 6 +- styles/helpers/_lists.scss | 4 +- styles/helpers/_selected.scss | 8 +- styles/helpers/_text.scss | 44 +++--- styles/objects/_grid.scss | 10 +- styles/objects/_media.scss | 10 +- styles/overrides/_dropdown.scss | 16 +-- styles/overrides/_helpers.scss | 14 +- styles/overrides/_modal.scss | 28 ++-- styles/overrides/_popover.scss | 4 +- styles/overrides/_tooltip.scss | 14 +- styles/styleguide/main.scss | 12 +- styles/tailwind-components/inputs.scss | 38 ++--- styles/tools/_helpers.scss | 4 +- styles/tools/_mixins.scss | 4 +- 459 files changed, 2979 insertions(+), 2944 deletions(-) diff --git a/assets/loading.svg b/assets/loading.svg index 8a8210b81..925e79efe 100644 --- a/assets/loading.svg +++ b/assets/loading.svg @@ -3,12 +3,12 @@ - - - - - - + + + + + + diff --git a/lib/Avatar/AvatarGroup/index.tsx b/lib/Avatar/AvatarGroup/index.tsx index f43431c39..9a33c172b 100644 --- a/lib/Avatar/AvatarGroup/index.tsx +++ b/lib/Avatar/AvatarGroup/index.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { node, number, string, bool } from "prop-types"; import cx from "classnames"; import Dropdown from "../../Dropdown"; import Avatar from "../index"; @@ -26,33 +25,33 @@ export function AvatarGroup({ remaining = children.slice(maximum, total); } - const classes = cx(`avatar-group ${className}`, { - "avatar-group--small": small, - "avatar-group--micro": micro, - "avatar-group-stacked": stacked, + const classes = cx(`gui-avatar-group ${className}`, { + "gui-avatar-group--small": small, + "gui-avatar-group--micro": micro, + "gui-avatar-group-stacked": stacked, }); return ( -
+
{React.Children.map(display, (child: any) => { const styles = { zIndex }; zIndex -= 1; return ( - + {React.cloneElement(child)} ); })} {total > maximum && ( - - + + {React.Children.map(remaining, (child: any) => ( -
+
- {props.name && {props.name}} +
+ {props.name && {props.name}} {props.email && ( - + {props.email} )} {props.actions && ( - {props.actions} + {props.actions} )}
); diff --git a/lib/Avatar/AvatarWithPopover.tsx b/lib/Avatar/AvatarWithPopover.tsx index bf9eb4e43..021e10300 100644 --- a/lib/Avatar/AvatarWithPopover.tsx +++ b/lib/Avatar/AvatarWithPopover.tsx @@ -31,14 +31,14 @@ export function AvatarWithPopover({ arrow={false} placement={overlayPosition} trigger="mouseenter focus" - className="avatar-tooltip__wrapper" + className="gui-avatar-tooltip__wrapper" > diff --git a/lib/Avatar/README.md b/lib/Avatar/README.md index 4e23869ce..396db6c92 100644 --- a/lib/Avatar/README.md +++ b/lib/Avatar/README.md @@ -1,34 +1,39 @@ # Avatar + An avatar component displays a circled avatar or initials ### Props -| Name | Type | Default | Required | Description | -| ------------------- |-------------- | --------- | -------- |------------------------------------------------------------------------------ | -| colour | String | '' | No | The fixed option. | -| name | String | '' | No | The fixed option. | -| url | String | '' | No | The fixed option. | -| initials | String | '' | No | The fixed option. | -| isOffline | Boolean | `false` | No | The fixed option. | -| isHighlighted | Boolean | `false` | No | The fixed option. | +| Name | Type | Default | Required | Description | +| ------------- | ------- | ------- | -------- | ----------------- | +| colour | String | '' | No | The fixed option. | +| name | String | '' | No | The fixed option. | +| url | String | '' | No | The fixed option. | +| initials | String | '' | No | The fixed option. | +| isOffline | Boolean | `false` | No | The fixed option. | +| isHighlighted | Boolean | `false` | No | The fixed option. | ### Usage + ``` ``` + # AvatarWithPopover + An avatar component which displays a dropdown menu or a tooltip. All above props are passed down to Avatar component ### Props -| Name | Type | Default | Required | Description | -| ------------------- |--------------- | ------------------------ | -------- |------------------------------------------------------------------------------ | -| overlayPosition | String | 'bottom' | No | Which direction to show the popover | -| triggerEvent | String / Array | `['onHover', 'onClick']` | No | Can be an array of events or a single string event | -| popoverClass | String | '' | No | Classes to be passed down to the popover wrapper | -| caret | Boolean | `false` | No | Add caret to the avatar | +| Name | Type | Default | Required | Description | +| --------------- | -------------- | ------------------------ | -------- | -------------------------------------------------- | +| overlayPosition | String | 'bottom' | No | Which direction to show the popover | +| triggerEvent | String / Array | `['onHover', 'onClick']` | No | Can be an array of events or a single string event | +| popoverClass | String | '' | No | Classes to be passed down to the popover wrapper | +| caret | Boolean | `false` | No | Add caret to the avatar | ### Usage + ``` -
    -
  • - + -``` \ No newline at end of file +``` diff --git a/lib/Avatar/index.tsx b/lib/Avatar/index.tsx index d5d91cc02..fb02b259e 100644 --- a/lib/Avatar/index.tsx +++ b/lib/Avatar/index.tsx @@ -44,23 +44,23 @@ export function Avatar({ const styles = colour ? { color: colour } : {}; const additionalClasses = cx(className, { - "avatar--highlighted": isHighlighted, - "avatar--offline": isOffline, - "avatar--size-sm": smallSize, - "avatar--size-lrg": largeSize, - "avatar--size-xlrg": extraLargeSize, - "avatar--bordered": bordered, - "avatar--animated": animate, - "avatar--has-colour": colour, - "avatar--is-locked": locked, + "gui-avatar--highlighted": isHighlighted, + "gui-avatar--offline": isOffline, + "gui-avatar--size-sm": smallSize, + "gui-avatar--size-lrg": largeSize, + "gui-avatar--size-xlrg": extraLargeSize, + "gui-avatar--bordered": bordered, + "gui-avatar--animated": animate, + "gui-avatar--has-colour": colour, + "gui-avatar--is-locked": locked, }); - const wrapperClasses = cx(`avatar__wrapper ${wrapperClassName}`, { - "avatar__wrapper--offline": isOffline, - "avatar__wrapper--size-sm": smallSize, - "avatar__wrapper--size-xlrg": extraLargeSize, - "avatar__wrapper--additional": additional, - "is-visible": showAdditional && additional, + const wrapperClasses = cx(`gui-avatar__wrapper ${wrapperClassName}`, { + "gui-avatar__wrapper--offline": isOffline, + "gui-avatar__wrapper--size-sm": smallSize, + "gui-avatar__wrapper--size-xlrg": extraLargeSize, + "gui-avatar__wrapper--additional": additional, + "gui-is-visible": showAdditional && additional, }); if (children || additional) { @@ -70,12 +70,16 @@ export function Avatar({ onMouseEnter={() => setShowAdditional(true)} onMouseLeave={() => setShowAdditional(false)} > -
    - {!url && {initials}} +
    + {!url && {initials}} - {url && {name}} + {url && {name}} {locked && ( -
    +
    )} {onRemove && !locked && ( - )}
    {children && children} - {additional &&
    {additional}
    } + {additional && ( +
    {additional}
    + )}
    ); } return ( -
    - {!url && {initials}} +
    + {!url && {initials}} - {url && {name}} + {url && {name}} {locked && ( -
    +
    )} {onRemove && !locked && ( - diff --git a/lib/ConfirmationDropdown/README.md b/lib/ConfirmationDropdown/README.md index 7ccc1aa0d..823047486 100644 --- a/lib/ConfirmationDropdown/README.md +++ b/lib/ConfirmationDropdown/README.md @@ -1,31 +1,33 @@ # Confirmation Dropdown + A component which renders a confirmation dropdown. ## Usage ### Props -| Name | Type | Default | Required | Description | -| --------------------- |-------------- | ------------- | -------- |---------------------------------------------------- | -| id | string | n/a | Yes | The ID for the dropdown. | -| children | node/string | n/a | Yes | The trigger for showing the confirmation dropdown. | -| confirmationPromise | func | n/a | Yes | The function that will fire when the confirm button is clicked. Must be a promise. | -| dropdownContent | node | n/a | Yes | The contents of the dropdown itself. | -| isDanger | bool | false | No | Gives the confirmation button a danger style. | -| confirmationText | string | 'Confirm' | No | Text to display in confirmation button. | -| className | string | '' | No | Additional classes for the container. | -| onHide | func | () => {} | No | Function that triggers each time the dropdown is canceled or closed. | -| hideOnCompletion | bool | true | No | Hides the dropdown when the promise has completed. | -| position | object | `{ autoPosition: true }` | No | An object containing dropdown positions. Look at Dropdown docs for more information. | -| onCancel | func | () => {} | No | Function that triggers when the cancel button is clicked. | -| actionTooltip | string | '' | No | A tooltip to be displayed over the primary action button | +| Name | Type | Default | Required | Description | +| ------------------- | ----------- | ------------------------ | -------- | ------------------------------------------------------------------------------------ | +| id | string | n/a | Yes | The ID for the dropdown. | +| children | node/string | n/a | Yes | The trigger for showing the confirmation dropdown. | +| confirmationPromise | func | n/a | Yes | The function that will fire when the confirm button is clicked. Must be a promise. | +| dropdownContent | node | n/a | Yes | The contents of the dropdown itself. | +| isDanger | bool | false | No | Gives the confirmation button a danger style. | +| confirmationText | string | 'Confirm' | No | Text to display in confirmation button. | +| className | string | '' | No | Additional classes for the container. | +| onHide | func | () => {} | No | Function that triggers each time the dropdown is canceled or closed. | +| hideOnCompletion | bool | true | No | Hides the dropdown when the promise has completed. | +| position | object | `{ autoPosition: true }` | No | An object containing dropdown positions. Look at Dropdown docs for more information. | +| onCancel | func | () => {} | No | Function that triggers when the cancel button is clicked. | +| actionTooltip | string | '' | No | A tooltip to be displayed over the primary action button | + ``` new Promise(resolve => resolve('complete'))} confirmationText="Archive" dropdownContent={(
    Some content
    )} - className="class-for-content" + className="gui-class-for-content" position={{ top: true, right: true, diff --git a/lib/ConfirmationDropdown/index.tsx b/lib/ConfirmationDropdown/index.tsx index 7a8ceaa24..5c6b5e56b 100644 --- a/lib/ConfirmationDropdown/index.tsx +++ b/lib/ConfirmationDropdown/index.tsx @@ -34,10 +34,10 @@ export class ConfirmationDropdown extends Component { render() { // @ts-expect-error TS(2339): Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message - const classNames = cx(`confirmation-dropdown ${this.props.className}`, { - "is-pending": this.state.promiseIsPending, + const classNames = cx(`gui-confirmation-dropdown ${this.props.className}`, { + "gui-is-pending": this.state.promiseIsPending, // @ts-expect-error TS(2339): Property 'isDanger' does not exist on type 'Readon... Remove this comment to see the full error message - "confirmation-dropdown--is-dangerous": this.props.isDanger, + "gui-confirmation-dropdown--is-dangerous": this.props.isDanger, }); // @ts-expect-error TS(2339): Property 'position' does not exist on type 'Readon... Remove this comment to see the full error message diff --git a/lib/ConfirmationDropdown/styles.scss b/lib/ConfirmationDropdown/styles.scss index 68920a058..4ad9f03fc 100644 --- a/lib/ConfirmationDropdown/styles.scss +++ b/lib/ConfirmationDropdown/styles.scss @@ -6,11 +6,11 @@ Styles ========================================================================== */ -.confirmation-dropdown .dropdown__content { +.gui-confirmation-dropdown .gui-dropdown__content { width: 300px; } -.confirmation-dropdown .dropdown__footer { +.gui-confirmation-dropdown .gui-dropdown__footer { position: relative; display: flex; align-items: center; @@ -18,7 +18,7 @@ flex-direction: row-reverse; } -.confirmation-dropdown__cancel { +.gui-confirmation-dropdown__cancel { color: $neutral-base; background: none; @@ -27,7 +27,7 @@ } } -.confirmation-dropdown__confirm-trigger { +.gui-confirmation-dropdown__confirm-trigger { position: relative; background: none; z-index: 1; @@ -39,18 +39,18 @@ } } -.confirmation-dropdown__loader { +.gui-confirmation-dropdown__loader { position: absolute; transform: scale(.5); transition: opacity $animation-time-micro ease-in $animation-time-micro; } -.confirmation-dropdown__loader, -.confirmation-dropdown.is-pending .confirmation-dropdown__confirm-trigger { +.gui-confirmation-dropdown__loader, +.gui-confirmation-dropdown.gui-is-pending .gui-confirmation-dropdown__confirm-trigger { opacity: 0; } -.confirmation-dropdown.is-pending .confirmation-dropdown__loader { +.gui-confirmation-dropdown.gui-is-pending .gui-confirmation-dropdown__loader { opacity: 1; } @@ -58,6 +58,6 @@ Modifiers ========================================================================== */ -.confirmation-dropdown--is-dangerous > .dropdown__trigger { - @extend .button--link-danger; +.gui-confirmation-dropdown--is-dangerous > .gui-dropdown__trigger { + @extend .gui-button--link-danger; } diff --git a/lib/ConfirmationOverlay/index.tsx b/lib/ConfirmationOverlay/index.tsx index ec27f4020..9559b90f0 100644 --- a/lib/ConfirmationOverlay/index.tsx +++ b/lib/ConfirmationOverlay/index.tsx @@ -39,13 +39,13 @@ export function ConfirmationOverlay({ const [isSubmitting, handleSubmitWithLoader] = useLoader(handleConfirm); - const classNames = cx(`confirmation-overlay ${className}`, { - "confirmation-overlay--show": show, + const classNames = cx(`gui-confirmation-overlay ${className}`, { + "gui-confirmation-overlay--show": show, }); return (
    -
    +
    +
    {children}
    ); diff --git a/lib/Conversation/ConversationHeader.tsx b/lib/Conversation/ConversationHeader.tsx index 2426ce091..28a4ddab4 100644 --- a/lib/Conversation/ConversationHeader.tsx +++ b/lib/Conversation/ConversationHeader.tsx @@ -3,7 +3,7 @@ import React from "react"; export function ConversationHeader({ children, className, ...rest }: any) { return (
    {children} diff --git a/lib/Conversation/styles.scss b/lib/Conversation/styles.scss index 50f304254..63ff5a5de 100644 --- a/lib/Conversation/styles.scss +++ b/lib/Conversation/styles.scss @@ -18,7 +18,7 @@ $conversation-meta-text-color: $neutral-base !default; /* ========================================================================== Styles ========================================================================== */ -.conversation { +.gui-conversation { position: relative; border-radius: $conversation-border-radius; border: $conversation-border-width solid transparent; @@ -27,31 +27,31 @@ $conversation-meta-text-color: $neutral-base !default; cursor: pointer; background: $conversation-background-color; - &.hover, + &.gui-hover, &:hover { border-color: $conversation-border-color; background-color: $neutral-lightest; } } -.conversation__foot { +.gui-conversation__foot { display: none; padding: $conversation-padding; } -.conversation__header { +.gui-conversation__header { display: none; - .toggle-wrapper { + .gui-toggle-wrapper { padding: $layout-spacing-base*0.5; } - .conversation__resolve { + .gui-conversation__resolve { margin-left: auto; } } -.conversation__resolve { +.gui-conversation__resolve { text-align: right; font-size: $typo-size-slight; @@ -72,7 +72,7 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__resolve-undo { +.gui-conversation__resolve-undo { position: relative; margin-left: $layout-spacing-base*.75; @@ -90,11 +90,11 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__comment-list { +.gui-conversation__comment-list { padding: 0; } -.conversation__comment { +.gui-conversation__comment { position: relative; display: none; padding: $conversation-padding $conversation-padding 0 $conversation-padding; @@ -105,17 +105,17 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__reply-count { +.gui-conversation__reply-count { padding-left: $layout-spacing-base*2; margin: -$conversation-padding 0 0; font-size: $conversation-meta-text-size; - .is-active & { + .gui-is-active & { display: none; } } -.conversation__comment-body { +.gui-conversation__comment-body { margin: -$typo-size-base*0.5 0 0; padding: $conversation-comment-body-padding; @@ -128,7 +128,7 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__text { +.gui-conversation__text { margin: 0; font-size: $typo-size-slight; padding-right: $layout-spacing-base*0.5; @@ -150,13 +150,13 @@ $conversation-meta-text-color: $neutral-base !default; height: 30px; } - .conversation:hover & { + .gui-conversation:hover & { &::after { background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%,transparentize($neutral-lightest, 0.5) 50%, $neutral-lightest 100%); } } - .conversation.is-active & { + .gui-conversation.gui-is-active & { max-height: none; &::after { @@ -164,7 +164,7 @@ $conversation-meta-text-color: $neutral-base !default; } } - .mention { + .gui-mention { background: rgba( $primary-purple, .1 ); padding: $layout-spacing-base*0.1; color: $primary-purple; @@ -173,11 +173,11 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__actions { +.gui-conversation__actions { white-space: nowrap; } -.conversation__meta { +.gui-conversation__meta { font-size: $conversation-meta-text-size; margin: 0 $conversation-padding*0.5 0 0; @@ -200,29 +200,29 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__edit-link { +.gui-conversation__edit-link { cursor: pointer; } -.conversation__focus-fallback { +.gui-conversation__focus-fallback { position: absolute; bottom: 0; left: -999em; } -.conversation__date-text, -.conversation__failed-text { +.gui-conversation__date-text, +.gui-conversation__failed-text { color: $conversation-meta-text-color; font-size: $conversation-meta-text-size; } -.conversation__meta-wrapper { +.gui-conversation__meta-wrapper { margin-bottom: $conversation-padding; display: none; } -.conversation__failed--icon, -.is-active .conversation__failed--icon { +.gui-conversation__failed--icon, +.gui-is-active .gui-conversation__failed--icon { margin-right: 5px; vertical-align: sub; @@ -231,15 +231,15 @@ $conversation-meta-text-color: $neutral-base !default; } } -.conversation__failed--button { +.gui-conversation__failed--button { margin-left: $layout-spacing-base*0.25 } -.conversation__confirmation-overlay { +.gui-conversation__confirmation-overlay { left: $conversation-comment-body-indentation; } -.conversation__latest-reply .conversation__comment { +.gui-conversation__latest-reply .gui-conversation__comment { padding-top: 0; } @@ -247,7 +247,7 @@ $conversation-meta-text-color: $neutral-base !default; /* ========================================================================== State Styles ========================================================================== */ -.is-active.conversation { +.gui-is-active.gui-conversation { border-color: $conversation-border-color; background-color: $conversation-active-background-color; box-shadow: $shadow-shallow; @@ -255,16 +255,16 @@ $conversation-meta-text-color: $neutral-base !default; margin-bottom: $layout-spacing-base*3; } -.is-active .conversation__foot, -.is-active .conversation__comment { +.gui-is-active .gui-conversation__foot, +.gui-is-active .gui-conversation__comment { display: block; } -.is-active .conversation__header { +.gui-is-active .gui-conversation__header { display: flex; border-bottom: $conversation-border-width solid $conversation-border-color; - .conversation__icon { + .gui-conversation__icon { display: flex; justify-content: center; align-items: center; @@ -277,12 +277,12 @@ $conversation-meta-text-color: $neutral-base !default; } } -.is-active > .conversation__comment-list .conversation__comment { +.gui-is-active > .gui-conversation__comment-list .gui-conversation__comment { margin-bottom: 0; } -.is-active .conversation__comment, -.show-reply-preview > .conversation__comment-list .conversation__comment { +.gui-is-active .gui-conversation__comment, +.gui-show-reply-preview > .gui-conversation__comment-list .gui-conversation__comment { position: relative; &::before { @@ -295,7 +295,7 @@ $conversation-meta-text-color: $neutral-base !default; } } -.is-active .conversation__comment:last-child { +.gui-is-active .gui-conversation__comment:last-child { border-bottom: $conversation-border-width solid $conversation-border-color; padding-bottom: $conversation-padding; @@ -304,14 +304,14 @@ $conversation-meta-text-color: $neutral-base !default; } } -.is-active .conversation__meta-wrapper { +.gui-is-active .gui-conversation__meta-wrapper { display: block; margin-bottom: $conversation-padding; } -.is-visually-disabled .conversation__person-type, -.is-visually-disabled .conversation__person-name, -.is-visually-disabled .conversation__comment-body { +.gui-is-visually-disabled .gui-conversation__person-type, +.gui-is-visually-disabled .gui-conversation__person-name, +.gui-is-visually-disabled .gui-conversation__comment-body { background: rgb(255 255 255 / 75%); @supports (filter: blur()) { @@ -321,21 +321,21 @@ $conversation-meta-text-color: $neutral-base !default; } } -.is-read-only.conversation { - .conversation__resolve, - .conversation__comment:last-child { +.gui-is-read-only.gui-conversation { + .gui-conversation__resolve, + .gui-conversation__comment:last-child { border-bottom: none; } } -.is-active .has-author-type.conversation__comment::before, -.show-reply-preview > .conversation__comment-list .has-author-type.conversation__comment::before { +.gui-is-active .gui-has-author-type.gui-conversation__comment::before, +.gui-show-reply-preview > .gui-conversation__comment-list .gui-has-author-type.gui-conversation__comment::before { margin-top: $layout-spacing-base*0.25 - 1; height: calc(100% - #{$layout-spacing-base*0.25 - 1}); } -.has-author-type.conversation__comment { - .conversation__comment-body { +.gui-has-author-type.gui-conversation__comment { + .gui-conversation__comment-body { margin: -0.1rem 0 0; } } diff --git a/lib/ConversationContext/index.tsx b/lib/ConversationContext/index.tsx index 4cdfbd15b..6ffa2f7e7 100644 --- a/lib/ConversationContext/index.tsx +++ b/lib/ConversationContext/index.tsx @@ -15,11 +15,11 @@ export function ConversationContext({ return ( -
    {label}
    +
    {label}
    {children && ( -
    {children}
    +
    {children}
    )} diff --git a/lib/ConversationContext/styles.scss b/lib/ConversationContext/styles.scss index 9174f02e7..899c2e568 100644 --- a/lib/ConversationContext/styles.scss +++ b/lib/ConversationContext/styles.scss @@ -1,4 +1,4 @@ -.conversation-context { +.gui-conversation-context { &__label { font-size: $typo-size-lead; font-weight: $typo-weight-semi-bold; @@ -30,8 +30,8 @@ font-weight: $typo-weight-roman; } - .figure--highlighted, - .figure--active { + .gui-figure--highlighted, + .gui-figure--active { &:hover { cursor: default; } diff --git a/lib/Counter/index.tsx b/lib/Counter/index.tsx index e9851ad01..5c57609bb 100644 --- a/lib/Counter/index.tsx +++ b/lib/Counter/index.tsx @@ -4,7 +4,7 @@ import cx from "classnames"; export function Counter({ children, className }: any) { const classes = cx( className, - "counter rounded-small font-semi-bold bg-blue-primary text-white p-px" + "gui-counter rounded-small font-semi-bold bg-blue-primary text-white p-px" ); return {children}; diff --git a/lib/Counter/styles.scss b/lib/Counter/styles.scss index f6d52317c..406da42b5 100644 --- a/lib/Counter/styles.scss +++ b/lib/Counter/styles.scss @@ -1,23 +1,23 @@ -.counter { +.gui-counter { font-size: 0.625rem; line-height: 0.5625rem; min-width: 0.875rem; } -.button-icon { - .counter { +.gui-button-icon { + .gui-counter { @apply border-white border-solid border-2 absolute top-0 right-0 mt-px mr-px; } &:hover { - .counter { + .gui-counter { @apply border-neutral-95; } } &:active, - &.button__icon-active { - .counter { + &.gui-button__icon-active { + .gui-counter { @apply border-blue-90; } } diff --git a/lib/DismissiblePrompt/README.md b/lib/DismissiblePrompt/README.md index 3553af0d5..1d1b5ff0d 100644 --- a/lib/DismissiblePrompt/README.md +++ b/lib/DismissiblePrompt/README.md @@ -1,19 +1,21 @@ # DismissiblePrompt + Renders a little box with a close button ### Props -| Name | Type | Default | Required | Description | -| --------------------- |-------------- | ------------- | -------- |---------------------------------------------------- | -| children | node(s) | n/a | Yes | Contents of the prompt. | -| className | String | `'` | No | Adds a class to the component. | -| onDismiss | func | n/a | Yes | The function that will be fired when the close button is clicked. | | +| Name | Type | Default | Required | Description | +| --------- | ------- | ------- | -------- | ----------------------------------------------------------------- | --- | +| children | node(s) | n/a | Yes | Contents of the prompt. | +| className | String | `'` | No | Adds a class to the component. | +| onDismiss | func | n/a | Yes | The function that will be fired when the close button is clicked. | | ### Usage + ``` {}} - className="thing-prompt" + className="gui-thing-prompt" > hey remember this thing? diff --git a/lib/DismissiblePrompt/index.tsx b/lib/DismissiblePrompt/index.tsx index 39648a2b6..400d7ce33 100644 --- a/lib/DismissiblePrompt/index.tsx +++ b/lib/DismissiblePrompt/index.tsx @@ -9,11 +9,11 @@ export function DismissiblePrompt({ ...rest }: any) { return ( -
    -
    {children}
    +
    +
    {children}
    diff --git a/lib/DropdownMenu/index.tsx b/lib/DropdownMenu/index.tsx index cb21e8322..219781ff2 100644 --- a/lib/DropdownMenu/index.tsx +++ b/lib/DropdownMenu/index.tsx @@ -29,7 +29,7 @@ export function DropdownMenu({ let isTargetDropDownButton = false; if (e.target.classList) { isTargetDropDownButton = e.target.classList.contains( - "dropdown-menu__button" + "gui-dropdown-menu__button" ); } if (showItems && !isTargetDropDownButton) { @@ -59,22 +59,24 @@ export function DropdownMenu({ } }; - const menuClass = cx(`dropdown ${className}`, { - "is-visible": shouldDisplay, - "is-hidden": !shouldDisplay, - "open is-active": showItems, - dropup: direction === "up", - "full-width": fullWidth, + const menuClass = cx(`gui-dropdown ${className}`, { + "gui-is-visible": shouldDisplay, + "gui-is-hidden": !shouldDisplay, + "gui-open gui-is-active": showItems, + "gui-dropup": direction === "up", + "gui-full-width": fullWidth, }); - const listClass = cx(`dropdown-menu ${listClassName}`, { - "align-right": alignRight, + const listClass = cx(`gui-dropdown-menu ${listClassName}`, { + "gui-align-right": alignRight, }); const buttonClass = cx( - `${buttonClassName} dropdown-menu__button dropdown-menu__button--${[type]}`, + `${buttonClassName} gui-dropdown-menu__button gui-dropdown-menu__button--${[ + type, + ]}`, { - "dropdown-menu__button-disabled": disabled, + "gui-dropdown-menu__button-disabled": disabled, } ); @@ -83,13 +85,13 @@ export function DropdownMenu({ @@ -129,7 +129,7 @@ export function DueDatePicker({ handleApplyDueDate(() => setShowContent(false)) } types={["primary"]} - className="duedate__submit--save" + className="gui-duedate__submit--save" > Set due date diff --git a/lib/DueDatePicker/styles.scss b/lib/DueDatePicker/styles.scss index 86d85fef6..2671d6f4b 100644 --- a/lib/DueDatePicker/styles.scss +++ b/lib/DueDatePicker/styles.scss @@ -10,78 +10,81 @@ $duedate-timepicker-height: 220px !default; /* ========================================================================== Styles ========================================================================== */ -.duedate__dropdown { +.gui-duedate__dropdown { width: $duedate-popover-width; padding: 0; - .arrow { + .gui-arrow { display: none; } } -.duedate__container { +.gui-duedate__container { font-size: $typo-size-slight; position: relative; } -.duedate__button { +.gui-duedate__button { color: $color-text-light; - .button { + .gui-button { text-decoration: underline; color: $color-text-light; } - .icon { + .gui-icon { margin-right: $layout-spacing-base * 0.25; top: -2px; position: relative; vertical-align: middle; } - &:hover, &:active { + &:hover, + &:active { text-decoration: none; } } -.duedate__button--set-duedate { +.gui-duedate__button--set-duedate { color: $color-link-base; } -.duedate__button.color-overdue, -.duedate__button.color-overdue .button { +.gui-duedate__button.gui-color-overdue, +.gui-duedate__button.gui-color-overdue .gui-button { color: $color-text-danger; } -.duedate__container--completed.duedate__container--completed { - .duedate__button, .duedate__toggle { +.gui-duedate__container--completed.gui-duedate__container--completed { + .gui-duedate__button, + .gui-duedate__toggle { text-decoration: line-through; font-style: italic; color: $color-text-light; } - .icon path, &:hover .icon path { + .gui-icon path, + &:hover .gui-icon path { fill: $color-text-light; } } -.duedate__header { +.gui-duedate__header { padding: $layout-spacing-base * 0.5; border-bottom: 1px solid $neutral-light; font-size: $typo-size-slight; color: $neutral-dark; } -.duedate__header--date { +.gui-duedate__header--date { font-size: $typo-size-base; color: $neutral-dark; } -.duedate__header--date-not-set { +.gui-duedate__header--date-not-set { color: $neutral-base; } -.duedate__time { +.gui-duedate__time { color: $color-text-base; text-decoration: underline; @@ -90,16 +93,16 @@ $duedate-timepicker-height: 220px !default; } } -.color-overdue .duedate__time { +.gui-color-overdue .gui-duedate__time { color: $primary-red; } -.duedate__submit { +.gui-duedate__submit { text-align: center; padding: 0 0 $layout-spacing-base * 0.5; } -.duedate__submit--cancel { +.gui-duedate__submit--cancel { font-size: $typo-size-slight; margin-right: $layout-spacing-base * 0.5; color: $neutral-base; @@ -110,17 +113,17 @@ $duedate-timepicker-height: 220px !default; } } -.duedate__submit--save { +.gui-duedate__submit--save { padding: $layout-spacing-base * 0.25 math.div($layout-spacing-base, 2.5); } -.duedate__submit--hidden { +.gui-duedate__submit--hidden { display: none; } /* DueDate Time picker dropdown */ -.duedate__dropdown .duedate__time-picker { +.gui-duedate__dropdown .gui-duedate__time-picker { min-width: $duedate-timepicker-width; max-height: $duedate-timepicker-height; overflow: auto; @@ -140,7 +143,7 @@ $duedate-timepicker-height: 220px !default; } } - > .active a { + > .gui-active a { background-color: $color-link-base; color: white; @@ -151,51 +154,50 @@ $duedate-timepicker-height: 220px !default; } } - - /* DueDate Label */ -.duedate__label, .duedate__label--button, .duedate__label--button:hover { +.gui-duedate__label, +.gui-duedate__label--button, +.gui-duedate__label--button:hover { color: $neutral-base; font-size: $typo-size-slight; - .icon { + .gui-icon { margin-right: $layout-spacing-base * 0.25; top: -2px; position: relative; vertical-align: middle; } - .icon path { + .gui-icon path { fill: $neutral-base; } } -.duedate__label.color-overdue, -.duedate__label.color-overdue .duedate__label--button { +.gui-duedate__label.gui-color-overdue, +.gui-duedate__label.gui-color-overdue .gui-duedate__label--button { color: $primary-red; - .icon path { + .gui-icon path { fill: $primary-red; } } -.duedate__label--button { +.gui-duedate__label--button { text-decoration: underline; } - /* DueDate remove date dropdown */ -.duedate__remove { +.gui-duedate__remove { position: absolute; top: $layout-spacing-base; right: 0; } -.duedate__remove--not-set { +.gui-duedate__remove--not-set { opacity: 0; } -.duedate__remove .icon { +.gui-duedate__remove .gui-icon { padding: 0 $layout-spacing-base; path { @@ -203,6 +205,6 @@ $duedate-timepicker-height: 220px !default; } } -.duedate__remove.is-active .icon path { +.gui-duedate__remove.gui-is-active .gui-icon path { fill: $color-brand-blue; } diff --git a/lib/EditableChoiceInput/index.tsx b/lib/EditableChoiceInput/index.tsx index d29f16300..91b0a7e39 100644 --- a/lib/EditableChoiceInput/index.tsx +++ b/lib/EditableChoiceInput/index.tsx @@ -41,8 +41,8 @@ export function EditableChoiceInput({ setIsFocused(true); }; - const classNames = cx(`text-input-border pl-5 pr-2 ${className}`, { - "text-input-border-focus": isFocused, + const classNames = cx(`gui-text-input-border pl-5 pr-2 ${className}`, { + "gui-text-input-border-focus": isFocused, }); return ( @@ -52,7 +52,7 @@ export function EditableChoiceInput({ onMouseLeave={() => setShowAside(false)} {...props} > -
    +
    setInputValue(e.target.value)} onKeyDown={handleOnKeyDown} @@ -75,12 +75,15 @@ export function EditableTextWrapperInput({ return (
    -
    • ); } diff --git a/lib/src/modules/navigationItems/NavigationItems.stories.tsx b/lib/src/modules/navigationItems/NavigationItems.stories.tsx index bfcb30839..5e507c9f4 100644 --- a/lib/src/modules/navigationItems/NavigationItems.stories.tsx +++ b/lib/src/modules/navigationItems/NavigationItems.stories.tsx @@ -1,27 +1,27 @@ -import React from 'react'; +import React from "react"; // @ts-expect-error TS(2307): Cannot find module 'stories/styleguide/StoryItem' ... Remove this comment to see the full error message -import StoryItem from 'stories/styleguide/StoryItem'; -import { NavigationItems } from './NavigationItems'; -import { NavigationItem } from './NavigationItem'; +import StoryItem from "stories/styleguide/StoryItem"; +import { NavigationItems } from "./NavigationItems"; +import { NavigationItem } from "./NavigationItem"; export default { - title: 'GUI/Navigation', - component: NavigationItems + title: "GUI/Navigation", + component: NavigationItems, }; export function Navigation() { return ( -
    - - Upload - Project - -
    -     +
    + + Upload + Project + +
    + ); } Navigation.parameters = { - controls: { hideNoControlsWarning: true } + controls: { hideNoControlsWarning: true }, }; diff --git a/lib/src/modules/navigationItems/NavigationItems.tsx b/lib/src/modules/navigationItems/NavigationItems.tsx index cd7713461..a5b43bbb3 100644 --- a/lib/src/modules/navigationItems/NavigationItems.tsx +++ b/lib/src/modules/navigationItems/NavigationItems.tsx @@ -9,7 +9,7 @@ export function NavigationItems({ }: any) { return ( -