Skip to content
Snippets Groups Projects
Commit 230c9970 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357708: Start a 3.0.x branch to support Single Directory Component...

Issue #3357708: Start a 3.0.x branch to support Single Directory Component (SDC) with Drupal ~10.1.0 in Vartheme BS5
parent 02f0b29a
No related branches found
No related tags found
No related merge requests found
Showing
with 0 additions and 764 deletions
title: "Atoms/Badge"
description:
component: "Documentation and examples for badges, our small count and labeling component."
## Canvas height
height: 150
## Color settings
color:
description: Bootstrap text and background class
table:
category: settings
default: text-bg-primary
options:
'Primary': 'text-bg-primary'
'Secondary': 'text-bg-secondary'
'Success': 'text-bg-success'
'Info': 'text-bg-info'
'warning': 'text-bg-warning'
'Danger': 'text-bg-danger'
'Light': 'text-bg-light'
'Dark': 'text-bg-dark'
## Padge HTML tag settings.
tag:
description: HTML tag for padge
table:
category: settings
default: 'span'
options:
'Span': 'span'
'Link': 'a'
'Div': 'div'
## Content settings.
content:
description: string
default: 'Badge'
table:
category: fields
## Content settings.
url:
description: string
default: ''
table:
category: fields
\ No newline at end of file
import config from "./badge.config.yml";
import badge from './badge.twig';
import twigCode from '!!raw-loader!./badge.twig';
import DrupalAttribute from 'drupal-attribute';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
export default {
title : config.title,
component: badge,
parameters: {
docs: {
container: DocsContainer,
page: DocsPage,
source: {code: twigCode},
description: config.description,
iframeHeight: config.height
},
},
argTypes: {
color: {
control: { type: "select" },
options: config.color.options,
description: config.color.description,
defaultValue: {summary: config.color.default},
table: config.color.table
},
tag: {
control: { type: "select" },
options: config.tag.options,
description: config.tag.description,
defaultValue: {summary: config.tag.default},
table: config.tag.table
},
content: {
content: { control: 'text' },
description: config.content.description,
defaultValue: {summary: config.content.default},
table: config.content.table
},
url: {
content: { control: 'text' },
description: config.url.description,
defaultValue: {summary: config.url.default},
table: config.url.table
}
}
};
export const Badge = (args) => (
badge({
attributes: new DrupalAttribute(),
utility_classes: [],
color: args.color ? args.color : 'text-bg-secondary',
tag: args.tag ? args.tag : 'span',
content: args.content ? args.content : 'Badge',
url: args.url ? args.url : '',
props: {...args},
})
);
Badge.args = {
color: "text-bg-secondary",
tag: 'span',
content: "Badge",
url: '',
};
{#
/**
* @file
* Template for a Badge component.
*
* Available config:
* - color: text-bg-primary | text-bg-secondary | text-bg-success | text-bg-info | text-bg-warning | text-bg-danger | text-bg-light | text-bg-dark
* - tag: The HTML tag to use for the bade. Defaults to span.
* - content: The content of the badge.
* - url: if anchor add a url, tag will be set to a automatically.
* - utility_classes: An array of utility classes.
*/
#}
{% set color = color ?? 'text-bg-secondary' %}
{% set classes = [
'badge',
color,
]|merge(utility_classes ? utility_classes : []) %}
{% set tag = tag ?? 'span' %}
{% if url %}
{% set tag = 'a' %}
{% set url = url|render %}
{% endif %}
{% if content %}
<{{tag}} {{ url ? 'href=' ~ url }} class="{{ classes|join(' ') }}">
{% block content %}
{{ content }}
{% endblock %}
</{{tag}}>
{% endif %}
title: "Atoms/Button"
description:
component: "Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more."
## Canvas height
height: 150
## Color settings
color:
description: Bootstrap class
table:
category: settings
default: primary
options:
'Primary': 'primary'
'Secondary': 'secondary'
'Success': 'success'
'Danger': 'danger'
'Warning': 'warning'
'Info': 'info'
'Dark': 'dark'
'Light': 'light'
'Link': 'link'
## Outline button settings
outline:
description: boolean
default: false
table:
category: settings
## Size settings
size:
description: Bootstrap class
table:
category: settings
default: ''
options:
Default: ''
Small: btn-sm
Large: btn-lg
## Disabled button settings
disabled:
description: boolean
default: false
table:
category: settings
## Content settings.
content:
description: string
default: 'Button'
table:
category: fields
\ No newline at end of file
import config from './button.config.yml';
import button from './button.twig';
import twigCode from '!!raw-loader!./button.twig';
import DrupalAttribute from 'drupal-attribute';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
export default {
title : config.title,
component: button,
options: { showPanel: true },
parameters: {
docs: {
container: DocsContainer,
page: DocsPage,
source: {code: twigCode},
description: config.description,
iframeHeight: config.height
},
},
argTypes: {
color: {
control: { type: "select" },
options: config.color.options,
description: config.color.description,
defaultValue: {summary: config.color.default},
table: config.color.table,
},
outline: {
control: { type: 'boolean' },
description: config.outline.description,
defaultValue: {summary: config.outline.default},
table: config.outline.table,
},
size: {
control: { type: "select" },
options: config.size.options,
description: config.size.description,
defaultValue: {summary: config.size.default},
table: config.size.table,
},
disabled: {
control: { type: 'boolean' },
description: config.disabled.description,
defaultValue: {summary: config.disabled.default},
table: config.disabled.table,
},
content: {
content: { control: 'text' },
description: config.content.description,
defaultValue: {summary: config.content.default},
table: config.content.table,
}
},
};
export const Button = (args) => {
return (
button({
attributes: new DrupalAttribute(),
utility_classes: [],
color: args.color ? args.color : 'primary',
outline: args.outline ? args.outline : false,
size: args.size ? args.size : '',
disabled: args.disabled ? 'disabled' : '',
content: args.content
})
)
}
Button.args = {
color: 'primary',
outline: false,
size: "",
disabled: false,
content: 'Button'
};
{#
/**
* @file
* Template for a button component.
*
* Available config:
* - color: primary | secondary | success | danger | warning | info | dark | light | link
* - outline: true | false
* - content: string
* - size: btn-sm | btn-md
* - attributes: Attributes array.
* - utility_classes: An array of utility classes.
*/
#}
{% set button_color = '' %}
{% if outline == true %}
{% set button_color = 'btn-outline-' ~ color %}
{% else %}
{% set button_color = 'btn-' ~ color %}
{% endif %}
{% set size = size ? size : '' %}
{% set disabled = disabled ? 'disabled' : '' %}
{% set classes = [
'btn',
button_color,
size,
disabled,
]|merge(utility_classes) %}
<button {{ attributes.addClass(classes) }}>
{% block content %}
{{ content }}
{% endblock %}
</button>
title: "Atoms/CloseButton"
description:
component: "A generic close button for dismissing content like modals and alerts."
## Canvas height
height: 150
## Size settings
size:
description: Bootstrap class
table:
category: settings
default: ''
options:
Default: ''
Small: btn-sm
Mediam: btn-md
Large: btn-lg
import config from './closeButton.config.yml';
import closeButton from './closeButton.twig';
import twigCode from '!!raw-loader!./closeButton.twig';
import DrupalAttribute from 'drupal-attribute';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
export default {
title : config.title,
component: CloseButton,
options: { showPanel: false },
parameters: {
docs: {
container: DocsContainer,
page: DocsPage,
source: {code: twigCode},
description: config.description,
iframeHeight: config.height
},
},
argTypes: {
size: {
control: { type: "select" },
options: config.size.options,
description: config.size.description,
defaultValue: {summary: config.size.default},
table: config.size.table,
}
},
};
export const CloseButton = (args) => {
return (
closeButton({
attributes: new DrupalAttribute(),
utility_classes: [],
size: args.size ? args.size : '',
})
)
}
CloseButton.args = {
size: ""
};
{#
/**
* @file
* Template for a button component.
*
* Available config:
* - size: btn-sm | btn-md | btn-lg
* - attributes: Attributes array.
* - utility_classes: An array of utility classes.
*/
#}
{% set size = size ? size : '' %}
{% set disabled = disabled ? 'disabled' : '' %}
{% set classes = [
'btn',
'btn-close',
size,
]|merge(utility_classes) %}
<button type="button" {{ attributes.addClass(classes) }} aria-label="Close"></button>
\ No newline at end of file
{#
* Column component.
* Available config:
- attributes: Drupal attributes.
- content: The content that will be inside row.
#}
<div {{ attributes }}>
{% block content %}
{{ content }}
{% endblock %}
</div>
\ No newline at end of file
{#
* Container component.
* Available config:
* - attributes: Drupal attributes.
* - withContainer: Boolean variable to add container class or not.
* - content: The content block that will be inside Container component.
* - utility_classes: An array of classes.
* - classes: The main array of classes for Container component.
#}
{% set classes = []|merge(utility_classes) %}
{% if withContainer %}
{% set classes = classes|merge(['container']) %}
{% endif %}
<div {{ attributes.addClass(classes) }}>
{% block children %}
{{ children }}
{% endblock %}
</div>
{#
/**
* @file
* Template for the comment field.
*/
#}
<section{{ attributes }}>
{{ title_prefix }}
{{ title_suffix }}
{{ comments }}
{% if comment_form %}
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<div class="card">
<div class="card-header">
{{ 'Add new comment'|t }}
</div>
<div class="card-body">
{{ comment_form }}
</div>
</div>
</div>
</div>
{% endif %}
</section>
{#
/**
* @file
* Template for field_tags.
*/
#}
{%
set classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
]
%}
{%
set title_classes = [
'field__label',
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes.addClass(classes, 'field__items') }}>
{% for item in items %}
<div{{ item.attributes.addClass('field__item') }}>
{% include '@atoms/badge/badge.twig' with {
bg: 'primary',
color: 'white',
content: item.content['#title'],
url: item.content['#url'],
} %}
</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes.addClass(classes, 'field__item') }}>
{% include '@atoms/badge/badge.twig' with {
bg: 'primary',
color: 'white',
content: item.content['#title'],
url: item.content['#url'],
} %}
</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes.addClass(classes) }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class="field__items">
{% endif %}
{% for item in items %}
{% include '@atoms/badge/badge.twig' with {
bg: 'primary',
color: 'white',
content: item.content['#title'],
url: item.content['#url'],
} %}
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
{#
/**
* @file
* Template for a field.
*/
#}
{%
set title_classes = [
'field__label',
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}
import config from './input-checkbox.config.yml';
import checkbox from './input-checkbox.twig';
import twigCode from '!!raw-loader!./input-checkbox.twig';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
export default {
title : config.title,
component: checkbox,
options: { showPanel: true },
parameters: {
docs: {
container: DocsContainer,
page: DocsPage,
source: {code: twigCode},
description: config.description,
iframeHeight: config.height
},
},
argTypes: {
size: {
control: { type: "select" },
options: config.size.options,
description: config.size.description,
defaultValue: {summary: config.size.default},
table: config.size.table,
},
form_control: {
control: {type: "boolean"},
description: config.form_control.description,
defaultValue: {summary: config.form_control.default},
table: config.form_control.table
}
},
};
// Checkbox input story
export const Checkbox = (args) => {
return (
checkbox({
type: 'checkbox',
size: args.size ? args.size : '',
form_control: args.form_control,
utility_classes: [],
})
)
}
Checkbox.args = {
size: '',
form_control: false,
};
title: "Atoms/Form"
description:
component: "Give textual form controls 'input' an upgrade with custom styles, sizing, focus states, and more."
## Canvas height
height: 150
## Size settings
size:
description: Bootstrap class
table:
category: settings
default: ''
options:
Default: ''
Small: form-control-sm
Large: form-control-lg
## Form control class settings
form_control:
description: boolean
default: true
table:
category: 'settings'
\ No newline at end of file
{#
/**
* @file
* Theme override for an 'input' #type form element.
*
* Available variables:
* - attributes: A list of HTML attributes for the input element.
* - children: Optional additional rendered elements.
*
* @see template_preprocess_input()
* for checkboxes and radio buttons.
* - utility_classes: An array of utility classes.
* - form_control: A class 'form-control' related to input type.
*/
#}
{% set form_control = form_control ? ['form-control'] : [] %}
{% set utility_classes = utility_classes ? utility_classes : [] %}
{% set type = type ?? 'text' %}
{% set size = size ?? '' %}
{% set placeholder = placeholder ?? '' %}
{% set classes = []|merge(form_control)|merge(utility_classes)|merge([size]) %}
{# To render drupal Input component #}
{% if attributes %}
<input{{ attributes.addClass(classes) }} />{{ children }}
{# To render Storybook Input component #}
{% else %}
<input type="{{ type }}" class="{{ classes|join(' ') }}" placeholder="{{ placeholder }}" />
{% endif %}
import config from './input-color.config.yml';
import color from './input-color.twig';
import twigCode from '!!raw-loader!./input-color.twig';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
export default {
title : config.title,
component: color,
options: { showPanel: true },
parameters: {
docs: {
container: DocsContainer,
page: DocsPage,
source: {code: twigCode},
description: config.description,
iframeHeight: config.height
},
},
argTypes: {
size: {
control: { type: "select" },
options: config.size.options,
description: config.size.description,
defaultValue: {summary: config.size.default},
table: config.size.table,
},
form_control: {
control: {type: "boolean"},
description: config.form_control.description,
defaultValue: {summary: config.form_control.default},
table: config.form_control.table
}
},
};
// Color input story
export const Color = (args) => {
return (
color({
type: 'color',
size: args.size ? args.size : '',
form_control: args.form_control,
utility_classes: [],
})
)
}
Color.args = {
size: '',
form_control: false,
};
title: "Atoms/Form"
description:
component: "Give textual form controls 'input' an upgrade with custom styles, sizing, focus states, and more."
## Canvas height
height: 150
## Size settings
size:
description: Bootstrap class
table:
category: settings
default: ''
options:
Default: ''
Small: form-control-sm
Large: form-control-lg
## Form control class settings
form_control:
description: boolean
default: true
table:
category: 'settings'
\ No newline at end of file
{#
/**
* @file
* Theme override for an 'input' #type form element.
*
* Available variables:
* - attributes: A list of HTML attributes for the input element.
* - children: Optional additional rendered elements.
*
* @see template_preprocess_input()
* for checkboxes and radio buttons.
* - utility_classes: An array of utility classes.
* - form_control: A class 'form-control' related to input type.
*/
#}
{% set form_control = form_control ? ['form-control'] : [] %}
{% set utility_classes = utility_classes ? utility_classes : [] %}
{% set type = type ?? 'text' %}
{% set size = size ?? '' %}
{% set placeholder = placeholder ?? '' %}
{% set classes = []|merge(form_control)|merge(utility_classes)|merge([size]) %}
{# To render drupal Input component #}
{% if attributes %}
<input{{ attributes.addClass(classes) }} />{{ children }}
{# To render Storybook Input component #}
{% else %}
<input type="{{ type }}" class="{{ classes|join(' ') }}" placeholder="{{ placeholder }}" />
{% endif %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment