From 824673e12dcfdab49655ce4d0df8039721da42fa Mon Sep 17 00:00:00 2001 From: btopro Date: Mon, 8 Apr 2024 14:05:44 -0400 Subject: [PATCH] sample up --- .../@lrnwebcomponents/d-d-d/lib/DDDStyles.js | 36 +++++++++++++------ .../d-d-d/lib/d-d-d-sample.js | 4 ++- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/DDDStyles.js b/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/DDDStyles.js index bda54e42a5..5f93e97467 100644 --- a/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/DDDStyles.js +++ b/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/DDDStyles.js @@ -1,4 +1,4 @@ -import{css as d,html as a,unsafeCSS as t}from"../../../lit/index.js";import{SimpleIconsetStore as r}from"../../simple-icon/lib/simple-iconset.js";import"../../simple-icon/lib/simple-icons.js";import"../../hax-iconset/lib/simple-hax-iconset.js";globalThis.addEventListener("hax-store-ready",(d=>{if(globalThis.HaxStore){const d=globalThis.HaxStore.requestAvailability();d.designSystemHAXProperties=(a,t)=>{a.canScale&&a.settings.developer.unshift({attribute:"data-width",title:"Width",description:"Scaled relative to width of container",inputMethod:"slider",min:a.canScale.min?a.canScale.min:25,max:a.canScale.max?a.canScale.max:100,step:a.canScale.step?a.canScale.step:25});let r=d.isInlineElement(t);return a.gizmo&&a.gizmo.meta&&a.gizmo.meta.inlineOnly&&(r=!0),a.hideDefaultSettings||r||(a.settings.advanced.push({attribute:"data-text-align",title:"Text align",description:"Horizontal alignment of text",inputMethod:"select",options:{"":"-- default --",left:"Left",center:"Center",right:"Right",justify:"Justify"}}),a.settings.advanced.push({attribute:"data-padding",title:"Padding",description:"Padding for added aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("padding")]}),a.settings.advanced.push({attribute:"data-margin",title:"Margin",description:"Margin for added aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("margin")]})),!0!==a.designSystem&&!0!==a.designSystem.primary||a.settings.configure.push({attribute:"data-primary",title:"Primary color",description:"Primary color to apply color, often for meaning or aesthetic",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("primary")]}),!0!==a.designSystem&&!0!==a.designSystem.accent||a.settings.configure.push({attribute:"data-accent",title:"Accent color",description:"Accent color to apply color for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("accent")]}),!0!==a.designSystem&&!0!==a.designSystem.text||(a.settings.advanced.push({attribute:"data-font-family",title:"Font family",description:"Font family to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("font-family")]}),a.settings.advanced.push({attribute:"data-font-weight",title:"Font weight",description:"Font weight to apply, ensure it is only for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("font-weight")]}),a.settings.advanced.push({attribute:"data-font-size",title:"Font size",description:"Font size to apply, ensure it is only for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("font-size")]})),!0!==a.designSystem&&!0!==a.designSystem.card||(a.settings.advanced.push({attribute:"data-border",title:"Border",description:"Border size to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("border")]}),a.settings.advanced.push({attribute:"data-border-radius",title:"Border radius",description:"Border radius to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("border-radius")]}),a.settings.advanced.push({attribute:"data-box-shadow",title:"Box shadow",description:"Level of shadow to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("box-shadow")]})),!0!==a.designSystem&&!0!==a.designSystem.designTreatment||(["p","blockquote"].includes(t)?a.settings.configure.push({attribute:"data-design-treatment",title:"Design treatment",description:"Minor design treatment leveraging Primary color value",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("design-treatment").filter((d=>!(!d||!d.value.startsWith("dropCap"))))]}):["h1","h2","h3","h4","h5","h6"].includes(t)&&(a.settings.configure.push({attribute:"data-design-treatment",title:"Design treatment",description:"Minor design treatment leveraging Primary color value",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("design-treatment").filter((d=>!(!d||d.value.startsWith("dropCap"))))]}),a.settings.configure.push({attribute:"data-instructional-action",title:"Instructional Type",description:"Indicates instructional context to users visually",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("instructional-action")]}))),a}}}),{once:!0});export const learningComponentNouns={content:"Content",assessment:"Assessment",quiz:"Quiz",submission:"Submission",lesson:"Lesson",module:"Module",task:"Task",activity:"Activity",project:"Project",practice:"Practice",unit:"Unit",objectives:"Learning Objectives"};export const learningComponentVerbs={connection:"Connection",knowledge:"Did You Know?",strategy:"Learning Strategy",discuss:"Discuss",listen:"Listen",make:"Make",observe:"Observe",present:"Present",read:"Read",reflect:"Reflect",research:"Research",watch:"Watch",write:"Write"};export const learningComponentTypes={...learningComponentVerbs,...learningComponentNouns};export const learningComponentColors={content:"blue-grey",assessment:"red",quiz:"blue",submission:"deep-purple",lesson:"purple",module:"red",task:"blue-grey",activity:"orange",project:"deep-orange",practice:"brown",unit:"light-green",objectives:"indigo",connection:"green",knowledge:"cyan",strategy:"teal",discuss:"blue",listen:"purple",make:"orange",observe:"yellow",present:"light-blue",read:"lime",reflect:"amber",research:"deep-orange",watch:"pink",write:"deep-purple"};export function iconFromPageType(d){switch(d){case"content":return"lrn:page";case"assessment":return"lrn:assessment";case"quiz":return"lrn:quiz";case"submission":return"icons:move-to-inbox";case"lesson":return"hax:lesson";case"module":return"hax:module";case"unit":return"hax:unit";case"task":return"hax:task";case"activity":return"hax:ticket";case"project":return"hax:bulletin-board";case"practice":return"hax:shovel";case"connection":return"courseicons:chem-connection";case"knowledge":return"courseicons:knowledge";case"strategy":case"discuss":case"make":case"observe":case"present":case"read":case"reflect":case"research":case"watch":return"courseicons:strategy";case"listen":return"courseicons:listen";case"write":return"lrn:write"}return"courseicons:learning-objectives"}export const ApplicationAttributeData={primary:{0:"Pugh blue",1:"Beaver blue",2:"Nittany navy",3:"Potential midnight",4:"Coaly gray",5:"Limestone gray",6:"Slate gray",7:"Creek teal",8:"Sky blue",9:"Shrine tan",10:"Roar golden",11:"Original 87 pink",12:"Discovery coral",13:"Wonder purple",14:"Artherton violet",15:"Invent orange",16:"Keystone yellow",17:"Opportunity green",18:"Future lime",19:"Forest green",20:"Landgrant brown",21:"Global Neon"},accent:{0:"Sky Max",1:"Slate Max",2:"Limestone Max",3:"Shrine Max",4:"Roar Max",5:"Creek Max"},margin:{xs:"XS",s:"S",m:"M",l:"L",xl:"XL"},padding:{xs:"XS",s:"S",m:"M",l:"L",xl:"XL"},border:{xs:"XS",sm:"S",md:"M",lg:"L"},"border-radius":{xs:"XS",sm:"S",md:"M",lg:"L",xl:"XL"},"box-shadow":{sm:"S",md:"M",lg:"L",xl:"XL"},"design-treatment":{vert:"Vertical line","horz-10p":"Horizontal line 10%","horz-25p":"Horizontal line 25%","horz-50p":"Horizontal line 50%","horz-full":"Horizontal line 100%","horz-md":"Horizontal line Medium","horz-lg":"Horizontal line Large",horz:"Horizontal line",bg:"Background color","dropCap-xs":"Drop Cap - xs","dropCap-sm":"Drop Cap - sm","dropCap-md":"Drop Cap - md","dropCap-lg":"Drop Cap - lg","dropCap-xl":"Drop Cap - xl"},"font-family":{primary:"Primary",secondary:"Secondary",navigation:"Navigation"},"font-weight":{light:"Light",regular:"Regular",medium:"Medium",bold:"Bold",black:"Black"},"font-size":{"4xs":"4XS","3xs":"3XS",xxs:"2XS",xs:"XS",s:"S",ms:"MS",m:"M",ml:"ML",l:"L",xl:"XL",xxl:"2XL","3xl":"3XL","4xl":"4XL","type1-s":"TypeS","type1-m":"TypeM","type1-l":"TypeL"},"instructional-action":learningComponentTypes};export function HAXOptionSampleFactory(d){return Object.keys(ApplicationAttributeData[d]).map((t=>({value:t,html:a``})))}export const instructionalStyles=Object.keys(learningComponentColors).map((a=>{let e=learningComponentColors[a];return d` +import{css as d,html as a,unsafeCSS as t}from"../../../lit/index.js";import{SimpleIconsetStore as r}from"../../simple-icon/lib/simple-iconset.js";import"../../simple-icon/lib/simple-icons.js";import"../../hax-iconset/lib/simple-hax-iconset.js";globalThis.addEventListener("hax-store-ready",(d=>{if(globalThis.HaxStore){const d=globalThis.HaxStore.requestAvailability();d.designSystemHAXProperties=(a,t)=>{a.canScale&&a.settings.developer.unshift({attribute:"data-width",title:"Width",description:"Scaled relative to width of container",inputMethod:"slider",min:a.canScale.min?a.canScale.min:25,max:a.canScale.max?a.canScale.max:100,step:a.canScale.step?a.canScale.step:25});let r=d.isInlineElement(t);return a.gizmo&&a.gizmo.meta&&a.gizmo.meta.inlineOnly&&(r=!0),a.hideDefaultSettings||r||(a.settings.advanced.push({attribute:"data-text-align",title:"Text align",description:"Horizontal alignment of text",inputMethod:"select",options:{"":"-- default --",left:"Left",center:"Center",right:"Right",justify:"Justify"}}),a.settings.advanced.push({attribute:"data-padding",title:"Padding",description:"Padding for added aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("padding")]}),a.settings.advanced.push({attribute:"data-margin",title:"Margin",description:"Margin for added aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("margin")]})),!0!==a.designSystem&&!0!==a.designSystem.primary||a.settings.configure.push({attribute:"data-primary",title:"Primary color",description:"Primary color to apply color, often for meaning or aesthetic",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("primary")]}),!0!==a.designSystem&&!0!==a.designSystem.accent||a.settings.configure.push({attribute:"data-accent",title:"Accent color",description:"Accent color to apply color for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("accent")]}),!0!==a.designSystem&&!0!==a.designSystem.text||(a.settings.advanced.push({attribute:"data-font-family",title:"Font family",description:"Font family to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("font-family")]}),a.settings.advanced.push({attribute:"data-font-weight",title:"Font weight",description:"Font weight to apply, ensure it is only for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("font-weight")]}),a.settings.advanced.push({attribute:"data-font-size",title:"Font size",description:"Font size to apply, ensure it is only for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("font-size")]})),!0!==a.designSystem&&!0!==a.designSystem.card||(a.settings.advanced.push({attribute:"data-border",title:"Border",description:"Border size to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("border")]}),a.settings.advanced.push({attribute:"data-border-radius",title:"Border radius",description:"Border radius to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("border-radius")]}),a.settings.advanced.push({attribute:"data-box-shadow",title:"Box shadow",description:"Level of shadow to apply for aesthetics",inputMethod:"select",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("box-shadow")]})),!0!==a.designSystem&&!0!==a.designSystem.designTreatment||(["p","blockquote"].includes(t)?a.settings.configure.push({attribute:"data-design-treatment",title:"Design treatment",description:"Minor design treatment leveraging Primary color value",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("design-treatment").filter((d=>!(!d||!d.value.startsWith("dropCap"))))]}):["h1","h2","h3","h4","h5","h6"].includes(t)&&(a.settings.configure.push({attribute:"data-design-treatment",title:"Design treatment",description:"Minor design treatment leveraging Primary color value",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("design-treatment").filter((d=>!(!d||d.value.startsWith("dropCap"))))]}),a.settings.configure.push({attribute:"data-instructional-action",title:"Instructional Type",description:"Indicates instructional context to users visually",inputMethod:"radio",itemsList:[{value:"",text:"-- default --"},...HAXOptionSampleFactory("instructional-action")]}))),a}}}),{once:!0});export const learningComponentNouns={content:"Content",assessment:"Assessment",quiz:"Quiz",submission:"Submission",lesson:"Lesson",module:"Module",task:"Task",activity:"Activity",project:"Project",practice:"Practice",unit:"Unit",objectives:"Learning Objectives"};export const learningComponentVerbs={connection:"Connection",knowledge:"Did You Know?",strategy:"Learning Strategy",discuss:"Discuss",listen:"Listen",make:"Make",observe:"Observe",present:"Present",read:"Read",reflect:"Reflect",research:"Research",watch:"Watch",write:"Write"};export const learningComponentTypes={...learningComponentVerbs,...learningComponentNouns};export const learningComponentColors={content:"blue-grey",assessment:"red",quiz:"blue",submission:"deep-purple",lesson:"purple",module:"red",task:"blue-grey",activity:"orange",project:"deep-orange",practice:"brown",unit:"light-green",objectives:"indigo",connection:"green",knowledge:"cyan",strategy:"teal",discuss:"blue",listen:"purple",make:"orange",observe:"yellow",present:"light-blue",read:"lime",reflect:"amber",research:"deep-orange",watch:"pink",write:"deep-purple"};export function iconFromPageType(d){switch(d){case"content":return"lrn:page";case"assessment":return"lrn:assessment";case"quiz":return"lrn:quiz";case"submission":return"icons:move-to-inbox";case"lesson":return"hax:lesson";case"module":return"hax:module";case"unit":return"hax:unit";case"task":return"hax:task";case"activity":return"hax:ticket";case"project":return"hax:bulletin-board";case"practice":return"hax:shovel";case"connection":return"courseicons:chem-connection";case"knowledge":return"courseicons:knowledge";case"strategy":case"discuss":case"make":case"observe":case"present":case"read":case"reflect":case"research":case"watch":return"courseicons:strategy";case"listen":return"courseicons:listen";case"write":return"lrn:write"}return"courseicons:learning-objectives"}export const ApplicationAttributeData={primary:{0:"Pugh blue",1:"Beaver blue",2:"Nittany navy",3:"Potential midnight",4:"Coaly gray",5:"Limestone gray",6:"Slate gray",7:"Creek teal",8:"Sky blue",9:"Shrine tan",10:"Roar golden",11:"Original 87 pink",12:"Discovery coral",13:"Wonder purple",14:"Artherton violet",15:"Invent orange",16:"Keystone yellow",17:"Opportunity green",18:"Future lime",19:"Forest green",20:"Landgrant brown",21:"Global Neon"},accent:{0:"Sky Max",1:"Slate Max",2:"Limestone Max",3:"Shrine Max",4:"Roar Max",5:"Creek Max"},margin:{xs:"XS",s:"S",m:"M",l:"L",xl:"XL"},padding:{xs:"XS",s:"S",m:"M",l:"L",xl:"XL"},border:{xs:"XS",sm:"S",md:"M",lg:"L"},"border-radius":{xs:"XS",sm:"S",md:"M",lg:"L",xl:"XL"},"box-shadow":{sm:"S",md:"M",lg:"L"},"design-treatment":{vert:"Vertical line","horz-10p":"Horizontal line 10%","horz-25p":"Horizontal line 25%","horz-50p":"Horizontal line 50%","horz-full":"Horizontal line 100%","horz-md":"Horizontal line Medium","horz-lg":"Horizontal line Large",horz:"Horizontal line",bg:"Background color","dropCap-xs":"Drop Cap - xs","dropCap-sm":"Drop Cap - sm","dropCap-md":"Drop Cap - md","dropCap-lg":"Drop Cap - lg","dropCap-xl":"Drop Cap - xl"},"font-family":{primary:"Primary",secondary:"Secondary",navigation:"Navigation"},"font-weight":{light:"Light",medium:"Medium",bold:"Bold"},"font-size":{"3xs":"Smaller",s:"Large",m:"Larger",l:"Largest"},"instructional-action":learningComponentTypes};export function HAXOptionSampleFactory(d){return Object.keys(ApplicationAttributeData[d]).map((t=>({value:t,html:a``})))}export const instructionalStyles=Object.keys(learningComponentColors).map((a=>{let e=learningComponentColors[a];return d` [data-instructional-action="${t(a)}"] { --instructional-action-color: var( --simple-colors-default-theme-${t(e)}-8, @@ -575,7 +575,10 @@ import{css as d,html as a,unsafeCSS as t}from"../../../lit/index.js";import{Simp } /* font size */ - + /* normal line height if we are letting use mess w/ font size */ + [data-font-size] { + line-height: normal; + } [data-font-size="4xs"] { font-size: var(--ddd-font-size-4xs); } @@ -597,7 +600,10 @@ import{css as d,html as a,unsafeCSS as t}from"../../../lit/index.js";import{Simp [data-font-size="m"] { font-size: var(--ddd-font-size-m); } - s [data-font-size="l"] { + [data-font-size="ml"] { + font-size: var(--ddd-font-size-ml); + } + [data-font-size="l"] { font-size: var(--ddd-font-size-l); } [data-font-size="xl"] { @@ -789,13 +795,25 @@ import{css as d,html as a,unsafeCSS as t}from"../../../lit/index.js";import{Simp blockquote[data-accent], ol[data-accent], ul[data-accent], - div[data-accent] { - padding: var(--ddd-spacing-6); + div[data-accent] + { border: var(--ddd-border-sm); border-color: var(--ddd-theme-primary); border-width: var(--ddd-theme-border-size); background-color: var(--ddd-theme-accent); } + p[data-accent]:not([data-padding]), + blockquote[data-accent]:not([data-padding]), + ol[data-accent]:not([data-padding]), + ul[data-accent]:not([data-padding]), + div[data-accent]:not([data-padding]), + p[data-border]:not([data-padding]), + blockquote[data-border]:not([data-padding]), + ol[data-border]:not([data-padding]), + ul[data-border]:not([data-padding]), + div[data-border]:not([data-padding]) { + padding: var(--ddd-spacing-6); + } ol[data-accent], ul[data-accent] { padding-left: var(--ddd-spacing-9); @@ -1418,12 +1436,8 @@ import{css as d,html as a,unsafeCSS as t}from"../../../lit/index.js";import{Simp border-radius: var(--ddd-radius-xs); border-color: var(--ddd-theme-default-potential50); } - hax-body p, - hax-body ul, - hax-body ol, - .haxcms-theme-element p, - .haxcms-theme-element ul, - .haxcms-theme-element ol { + hax-body, + .haxcms-theme-element { line-height: var(--ddd-lh-150); font-size: var(--ddd-theme-body-font-size); font-family: var(--ddd-font-primary); diff --git a/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-d-sample.js b/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-d-sample.js index 9cbd5feb3e..0b2b29cc08 100644 --- a/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-d-sample.js +++ b/build/es6/node_modules/@lrnwebcomponents/d-d-d/lib/d-d-d-sample.js @@ -2,8 +2,10 @@ import{DDDSuper as t}from"../d-d-d.js";import{DDDDataAttributes as e,Application :host { display: flex; min-height: var(--ddd-spacing-4); - padding: var(--ddd-spacing-2); + padding: var(--ddd-spacing-1) 0; margin: 0; + font-size: var(--ddd-font-size-4xs); + line-height: normal; } :host([type="accent"]:hover), :host([type="primary"]:hover) {