Skip to content

Commit

Permalink
Use new Input
Browse files Browse the repository at this point in the history
  • Loading branch information
@katrinewi
katrinewi committed Jul 12, 2024
1 parent 30fe295 commit 86c6ac5
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 113 deletions.
23 changes: 9 additions & 14 deletions src/components/MarkdownEditor/FloatingLinkEditorPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ import { $isLinkNode, $isAutoLinkNode, toggleLink, $createLinkNode, TOGGLE_LINK_
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { mergeRegister, $findMatchingParent } from "@lexical/utils";
import { colors, misc, shadows, spacing, stackOrder } from "@ndla/core";
import { FieldErrorMessage, FormControl, InputV3, Label } from "@ndla/forms";
import { Button } from "@ndla/primitives";
import { Button, FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
import { getSelectedNode } from "./EditorToolbar";

const VERTICAL_GAP = 10;
Expand Down Expand Up @@ -398,12 +397,10 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
return open ? (
<FloatingContainer ref={editorRef} data-visible={!!open}>
<InputWrapper>
<FormControl id="text" isRequired isInvalid={!!textError}>
<Label margin="none" textStyle="label-small">
{t("markdownEditor.link.text")}
</Label>
<FieldRoot required invalid={!!textError}>
<FieldLabel>{t("markdownEditor.link.text")}</FieldLabel>
<StyledFieldErrorMessage data-disabled={editedLinkText.length < 1}>{textError}</StyledFieldErrorMessage>
<InputV3
<FieldInput
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={!linkUrl}
name="text"
Expand All @@ -415,13 +412,11 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
monitorInputInteraction(event);
}}
/>
</FormControl>
<FormControl id="url" isRequired isInvalid={!!urlError}>
<Label margin="none" textStyle="label-small">
{t("markdownEditor.link.url")}
</Label>
</FieldRoot>
<FieldRoot required invalid={!!urlError}>
<FieldLabel>{t("markdownEditor.link.url")}</FieldLabel>
<StyledFieldErrorMessage data-disabled={editedLinkUrl.length < 1}>{urlError}</StyledFieldErrorMessage>
<InputV3
<FieldInput
name="url"
ref={inputRef}
data-link-input=""
Expand All @@ -433,7 +428,7 @@ const FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElement, editorIs
monitorInputInteraction(event);
}}
/>
</FormControl>
</FieldRoot>
</InputWrapper>
<ButtonWrapper>
<Button variant="secondary" onClick={handleLinkDeletion} disabled={!editedLinkElement}>
Expand Down
57 changes: 28 additions & 29 deletions src/components/MyNdla/NewFolder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,18 @@ import { useTranslation } from "react-i18next";
import { useApolloClient } from "@apollo/client";
import styled from "@emotion/styled";
import { spacing } from "@ndla/core";
import { FieldErrorMessage, FieldHelper, FormControl, InputContainer, InputV3, Label } from "@ndla/forms";
import { Spinner } from "@ndla/icons";
import { Cross } from "@ndla/icons/action";
import { Done } from "@ndla/icons/editor";
import { IconButton } from "@ndla/primitives";
import {
IconButton,
FieldErrorMessage,
FieldHelper,
FieldInput,
FieldLabel,
FieldRoot,
InputContainer,
} from "@ndla/primitives";
import { IFolder } from "@ndla/types-backend/myndla-api";
import { getFolder, useAddFolderMutation, useFolders } from "../../containers/MyNdla/folderMutations";
import { useUserAgent } from "../../UserAgentContext";
Expand All @@ -32,12 +39,6 @@ const StyledSpinner = styled(Spinner)`
margin: ${spacing.small};
`;

const Row = styled.div`
display: flex;
align-items: center;
padding-right: ${spacing.xsmall};
`;

const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) => {
const [name, setName] = useState(initialValue);
const hasWritten = useRef(false);
Expand Down Expand Up @@ -101,11 +102,11 @@ const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) =>
}, [name, validationT, siblingNames]);

return (
<FormControl id="folder-name" isRequired isInvalid={!!error}>
<Label visuallyHidden>{t("treeStructure.newFolder.folderName")}</Label>
<FieldRoot required invalid={!!error}>
<FieldLabel srOnly>{t("treeStructure.newFolder.folderName")}</FieldLabel>
<FieldErrorMessage>{error}</FieldErrorMessage>
<InputContainer>
<InputV3
<FieldInput
autoComplete="off"
disabled={loading}
ref={inputRef}
Expand All @@ -127,26 +128,24 @@ const NewFolder = ({ parentId, onClose, initialValue = "", onCreate }: Props) =>
}
}}
/>
<Row>
{!loading ? (
<>
{!error && (
<IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
<Done />
</IconButton>
)}
<IconButton variant="tertiary" aria-label={t("close")} title={t("close")} onClick={onClose}>
<Cross />
{!loading ? (
<>
{!error && (
<IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
<Done />
</IconButton>
</>
) : (
<FieldHelper>
<StyledSpinner size="normal" aria-label={t("loading")} />
</FieldHelper>
)}
</Row>
)}
<IconButton variant="tertiary" aria-label={t("close")} title={t("close")} onClick={onClose}>
<Cross />
</IconButton>
</>
) : (
<FieldHelper>
<StyledSpinner size="normal" aria-label={t("loading")} />
</FieldHelper>
)}
</InputContainer>
</FormControl>
</FieldRoot>
);
};

Expand Down
41 changes: 16 additions & 25 deletions src/containers/MyNdla/Arena/components/ArenaCategoryForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import styled from "@emotion/styled";
import { LoadingButton } from "@ndla/button";
import { colors, spacing } from "@ndla/core";
import { FormControl, InputV3, Label, FieldErrorMessage, CheckboxItem, Select } from "@ndla/forms";
import { spacing } from "@ndla/core";
import { CheckboxItem, Label, Select } from "@ndla/forms";
import { Spinner } from "@ndla/icons";
import { Button } from "@ndla/primitives";
import { Button, FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
import { INewCategory } from "@ndla/types-backend/myndla-api";
import { GQLArenaCategoryV2Fragment, GQLTopiclessArenaCategoryV2 } from "../../../../graphqlTypes";
import useValidationTranslation from "../../../../util/useValidationTranslation";
Expand All @@ -36,15 +36,6 @@ const ButtonRow = styled.div`
gap: ${spacing.small};
`;

const StyledLabel = styled(Label)`
margin: 0;
margin-bottom: ${spacing.xxsmall};
`;

const StyledInput = styled(InputV3)`
background: ${colors.white};
`;

const CheckboxWrapper = styled.div`
display: flex;
gap: ${spacing.small};
Expand Down Expand Up @@ -143,12 +134,12 @@ const ArenaCategoryForm = ({
},
}}
render={({ field, fieldState }) => (
<FormControl id="title" isRequired isInvalid={!!fieldState.error?.message}>
<StyledLabel textStyle="label-small">{t("myNdla.arena.admin.category.form.title")}</StyledLabel>
<FieldRoot required invalid={!!fieldState.error?.message}>
<FieldLabel>{t("myNdla.arena.admin.category.form.title")}</FieldLabel>
<FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
<StyledInput {...field} />
<FieldInput {...field} />
<FieldLength value={field.value.length ?? 0} maxLength={titleMaxLength} />
</FormControl>
</FieldRoot>
)}
/>
<Controller
Expand All @@ -158,20 +149,20 @@ const ArenaCategoryForm = ({
required: false,
}}
render={({ field, fieldState }) => (
<FormControl id="editor" isRequired isInvalid={!!fieldState.error?.message}>
<StyledLabel textStyle="label-small">{t("myNdla.arena.admin.category.form.description")}</StyledLabel>
<FieldRoot required invalid={!!fieldState.error?.message}>
<FieldLabel>{t("myNdla.arena.admin.category.form.description")}</FieldLabel>
<FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
<StyledInput {...field} />
</FormControl>
<FieldInput {...field} />
</FieldRoot>
)}
/>
<Controller
control={control}
name={"parentCategoryId"}
rules={{ required: false }}
render={({ field, fieldState }) => (
<FormControl id="parentCategoryId" isInvalid={!!fieldState.error?.message}>
<StyledLabel textStyle="label-small">{t("myNdla.arena.admin.category.form.parentCategoryId")}</StyledLabel>
<FieldRoot invalid={!!fieldState.error?.message}>
<FieldLabel>{t("myNdla.arena.admin.category.form.parentCategoryId")}</FieldLabel>
<Select {...field}>
<option>{t("myNdla.arena.admin.category.form.noParentCategory")}</option>
{possibleParents.map((parent) => (
Expand All @@ -180,7 +171,7 @@ const ArenaCategoryForm = ({
</option>
))}
</Select>
</FormControl>
</FieldRoot>
)}
/>
<Controller
Expand All @@ -190,7 +181,7 @@ const ArenaCategoryForm = ({
required: false,
}}
render={({ field, fieldState }) => (
<FormControl id="visible" isInvalid={!!fieldState.error?.message}>
<FieldRoot invalid={!!fieldState.error?.message}>
<FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
<CheckboxWrapper>
<CheckboxItem
Expand All @@ -206,7 +197,7 @@ const ArenaCategoryForm = ({
{t("myNdla.arena.admin.category.form.visible")}
</Label>
</CheckboxWrapper>
</FormControl>
</FieldRoot>
)}
/>
<ButtonRow>
Expand Down
33 changes: 13 additions & 20 deletions src/containers/MyNdla/Arena/components/ArenaForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ import { useTranslation } from "react-i18next";
import styled from "@emotion/styled";
import { LoadingButton } from "@ndla/button";
import { colors, misc, spacing } from "@ndla/core";
import { FormControl, InputV3, Label, FieldErrorMessage, CheckboxItem } from "@ndla/forms";
import { CheckboxItem, Label } from "@ndla/forms";
import { Spinner } from "@ndla/icons";
import { InformationOutline } from "@ndla/icons/common";
import { FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
import { Text } from "@ndla/typography";
import AlertModal from "./AlertModal";
import { AuthContext } from "../../../../components/AuthenticationContext";
Expand Down Expand Up @@ -53,19 +54,10 @@ const InformationLabel = styled.div`
align-items: center;
`;

const StyledLabel = styled(Label)`
margin: 0;
margin-bottom: ${spacing.xxsmall};
`;

const StyledInformationOutline = styled(InformationOutline)`
overflow: unset !important;
`;

const StyledInput = styled(InputV3)`
background: ${colors.white};
`;

const CheckboxWrapper = styled.div`
display: flex;
gap: ${spacing.small};
Expand Down Expand Up @@ -140,12 +132,12 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
},
}}
render={({ field, fieldState }) => (
<FormControl id="title" isRequired isInvalid={!!fieldState.error?.message}>
<StyledLabel textStyle="label-small">{t("title")}</StyledLabel>
<FieldRoot required invalid={!!fieldState.error?.message}>
<FieldLabel>{t("title")}</FieldLabel>
<FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
<StyledInput {...field} />
<FieldInput {...field} />
<FieldLength value={field.value.length ?? 0} maxLength={titleMaxLength} />
</FormControl>
</FieldRoot>
)}
/>
)}
Expand All @@ -167,13 +159,14 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
},
}}
render={({ field, fieldState }) => (
<FormControl id={id ? `editor-${id}` : "editor"} isRequired isInvalid={!!fieldState.error?.message}>
<StyledLabel textStyle="label-small" onClick={() => document.getElementById("field-editor")?.focus()}>
<FieldRoot id={id ? `editor-${id}` : "editor"} required invalid={!!fieldState.error?.message}>
<FieldLabel onClick={() => document.getElementById("field-editor")?.focus()}>
{type === "post" ? t("myNdla.arena.new.post") : t("myNdla.arena.topic.topicContent")}
</StyledLabel>
</FieldLabel>
<FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
<Suspense fallback={<Spinner />}>
<MarkdownEditor
id="field-editor"
setContentWritten={(val) => {
setValue("content", val, {
shouldDirty: true,
Expand All @@ -183,7 +176,7 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
{...field}
/>
</Suspense>
</FormControl>
</FieldRoot>
)}
/>
{showLockedOption && (
Expand All @@ -192,7 +185,7 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
name="locked"
rules={{ required: false }}
render={({ field, fieldState }) => (
<FormControl id="locked" isInvalid={!!fieldState.error?.message}>
<FieldRoot invalid={!!fieldState.error?.message}>
<FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
<CheckboxWrapper>
<CheckboxItem
Expand All @@ -208,7 +201,7 @@ const ArenaForm = ({ onSave, onAbort, type, initialTitle, initialContent, initia
{t("myNdla.arena.topic.locked")}
</Label>
</CheckboxWrapper>
</FormControl>
</FieldRoot>
)}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/containers/MyNdla/Arena/components/Users.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { useTranslation } from "react-i18next";
import { useLocation, useNavigate } from "react-router-dom";
import styled from "@emotion/styled";
import { colors, spacing, misc } from "@ndla/core";
import { InputV3 } from "@ndla/forms";
import { Pager } from "@ndla/pager";
import { Input } from "@ndla/primitives";
import UserList from "./UserList";
import { routes } from "../../../../routeHelpers";
import { useArenaUsers } from "../../arenaQueries";
Expand All @@ -39,7 +39,7 @@ type SearchObject = {
page: string;
};

const SearchInput = styled(InputV3)`
const SearchInput = styled(Input)`
width: 35%;
`;

Expand Down
Loading

0 comments on commit 86c6ac5

Please sign in to comment.