Card Badge V2
v0.0.0
Card Badge Revision
- Applying styles in accordance with BEM conventions
- Modified the names of data attributes to support broader application
Currently to support badges on story cards. But they should work on most cards with an image on top.
The request sent for bookmarking or unbookmarking a card expects a json response as following:
{success: true} or {success: false}
The request method can be passed from the data-method attribute. If the attribute is left empty, the request method falls back to 'POST'.
Required data- attributes:
- One or both:
data-select-endpointordata-unselect-endpointdepending on the use case
Optional data- attributes:
data-ajax-data(data as json to give to both ajax calls. Replacesdata-content-idanddata-bookmark-type)
Example:
data-ajax-data='{
"content-id":"20",
"bookmark-type":"2"
}'
data-callback(needs to be a global function)data-fail-callback(needs to be a global function)data-method(falls back to 'POST' if empty)
<!-- Card Badge -->
<div class="vi-card-badge" data-ajax-data='{
"content-id":"20",
"bookmark-type":"2"
}' data-callback="callbackFunc" data-fail-callback="failCallbackFunc" data-method="GET" data-select-endpoint="https://mocki.io/v1/a5ab44bf-b081-4c3c-ade0-ed3fccef7314" data-unselect-endpoint="https://mocki.io/v1/a5ab44bf-b081-4c3c-ade0-ed3fccef7314">
<!-- Button type: solid-icon -->
<button aria-label="Bookmark" type="button" class="vi-card-badge__button vi-card-badge__button--favourites vi-btn-solid-icon vi-btn-solid-icon--sm vi-btn"><!-- Icon heart-line -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="heart-line"><path d="M0,3.74352941 C0,1.96322328 1.41383763,0.52 3.15789474,0.52 C4.40848604,0.52 5.48928735,1.26206668 6.00077696,2.33837454 C6.51071265,1.26206668 7.59151396,0.52 8.84210526,0.52 C10.5861624,0.52 12,1.96322328 12,3.74352941 C12,4.08491696 11.9480117,4.41390963 11.8516759,4.72270785 C11.3165177,6.57146789 9.32126984,8.82424322 5.86666667,11.48 C2.07407407,8.56710789 0.120314254,6.05393918 0.00538720539,3.94049385 C0.00189784797,3.8735304 0,3.80875615 0,3.74352941 Z M8.84210526,1.54078431 C8.00646612,1.54078431 7.25796288,2.02942155 6.90102138,2.78280858 L6.00214613,4.68004096 L5.1010529,2.78390522 C4.74256049,2.02954347 3.99357386,1.54078431 3.15789474,1.54078431 C1.96612238,1.54078431 1,2.52698689 1,3.74352941 C1,3.78830279 1.00129513,3.83483449 1.00385012,3.88391799 C1.08891304,5.44817838 2.57023517,7.49003045 5.50900691,9.90349684 L5.867,10.1929522 L5.92675746,10.1463225 C8.7060945,7.92665773 10.3425585,6.04881647 10.8457887,4.58055496 L10.8988251,4.41296169 C10.96559,4.1989514 11,3.97423131 11,3.74352941 C11,2.52698689 10.0338776,1.54078431 8.84210526,1.54078431 Z"></path></svg>
<!-- Icon heart-solid -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="heart-solid"><path d="M8.61003896,0.52 L8.40418286,0.526195077 C7.51760208,0.579668119 6.70596125,0.976472267 6.12251726,1.60627211 L5.99989786,1.74549025 L5.877261,1.60630215 C5.24898503,0.928042759 4.35599548,0.52 3.38975675,0.52 C1.59163008,0.52 0.109101569,1.92385346 0.00553903444,3.71122241 L0,3.89581602 C-0.000198098571,5.98247916 1.76590191,8.32728374 5.25118093,11.0092984 L5.8775831,11.483404 L6.17210654,11.2615966 C9.44431738,8.79727481 11.3404021,6.69246567 11.8553938,4.89193317 C11.9501022,4.5816737 12,4.24888702 12,3.90996104 C12,2.03773726 10.4822627,0.52 8.61003896,0.52 Z"></path></svg></button>
</div>
<!-- Card Badge -->
<div class="vi-card-badge">
<!-- Button type: solid-icon -->
<span aria-label="Locked" class="vi-card-badge__button vi-card-badge__button--locked vi-btn-solid-icon vi-btn-solid-icon--sm vi-btn"><!-- Icon lock-closed -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="lock-closed"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M6,1 C7.65685425,1 9,2.57959562 9,4 L9,5 L10,5 L10,11 L2,11 L2,5 L3,5 L3,4 L3.00509269,3.82372721 C3.09633912,2.24891996 4.40231912,1 6,1 Z M9,6 L3,6 L3,10 L9,10 L9,6 Z M6,2 C4.93934251,2 4.06443602,2.82847683 4.00341831,3.88157153 L4,4 L4,5 L8,5 L8,4 C8,3.08240496 7.1024373,2.09426822 6.13812349,2.00633346 L6,2 Z"></path><path fill-rule="nonzero" d="M6,7 C6.27614237,7 6.5,7.22385763 6.5,7.5 L6.5,8.5 C6.5,8.77614237 6.27614237,9 6,9 C5.72385763,9 5.5,8.77614237 5.5,8.5 L5.5,7.5 C5.5,7.22385763 5.72385763,7 6,7 Z"></path></g></svg></span>
</div>