@rikstv/shared-components 0.6.4 → 0.6.5

package/dist/toggle/RadioToggle.css

@@ -1 +1 @@
-.rds-field-set{border:none;margin:0;padding:0;display:flex}.rds-field-set__legend{margin-bottom:var(--rds-spacing--8)}.rds-radio-toggle{padding:0;background-color:var(--rds-foreground-overlay-soft);color:#fff;margin:0 var(--rds-spacing--8);display:block;max-width:25ch;min-width:7ch;overflow:hidden;border-radius:var(--rds-roundness--button)}.rds-radio-toggle:hover{background-color:var(--rds-background-tertiary)}.rds-radio-toggle:active{background-color:var(--rds-background-overlay-soft);color:#fff}.rds-radio-toggle__label{width:100%;display:grid;place-items:center;transition:125ms ease background-color;padding:.78125rem var(--rds-spacing--24);box-sizing:border-box;user-select:none}.rds-radio-toggle__input{position:absolute;opacity:0}.rds-radio-toggle__input:checked+.rds-radio-toggle__label{background-color:var(--rds-foreground-tertiary)}.rds-radio-toggle__input:active+.rds-radio-toggle__label{background-color:var(--rds-foreground-overlay-soft)}.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus button::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-radio-toggle:focus-within::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus-within button::-moz-focus-inner,.rds-radio-toggle:focus-within [type=button]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus-within input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus-within{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}
+.rds-button__shared,.rds-radio-toggle{--common-button--primary-color: var(--rds-button-primary-fg);--common-button--primary-bg: var(--rds-accent-color);--common-button--primary-hover-bg: var(--rds-accent-hover);--common-button--primary-pressed-bg: var(--rds-accent-color);--common-button--secondary-border-color: var(--rds-foreground-primary);--common-button--secondary-color: var(--rds-foreground-primary);--common-button--secondary-bg: var(--rds-background-primary);--common-button--secondary-hover-color: var(--rds-background-primary);--common-button--secondary-hover-bg: var(--rds-foreground-primary);--common-button--secondary-pressed-color: var(--rds-button-secondary-pressed-fg);--common-button--secondary-pressed-bg: var(--rds-button-secondary-pressed-bg);--common-button--tertiary-bg: var(--rds-button-tertirary-bg);--common-button--tertiary-color: var(--rds-foreground-primary);--common-button--tertiary-hover-bg: var(--rds-button-tertiary-hover-bg);--common-button--tertiary-hover-color: var(--rds-foreground-primary);--common-button--tertiary-pressed-bg: var(--rds-background-tertiary);--common-button--tertiary-pressed-color: var(--rds-foreground-primary);--common-button--disabled-bg: var(--rds-foreground-secondary);--common-button--disabled-color: var(--rds-foreground-tertiary);border:none;width:auto;background:transparent;line-height:normal;-webkit-appearance:none;display:flex;transition:125ms ease-in-out;transition-property:color,box-shadow,background-color;font-family:var(--rds-font-family-m-headlines)}.rds-button__shared::-moz-focus-inner,.rds-radio-toggle::-moz-focus-inner{border:0;padding:0}.rds-button__shared--primary{color:var(--common-button--primary-color);background-color:var(--common-button--primary-bg)}.rds-button__shared--primary:hover{background-color:var(--common-button--primary-hover-bg)}.rds-button__shared--primary:active{box-shadow:none;background-color:var(--common-button--primary-pressed-bg)}.rds-button__shared--secondary{background-color:var(--common-button--secondary-bg);border:2px solid var(--common-button--secondary-border-color);color:var(--common-button--secondary-color)}.rds-button__shared--secondary:hover{background-color:var(--common-button--secondary-hover-bg);color:var(--common-button--secondary-hover-color)}.rds-button__shared--secondary:active{background-color:var(--common-button--secondary-pressed-bg);color:var(--common-button--secondary-pressed-color);border-color:var(--common-button--secondary-pressed-bg)}.rds-button__shared--tertiary,.rds-radio-toggle{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover,.rds-radio-toggle:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active,.rds-radio-toggle:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled,.rds-radio-toggle:disabled{background-color:var(--common-button--disabled-bg);color:var(--common-button--disabled-color);box-shadow:none;cursor:not-allowed;border:none}.rds-button__shared:hover,.rds-radio-toggle:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active,.rds-radio-toggle:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner,.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-radio-toggle:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner,.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus,html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-button,.rds-radio-toggle{padding:.78125rem var(--rds-spacing--32);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-button__icon{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-button__icon>svg{width:100%}.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:200%;left:0}.rds-button--loading:disabled{cursor:wait!important}.rds-button--loading:disabled:hover{box-shadow:none}.rds-field-set{border:none;margin:0;padding:0;display:flex}.rds-field-set__legend{margin-bottom:var(--rds-spacing--8)}.rds-radio-toggle{padding:0;background-color:var(--rds-foreground-overlay-soft);color:#fff;margin:0 var(--rds-spacing--8);display:block;max-width:25ch;min-width:7ch;overflow:hidden;border-radius:var(--rds-roundness--button)}.rds-radio-toggle:hover{background-color:var(--rds-background-tertiary)}.rds-radio-toggle:active{background-color:var(--rds-background-overlay-soft);color:#fff}.rds-radio-toggle__label{width:100%;display:grid;place-items:center;transition:125ms ease background-color;padding:.78125rem var(--rds-spacing--24);box-sizing:border-box;user-select:none}.rds-radio-toggle__input{position:absolute;opacity:0}.rds-radio-toggle__input:checked+.rds-radio-toggle__label{background-color:var(--rds-foreground-tertiary)}.rds-radio-toggle__input:active+.rds-radio-toggle__label{background-color:var(--rds-foreground-overlay-soft)}.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus button::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-radio-toggle:focus-within::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus-within button::-moz-focus-inner,.rds-radio-toggle:focus-within [type=button]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus-within input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus-within{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}

package/dist/toggle/RadioToggle.js

@@ -1 +1 @@
-var r=Object.defineProperty,e=Object.defineProperties,a=Object.getOwnPropertyDescriptors,t=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,s=(e,a,t)=>a in e?r(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,n=(r,e)=>{for(var a in e||(e={}))o.call(e,a)&&s(r,a,e[a]);if(t)for(var a of t(e))l.call(e,a)&&s(r,a,e[a]);return r};import{createContext as i,forwardRef as c,useContext as p}from"react";import"../button/Button.js";import{a as d,j as m}from"../core/RiksTV.js";const b=i({radioName:""});const f=c(((r,s)=>{var i=r,{label:c,name:f,className:u=""}=i,g=((r,e)=>{var a={};for(var s in r)o.call(r,s)&&e.indexOf(s)<0&&(a[s]=r[s]);if(null!=r&&t)for(var s of t(r))e.indexOf(s)<0&&l.call(r,s)&&(a[s]=r[s]);return a})(i,["label","name","className"]);const{radioName:y}=p(b);return d("label",{className:`rds-radio-toggle rds-button rds-button__shared rds-button__shared--primary  ${u}`,children:[m("input",(O=n({className:"rds-radio-toggle__input"},g),j={ref:s,type:"radio",name:y||f},e(O,a(j)))),m("span",{className:"rds-radio-toggle__label",children:c})]});var O,j}));f.displayName="RadioToggleInput";export{b as R,f as a};
+var e=Object.defineProperty,r=Object.defineProperties,a=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(r,a,o)=>a in r?e(r,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[a]=o,s=(e,r)=>{for(var a in r||(r={}))t.call(r,a)&&n(e,a,r[a]);if(o)for(var a of o(r))l.call(r,a)&&n(e,a,r[a]);return e};import{createContext as i,forwardRef as c,useContext as p}from"react";import"../button/Button.js";import{a as m,j as d}from"../core/RiksTV.js";const b=i({radioName:""});const f=c(((e,n)=>{var i=e,{label:c,name:f,className:u=""}=i,g=((e,r)=>{var a={};for(var n in e)t.call(e,n)&&r.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&o)for(var n of o(e))r.indexOf(n)<0&&l.call(e,n)&&(a[n]=e[n]);return a})(i,["label","name","className"]);const{radioName:O}=p(b);return m("label",{className:`rds-radio-toggle ${u}`,children:[d("input",(y=s({className:"rds-radio-toggle__input"},g),j={ref:n,type:"radio",name:O||f},r(y,a(j)))),d("span",{className:"rds-radio-toggle__label",children:c})]});var y,j}));f.displayName="RadioToggleInput";export{b as R,f as a};

package/dist/toggle/radioToggle.scss

@@ -1,5 +1,7 @@
-@use '../core/mixin/focus' as mix;
-@use '../core/mixin/rem';
+@use "../core/mixin/focus" as mix;
+@use "../core/mixin/rem";
+@use "../button/button-shared";
+@use "../button/button";
 
 .rds-field-set {
   border: none;
@@ -12,6 +14,9 @@
 }
 
 .rds-radio-toggle {
+  @extend .rds-button__shared;
+  @extend .rds-button;
+  @extend .rds-button__shared--tertiary;
   // button reset
   padding: 0;
   background-color: var(--rds-foreground-overlay-soft);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikstv/shared-components",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "publishConfig": {
     "access": "public"
   },