From 46b0865e89d603abed0b36f955ecdbdd90a1227c Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 15 Dec 2021 11:00:10 +0100 Subject: [PATCH] Add Heading components (#7362) * add Heading components Signed-off-by: Kerry Archibald * remove margins Signed-off-by: Kerry Archibald * snapshots Signed-off-by: Kerry Archibald * unset block and inline margins Signed-off-by: Kerry Archibald * copyright Signed-off-by: Kerry Archibald * fix werid quoting on heading test Signed-off-by: Kerry Archibald --- res/css/_components.scss | 1 + res/css/views/typography/_Heading.scss | 39 +++++++++++++++++++ src/components/views/typography/Heading.tsx | 31 +++++++++++++++ .../views/typography/Heading-test.tsx | 28 +++++++++++++ .../__snapshots__/Heading-test.tsx.snap | 34 ++++++++++++++++ 5 files changed, 133 insertions(+) create mode 100644 res/css/views/typography/_Heading.scss create mode 100644 src/components/views/typography/Heading.tsx create mode 100644 test/components/views/typography/Heading-test.tsx create mode 100644 test/components/views/typography/__snapshots__/Heading-test.tsx.snap diff --git a/res/css/_components.scss b/res/css/_components.scss index 01f8bbece3..674c648778 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -298,6 +298,7 @@ @import "./views/toasts/_AnalyticsToast.scss"; @import "./views/toasts/_IncomingCallToast.scss"; @import "./views/toasts/_NonUrgentEchoFailureToast.scss"; +@import "./views/typography/_Heading.scss"; @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/CallView/_CallViewButtons.scss"; @import "./views/voip/_CallContainer.scss"; diff --git a/res/css/views/typography/_Heading.scss b/res/css/views/typography/_Heading.scss new file mode 100644 index 0000000000..9b7ddeaef3 --- /dev/null +++ b/res/css/views/typography/_Heading.scss @@ -0,0 +1,39 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_Heading_h1 { + font-size: $font-32px; + font-weight: $font-semi-bold; + line-height: $font-39px; + margin-inline: unset; + margin-block: unset; +} + +.mx_Heading_h2 { + font-size: $font-24px; + font-weight: $font-semi-bold; + line-height: $font-29px; + margin-inline: unset; + margin-block: unset; +} + +.mx_Heading_h3 { + font-size: $font-18px; + font-weight: $font-semi-bold; + line-height: $font-22px; + margin-inline: unset; + margin-block: unset; +} diff --git a/src/components/views/typography/Heading.tsx b/src/components/views/typography/Heading.tsx new file mode 100644 index 0000000000..069ecb54df --- /dev/null +++ b/src/components/views/typography/Heading.tsx @@ -0,0 +1,31 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + +http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { HTMLAttributes } from 'react'; +import classNames from 'classnames'; + +type Size = 'h1' | 'h2' | 'h3'; +interface HeadingProps extends HTMLAttributes { + size: Size; +} + +const Heading: React.FC = ({ size, className, children, ...rest }) => React.createElement(size || 'h1', { + ...rest, + className: classNames(`mx_Heading_${size}`, className), + children, +}); + +export default Heading; diff --git a/test/components/views/typography/Heading-test.tsx b/test/components/views/typography/Heading-test.tsx new file mode 100644 index 0000000000..7f8561bfae --- /dev/null +++ b/test/components/views/typography/Heading-test.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { renderIntoDocument } from 'react-dom/test-utils'; + +import Heading from "../../../../src/components/views/typography/Heading"; +describe('', () => { + const defaultProps = { + size: 'h1', + children:
test
, + ['data-test-id']: 'test', + className: 'test', + } as any; + const getComponent = (props = {}) => { + const wrapper = renderIntoDocument( +
, + ) as HTMLDivElement; + return wrapper.children[0]; + }; + + it('renders h1 with correct attributes', () => { + expect(getComponent({ size: 'h1' })).toMatchSnapshot(); + }); + it('renders h2 with correct attributes', () => { + expect(getComponent({ size: 'h2' })).toMatchSnapshot(); + }); + it('renders h3 with correct attributes', () => { + expect(getComponent({ size: 'h3' })).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/typography/__snapshots__/Heading-test.tsx.snap b/test/components/views/typography/__snapshots__/Heading-test.tsx.snap new file mode 100644 index 0000000000..592ee050e8 --- /dev/null +++ b/test/components/views/typography/__snapshots__/Heading-test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders h1 with correct attributes 1`] = ` +

+
+ test +
+

+`; + +exports[` renders h2 with correct attributes 1`] = ` +

+
+ test +
+

+`; + +exports[` renders h3 with correct attributes 1`] = ` +

+
+ test +
+

+`;