feat(PUPIL-442): add some color options to OakDraggable

oaknational · Mar 8, 2024 · 1ca2dfa · 1ca2dfa
1 parent 200c2a0
commit 1ca2dfa
Show file tree

Hide file tree

Showing 5 changed files with 365 additions and 202 deletions.
diff --git a/src/components/molecules/OakDraggable/OakDraggable.stories.tsx b/src/components/molecules/OakDraggable/OakDraggable.stories.tsx
@@ -48,3 +48,11 @@ export const ReadOnly: Story = {
     isReadOnly: true,
   },
 };
+
+export const WithColors: Story = {
+  args: {
+    color: "text-inverted",
+    background: "bg-btn-primary",
+    iconColor: "icon-main",
+  },
+};
diff --git a/src/components/molecules/OakDraggable/OakDraggable.tsx b/src/components/molecules/OakDraggable/OakDraggable.tsx
@@ -12,7 +12,9 @@ import { parseBorder } from "@/styles/helpers/parseBorder";
 import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
 import { parseSpacing } from "@/styles/helpers/parseSpacing";
 import { IconName } from "@/image-map";
-import { OakColorFilterToken } from "@/styles/theme/color";
+import { OakCombinedColorToken } from "@/styles/theme/color";
+import { parseBorderWidth } from "@/styles/helpers/parseBorderWidth";
+import { parseColorFilter } from "@/styles/helpers/parseColorFilter";
 
 type OakDraggableProps = {
   /**
@@ -34,23 +36,45 @@ type OakDraggableProps = {
    */
   iconName?: IconName;
   /**
-   * Icon color
+   * Icon color when not being dragged or hovered
    */
-  iconColor?: OakColorFilterToken;
+  iconColor?: OakCombinedColorToken;
+  /**
+   * The background color of the draggable when not being dragged or hovered
+   */
+  background?: OakCombinedColorToken;
+  /**
+   * The color of the draggable when not being dragged or hovered
+   */
+  color?: OakCombinedColorToken;
 };
 
-const StyledDraggable = styled(OakBox)`
+const StyledOakIcon = styled(OakIcon)``;
+
+const StyledDraggable = styled(OakBox)<{ $iconColor: OakCombinedColorToken }>`
   cursor: grab;
   outline: none;
+  user-select: none;
+
+  ${StyledOakIcon} {
+    filter: ${(props) => parseColorFilter(props.$iconColor)};
+  }
 
   @media (hover: hover) {
     &:hover:not([data-dragging="true"]):not([data-disabled="true"]):not(
         [data-readonly="true"]
       ) {
       background-color: ${parseColor("bg-decorative1-subdued")};
+      color: ${parseColor("text-primary")};
       box-shadow: ${parseDropShadow("drop-shadow-standard")};
       border-bottom: ${parseBorder("border-solid-xl")}
         ${parseColor("border-primary")};
+      padding-bottom: ${parseSpacing("inner-padding-m")};
+      text-decoration: underline;
+
+      ${StyledOakIcon} {
+        filter: ${parseColorFilter("icon-inverted")};
+      }
     }
   }
 
@@ -62,15 +86,26 @@ const StyledDraggable = styled(OakBox)`
   &[data-dragging="true"] {
     cursor: move;
     background-color: ${parseColor("bg-decorative1-main")};
-    border: ${parseBorder("border-solid-xl")} ${parseColor("border-primary")};
+    color: ${parseColor("text-primary")};
+    outline: ${parseBorder("border-solid-xl")} ${parseColor("border-primary")};
+    outline-offset: -${parseBorderWidth("border-solid-xl")};
     box-shadow: ${parseDropShadow("drop-shadow-lemon")},
       ${parseDropShadow("drop-shadow-grey")};
+    text-decoration: underline;
+
+    ${StyledOakIcon} {
+      filter: ${parseColorFilter("icon-inverted")};
+    }
   }
 
   &[data-disabled="true"] {
     cursor: default;
     background-color: ${parseColor("bg-neutral")};
     color: ${parseColor("text-disabled")};
+
+    ${StyledOakIcon} {
+      filter: ${parseColorFilter("icon-disabled")};
+    }
   }
 
   &[data-readonly="true"] {
@@ -90,17 +125,18 @@ export const OakDraggable: FC<
   ComponentPropsWithRef<OakDraggableProps & typeof OakBox>
 > = forwardRef<
   HTMLDivElement,
-  ComponentPropsWithoutRef<OakDraggableProps & typeof OakBox>
+  OakDraggableProps & ComponentPropsWithoutRef<typeof OakBox>
 >(
   (
     {
       children,
       iconName = "move-arrows",
-      iconColor = "icon-primary",
+      iconColor = "icon-inverted",
+      color = "text-primary",
+      background = "bg-primary",
       isDragging,
       isDisabled,
       isReadOnly,
-      $borderColor = "transparent",
       ...props
     },
     ref,
@@ -111,20 +147,19 @@ export const OakDraggable: FC<
         $pv="inner-padding-l"
         $pl="inner-padding-s"
         $pr="inner-padding-m"
-        $background="bg-primary"
+        $background={background}
+        $color={color}
         $borderRadius="border-radius-m2"
-        $borderColor={$borderColor}
-        $bb="border-solid-xl"
         $minHeight="all-spacing-10"
         data-dragging={isDragging}
         data-disabled={isDisabled}
         data-readonly={isReadOnly}
+        $iconColor={iconColor}
         {...props}
       >
         <StyledFlex $gap="space-between-s" $alignItems="center">
-          <OakIcon
+          <StyledOakIcon
             iconName={iconName}
-            $colorFilter={iconColor}
             $width="all-spacing-7"
             $height="all-spacing-7"
             alt=""

diff --git a/src/components/molecules/OakDraggable/__snapshots__/OakDraggable.test.tsx.snap b/src/components/molecules/OakDraggable/__snapshots__/OakDraggable.test.tsx.snap
@@ -7,9 +7,8 @@ exports[`OakDraggable matches snapshot 1`] = `
   padding-bottom: 1.25rem;
   padding-left: 0.75rem;
   padding-right: 1rem;
+  color: #222222;
   background: #ffffff;
-  border-bottom: 0.25rem solid;
-  border-color: transparent;
   border-radius: 0.5rem;
   font-family: Lexend,sans-serif;
 }
@@ -64,6 +63,10 @@ exports[`OakDraggable matches snapshot 1`] = `
   cursor: -moz-grab;
   cursor: grab;
   outline: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .c1:focus-visible:not([data-dragging="true"]):not([data-disabled="true"]) {
@@ -73,8 +76,12 @@ exports[`OakDraggable matches snapshot 1`] = `
 .c1[data-dragging="true"] {
   cursor: move;
   background-color: #bef2bd;
-  border: 0.25rem solid #222222;
+  color: #222222;
+  outline: 0.25rem solid #222222;
+  outline-offset: -0.25rem;
   box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%), 0.25rem 0.25rem 0 rgba(87,87,87,100%);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
 }
 
 .c1[data-disabled="true"] {
@@ -94,8 +101,12 @@ exports[`OakDraggable matches snapshot 1`] = `
 @media (hover:hover) {
   .c1:hover:not([data-dragging="true"]):not([data-disabled="true"]):not( [data-readonly="true"] ) {
     background-color: #dff9de;
+    color: #222222;
     box-shadow: 0 0.5rem 0.5rem rgba(92,92,92,20%);
     border-bottom: 0.25rem solid #222222;
+    padding-bottom: 1rem;
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
   }
 }
 
@@ -106,7 +117,7 @@ exports[`OakDraggable matches snapshot 1`] = `
     className="c2 c3 c4"
   >
     <div
-      className="c5"
+      className="c5 "
     >
       <img
         alt=""

diff --git a/src/components/molecules/OakDroppable/__snapshots__/OakDroppable.test.tsx.snap b/src/components/molecules/OakDroppable/__snapshots__/OakDroppable.test.tsx.snap
@@ -4,37 +4,76 @@ exports[`OakDroppable matches snapshot 1`] = `
 .c0 {
   padding: 1rem;
   background: #cee7e5;
-  border-radius: 0.375rem;
+  border-radius: 1rem;
   font-family: Lexend,sans-serif;
 }
 
-.c1 {
-  width: 100%;
+.c2 {
   min-height: 4rem;
   padding: 0.25rem;
   background: #f2f2f2;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   font-family: Lexend,sans-serif;
 }
 
-.c2 {
+.c5 {
+  width: 100%;
+  font-family: Lexend,sans-serif;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c4 {
   outline: 0.188rem solid #222222;
   outline-style: dashed;
 }
 
-@media (hover:hover) {
-  .c2:hover {
-    background-color: #ffffff;
+@media (min-width:750px) {
+  .c1 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+  }
+}
+
+@media (min-width:1280px) {
+  .c1 {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
   }
 }
 
 <div
-  className="c0"
+  className="c0 c1"
 >
   <div
-    className="c1 c2"
+    className="c2 c3 c4"
   >
-    Children
+    <div
+      className="c5"
+    >
+      Children
+    </div>
   </div>
 </div>
 `;