Skip to content

Commit 449e899

Browse files
brandongregoryscottbrandongregoryscott
authored
Feature/extract drag and drop list box
2 parents 918cbbf + 614fedf commit 449e899

File tree

12 files changed

+560
-7
lines changed

12 files changed

+560
-7
lines changed

‎.storybook/config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { setDefaults } from "@storybook/addon-info";
33
import { withKnobs } from "@storybook/addon-knobs";
44
import { withInfo } from "@storybook/addon-info";
55
import "./storybook.css";
6-
import "assets/scss/andculturecode-javascript-react-components.scss";
7-
import { IconUtils } from "utilities/icon-utils";
8-
import { SvgIcons } from "atoms/constants/svg-icons";
6+
import "../src/assets/scss/andculturecode-javascript-react-components.scss";
7+
import { IconUtils } from "../src/utilities/icon-utils";
8+
import { SvgIcons } from "../src/atoms/constants/svg-icons";
99

1010
IconUtils.register(SvgIcons);
1111

‎package-lock.json‎

Lines changed: 67 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@reach/menu-button": "0.10.2",
2525
"@tippyjs/react": "4.0.2",
2626
"@types/react": "16.9.11",
27+
"@types/react-beautiful-dnd": "13.0.0",
2728
"@types/react-dom": "16.9.3",
2829
"@types/react-router-dom": "5.1.5",
2930
"andculturecode-javascript-core": "0.1.5",
@@ -34,6 +35,7 @@
3435
"i18next": "19.4.5",
3536
"immutable": "4.0.0-rc.12",
3637
"react": "16.13.1",
38+
"react-beautiful-dnd": "13.0.0",
3739
"react-dom": "16.13.1",
3840
"react-i18next": "11.6.0",
3941
"react-router-dom": "5.1.2",

‎src/assets/scss/6-components/molecules/__molecules.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
MOLECULES
33
\*------------------------------------*/
44
@import "card";
5+
@import "drag-and-drop-list-box";
56
@import "dropdown-button";
67
@import "error-banner";
78
@import "form-fields";
89
@import "forms";
10+
@import "list-box";
911
@import "radio-list";
1012
@import "tooltip";

‎src/assets/scss/6-components/molecules/_drag-and-drop-list-box.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.c-drag-and-drop-list-box {
2+
.c-list-box__item {
3+
&.-dragging {
4+
@include box-shadow(0px, 7px, 20px, get-color-neutral("30"));
5+
background-color: get-color-neutral("05");
6+
border-radius: $border-radius-small;
7+
border: 1px solid get-color-neutral("30");
8+
9+
.c-button {
10+
display: none;
11+
}
12+
13+
.-drag-handle {
14+
@include icon-fill(get-color-neutral("70"));
15+
}
16+
}
17+
18+
&:hover {
19+
.-drag-handle {
20+
@include icon-fill(get-color-neutral("70"));
21+
}
22+
}
23+
24+
.-drag-handle {
25+
@include icon-fill(get-color-neutral("50"));
26+
@include margin-left(-12px);
27+
@include margin-right(8px);
28+
white-space: nowrap;
29+
30+
svg {
31+
margin-top: 50%;
32+
}
33+
}
34+
}
35+
}

‎src/assets/scss/6-components/molecules/_list-box.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.c-list-box {
2+
background-color: get-color-neutral("05");
3+
border-radius: $border-radius-small;
4+
border: 1px solid get-color-neutral("30");
5+
6+
&.-empty {
7+
background-color: get-color-neutral("white");
8+
9+
p {
10+
@include padding(16px);
11+
text-align: center;
12+
}
13+
}
14+
15+
&__item {
16+
@include padding(20px, 15px, 15px, 20px);
17+
display: flex;
18+
border-bottom: 1px solid get-color-neutral("30");
19+
20+
&:last-child {
21+
border-bottom: none;
22+
}
23+
24+
&__label {
25+
@include margin-top(4px);
26+
min-width: 12%;
27+
width: 12%;
28+
white-space: nowrap;
29+
30+
@include respond-to("tablet") {
31+
@include margin-right(8px);
32+
}
33+
}
34+
35+
&__text {
36+
flex-grow: 1;
37+
overflow: hidden;
38+
white-space: nowrap;
39+
text-overflow: ellipsis;
40+
41+
a {
42+
@include margin-bottom(8px);
43+
text-decoration: none;
44+
}
45+
}
46+
47+
&__action {
48+
margin-top: auto;
49+
margin-bottom: auto;
50+
}
51+
}
52+
}

‎src/atoms/interfaces/svg-icon.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FunctionComponent, SVGProps } from "react";
2-
import { Icons } from "atoms/constants/icons";
2+
import { Icons } from "../constants/icons";
33

44
export interface SvgIcon {
55
base: FunctionComponent<SVGProps<SVGSVGElement>>;

‎src/molecules/lists/drag-and-drop-list-box.stories.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React, { useState } from "react";
2+
import { DragAndDropListBox } from "./drag-and-drop-list-box";
3+
import { ListBoxItem } from "./list-box";
4+
import { Paragraph } from "../../atoms/typography/paragraph";
5+
6+
export default {
7+
title: "Molecules | Lists / DragAndDropListBox",
8+
component: DragAndDropListBox,
9+
};
10+
11+
export const DragAndDropListBoxDefault = () => {
12+
const [items, setItems] = useState<Array<ListBoxItem<number>>>([
13+
{
14+
id: 0,
15+
label: "0",
16+
text: "Item Number 0",
17+
},
18+
{
19+
id: 1,
20+
label: "1",
21+
text: "Item Number 1",
22+
},
23+
{
24+
id: 2,
25+
label: "2",
26+
text: "Item Number 2",
27+
},
28+
{
29+
id: 3,
30+
label: "3",
31+
text: "Item Number 3",
32+
},
33+
]);
34+
35+
return (
36+
<React.Fragment>
37+
<Paragraph>Drag and drop items to reorder them.</Paragraph>
38+
<DragAndDropListBox
39+
droppableId="drag-and-drop-list-box.tsx"
40+
items={items}
41+
onReordered={setItems}
42+
/>
43+
</React.Fragment>
44+
);
45+
};

0 commit comments

Comments
 (0)