chore: update documentation for project guidelines and standards

.github/copilot-instructions.md

@@ -1,53 +1,24 @@
 # GitHub Copilot Instructions for Equinor Design System
 
-## Project Overview
+## Overview
 
-This monorepo contains Equinor's Design System (EDS) - a component library and design tokens that implement Equinor's design language. The design system consists of multiple packages:
+Equinor Design System (EDS) is a monorepo with component libraries and design tokens implementing Equinor's design language.
 
-- `@equinor/eds-core-react`: Core React components
-- `@equinor/eds-tokens`: Design tokens and variables
-- `@equinor/eds-icons`: Icon library
-- `@equinor/eds-lab-react`: Experimental components
-- `@equinor/eds-data-grid-react`: Data grid component
+## Packages
 
-## Code Style & Patterns
+- **`@equinor/eds-core-react`** - Main React component library (most development happens here)
+- **`@equinor/eds-tokens`** - Design tokens, CSS variables, and theming
+- **`@equinor/eds-icons`** - Icon library
+- **`@equinor/eds-lab-react`** - Experimental/WIP components
+- **`@equinor/eds-data-grid-react`** - Data grid component
 
-Apply detailed guidelines from:
+## Guidelines
 
-- [Global coding standards](./instructions/global-coding.instructions.md)
-- [TypeScript guidelines](./instructions/ts.instructions.md)
-- [React guidelines](./instructions/react.instructions.md)
-- [Styling guidelines](./instructions/styling.instructions.md)
-- [Figma component creation](./instructions/figma.instructions.md)
-- [Markdown guidelines](./instructions/markdown.instructions.md)
+- [Global standards](./instructions/global-coding.instructions.md) - Accessibility, naming, exports
+- [TypeScript](./instructions/ts.instructions.md) - Type patterns and testing
+- [React](./instructions/react.instructions.md) - Components, hooks, file structure
+- [Styling](./instructions/styling.instructions.md) - CSS, BEM, responsive design
+- [Figma](./instructions/figma.instructions.md) - Design-to-code workflow
+- [Markdown](./instructions/markdown.instructions.md) - Documentation format
 
-### Color System
-
-The <abbr title="Equinor Design System">EDS</abbr> provides two color approaches. Choose one and use it consistently:
-
-- [Color System Introduction](../packages/eds-tokens/instructions/colors.md) -- Overview of semantic categories, approaches, and accessibility
-- [Static Color Approach](../packages/eds-tokens/instructions/colors-static.md) -- Explicit semantic variables for fixed meanings
-- [Dynamic Color Approach](../packages/eds-tokens/instructions/colors-dynamic.md) -- Abstract role variables with runtime appearance switching
-
-## Testing Requirements
-
-- All components and features should be thoroughly tested
-- All components should have appropriate unit tests using Jest
-- Visual regression tests should be included where applicable
-- Test accessibility features explicitly
-- Include test cases for edge cases and error states
-
-## Documentation
-
-- All components should have Storybook stories
-- Include usage examples in documentation
-- Document all props, including types and default values
-- Add information about accessibility features
-- Provide guidance on common patterns and implementation details
-
-## PR and Code Review Process
-
-- Use conventional commits for commit messages
-- PRs should include tests and documentation
-- Link relevant Figma designs when applicable
-- Ensure changes pass all CI checks
+For color systems: See `packages/eds-tokens/instructions/colors.md`

.github/instructions/figma.instructions.md

@@ -2,8 +2,28 @@
 applyTo: '**'
 ---
 
-# Project instructions when creating components from Figma design
+# Figma Component Creation
 
-**CONFIRMED COMPONENT CREATION POLICY: Every time I create a new component, I will explicitly confirm at the beginning of my response that I am creating the component from scratch without examining or referencing any existing components in the codebase.**
+## Workflow
 
-- It is very important to use the explicit component properties and values as defined in Figma. Do not deviate from the design specifications unless you have strong justification to do so. If you do deviate, please elaborate on the reasoning.
+When creating a component from Figma design:
+
+1. **Start fresh** - Do NOT reference existing components. Implement only what Figma specifies.
+2. **Exact specifications** - Use all explicit properties and values from the design
+3. **Deviation justification** - Only deviate if you have strong technical reasons; document why
+4. **File structure** - Follow React guidelines: Component.tsx, Component.types.ts, component.css, Component.test.tsx, Component.stories.tsx
+
+## Anti-patterns
+
+- ❌ Combining Figma design with patterns from similar existing components
+- ❌ Adding props or features not in the design
+- ❌ Using CSS-in-JS or styled-components (use vanilla CSS)
+- ❌ Importing from other components without explicit design requirement
+
+## Checklist
+
+- [ ] Figma design specifications documented
+- [ ] Component implements only what's designed
+- [ ] Storybook story includes all design variations
+- [ ] Tests cover interaction and edge cases
+- [ ] CSS follows BEM convention

.github/instructions/global-coding.instructions.md

@@ -2,21 +2,81 @@
 applyTo: '**'
 ---
 
-# Project coding standards
+# Global Coding Standards
 
-- Maintain full accessibility (WCAG 2.1 AA compliance)
-- Use ESLint for linting and code quality checks
-- Always use named exports instead of default exports
-- Remove unused declarations and imports
+## Core Requirements
 
-## Code Formatting with Prettier
+- **Accessibility:** WCAG 2.1 AA compliance (non-negotiable)
+- **Code quality:** ESLint and Prettier (automated checks)
+- **Exports:** Named exports only (no default exports)
+- **Cleanup:** Remove unused imports and declarations
 
-- Use Prettier for consistent code formatting. Use the global prettier config.
-- Run `pnpm prettier --write .` to format all files in the project
+## Code Formatting
+
+**Prettier configuration:**
+
+```bash
+# Format entire project
+pnpm prettier --write .
+
+# Format specific file
+pnpm prettier --write src/components/Button.tsx
+```
+
+Use the global prettier config in the repository root. All files should pass Prettier formatting automatically.
 
 ## Naming Conventions
 
-- Use PascalCase for component names, interfaces, and type aliases
-- Use camelCase for variables, functions, and methods
-- Prefix private class members with underscore (\_)
-- Use ALL_CAPS for constants
+| Type            | Convention  | Example                             |
+| --------------- | ----------- | ----------------------------------- |
+| Components      | PascalCase  | `Button`, `TextInput`, `DataGrid`   |
+| Interfaces      | PascalCase  | `ButtonProps`, `TableColumn`        |
+| Types           | PascalCase  | `Theme`, `Variant`                  |
+| Variables       | camelCase   | `buttonLabel`, `isDisabled`         |
+| Functions       | camelCase   | `handleClick`, `formatDate`         |
+| Constants       | ALL_CAPS    | `MAX_RETRIES`, `DEFAULT_TIMEOUT`    |
+| Private members | \_camelCase | `_internalState`, `_handleInternal` |
+
+## Linting & Quality
+
+**Before submitting:**
+
+```bash
+# Run linting for all packages in the monorepo
+pnpm lint
+
+# Run tests for all packages in the monorepo
+pnpm test
+
+# (Optional) To lint or test a specific package, use the package-specific script.
+# Example for core-react package:
+pnpm lint:core-react
+pnpm test:core-react
+
+# Format code
+pnpm prettier --write .
+```
+
+**Common issues:**
+
+- ❌ Unused imports
+- ❌ Default exports
+- ❌ Variables not following naming convention
+- ❌ Missing accessibility attributes
+
+## Imports
+
+```typescript
+// ✅ Named exports
+export const Button = () => {}
+export const useButton = () => {}
+
+// ❌ Avoid default exports
+export default Button
+
+// ✅ Import named exports
+import { Button, useButton } from '@equinor/eds-core-react'
+
+// ❌ Don't import default
+import Button from '@equinor/eds-core-react'
+```

.github/instructions/react.instructions.md

@@ -2,26 +2,75 @@
 applyTo: '**/*.ts,**/*.tsx'
 ---
 
-# Project coding standards for React
-
-## React Guidelines
-
-- It is not necessary to import React in every file.
-- Use functional components with hooks
-- Follow the React hooks rules (no conditional hooks)
-- Use React.FC type for components with children
-- Components should be composable
-- Implement proper error boundaries
-- Always implement proper keyboard navigation and focus management
-- Every component must support proper ARIA attributes
-- A component directory should be capitalized and named after the component
-- Keep component style and script as simple and small as possible.
-- A component should have these files in its directory:
-  - Component.tsx
-  - Component.types.ts
-  - Component.css
-  - Component.test.tsx
-  - Component.stories.tsx
-  - Use `index.ts` to export the component
-- Define helper functions outside the component but in the module scope
-- If a component with the same name already exists, create a new component with suffix `.new` (e.g. `Button.new.tsx`) and ensure it is not used in the codebase
+# React Guidelines
+
+## Component Structure
+
+**File organization (required):**
+
+```
+MyComponent/
+  index.ts              # Export only
+  MyComponent.tsx       # Component implementation
+  MyComponent.types.ts  # Props and type definitions
+  my-component.css       # Styles (vanilla CSS, BEM)
+  MyComponent.test.tsx  # Unit tests (Jest + Testing Library)
+  MyComponent.stories.tsx # Storybook documentation
+```
+
+**Directory naming:** PascalCase matching component name
+
+## Implementation Patterns
+
+**Functional components with hooks:**
+
+```typescript
+import { MyComponentProps } from './MyComponent.types';
+import './my-component.css';
+
+export const MyComponent: React.FC<MyComponentProps> = ({
+  children,
+  variant = 'default',
+  ...props
+}) => {
+  return (
+    <div className="my-component" {...props}>
+      {children}
+    </div>
+  );
+};
+```
+
+**Rules:**
+
+- No conditional hooks (move into separate components if needed)
+- No React import needed (no JSX pragma in modern React)
+- Helper functions in module scope, not inside component
+- Props types in `.types.ts` file
+
+## Accessibility (Required)
+
+**Every component must:**
+
+- Have proper ARIA attributes (roles, labels, states)
+- Support keyboard navigation (Tab, Enter, Escape, Arrow keys)
+- Manage focus correctly (focus trapping in modals, focus restoration)
+- Follow WCAG 2.1 AA standards
+
+## Composition & Reusability
+
+- Components should be composable and nestable
+- Avoid tightly coupled dependencies
+- Use named exports only
+- Keep components focused and simple
+- Implement error boundaries for error handling
+
+## Storybook Stories
+
+Every component needs `.stories.tsx` with:
+
+- Default/primary variant
+- All design variations (size, color, state)
+- Interactive examples
+- Props documentation
+- Accessibility info

.github/instructions/styling.instructions.md

@@ -2,13 +2,86 @@
 applyTo: '**'
 ---
 
-## Styling Guidelines
-
-- Use vanilla CSS
-- Ensure responsive design
-- Use CSS variables for theming and consistent styles
-- Use BEM (Block Element Modifier) naming convention for CSS classes
-- Avoid inline styles in JSX
-- Do not use CSS-in-JS libraries like styled-components or emotion
-- The css file name should be named after the component but lowercase and use hyphens as separators (e.g. TextInput becomes `text-input.css`).
-- The selector name should be named after the component but lowercase and use hyphens as separators (e.g. TextInput becomes `.text-input`.
+# Styling Guidelines
+
+## Tech Stack
+
+- **Use:** Vanilla CSS only
+- **Avoid:** CSS-in-JS (styled-components, emotion), Tailwind inline classes
+- **Variables:** CSS custom properties from `@equinor/eds-tokens`
+- **Responsive:** Mobile-first approach with media queries
+
+## Naming Conventions
+
+**Files:** Component name in lowercase with hyphens
+
+```
+TextInput.tsx → text-input.css
+DataGrid.tsx → data-grid.css
+```
+
+**Classes:** BEM format with block as component name
+
+```css
+.text-input {
+  /* block */
+}
+.text-input__label {
+  /* element */
+}
+.text-input__input {
+  /* element */
+}
+.text-input--disabled {
+  /* modifier */
+}
+.text-input--error {
+  /* modifier */
+}
+```
+
+## Patterns
+
+**CSS Variables (from EDS tokens):**
+
+```css
+.text-input {
+  color: var(--eds-color-text-strong);
+  background: var(--eds-color-bg-input);
+  border: 1px solid var(--eds-color-border-medium);
+}
+```
+
+**Responsive Design:**
+
+```css
+.button {
+  padding: 0.5rem 1rem;
+}
+
+@media (min-width: 768px) {
+  .button {
+    padding: 0.75rem 1.5rem;
+  }
+}
+```
+
+**Avoid:**
+
+```jsx
+// ❌ No inline styles
+<div style={{ color: 'red' }}>
+
+// ❌ No CSS-in-JS
+const StyledDiv = styled.div`...`;
+
+// ✅ Use CSS class
+<div className="button">
+```
+
+## Best Practices
+
+- Single responsibility per CSS file
+- Reuse tokens instead of hardcoding colors/sizes
+- Test responsive breakpoints
+- Ensure theme compatibility (light/dark modes)