Update chosen pills
This commit is contained in:
Krzysztof Wolski
parent
50782494e1
commit
a44e96a278
4 changed files with 391 additions and 11 deletions
|
|
@ -0,0 +1,71 @@
|
|||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { SearchPermissionGroups_search_edges_node } from "@saleor/searches/types/SearchPermissionGroups";
|
||||
import { AccountErrorCode } from "@saleor/types/globalTypes";
|
||||
import { StaffErrorFragment } from "@saleor/staff/types/StaffErrorFragment";
|
||||
import { MultiAutocompleteChoiceType } from "../MultiAutocompleteSelectField";
|
||||
import AccountPermissionGroups, { AccountPermissionGroupsProps } from ".";
|
||||
|
||||
const availablePermissionGroups: SearchPermissionGroups_search_edges_node[] = [
|
||||
{
|
||||
__typename: "Group",
|
||||
id: "R3JvdXA6MQ==",
|
||||
name: "Unmanagable by user",
|
||||
userCanManage: false
|
||||
},
|
||||
{
|
||||
__typename: "Group",
|
||||
id: "R3JvdXA6Mg==",
|
||||
name: "Default group",
|
||||
userCanManage: true
|
||||
},
|
||||
{
|
||||
__typename: "Group",
|
||||
id: "R3JvdXA6Mz==",
|
||||
name: "Translators",
|
||||
userCanManage: false
|
||||
},
|
||||
{
|
||||
__typename: "Group",
|
||||
id: "R3JvdXA6My==",
|
||||
name: "CMS",
|
||||
userCanManage: true
|
||||
}
|
||||
];
|
||||
|
||||
const displayValues: MultiAutocompleteChoiceType[] = [
|
||||
{ disabled: true, label: "Unmanagable by user", value: "R3JvdXA6MQ==" },
|
||||
{ disabled: false, label: "Default group", value: "R3JvdXA6Mg==" }
|
||||
];
|
||||
|
||||
const formData = {
|
||||
permissionGroups: ["R3JvdXA6MQ==", "R3JvdXA6Mg=="]
|
||||
};
|
||||
|
||||
const errors: StaffErrorFragment[] = [
|
||||
{
|
||||
__typename: "StaffError",
|
||||
code: AccountErrorCode.OUT_OF_SCOPE_GROUP,
|
||||
field: "addGroups"
|
||||
}
|
||||
];
|
||||
|
||||
const props: AccountPermissionGroupsProps = {
|
||||
availablePermissionGroups,
|
||||
disabled: false,
|
||||
displayValues,
|
||||
errors: [],
|
||||
formData,
|
||||
hasMore: false,
|
||||
initialSearch: "",
|
||||
loading: false,
|
||||
onChange: () => undefined,
|
||||
onFetchMore: () => undefined,
|
||||
onSearchChange: () => undefined
|
||||
};
|
||||
|
||||
storiesOf("Generics / Account Permission Groups Widget", module)
|
||||
.addDecorator(Decorator)
|
||||
.add("default", () => <AccountPermissionGroups {...props} />)
|
||||
.add("error", () => <AccountPermissionGroups {...props} errors={errors} />);
|
||||
|
|
@ -12,7 +12,9 @@ import MultiAutocompleteSelectField, {
|
|||
MultiAutocompleteChoiceType
|
||||
} from "../MultiAutocompleteSelectField";
|
||||
|
||||
interface AccountPermissionGroupsProps extends FetchMoreProps, SearchPageProps {
|
||||
export interface AccountPermissionGroupsProps
|
||||
extends FetchMoreProps,
|
||||
SearchPageProps {
|
||||
formData: {
|
||||
permissionGroups: string[];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -53,10 +53,10 @@ const useStyles = makeStyles(
|
|||
},
|
||||
disabledChipInner: {
|
||||
"& svg": {
|
||||
color: theme.palette.secondary.contrastText
|
||||
color: theme.palette.grey[200]
|
||||
},
|
||||
alignItems: "center",
|
||||
background: fade(theme.palette.secondary.main, 0.8),
|
||||
background: fade(theme.palette.grey[400], 0.8),
|
||||
borderRadius: 18,
|
||||
color: theme.palette.primary.contrastText,
|
||||
display: "flex",
|
||||
|
|
@ -194,14 +194,14 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
|
|||
<Typography className={classes.chipLabel}>
|
||||
{value.label}
|
||||
</Typography>
|
||||
{!value.disabled && (
|
||||
<IconButton
|
||||
className={classes.chipClose}
|
||||
onClick={() => handleSelect(value.value)}
|
||||
>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
className={classes.chipClose}
|
||||
disabled={value.disabled}
|
||||
onClick={() => handleSelect(value.value)}
|
||||
>
|
||||
<CloseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,291 @@ exports[`Storyshots Discounts / Select countries default 1`] = `
|
|||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-container-id"
|
||||
data-tc="permissionGroups"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
|
||||
data-shrink="false"
|
||||
>
|
||||
Permission groups
|
||||
</label>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
|
||||
role="combobox"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
style="fill-rule:evenodd"
|
||||
>
|
||||
<path
|
||||
d="M7 10l5 5 5-5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
|
||||
style="padding-left:8px"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legend-id"
|
||||
style="width:0.01px"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chipContainer-id"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chip-id"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-disabledChipInner-id"
|
||||
>
|
||||
<div
|
||||
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||
>
|
||||
Unmanagable by user
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label-id"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chip-id"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chipInner-id"
|
||||
>
|
||||
<div
|
||||
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||
>
|
||||
Default group
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label-id"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-container-id"
|
||||
data-tc="permissionGroups"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
|
||||
data-shrink="false"
|
||||
>
|
||||
Permission groups
|
||||
</label>
|
||||
<div
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="false"
|
||||
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
|
||||
role="combobox"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<g
|
||||
style="fill-rule:evenodd"
|
||||
>
|
||||
<path
|
||||
d="M7 10l5 5 5-5z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
|
||||
style="padding-left:8px"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legend-id"
|
||||
style="width:0.01px"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chipContainer-id"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chip-id"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-disabledChipInner-id"
|
||||
>
|
||||
<div
|
||||
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||
>
|
||||
Unmanagable by user
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label-id"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chip-id"
|
||||
>
|
||||
<div
|
||||
class="MultiAutocompleteSelectField-chipInner-id"
|
||||
>
|
||||
<div
|
||||
class="MuiTypography-root-id MultiAutocompleteSelectField-chipLabel-id MuiTypography-body1-id"
|
||||
>
|
||||
Default group
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label-id"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorError-id"
|
||||
>
|
||||
Group is out of your permission scope
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Generics / ActionDialog default 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
|
|
@ -137183,6 +137468,28 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
|
|||
>
|
||||
Full Access
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
|
||||
disabled=""
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label-id"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in a new issue