Merge branch 'develop' into update-icons-in-components

SpareBank1 · Aug 29, 2023 · 760707e · 760707e
2 parents fc161fa + b12a249
commit 760707e
Show file tree

Hide file tree

Showing 30 changed files with 198 additions and 86 deletions.
diff --git a/component-overview/CHANGELOG.md b/component-overview/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.10](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-25)
+
+### Bug Fixes
+
+-   **component-overview:** fjern symbol color eksempel ([60e6b4b](https://github.com/SpareBank1/designsystem/commit/60e6b4b6985148f7177156495aeec7c17ff9b56d))
+
 ## [5.1.9](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-24)
 
 **Note:** Version bump only for package @sb1/ffe-component-index

diff --git a/component-overview/examples/symbols/Symbol-allsizes.jsx b/component-overview/examples/symbols/Symbol-allsizes.jsx
@@ -3,12 +3,12 @@ import Symbol from "@sb1/ffe-symbols-react";
 () => {
     return (
         <> 
-            <Symbol size="xs" ariaLabel="xs stjerne ikon">star</Symbol>
-            <Symbol size="sm" ariaLabel="sm stjerne ikon">star</Symbol>
-            <Symbol size="md" ariaLabel="md stjerne ikon">star</Symbol>
-            <Symbol size="lg" ariaLabel="lg stjerne ikon">star</Symbol>
-            <Symbol size="xl" ariaLabel="xl stjerne ikon">star</Symbol>
-            <Symbol size="2xl" ariaLabel="2xl stjerne ikon">star</Symbol>
+            <Symbol size="xs" ariaLabel="xs stjerne">star</Symbol>
+            <Symbol size="sm" ariaLabel="sm stjerne">star</Symbol>
+            <Symbol size="md" ariaLabel="md stjerne">star</Symbol>
+            <Symbol size="lg" ariaLabel="lg stjerne">star</Symbol>
+            <Symbol size="xl" ariaLabel="xl stjerne">star</Symbol>
+            <Symbol size="2xl" ariaLabel="2xl stjerne">star</Symbol>
         </>
 
     )

diff --git a/component-overview/examples/symbols/Symbol-allweights.jsx b/component-overview/examples/symbols/Symbol-allweights.jsx
@@ -3,10 +3,9 @@ import Symbol from "@sb1/ffe-symbols-react";
 () => {
     return (
         <>
-            <Symbol weight="300" ariaLabel="hus ikon">Home</Symbol>
-            <Symbol weight="400" ariaLabel="hus ikon">Home</Symbol>
-            <Symbol weight="500" ariaLabel="hus ikon">Home</Symbol>
-            <Symbol weight="600" ariaLabel="hus ikon">Home</Symbol>
+            <Symbol weight="300" ariaLabel="hus ikon" size="md">Home</Symbol>
+            <Symbol weight="400" ariaLabel="hus ikon" size="md">Home</Symbol>
+            <Symbol weight="500" ariaLabel="hus ikon" size="md">Home</Symbol>
         </>
 
     )

diff --git a/component-overview/examples/symbols/Symbol-arialabel.jsx b/component-overview/examples/symbols/Symbol-arialabel.jsx
@@ -3,8 +3,8 @@ import Symbol from "@sb1/ffe-symbols-react";
 () => {
     return (
         <>
-            <Symbol ariaLabel="">home</Symbol>
-            <Symbol ariaLabel="hus ikon">home</Symbol>
+            <Symbol ariaLabel="hus" size="md">home</Symbol>
+            <Symbol ariaLabel={null} size="md">home</Symbol>  
         </>
     )
 }
diff --git a/component-overview/examples/symbols/Symbol-color.jsx b/component-overview/examples/symbols/Symbol-color.jsx
diff --git a/component-overview/examples/symbols/Symbol-filled.jsx b/component-overview/examples/symbols/Symbol-filled.jsx
@@ -2,6 +2,6 @@ import Symbol from "@sb1/ffe-symbols-react";
 
 () => {
     return (
-        <Symbol fill={true} ariaLabel="">Home</Symbol>
+        <Symbol fill={true} ariaLabel={null} size="md">Home</Symbol>
     )
 }
diff --git a/component-overview/examples/symbols/Symbol.jsx b/component-overview/examples/symbols/Symbol.jsx
@@ -2,6 +2,6 @@ import Symbol from "@sb1/ffe-symbols-react";
 
 () => {
     return (
-        <Symbol ariaLabel="">home</Symbol>
+        <Symbol ariaLabel="hjem" size="md">home</Symbol>
     )
 }
diff --git a/component-overview/package.json b/component-overview/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-component-index",
-    "version": "5.1.9",
+    "version": "5.1.10",
     "description": "Index of FFE compontents",
     "license": "MIT",
     "author": "SpareBank 1 Utvikling",
@@ -71,13 +71,13 @@
         "@sb1/ffe-lists": "^12.0.4",
         "@sb1/ffe-lists-react": "^6.0.6",
         "@sb1/ffe-message-box": "^11.0.4",
-        "@sb1/ffe-message-box-react": "^9.0.1",
+        "@sb1/ffe-message-box-react": "^9.0.2",
         "@sb1/ffe-sb1-logos": "^1.1.3",
         "@sb1/ffe-searchable-dropdown-react": "^15.2.3",
         "@sb1/ffe-spinner": "^5.0.4",
         "@sb1/ffe-spinner-react": "^6.0.5",
-        "@sb1/ffe-symbols": "^1.1.3",
-        "@sb1/ffe-symbols-react": "^1.1.6",
+        "@sb1/ffe-symbols": "^1.1.4",
+        "@sb1/ffe-symbols-react": "^2.0.0",
         "@sb1/ffe-system-message": "^7.0.4",
         "@sb1/ffe-system-message-react": "^7.0.9",
         "@sb1/ffe-tables": "^13.0.4",

diff --git a/packages/ffe-buttons-react/src/ExpandButton.js b/packages/ffe-buttons-react/src/ExpandButton.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
     bool,
     func,
@@ -48,7 +48,7 @@ const ExpandButton = props => {
                 </Symbol>
             )}
             {!isExpanded && (
-                <Fragment>
+                <span>
                     {leftIcon && (
                         <Symbol
                             className="ffe-button__icon ffe-button__icon--left"
@@ -68,7 +68,7 @@ const ExpandButton = props => {
                             {rightIcon}
                         </Symbol>
                     )}
-                </Fragment>
+                </span>
             )}
         </Element>
     );

diff --git a/packages/ffe-message-box-react/CHANGELOG.md b/packages/ffe-message-box-react/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.2](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-25)
+
+### Bug Fixes
+
+-   **ffe-message-box-react:** added missing titleElement ts type ([2f1959e](https://github.com/SpareBank1/designsystem/commit/2f1959eb53b91f7861b178e8e153c61adae2cff3))
+
 ## [9.0.1](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-23)
 
 ### Bug Fixes

diff --git a/packages/ffe-message-box-react/package.json b/packages/ffe-message-box-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-message-box-react",
-    "version": "9.0.1",
+    "version": "9.0.2",
     "license": "MIT",
     "author": "SpareBank 1",
     "files": [

diff --git a/packages/ffe-message-box-react/src/index.d.ts b/packages/ffe-message-box-react/src/index.d.ts
@@ -6,6 +6,7 @@ export interface MessageBoxProps
     className?: string;
     icon?: React.ReactNode;
     title?: React.ReactNode;
+    titleElement?: string;
     onColoredBg?: boolean;
 }
 

diff --git a/packages/ffe-symbols-react/CHANGELOG.md b/packages/ffe-symbols-react/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-25)
+
+### Bug Fixes
+
+-   **ffe-symbols-react:** fjerner color prop ([b609d98](https://github.com/SpareBank1/designsystem/commit/b609d9827e1d0d56256c61ba10f0482af087c526))
+
+### BREAKING CHANGES
+
+-   **ffe-symbols-react:** fjerner color-prop da styling skal skje gjennom css
+
 ## [1.1.6](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-24)
 
 ### Bug Fixes

diff --git a/packages/ffe-symbols-react/package.json b/packages/ffe-symbols-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-symbols-react",
-    "version": "1.1.6",
+    "version": "2.0.0",
     "description": "React-komponenter for Material Symbols tilpasset Sb1 sine behov",
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -23,7 +23,7 @@
     },
     "homepage": "https://github.com/SpareBank1/designsystem#readme",
     "dependencies": {
-        "@sb1/ffe-symbols": "^1.1.3",
+        "@sb1/ffe-symbols": "^1.1.4",
         "classnames": "^2.3.2",
         "prop-types": "^15.8.1",
         "react": "^18.2.0"

diff --git a/packages/ffe-symbols-react/src/Symbol.js b/packages/ffe-symbols-react/src/Symbol.js
@@ -9,24 +9,19 @@ export const Symbol = props => {
         size,
         weight,
         fill,
-        color,
         ariaLabel,
         ...rest
     } = props;
+
     return (
         <span
             className={classNames(
                 'ffe-symbol',
-                `ffe-symbol--${size}`,
+                fill ? `ffe-symbol--filled-${weight}` : `ffe-symbol--${weight}`,
+                size && `ffe-symbol--${size}`,
                 className,
             )}
-            role="img"
-            style={{
-                fontVariationSettings: `'FILL' ${
-                    fill ? 1 : 0
-                }, 'GRAD' 0, 'wght' ${weight}`,
-                color: color ? `var(--${color})` : null,
-            }}
+            role="graphics-symbol img"
             aria-label={ariaLabel ? ariaLabel : null}
             aria-hidden={!ariaLabel}
             {...rest}
@@ -38,7 +33,6 @@ export const Symbol = props => {
 
 Symbol.defaultProps = {
     fill: false,
-    size: 'md',
     weight: 400,
 };
 
@@ -47,16 +41,23 @@ Symbol.propTypes = {
     fill: bool,
     /** The name of the icon that should be shown */
     children: string.isRequired,
-    /** Size of the icon, medium is default */
+    /** Size of the icon, default is the closest defined font-size */
     size: oneOf(['xs', 'sm', 'md', 'lg', 'xl', '2xl']),
     /** Symbols stroke weight. This can affect overall size of symbol, 400 is default */
-    weight: oneOf([300, 400, 500, 600]),
-    /** Color of the symbol, value should be name of FFE color variable example: ffe-farge-vann */
-    color: string,
+    weight: oneOf([300, 400, 500]),
     /** Additional classnames */
     className: string,
-    /** Aria label text. If empty aria-hidden is automatically set to true */
-    ariaLabel: string.isRequired,
+    /** Aria label text. If null, aria-hidden is automatically set to true */
+    ariaLabel: function(props, propName, componentName) {
+        const propValue = props[propName];
+
+        if (propValue !== null && typeof propValue !== 'string') {
+            return new Error(
+                `Invalid prop '${propName}' supplied to '${componentName}'. ` +
+                    `'${propName}' must be a string or null.`,
+            );
+        }
+    },
 };
 
 export default Symbol;
diff --git a/packages/ffe-symbols-react/src/Symbol.spec.js b/packages/ffe-symbols-react/src/Symbol.spec.js
@@ -16,34 +16,13 @@ describe('<Symbol />', () => {
     });
     it('renders filled symbol correctly', () => {
         const wrapper = getWrapper();
-        expect(wrapper.get(0).props.style).toHaveProperty(
-            'fontVariationSettings',
-            "'FILL' 0, 'GRAD' 0, 'wght' 400",
-        );
+        expect(wrapper.hasClass('ffe-symbol--400')).toBe(true);
         const filled = getWrapper({ fill: true });
-        expect(filled.get(0).props.style).toHaveProperty(
-            'fontVariationSettings',
-            "'FILL' 1, 'GRAD' 0, 'wght' 400",
-        );
+        expect(filled.hasClass('ffe-symbol--filled-400')).toBe(true);
     });
     it('set correct symbol weight', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.get(0).props.style).toHaveProperty(
-            'fontVariationSettings',
-            "'FILL' 0, 'GRAD' 0, 'wght' 400",
-        );
-        const filled = getWrapper({ weight: 600 });
-        expect(filled.get(0).props.style).toHaveProperty(
-            'fontVariationSettings',
-            "'FILL' 0, 'GRAD' 0, 'wght' 600",
-        );
-    });
-    it('set correct color based of prop', () => {
-        const wrapper = getWrapper({ color: 'ffe-farge-fjell' });
-        expect(wrapper.get(0).props.style).toHaveProperty(
-            'color',
-            'var(--ffe-farge-fjell)',
-        );
+        const wrapper = getWrapper({ weight: 500 });
+        expect(wrapper.hasClass('ffe-symbol--500')).toBe(true);
     });
     it('renders classes correctly', () => {
         const wrapper = getWrapper({ className: 'test-class' });

diff --git a/packages/ffe-symbols-react/src/index.d.ts b/packages/ffe-symbols-react/src/index.d.ts
@@ -3,11 +3,10 @@ import * as React from 'react';
 export interface SymbolProps {
     fill?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    weight?: 300 | 400 | 500 | 600;
-    color?: string;
+    weight?: 300 | 400 | 500;
     children: string;
     className?: string;
-    ariaLabel: string;
+    ariaLabel: string | null;
 }
 
 declare class Symbol extends React.Component<SymbolProps, any> {}
diff --git a/packages/ffe-symbols/CHANGELOG.md b/packages/ffe-symbols/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.4](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-25)
+
+### Bug Fixes
+
+-   **ffe-symbols:** endre font fil til mindre ([f1a6ba4](https://github.com/SpareBank1/designsystem/commit/f1a6ba4f6886061b7215ee944a341e88fb057fbf))
+
 ## [1.1.3](https://github.com/SpareBank1/designsystem/compare/@sb1/[email protected]...@sb1/[email protected]) (2023-08-22)
 
 ### Bug Fixes

diff --git a/packages/ffe-symbols/ffe-symbol-font-inline.less b/packages/ffe-symbols/ffe-symbol-font-inline.less
@@ -1,9 +1,52 @@
 @import './symbol.less';
-@icons-url: './icons';
+@icons-data-uri: './icons';
 
 @font-face {
-    font-family: 'Material Symbols Rounded';
+    font-family: 'MaterialSymbolsRounded-300';
     font-style: normal;
     font-display: fallback;
-    src: data-uri('@{icons-url}/MaterialSymbolsRounded.woff2') format('woff2');
+    src: data-uri('@{icons-data-uri}/MaterialSymbolsRounded300.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'MaterialSymbolsRounded-400';
+    font-style: normal;
+    font-display: fallback;
+    src: data-uri('@{icons-data-uri}/MaterialSymbolsRounded400.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'MaterialSymbolsRounded-500';
+    font-style: normal;
+    font-display: fallback;
+    src: data-uri('@{icons-data-uri}/MaterialSymbolsRounded500.woff2')
+        format('woff2');
+}
+
+// Filled symbols
+
+@font-face {
+    font-family: 'MaterialSymbolsRoundedFilled-300';
+    font-style: normal;
+    font-display: fallback;
+    src: data-uri('@{icons-data-uri}/MaterialSymbolsRoundedFilled300.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'MaterialSymbolsRoundedFilled-400';
+    font-style: normal;
+    font-display: fallback;
+    src: data-uri('@{icons-data-uri}/MaterialSymbolsRoundedFilled400.woff2')
+        format('woff2');
+}
+
+@font-face {
+    font-family: 'MaterialSymbolsRoundedFilled-500';
+    font-style: normal;
+    font-display: fallback;
+    src: data-uri('@{icons-data-uri}/MaterialSymbolsRoundedFilled500.woff2')
+        format('woff2');
 }