orcs-design-system 3.3.74 → 3.3.76

package/es/components/Avatar/index.js

@@ -637,9 +637,10 @@ const Avatar = _ref0 => {
       text: localTime,
       children: /*#__PURE__*/_jsx(StatusDot, {
         icon: true,
+        variant: "secondary",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: ["fas", "clock"],
-          color: defaultIconColor,
+          color: "white",
           transform: "grow-2"
         })
       })

package/es/components/CodeBlock/CodeBlock.stories.js

@@ -0,0 +1,475 @@
+import React from "react";
+import CodeBlock from "./index";
+import { H2, P } from "../Typography";
+import Box from "../Box";
+import Spacer from "../Spacer";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "Components/CodeBlock",
+  component: CodeBlock,
+  decorators: [Story => /*#__PURE__*/_jsx(Box, {
+    p: "r",
+    children: /*#__PURE__*/_jsx(Story, {})
+  })]
+};
+const sampleJSON = {
+  name: "TeamForm Configuration",
+  version: "2.0",
+  features: {
+    allocation: true,
+    integrations: ["jira", "slack", "azure"],
+    limits: {
+      maxUsers: 1000,
+      maxProjects: 50
+    }
+  },
+  metadata: {
+    created: "2025-01-15",
+    lastModified: "2025-01-20"
+  }
+};
+const sampleJavaScript = `function calculateAllocation(person, project, fte) {
+  if (!person || !project) {
+    throw new Error("Person and project are required");
+  }
+  
+  const allocation = {
+    personId: person.id,
+    projectId: project.id,
+    fte: Math.min(Math.max(fte, 0), 1),
+    startDate: new Date(),
+    status: "active"
+  };
+  
+  return allocation;
+}
+
+export default calculateAllocation;`;
+const sampleTypeScript = `interface Person {
+  id: string;
+  name: string;
+  email: string;
+  fte: number;
+}
+
+type AllocationStatus = "active" | "pending" | "completed";
+
+class AllocationManager {
+  private allocations: Map<string, Person>;
+  
+  constructor() {
+    this.allocations = new Map();
+  }
+  
+  addAllocation(person: Person): void {
+    this.allocations.set(person.id, person);
+  }
+  
+  getTotalFte(): number {
+    return Array.from(this.allocations.values())
+      .reduce((sum, person) => sum + person.fte, 0);
+  }
+}`;
+const sampleSQL = `SELECT 
+  p.id,
+  p.name,
+  p.email,
+  COUNT(a.id) as allocation_count,
+  SUM(a.fte) as total_fte
+FROM persons p
+LEFT JOIN allocations a ON p.id = a.person_id
+WHERE a.status = 'active'
+  AND a.start_date >= '2025-01-01'
+GROUP BY p.id, p.name, p.email
+HAVING SUM(a.fte) > 0.5
+ORDER BY total_fte DESC;`;
+const sampleBash = `#!/bin/bash
+
+# Deploy script for TeamForm
+set -e
+
+echo "Starting deployment..."
+
+# Build the application
+npm run build
+
+# Run tests
+npm test
+
+# Deploy to production
+if [ "$ENV" = "production" ]; then
+  echo "Deploying to production..."
+  npm run deploy:prod
+else
+  echo "Deploying to staging..."
+  npm run deploy:staging
+fi
+
+echo "Deployment complete!"`;
+const samplePython = `class AllocationCalculator:
+    def __init__(self, max_fte=1.0):
+        self.max_fte = max_fte
+        self.allocations = []
+    
+    def add_allocation(self, person_id, project_id, fte):
+        """Add a new allocation for a person to a project."""
+        if fte > self.max_fte:
+            raise ValueError(f"FTE cannot exceed {self.max_fte}")
+        
+        allocation = {
+            'person_id': person_id,
+            'project_id': project_id,
+            'fte': fte,
+            'status': 'active'
+        }
+        self.allocations.append(allocation)
+        return allocation
+    
+    def get_total_fte(self, person_id):
+        """Calculate total FTE for a person across all projects."""
+        return sum(
+            a['fte'] for a in self.allocations 
+            if a['person_id'] == person_id
+        )`;
+
+// Default story (light variant)
+export const Default = () => /*#__PURE__*/_jsx(CodeBlock, {
+  language: "json",
+  children: JSON.stringify(sampleJSON, null, 2)
+});
+
+// Light variant (explicit)
+export const LightVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Light Theme (Default)"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Clean white background with dark text - matches existing pre tag styling"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    variant: "light",
+    showLineNumbers: true,
+    children: JSON.stringify(sampleJSON, null, 2)
+  })]
+});
+
+// Dark variant
+export const DarkVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Dark Theme"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Dark background with light text for reduced eye strain"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    variant: "dark",
+    showLineNumbers: true,
+    children: JSON.stringify(sampleJSON, null, 2)
+  })]
+});
+
+// Side by side comparison
+export const VariantComparison = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Light vs Dark Comparison"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Light variant (default):"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "javascript",
+    variant: "light",
+    children: sampleJavaScript
+  }), /*#__PURE__*/_jsx(Spacer, {
+    mb: "r"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Dark variant:"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "javascript",
+    variant: "dark",
+    children: sampleJavaScript
+  })]
+});
+
+// With line numbers
+export const WithLineNumbers = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "JSON Configuration with Line Numbers"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    showLineNumbers: true,
+    children: JSON.stringify(sampleJSON, null, 2)
+  })]
+});
+
+// Without header
+export const WithoutHeader = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Minimal Mode (No Header)"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Useful for embedding in tight spaces"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    showHeader: false,
+    children: JSON.stringify(sampleJSON, null, 2)
+  })]
+});
+
+// Custom max height
+export const CustomMaxHeight = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Limited Height with Scrolling"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Set maxHeight to control vertical scrolling"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    maxHeight: "200px",
+    children: JSON.stringify(sampleJSON, null, 2)
+  })]
+});
+
+// JavaScript example
+export const JavaScript = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "JavaScript with Line Numbers"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "javascript",
+    showLineNumbers: true,
+    children: sampleJavaScript
+  })]
+});
+
+// TypeScript example
+export const TypeScript = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "TypeScript"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "typescript",
+    showLineNumbers: true,
+    children: sampleTypeScript
+  })]
+});
+
+// SQL example
+export const SQL = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "SQL Query"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "sql",
+    showLineNumbers: true,
+    children: sampleSQL
+  })]
+});
+
+// Bash example
+export const BashScript = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Shell Script"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "bash",
+    showLineNumbers: true,
+    children: sampleBash
+  })]
+});
+
+// Python example
+export const Python = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Python Class"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "python",
+    showLineNumbers: true,
+    children: samplePython
+  })]
+});
+
+// Multiple code blocks
+export const MultipleBlocks = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Configuration Comparison"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Original Configuration:"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    maxHeight: "150px",
+    children: JSON.stringify({
+      version: "1.0",
+      features: ["basic"]
+    }, null, 2)
+  }), /*#__PURE__*/_jsx(Spacer, {
+    mb: "r"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Updated Configuration:"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    maxHeight: "150px",
+    children: JSON.stringify(sampleJSON, null, 2)
+  })]
+});
+
+// Compact JSON
+export const CompactJSON = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Compact Mode for Small Snippets"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    showHeader: false,
+    maxHeight: "100px",
+    children: JSON.stringify({
+      status: "success",
+      count: 42
+    }, null, 2)
+  })]
+});
+
+// All features enabled
+export const AllFeaturesEnabled = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "All Features Enabled"
+  }), /*#__PURE__*/_jsx(P, {
+    mb: "r",
+    children: "Header + Line Numbers + Copy Button + Custom Height"
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "javascript",
+    showLineNumbers: true,
+    showCopyButton: true,
+    showHeader: true,
+    maxHeight: "300px",
+    children: sampleJavaScript
+  })]
+});
+
+// Usage example for migration
+export const MigrationExample = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(H2, {
+    mb: "r",
+    children: "Migration from <pre> tags"
+  }), /*#__PURE__*/_jsxs(P, {
+    mb: "r",
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: "Before:"
+    }), " Plain HTML pre tag"]
+  }), /*#__PURE__*/_jsx(Box, {
+    bg: "greyLightest",
+    p: "r",
+    borderRadius: "2",
+    mb: "r",
+    style: {
+      fontFamily: "monospace"
+    },
+    children: /*#__PURE__*/_jsx("pre", {
+      children: JSON.stringify({
+        old: "approach"
+      }, null, 2)
+    })
+  }), /*#__PURE__*/_jsxs(P, {
+    mb: "r",
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: "After:"
+    }), " CodeBlock component with syntax highlighting"]
+  }), /*#__PURE__*/_jsx(CodeBlock, {
+    language: "json",
+    children: JSON.stringify({
+      new: "approach",
+      benefits: ["highlighting", "copy", "themes"]
+    }, null, 2)
+  })]
+});
+Default.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Default"
+};
+LightVariant.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "LightVariant"
+};
+DarkVariant.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "DarkVariant"
+};
+VariantComparison.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "VariantComparison"
+};
+WithLineNumbers.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "WithLineNumbers"
+};
+WithoutHeader.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "WithoutHeader"
+};
+CustomMaxHeight.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CustomMaxHeight"
+};
+JavaScript.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "JavaScript"
+};
+TypeScript.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TypeScript"
+};
+SQL.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SQL"
+};
+BashScript.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "BashScript"
+};
+Python.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Python"
+};
+MultipleBlocks.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "MultipleBlocks"
+};
+CompactJSON.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "CompactJSON"
+};
+AllFeaturesEnabled.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "AllFeaturesEnabled"
+};
+MigrationExample.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "MigrationExample"
+};

package/es/components/CodeBlock/CodeBlock.stories.test.js

@@ -0,0 +1,92 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import * as stories from "./CodeBlock.stories";
+
+// Mock clipboard API
+import { jsx as _jsx } from "react/jsx-runtime";
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn().mockResolvedValue()
+  }
+});
+describe("CodeBlock Stories", () => {
+  it("Renders components-codeblock--default story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.Default, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--with-line-numbers story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.WithLineNumbers, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--without-header story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.WithoutHeader, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--custom-max-height story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.CustomMaxHeight, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--java-script story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.JavaScript, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--type-script story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.TypeScript, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--sql story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.SQL, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--bash-script story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.BashScript, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--python story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.Python, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--multiple-blocks story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.MultipleBlocks, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--compact-json story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.CompactJSON, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--all-features-enabled story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.AllFeaturesEnabled, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+  it("Renders components-codeblock--migration-example story", () => {
+    const {
+      container
+    } = render(/*#__PURE__*/_jsx(stories.MigrationExample, {}));
+    expect(container.firstChild).not.toBeNull();
+  });
+});