@griddo/ax 11.4.24 → 11.5.0

package/src/{components/Gallery/GalleryPanel/GalleryDragAndDrop → modules/MediaGallery/ImageDragAndDrop}/style.tsx

@@ -1,59 +1,73 @@
 import React from "react";
 import styled from "styled-components";
-import { Button } from "@ax/components";
+import Button from "@ax/components/Button";
 
-export const Wrapper = styled.div<{ hidden: boolean }>`
+const Wrapper = styled.div<{ inverse: boolean }>`
+  background-color: ${(p) => (p.inverse ? p.theme.color.overlay : p.theme.color.uiBarBackground)};
   position: relative;
-  opacity: ${(p) => (p.hidden ? "0" : "1")};
-  display: ${(p) => (p.hidden ? "none" : "block")};
   transition: opacity 0.1s;
   height: 100%;
   width: 100%;
   padding: ${(p) => p.theme.spacing.m};
-  background-color: ${(p) => p.theme.color.uiBarBackground};
 `;
 
-export const StatusWrapper = styled.div`
+const StatusWrapper = styled.div`
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  width: calc(100% - ${(p) => p.theme.spacing.m} * 4);
 `;
 
-export const ProgressBar = styled.div`
-  margin-bottom: ${(p) => p.theme.spacing.xs};
-`;
-
-export const DragStatus = styled.div`
+const DragStatus = styled.div`
   transition: opacity 0.1s;
 `;
 
-export const DragTitle = styled.div`
+const DragTitle = styled.div`
   ${(p) => p.theme.textStyle.fieldLabel};
-  color: ${(p) => p.theme.color.interactive01};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const DragSubtitle = styled.div`
+const DragSubtitle = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
-  white-space: nowrap;
 `;
 
-export const DragIcon = styled.div`
+const DragIcon = styled.div`
+  height: ${(p) => p.theme.spacing.l};
   margin-bottom: ${(p) => p.theme.spacing.s};
   display: flex;
   justify-content: center;
 `;
 
-export const UploadingStatus = styled.div`
+const DropIcon = styled.div`
+  height: ${(p) => p.theme.spacing.l};
+  width: ${(p) => p.theme.spacing.l};
+  margin: ${(p) => `0 auto ${p.theme.spacing.s} auto`};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactiveInverse};
+    }
+  }
+`;
+
+const SuccessIcon = styled.div`
+  display: flex;
+  justify-content: center;
+  height: ${(p) => p.theme.spacing.l};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.online};
+    }
+  }
+`;
+
+const UploadingStatus = styled.div`
   transition: opacity 0.1s;
 `;
 
-export const SuccessStatus = styled.div`
+const SuccessStatus = styled.div`
   transition: opacity 0.1s;
   ${DragIcon} {
     svg {
@@ -67,7 +81,9 @@ export const SuccessStatus = styled.div`
   }
 `;
 
-export const ErrorStatus = styled.div`
+const ErrorStatus = styled.div`
+  display: flex;
+  justify-content: center;
   transition: opacity 0.1s;
   ${DragIcon} {
     svg {
@@ -81,7 +97,7 @@ export const ErrorStatus = styled.div`
   }
 `;
 
-export const DragOverStatus = styled.div`
+const DragOverStatus = styled.div`
   transition: opacity 0.1s;
   ${DragIcon} {
     svg {
@@ -92,15 +108,18 @@ export const DragOverStatus = styled.div`
   }
 `;
 
-export const DragAndDropWrapper = styled.div<{
+const DragAndDropWrapper = styled.div<{
   inDropZone: boolean;
   uploading: boolean;
   success: boolean;
   error: boolean;
+  inverse: boolean;
 }>`
-  border: ${(p) => `2px dashed ${p.inDropZone ? p.theme.color.interactiveInverse : p.theme.color.interactive01}`};
+  border: ${(p) =>
+    `2px dashed ${p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01}`};
   border-radius: 4px;
-  background-color: ${(p) => (p.inDropZone ? p.theme.color.interactive01 : p.theme.color.uiBarBackground)};
+  background-color: ${(p) =>
+    p.inDropZone ? p.theme.color.interactive01 : p.inverse ? "transparent" : p.theme.color.uiBarBackground};
   width: 100%;
   height: 100%;
   opacity: ${(p) => (p.uploading || p.success || p.error ? "0" : "1")};
@@ -118,23 +137,33 @@ export const DragAndDropWrapper = styled.div<{
   }
 
   ${DragTitle} {
-    color: ${(p) => (p.inDropZone ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+    color: ${(p) => (p.inDropZone || p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
   }
 
   ${DragSubtitle} {
-    color: ${(p) => (p.inDropZone ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis)};
+    color: ${(p) =>
+      p.inDropZone || p.inverse ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis};
+  }
+
+  ${DragIcon} {
+    svg {
+      path {
+        fill: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+      }
+    }
   }
 `;
 
-export const UploadingWrapper = styled.div<{
+const UploadingWrapper = styled.div<{
   inDropZone: boolean;
   uploading: boolean;
   success: boolean;
   error: boolean;
+  inverse: boolean;
 }>`
   border: ${(p) => (p.success || p.error ? `none` : `2px dashed ${p.theme.color.interactive01}`)};
   border-radius: 4px;
-  background-color: ${(p) => p.theme.color.uiBackground01};
+  background-color: ${(p) => (p.inverse ? "transparent" : p.theme.color.uiBackground01)};
   padding: ${(p) => p.theme.spacing.m};
   width: 100%;
   height: 100%;
@@ -156,24 +185,76 @@ export const UploadingWrapper = styled.div<{
     opacity: ${(p) => (p.error ? "1" : "0")};
     display: ${(p) => (p.error ? "block" : "none")};
   }
+
+  ${DragTitle} {
+    color: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+  }
+
+  ${DragIcon} {
+    svg {
+      path {
+        fill: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
+      }
+    }
+  }
 `;
 
-export const ErrorMsg = styled.div`
+const ErrorMsg = styled.div`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-top: ${(p) => p.theme.spacing.xxs};
 `;
 
-export const StyledButton = styled((props) => <Button {...props} />)`
+const StyledButton = styled((props) => <Button {...props} />)`
   margin-top: ${(p) => p.theme.spacing.s};
 `;
 
-export const FilesInput = styled.input<{ ref: any }>`
+const FilesInput = styled.input<{ ref: any }>`
   display: none;
 `;
 
 const _Button: any = React.forwardRef((props: any, ref?: React.Ref<HTMLDivElement>) => <Button {...props} />);
-export const FilesButton = styled(_Button)`
+const FilesButton = styled(_Button)`
   margin-top: ${(p) => p.theme.spacing.xs};
   margin-bottom: ${(p) => p.theme.spacing.xs};
+
+  &.inverse {
+    background-color: transparent;
+
+    :hover:before {
+      background-color: ${(p) => p.theme.color.overlay};
+    }
+    :focus:before {
+      background-color: ${(p) => p.theme.color.overlay};
+    }
+    :active:before {
+      background-color: ${(p) => p.theme.color.overlay};
+    }
+  }
 `;
+
+const ProgressBar = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export {
+  Wrapper,
+  StatusWrapper,
+  DragStatus,
+  DragTitle,
+  DragSubtitle,
+  DragIcon,
+  DropIcon,
+  SuccessIcon,
+  UploadingStatus,
+  SuccessStatus,
+  ErrorStatus,
+  DragOverStatus,
+  DragAndDropWrapper,
+  UploadingWrapper,
+  ErrorMsg,
+  StyledButton,
+  FilesInput,
+  FilesButton,
+  ProgressBar,
+};

package/src/{components/Gallery/GalleryFilters → modules/MediaGallery/ImageFilters}/Orientation/style.tsx

@@ -3,11 +3,12 @@ import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
 const Orientation = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
-  width: 90px;
   justify-content: center;
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
+  flex-shrink: 0;
+  min-width: 120px;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
   }

package/src/{components/Gallery/GalleryFilters → modules/MediaGallery/ImageFilters}/SortBy/style.tsx

@@ -5,6 +5,9 @@ import { Header } from "@ax/components/TableList/style";
 const SortBy = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 100%;
   cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+  flex-wrap: nowrap;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
   }

package/src/{components/Gallery/GalleryFilters → modules/MediaGallery/ImageFilters}/Type/style.tsx

@@ -9,6 +9,7 @@ const Type = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
+  flex-shrink: 0;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
   }

package/src/modules/MediaGallery/ImageFilters/Usage/index.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
+
+import * as S from "./style";
+
+const UsageFilter = (props: IProps): JSX.Element => {
+  const { value, filterItems } = props;
+
+  const initialState = value && value.length ? value[0].value.toString() : "all";
+  const [selectedValue, setSelectedValue] = useState<string>(initialState);
+
+  const isFilterActived = selectedValue !== "all";
+
+  const filters: Record<string, string> = {
+    all: "All",
+    used: "Used",
+    unused: "Unused",
+  };
+
+  useEffect(() => {
+    const filterValue = value && value.length ? value[0].value.toString() : "all";
+    value && setSelectedValue(filterValue);
+  }, [value]);
+
+  const setFilterQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = "";
+    }
+    setSelectedValue(selection);
+    filterItems("usage", [{ value: selection, label: filters[selection] }]);
+  };
+
+  const filterAllStates = () => setFilterQuery("all");
+  const filterUsedState = () => setFilterQuery("used");
+  const filterUnusedState = () => setFilterQuery("unused");
+
+  const Header = () => (
+    <S.State isActive={isFilterActived}>
+      Usage
+      <S.IconsWrapper>
+        {isFilterActived ? (
+          <Icon name="Filter" size="16" />
+        ) : (
+          <S.InteractiveArrow>
+            <Icon name="DownArrow" size="16" />
+          </S.InteractiveArrow>
+        )}
+      </S.IconsWrapper>
+    </S.State>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Filter by usage</ListTitle>
+      <ListItem isSelected={!isFilterActived} onClick={filterAllStates}>
+        All
+      </ListItem>
+      <ListItem isSelected={selectedValue === "used"} onClick={filterUsedState}>
+        Show images in use
+      </ListItem>
+      <ListItem isSelected={selectedValue === "unused"} onClick={filterUnusedState}>
+        Show unused images
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface IProps {
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
+}
+
+export default UsageFilter;

package/src/modules/MediaGallery/ImageFilters/Usage/style.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const State = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 170px;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { State, IconsWrapper, InteractiveArrow };

package/src/modules/MediaGallery/ImageModal/DetailPanel/UsageContent/Item/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { getFormattedDateWithTimezone } from "@ax/helpers";
+import { Tooltip } from "@ax/components";
+
+import * as S from "./style";
+
+const Item = (props: IItemProps): JSX.Element => {
+  const { title, type, date, disabled = false, onClick } = props;
+
+  const notAllowed = "You are not allowed to access this page";
+
+  return (
+    <Tooltip content={disabled ? notAllowed : undefined} bottom>
+      <S.ListItem onClick={onClick} disabled={disabled}>
+        <S.Content>
+          <S.Header>
+            <S.Type>{type}</S.Type>
+            <S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
+          </S.Header>
+          <S.Title>{title}</S.Title>
+        </S.Content>
+      </S.ListItem>
+    </Tooltip>
+  );
+};
+
+interface IItemProps {
+  title: string;
+  type: string;
+  date: Date;
+  disabled?: boolean;
+  onClick: () => void;
+}
+
+export default Item;

package/src/modules/MediaGallery/ImageModal/DetailPanel/UsageContent/Item/style.tsx

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent}
+`;
+
+const Header = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Type = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+`;
+
+const Date = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  margin-left: auto;
+`;
+
+const ListItem = styled.li<{ disabled: boolean }>`
+  display: flex;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
+  :hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    cursor: pointer;
+  }
+  ${Title}, ${Type}, ${Date} {
+    color: ${(p) => (p.disabled ? p.theme.colors.interactiveDisabled : p.theme.colors.textHighEmphasis)};
+  }
+`;
+
+const Content = styled.div`
+  width: 100%;
+`;
+
+export { ListItem, Title, Header, Type, Date, Content };

package/src/modules/MediaGallery/ImageModal/DetailPanel/UsageContent/ItemGroup/index.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import Item from "../Item";
+import { IImageUseItem } from "..";
+
+import * as S from "./style";
+
+const ItemGroup = (props: IItemGroupProps): React.ReactElement => {
+  const { title, items, disabled, onClick } = props;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => setIsOpen(!isOpen);
+
+  return (
+    <S.Wrapper>
+      <S.Label onClick={handleClick} isOpen={isOpen}>
+        {title}
+      </S.Label>
+      <S.Content isOpen={isOpen}>
+        {items.map((item) => {
+          const handleClick = () => onClick(item);
+          return (
+            <Item
+              title={item.title}
+              date={item.date}
+              type={item.structuredData?.title || "Page"}
+              key={item.id}
+              onClick={handleClick}
+              disabled={disabled}
+            />
+          );
+        })}
+      </S.Content>
+    </S.Wrapper>
+  );
+};
+
+interface IItemGroupProps {
+  title: string;
+  items: IImageUseItem[];
+  disabled?: boolean;
+  onClick(item: IImageUseItem): void;
+}
+
+export default ItemGroup;

package/src/modules/MediaGallery/ImageModal/DetailPanel/UsageContent/ItemGroup/style.tsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
+`;
+
+const Label = styled.div<{ isOpen: boolean }>`
+  position: relative;
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  cursor: pointer;
+  :after {
+    position: absolute;
+    right: 10px;
+    top: ${(p) => (p.isOpen ? `10px` : `6px`)};
+    content: "";
+    border: solid ${(p) => p.theme.color.interactive01};
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    padding: 3px;
+    transform: ${(p) => (p.isOpen ? `rotate(-135deg)` : `rotate(45deg)`)};
+  }
+`;
+
+const Content = styled.div<{ isOpen: boolean }>`
+  overflow-y: ${(p) => (p.isOpen ? "visible" : "hidden")};
+  max-height: ${(p) => (p.isOpen ? `auto` : 0)};
+  transition: all 0.5s ease-in-out;
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+export { Wrapper, Label, Content };