@dbcdk/react-components 0.0.2 → 0.0.4

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
+import { Tooltip } from '../tooltip/Tooltip';
+import styles from './SegmentedProgressBar.module.css';
+
+const SegmentedProgressBar = ({
+  segments,
+  total,
+  showRemainder = true,
+  remainderSeverity = "neutral",
+  centerLabel,
+  height,
+  rounded = true,
+  trackColor = "var(--color-secondary)",
+  tooltipPlacement = "top",
+  className,
+  ...aria
+}) => {
+  var _a;
+  const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
+  const effectiveTotal = total != null ? total : sum;
+  const safeTotal = Math.max(effectiveTotal, 1e-4);
+  const remainder = Math.max(effectiveTotal - sum, 0);
+  const pctFilled = Math.min(100, Math.max(0, Math.min(sum, effectiveTotal) / safeTotal * 100));
+  const computedSegments = [
+    ...segments,
+    ...showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []
+  ];
+  const autoNumbers = (() => {
+    const base = segments.map((s) => s.value || 0);
+    if (showRemainder) base.push(remainder);
+    return base.join("/");
+  })();
+  const rootClass = [styles.container, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: rootClass,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": effectiveTotal,
+      "aria-valuenow": Math.min(sum, effectiveTotal),
+      ...aria,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles.progressBar,
+          style: {
+            height: height ? `${height}px` : `var(--component-size-xs)`,
+            borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
+            background: trackColor
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.segmentsContainer, children: (_a = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0)) == null ? void 0 : _a.map((seg, i) => {
+              var _a2, _b, _c, _d, _e;
+              const bg = (_b = seg.color) != null ? _b : SeverityBgColor[(_a2 = seg.severity) != null ? _a2 : "neutral"];
+              const fg = SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
+              const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
+              return /* @__PURE__ */ jsx(
+                Tooltip,
+                {
+                  content: tooltipText,
+                  placement: tooltipPlacement,
+                  className: styles.segmentWrapper,
+                  style: {
+                    flex: `${Math.max(seg.value || 0, 0)} 0 0`,
+                    height: "100%",
+                    minWidth: "2px"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: styles.progressSegment,
+                      "data-index": i,
+                      "data-severity": (_e = seg.severity) != null ? _e : "neutral",
+                      style: { background: bg, color: fg }
+                    }
+                  )
+                },
+                `${i}`
+              );
+            }) }),
+            /* @__PURE__ */ jsx("div", { className: styles.progressCenter, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
+          ]
+        }
+      )
+    }
+  );
+};
+
+export { SegmentedProgressBar };

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -0,0 +1,55 @@
+.container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.progressBar {
+  position: relative;
+  width: 100%;
+  display: flex;
+  border-radius: var(--border-radius-default);
+  background: var(--opac-bg-default);
+}
+
+.progressSegment {
+  height: 100%;
+  flex: 1 1 auto;
+  min-width: 2px;
+}
+
+.progressCenter {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverse);
+  font-size: inherit;
+  pointer-events: none;
+}
+
+.segmentWrapper,
+.segmentsContainer {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.segmentWrapper:first-of-type .progressSegment {
+  border-top-left-radius: var(--border-radius-rounded);
+  border-bottom-left-radius: var(--border-radius-rounded);
+}
+
+.segmentWrapper:last-of-type .progressSegment {
+  border-top-right-radius: var(--border-radius-rounded);
+  border-bottom-right-radius: var(--border-radius-rounded);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progressBar,
+  .progressSegment,
+  .progressCenter {
+    transition: none;
+  }
+}

package/dist/components/select/Select.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+var Button = require('../button/Button');
+var ClearButton = require('../clear-button/ClearButton');
+var react = require('react');
+
+function Select({
+  options,
+  selectedValue,
+  onChange,
+  placeholder = "V\xE6lg",
+  size,
+  variant = "outlined",
+  onClear
+}) {
+  const ref = react.useRef(null);
+  const selected = options.find((o) => o.value === selectedValue);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      ref,
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant, onClick, size, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : placeholder }),
+        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+        icon
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((opt) => {
+        const isActive = opt.value === selectedValue;
+        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              onChange(opt.value);
+              (_a = ref.current) == null ? void 0 : _a.close();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
+              opt.label
+            ]
+          }
+        ) }, opt.value);
+      }) })
+    }
+  );
+}
+
+exports.Select = Select;

package/dist/components/select/Select.d.ts

@@ -0,0 +1,11 @@
+import { ButtonVariant } from '../button/Button';
+import { MultiselectOption } from '../filter-field/FilterField';
+export declare function Select({ options, selectedValue, onChange, placeholder, size, variant, onClear, }: {
+    options: MultiselectOption[];
+    selectedValue: string | null;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    onClear?: () => void;
+}): React.ReactNode;

package/dist/components/select/Select.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Check } from 'lucide-react';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+import { Button } from '../button/Button';
+import { ClearButton } from '../clear-button/ClearButton';
+import { useRef } from 'react';
+
+function Select({
+  options,
+  selectedValue,
+  onChange,
+  placeholder = "V\xE6lg",
+  size,
+  variant = "outlined",
+  onClear
+}) {
+  const ref = useRef(null);
+  const selected = options.find((o) => o.value === selectedValue);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ref,
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { variant, onClick, size, children: [
+        /* @__PURE__ */ jsx("span", { children: selected ? selected.label : placeholder }),
+        onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+        icon
+      ] }),
+      children: /* @__PURE__ */ jsx(Menu, { children: options.map((opt) => {
+        const isActive = opt.value === selectedValue;
+        return /* @__PURE__ */ jsx(Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              var _a;
+              onChange(opt.value);
+              (_a = ref.current) == null ? void 0 : _a.close();
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isActive ? /* @__PURE__ */ jsx(Check, {}) : null }),
+              opt.label
+            ]
+          }
+        ) }, opt.value);
+      }) })
+    }
+  );
+}
+
+export { Select };

package/dist/components/sidebar/Sidebar.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Sidebar.module.css');
+var Headline = require('../headline/Headline');
+var SidenavFiltering = require('./components/sidenav-filteirng/SidenavFiltering');
+var SidebarProvider = require('./providers/SidebarProvider');
+var SidebarItems = require('./components/sidebar-items/SidebarItems');
+var logo = require('../../assets/logo');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
+
+function Sidebar({
+  collapsed,
+  items,
+  logo: logo$1,
+  productName,
+  productLogo,
+  activeLink
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
+      productName && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: productName }),
+      productLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.links, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer })
+  ] });
+}
+
+exports.Sidebar = Sidebar;

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { NavBarItem } from '../nav-bar/NavBar';
+interface SidebarProps {
+    collapsed?: boolean;
+    items: NavBarItem[];
+    logo?: React.ReactNode;
+    productName?: string;
+    productLogo?: React.ReactNode;
+    activeLink?: string;
+}
+export declare function Sidebar({ collapsed, items, logo, productName, productLogo, activeLink, }: SidebarProps): JSX.Element;
+export {};

package/dist/components/sidebar/Sidebar.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Sidebar.module.css';
+import { Headline } from '../headline/Headline';
+import SidenavFiltering from './components/sidenav-filteirng/SidenavFiltering';
+import { SidebarProvider } from './providers/SidebarProvider';
+import { SidebarItems } from './components/sidebar-items/SidebarItems';
+import { Logo } from '../../assets/logo';
+
+function Sidebar({
+  collapsed,
+  items,
+  logo,
+  productName,
+  productLogo,
+  activeLink
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.logo, children: logo != null ? logo : /* @__PURE__ */ jsx(Logo, {}) }),
+      productName && /* @__PURE__ */ jsx(Headline, { disableMargin: true, children: productName }),
+      productLogo && /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo })
+    ] }),
+    /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsx(SidenavFiltering, {}),
+      /* @__PURE__ */ jsx("div", { className: styles.links, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: styles.footer })
+  ] });
+}
+
+export { Sidebar };

package/dist/components/sidebar/Sidebar.module.css

@@ -0,0 +1,66 @@
+.container {
+  flex-shrink: 1;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  width: 240px;
+  inline-size: 240px;
+  box-sizing: border-box;
+
+  border-inline-end: var(--border-width-thin) solid var(--color-border);
+  padding: var(--spacing-lg) var(--spacing-md);
+}
+
+.container a {
+  text-decoration: none;
+  color: inherit;
+}
+.container button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  display: flex;
+  padding: 0;
+}
+
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.links {
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+  flex-direction: column;
+  font-size: var(--font-size-sm);
+}
+
+.header {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.logo img,
+.logo svg {
+  max-inline-size: 50px;
+  block-size: auto;
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: var(--spacing-lg);
+}
+
+.footer {
+  flex: 0 0 auto;
+}

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SidebarItemContent = require('./sidebar-item-content/SidebarItemContent');
+
+function SidebarItem({
+  component: Component,
+  label,
+  icon,
+  href
+}) {
+  if (!Component) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItemContent.SidebarItemContent, { icon, label, href }) });
+}
+
+exports.SidebarItem = SidebarItem;

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SidebarItemProps {
+    component?: React.ElementType;
+    label: string;
+    icon: React.ReactNode;
+    href?: string;
+}
+export declare function SidebarItem({ component: Component, label, icon, href, }: SidebarItemProps): React.ReactNode;
+export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
+
+function SidebarItem({
+  component: Component,
+  label,
+  icon,
+  href
+}) {
+  if (!Component) return null;
+  return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(SidebarItemContent, { icon, label, href }) });
+}
+
+export { SidebarItem };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SidebarItemContent = require('../sidebar-item-content/SidebarItemContent');
+var lucideReact = require('lucide-react');
+var styles = require('./ExpandableSidebarItem.module.css');
+var SidebarProvider = require('../../providers/SidebarProvider');
+var SidebarItem = require('../SidebarItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ExpandableSidebarItem({
+  items,
+  label,
+  icon,
+  href
+}) {
+  const { defaultExpanded, resetExpandAll, activeLink } = SidebarProvider.useSidebar();
+  const [expanded, setExpanded] = react.useState(false);
+  const [closing, setClosing] = react.useState(false);
+  const [ready, setReady] = react.useState(false);
+  react.useEffect(() => {
+    setReady(true);
+  }, []);
+  react.useEffect(() => {
+    if (defaultExpanded === null) {
+      return;
+    }
+    setExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+  const handleAnimationEnd = react.useCallback(() => {
+    if (ready) {
+      setExpanded(!closing);
+      setClosing(false);
+    }
+  }, [closing, ready]);
+  const toggleAccordion = react.useCallback(() => {
+    resetExpandAll();
+    if (!expanded) {
+      setExpanded(true);
+      return;
+    }
+    setClosing(true);
+  }, [expanded]);
+  if (!items) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${expanded ? styles__default.default.expanded : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: toggleAccordion, className: styles__default.default.button, children: /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarItemContent.SidebarItemContent,
+      {
+        icon,
+        label,
+        suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ChevronDown,
+          {
+            className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
+          }
+        )
+      }
+    ) }),
+    expanded && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onAnimationEnd: handleAnimationEnd,
+        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
+        children: items.map(({ component: Component, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsxRuntime.jsx(SidebarItem.SidebarItem, { component: Component, label: label2, icon: icon2, href: href2 }, id))
+      }
+    )
+  ] });
+}
+
+exports.ExpandableSidebarItem = ExpandableSidebarItem;

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -0,0 +1,9 @@
+import { NavBarItem } from '@/components/nav-bar/NavBar';
+interface ExpandableSidebarItemProps {
+    items: NavBarItem[];
+    label: string;
+    icon: React.ReactNode;
+    href?: string;
+}
+export declare function ExpandableSidebarItem({ items, label, icon, href, }: ExpandableSidebarItemProps): React.ReactNode;
+export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
+import { ChevronDown } from 'lucide-react';
+import styles from './ExpandableSidebarItem.module.css';
+import { useSidebar } from '../../providers/SidebarProvider';
+import { SidebarItem } from '../SidebarItem';
+
+function ExpandableSidebarItem({
+  items,
+  label,
+  icon,
+  href
+}) {
+  const { defaultExpanded, resetExpandAll, activeLink } = useSidebar();
+  const [expanded, setExpanded] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    setReady(true);
+  }, []);
+  useEffect(() => {
+    if (defaultExpanded === null) {
+      return;
+    }
+    setExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+  const handleAnimationEnd = useCallback(() => {
+    if (ready) {
+      setExpanded(!closing);
+      setClosing(false);
+    }
+  }, [closing, ready]);
+  const toggleAccordion = useCallback(() => {
+    resetExpandAll();
+    if (!expanded) {
+      setExpanded(true);
+      return;
+    }
+    setClosing(true);
+  }, [expanded]);
+  if (!items) return null;
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ""}`, children: [
+    /* @__PURE__ */ jsx("button", { onClick: toggleAccordion, className: styles.button, children: /* @__PURE__ */ jsx(
+      SidebarItemContent,
+      {
+        icon,
+        label,
+        suffixIcon: /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
+          }
+        )
+      }
+    ) }),
+    expanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onAnimationEnd: handleAnimationEnd,
+        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
+        children: items.map(({ component: Component, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsx(SidebarItem, { component: Component, label: label2, icon: icon2, href: href2 }, id))
+      }
+    )
+  ] });
+}
+
+export { ExpandableSidebarItem };

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -0,0 +1,61 @@
+.button {
+  color: var(--color-text);
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-default);
+}
+
+.container.expanded {
+}
+
+.childrenContainer {
+  overflow: hidden;
+
+  /* --width: 2px;
+  --color: var(--opac-bg-default); */
+}
+
+/* .childrenContainer::after {
+}
+
+.childrenContainer > * {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: top;
+    background-color: var(--color);
+    left: 0;
+    height: 100%;
+    width: var(--width);
+    left: var(--icon-size);
+    transform: translateX(-50%);
+  }
+  &:last-of-type {
+    &::before {
+      height: calc(50% + var(--width));
+    }
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 50%;
+    background-color: var(--color);
+    height: var(--width);
+    width: calc(var(--icon-size) / 2 + 5px);
+    left: calc(var(--icon-size) + var(--width) / 2);
+    transform: translateY(100%);
+  }
+} */
+
+.chevron {
+  transition: transform 0.3s ease;
+}
+
+.chevronExpanded {
+  transform: rotate(180deg);
+}