Skip to content

Commit

Permalink
Merge pull request #123 from WoodWing/feature/CSH-9935-tables
Browse files Browse the repository at this point in the history
Feature/csh 9935 tables
  • Loading branch information
Gecete authored Jan 10, 2024
2 parents ad09c47 + 4183d3c commit 2448c91
Show file tree
Hide file tree
Showing 8 changed files with 206 additions and 8 deletions.
59 changes: 56 additions & 3 deletions component-sets/default-components/components-definition.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "default-components",
"description": "Studio Digital Editor components",
"version": "1.9.0",
"version": "1.11.0",
"defaultComponentOnEnter": "body",

"components": [
Expand All @@ -26,6 +26,26 @@
"label": { "key": "COMPONENT_PRODUCT_LABEL" },
"properties": ["position", "style", "text-align", "letter-spacing", "line-height"]
},
{
"name": "chart",
"icon": "icons/components/chart.svg",
"selectionMethod": "handle",
"label": {
"key": "COMPONENT_CHART_LABEL"
},
"properties": [
{
"name": "chart",
"directiveKey": "chart"
},
"position",
"chart-height",
"inside-caption",
"letter-spacing",
"line-height",
"text-align"
]
},
{
"name": "image",
"icon": "icons/components/image.svg",
Expand Down Expand Up @@ -179,6 +199,15 @@
"name": "text",
"components": ["intro", "body", "footer", "quote", "separator", "crosshead", "author"]
},
{
"name": "data",
"label": { "key": "GROUP_DATA_LABEL" },
"logo": {
"icon": "icons/groups/data.svg",
"link": "https://infogram.com/"
},
"components": ["chart"]
},
{
"label": { "key": "GROUP_MEDIA_LABEL" },
"name": "media",
Expand All @@ -192,6 +221,17 @@
],

"componentProperties": [
{
"name": "chart",
"label": {
"key": "PROPERTY_CHART_LABEL"
},
"control": {
"type": "chart",
"chartType": "infogram"
},
"dataType": "doc-chart"
},
{
"name": "position",
"label": { "key": "PROPERTY_POSITION_LABEL" },
Expand All @@ -218,7 +258,7 @@
"label": { "key": "PROPERTY_LETTER_SPACING_LABEL" },
"control": {
"type": "text",
"pattern": "^(([+-]{0,1})([0-9]|[0-9][.][0-9]{1,}|[0-9]{2}|[0-9]{2}[.][0-9]{1,}|[1-4][0-9]{0,2}|[1-4][0-9]{0,2}[.][0-9]{1,}|(500))|auto)$",
"pattern": "^-?([\\d]{1,3}([.][\\d]{1,})?|auto)$",
"defaultValue": "",
"unit": "em",
"inputPlaceholder": { "key": "PROPERTY_AUTO_NUMBER_PLACEHOLDER" }
Expand All @@ -232,7 +272,7 @@
"label": { "key": "PROPERTY_LINE_HEIGHT_LABEL" },
"control": {
"type": "text",
"pattern": "^(([+]{0,1})([0-9]|[0-9][.][0-9]{1,}|[1-9]{2}|[1-9]{2}[.][0-9]{1,}|[1-4][0-9]{0,2}|[1-4][0-9]{0,2}[.][0-9]{1,}|(500))|auto)$",
"pattern": "^-?([\\d]{1,3}([.][\\d]{1,})?|auto)$",
"defaultValue": "",
"unit": "em",
"inputPlaceholder": { "key": "PROPERTY_AUTO_NUMBER_PLACEHOLDER" }
Expand All @@ -241,6 +281,19 @@
"dataType": "inlineStyles",
"featureFlag": "ContentStation-LocalStyleOverrides"
},
{
"name": "chart-height",
"label": { "key": "CHART_PADDING_BOTTOM_LABEL" },
"control": {
"type": "text",
"pattern": "^(500(\\.0+)?|[0-4]?[0-9]?[0-9](\\.[0-9]+)?)$",
"defaultValue": "56.25",
"unit": "%",
"inputPlaceholder": { "key": "PROPERTY_HEIGHT_PLACEHOLDER" }
},
"selector": "[doc-chart]",
"dataType": "data"
},
{
"name": "inside-caption",
"label": { "key": "PROPERTY_CAPTION_LABEL" },
Expand Down
12 changes: 12 additions & 0 deletions component-sets/default-components/icons/components/chart.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions component-sets/default-components/icons/groups/data.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions component-sets/default-components/localization/enUS.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"COMPONENT_AUTHOR_LABEL": "Author",
"COMPONENT_BODY_LABEL": "Body",
"COMPONENT_CHART_LABEL": "Chart",
"COMPONENT_CONTAINER_LABEL": "Container",
"COMPONENT_CROSSHEAD_LABEL": "Crosshead",
"COMPONENT_EMBED_LABEL": "Embed",
Expand All @@ -19,11 +20,13 @@
"COMPONENT_SUBTITLE_LABEL": "Subtitle",
"COMPONENT_TITLE_LABEL": "Title",
"COMPONENT_VIDEO_LABEL": "Video",
"GROUP_DATA_LABEL": "Data",
"GROUP_LAYOUT_LABEL": "Layout",
"GROUP_MEDIA_LABEL": "Media",
"GROUP_TEXT_LABEL": "Text",
"GROUP_TITLE_LABEL": "Title",
"PROPERTY_AUTO_NUMBER_PLACEHOLDER": "Type ‘auto’ or any number…",
"PROPERTY_PADDING_BOTTOM_PLACEHOLDER": "Type any number…",
"PROPERTY_AUTO_PLAY_LABEL": "Auto-play",
"PROPERTY_BACKGROUND_COLOR_LABEL": "Background color",
"PROPERTY_CAPTION_BOTTOM_LEFT_OPTION": "Bottom-left caption",
Expand All @@ -35,6 +38,7 @@
"PROPERTY_CAPTION_TOP_LEFT_OPTION": "Top-left caption",
"PROPERTY_CAPTION_TOP_OPTION": "Top-caption",
"PROPERTY_CAPTION_TOP_RIGHT_OPTION": "Top-right caption",
"PROPERTY_CHART_LABEL": "Edit data visualization",
"PROPERTY_DISABLE_FULLSCREEN_LABEL": "Disable fullscreen (Adobe AEM)",
"PROPERTY_DROP_CAP_LABEL": "Drop cap",
"PROPERTY_EDIT_IMAGE_LABEL": "Edit image",
Expand All @@ -59,6 +63,7 @@
"PROPERTY_STYLE_DEFAULT_OPTION": "Default",
"PROPERTY_TEXT_ALIGN_LABEL": "Text alignment",
"PROPERTY_VARIANT_LABEL": "Style variant",
"CHART_PADDING_BOTTOM_LABEL": "Chart bottom padding",
"PROPERTY_VARIANT_STYLE_OPTION": "Option {{0}}",
"TEMPLATE_AUTHOR_LINK_PLACEHOLDER": "@twitter",
"TEMPLATE_AUTHOR_LOCATION_PLACEHOLDER": "Location",
Expand Down
114 changes: 114 additions & 0 deletions component-sets/default-components/styles/_chart.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
.chart {
margin: 12px auto;
position: relative;
clear: both;

> div {
position: relative;
padding-bottom: 56%;
height: 100%;
overflow: hidden;
}

iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

&._option1 div {
padding: 10px;
}

figcaption {
color: #000000;
margin-top: 4px;
margin-bottom: 2px;
}

// TODO - CSH-9935: Copied directly from the image component. Could/should be moved to a common place to reduce duplication?
%caption-shared {
position: absolute;
padding: 8px 12px;
background-color: rgba(255, 255, 255, 0.8);
font-weight: 400;
color: #3f3e3e;
margin: 0;

/* before represents the placeholder text*/
&::before {
color: #3f3e3e;
}
}

/* class styles for the captions properties of the chart component */
&._caption-inside figcaption {
@extend %caption-shared;
right: 0;
bottom: 0;
left: 0;
}

&._caption-none figcaption {
display: none;
}

&._caption-top figcaption {
@extend %caption-shared;
right: 0;
top: 0;
left: 0;
}

&._caption-top-left figcaption {
@extend %caption-shared;
right: 0;
top: 0;
left: 0;
width: 30%;
}

&._caption-top-right figcaption {
@extend %caption-shared;
right: 0;
top: 0;
width: 30%;
}

&._caption-bottom-left figcaption {
@extend %caption-shared;
right: 0;
bottom: 0;
left: 0;
width: 30%;
}

&._caption-bottom-right figcaption {
@extend %caption-shared;
right: 0;
bottom: 0;
width: 30%;
}

@media only screen and (min-width: $phone-max-width) {
/* class styles for the position properties of the image component */
&._left {
float: left;
clear: left;
width: calc(50% - 15px);
margin-right: 15px;
z-index: 1;
}

&._right {
float: right;
clear: right;
width: 50%;
z-index: 1;
}
}
}
6 changes: 6 additions & 0 deletions component-sets/default-components/templates/html/chart.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<figure class="chart">
<div doc-chart="chart"></div>
<figcaption doc-editable="caption">
Chart caption, sem vel consectetur dignissim, quam felis molestie lorem, eget posuere felis turpis vitae odio.
</figcaption>
</figure>
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"homepage": "https://github.com/WoodWing/csde-components-boilerplate#readme",
"dependencies": {
"@woodwing/studio-component-set-tools": "^1.18.2",
"@woodwing/studio-component-set-tools": "^1.22.5",
"archiver": "^5.3.0",
"sass": "^1.45.1",
"uglify-js": "^3.6.0",
Expand Down

0 comments on commit 2448c91

Please sign in to comment.