@canonical/react-ds-core 0.10.0-experimental.5 → 0.10.0-experimental.6

package/dist/esm/ui/Section/Section.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds section";
+/**
+ * The `<Section>` component groups related content.
+ * Sections can have varying visual spacing levels to organize information according to an information hierarchy.
+ *
+ * @implements syntax:core:component:section:1.0.0
+ */
+const Section = ({ className, children, spacing, bordered = false, ...props }) => {
+    return (_jsx("section", { className: [
+            componentCssClassName,
+            bordered && "bordered",
+            spacing,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), ...props, children: children }));
+};
+export default Section;
+//# sourceMappingURL=Section.js.map

package/dist/esm/ui/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/ui/Section/Section.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAE3C;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACK,EAAsB,EAAE;IACrC,OAAO,CACL,kBACE,SAAS,EAAE;YACT,qBAAqB;YACrB,QAAQ,IAAI,UAAU;YACtB,OAAO;YACP,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,YAER,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/ui/Section/constants.js

@@ -0,0 +1,2 @@
+export const SECTION_SPACING = ["shallow", "deep", "hero"];
+//# sourceMappingURL=constants.js.map

package/dist/esm/ui/Section/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/ui/Section/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC"}

package/dist/esm/ui/Section/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Section } from "./Section.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Section/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Section/styles.css

@@ -0,0 +1,50 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.section {
+  --section-padding-bottom: var(--section-padding-bottom-spacing-default);
+
+  /*
+    Section top padding is the sum of padding applied by two props - `spacing` and `bordered`.
+    We namespace each padding type, then add them together in the final padding-top declaration.
+    */
+  --section-padding-top-spacing: var(--section-padding-top-spacing-default);
+  --section-padding-top-bordered: var(--section-padding-top-bordered-default);
+
+  &.bordered {
+    /* Top padding subtracts border height */
+    --section-padding-top-bordered: var(--section-padding-top-bordered-true);
+    border-top-color: var(--section-border-start-color);
+    border-top-style: var(--section-border-start-style);
+    border-top-width: var(--section-border-start-width);
+  }
+
+  /*
+    Spacing variants
+    Note that top padding is only defined for the hero variant in our core setup.
+    The top padding is still bound here in case users customize their tokens.
+    */
+  &.shallow {
+    --section-padding-bottom: var(--section-padding-bottom-spacing-shallow);
+    --section-padding-top-spacing: var(--section-padding-top-spacing-shallow);
+  }
+
+  &.deep {
+    --section-padding-bottom: var(--section-padding-bottom-spacing-deep);
+    --section-padding-top-spacing: var(--section-padding-top-spacing-deep);
+    /* TODO add responsiveness https://github.com/canonical/vanilla-framework/blob/6af35433368f82d76d8deb7effebca47b434ee76/scss/_patterns_section.scss#L16-L18 */
+  }
+
+  &.hero {
+    --section-padding-bottom: var(--section-padding-bottom-spacing-hero);
+    --section-padding-top-spacing: var(--section-padding-top-spacing-hero);
+
+    /*    TODO add responsiveness https://github.com/canonical/vanilla-framework/blob/6af35433368f82d76d8deb7effebca47b434ee76/scss/_patterns_section.scss#L32-L34 */
+  }
+
+  padding-bottom: var(--section-padding-bottom);
+  /*   Padding-top is applied by both the `spacing` prop and the `bordered` props */
+  padding-top: calc(
+    var(--section-padding-top-spacing) +
+    var(--section-padding-top-bordered)
+  );
+}

package/dist/esm/ui/Section/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Section/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Section/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/index.js

@@ -5,6 +5,7 @@ export * from "./Chip/index.js";
 export * from "./Icon/index.js";
 export * from "./Link/index.js";
 export * from "./Rule/index.js";
+export * from "./Section/index.js";
 export * from "./SkipLink/index.js";
 export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/types/ui/Section/Section.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+import type { SectionProps } from "./types.js";
+import "./styles.css";
+/**
+ * The `<Section>` component groups related content.
+ * Sections can have varying visual spacing levels to organize information according to an information hierarchy.
+ *
+ * @implements syntax:core:component:section:1.0.0
+ */
+declare const Section: ({ className, children, spacing, bordered, ...props }: SectionProps) => React.ReactElement;
+export default Section;
+//# sourceMappingURL=Section.d.ts.map

package/dist/types/ui/Section/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/ui/Section/Section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,cAAc,CAAC;AAItB;;;;;GAKG;AACH,QAAA,MAAM,OAAO,GAAI,sDAMd,YAAY,KAAG,KAAK,CAAC,YAgBvB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/ui/Section/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SECTION_SPACING: string[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/ui/Section/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/ui/Section/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,UAA8B,CAAC"}

package/dist/types/ui/Section/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Section } from "./Section.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Section/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,YAAY,CAAC"}

package/dist/types/ui/Section/types.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SECTION_SPACING } from "./constants.js";
+export type SectionSpacing = (typeof SECTION_SPACING)[number];
+/**
+    We have used the `HTMLDivElement` as a default props base.
+    If your component is based on a different HTML element, please update it accordingly.
+    See https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API for a full list of HTML elements interfaces.
+*/
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children: ReactNode;
+    /**
+      Spacing variant of the section
+      FLAG: Unique, potentially inconsistent/unstable API
+    */
+    spacing?: SectionSpacing;
+    /** Whether the section has a top border */
+    bordered?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Section/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Section/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D;;;;EAIE;AACF,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;MAGE;IACF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/types/ui/index.d.ts

@@ -5,6 +5,7 @@ export * from "./Chip/index.js";
 export * from "./Icon/index.js";
 export * from "./Link/index.js";
 export * from "./Rule/index.js";
+export * from "./Section/index.js";
 export * from "./SkipLink/index.js";
 export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-core",
-  "version": "0.10.0-experimental.5",
+  "version": "0.10.0-experimental.6",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,9 +38,9 @@
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/ds-assets": "^0.10.0-experimental.5",
-    "@canonical/storybook-config": "^0.10.0-experimental.5",
-    "@canonical/styles": "^0.10.0-experimental.5",
+    "@canonical/ds-assets": "^0.10.0-experimental.6",
+    "@canonical/storybook-config": "^0.10.0-experimental.6",
+    "@canonical/styles": "^0.10.0-experimental.6",
     "@canonical/utils": "^0.10.0-experimental.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
@@ -66,5 +66,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3"
   },
-  "gitHead": "467161a7c642004bf423a62ca1e76e0e31f568c3"
+  "gitHead": "38a018056a27bd884152a00c1265b95772a8eb61"
 }