Merge pull request #12 from bigcommerce/feature/advanced-filters

feat(pattern): fix bugs and ui based on review

packages/examples-site/src/App.tsx

@@ -16,7 +16,8 @@ import InstallScreenApp from "./pages/InstallScreenPage/AppExample";
 import InstallScreenChannel from "./pages/InstallScreenPage/ChannelExample";
 import PageFiltersSearch from "./pages/FiltersSearchPage/FiltersSearchPage";
 import PageFiltersDropdowns from "./pages/FiltersDropdownsPage/FiltersDropdownsPage";
-import PageFiltersAdvanced from "./pages/FiltersAdvancedPAge/FiltersAdvancedPage";
+import PageFiltersAdvanced from "./pages/FiltersAdvancedPage/FiltersAdvancedPage";
+import PageFiltersAdvancedAdditive from "./pages/FiltersAdvancedAdditivePage/FiltersAdvancedAdditivePage";
 
 export const alertsManager = createAlertsManager();
 
@@ -39,6 +40,10 @@ const RouteFC = () => {
     { path: "/filters-search", element: <PageFiltersSearch /> },
     { path: "/filters-dropdowns", element: <PageFiltersDropdowns /> },
     { path: "/filters-advanced", element: <PageFiltersAdvanced /> },
+    {
+      path: "/filters-advanced-additive",
+      element: <PageFiltersAdvancedAdditive />,
+    },
   ]);
   return routes;
 };

packages/examples-site/src/pages/FiltersAdvancedAdditivePage/FiltersAdvancedAdditivePage.styled.tsx

@@ -0,0 +1,64 @@
+import { theme as defaultTheme } from "@bigcommerce/big-design-theme";
+import styled from "styled-components";
+import { BoxProps } from "@bigcommerce/big-design";
+
+import { GridItem, Link } from "@bigcommerce/big-design";
+
+export const StyledGridItem = styled(GridItem)`
+  align-content: center;
+`;
+
+export const StyledFiltersLink = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+  flex-gap: 0.25rem;
+`;
+
+export const StyledPanelContents = styled.div<BoxProps>`
+  display: block;
+  box-sizing: border-box;
+  margin-inline: -${({ theme }) => theme.spacing.medium};
+  max-width: calc(
+    100% + ${({ theme }) => theme.spacing.medium}px +
+      ${({ theme }) => theme.spacing.medium}px
+  );
+  overflow-x: auto;
+  @media (min-width: ${({ theme }) => theme.breakpointValues.tablet}) {
+    margin-inline: -${({ theme }) => theme.spacing.xLarge};
+    max-width: calc(
+      100% + ${({ theme }) => theme.spacing.xLarge}px +
+        ${({ theme }) => theme.spacing.xLarge}px
+    );
+  }
+`;
+
+// Provides default theme props to ensure consistent styling if not provided externally
+StyledPanelContents.defaultProps = { theme: defaultTheme };
+
+export const StyledProductImage = styled.div<BoxProps>`
+  display: block;
+  box-sizing: border-box;
+  width: 47px;
+  height: 47px;
+  border: ${({ theme }) => theme.border.box};
+  border-radius: ${({ theme }) => theme.borderRadius.normal};
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+StyledProductImage.defaultProps = { theme: defaultTheme };
+
+
+export const StyledBulkActions = styled.div<BoxProps>`
+display: block;
+@media (min-width: ${({ theme }) => theme.breakpointValues.tablet}) {
+  min-width: 300px;
+}
+`;
+
+StyledBulkActions.defaultProps = { theme: defaultTheme };