SpareBank1/designsystem
Nov 2024 – Oct 2025
10 Months active
Languages Used
CSSJavaScriptLESSLessMarkdownTypeScriptHTMLtsx
Technical Skills
CSSCSS PreprocessingComponent Library DevelopmentDocumentationFront-end DevelopmentFrontend Development
Anders
PROFILE
Anders
Anders Johnsen contributed to the SpareBank1/designsystem repository by developing and refining UI components, design tokens, and documentation to improve consistency and maintainability across the design system. He implemented features such as semantic color tokens, responsive layouts, and accessible form controls using React, TypeScript, and LESS, while also modernizing theming and typography. Anders addressed integration and visual issues by publishing compiled CSS, aligning component behaviors with Figma specs, and stabilizing tests. His work included DevOps improvements with Lerna and GitHub Actions, ensuring secure CI/CD pipelines. These efforts resulted in a more reliable, accessible, and developer-friendly frontend foundation.
Overall Statistics
Feature vs Bugs
79%Features
Repository Contributions
132Total
Bugs
7
Commits
132
Features
26
Lines of code
88,474
Activity Months10
Your Network
45 people
Work History
October 2025
3 Commits • 1 Features
Oct 1, 2025Summary for 2025-10: Consolidated DevOps tooling and security improvements across SpareBank1/designsystem, focused on secure publishing and CI/CD reliability. Delivered upgraded Lerna and OIDC-based npm publishing; updated GitHub Actions workflows for checkout and Node.js setup; added repository URL metadata to ffe-vite-less; introduced .prettierignore entry; removed NPM_TOKEN from CI to prevent exposure. Commits: e9dd3ef941efd6019877d668e0aa8b87f8985eaa; ef15abf70c33ee629084b55c723799862932f86a; 7b0b048a1f30addf993aeb9fba8d60b88150b2f1.
3 Commits • 1 Features
Oct 1, 2025Summary for 2025-10: Consolidated DevOps tooling and security improvements across SpareBank1/designsystem, focused on secure publishing and CI/CD reliability. Delivered upgraded Lerna and OIDC-based npm publishing; updated GitHub Actions workflows for checkout and Node.js setup; added repository URL metadata to ffe-vite-less; introduced .prettierignore entry; removed NPM_TOKEN from CI to prevent exposure. Commits: e9dd3ef941efd6019877d668e0aa8b87f8985eaa; ef15abf70c33ee629084b55c723799862932f86a; 7b0b048a1f30addf993aeb9fba8d60b88150b2f1.
October 2025
September 2025
6 Commits • 2 Features
Sep 1, 2025Sep 2025 highlights: Delivered a new TextField component (ffe-form-react) with support for prefixes, suffixes, and right-aligned text, plus improved focus transitions across form controls. Polish work on outline transitions across chips, searchable dropdown, and datepicker, complemented by CSS variable refactors. The release improves form usability, accessibility, and developer experience, with thorough docs and tests to ensure maintainability.
September 2025
6 Commits • 2 Features
Sep 1, 2025Sep 2025 highlights: Delivered a new TextField component (ffe-form-react) with support for prefixes, suffixes, and right-aligned text, plus improved focus transitions across form controls. Polish work on outline transitions across chips, searchable dropdown, and datepicker, complemented by CSS variable refactors. The release improves form usability, accessibility, and developer experience, with thorough docs and tests to ensure maintainability.
July 2025
2 Commits • 1 Features
Jul 1, 2025July 2025 — SpareBank1/designsystem: Focused on visual correctness in list-based UI and maintainability of styles within the design system. Delivered targeted fixes to improve UI consistency, reduce CSS complexity, and enable faster future iterations for frontend components that rely on the design system. Key outcomes include stabilizing list views by removing z-index from group cards in ffe-cards, which eliminates stacking glitches, and cleaning up styles by removing an unused import in the datepicker LESS file. These changes reduce visual noise, lower the risk of regressions, and simplify future styling work across the design system.
2 Commits • 1 Features
Jul 1, 2025July 2025 — SpareBank1/designsystem: Focused on visual correctness in list-based UI and maintainability of styles within the design system. Delivered targeted fixes to improve UI consistency, reduce CSS complexity, and enable faster future iterations for frontend components that rely on the design system. Key outcomes include stabilizing list views by removing z-index from group cards in ffe-cards, which eliminates stacking glitches, and cleaning up styles by removing an unused import in the datepicker LESS file. These changes reduce visual noise, lower the risk of regressions, and simplify future styling work across the design system.
July 2025
June 2025
1 Commits
Jun 1, 2025June 2025: Focused on UI correctness in SpareBank1/designsystem. Implemented a targeted bug fix to ensure left-aligned action text in the Card component, delivering consistent presentation across contexts and reducing misalignment-related QA issues. The change is tracked in commit 0665ba0eac4fd3b15d332cb276061a69ff100b8c with message fix(ffe-cards): spesifiserer text-align på card action. This improvement enhances design-system reliability for developers integrating card components.
June 2025
1 Commits
Jun 1, 2025June 2025: Focused on UI correctness in SpareBank1/designsystem. Implemented a targeted bug fix to ensure left-aligned action text in the Card component, delivering consistent presentation across contexts and reducing misalignment-related QA issues. The change is tracked in commit 0665ba0eac4fd3b15d332cb276061a69ff100b8c with message fix(ffe-cards): spesifiserer text-align på card action. This improvement enhances design-system reliability for developers integrating card components.
May 2025
9 Commits • 3 Features
May 1, 2025In May 2025, SpareBank1/designsystem delivered key UI improvements, governance enhancements, and test stabilization, strengthening both developer experience and product quality. The work focused on documentation navigation, change traceability, UI consistency, and reliable tests, contributing to faster delivery cycles and more intuitive component usage.
9 Commits • 3 Features
May 1, 2025In May 2025, SpareBank1/designsystem delivered key UI improvements, governance enhancements, and test stabilization, strengthening both developer experience and product quality. The work focused on documentation navigation, change traceability, UI consistency, and reliable tests, contributing to faster delivery cycles and more intuitive component usage.
May 2025
April 2025
11 Commits • 4 Features
Apr 1, 2025April 2025 – SpareBank1/designsystem: Key features delivered, bugs fixed, and measurable impact across the design system. Focused on typography standardization, responsive UI patterns, improved documentation, and tighter form spacing to accelerate product development and improve developer experience.
April 2025
11 Commits • 4 Features
Apr 1, 2025April 2025 – SpareBank1/designsystem: Key features delivered, bugs fixed, and measurable impact across the design system. Focused on typography standardization, responsive UI patterns, improved documentation, and tighter form spacing to accelerate product development and improve developer experience.
March 2025
9 Commits • 4 Features
Mar 1, 2025March 2025 – SpareBank1/designsystem: Delivered key UI and design-system enhancements across form controls, button theming, tooltips/icons, and RadioBlock components. Key features delivered: - Form controls polish with accessible error feedback: refined input horizontal padding, corrected InlineExpandButton labels, standardized error colors, and explicit aria-invalid/fieldMessage demonstrations across components. - Button theming modernization: removed deprecated theming (theme.less) and migrated to semantic color tokens for consistent styling across button types. - Tooltip/iconography refresh: updated tooltips to SVG/icon components, refreshed backgrounds/borders/colors to align with updated design specs, and updated tests. - RadioBlock design alignment: polished borders, colors, hover/active states, and expanded Storybook examples to showcase multiple configurations. Major bugs fixed (through 2025-03 period): - Horizontal padding misalignment on inputs corrected. - Semantic color updates for form error states applied across components. - Tooltip icon updates aligned with modernized design specs; related React wrappers updated. - Radiobutton/RadiBlock visuals aligned with Figma designs; Storybook examples extended. Overall impact and accomplishments: - Significantly improved UX consistency and accessibility across the design system, reducing visual debt and aligning with Figma specs. - Enhanced design-system discipline supports faster cross-team development and safer refactors. Technologies/skills demonstrated: - Accessibility (aria-invalid, fieldMessage) and semantic color tokens - SVG/icon-based iconography updates and component modernization - Design-system governance (theme removal, semantic tokens) - Storybook-driven component demos and test updates - Documentation alignment with code changes
9 Commits • 4 Features
Mar 1, 2025March 2025 – SpareBank1/designsystem: Delivered key UI and design-system enhancements across form controls, button theming, tooltips/icons, and RadioBlock components. Key features delivered: - Form controls polish with accessible error feedback: refined input horizontal padding, corrected InlineExpandButton labels, standardized error colors, and explicit aria-invalid/fieldMessage demonstrations across components. - Button theming modernization: removed deprecated theming (theme.less) and migrated to semantic color tokens for consistent styling across button types. - Tooltip/iconography refresh: updated tooltips to SVG/icon components, refreshed backgrounds/borders/colors to align with updated design specs, and updated tests. - RadioBlock design alignment: polished borders, colors, hover/active states, and expanded Storybook examples to showcase multiple configurations. Major bugs fixed (through 2025-03 period): - Horizontal padding misalignment on inputs corrected. - Semantic color updates for form error states applied across components. - Tooltip icon updates aligned with modernized design specs; related React wrappers updated. - Radiobutton/RadiBlock visuals aligned with Figma designs; Storybook examples extended. Overall impact and accomplishments: - Significantly improved UX consistency and accessibility across the design system, reducing visual debt and aligning with Figma specs. - Enhanced design-system discipline supports faster cross-team development and safer refactors. Technologies/skills demonstrated: - Accessibility (aria-invalid, fieldMessage) and semantic color tokens - SVG/icon-based iconography updates and component modernization - Design-system governance (theme removal, semantic tokens) - Storybook-driven component demos and test updates - Documentation alignment with code changes
March 2025
February 2025
19 Commits • 2 Features
Feb 1, 2025February 2025: Focused on establishing a consistent design language through semantic color tokens across SpareBank1/designsystem. Delivered semantic color adoption across feedback, grid, lists, pagination, file-upload, form, shortcut button, and tables, including prop and color usage refactors to improve theming maintainability. Fixed token synchronization across modules to ensure updated design tokens are reflected consistently (ffe-core). Updated documentation, changelog, and tests to reflect semantic color changes and the new color API, including grid gap guidance and FILE_KEY clarifications. Impact: stronger theming reliability and visual consistency, faster onboarding for designers/developers, and reduced risk of regressions in theming. Technologies/skills demonstrated: design tokens, semantic theming, React component refactors, token synchronization, documentation and test alignment.
February 2025
19 Commits • 2 Features
Feb 1, 2025February 2025: Focused on establishing a consistent design language through semantic color tokens across SpareBank1/designsystem. Delivered semantic color adoption across feedback, grid, lists, pagination, file-upload, form, shortcut button, and tables, including prop and color usage refactors to improve theming maintainability. Fixed token synchronization across modules to ensure updated design tokens are reflected consistently (ffe-core). Updated documentation, changelog, and tests to reflect semantic color changes and the new color API, including grid gap guidance and FILE_KEY clarifications. Impact: stronger theming reliability and visual consistency, faster onboarding for designers/developers, and reduced risk of regressions in theming. Technologies/skills demonstrated: design tokens, semantic theming, React component refactors, token synchronization, documentation and test alignment.
December 2024
1 Commits • 1 Features
Dec 1, 2024December 2024 monthly summary for SpareBank1/designsystem. Key accomplishment: refactored typography styling in ffe-cards by removing the use of &:extend and defining explicit text properties to improve maintainability and prevent style conflicts. No major bugs fixed this month. Overall impact: streamlined typography updates, reduced risk of cascading style issues, and alignment with design-system governance. Technologies and skills demonstrated: LESS/CSS architecture, refactoring discipline, and commit-focused delivery with clear traceability to the change (commit f3182a44b0d2db71aa178990e0a8958e15800c79).
1 Commits • 1 Features
Dec 1, 2024December 2024 monthly summary for SpareBank1/designsystem. Key accomplishment: refactored typography styling in ffe-cards by removing the use of &:extend and defining explicit text properties to improve maintainability and prevent style conflicts. No major bugs fixed this month. Overall impact: streamlined typography updates, reduced risk of cascading style issues, and alignment with design-system governance. Technologies and skills demonstrated: LESS/CSS architecture, refactoring discipline, and commit-focused delivery with clear traceability to the change (commit f3182a44b0d2db71aa178990e0a8958e15800c79).
December 2024
November 2024
71 Commits • 8 Features
Nov 1, 2024Month: 2024-11 — SpareBank1/designsystem: Delivered major CSS asset and documentation improvements to accelerate adoption and reduce integration risk. Key outcomes include: publishing compiled CSS alongside Less for FFE components, extending compiled CSS support to Spinner, Tables, and Tabs; Storybook/docs polish and CSS import guidance across numerous FFE React components; removal of Museo font info from webfonts docs for cleaner branding; and targeted fixes to ensure build reliability and correct asset references. These changes improve developer onboarding, consistency across components, and overall time-to-market for UI features.
November 2024
71 Commits • 8 Features
Nov 1, 2024Month: 2024-11 — SpareBank1/designsystem: Delivered major CSS asset and documentation improvements to accelerate adoption and reduce integration risk. Key outcomes include: publishing compiled CSS alongside Less for FFE components, extending compiled CSS support to Spinner, Tables, and Tabs; Storybook/docs polish and CSS import guidance across numerous FFE React components; removal of Museo font info from webfonts docs for cleaner branding; and targeted fixes to ensure build reliability and correct asset references. These changes improve developer onboarding, consistency across components, and overall time-to-market for UI features.
Activity
Loading activity data...
Quality Metrics
Correctness93.6%
Maintainability94.0%
Architecture91.4%
Performance91.2%
AI Usage20.4%
Skills & Technologies
Programming Languages
CSSHTMLJavaScriptLESSLessMarkdownTypeScriptYAMLtsx
Technical Skills
AccessibilityBuild Tools ConfigurationCI/CDCSSCSS PreprocessingComponent DesignComponent DevelopmentComponent Library DevelopmentConfiguration ManagementDesign SystemsDevOpsDocumentationFront End DevelopmentFront-end DevelopmentFront-end development
Repositories Contributed To
Overview of all repositories you've contributed to across your timeline