srf-feathers 1.0.3 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -224
- package/build/assets/Release_notes_SRGSSRTypeVF_V2.000.txt +37 -0
- package/build/assets/SRGSSRTypeSerifText_W_Rg.woff2 +0 -0
- package/build/assets/SRGSSRTypeVF_Display_W_Wght.woff2 +0 -0
- package/build/assets/SRGSSRTypeVF_Text_W_Wght.woff2 +0 -0
- package/build/elements/Button/Button.d.ts +10 -0
- package/build/elements/Button/Button.types.d.ts +17 -0
- package/build/elements/Icon/Icon.d.ts +110 -0
- package/build/elements/Icon/Icon.types.d.ts +8 -0
- package/build/elements/Tooltip/Tooltip.d.ts +9 -0
- package/build/elements/Tooltip/Tooltip.types.d.ts +8 -0
- package/build/index.d.ts +4 -2
- package/build/index.esm.js +4757 -25
- package/build/index.esm.js.map +1 -1
- package/build/index.js +4909 -56
- package/build/index.js.map +1 -1
- package/build/scss/foundation/breakpoints.scss +55 -0
- package/build/{variables.scss → scss/foundation/colors.scss} +17 -19
- package/build/scss/foundation/fonts.scss +38 -0
- package/build/scss/foundation/globals.scss +107 -0
- package/build/scss/foundation/mixins.scss +64 -0
- package/build/{typography.scss → scss/foundation/typography.scss} +9 -0
- package/build/scss/foundation/variables.scss +40 -0
- package/package.json +26 -4
- package/build/Icon/Icon.d.ts +0 -8
- package/build/Icon/Icon.types.d.ts +0 -5
package/README.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SRF Feathers 🪶
|
|
2
2
|
|
|
3
|
-
[](https://buildkite.com/harvey/react-component-library)
|
|
4
3
|
[](https://opensource.org/licenses/MIT)
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
Shared Frontend Components for SRF applications
|
|
7
6
|
|
|
8
7
|
- [Rollup](https://github.com/rollup/rollup)
|
|
9
8
|
- [Sass](https://sass-lang.com/)
|
|
10
9
|
- [TypeScript](https://www.typescriptlang.org/)
|
|
11
|
-
|
|
12
|
-
It also features:
|
|
13
|
-
|
|
14
10
|
- [Storybook](https://storybook.js.org/) to help you create and show off your components
|
|
15
11
|
- [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components
|
|
16
12
|
|
|
17
|
-
|
|
13
|
+
## Installation
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
* check out srf-feathers `git clone git@github.com:mmz-srf/feathers.git`
|
|
16
|
+
* enter directory where you installed it, e.g. `cd feathers`
|
|
17
|
+
* install dependencies `npm install`
|
|
18
|
+
|
|
19
|
+
ℹ️ If you have to update the _secrets_ (e.g. `CHROMATIC_PROJECT_TOKEN` for deployment to chromatic or `NPM_TOKEN` for deploying on NPM), you can change them on https://github.com/mmz-srf/feathers/settings/secrets/actions
|
|
20
20
|
|
|
21
21
|
## Development
|
|
22
22
|
|
|
@@ -40,17 +40,15 @@ To run a live-reload Storybook server on your local machine:
|
|
|
40
40
|
npm run storybook
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
## Publishing
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
npm run storybook:export
|
|
47
|
-
```
|
|
45
|
+
`srf-feathers` is published on [NPM](https://www.npmjs.com/package/srf-feathers). A github workflow is used to auto-publish on NPM when the version number in `package.json` is increased on the master branch.
|
|
48
46
|
|
|
49
|
-
|
|
47
|
+
In case this fails, publish via `npm publish` (you must be logged into npm in the CLI).
|
|
50
48
|
|
|
51
49
|
### Generating New Components
|
|
52
50
|
|
|
53
|
-
|
|
51
|
+
There is a handy NodeJS util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:
|
|
54
52
|
|
|
55
53
|
```
|
|
56
54
|
npm run generate YourComponentName
|
|
@@ -70,231 +68,33 @@ This will generate:
|
|
|
70
68
|
|
|
71
69
|
The default templates for each file can be modified under `util/templates`.
|
|
72
70
|
|
|
73
|
-
Don't forget to add the component to your `index.ts` exports if you want the library to export the component
|
|
74
|
-
|
|
75
|
-
### Installing Component Library Locally
|
|
76
|
-
|
|
77
|
-
Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:
|
|
78
|
-
|
|
79
|
-
```
|
|
80
|
-
npm i --save ../react-component-library
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
which will install the local component library as a dependency in `test-app`. It'll then appear as a dependency in `package.json` like:
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
...
|
|
87
|
-
"dependencies": {
|
|
88
|
-
...
|
|
89
|
-
"react-component-library": "file:../react-component-library",
|
|
90
|
-
...
|
|
91
|
-
},
|
|
92
|
-
...
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
Your components can then be imported and used in that project.
|
|
96
|
-
|
|
97
|
-
**NOTE**: After installing the component library locally, you may run into:
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
|
|
101
|
-
|
|
102
|
-
You might have mismatching versions of React and the renderer (such as React DOM)
|
|
103
|
-
You might be breaking the Rules of Hooks
|
|
104
|
-
You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
This is the most commonly encountered problem people face when installing the library locally. This is most likely due to the third reason: `You might have more than one copy of React in the app`.
|
|
108
|
-
|
|
109
|
-
Normally when a library is published, dev dependencies are excluded. However, when the library is symlinked, all local dev depdendencies are persisted in the libraries `node_modules` (includes React). Your bundler may see two versions of React, one in the consuming app and one in the symlinked library. The solution is to have the component library use the React version in the consuming app. So from your component library folder, run:
|
|
110
|
-
|
|
111
|
-
```
|
|
112
|
-
npm link ../test-app/node_modules/react
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
**OR**, if you are using Webpack in app you can follow [this GitHub comment](https://github.com/facebook/react/issues/13991#issuecomment-435587809).
|
|
116
|
-
|
|
117
|
-
Read more about this issue [here](https://reactjs.org/warnings/invalid-hook-call-warning.html).
|
|
118
|
-
|
|
119
|
-
## Publishing
|
|
120
|
-
|
|
121
|
-
### Hosting via NPM
|
|
122
|
-
|
|
123
|
-
First, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)
|
|
124
|
-
|
|
125
|
-
Then update the `name` field in `package.json` to reflect your NPM package name in your private or public NPM registry. Then run:
|
|
126
|
-
|
|
127
|
-
```
|
|
128
|
-
npm publish
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
The `"prepublishOnly": "npm run build"` script in `package.json` will execute before publish occurs, ensuring the `build/` directory and the compiled component library exist.
|
|
132
|
-
|
|
133
|
-
### Hosting via GitHub
|
|
134
|
-
|
|
135
|
-
I recommend you host the component library using NPM. However, if you don't want to use NPM, you can use GitHub to host it instead.
|
|
136
|
-
|
|
137
|
-
You'll need to remove `build/` from `.gitignore`, build the component library (`npm run build`), add, commit and push the contents of `build`. [See this branch for an example.](https://github.com/HarveyD/react-component-library/tree/host-via-github)
|
|
138
|
-
|
|
139
|
-
You can then install your library into other projects by running:
|
|
140
|
-
|
|
141
|
-
```
|
|
142
|
-
npm i --save git+https://github.com/HarveyD/react-component-library.git#branch-name
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
OR
|
|
146
|
-
|
|
147
|
-
```
|
|
148
|
-
npm i --save github:harveyd/react-component-library#branch-name
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
## Usage
|
|
152
|
-
|
|
153
|
-
Let's say you created a public NPM package called `harvey-component-library` with the `TestComponent` component created in this repository.
|
|
154
|
-
|
|
155
|
-
Usage of the component (after the library installed as a dependency into another project) will be:
|
|
156
|
-
|
|
157
|
-
```TSX
|
|
158
|
-
import React from "react";
|
|
159
|
-
import { TestComponent } from "harvey-component-library";
|
|
160
|
-
|
|
161
|
-
const App = () => (
|
|
162
|
-
<div className="app-container">
|
|
163
|
-
<h1>Hello I'm consuming the component library</h1>
|
|
164
|
-
<TestComponent theme="primary" />
|
|
165
|
-
</div>
|
|
166
|
-
);
|
|
167
|
-
|
|
168
|
-
export default App;
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
[Check out this Code Sandbox for a live example.](https://codesandbox.io/s/harvey-component-library-example-y2b60?file=/src/App.js)
|
|
172
|
-
|
|
173
|
-
### Using Component Library SASS Variables
|
|
174
|
-
|
|
175
|
-
I've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the `rollup-plugin-copy` NPM package and used it to copy the [`src/typography.scss`](src/typography.scss) and [`variables.scss`](src/variables.scss) into the `build` directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.
|
|
176
|
-
|
|
177
|
-
For example, let's say you installed `harvey-component-library` into your project. To use the exported variables/mixins, in a SASS file you would do the following:
|
|
178
|
-
|
|
179
|
-
```Sass
|
|
180
|
-
@import '~harvey-component-library/build/typography';
|
|
181
|
-
|
|
182
|
-
.example-container {
|
|
183
|
-
@include heading;
|
|
184
|
-
|
|
185
|
-
color: $harvey-white;
|
|
186
|
-
}
|
|
187
|
-
```
|
|
71
|
+
⚠️ **Don't forget to add the component to your `index.ts` exports if you want the library to export the component!**
|
|
188
72
|
|
|
189
73
|
## Additional Help
|
|
190
74
|
|
|
191
|
-
###
|
|
75
|
+
### Install local version of feathers in your project
|
|
192
76
|
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
This is achieved by using the media query: `@media (prefers-color-scheme: dark)` in combination with CSS variables. The colours that change depending on dark mode preference can be found in [`src/variables.scss`](src/variables.scss). Example usage of these variables can be found within [`src/TestComponent/TestComponent.scss`](src/TestComponent/TestComponent.scss).
|
|
196
|
-
|
|
197
|
-
Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details.
|
|
198
|
-
|
|
199
|
-
### Using Alternatives to Sass
|
|
200
|
-
|
|
201
|
-
#### Less or Stylus
|
|
202
|
-
|
|
203
|
-
The Rollup plugin `rollup-plugin-postcss` supports Sass, Less and Stylus:
|
|
204
|
-
|
|
205
|
-
- For Stylus, install stylus: `yarn add stylus --dev`
|
|
206
|
-
- For Less, install less: `yarn add less --dev`
|
|
207
|
-
|
|
208
|
-
You can then remove `node-sass` from your dependencies.
|
|
209
|
-
|
|
210
|
-
#### CSS Modules
|
|
211
|
-
|
|
212
|
-
If you want to use CSS Modules, update `postcss` in `rollup-config.js` to:
|
|
77
|
+
While developing, it is useful to not have to publish every little change to NPM before you can use it in your project.
|
|
78
|
+
For this, it's possible to "install" a local version of srf-feathers in your project with
|
|
213
79
|
|
|
214
80
|
```
|
|
215
|
-
|
|
216
|
-
modules: true
|
|
217
|
-
})
|
|
81
|
+
npm i --save relative/path/to/feathers/repo
|
|
218
82
|
```
|
|
219
83
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
If you want to use [`styled-components`](https://styled-components.com/), the changes required are a bit more involved. As such, I've created a branch where I've got `styled-components` working in this component library, [check it out here](https://github.com/HarveyD/react-component-library/tree/styled-components).
|
|
223
|
-
|
|
224
|
-
### Component Code Splitting
|
|
225
|
-
|
|
226
|
-
Code splitting of your components is not supported by default.
|
|
84
|
+
If, for example, your project's repository is in the same folder you checked out srf-feather, you can run the following command in your project's root folder:
|
|
227
85
|
|
|
228
|
-
[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) to find out how and why you would enable code splitting of your components. In summary, code splitting enables users to import components in isolation like:
|
|
229
|
-
|
|
230
|
-
```
|
|
231
|
-
import TestComponent from 'harvey-component-library/build/TestComponent';
|
|
232
|
-
```
|
|
233
|
-
|
|
234
|
-
This can reduce the bundle size for projects using older (CJS) module formats.
|
|
235
|
-
|
|
236
|
-
You can check out [this branch](https://github.com/HarveyD/react-component-library/tree/code-splitting) or [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) to see what changes are neccesary to implement it.
|
|
237
|
-
|
|
238
|
-
Please note, there's an issue with code splitting and using `rollup-plugin-postcss`. I recommend using `rollup-plugin-sass` instead alongside code splitting.
|
|
239
|
-
|
|
240
|
-
### Supporting Image Imports
|
|
241
|
-
|
|
242
|
-
Add the following library to your component library [@rollup/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image):
|
|
243
|
-
|
|
244
|
-
```
|
|
245
|
-
npm i -D @rollup/plugin-image
|
|
246
|
-
```
|
|
247
|
-
|
|
248
|
-
Then add it to `rollup-config.js`:
|
|
249
|
-
|
|
250
|
-
```
|
|
251
|
-
...
|
|
252
|
-
plugins:[
|
|
253
|
-
...,
|
|
254
|
-
image(),
|
|
255
|
-
...
|
|
256
|
-
]
|
|
257
|
-
...
|
|
258
86
|
```
|
|
259
|
-
|
|
260
|
-
You can then import and render images in your components like:
|
|
261
|
-
|
|
262
|
-
```tsx
|
|
263
|
-
import logo from "./rollup.png";
|
|
264
|
-
|
|
265
|
-
export const ImageComponent = () => (
|
|
266
|
-
<div>
|
|
267
|
-
<img src={logo} />
|
|
268
|
-
</div>
|
|
269
|
-
);
|
|
87
|
+
npm i --save ../feathers
|
|
270
88
|
```
|
|
271
89
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
Add the following library to your component library [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json):
|
|
90
|
+
⚠️ If you've previously installed srf-feathers via NPM, you might have to remove the folder in your `node_modules`.
|
|
275
91
|
|
|
276
|
-
|
|
277
|
-
npm i -D @rollup/plugin-json
|
|
278
|
-
```
|
|
92
|
+
### dev-tools (feathers-dev)
|
|
279
93
|
|
|
280
|
-
|
|
94
|
+
For a smoother experience, a collection of the most used commands has been added to a dev-script in `/bin/feathers-dev`. List the available commands with
|
|
281
95
|
|
|
282
96
|
```
|
|
283
|
-
|
|
284
|
-
plugins:[
|
|
285
|
-
...,
|
|
286
|
-
json(),
|
|
287
|
-
...
|
|
288
|
-
]
|
|
289
|
-
...
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
You can then import and use JSON as ES6 Modules:
|
|
293
|
-
|
|
294
|
-
```tsx
|
|
295
|
-
import data from "./some-data.json";
|
|
296
|
-
|
|
297
|
-
export const JsonDataComponent = () => <div>{data.description}</div>;
|
|
97
|
+
./bin/feathers-dev help
|
|
298
98
|
```
|
|
299
99
|
|
|
300
|
-
|
|
100
|
+
ℹ️ Pro tip: add `alias feathers-dev='path/to/feathers/bin/feathers-dev'` to your `~/.zshrc` or equivalent to be able to type `feathers-dev`!
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
==Release notes SRG SSR Type VF==
|
|
2
|
+
|
|
3
|
+
Compiler of release notes: Dalton Maag
|
|
4
|
+
Designer: Dalton Maag
|
|
5
|
+
Designer URL: daltonmaag.com
|
|
6
|
+
|
|
7
|
+
Release date: 2020-11-18
|
|
8
|
+
|
|
9
|
+
Change log:
|
|
10
|
+
- v2.000: This is the first release of the VF.
|
|
11
|
+
|
|
12
|
+
Basic information
|
|
13
|
+
1 Font name: SRG SSR Type VF
|
|
14
|
+
2 TrueType Version record: 2.000
|
|
15
|
+
3 Character Set: Western European Latin
|
|
16
|
+
4 Supported scripts: Latin
|
|
17
|
+
5 Number of glyphs: 325
|
|
18
|
+
6 Usage: Text and Display
|
|
19
|
+
7 Number of axes: 1
|
|
20
|
+
8 Axes:
|
|
21
|
+
- Weight
|
|
22
|
+
tag: wght
|
|
23
|
+
range: 300 (Light) - 800 (Heavy)
|
|
24
|
+
5 Named instances per style:
|
|
25
|
+
- Text: Text Light, Text Regular, Text Medium, Text Bold, Text Heavy.
|
|
26
|
+
- Display: Display Light, Display Regular, Display Medium, Display Bold, Display Heavy
|
|
27
|
+
|
|
28
|
+
Technology
|
|
29
|
+
1 File formats: The files have been delivered as variable fonts in the TrueType-based OpenType format, for use in all major Operating Systems, TTF for use in apps, and in web font format: WOFF2.
|
|
30
|
+
2 Embedding settings: Editing of the document is allowed (editable mode); subsetting is allowed.
|
|
31
|
+
3 Screen optimization information: No screen optimization.
|
|
32
|
+
4 Default numerals: Proportional. Tabular figures accessible via OpenType features.
|
|
33
|
+
|
|
34
|
+
Other Information
|
|
35
|
+
The fonts contain the following OpenType Stylistic Sets:
|
|
36
|
+
- ss01: alternates K, P, R, Thorn
|
|
37
|
+
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ButtonProps } from "./Button.types";
|
|
3
|
+
import { TooltipProps } from "../Tooltip/Tooltip.types";
|
|
4
|
+
import "./Button.scss";
|
|
5
|
+
import "./../Tooltip/Tooltip.scss";
|
|
6
|
+
export declare const ButtonModifiers: readonly ["primary", "save", "publish", "retire", "danger", "favorite", "white", "unobtrusive", "fullwidth", "margin_top", "margin_bottom", "left_align", "icon_rotated", "invisible_content", "no_outline", "extra_big", "big", "small", "extra_tiny", "tiny", "hidden", "icon_right", "icon_sticks_to_border", "spread_content", "bold", "selected", "uppercase", "link", "circle"];
|
|
7
|
+
export declare type ButtonModifiersType = typeof ButtonModifiers[number];
|
|
8
|
+
declare const Button: React.FC<ButtonProps>;
|
|
9
|
+
export declare const ButtonTooltip: React.FC<TooltipProps>;
|
|
10
|
+
export default Button;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { MouseEventHandler, ReactElement } from "react";
|
|
2
|
+
import { ButtonModifiersType } from "./Button";
|
|
3
|
+
import { IconProps } from "../Icon/Icon.types";
|
|
4
|
+
import { TooltipProps } from "../Tooltip/Tooltip.types";
|
|
5
|
+
export interface ButtonProps {
|
|
6
|
+
modifier?: ButtonModifiersType | Array<ButtonModifiersType>;
|
|
7
|
+
children?: JSX.Element;
|
|
8
|
+
text?: string;
|
|
9
|
+
title?: string;
|
|
10
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
11
|
+
icon?: ReactElement<IconProps>;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
tabIndex?: number;
|
|
14
|
+
dataId?: string;
|
|
15
|
+
dataCy?: string;
|
|
16
|
+
tooltip?: ReactElement<TooltipProps>;
|
|
17
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { IconProps } from "./Icon.types";
|
|
3
|
+
import "./Icon.scss";
|
|
4
|
+
export declare const IconModifiers: readonly ["success", "danger", "info", "branding", "small", "tiny", "white", "rotatable", "rotated-180"];
|
|
5
|
+
export declare type IconModifiersType = typeof IconModifiers[number];
|
|
6
|
+
declare const Icon: React.FC<IconProps>;
|
|
7
|
+
export declare const UpdateIcon: React.FC<IconProps>;
|
|
8
|
+
export declare const ExclamationMarkIcon: React.FC<IconProps>;
|
|
9
|
+
export declare const QuestionMarkIcon: React.FC<IconProps>;
|
|
10
|
+
export declare const ErrorIcon: React.FC<IconProps>;
|
|
11
|
+
export declare const ChecklistFailedIcon: React.FC<IconProps>;
|
|
12
|
+
export declare const ChecklistPassedIcon: React.FC<IconProps>;
|
|
13
|
+
export declare const CloseIcon: React.FC<IconProps>;
|
|
14
|
+
export declare const CopyIcon: React.FC<IconProps>;
|
|
15
|
+
export declare const GlobiLogoIcon: React.FC<IconProps>;
|
|
16
|
+
export declare const HtmlEmbedIcon: React.FC<IconProps>;
|
|
17
|
+
export declare const LivetickerIcon: React.FC<IconProps>;
|
|
18
|
+
export declare const ImageIcon: React.FC<IconProps>;
|
|
19
|
+
export declare const LinkboxIcon: React.FC<IconProps>;
|
|
20
|
+
export declare const PlusIcon: React.FC<IconProps>;
|
|
21
|
+
export declare const PublishIcon: React.FC<IconProps>;
|
|
22
|
+
export declare const PublishAndLeaveIcon: React.FC<IconProps>;
|
|
23
|
+
export declare const SaveAndLeaveIcon: React.FC<IconProps>;
|
|
24
|
+
export declare const SaveIcon: React.FC<IconProps>;
|
|
25
|
+
export declare const RetireIcon: React.FC<IconProps>;
|
|
26
|
+
export declare const SchorschLogoIcon: React.FC<IconProps>;
|
|
27
|
+
export declare const SearchIcon: React.FC<IconProps>;
|
|
28
|
+
export declare const SettingsIcon: React.FC<IconProps>;
|
|
29
|
+
export declare const TextboxIcon: React.FC<IconProps>;
|
|
30
|
+
export declare const CheckIcon: React.FC<IconProps>;
|
|
31
|
+
export declare const DatawrapperIcon: React.FC<IconProps>;
|
|
32
|
+
export declare const ImageGalleryIcon: React.FC<IconProps>;
|
|
33
|
+
export declare const VideoGalleryIcon: React.FC<IconProps>;
|
|
34
|
+
export declare const AudioGalleryIcon: React.FC<IconProps>;
|
|
35
|
+
export declare const PeopleIcon: React.FC<IconProps>;
|
|
36
|
+
export declare const TwitterIcon: React.FC<IconProps>;
|
|
37
|
+
export declare const EdithIcon: React.FC<IconProps>;
|
|
38
|
+
export declare const CaretIcon: React.FC<IconProps>;
|
|
39
|
+
export declare const SpinnerIcon: React.FC<IconProps>;
|
|
40
|
+
export declare const CheckmarkIcon: React.FC<IconProps>;
|
|
41
|
+
export declare const TrashcanIcon: React.FC<IconProps>;
|
|
42
|
+
export declare const DangerIcon: React.FC<IconProps>;
|
|
43
|
+
export declare const WarningIcon: React.FC<IconProps>;
|
|
44
|
+
export declare const SuccessIcon: React.FC<IconProps>;
|
|
45
|
+
export declare const EditArticleIcon: React.FC<IconProps>;
|
|
46
|
+
export declare const EditTickerItemIcon: React.FC<IconProps>;
|
|
47
|
+
export declare const RevertIcon: React.FC<IconProps>;
|
|
48
|
+
export declare const ForbiddenIcon: React.FC<IconProps>;
|
|
49
|
+
export declare const PlusCircleIcon: React.FC<IconProps>;
|
|
50
|
+
export declare const PreviewIcon: React.FC<IconProps>;
|
|
51
|
+
export declare const PodcastIcon: React.FC<IconProps>;
|
|
52
|
+
export declare const FocusIcon: React.FC<IconProps>;
|
|
53
|
+
export declare const RotateBackIcon: React.FC<IconProps>;
|
|
54
|
+
export declare const RotateForwardIcon: React.FC<IconProps>;
|
|
55
|
+
export declare const ZoomInIcon: React.FC<IconProps>;
|
|
56
|
+
export declare const ZoomOutIcon: React.FC<IconProps>;
|
|
57
|
+
export declare const DropAddIcon: React.FC<IconProps>;
|
|
58
|
+
export declare const DropDownIcon: React.FC<IconProps>;
|
|
59
|
+
export declare const DropUpIcon: React.FC<IconProps>;
|
|
60
|
+
export declare const DropDeleteIcon: React.FC<IconProps>;
|
|
61
|
+
export declare const AudioIcon: React.FC<IconProps>;
|
|
62
|
+
export declare const VideoIcon: React.FC<IconProps>;
|
|
63
|
+
export declare const MeteoMapIcon: React.FC<IconProps>;
|
|
64
|
+
export declare const VideoeditorIcon: React.FC<IconProps>;
|
|
65
|
+
export declare const AudioeditorIcon: React.FC<IconProps>;
|
|
66
|
+
export declare const ArticleIcon: React.FC<IconProps>;
|
|
67
|
+
export declare const AudioFeedIcon: React.FC<IconProps>;
|
|
68
|
+
export declare const FeedIcon: React.FC<IconProps>;
|
|
69
|
+
export declare const TeaserIcon: React.FC<IconProps>;
|
|
70
|
+
export declare const VideoFeedIcon: React.FC<IconProps>;
|
|
71
|
+
export declare const EmptyIcon: React.FC<IconProps>;
|
|
72
|
+
export declare const OpinionIcon: React.FC<IconProps>;
|
|
73
|
+
export declare const LongformIcon: React.FC<IconProps>;
|
|
74
|
+
export declare const LiveIcon: React.FC<IconProps>;
|
|
75
|
+
export declare const TVIcon: React.FC<IconProps>;
|
|
76
|
+
export declare const FacebookIcon: React.FC<IconProps>;
|
|
77
|
+
export declare const TimeIcon: React.FC<IconProps>;
|
|
78
|
+
export declare const InvisibleIcon: React.FC<IconProps>;
|
|
79
|
+
export declare const HeadingIcon: React.FC<IconProps>;
|
|
80
|
+
export declare const BoldIcon: React.FC<IconProps>;
|
|
81
|
+
export declare const ItalicIcon: React.FC<IconProps>;
|
|
82
|
+
export declare const UnorderedListIcon: React.FC<IconProps>;
|
|
83
|
+
export declare const OrderedListIcon: React.FC<IconProps>;
|
|
84
|
+
export declare const LinkIcon: React.FC<IconProps>;
|
|
85
|
+
export declare const UnlinkIcon: React.FC<IconProps>;
|
|
86
|
+
export declare const CommentIcon: React.FC<IconProps>;
|
|
87
|
+
export declare const PolisMapIcon: React.FC<IconProps>;
|
|
88
|
+
export declare const FederalVotesIcon: React.FC<IconProps>;
|
|
89
|
+
export declare const CHMapIcon: React.FC<IconProps>;
|
|
90
|
+
export declare const CropIcon: React.FC<IconProps>;
|
|
91
|
+
export declare const PushIcon: React.FC<IconProps>;
|
|
92
|
+
export declare const MaterialBoxIcon: React.FC<IconProps>;
|
|
93
|
+
export declare const QuoteIcon: React.FC<IconProps>;
|
|
94
|
+
export declare const ExternalLinkIcon: React.FC<IconProps>;
|
|
95
|
+
export declare const ImportImageIcon: React.FC<IconProps>;
|
|
96
|
+
export declare const ArrowDownIcon: React.FC<IconProps>;
|
|
97
|
+
export declare const ArrowUpIcon: React.FC<IconProps>;
|
|
98
|
+
export declare const RawHTMLIcon: React.FC<IconProps>;
|
|
99
|
+
export declare const FormIcon: React.FC<IconProps>;
|
|
100
|
+
export declare const NewsGraphicIcon: React.FC<IconProps>;
|
|
101
|
+
export declare const PollIcon: React.FC<IconProps>;
|
|
102
|
+
export declare const TableIcon: React.FC<IconProps>;
|
|
103
|
+
export declare const AddRowIcon: React.FC<IconProps>;
|
|
104
|
+
export declare const DeleteRowIcon: React.FC<IconProps>;
|
|
105
|
+
export declare const AddColumnIcon: React.FC<IconProps>;
|
|
106
|
+
export declare const DeleteColumnIcon: React.FC<IconProps>;
|
|
107
|
+
export declare const TableHeadIcon: React.FC<IconProps>;
|
|
108
|
+
export declare const TableWidthIcon: React.FC<IconProps>;
|
|
109
|
+
export declare const InstagramIcon: React.FC<IconProps>;
|
|
110
|
+
export default Icon;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TooltipProps } from "./Tooltip.types";
|
|
3
|
+
import "./Tooltip.scss";
|
|
4
|
+
export declare const TooltipModifiers: readonly ["always_open", "space_filling", "no_min_width", "show_delayed", "validation", "max_parent_width", "no_word_wrap", "no_border", "no_margin", "clickable"];
|
|
5
|
+
export declare type TooltipModifiersType = typeof TooltipModifiers[number];
|
|
6
|
+
export declare const TooltipDirections: readonly ["up", "right", "down", "left", "down-edge-left", "down-edge-right"];
|
|
7
|
+
export declare type TooltipDirectionsType = typeof TooltipDirections[number];
|
|
8
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
9
|
+
export default Tooltip;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TooltipDirectionsType, TooltipModifiersType } from "./Tooltip";
|
|
3
|
+
export interface TooltipProps {
|
|
4
|
+
modifier?: TooltipModifiersType | Array<TooltipModifiersType>;
|
|
5
|
+
text?: string | React.ReactNode;
|
|
6
|
+
direction?: TooltipDirectionsType;
|
|
7
|
+
content: string;
|
|
8
|
+
}
|
package/build/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { AddColumnIcon, AddRowIcon, ArrowDownIcon, ArrowUpIcon, ArticleIcon, AudioFeedIcon, AudioGalleryIcon, AudioIcon, AudioeditorIcon, BoldIcon, CHMapIcon, CaretIcon, CheckIcon, ChecklistFailedIcon, ChecklistPassedIcon, CheckmarkIcon, CloseIcon, CommentIcon, CopyIcon, CropIcon, DangerIcon, DatawrapperIcon, DeleteColumnIcon, DeleteRowIcon, DropAddIcon, DropDeleteIcon, DropDownIcon, DropUpIcon, EditArticleIcon, EditTickerItemIcon, EdithIcon, EmptyIcon, ErrorIcon, ExclamationMarkIcon, ExternalLinkIcon, FacebookIcon, FederalVotesIcon, FeedIcon, FocusIcon, ForbiddenIcon, FormIcon, GlobiLogoIcon, HeadingIcon, HtmlEmbedIcon, ImageGalleryIcon, ImageIcon, ImportImageIcon, InstagramIcon, InvisibleIcon, ItalicIcon, LinkIcon, LinkboxIcon, LiveIcon, LivetickerIcon, LongformIcon, MaterialBoxIcon, MeteoMapIcon, NewsGraphicIcon, OpinionIcon, OrderedListIcon, PeopleIcon, PlusCircleIcon, PlusIcon, PodcastIcon, PolisMapIcon, PollIcon, PreviewIcon, PublishAndLeaveIcon, PublishIcon, PushIcon, QuestionMarkIcon, QuoteIcon, RawHTMLIcon, RetireIcon, RevertIcon, RotateBackIcon, RotateForwardIcon, SaveAndLeaveIcon, SaveIcon, SchorschLogoIcon, SearchIcon, SettingsIcon, SpinnerIcon, SuccessIcon, TVIcon, TableHeadIcon, TableIcon, TableWidthIcon, TeaserIcon, TextboxIcon, TimeIcon, TrashcanIcon, TwitterIcon, UnlinkIcon, UnorderedListIcon, UpdateIcon, VideoFeedIcon, VideoGalleryIcon, VideoIcon, VideoeditorIcon, WarningIcon, ZoomInIcon, ZoomOutIcon } from "./elements/Icon/Icon";
|
|
2
|
+
import Button, { ButtonTooltip } from "./elements/Button/Button";
|
|
3
|
+
import Tooltip from "./elements/Tooltip/Tooltip";
|
|
4
|
+
export { AddColumnIcon, AddRowIcon, ArrowDownIcon, ArrowUpIcon, ArticleIcon, AudioFeedIcon, AudioGalleryIcon, AudioIcon, AudioeditorIcon, BoldIcon, Button, ButtonTooltip, CHMapIcon, CaretIcon, CheckIcon, ChecklistFailedIcon, ChecklistPassedIcon, CheckmarkIcon, CloseIcon, CommentIcon, CopyIcon, CropIcon, DangerIcon, DatawrapperIcon, DeleteColumnIcon, DeleteRowIcon, DropAddIcon, DropDeleteIcon, DropDownIcon, DropUpIcon, EditArticleIcon, EditTickerItemIcon, EdithIcon, EmptyIcon, ErrorIcon, ExclamationMarkIcon, ExternalLinkIcon, FacebookIcon, FederalVotesIcon, FeedIcon, FocusIcon, ForbiddenIcon, FormIcon, GlobiLogoIcon, HeadingIcon, HtmlEmbedIcon, ImageGalleryIcon, ImageIcon, ImportImageIcon, InstagramIcon, InvisibleIcon, ItalicIcon, LinkIcon, LinkboxIcon, LiveIcon, LivetickerIcon, LongformIcon, MaterialBoxIcon, MeteoMapIcon, NewsGraphicIcon, OpinionIcon, OrderedListIcon, PeopleIcon, PlusCircleIcon, PlusIcon, PodcastIcon, PolisMapIcon, PollIcon, PreviewIcon, PublishAndLeaveIcon, PublishIcon, PushIcon, QuestionMarkIcon, QuoteIcon, RawHTMLIcon, RetireIcon, RevertIcon, RotateBackIcon, RotateForwardIcon, SaveAndLeaveIcon, SaveIcon, SchorschLogoIcon, SearchIcon, SettingsIcon, SpinnerIcon, SuccessIcon, TVIcon, TableHeadIcon, TableIcon, TableWidthIcon, TeaserIcon, TextboxIcon, TimeIcon, Tooltip, TrashcanIcon, TwitterIcon, UnlinkIcon, UnorderedListIcon, UpdateIcon, VideoFeedIcon, VideoGalleryIcon, VideoIcon, VideoeditorIcon, WarningIcon, ZoomInIcon, ZoomOutIcon, };
|