diff --git a/component-overview/examples/buttons/ActionButton-leftIcon.jsx b/component-overview/examples/buttons/ActionButton-leftIcon.jsx index 7192c16933..32b30cca4c 100644 --- a/component-overview/examples/buttons/ActionButton-leftIcon.jsx +++ b/component-overview/examples/buttons/ActionButton-leftIcon.jsx @@ -1,11 +1,11 @@ import { ActionButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { HakeIkon } from '@sb1/ffe-icons-react'; + <> f} ariaLoadingMessage="Vennligst vent..." - leftIcon={} + leftIcon="check" > Bekreft diff --git a/component-overview/examples/buttons/ActionButton-rightIcon.jsx b/component-overview/examples/buttons/ActionButton-rightIcon.jsx index 1798a29e51..8dea9b673d 100644 --- a/component-overview/examples/buttons/ActionButton-rightIcon.jsx +++ b/component-overview/examples/buttons/ActionButton-rightIcon.jsx @@ -1,11 +1,11 @@ import { ActionButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { HakeIkon } from '@sb1/ffe-icons-react'; + <> f} ariaLoadingMessage="Vennligst vent..." - rightIcon={} + rightIcon="check" > Bekreft diff --git a/component-overview/examples/buttons/PrimaryButton-leftIcon.jsx b/component-overview/examples/buttons/PrimaryButton-leftIcon.jsx index 96a858245a..be5826bf42 100644 --- a/component-overview/examples/buttons/PrimaryButton-leftIcon.jsx +++ b/component-overview/examples/buttons/PrimaryButton-leftIcon.jsx @@ -1,6 +1,5 @@ import { PrimaryButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { HakeIkon } from '@sb1/ffe-icons-react'; - } onClick={f => f}>Primary knapp + f}>Primary knapp ; diff --git a/component-overview/examples/buttons/PrimaryButton-rightIcon.jsx b/component-overview/examples/buttons/PrimaryButton-rightIcon.jsx index c794d67d9c..7750d57442 100644 --- a/component-overview/examples/buttons/PrimaryButton-rightIcon.jsx +++ b/component-overview/examples/buttons/PrimaryButton-rightIcon.jsx @@ -1,6 +1,5 @@ import { PrimaryButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { HakeIkon } from '@sb1/ffe-icons-react'; - } onClick={f => f}>Primary knapp + f}>Primary knapp ; diff --git a/component-overview/examples/buttons/SecondaryButton-leftIcon.jsx b/component-overview/examples/buttons/SecondaryButton-leftIcon.jsx index dfbbfb89f9..07ec03a102 100644 --- a/component-overview/examples/buttons/SecondaryButton-leftIcon.jsx +++ b/component-overview/examples/buttons/SecondaryButton-leftIcon.jsx @@ -1,8 +1,7 @@ import { SecondaryButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { BindersIkon } from '@sb1/ffe-icons-react'; - } onClick={f => f}> + f}> Secondary m/ ikon ; diff --git a/component-overview/examples/buttons/SecondaryButton-rightIcon.jsx b/component-overview/examples/buttons/SecondaryButton-rightIcon.jsx index d3c7f605af..c72ca68b34 100644 --- a/component-overview/examples/buttons/SecondaryButton-rightIcon.jsx +++ b/component-overview/examples/buttons/SecondaryButton-rightIcon.jsx @@ -1,8 +1,7 @@ import { SecondaryButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { BindersIkon } from '@sb1/ffe-icons-react'; - } onClick={f => f}> + f}> Secondary m/ ikon ; diff --git a/component-overview/examples/buttons/SecondaryButton.jsx b/component-overview/examples/buttons/SecondaryButton.jsx index df98eb2b49..99b7cbe331 100644 --- a/component-overview/examples/buttons/SecondaryButton.jsx +++ b/component-overview/examples/buttons/SecondaryButton.jsx @@ -1,9 +1,8 @@ import { SecondaryButton, ButtonGroup } from '@sb1/ffe-buttons-react'; -import { BindersIkon } from '@sb1/ffe-icons-react'; f}>Secondary knapp - } onClick={f => f}> + f}> Secondary m/ ikon - }>Legg til bruker + Legg til bruker diff --git a/component-overview/examples/buttons/TertiaryButton-withicons.jsx b/component-overview/examples/buttons/TertiaryButton-withicons.jsx new file mode 100644 index 0000000000..c158ee59ae --- /dev/null +++ b/component-overview/examples/buttons/TertiaryButton-withicons.jsx @@ -0,0 +1,7 @@ +import { TertiaryButton, ButtonGroup } from '@sb1/ffe-buttons-react'; + + + f}>Tertiærknapp + f}>Tertiærknapp + f}>Tertiærknapp + diff --git a/component-overview/examples/cards/IconCard-condensed.jsx b/component-overview/examples/cards/IconCard-condensed.jsx index 8082e839d6..976dc6f88f 100644 --- a/component-overview/examples/cards/IconCard-condensed.jsx +++ b/component-overview/examples/cards/IconCard-condensed.jsx @@ -1,7 +1,7 @@ import { IconCard } from '@sb1/ffe-cards-react'; -import { SparegrisIkon } from '@sb1/ffe-icons-react'; +import Symbol from "@sb1/ffe-symbols-react"; -} condensed={true}> +savings} condensed={true}> {({ Title, Subtext }) => ( <> Sparekonto voksen 25 diff --git a/component-overview/examples/cards/IconCard.jsx b/component-overview/examples/cards/IconCard.jsx index f512a7f6db..7238705e82 100644 --- a/component-overview/examples/cards/IconCard.jsx +++ b/component-overview/examples/cards/IconCard.jsx @@ -1,7 +1,7 @@ import { IconCard } from '@sb1/ffe-cards-react'; -import { GrafOppIkon } from '@sb1/ffe-icons-react'; +import Symbol from "@sb1/ffe-symbols-react"; -}> +savings}> {({ CardName, Title, Subtext, Text }) => ( <> Kortnavn diff --git a/component-overview/examples/cards/StippledCard-condensed.jsx b/component-overview/examples/cards/StippledCard-condensed.jsx index d26b65d83b..94e7a0b84e 100644 --- a/component-overview/examples/cards/StippledCard-condensed.jsx +++ b/component-overview/examples/cards/StippledCard-condensed.jsx @@ -1,7 +1,7 @@ import { StippledCard } from '@sb1/ffe-cards-react'; -import { GrafOppIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; - } } condensed={true}> +monitoring } } condensed={true}> {({ Title, Subtext }) => ( <> Sparekonto voksen 25 diff --git a/component-overview/examples/cards/StippledCard.jsx b/component-overview/examples/cards/StippledCard.jsx index 952154bfd3..4434e6f9a6 100644 --- a/component-overview/examples/cards/StippledCard.jsx +++ b/component-overview/examples/cards/StippledCard.jsx @@ -1,6 +1,6 @@ import React from "react"; import { StippledCard } from '@sb1/ffe-cards-react'; -import { GrafOppIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react';
@@ -19,7 +19,7 @@ import { GrafOppIkon } from '@sb1/ffe-icons-react'; )} - } }> + monitoring } }> {({ CardName, Title, Subtext, Text }) => ( <> CardName diff --git a/packages/ffe-accordion-react/package.json b/packages/ffe-accordion-react/package.json index 4616c8a18c..e3024e7447 100644 --- a/packages/ffe-accordion-react/package.json +++ b/packages/ffe-accordion-react/package.json @@ -26,7 +26,7 @@ "dependencies": { "@sb1/ffe-accordion": "^9.1.0", "@sb1/ffe-collapse-react": "^2.0.4", - "@sb1/ffe-icons-react": "^7.3.5", + "@sb1/ffe-symbols-react": "^2.0.1", "classnames": "^2.3.1", "prop-types": "^15.7.2", "uuid": "^9.0.0" diff --git a/packages/ffe-accordion-react/src/AccordionItem.js b/packages/ffe-accordion-react/src/AccordionItem.js index 31ee2a5cd1..b793011b3e 100644 --- a/packages/ffe-accordion-react/src/AccordionItem.js +++ b/packages/ffe-accordion-react/src/AccordionItem.js @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { bool, func, node, string } from 'prop-types'; import { v4 as uuid } from 'uuid'; -import { ChevronIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import Collapse from '@sb1/ffe-collapse-react'; import classNames from 'classnames'; @@ -71,10 +71,13 @@ const AccordionItem = ({ {heading} - diff --git a/packages/ffe-accordion/less/accordion.less b/packages/ffe-accordion/less/accordion.less index 52992d2e67..2d1292be57 100644 --- a/packages/ffe-accordion/less/accordion.less +++ b/packages/ffe-accordion/less/accordion.less @@ -29,7 +29,7 @@ &:hover { .ffe-accordion-item__heading-icon { transition: fill @ffe-transition-duration @ffe-ease; - fill: var(--ffe-v-accordion-secondary-color); + color: var(--ffe-v-accordion-secondary-color); } .ffe-accordion-item__heading-icon-wrapper { @@ -56,14 +56,12 @@ line-height: 0; border: 1px solid var(--ffe-v-accordion-primary-color); border-radius: 50%; - padding: 11px; + padding: var(--ffe-spacing-xs); } &__heading-icon { flex: 0 0 auto; - fill: var(--ffe-v-accordion-primary-color); - width: 11px; - height: 11px; + color: var(--ffe-v-accordion-primary-color); transition: transform @ffe-transition-duration @ffe-ease-in-out-back; } @@ -92,7 +90,7 @@ .ffe-accordion-item { &:hover { .ffe-accordion-item__heading-icon { - fill: var(--ffe-v-accordion-secondary-color); + color: var(--ffe-v-accordion-secondary-color); } .ffe-accordion-item__heading-icon-wrapper { diff --git a/packages/ffe-buttons-react/package.json b/packages/ffe-buttons-react/package.json index c08664e147..99034e1d8b 100644 --- a/packages/ffe-buttons-react/package.json +++ b/packages/ffe-buttons-react/package.json @@ -29,7 +29,7 @@ }, "dependencies": { "@sb1/ffe-buttons": "^17.1.0", - "@sb1/ffe-icons-react": "^7.3.5", + "@sb1/ffe-symbols-react": "^2.0.1", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, diff --git a/packages/ffe-buttons-react/src/ActionButton.js b/packages/ffe-buttons-react/src/ActionButton.js index beb7049570..acdab0b912 100644 --- a/packages/ffe-buttons-react/src/ActionButton.js +++ b/packages/ffe-buttons-react/src/ActionButton.js @@ -10,16 +10,31 @@ import { elementType, } from 'prop-types'; import classNames from 'classnames'; +import Symbol from '@sb1/ffe-symbols-react'; import Button from './BaseButton'; export default function ActionButton(props) { - const { className, ...rest } = props; + const { className, leftIcon, rightIcon, ...rest } = props; return ( )}
diff --git a/packages/ffe-context-message-react/src/ContextMessage.spec.js b/packages/ffe-context-message-react/src/ContextMessage.spec.js index 6dff270cb5..b40a5e734a 100644 --- a/packages/ffe-context-message-react/src/ContextMessage.spec.js +++ b/packages/ffe-context-message-react/src/ContextMessage.spec.js @@ -1,6 +1,5 @@ import React from 'react'; - -import { InfoSirkelIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import { ContextErrorMessage, @@ -15,7 +14,7 @@ const defaultProps = { children:

content

, messageType: 'tips', role: 'group', - icon: , + icon: info_i, }; const getShallowWrapper = props => @@ -92,26 +91,30 @@ describe('', () => { it('renders with context icon', () => { const wrapper = getMountedWrapper({}); - const el = wrapper.find('svg'); - expect(el).toHaveLength(1); - expect(el.hasClass('ffe-context-message-content__icon-svg')).toBe(true); - }); - - it('renders with role="img" on icon', () => { - const wrapper = getMountedWrapper({}); - const el = wrapper.find('svg'); + const el = wrapper.find(Symbol); expect(el).toHaveLength(1); - expect(el.prop('role')).toBe('img'); + expect(el.hasClass('ffe-context-message-content__icon-span')).toBe( + true, + ); }); it('lets consumer add extra classes to icon', () => { const wrapper = getMountedWrapper({ - icon: , + icon: ( + + info_i + + ), }); - const el = wrapper.find('svg'); + const el = wrapper.find(Symbol); - expect(el.hasClass('ffe-context-message-content__icon-svg')).toBe(true); + expect(el.hasClass('ffe-context-message-content__icon-span')).toBe( + true, + ); expect(el.hasClass('extra-extra-read-all-about-it')).toBe(true); }); @@ -127,13 +130,8 @@ describe('', () => { it('renders without close button by default', () => { const wrapper = getMountedWrapper({ - icon: , + icon: info_i, }); - expect( - wrapper - .find('.ffe-context-message-content__close-button-svg') - .exists(), - ).toBe(false); expect( wrapper.find('.ffe-context-message-content__close-button').exists(), ).toBe(false); diff --git a/packages/ffe-context-message-react/src/ContextSuccessMessage.js b/packages/ffe-context-message-react/src/ContextSuccessMessage.js index dcf23a7cef..13bb3f7e28 100644 --- a/packages/ffe-context-message-react/src/ContextSuccessMessage.js +++ b/packages/ffe-context-message-react/src/ContextSuccessMessage.js @@ -1,6 +1,6 @@ import React from 'react'; import ContextMessage from './ContextMessage'; -import { HakeIkon } from '@sb1/ffe-icons-react'; +import { Symbol } from '@sb1/ffe-symbols-react'; const ContextSuccessMessage = props => ( ( messageType="success" aria-label="Suksessmelding" role="group" - icon={} + icon={check} /> ); diff --git a/packages/ffe-context-message-react/src/ContextTipsMessage.js b/packages/ffe-context-message-react/src/ContextTipsMessage.js index d6f6acc9ee..a18176de56 100644 --- a/packages/ffe-context-message-react/src/ContextTipsMessage.js +++ b/packages/ffe-context-message-react/src/ContextTipsMessage.js @@ -1,6 +1,6 @@ import React from 'react'; import ContextMessage from './ContextMessage'; -import { LyspareIkon } from '@sb1/ffe-icons-react'; +import { Symbol } from '@sb1/ffe-symbols-react'; const ContextTipsMessage = props => ( ( messageType="tips" aria-label="Tipsmelding" role="group" - icon={} + icon={lightbulb} /> ); diff --git a/packages/ffe-context-message/less/context-message.less b/packages/ffe-context-message/less/context-message.less index d478b04c8e..bd011d6140 100644 --- a/packages/ffe-context-message/less/context-message.less +++ b/packages/ffe-context-message/less/context-message.less @@ -123,19 +123,17 @@ } } - &__icon-svg { - height: 1em; - width: 1em; - fill: var(--ffe-farge-svart); + &__icon-span { + font-size: 1.25rem; + color: var(--ffe-farge-svart); @media (min-width: @breakpoint-sm) { - height: 2em; - width: 2em; + font-size: 2.5rem; } .native & { @media (prefers-color-scheme: dark) { - fill: var(--ffe-farge-hvit); + color: var(--ffe-farge-hvit); } } } @@ -144,7 +142,6 @@ flex: 0 0 auto; cursor: pointer; color: var(--ffe-v-context-message-close-button-color); - fill: var(--ffe-v-context-message-close-button-color); border: 2px solid transparent; box-sizing: border-box; padding-top: @ffe-spacing-xs; @@ -155,7 +152,7 @@ width: 3rem; &:hover { - fill: var(--ffe-v-context-message-close-button-color-hover); + color: var(--ffe-v-context-message-close-button-color-hover); } &:focus { @@ -165,11 +162,6 @@ } } - &__close-button-svg { - height: 1rem; - width: 1rem; - } - @media (min-width: @breakpoint-sm) { flex-direction: row; } @@ -200,9 +192,8 @@ border: none; } - .ffe-context-message-content__icon-svg { - height: 1rem; - width: 1rem; + .ffe-context-message-content__icon-span { + font-size: 1.25rem; } } @@ -216,8 +207,8 @@ border-color: var(--ffe-v-context-message-info-icon-compact-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } @media (min-width: @breakpoint-sm) { @@ -226,8 +217,8 @@ border-color: var(--ffe-v-context-message-info-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-v-context-message-info-icon-color); + .ffe-context-message-content__icon-span { + color: var(--ffe-v-context-message-info-icon-color); } } } @@ -249,8 +240,8 @@ ); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } } @@ -262,8 +253,8 @@ border-color: var(--ffe-v-context-message-tips-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } @media (min-width: @breakpoint-sm) { @@ -272,8 +263,8 @@ border-color: var(--ffe-v-context-message-tips-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-v-context-message-tips-icon-color); + .ffe-context-message-content__icon-span { + color: var(--ffe-v-context-message-tips-icon-color); } } } @@ -293,8 +284,8 @@ background-color: var(--ffe-v-context-message-tips-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } } @@ -307,8 +298,8 @@ ); border-color: var(--ffe-v-context-message-success-compact-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } @media (min-width: @breakpoint-sm) { @@ -317,8 +308,8 @@ border-color: var(--ffe-v-context-message-success-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-v-context-message-success-icon-color); + .ffe-context-message-content__icon-span { + color: var(--ffe-v-context-message-success-icon-color); } } } @@ -340,8 +331,8 @@ ); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } } @@ -353,8 +344,8 @@ border-color: var(--ffe-v-context-message-error-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } @media (min-width: @breakpoint-sm) { @@ -363,8 +354,8 @@ border-color: var(--ffe-v-context-message-error-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-v-context-message-error-icon-color); + .ffe-context-message-content__icon-span { + color: var(--ffe-v-context-message-error-icon-color); } } } @@ -384,8 +375,8 @@ background-color: var(--ffe-v-context-message-error-icon-color); } - .ffe-context-message-content__icon-svg { - fill: var(--ffe-farge-hvit); + .ffe-context-message-content__icon-span { + color: var(--ffe-farge-hvit); } } } diff --git a/packages/ffe-lists-react/package.json b/packages/ffe-lists-react/package.json index 3c5cd0d003..15a1b023f3 100644 --- a/packages/ffe-lists-react/package.json +++ b/packages/ffe-lists-react/package.json @@ -25,7 +25,7 @@ "test:watch": "ffe-buildtool jest --watch" }, "dependencies": { - "@sb1/ffe-icons-react": "^7.3.5", + "@sb1/ffe-symbols-react": "^2.0.2", "@sb1/ffe-lists": "^12.1.0", "classnames": "^2.3.1", "prop-types": "^15.7.2" diff --git a/packages/ffe-lists-react/src/CheckList.spec.js b/packages/ffe-lists-react/src/CheckList.spec.js index 8e94b963d2..a721e14f77 100644 --- a/packages/ffe-lists-react/src/CheckList.spec.js +++ b/packages/ffe-lists-react/src/CheckList.spec.js @@ -1,7 +1,7 @@ import React from 'react'; import CheckList from './CheckList'; import CheckListItem from './CheckListItem'; -import { HakeIkon, KryssIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; const getWrapper = props => shallow( @@ -43,8 +43,12 @@ describe('', () => { describe('', () => { it('render correct icon based on isCross value', () => { const wrapper = shallow(An item); - expect(wrapper.find(HakeIkon)).toHaveLength(1); + expect( + wrapper.find(Symbol).hasClass('ffe-check-list__icon--check'), + ).toBe(true); wrapper.setProps({ isCross: true }); - expect(wrapper.find(KryssIkon)).toHaveLength(1); + expect( + wrapper.find(Symbol).hasClass('ffe-check-list__icon--cross'), + ).toBe(true); }); }); diff --git a/packages/ffe-lists-react/src/CheckListItem.js b/packages/ffe-lists-react/src/CheckListItem.js index 53f67586ad..fd0d594ee2 100644 --- a/packages/ffe-lists-react/src/CheckListItem.js +++ b/packages/ffe-lists-react/src/CheckListItem.js @@ -1,24 +1,30 @@ import React from 'react'; import { bool, node, string } from 'prop-types'; import classNames from 'classnames'; -import { HakeIkon, KryssIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; const CheckListItem = props => { const { className, isCross, ...rest } = props; return (
  • {isCross ? ( - + ariaLabel="kryss" + weight={400} + size="md" + > + close + ) : ( - + size="md" + weight={400} + ariaLabel="hake" + > + check + )} {rest.children}
    • diff --git a/packages/ffe-lists/less/regular-lists.less b/packages/ffe-lists/less/regular-lists.less index 029891a5b4..34139807c9 100644 --- a/packages/ffe-lists/less/regular-lists.less +++ b/packages/ffe-lists/less/regular-lists.less @@ -135,19 +135,16 @@ .ffe-check-list { &__icon { - width: 1em; - height: 1em; margin-right: @ffe-spacing-sm; position: absolute; left: 0; - top: 0.15em; &--check { - fill: var(--ffe-v-lists-check-list-check-icon-color); + color: var(--ffe-v-lists-check-list-check-icon-color); } &--cross { - fill: var(--ffe-v-lists-check-list-cross-icon-color); + color: var(--ffe-v-lists-check-list-cross-icon-color); } } diff --git a/packages/ffe-message-box-react/package.json b/packages/ffe-message-box-react/package.json index 8a00664cb4..af389768ce 100644 --- a/packages/ffe-message-box-react/package.json +++ b/packages/ffe-message-box-react/package.json @@ -24,7 +24,7 @@ "test:watch": "ffe-buildtool jest --watch" }, "dependencies": { - "@sb1/ffe-icons-react": "^7.3.5", + "@sb1/ffe-symbols-react": "^2.0.1", "@sb1/ffe-message-box": "^11.1.0", "classnames": "^2.3.1" }, diff --git a/packages/ffe-message-box-react/src/BaseMessage.js b/packages/ffe-message-box-react/src/BaseMessage.js index d1484e7324..26be4a57a0 100644 --- a/packages/ffe-message-box-react/src/BaseMessage.js +++ b/packages/ffe-message-box-react/src/BaseMessage.js @@ -2,11 +2,6 @@ import React from 'react'; import { bool, node, oneOf, string } from 'prop-types'; import classNames from 'classnames'; -const iconStyles = { - width: '32px', - height: '32px', -}; - const BaseMessage = props => { const { type, @@ -32,9 +27,9 @@ const BaseMessage = props => { > {React.cloneElement(icon, { - style: iconStyles, - role: 'img', ...icon.props, + size: 'xl', + weight: 300, })}
    diff --git a/packages/ffe-message-box-react/src/BaseMessage.spec.js b/packages/ffe-message-box-react/src/BaseMessage.spec.js index e3eb3151a1..d3012ca862 100644 --- a/packages/ffe-message-box-react/src/BaseMessage.spec.js +++ b/packages/ffe-message-box-react/src/BaseMessage.spec.js @@ -1,7 +1,10 @@ import React from 'react'; import BaseMessage from './BaseMessage'; - -const defaultProps = { type: 'info', icon: }; +import Symbol from '@sb1/ffe-symbols-react'; +const defaultProps = { + type: 'info', + icon: priority_high, +}; const getWrapper = props => shallow(); @@ -32,11 +35,6 @@ describe('', () => { const wrapper = getWrapper(); expect(wrapper.find('.ffe-message-box__icon').exists()).toBe(true); }); - it('renders the icon with role="img" by default', () => { - const wrapper = getWrapper(); - const el = wrapper.find('svg'); - expect(el.prop('role')).toBe('img'); - }); it('renders the container with role="group" by default', () => { const wrapper = getWrapper(); expect(wrapper.prop('role')).toBe('group'); diff --git a/packages/ffe-message-box-react/src/ErrorMessage.js b/packages/ffe-message-box-react/src/ErrorMessage.js index 00075f0ce8..52ad72eefb 100644 --- a/packages/ffe-message-box-react/src/ErrorMessage.js +++ b/packages/ffe-message-box-react/src/ErrorMessage.js @@ -1,8 +1,6 @@ import React from 'react'; import { node, string, bool } from 'prop-types'; - -import { UtropstegnIkon } from '@sb1/ffe-icons-react'; - +import Symbol from '@sb1/ffe-symbols-react'; import BaseMessage from './BaseMessage'; const ErrorMessage = props => { @@ -12,7 +10,7 @@ const ErrorMessage = props => { } + icon={priority_high} role={alert ? 'alert' : 'group'} {...rest} /> diff --git a/packages/ffe-message-box-react/src/InfoMessage.js b/packages/ffe-message-box-react/src/InfoMessage.js index 23ecc15bce..22927f2a5b 100644 --- a/packages/ffe-message-box-react/src/InfoMessage.js +++ b/packages/ffe-message-box-react/src/InfoMessage.js @@ -1,7 +1,6 @@ import React from 'react'; import { node, string } from 'prop-types'; - -import { InfoIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import BaseMessage from './BaseMessage'; @@ -9,7 +8,7 @@ const InfoMessage = props => ( } + icon={info_i} {...props} /> ); diff --git a/packages/ffe-message-box-react/src/SuccessMessage.js b/packages/ffe-message-box-react/src/SuccessMessage.js index 8ce7480a1f..53791ffe07 100644 --- a/packages/ffe-message-box-react/src/SuccessMessage.js +++ b/packages/ffe-message-box-react/src/SuccessMessage.js @@ -1,7 +1,6 @@ import React from 'react'; import { node, string } from 'prop-types'; - -import { HakeIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import BaseMessage from './BaseMessage'; @@ -9,7 +8,7 @@ const SuccessMessage = props => ( } + icon={check} {...props} /> ); diff --git a/packages/ffe-message-box-react/src/TipsMessage.js b/packages/ffe-message-box-react/src/TipsMessage.js index 5dd85e8737..30ee3896dc 100644 --- a/packages/ffe-message-box-react/src/TipsMessage.js +++ b/packages/ffe-message-box-react/src/TipsMessage.js @@ -1,7 +1,6 @@ import React from 'react'; import { node, string } from 'prop-types'; - -import { LyspareIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import BaseMessage from './BaseMessage'; @@ -9,7 +8,7 @@ const TipsMessage = props => ( } + icon={lightbulb} {...props} /> ); diff --git a/packages/ffe-message-box/less/message-box.less b/packages/ffe-message-box/less/message-box.less index c043b11b2d..c59b75232c 100644 --- a/packages/ffe-message-box/less/message-box.less +++ b/packages/ffe-message-box/less/message-box.less @@ -124,7 +124,7 @@ background-color: var(--ffe-v-message-box-icon-bg-color); border-radius: 50%; display: inline-flex; - fill: var(--ffe-v-message-box-info-icon-color); + color: var(--ffe-v-message-box-info-icon-color); height: 64px; margin-bottom: -16px; align-items: center; @@ -137,23 +137,17 @@ &--tips &__icon { border-color: var(--ffe-v-message-box-tips-icon-color); - svg { - fill: var(--ffe-v-message-box-tips-icon-color); - } + color: var(--ffe-v-message-box-tips-icon-color); } &--error &__icon { border-color: var(--ffe-v-message-box-error-icon-color); - svg { - fill: var(--ffe-v-message-box-error-icon-color); - } + color: var(--ffe-v-message-box-error-icon-color); } &--success &__icon { border-color: var(--ffe-v-message-box-success-icon-color); - svg { - fill: var(--ffe-v-message-box-success-icon-color); - } + color: var(--ffe-v-message-box-success-icon-color); } @media print { diff --git a/packages/ffe-symbols/CHANGELOG.md b/packages/ffe-symbols/CHANGELOG.md index dc3482a57e..3865fe06b9 100644 --- a/packages/ffe-symbols/CHANGELOG.md +++ b/packages/ffe-symbols/CHANGELOG.md @@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + # [2.1.0](https://github.com/SpareBank1/designsystem/compare/@sb1/ffe-symbols@2.0.0...@sb1/ffe-symbols@2.1.0) (2023-09-15) ### Features diff --git a/packages/ffe-symbols/theme.less b/packages/ffe-symbols/theme.less index a63b11ce3e..aa43ad8cd5 100644 --- a/packages/ffe-symbols/theme.less +++ b/packages/ffe-symbols/theme.less @@ -1,3 +1,4 @@ + :root, :host { --ffe-v-symbol-300-font: 'MaterialSymbolsRounded-300'; diff --git a/packages/ffe-system-message-react/package.json b/packages/ffe-system-message-react/package.json index f988f9c088..ddd8ff36b8 100644 --- a/packages/ffe-system-message-react/package.json +++ b/packages/ffe-system-message-react/package.json @@ -25,14 +25,13 @@ }, "dependencies": { "@sb1/ffe-grid-react": "^13.0.6", - "@sb1/ffe-icons-react": "^7.3.5", + "@sb1/ffe-symbols-react": "^2.0.1", "@sb1/ffe-system-message": "^7.1.0", "classnames": "^2.3.1", "prop-types": "^15.7.2" }, "devDependencies": { "@sb1/ffe-buildtool": "^0.5.0", - "@sb1/ffe-icons-react": "^7.3.4", "react": "^16.9.0", "react-dom": "^16.9.0" }, diff --git a/packages/ffe-system-message-react/src/SystemErrorMessage.js b/packages/ffe-system-message-react/src/SystemErrorMessage.js index 8bca94ae23..c4056cec04 100644 --- a/packages/ffe-system-message-react/src/SystemErrorMessage.js +++ b/packages/ffe-system-message-react/src/SystemErrorMessage.js @@ -1,6 +1,6 @@ import React from 'react'; import { func, string, number, node, oneOf, bool } from 'prop-types'; -import { UtropstegnIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import SystemMessage from './SystemMessage'; @@ -11,7 +11,7 @@ export default function SystemErrorMessage(props) { } + icon={priority_high} role={alert ? 'alert' : 'group'} {...rest} /> @@ -31,8 +31,6 @@ SystemErrorMessage.propTypes = { children: node.isRequired, /** Additional classes added to the surrounding div */ className: string, - /** Override the default icon - use with caution! */ - icon: node, /** 'nb', 'nn', or 'en' */ locale: oneOf(['en', 'nb', 'nn']), /** diff --git a/packages/ffe-system-message-react/src/SystemInfoMessage.js b/packages/ffe-system-message-react/src/SystemInfoMessage.js index 795aae6586..1eb9fd48b8 100644 --- a/packages/ffe-system-message-react/src/SystemInfoMessage.js +++ b/packages/ffe-system-message-react/src/SystemInfoMessage.js @@ -1,5 +1,5 @@ import React from 'react'; -import { InfoIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import SystemMessage from './SystemMessage'; @@ -8,7 +8,7 @@ export default function SystemInfoMessage(props) { } + icon={info_i} {...props} /> ); diff --git a/packages/ffe-system-message-react/src/SystemMessage.js b/packages/ffe-system-message-react/src/SystemMessage.js index 75325a4a64..f5d6ffb5d8 100644 --- a/packages/ffe-system-message-react/src/SystemMessage.js +++ b/packages/ffe-system-message-react/src/SystemMessage.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { func, string, number, node, oneOf, bool } from 'prop-types'; import classNames from 'classnames'; -import { KryssIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; class SystemMessage extends Component { constructor() { @@ -64,8 +64,9 @@ class SystemMessage extends Component { {icon && React.cloneElement(icon, { - role: 'img', ...icon.props, + size: 'sm', + weight: 300, })}

    {children}

    @@ -75,7 +76,9 @@ class SystemMessage extends Component { onClick={this.close} type="button" > -
    diff --git a/packages/ffe-system-message-react/src/SystemNewsMessage.js b/packages/ffe-system-message-react/src/SystemNewsMessage.js index 83364131af..169fc74b65 100644 --- a/packages/ffe-system-message-react/src/SystemNewsMessage.js +++ b/packages/ffe-system-message-react/src/SystemNewsMessage.js @@ -1,5 +1,5 @@ import React from 'react'; -import { InfoIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import SystemMessage from './SystemMessage'; @@ -8,7 +8,7 @@ export default function SystemNewsMessage(props) { } + icon={info_i} {...props} /> ); diff --git a/packages/ffe-system-message-react/src/SystemSuccessMessage.js b/packages/ffe-system-message-react/src/SystemSuccessMessage.js index f747a04bb1..12a2374717 100644 --- a/packages/ffe-system-message-react/src/SystemSuccessMessage.js +++ b/packages/ffe-system-message-react/src/SystemSuccessMessage.js @@ -1,5 +1,5 @@ import React from 'react'; -import { HakeIkon } from '@sb1/ffe-icons-react'; +import Symbol from '@sb1/ffe-symbols-react'; import SystemMessage from './SystemMessage'; @@ -8,7 +8,7 @@ export default function SystemSuccessMessage(props) { } + icon={check} {...props} /> ); diff --git a/packages/ffe-system-message/less/system-message.less b/packages/ffe-system-message/less/system-message.less index e70cabb5a3..3f92f1914c 100644 --- a/packages/ffe-system-message/less/system-message.less +++ b/packages/ffe-system-message/less/system-message.less @@ -1,23 +1,5 @@ // System message // -// Markup: -//
    -//
    -// -// -// -// -// -//

    Lorem ipsum dolor sit amet.

    -// -//
    -//
    -// // --error - Error message // --info - Generic info // --news - News @@ -27,7 +9,6 @@ .ffe-system-message-wrapper { color: var(--ffe-farge-svart); - fill: currentColor; transition: height @ffe-transition-duration @ffe-ease-in-out-back; overflow: hidden; border-radius: @ffe-spacing-xs; @@ -72,10 +53,10 @@ } &--error { background-color: var(--ffe-v-system-message-error-bg-color); - fill: var(--ffe-farge-hvit); .ffe-system-message__icon { background: var(--ffe-v-system-message-error-icon-bg-color); + color: var(--ffe-farge-hvit); } } @@ -89,29 +70,29 @@ } &--info { background-color: var(--ffe-v-system-message-info-bg-color); - fill: var(--ffe-farge-hvit); .ffe-system-message__icon { background: var(--ffe-v-system-message-info-icon-bg-color); + color: var(--ffe-farge-hvit); } } &--news&--coloredbg { background-color: var(--ffe-v-system-message-variant-bg-color); color: var(--ffe-farge-svart); - fill: var(--ffe-farge-hvit); .native & { @media (prefers-color-scheme: dark) { background-color: var(--ffe-v-system-message-news-bg-color); color: var(--ffe-farge-hvit); - fill: var(--ffe-v-system-message-news-icon-color); } } .ffe-system-message__icon { background: var(--ffe-v-system-message-news-icon-color); + color: var(--ffe-farge-hvit); .native & { @media (prefers-color-scheme: dark) { background: var(--ffe-farge-hvit); + color: var(--ffe-v-system-message-news-icon-color); } } } @@ -119,9 +100,9 @@ &--news { background-color: var(--ffe-v-system-message-news-bg-color); color: var(--ffe-farge-hvit); - fill: var(--ffe-v-system-message-news-icon-color); .ffe-system-message__icon { background: var(--ffe-farge-hvit); + color: var(--ffe-v-system-message-news-icon-color); } } @@ -135,9 +116,9 @@ } &--success { background-color: var(--ffe-v-system-message-success-bg-color); - fill: var(--ffe-farge-hvit); .ffe-system-message__icon { background: var(--ffe-v-system-message-news-icon-bg-color); + color: var(--ffe-farge-hvit); } } } @@ -159,13 +140,8 @@ height: 2rem; width: 2rem; margin-right: @ffe-spacing-sm; - - > svg { - height: 50%; - position: relative; - margin: auto; - width: 50%; - } + align-items: center; + justify-content: center; } &__content { @@ -185,35 +161,25 @@ background: transparent; border: 2px solid transparent; border-radius: 5px; - color: inherit; cursor: pointer; align-self: flex-start; width: 3rem; height: 3rem; padding-top: @ffe-spacing-xs; box-sizing: border-box; - fill: var(--ffe-v-system-message-close-button-color); + color: var(--ffe-v-system-message-close-button-color); &:hover { - fill: var(--ffe-v-system-message-close-button-color-hover); + color: var(--ffe-v-system-message-close-button-color-hover); } &:focus { border: 2px solid var(--ffe-v-system-message-close-button-border-color-focus); } - > svg { - height: 1rem; - width: 1rem; - .native & { - @media (prefers-color-scheme: dark) { - fill: inherit; - } - } - } .ffe-system-message-wrapper--news & { - fill: var(--ffe-farge-hvit); + color: var(--ffe-farge-hvit); &:hover { - fill: var(--ffe-farge-lysvarmgraa); + color: var(--ffe-farge-lysvarmgraa); } &:focus { border: 2px solid var(--ffe-farge-hvit);