join-web-components-test

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 or npm 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..