Skip to content

Commit

Permalink
Merge pull request #1013 from bolt-design-system/feature/component-ex…
Browse files Browse the repository at this point in the history 
…plorer-updates

Component Explorer Improvements + Speed Boost
  • Loading branch information
@sghoweri
sghoweri authored Jan 7, 2019
2 parents 81adacb + a58aaad commit 3f93f79
Show file tree
Hide file tree
Showing 9 changed files with 362 additions and 219 deletions.
8 changes: 7 additions & 1 deletion docs-site/src/components/pattern-lab-hacks/pattern-lab-hacks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,10 @@

.sg-pattern-extra.sg-pattern-extra {
max-height: 0px; // prevent background from showing up
}
}

.pl-c-category__title,
.pl-c-pattern[id*=-docs] > .pl-c-pattern__header,
.pl-c-pattern[id*=-docs] > .pl-c-pattern__extra {
display: none;
}
192 changes: 127 additions & 65 deletions docs-site/src/components/pattern-lab-utils/docs.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,98 +3,160 @@
{% set readmeFile = "@bolt-components-#{componentName}/README.md" %}
{% endif %}

{% if schemaForm and schema %}
<bolt-component-demo>
{% set schemaForm = schemaForm|merge({ schema: schema }) %}
{% set definitions = {} %}
{% set properties = {} %}

{% for key, prop in schema.properties %}
{% set propertyValues = {} %}
{% set propertyValues = schema.properties[key] %}

{% if prop.ref %}
{% set refName = prop.ref|split("/")[0]|replace({'@':''}) %}
{% set referenceData = get_data(prop.ref) %}
{% set reference = {} %}

{% if referenceData.type %}
{% set reference = reference|merge({
type: referenceData.type
}) %}
{% endif %}
{% set componentExplorer %}
{% if schemaForm and schema %}
<bolt-component-demo>
{% set schemaForm = schemaForm|merge({ schema: schema }) %}
{% set definitions = {} %}
{% set properties = {} %}

{% if referenceData.properties %}
{% set reference = reference|merge({
properties: referenceData.properties
}) %}
{% endif %}
{% for key, prop in schema.properties %}
{% set propertyValues = {} %}
{% set propertyValues = schema.properties[key] %}

{% if referenceData.required %}
{% set reference = reference|merge({
required: referenceData.required
}) %}
{% endif %}
{% if prop.ref %}
{% set refName = prop.ref|split("/")[0]|replace({'@':''}) %}
{% set referenceData = get_data(prop.ref) %}
{% set reference = {} %}

{% if referenceData.type %}
{% set reference = reference|merge({
type: referenceData.type
}) %}
{% endif %}

{% if referenceData.properties %}
{% set reference = reference|merge({
properties: referenceData.properties
}) %}
{% endif %}

{% if referenceData.enum %}
{% set reference = reference|merge({
enum: referenceData.enum
{% if referenceData.required %}
{% set reference = reference|merge({
required: referenceData.required
}) %}
{% endif %}

{% if referenceData.enum %}
{% set reference = reference|merge({
enum: referenceData.enum
}) %}
{% endif %}

{% if referenceData.default %}
{% set reference = reference|merge({
default: referenceData.default
}) %}
{% endif %}

{% set definitions = definitions | merge({
("" ~ refName): reference
}) %}
{% endif %}

{% if referenceData.default %}
{% set reference = reference|merge({
default: referenceData.default
{% set propertyValues = propertyValues|merge({
"$ref": '#/definitions/' ~ prop.ref|split("/")[0]|replace({'@': ''})
}) %}
{# {% set newSchema = newSchema|merge(newSchema.properties[key]['$ref'] = '#/definitions/' ~ prop.ref %}
{% set newSchema newSchema|merge({
definitions
}.['definitions'][prop.ref] = reference %} #}
{% endif %}

{% set definitions = definitions | merge({
("" ~ refName): reference
{% set properties = properties|merge({
("" ~ key): propertyValues
}) %}
{% endfor %}

{% set propertyValues = propertyValues|merge({
"$ref": '#/definitions/' ~ prop.ref|split("/")[0]|replace({'@': ''})
{% if definitions %}
{% set schema = schema|merge({
definitions: definitions,
}) %}
{# {% set newSchema = newSchema|merge(newSchema.properties[key]['$ref'] = '#/definitions/' ~ prop.ref %}
{% set newSchema newSchema|merge({
definitions
}.['definitions'][prop.ref] = reference %} #}
{% endif %}

{% set properties = properties|merge({
("" ~ key): propertyValues
}) %}
{% endfor %}

{% if definitions %}
{% set schema = schema|merge({
definitions: definitions,
}) %}
{% endif %}
{% if properties %}
{% set schema = schema|merge({
properties: properties,
}) %}
{% endif %}

{% if properties %}
{% set schema = schema|merge({
properties: properties,
}) %}
{% endif %}

<bolt-component-explorer initial-layout="{{ schemaForm.layout }}" template="{{ schemaForm.template }}" schema="{{ schema | json_encode() | raw | escape('html_attr') }}" form-data="{{ schemaForm.initialData | json_encode() | escape('html_attr') }}"></bolt-component-explorer>
</bolt-component-demo>
{% endif %}
{% set schemaUUID = random() %}
<script id="schema-{{ schemaUUID }}" type="application/json">
{{ schema | json_encode() | raw }}
</script>
<bolt-component-explorer schema-uuid="schema-{{ schemaUUID }}" initial-layout="{{ schemaForm.layout }}" template="{{ schemaForm.template }}" form-data="{{ schemaForm.initialData | json_encode() | escape('html_attr') }}">
<replace-with-children style="background-color: #F6F6F9; display: flex; margin: 0 auto; max-width: 1024px; min-height: 320px; -webkit-overflow-scroll': 'touch'">
<replace-with-children class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-1/1 u-bolt-width-6/10@xsmall"
style="background-color: #FFF; border: 1px solid rgba(0, 0, 0, .075); display: flex; position: relative;">
<replace-with-children class="u-bolt-padding-medium c-bds-component-explorer__demo-container" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-shadow: inset rgba(0, 0, 0, 0.1) 0px 0px 30px;">
Loading...
</replace-with-children>
</replace-with-children>
<replace-with-children class="u-bolt-flex-grow u-bolt-flex-shrink u-bolt-width-1/1 u-bolt-width-4/10@xsmall" style="flex-basis: 200px; overflow: visible; margin-left: auto; position: relative; display: flex;">
<replace-with-children style="-webkit-overflow-scroll: touch; padding: 0.5rem; border: 1px solid #d8d8da; width: 100%;">
{# <bolt-schema-form></bolt-schema-form> #}
</replace-with-children>
</replace-with-children>
</replace-with-children>
</bolt-component-explorer>
</bolt-component-demo>
{% endif %}
{% endset %}

{% set code %}{% spaceless %}
{{ usage }}
{% endspaceless %}{% endset %}


<div class="c-bds-docs t-bolt-xlight">
<div class="c-bds-docs__page-content">
<div class="c-bds-docs__page-intro">
{% include "@bolt/headline.twig" with {
size: "xxxlarge",
tag: "h1",
text: schema.title ? schema.title : "Component Title"
} only %}

{% if schema.description %}
{% include "@bolt/subheadline.twig" with {
size: "xlarge",
tag: "p",
text: schema.description
} only %}
{% endif %}

{% set componentData = get_data("@bolt-components-#{componentName}/package.json") %}
{% set componentVersion = componentData.version %}
{% set hasJs = componentData.main %}
{% set hasScss = componentData.sass %}
{% set componentTitle = componentData.name %}

{% set npmLink %}
{% include "@bolt-components-link/link.twig" with {
text: " #{componentTitle}",
url: "https://www.npmjs.com/package/#{componentTitle}",
target: "_blank"
} only %}
{% endset %}

{% include "@bolt-components-list/list.twig" with {
display: "inline",
separator: "solid",
items: [
include("@bolt-components-text/text.twig", {
text: "Last Updated: <code>#{componentVersion}</code>"
}),
include("@bolt-components-text/text.twig", {
text: "NPM Package: #{npmLink}",
}),

]
} only %}

{{ componentExplorer }}
</div>



<div class="c-bds-docs__page-content">
{% if readmeFile %}
<div class="c-bds-docs__readme">
{% include "@bolt/headline.twig" with {
Expand Down
Loading

0 comments on commit 3f93f79

Please sign in to comment.