# join-web-components

> Web components' library for Join Stories built from https://join-stories.com

Latest version **2.5.8** (published 2020-10-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install join-web-components
pnpm add join-web-components
yarn add join-web-components
bun add join-web-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.5.8 |
| Published | 2020-10-29 |
| First published | 2020-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=7.8.0 |
| Dependencies | 0 |
| Unpacked size | 59 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | llccrr |
| Maintainers | llccrr |

## Links

- npm: https://www.npmjs.com/package/join-web-components
- npm.io page: https://npm.io/package/join-web-components

## Recent versions

- 2.5.8 (latest) — 2020-10-29
- 2.5.7 — 2020-10-26
- 2.5.6 — 2020-10-26
- 2.5.5 — 2020-09-30
- 2.5.4 — 2020-09-30
- 2.5.3 — 2020-09-04
- 2.5.2 — 2020-08-27
- 2.5.1 — 2020-08-26
- 2.4.0 — 2020-07-29
- 2.3.0 — 2020-07-29
- 2.2.0 — 2020-07-23
- 2.1.0 — 2020-07-23
- 2.0.1 — 2020-06-09
- 2.0.0 — 2020-06-08
- 1.1.1 — 2020-03-10
- … 6 more at https://npm.io/package/join-web-components/versions

## README

# join-components  

[![NPM](https://img.shields.io/npm/v/join-web-components.svg)](https://www.npmjs.com/package/join-web-components)

### Classic integration
`<script type="text/javascript" src="https://unpkg.com/join-web-components@2.X.X"></script>`

And then you can directly use our web components in your html files

`<join-list-container team-id="join-demo" alias="join-stories-default-all" ></join-list-container>`

or

`<join-iframe team-id="join-demo" alias="join-stories-default-all" height="700"></join-iframe>`

### React integration example
Install the package
- `yarn add join-web-components` or `npm install join-web-components`

Find out the [codesandbox.io](https://codesandbox.io/s/join-web-components-react-nhrds)

## join-list-component  
| Attribute             |  Type         | Default       |  Description |  
| :-------------------- | :---------------------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------------------------------- |  
| team-id               | string                                                |                               | Id of the team to match the associated stories from the Studio                                                    |  
| alias                 | string                                                |                               | Alias of the container to match the associated stories from the Studio                                            |  
| shape                 | enum: { 'round', 'square', 'rounded-square', 'card' } | 'round'                       | Different shape of container item ([see demo](https://demo.teamjoin.fr/ "see demo"))                              |  
| justify-content       | enum: { 'flex-start', 'center', 'flex-end' }          | 'center'                      | Flex alignement applied on the container                                                                          |  
| limit                 | number                                                | 10                            | Number of stories fetched                                                                                         |  
| sort-by               | enum: { 'asc', 'desc', 'ordered' }                    | 'desc'                        | Either you can sort by last edition date (asc or desc) either by an order fixed from the Studio                   |
| border-colors         | array                                                 | [ 'red', 'orange', 'yellow' ] | Array of colors (Hexa, rgba...) used to define the color gradient of the outer border (minimum 2 colors)          |  
| height                | number                                                | 100                           | Unit use to calculate the size of the bubble size (bubbles height and width are proportional to this value but not equal) |  
| spacing               | number                                                |                               | The space in px between a bubble and the edge of the container. Distance between 2 bubbles will be twice this value. |  
| show-labels           | boolean                                               | false                         | Option to display the labels under the story (You need to configure the label in the studio)                      |  
| labels-style          | object                                                | {}                            | Add css properties to add to your label. ([see demo](https://codesandbox.io/s/join-web-components-uqf3j)) Warning : padding need to be configure through verticalPadding and horizontalPadding. Properties should be write in CamelCase. |  
| labels-line-count     | number                                                | 1                             | Number of lines the label can be written on |  
| inner-color           | string                                                | 'white'                       | The color of the inner border |  
| outer-border-size     | number                                                | 2                             | Size of the outer border |  
| inner-border-size     | number                                                | 2                             | size of the inner border |  
  
### Integration Examples

#### Containers With Default Labels

```html
<join-list-container  team-id="join-demo"
                      alias="join-stories-default-all"
                      show-labels
></join-list-container>
```

#### Containers With customized Label

```html
<join-list-container 
                    team-id="join-demo"
                    alias="join-stories-default-all"
                    spacing="25"
                    show-labels
                    labels-style='{
                        "fontSize" : 11.2,
                        "fontWeight":550,
                        "backgroundColor": "white",
                        "fontFamily": "museo-sans, sans-serif",
                        "verticalPadding":3, "horizontalPadding":10,
                        "textTransform": "uppercase",
                        "textDecoration": "none"
                    }'
                    sort-by="ordered"
    ></join-list-container>
```

## join-iframe  

| Attribute             |  Type         | Default       |  Description |  
| :-------------------- | :---------------------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------------------------------- |  
| team-id               | string                                                |                               | id of the team to match the associated stories from the Studio                                                    |  
| alias                 | string                                                |                               | Alias of the container to match the associated stories from the Studio                                            |  
| story-info            | string                                                |                               | The URL of the story to display if there is no team-id and alias                                                  |  
| mobile-break-point    | number                                                | 1024                          | Screen width where the iframe switch between mobile and desktop mode                                              |  
| border-colors         | array                                                 | [ 'red', 'orange', 'yellow' ] | Array of colors (Hexa, rgba...) used to define the color gradient of the outer border (minimum 2 colors)          |  
| height                | number                                                | 100                           | Unit use to calculate the size of the card size (card height and width is proportional to this value but not equal)                                                                     |  
| inner-color           | string                                                | 'white'                       | The color of the inner border |  
| outer-border-size     | number                                                | 2                             | Size of the outer border |  
| inner-border-size     | number                                                | 0                             | size of the inner border |  
| disable-history       | boolean                                               | false                         | Option to disable the history manipulation from the widget. Must be activated if you are have troubling behaviour when closing the story in mobile |  
| inactive-scale        | number                                                | 0.9                           | Option to change the scale of the iframe while inactive on mobile |  
| onStateChanged        | function                                              | null                          | Event to use to get the state of the mobile iframe. More information [after](#onstatechanged-callback). |  

#### onStateChanged Callback

`onStateChanged` is a callback with 2 arguments : 
- `state` : A `string` defining which state as been update.
- `value` : The value of the new state.

To learn how to use a web-component callback, see [this link](https://stackoverflow.com/questions/53265266/is-it-possible-to-pass-a-function-from-html-into-a-lit-element#answer-53268095).

#####Possible state

| State    | Values          | Description |
| :------- | :-------------- | :---------- |
| `active` | `true`, `false` |  Fired with value `true` when user clicks on iframe, and `false` when he looses the focus. |

### Examples

#### Iframe with default parameters
```html
<div style="display: flex;width: 100%; justify-content: center;">
      <join-iframe height="500" team-id="join-demo" alias="join-stories-default-all"></join-iframe>
</div>
```

#### Iframe with url
```html
<join-iframe height="500" story-info="https://demo.join-stories.com/naturalizer-UkSVfXhMT/"></join-iframe>
```

[]: #-on-state-changed

---
_Source: https://npm.io/package/join-web-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._