Skip to content

Commit 94522e6

Browse files
feat(logo): Rocket.Chat logo package (#535)
* feat: rocketchat logo package * chore: replace logo in onboarding-ui package * fix: jest config * fix: width prop to prevent SVG to be hidden in Safari * Remove ARIA role attribute Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
1 parent 8efa32f commit 94522e6

29 files changed

+1086
-128
lines changed

packages/logo/.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

packages/logo/.eslintrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
extends: '@rocket.chat/eslint-config-alt/typescript',
3+
env: {
4+
jest: true,
5+
},
6+
};

packages/logo/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/dist

packages/logo/.lintstagedrc.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"src/**/*.{js,ts}": [
3+
"yarn eslint --fix --"
4+
]
5+
}

packages/logo/.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

packages/logo/.prettierrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('@rocket.chat/prettier-config/fuselage');

packages/logo/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file.
4+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/logo/README.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!--header-->
2+
3+
<p align="center">
4+
<a href="https://rocket.chat" title="Rocket.Chat">
5+
<img src="https://github.com/RocketChat/Rocket.Chat.Artwork/raw/master/Logos/2020/png/logo-horizontal-red.png" alt="Rocket.Chat" />
6+
</a>
7+
</p>
8+
9+
# `@rocket.chat/logo`
10+
11+
> Rocket.Chat logo package
12+
13+
---
14+
15+
![npm@latest](https://img.shields.io/npm/v/@rocket.chat/logo/latest?style=flat-square) ![npm@next](https://img.shields.io/npm/v/@rocket.chat/logo/next?style=flat-square) ![npm downloads](https://img.shields.io/npm/dw/@rocket.chat/logo?style=flat-square) ![License: MIT](https://img.shields.io/npm/l/@rocket.chat/logo?style=flat-square)
16+
17+
![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Flogo&style=flat-square) ![peer deps](https://img.shields.io/david/peer/RocketChat/Rocket.Chat.Fuselage?path=packages%2Flogo&style=flat-square) ![dev deps](https://img.shields.io/david/dev/RocketChat/Rocket.Chat.Fuselage?path=packages%2Flogo&style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/min/@rocket.chat/logo?style=flat-square)
18+
19+
<!--/header-->
20+
21+
## Install
22+
23+
<!--install-->
24+
25+
Add `@rocket.chat/logo` as a dependency:
26+
27+
```sh
28+
npm i @rocket.chat/logo
29+
30+
# or, if you are using yarn:
31+
32+
yarn add @rocket.chat/logo
33+
```
34+
35+
<!--/install-->
36+
37+
## Contributing
38+
39+
<!--contributing(msg)-->
40+
41+
Contributions, issues, and feature requests are welcome!<br />
42+
Feel free to check the [issues](https://github.com/RocketChat/Rocket.Chat.Fuselage/issues).
43+
44+
<!--/contributing(msg)-->
45+
46+
### Building
47+
48+
As this package dependends on others in this monorepo, before anything run the following at the root directory:
49+
50+
<!--yarn(build)-->
51+
52+
```sh
53+
yarn build
54+
```
55+
56+
<!--/yarn(build)-->
57+
58+
### Linting
59+
60+
To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).
61+
Before commiting, check if your code fits our style by running:
62+
63+
<!--yarn(lint)-->
64+
65+
```sh
66+
yarn lint
67+
```
68+
69+
<!--/yarn(lint)-->
70+
71+
Some linter warnings and errors can be automatically fixed:
72+
73+
<!--yarn(lint-fix)-->
74+
75+
```sh
76+
yarn lint-fix
77+
```
78+
79+
<!--/yarn(lint-fix)-->
80+
81+
### Running tests
82+
83+
Whenever possible, add tests to describe exactly what your code do. You can run them by yourself:
84+
85+
<!--yarn(test)-->
86+
87+
```sh
88+
yarn test
89+
```
90+
91+
<!--/yarn(test)-->

packages/logo/babel.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: [
3+
['@babel/plugin-proposal-private-property-in-object', { loose: true }],
4+
['@babel/plugin-proposal-private-methods', { loose: true }],
5+
['@babel/plugin-proposal-class-properties', { loose: true }],
6+
],
7+
};

packages/logo/jest.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
errorOnDeprecated: true,
4+
testMatch: ['<rootDir>/src/**/*.spec.ts?(x)'],
5+
testEnvironment: 'jsdom',
6+
globals: {
7+
'ts-jest': {
8+
tsconfig: {
9+
noUnusedLocals: false,
10+
noUnusedParameters: false,
11+
},
12+
},
13+
},
14+
};

packages/logo/package.json

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
{
2+
"name": "@rocket.chat/logo",
3+
"version": "0.29.0",
4+
"description": "Rocket.Chat logo package",
5+
"keywords": [
6+
"rocketchat",
7+
"rocketchat logo"
8+
],
9+
"author": {
10+
"name": "Rocket.Chat",
11+
"url": "https://rocket.chat/"
12+
},
13+
"homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme",
14+
"license": "MIT",
15+
"publishConfig": {
16+
"access": "public"
17+
},
18+
"repository": {
19+
"type": "git",
20+
"url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git",
21+
"directory": "packages/logo"
22+
},
23+
"bugs": {
24+
"url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
25+
},
26+
"main": "dist/cjs/index.js",
27+
"module": "dist/esm/index.js",
28+
"types": "dist/esm/index.d.ts",
29+
"files": [
30+
"/dist"
31+
],
32+
"scripts": {
33+
"build": "run-s .:build:clean .:build:esm .:build:cjs",
34+
".:build:clean": "rimraf dist",
35+
".:build:esm": "tsc -p tsconfig-esm.json",
36+
".:build:cjs": "tsc -p tsconfig-cjs.json",
37+
"lint": "run-s .:lint:eslint .:lint:tsc",
38+
".:lint:eslint": "eslint src",
39+
".:lint:tsc": "tsc -p tsconfig.json --noEmit",
40+
"lint-fix": "eslint --fix src",
41+
"lint-staged": "lint-staged",
42+
"test": "jest --runInBand",
43+
"docs": "typedoc"
44+
},
45+
"devDependencies": {
46+
"@rocket.chat/eslint-config-alt": "workspace:packages/eslint-config-alt",
47+
"@rocket.chat/fuselage-tokens": "workspace:packages/fuselage-tokens",
48+
"@rocket.chat/prettier-config": "workspace:packages/prettier-config",
49+
"@types/jest": "^27.0.1",
50+
"@types/react": "^17.0.14",
51+
"@types/react-dom": "^17.0.9",
52+
"eslint": "^7.32.0",
53+
"jest": "^27.2.0",
54+
"lint-staged": "^11.1.2",
55+
"npm-run-all": "^4.1.5",
56+
"prettier": "^2.4.1",
57+
"react": "^17.0.2",
58+
"react-dom": "^17.0.2",
59+
"rimraf": "^3.0.2",
60+
"ts-jest": "^27.0.5",
61+
"typedoc": "^0.22.3",
62+
"typescript": "^4.4.3"
63+
},
64+
"dependencies": {
65+
"@rocket.chat/fuselage-hooks": "workspace:packages/fuselage-hooks",
66+
"tslib": "^2.3.1"
67+
},
68+
"peerDependencies": {
69+
"react": "17.0.2",
70+
"react-dom": "17.0.2"
71+
}
72+
}

packages/onboarding-ui/src/common/RocketChatLogo.tsx packages/logo/src/RocketChatLogo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const RocketChatLogo = ({
1717
viewBox='0 0 180 30'
1818
fill={color}
1919
aria-labelledby={titleId}
20-
role='img'
20+
width='100%'
2121
>
2222
<title id={titleId}>Rocket.Chat</title>
2323
<path d='M173.243 3.53369H176.613V8.14872H179.731V11.185H176.613V19.4313H179.562V22.4125C179.085 22.5238 178.495 22.58 177.821 22.58C174.76 22.58 173.242 20.9925 173.242 17.8163V3.53369H173.243Z' />

packages/logo/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as RocketChatLogo } from './RocketChatLogo';

packages/logo/tsconfig-cjs.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"module": "commonjs",
5+
"outDir": "./dist/cjs"
6+
},
7+
"exclude": ["./**/*.spec.tsx"]
8+
}

packages/logo/tsconfig-esm.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"exclude": ["./**/*.spec.tsx"]
4+
}

packages/logo/tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"rootDir": "./src",
4+
"target": "es5",
5+
"module": "ESNext",
6+
"declaration": true,
7+
"declarationMap": true,
8+
"sourceMap": true,
9+
"outDir": "./dist/esm",
10+
"strict": true,
11+
"esModuleInterop": true,
12+
"skipLibCheck": true,
13+
"forceConsistentCasingInFileNames": true,
14+
"moduleResolution": "node",
15+
"resolveJsonModule": true,
16+
"jsx": "react-jsx",
17+
"importsNotUsedAsValues": "error"
18+
}
19+
}

packages/logo/typedoc.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"entryPoints": ["src/index.ts"],
3+
"out": "../../static/logo"
4+
}

packages/onboarding-ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"@rocket.chat/fuselage": "workspace:packages/fuselage",
7979
"@rocket.chat/fuselage-hooks": "workspace:packages/fuselage-hooks",
8080
"@rocket.chat/icons": "workspace:packages/icons",
81+
"@rocket.chat/logo": "workspace:packages/logo",
8182
"@rocket.chat/styled": "workspace:packages/styled",
8283
"i18next": "^20.3.2",
8384
"react-hook-form": "^7.10.1",

packages/onboarding-ui/src/common/FormPageLayout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { RocketChatLogo } from '@rocket.chat/logo';
12
import type { ReactElement, ReactNode } from 'react';
23
import { useTranslation } from 'react-i18next';
34

@@ -10,7 +11,6 @@ import {
1011
Title,
1112
Wrapper,
1213
} from './FormPageLayout.styles';
13-
import RocketChatLogo from './RocketChatLogo';
1414

1515
type FormPageLayoutProps = {
1616
logo?: ReactNode;

packages/onboarding-ui/src/common/RocketChatLogo.stories.tsx

-19
This file was deleted.

packages/onboarding-ui/src/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
export { default as RocketChatLogo } from './common/RocketChatLogo';
21
export { default as AdminInfoPage } from './pages/AdminInfoPage';
32
export { default as AwaitingConfirmationPage } from './pages/AwaitingConfirmationPage';
43
export { default as CheckYourEmailPage } from './pages/CheckYourEmailPage';

packages/onboarding-ui/src/pages/AwaitingConfirmationPage/AwaitingConfirmationPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Box, Margins } from '@rocket.chat/fuselage';
22
import colors from '@rocket.chat/fuselage-tokens/colors.json';
3+
import { RocketChatLogo } from '@rocket.chat/logo';
34
import type { ReactElement } from 'react';
45
import { useTranslation } from 'react-i18next';
56

67
import BackgroundLayer from '../../common/BackgroundLayer';
78
import { useDarkMode } from '../../common/DarkModeProvider';
89
import EmailCodeFallback from '../../common/EmailCodeFallback';
9-
import RocketChatLogo from '../../common/RocketChatLogo';
1010

1111
type AwaitingConfirmationPageProps = {
1212
emailAddress: string;

packages/onboarding-ui/src/pages/CheckYourEmailPage/CheckYourEmailPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Box, Margins } from '@rocket.chat/fuselage';
22
import colors from '@rocket.chat/fuselage-tokens/colors.json';
3+
import { RocketChatLogo } from '@rocket.chat/logo';
34
import type { ReactElement } from 'react';
45
import { useTranslation, Trans } from 'react-i18next';
56

67
import BackgroundLayer from '../../common/BackgroundLayer';
78
import { useDarkMode } from '../../common/DarkModeProvider';
89
import EmailCodeFallback from '../../common/EmailCodeFallback';
9-
import RocketChatLogo from '../../common/RocketChatLogo';
1010

1111
type CheckYourEmailPageProps = {
1212
onResendEmailRequest: () => void;

packages/onboarding-ui/src/pages/ConfirmationProcessPage/ConfirmationProcessPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Box, Margins, Throbber } from '@rocket.chat/fuselage';
22
import colors from '@rocket.chat/fuselage-tokens/colors.json';
3+
import { RocketChatLogo } from '@rocket.chat/logo';
34
import type { ReactElement } from 'react';
45
import { useTranslation } from 'react-i18next';
56

67
import BackgroundLayer from '../../common/BackgroundLayer';
78
import { useDarkMode } from '../../common/DarkModeProvider';
8-
import RocketChatLogo from '../../common/RocketChatLogo';
99

1010
const ConfirmationProcessPage = (): ReactElement => {
1111
const darkMode = useDarkMode();

packages/onboarding-ui/src/pages/EmailConfirmedPage/EmailConfirmedPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Box, Margins } from '@rocket.chat/fuselage';
22
import colors from '@rocket.chat/fuselage-tokens/colors.json';
3+
import { RocketChatLogo } from '@rocket.chat/logo';
34
import type { ReactElement } from 'react';
45
import { useTranslation } from 'react-i18next';
56

67
import BackgroundLayer from '../../common/BackgroundLayer';
78
import { useDarkMode } from '../../common/DarkModeProvider';
8-
import RocketChatLogo from '../../common/RocketChatLogo';
99

1010
const EmailConfirmedPage = (): ReactElement => {
1111
const darkMode = useDarkMode();

packages/onboarding-ui/src/pages/InvalidLinkPage/InvalidLinkPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Box, Margins, Button } from '@rocket.chat/fuselage';
22
import colors from '@rocket.chat/fuselage-tokens/colors.json';
3+
import { RocketChatLogo } from '@rocket.chat/logo';
34
import type { ReactElement } from 'react';
45
import { useTranslation } from 'react-i18next';
56

67
import BackgroundLayer from '../../common/BackgroundLayer';
78
import { useDarkMode } from '../../common/DarkModeProvider';
8-
import RocketChatLogo from '../../common/RocketChatLogo';
99

1010
type InvalidLinkPageProps = {
1111
onRequestNewLink: () => void;

packages/onboarding-ui/src/pages/MagicLinkEmailPage/MagicLinkEmailPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Box, Margins } from '@rocket.chat/fuselage';
22
import colors from '@rocket.chat/fuselage-tokens/colors.json';
3+
import { RocketChatLogo } from '@rocket.chat/logo';
34
import type { ReactElement } from 'react';
45
import { useTranslation } from 'react-i18next';
56

67
import BackgroundLayer from '../../common/BackgroundLayer';
78
import { useDarkMode } from '../../common/DarkModeProvider';
89
import EmailCodeFallback from '../../common/EmailCodeFallback';
9-
import RocketChatLogo from '../../common/RocketChatLogo';
1010

1111
type MagicLinkEmailProps = {
1212
onResendEmailRequest: () => void;

0 commit comments

Comments
 (0)