Skip to content

Commit 24dd96d

Browse files
medevodmedevod
medevod
and
medevod
authored
PR - feat extend navs with nav buttons (#75)
* feat extend navs with nav buttons * update pkg version * doc update nav section * fix ci bump parcel * fix ci build * fix mg-nav wrap whitespace * chore cleanup * nav buttons : adding wrapping for nav buttons * chore reorg and cleanup navs * BREACKING CHANGE: mg-nav simplify markup by removing div container * BREAKING CHANGE: mg-nav simplify markup by removing div container * chore linter * default styling for nav buttons * feat add display helpers * fix nav-buttons fit display * Update azure-cdn-deploy.yml * Update azure-cdn-deploy.yml * fix nav inline flex overflow * chore cleanup * update build pipeline * build fix * fix purge path * Update action.yml * Update azure-cdn-deploy.yml * fix conditional syntax issue in composite action * fix grid effect priority * doc add nav example * nav adjust default styling * colors: adjust default back colors * update dist files * nav adjust default styling * navbutton change default style * mg tabs add delimiter * adjuste navs default styling * fix linter * neutral default style for mg nav buttons * doc updat for new nav markup * mg nav button remove default content aligment * doc reorg sections * CI/CD fix build lib * fix cdn purge recursivity * fix nav default wrapping behavior * fix lint * BREAKING CHANGE: mg-toggle standardized markup for specific icon * chore: naming mixin to toggle effect * feat add some display helpers * update dist file * chore * complete documentation * fix linter --------- Co-authored-by: medevod <medevod@github.com> Co-authored-by: medevod <devteam@evodim.com>
1 parent 72506e9 commit 24dd96d

30 files changed

Lines changed: 450 additions & 360 deletions

‎.github/actions/build-action/action.yml‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,36 @@ runs:
2828
- name: get-npm-version
2929
id: package-version
3030
uses: martinbeentjes/npm-get-version-action@v1.3.1
31-
- name: "build minified main css library, js plugins and demo in standalone mode"
31+
- name: BETA-PREVIEW build minified main css library, js plugins and demo in standalone mode
3232
if: ${{ inputs.stage != 'release' }}
3333
env:
3434
PACKAGE_VERSION: v${{ steps.package-version.outputs.current-version }}-${{ inputs.stage }}
3535
run: |
3636
npm install
3737
npm run lint
38-
npm run build
38+
npm run build:lib
3939
parcel build --target demo --no-source-maps --no-content-hash --public-url ./v${{ steps.package-version.outputs.current-version }}-${{ inputs.stage }}
4040
npm run test --if-present
4141
shell: bash
42-
- name: "build minified main css library, js plugins and demo in standalone mode"
43-
if: ${{ inputs.stage == 'release' }} && {{ inputs.release_update_only == "false" }}
42+
- name: "RELEASE - build minified main css library, js plugins and demo in standalone mode"
43+
if: ${{ inputs.stage == 'release' && inputs.release_update_only == 'false' }}
4444
env:
4545
PACKAGE_VERSION: v${{ steps.package-version.outputs.current-version }}
4646
run: |
4747
npm install
4848
npm run lint
49-
npm run build
49+
npm run build:lib
5050
parcel build --target demo --no-source-maps --no-content-hash --public-url ./v${{ steps.package-version.outputs.current-version }}
5151
npm run test --if-present
5252
shell: bash
53-
- name: "update only release demo page"
54-
if: ${{ inputs.stage == 'release' }} && {{ inputs.release_update_only == "true" }}
53+
- name: "RELEASE - update only release demo page"
54+
if: ${{ inputs.stage == 'release' && inputs.release_update_only == 'true' }}
5555
env:
5656
PACKAGE_VERSION: v${{ steps.package-version.outputs.current-version }}
5757
run: |
5858
npm install
5959
npm run lint
60-
npm run build
60+
npm run build:lib
6161
parcel build --target demo --no-source-maps --no-content-hash --public-url ./
6262
npm run test --if-present
6363
shell: bash

‎.github/actions/deploy-action/action.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ runs:
2929
az extension add -n storage-preview -y
3030
az storage blob upload-batch -s $DEMO_SOURCE_DIR -d $DEMO_DEST_DIR --account-name $ACCOUNT_NAME
3131
az storage blob upload-batch -s $DIST_SOURCE_DIR -d $DIST_DEST_DIR --account-name $ACCOUNT_NAME
32-
az cdn endpoint purge -g rg-devops -n mgplus-demo --profile-name cdn-evo --content-paths '/${{ inputs.package_version }}'
33-
az cdn endpoint purge -g rg-devops -n cdn-mgplus --profile-name cdn-evo2 --content-paths '/${{ inputs.package_version }}'
32+
az cdn endpoint purge -g rg-devops -n mgplus-demo --profile-name cdn-evo --content-paths /${{ inputs.package_version }}/*
33+
az cdn endpoint purge -g rg-devops -n cdn-mgplus --profile-name cdn-evo2 --content-paths /${{ inputs.package_version }}/*

‎.github/workflows/azure-cdn-deploy.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ jobs:
1818
deploy_pullrequest:
1919
if: github.event_name == 'pull_request' && github.event.action != 'closed'
2020
runs-on: ubuntu-latest
21-
name: CDN - deploy PR version
21+
name: CDN - deploy beta version
2222
permissions:
2323
contents: read
2424
id-token: write
@@ -40,8 +40,8 @@ jobs:
4040
id: "deploy_action"
4141
uses: ./.github/actions/deploy-action
4242
with:
43-
package_version: ${{ steps.build_action.outputs.package_version }}
44-
stage: "beta-${{ github.event.pull_request.number }}"
43+
package_version: "${{ steps.build_action.outputs.package_version }}"
44+
stage: "beta"
4545
deploy_preview:
4646
if: github.event_name == 'push' && startsWith(github.ref, 'refs/heads/master') == true
4747
runs-on: ubuntu-latest

‎demo/index.html‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,11 @@
2626
<i class="mg-icon svg-icon-darkmode"></i>
2727
</button>
2828
<div class="mg-dropdown--content">
29-
<div class="mg-nav">
30-
<ul>
31-
<li data-toggle="theme" data-value="light">Light</li>
32-
<li data-toggle="theme" data-value="dark">Dark</li>
33-
<li data-toggle="theme" data-value="auto">Auto</li>
34-
</ul>
35-
</div>
29+
<ul class="mg-nav">
30+
<li data-toggle="theme" data-value="light">Light</li>
31+
<li data-toggle="theme" data-value="dark">Dark</li>
32+
<li data-toggle="theme" data-value="auto">Auto</li>
33+
</ul>
3634
</div>
3735
</div>
3836
<div class="mg-dropdown">
@@ -64,10 +62,8 @@
6462
<i class="mg-icon mg-icon--3xl icon-menu"></i>
6563
</button>
6664
<div class="mg-dropdown--content mg-right">
67-
<div class="mg-nav">
68-
<ul data-toggle="navlinks" class="mg-text-bold">
69-
</ul>
70-
</div>
65+
<ul data-toggle="navlinks" class="mg-nav mg-text-bold">
66+
</ul>
7167
</div>
7268
</div>
7369

@@ -108,10 +104,8 @@ <h2>A micro CSS library </h2>
108104
<div
109105
class="mg-fixed mg-top5 mg-right mg-bg-initial mg-rounded mg-border-thin mg-marg-l1 mg-marg-r1 mg-pad1 mg-xl-hidden">
110106
<div class=" mg-max-h80vh mg-overflow-y-auto">
111-
<div class="mg-nav">
112-
<ul data-toggle="navlinks" class="mg-text-bold">
113-
</ul>
114-
</div>
107+
<ul data-toggle="navlinks" class="mg-nav mg-text-bold">
108+
</ul>
115109
</div>
116110
</div>
117111
<main class="mg-container">
@@ -130,7 +124,6 @@ <h2>Examples</h2>
130124
<include src="demo/sections/colors-section.html"></include>
131125
<include src="demo/sections/dropdown-section.html"></include>
132126
<include src="demo/sections/form-section.html"></include>
133-
<include src="demo/sections/grid-section.html"> </include>
134127
<include src="demo/sections/group-section.html"></include>
135128
<include src="demo/sections/helpers-section.html"></include>
136129
<include src="demo/sections/icons-section.html"></include>
@@ -141,6 +134,7 @@ <h2>Examples</h2>
141134
<include src="demo/sections/progress-section.html"></include>
142135
<include src="demo/sections/radio-section.html"></include>
143136
<include src="demo/sections/range-section.html"></include>
137+
<include src="demo/sections/grid-section.html"> </include>
144138
<include src="demo/sections/responsive-display-section.html"></include>
145139
<include src="demo/sections/select-section.html"> </include>
146140
<include src="demo/sections/tab-section.html"></include>

‎demo/sections/alert-section.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<section id="alert">
22
<h2>Alert</h2>
3+
<code>mg-alert</code>
34
<p>Alerts are used to display important information to the user. They are used to display important information to the
45
user. They are used to display important information to the user.</p>
56
<div data-toggle="htmlpreview">

‎demo/sections/badge-section.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<section id="badges">
22
<h2>Badges</h2>
3+
<code>mg-badge</code>
34
<p>Badges are used to display important information to the user. They are used to display important information to the
45
user. They are used to display important information to the user.</p>
56
<h3>Default appearance</h3>

‎demo/sections/check-section.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<section id="check">
22
<h2>Check</h2>
3+
<code>mg-check</code>
34
<p>You will find examples of
45
checkboxes in their default, checked, and disabled states.</p>
56
<div class="mg-row" id="check-example" data-toggle="htmlpreview">

‎demo/sections/collapse-section.html‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,50 @@
11
<section id="Collapse">
22
<h2>Collapse</h2>
3+
<code>mg-collapse +/-[opened]</code>
34
<p>Collapsible elements are used to hide or show content based on user interaction. Below, you will find examples of
45
collapsible elements in their default state, as well as examples of how to trigger the collapse and expand
56
functionality.</p>
6-
<i>Collapse needs js to toggle class visibility</i>
7-
<div class="mg-col mg-m6" id="collapse-example" data-toggle="htmlpreview">
7+
<p>Place <code>mg-collapse</code> class to a clickable element</p>
8+
<p>Place <code>mg-collapse--content</code> class to a sibling content element</p>
9+
<p><code>opened</code> class will toggle visibility of the collapsible content inside
10+
<code>mg-collapse--content</code>
11+
</p>
12+
<p>Place special inline icon <code>mg-icon-collapse</code> to reflect state of collapsible content</p>
13+
14+
15+
<div class="mg-col mg-m6" data-toggle="htmlpreview">
816
<button class="mg-button mg-button--outline mg-collapse mg-icon-collapse" data-toggle="collapse">collapse
917
Button</button>
1018
<div class="mg-collapse--content">
1119
Content 1
1220
</div>
21+
</div>
22+
23+
<div data-toggle="htmlpreview">
1324
<span class="mg-collapse mg-icon-collapse" data-toggle="collapse">Collapse div</span>
1425
<div class="mg-collapse--content">
15-
Content 2
26+
div content
1627
</div>
1728
</div>
29+
</div>
1830
<h3>Collapsible navs</h3>
19-
<div id="collapse-navs-example" data-toggle="htmlpreview" data-toggle="nav">
20-
<div class="mg-nav mg-m6" data-toggle="nav">
21-
<ul>
22-
<li class="active"><a href="#home">Home</a></li>
23-
<li><a href="#news">News</a></li>
24-
<li class="mg-collapse mg-icon-nav" data-toggle="collapse"><a href="#contact">Contact</a>
25-
</li>
26-
<ul class="mg-collapse--content">
31+
Here is a composition of navs and collapse elements
32+
<div data-toggle="htmlpreview" data-toggle="nav">
33+
<ul class="mg-nav" data-toggle="nav">
34+
<li class="active"><a href="#home">Home</a></li>
35+
<li><a href="#news">News</a></li>
36+
<li class="mg-collapse mg-icon-nav" data-toggle="collapse"><a href="#contact">Contact</a>
37+
</li>
38+
<div class="mg-collapse--content">
39+
<ul class="mg-nav">
2740
<li>Contact sales</li>
2841
<li>Contact customer</li>
2942
<li>Contact care</li>
3043
</ul>
31-
<li><a href="#about">About</a></li>
32-
</ul>
33-
</div>
44+
</div>
45+
<li><a href="#about">About</a></li>
46+
</ul>
47+
3448
</div>
3549

3650
</section>

‎demo/sections/dropdown-section.html‎

Lines changed: 48 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,62 @@ <h2>Dropdown</h2>
33
<p>Dropdowns are used to display a
44
list of options to the user. Below, you will find examples of dropdowns in their default state, as well as examples
55
of how to trigger the dropdown functionality.</p>
6-
<i>Dropdown needs js to toggle class visibility</i>
7-
<div data-toggle="htmlpreview">
8-
<div class="mg-dropdown" role="menu" id="dropdown-example">
6+
<p>Place <code>mg-dropdown</code> as container class</p>
7+
<p>Inside <code>mg-dropdown</code> place a button element with special icon <code>mg-icon-dropdown</code></p>
8+
<p>Place <code>mg-dropdown--content</code> after button element</p>
9+
<p>Usualy, place a <code>mg-nav</code> component inside <code>mg-dropdown--content</code> to build a menu</p>
910

11+
12+
<div>
13+
<div class="mg-dropdown" role="menu" data-toggle="htmlpreview">
1014
<button title="choose a car" class="mg-icon-dropdown" data-toggle="dropdown">
1115
Choose a car
1216
</button>
1317
<div class="mg-dropdown--content">
14-
<div class="mg-nav">
15-
<ul>
16-
<li data-value="audi">Audi</li>
17-
<li data-value="bmw">BMW</li>
18-
<li data-value="citroen">Citroen</li>
19-
<li data-value="ford">Ford</li>
20-
<li data-value="honda">Honda</li>
21-
<li data-value="jaguar">Jaguar</li>
22-
<li data-value="land-rover">Land Rover</li>
23-
<li data-value="mini">Mini</li>
24-
<li data-value="nissan">Nissan</li>
25-
<li data-value="toyota">Toyota</li>
26-
<li data-value="volvo">Volvo</li>
27-
</ul>
28-
</div>
18+
<ul class="mg-nav">
19+
<li data-value="audi">Audi</li>
20+
<li data-value="bmw">BMW</li>
21+
<li data-value="citroen">Citroen</li>
22+
<li data-value="ford">Ford</li>
23+
<li data-value="honda">Honda</li>
24+
<li data-value="jaguar">Jaguar</li>
25+
<li data-value="land-rover">Land Rover</li>
26+
<li data-value="mini">Mini</li>
27+
<li data-value="nissan">Nissan</li>
28+
<li data-value="toyota">Toyota</li>
29+
<li data-value="volvo">Volvo</li>
30+
</ul>
2931
</div>
3032
</div>
31-
<div class="row">
32-
<div class="mg-dropdown" role="menu" data-value="bmw" id="dropdown-example2">
33-
<button title="left side" data-toggle="dropdown" class="mg-icon-dropdown">
34-
left side
35-
</button>
36-
<div class="mg-dropdown--content mg-left mg-nav">
37-
<ul>
38-
<li data-value="audi">Audi</li>
39-
<li data-value="bmw">BMW</li>
40-
<li data-value="mercedes">Mercedes long! very very long!</li>
41-
</ul>
33+
<div>
34+
<h3>Positioning options</h3>
35+
<code>mg-dropdown--content</code> + <code>[mg-left|mg-right]</code>
36+
<p>Add to <code>mg-dropdown--content</code> <code>mg-left</code> or <code>mg-right</code> to adjust left or right
37+
content according to the button position</p>
38+
<div class="mg-row mg-x--between" data-toggle="htmlpreview">
39+
<div class="mg-dropdown" role="menu" data-value="bmw">
40+
<button title="left side" data-toggle="dropdown" class="mg-icon-dropdown">
41+
left side
42+
</button>
43+
<div class="mg-dropdown--content mg-left">
44+
<ul class="mg-nav">
45+
<li data-value="audi">Audi</li>
46+
<li data-value="bmw">BMW</li>
47+
<li data-value="mercedes">Mercedes long! very very long!</li>
48+
</ul>
49+
</div>
4250
</div>
43-
</div>
44-
<div class="mg-dropdown mg-right" role="menu" data-value="bmw" id="dropdown-example3">
45-
<button title="right side" data-toggle="dropdown" class="mg-icon-dropdown">
46-
right side
47-
</button>
48-
<div class="mg-dropdown--content mg-right mg-nav">
49-
<ul>
50-
<li data-value="audi">Audi</li>
51-
<li data-value="bmw">BMW</li>
52-
<li data-value="mercedes">Mercedes long! very long!</li>
53-
</ul>
51+
<div class="mg-dropdown" role="menu" data-value="bmw">
52+
<button title="right side" data-toggle="dropdown" class="mg-icon-dropdown">
53+
right side
54+
</button>
55+
<div class="mg-dropdown--content mg-right">
56+
<ul class="mg-nav">
57+
<li data-value="audi">Audi</li>
58+
<li data-value="bmw">BMW</li>
59+
<li data-value="mercedes">Mercedes long! very long!</li>
60+
</ul>
61+
</div>
5462
</div>
5563
</div>
5664
</div>

‎demo/sections/form-section.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ <h2>Forms</h2>
1919
<label class="mg-toggle">
2020
on
2121
<input type="checkbox" checked />
22-
<span class="mg-icon-toggle"></span>
22+
<span class="mg-toggle--icon"></span>
2323
</label>
2424
<label class="mg-toggle">
2525
off
2626
<input type="checkbox" checked />
27-
<span class="mg-icon-toggle"></span>
27+
<span class="mg-toggle--icon"></span>
2828
</label>
2929
</div>
3030
<label>Checkboxes</label>

0 commit comments

Comments
 (0)