@sproutsocial/seeds-react-accordion 0.1.0

package/src/styles.ts

@@ -0,0 +1,194 @@
+import styled, { css } from "styled-components";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import {
+  BORDER,
+  COMMON,
+  FLEXBOX,
+  LAYOUT,
+  TYPOGRAPHY,
+} from "@sproutsocial/seeds-react-system-props";
+import { type TypeAccordionSystemProps } from "./AccordionTypes";
+
+interface StyledAccordionProps extends TypeAccordionSystemProps {
+  $styled?: boolean;
+}
+
+export const StyledAccordionItem = styled(RadixAccordion.Item)``;
+
+const animations = css`
+  @keyframes slideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+`;
+
+export const StyledRadixAccordionTrigger = styled(
+  RadixAccordion.Trigger
+)<StyledAccordionProps>`
+  padding: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: transparent;
+  ${({ theme }) => theme.typography[200]};
+
+  .triggerIcon {
+    color: ${({ theme }) => theme.colors.icon.base};
+    transition: transform 300ms ease-in-out;
+  }
+
+  &[data-state="open"] {
+    .triggerIcon {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &[data-styled] {
+    padding: ${({ theme }) => theme.space[400]};
+  }
+
+  ${COMMON}
+`;
+
+export const StyledRadixAccordionContent = styled(
+  RadixAccordion.Content
+)<StyledAccordionProps>`
+  ${animations}
+
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: slideDown 300ms ease-in-out;
+  }
+
+  &[data-state="closed"] {
+    animation: slideUp 300ms ease-in-out;
+  }
+
+  &[data-styled="true"] {
+    border-left: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    border-right: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    background: ${({ theme }) => theme.colors.container.background.base};
+  }
+
+  .accordion-item:last-child[data-state="open"] &[data-styled="true"],
+  .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
+    border-bottom: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
+    border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
+  }
+`;
+
+export const StyledAccordionArea = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+export const FlexCenter = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const ContentContainer = styled.div<StyledAccordionProps>`
+  color: ${({ theme }) => theme.colors.text.body};
+  background: transparent;
+  font-family: ${({ theme }) => theme.fontFamily};
+  ${({ theme }) => theme.typography[200]};
+
+  &[data-styled="true"] {
+    padding: ${({ theme }) => theme.space[400]};
+  }
+
+  .accordion-item:last-child[data-state="open"] &[data-styled="true"],
+  .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
+    border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
+    border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
+  }
+
+  ${COMMON}
+  ${BORDER}
+	${LAYOUT}
+	${FLEXBOX}
+`;
+
+export const TriggerContainer = styled.div<StyledAccordionProps>`
+  display: flex;
+  align-items: center;
+
+  &[data-styled="true"] {
+    border-top: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    border-left: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    border-right: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+    background: ${({ theme }) => theme.colors.container.background.base};
+  }
+
+  .accordion-item[data-state="open"] &[data-styled="true"] {
+    border-bottom: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+  }
+
+  .accordion-item[data-state="closed"] &[data-styled="true"] {
+    transition: border-bottom-color 0s ease-in-out 0.3s;
+    border-bottom: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid transparent`};
+  }
+
+  .accordion-item:first-child &[data-styled="true"] {
+    border-top-left-radius: ${({ theme }) => theme.radii.outer};
+    border-top-right-radius: ${({ theme }) => theme.radii.outer};
+  }
+
+  .accordion-item:last-child &[data-styled="true"] {
+    border-bottom: ${({ theme }) =>
+      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
+  }
+
+  .accordion-item:last-child[data-state="closed"] &[data-styled="true"] {
+    transition: border-radius 0s linear 0.3s;
+    border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
+    border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
+  }
+
+  ${COMMON}
+  ${BORDER}
+	${LAYOUT}
+	${FLEXBOX}
+`;
+
+export const TitleStyles = styled.h4<StyledAccordionProps>`
+  margin: 0;
+  font-size: ${({ theme }) => theme.fontSizes[200]};
+  font-weight: normal;
+
+  &[data-styled="true"] {
+    font-weight: ${({ theme }) => theme.fontWeights.semibold};
+    color: ${({ theme }) => theme.colors.text.headline};
+  }
+
+  ${COMMON}
+  ${TYPOGRAPHY}
+`;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));