@roadlittledawn/docs-design-system-react 0.2.0 → 0.2.1

package/dist/components/Callout.js

@@ -7,13 +7,12 @@ var defaultTitles = {
 };
 export function Callout(_a) {
     var variant = _a.variant, title = _a.title, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
-    var calloutClasses = [
-        "dds-callout",
-        "dds-callout-".concat(variant),
-        className,
-    ]
+    var calloutClasses = ["dds-callout", "dds-callout-".concat(variant), className]
         .filter(Boolean)
         .join(" ");
-    var titleClasses = ["dds-callout-title", "dds-callout-title-".concat(variant)].join(" ");
-    return (_jsxs("div", { className: calloutClasses, children: [title !== null && (_jsx("h4", { className: titleClasses, children: title || defaultTitles[variant] })), children] }));
+    var titleClasses = [
+        "dds-callout-title",
+        "dds-callout-title-".concat(variant),
+    ].join(" ");
+    return (_jsxs("div", { className: calloutClasses, children: [title !== null && (_jsx("p", { className: titleClasses, children: title || defaultTitles[variant] })), children] }));
 }

package/dist/components/Heading.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 interface HeadingProps {
+    /** Optionally override auto-generation of `id` attribute */
+    id?: string;
     /** Heading level (h1, h2, h3, or h4) */
     level: 1 | 2 | 3 | 4;
     /** Heading content */
@@ -7,5 +9,5 @@ interface HeadingProps {
     /** Additional CSS classes */
     className?: string;
 }
-export declare function Heading({ level, children, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ level, children, id, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Heading.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import slugify from "../utils/slugify";
 export function Heading(_a) {
-    var level = _a.level, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var _b;
+    var level = _a.level, children = _a.children, id = _a.id, _c = _a.className, className = _c === void 0 ? "" : _c;
     var Tag = "h".concat(level);
     var classNames = "dds-heading dds-heading-".concat(level, " ").concat(className).trim();
-    return _jsx(Tag, { className: classNames, children: children });
+    var generatedId = typeof children === "string" ? (_b = slugify({ value: children })) !== null && _b !== void 0 ? _b : undefined : undefined;
+    var idAttr = id !== null && id !== void 0 ? id : generatedId;
+    return (_jsx(Tag, { id: idAttr, className: classNames, children: children }));
 }

package/dist/styles.css

@@ -108,6 +108,7 @@
   /* Callout Colors and Styles */
   --dds-callout-text: #374151; /* gray-700 */
   --dds-callout-padding: 1.25rem; /* p-5 */
+  --dds-callout-margin: 1rem 0;
   --dds-callout-radius: 0.25rem; /* rounded */
   --dds-callout-title-size: 0.75rem; /* text-xs */
   --dds-callout-title-margin-bottom: 0.5rem; /* mb-2 */
@@ -197,7 +198,8 @@
   /* Collapser Colors and Styles */
   --dds-collapser-radius: 0.375rem; /* rounded-md */
   --dds-collapser-border: #e5e7eb; /* gray-200 */
-  --dds-collapser-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --dds-collapser-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --dds-collapser-button-padding: 0.75rem; /* p-3 */
   --dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
   --dds-collapser-icon-color: #6b7280; /* gray-500 */
@@ -658,6 +660,7 @@ pre[class*="language-"] {
 }
 .dds-callout {
   padding: var(--dds-callout-padding);
+  margin: var(--dds-callout-margin);
   border-radius: var(--dds-callout-radius);
   border: 1px solid;
   border-left-width: 6px;

package/dist/utils/slugify.d.ts

@@ -0,0 +1,7 @@
+import { Options as SlugOptions } from "slug";
+interface SlugifyProps {
+    value: string;
+    options?: SlugOptions | string;
+}
+export default function slugify({ value, options }: SlugifyProps): string | null;
+export {};

package/dist/utils/slugify.js

@@ -0,0 +1,20 @@
+import slug from "slug";
+slug.extend({
+    "/": "-",
+    "\\": "-",
+    _: "-",
+    "-": "-",
+    "&": "and",
+});
+export default function slugify(_a) {
+    var value = _a.value, options = _a.options;
+    if (!value || value.match(/^\s+$/))
+        return null;
+    var slugified = typeof options === "string" ? slug(value, options) : slug(value, options);
+    // remove repetitive dashes
+    var repetitiveRemoved = slugified.replace(/-{2,}/g, "-");
+    // strip leading and trailing dashes
+    var dashesTrimmed = repetitiveRemoved.replace(/^-+/, "").replace(/-+$/, "");
+    // return null when empty
+    return dashesTrimmed || null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {
@@ -25,11 +25,13 @@
   "dependencies": {
     "prismjs": "^1.29.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "slug": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/slug": "^5.0.9",
     "postcss": "^8.4.0",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",