Merge pull request #60 from bindable-ui/center-cover-play-nice

Center cover play nice
bindable-ui · Jun 23, 2020 · a659c71 · a659c71
2 parents c8a1378 + 2cc57cd
commit a659c71
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 42 deletions.
diff --git a/dev-app/app.html b/dev-app/app.html
@@ -51,7 +51,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.2.2"
+                        title="v1.2.3"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>

diff --git a/dev-app/routes/components/navs/horizontal/horizontal-nav/properties/index.html b/dev-app/routes/components/navs/horizontal/horizontal-nav/properties/index.html
@@ -52,9 +52,9 @@
 
         <div>
             <l-stack spacing="var(--s-3)">
-                <c-h3>background-color</c-h3>
+                <c-h3>background-color &amp; text-transform</c-h3>
                 <c-code-sample>
-                    <c-nav-horizontal background-color="var(--c_black)">
+                    <c-nav-horizontal background-color="var(--c_black)" text-transform="uppercase">
                         <c-nav-horizontal-item title="Nav Link 1" href="http://google.com"></c-nav-horizontal-item>
                         <c-nav-horizontal-item title="Nav Link 2" href="http://google.com"></c-nav-horizontal-item>
                     </c-nav-horizontal>

diff --git a/dev-app/routes/components/navs/horizontal/horizontal-nav/properties/index.ts b/dev-app/routes/components/navs/horizontal/horizontal-nav/properties/index.ts
@@ -71,5 +71,11 @@ export class HorizontalNav {
             name: 'state',
             value: 'hidden',
         },
+        {
+            default: 'unset',
+            description: 'Set the text transform for the nav.',
+            name: 'text-transform',
+            value: 'capitalize | uppercase | lowercase | inital | inherit | unset',
+        },
     ];
 }
diff --git a/dev-app/routes/layouts/center/index.html b/dev-app/routes/layouts/center/index.html
@@ -65,6 +65,30 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <!-- You will to set the container height with other layout components or in your own way. -->
+                        <div style="height: 300px">
+    <l-center
+        max-width="60ch"
+        text-center.bind="true"
+        fill-space.bind="true"
+    >
+        <l-box
+            background="var(--c_darkGray)"
+            fill-space.bind="true"
+        >
+            I fill all the space that I am put in.
+        </l-box>
+    </l-center>
+</div></c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
             	<l-stack spacing="var(--s-3)">
                     <c-h3>max-width</c-h3>
@@ -78,4 +102,4 @@
                     </c-code-sample>
                 </l-stack>
             </div>
-</template>
+</template>
diff --git a/dev-app/routes/layouts/center/index.ts b/dev-app/routes/layouts/center/index.ts
@@ -35,6 +35,12 @@ export class CenterProperties {
             name: 'intrinsic',
             value: 'boolean',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the main center div.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: 'none',
             description: 'Set the max width size of the centered item.',

diff --git a/dev-app/routes/layouts/cover/index.html b/dev-app/routes/layouts/cover/index.html
@@ -42,7 +42,10 @@
                                     <div>Sidebar Area</div>
                                 </l-stack>
                             </l-box>
-                            <l-box background="var(--c_darkGray)">
+                            <l-box
+                                background="var(--c_darkGray)"
+                                fill-space.bind="true"
+                            >
                                 <l-cover>
                                     <div>I am at the top</div>
                                     <div data-value="cover">
@@ -75,7 +78,10 @@
                                     <div>Sidebar Area</div>
                                 </l-stack>
                             </l-box>
-                            <l-box background="var(--c_darkGray)">
+                            <l-box
+                                background="var(--c_darkGray)"
+                                fill-space.bind="true"
+                            >
                                 <l-cover center.bind="true">
                                     <div>I am at the top</div>
                                     <div data-value="cover">
@@ -110,7 +116,10 @@
                                     <div>Sidebar Area</div>
                                 </l-stack>
                             </l-box>
-                            <l-box background="var(--c_darkGray)">
+                            <l-box
+                                background="var(--c_darkGray)"
+                                fill-space.bind="true"
+                            >
                                 <l-cover padding-top="var(--s3)" padding-bottom="var(--s3)">
                                     <div>I am at the top</div>
                                     <div data-value="cover">
@@ -145,8 +154,14 @@
                                     <div>Sidebar Area</div>
                                 </l-stack>
                             </l-box>
-                            <l-box background="var(--c_darkGray)">
-                                <l-cover scrolling.bind="true" spacing="medium">
+                            <l-box
+                                background="var(--c_darkGray)"
+                                fill-space.bind="true"
+                            >
+                                <l-cover
+                                    scrolling.bind="true"
+                                    spacing="medium"
+                                >
                                     <div>I am at the top</div>
                                     <div data-value="cover" style="height: 300px; flex: 1 0 0px;">
                                         Setting height on this container will happen from the surrounding layout option.
@@ -198,7 +213,10 @@
                                     <div>Sidebar Area</div>
                                 </l-stack>
                             </l-box>
-                            <l-box background="var(--c_darkGray)">
+                            <l-box
+                                background="var(--c_darkGray)"
+                                fill-space.bind="true"
+                            >
                                 <l-cover top-gutter="var(--s4)">
                                     <div>I am at the top</div>
                                     <div data-value="cover">

diff --git a/dev-app/routes/layouts/overview/index.html b/dev-app/routes/layouts/overview/index.html
@@ -170,6 +170,20 @@
                             </l-cover>
                         </a>
                     </l-box>
+                    <l-box background="var(--c_darkGray)">
+                        <a href="#/layouts/icon">
+                            <l-cover top-gutter="var(--s1)" bottom-gutter="var(--s1)">
+                                <div data-value="cover">
+                                    <l-center max-width="100px" text-center.bind="true">
+                                    <l-icon icon="cog">■■■■</l-icon>
+                                    </l-center>
+                                </div>
+                                <l-center text-center.bind="true">
+                                    <c-h3>Icon</c-h3>
+                                </l-center>
+                            </l-cover>
+                        </a>
+                    </l-box>
                     <l-box background="var(--c_darkGray)">
                         <a href="#/layouts/sidebar">
                             <l-cover top-gutter="var(--s1)" bottom-gutter="var(--s1)">

diff --git a/dev-app/stylesheets/fonts.css b/dev-app/stylesheets/fonts.css
@@ -10,7 +10,6 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 /**
  *  HAAS GROTESK DISPLAY
  *  HELVETICA NEUE COND
- *  PROXIMA NOVA
  */
 
 
@@ -68,31 +67,3 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     font-family: 'HN_67_Cond_It';
     src: url('../assets/fonts/HN67ConIt.woff') format('woff');
 }
-
-
-
-
-
-/*------------------------------------*\
-    !PROXIMA NOVA
-\*------------------------------------*/
-
-@font-face{
-    font-family: 'Proxima_Nova_Reg';
-    src: url('../assets/fonts/ProximaNova-Reg-webfont.woff') format('woff');
-}
-
-@font-face{
-    font-family: 'Proxima_Nova_Reg_Italic';
-    src: url('../assets/fonts/ProximaNova-RegIt-webfont.woff') format('woff');
-}
-
-@font-face{
-    font-family: 'Proxima_Nova_Semi_Bold';
-    src: url('../assets/fonts/ProximaNova-Sbold-webfont.woff') format('woff');
-}
-
-@font-face{
-    font-family: 'Proxima_Nova_Bold';
-    src: url('../assets/fonts/ProximaNova-Bold-webfont.woff') format('woff');
-}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"

diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.css b/src/components/navs/c-nav-horizontal/c-nav-horizontal.css
@@ -36,6 +36,10 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     list-style: none;
 }
 
+.nav-horizontal ul li{
+    text-transform: var(--nav-text-transform);
+}
+
 
 
 

diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
@@ -11,7 +11,10 @@
             ${styles.navHorizontal}
             ${styles[size]}
         "
-        css="--nav-background-color: ${backgroundColor}"
+        css="
+            --nav-background-color: ${backgroundColor};
+            --nav-text-transform: ${textTransform};
+        "
         hide.bind="state === 'hidden'"
     >
         <button

diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.ts b/src/components/navs/c-nav-horizontal/c-nav-horizontal.ts
@@ -21,6 +21,8 @@ export class CNavHorizontal {
     public align = 'center';
     @bindable
     public justify = 'start';
+    @bindable
+    public textTransform = 'unset';
 
     public styles = styles;
     public mobileNavOpen;

diff --git a/src/layouts/l-center/l-center.css b/src/layouts/l-center/l-center.css
@@ -30,6 +30,11 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     max-width: var(--center-max-width);
 }
 
+.fill-space,
+.fill-space l-cover{
+    height: 100%;
+}
+
 
 
 

diff --git a/src/layouts/l-center/l-center.html b/src/layouts/l-center/l-center.html
@@ -11,6 +11,7 @@
             ${styles.center}
             ${intrinsic ? styles.intrinsic : ''}
             ${textCenter ? styles.textCenter : ''}
+            ${fillSpace ? styles.fillSpace : ''}
         "
         css="
             --center-max-width: ${maxWidth};

diff --git a/src/layouts/l-center/l-center.test.ts b/src/layouts/l-center/l-center.test.ts
@@ -45,6 +45,22 @@ describe('l-center component', () => {
             }
         });
 
+        it('is fill-space endabled', async done => {
+            component = StageComponent.withResources()
+                .inView('<l-center fill-space.bind="isFillSpace"></l-center>')
+                .boundTo({
+                    isFillSpace: 1,
+                });
+
+            try {
+                await bootStrapEnvironment(component);
+                expect(component.viewModel.fillSpace).toBe(false);
+                done();
+            } catch (e) {
+                done.fail(e);
+            }
+        });
+
         describe('CSS Classes', () => {
             it('css class: center', async done => {
                 component = StageComponent.withResources().inView('<l-center></l-center>');

diff --git a/src/layouts/l-center/l-center.ts b/src/layouts/l-center/l-center.ts
@@ -10,6 +10,8 @@ export class LCenter {
     @bindable
     public intrinsic = false;
     @bindable
+    public fillSpace = false;
+    @bindable
     public maxWidth = 'none';
     @bindable
     public spacing = '0';
@@ -26,5 +28,9 @@ export class LCenter {
         if (typeof this.textCenter !== 'boolean') {
             this.textCenter = false;
         }
+
+        if (typeof this.fillSpace !== 'boolean') {
+            this.fillSpace = false;
+        }
     }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
         list-style: none;
     }
+    .nav-horizontal ul li{
+        text-transform: var(--nav-text-transform);
+    }
@@ Expand Down @@