2.3.0 • Published 4 years ago
join-web-components-test v2.3.0
join-components
Classic integration
<script type="text/javascript" src="https://unpkg.com/join-web-components@2.2.0"></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-story-container team-id="join-demo" alias="join-stories-default-all" type="iframe" height="700"></join-list-container>
React integration example
Install the package
yarn add join-web-components
ornpm install join-web-components
Find out the codesandbox.io
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) |
type | enum: { 'iframe', 'default' } | 'default' | It can be either an immersive iframe or a classic container (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' | Border colors (Hexa, rgba...) |
custom-border-gradient | string | Add a custom gradient to the border of the container item | |
height | number | 100 | Width is being calculate based on the height |
spacing | number | The space between element | |
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) Warning : padding need to be configure through verticalPadding and horizontalPadding. Properties should be write as |
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
<join-list-container team-id="join-demo"
alias="join-stories-default-all"
show-labels
></join-list-container>
Containers With customized Label
<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-story-component
Documentation coming soon..
2.3.0
4 years ago